<style>
        @font-face {
            font-family: syncQFontLight;
            src: url(fonts/Muli-Light.woff);
        }
        @font-face {
            font-family: syncQFontRegular;
            src: url(fonts/Muli-Regular.woff) format('woff');
        }
        @font-face {
            font-family: syncQFontRegularItalics;
            src: url(fonts/Muli-Italic.woff) format('woff');
        }
        @font-face {
            font-family: syncQFontSemiBold;
            src: url(fonts/Muli-SemiBold.woff) format('woff');
        }
        div {
            font-family: syncQFontRegular;
        }
        html, body {
            height: 100%;
            margin: 0;
            font-family: Arial, sans-serif;
            background:#212121;
        }
        
        /* END OF HEADER*/		

        header {
            position: fixed;
            top: 0px; /* Adjust position for outer margin */
            margin-left: 1px; /* Adjust position for outer margin */
            width: calc(100% - 6px); /* Adjust width for outer margin */
            height: calc(110px - 6px); /* Adjust height for outer margin */
            text-align: center;
            z-index: 1000;
            background-color: #1f1f1f;
            margin: 2px; /* Outer margin */
            margin-top: 0px; /* Outer margin */
            border: 1px solid #1f1f1f; /* 2px solid border */
            border-radius: 2px; /* Rounded corners */
            padding: 2px; /* Inner padding */
            box-sizing: border-box; /* Include padding and border in the element's total width and height */
            display: flex; /* Use flexbox */
		    flex-direction: column; /* Stack children vertically */
        }
        
        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 18px;
        }
        .left-header-content {
            display: flex;
            align-items: center;
        }
        .syncq-logo {
            height: 50px;
        }
        .syncq-logo:hover{
            cursor:pointer;
        }
        .header-text {
			margin-left: 10px;
			background: -webkit-linear-gradient(left, #35d840, #08a8fe);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			color: transparent;
			font-size:22px;
        }
        .syncq-user {
            position: relative;
		    font-size: 35px;
		    border-radius: 50%;
		    background: -webkit-linear-gradient(left, #35d840, #08a8fe);
		    -webkit-background-clip: text;

		    background-clip: text;
		    color: transparent;
        }
        .syncq-user:hover{
            cursor:pointer;
        }
        
		.my-settings-tooltip {
		    position: absolute;
		    top: 100%; /* Position below the icon */
		    left: -70%; /* Center horizontally relative to the parent */
		    transform: translateX(-50%); /* Align center of tooltip with center of parent */
		    background-color: #283747;
		    color: white;
		    padding: 15px 15px;
		    border-radius: 5px;
		    font-size: 14px;
		    white-space: nowrap;
		    visibility: hidden; /* Hide by default */
		    opacity: 0; /* Hide by default */
		    transition: opacity 0.3s, visibility 0.3s;
		    z-index: 1; /* Ensure tooltip is above other elements */
		}
		
		.my-settings-tooltip::after {
		    content: "";
		    position: absolute;
		    bottom: 100%; /* Position the arrow above the tooltip */
		    left: 80%;
		    transform: translateX(-50%);
		    border-width: 10px;
		    border-style: solid;
		    border-color: transparent transparent #283747 transparent;
		}
		
		.syncq-user:hover .my-settings-tooltip {
		    visibility: visible;
		    opacity: 1;
		    cursor:pointer;
		}  
		.syncq-menu {
		    width: calc(100% - 12px)%; /* Full width minus some margin */
		    height:45px;
		    background: linear-gradient(to bottom right, #2d3e50, #253342);
		    color: white;
		    line-height: 25px;
		    display: flex;
		    justify-content: flex-start;
		    align-items: center;
		    padding: 0 18px;
		    margin-top: 2px; /* Add a margin at the top */
		    border-radius: 2px;
		    box-sizing: border-box;
		}
		.company-text {
            font-size: 15px; /* Adjust text size */
            font-weight:600;
            color: #35d840;
            margin-left: 10px; /* Add some left margin to separate from the logo */
        }
        
        .delete-icon{
			margin:10px;
			cursor: pointer;
			color: #f4f4f4;
	
		}
		
		.menu-icons-right {
            display: flex;
            align-items: center;
            margin-left: auto;
        }

        .menu-icon {
            font-size: 20px;
            color: #f4f4f4;
            cursor: pointer;
            margin-left: 10px;
        }		
		
        
        .menu-icon .red{
            color: white; /* Adjust the color of the icon */
        }
        
        .menu-icon .yellow{
            color: yellow; /* Adjust the color of the icon */
        }
        
        .intacct-company {
        	font-size:14px;
            color: black;
            background-color: #f4f4f4;
            width:200px;
        }
        .hubspot-connect {
          display: flex; /* Use flexbox */
          align-items: center; /* Align vertically in the center */
          justify-content: center; /* Align horizontally in the center (optional, if you want it centered horizontally as well) */
          font-size: 20px;
          color: #f4f4f4;
          cursor: pointer;
          margin-left: 10px;
          height: 40px; /* Set a specific height for the div */
        }

        .intacct-setup-button {
	        width: 160px;
            height: 30px;
		    border: 2px solid #005c33; /* Darker border for bevel effect */
		    margin-left:10px;
		    border-radius: 2px;
		    background-color: #007e45;
		    color: white;
		    cursor: pointer;

		    font-size: large;
		    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), /* Inner shadow for depth */
		               0 2px 4px rgba(0, 0, 0, 0.4); /* Outer shadow for lift effect */
		    text-shadow: -1px -1px 1px #005c33, /* Text shadow for engraved look */
		                1px 1px 1px #005c33;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		}

        .intacct-setup-button:hover{
        	background-color: #01502c;
	
		}
        
        .intacct-configure-button {
            width: 160px;
            height: 30px;
            border: 2px solid #8B0000; /* Dark red border for bevel effect */
            margin-left: 10px;
            border-radius: 2px;
            background-color: #B22222; /* Firebrick red background */
            color: white;
            cursor: pointer;

            font-size: large;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), /* Inner shadow for depth */
                       0 2px 4px rgba(0, 0, 0, 0.4); /* Outer shadow for lift effect */
            text-shadow: -1px -1px 1px #8B0000, /* Text shadow for engraved look */
                         1px 1px 1px #8B0000;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .intacct-configure-button:hover {
            background-color: #8B0000; /* Darker red on hover */
        }

 
		/*END OF HEADER*/
		 
		 
		/* The Modal (background) */
		
		.modal {
			display: none; /* Hidden by default */	
		  
			position: fixed; /* Stay in place */
			z-index: 5000; /* Sit on top */
			padding-top: 50px; /* Location of the box */
			left: 0;
			top: 0;
			width: 100%; /* Full width */
			height: 100%; /* Full height */
			overflow: auto; /* Enable scroll if needed */
			background-color: rgb(0,0,0); /* Fallback color */
			background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
			border-radius: 2px;   
		}
		
		/* Modal Content */
		.modal-content {
			position: relative;
			background-color: #fefefe;
			margin: auto;
			padding: 0;
			border: 0px solid #888;
			border-radius: 4px;
			
			
			width: 80%;

			-webkit-animation-name: animatetop;
			-webkit-animation-duration: 0.4s;
			animation-name: animatetop;
			animation-duration: 0.4s;
			box-shadow: 
			    0 0 3px rgba(8, 168, 254, 0.2),   /* Innermost shadow with very low opacity */
			    0 0 3px 1px rgba(8, 168, 254, 0.15), /* Slightly larger shadow with even lower opacity */
			    0 0 3px 2px rgba(8, 168, 254, 0.1),  /* Larger shadow with further reduced opacity */
			    0 0 3px 3px rgba(8, 168, 254, 0.05), /* Even larger shadow with extremely low opacity */
			    0 0 3px 4px rgba(8, 168, 254, 0.02);    /* Largest shadow, almost imperceptible opacity */
		}
		
		/* Add Animation */
		@-webkit-keyframes animatetop {
			from {top:-400px; opacity:0} 
			to {top:0; opacity:1}
		}
		
		@keyframes animatetop {
			from {top:-400px; opacity:0}
			to {top:0; opacity:1}
		}
		
		/* The Close Button */
		.modal-close {
			color: white;
			float: right;
			font-size: 28px;
			font-weight: bold;
            
		}
		
		.modal-close:hover,
		.modal-close:focus {
			color: yellow;
			text-decoration: none;
			cursor: pointer;
		}
		
		.modal-header {
			padding: 2px 12px;
			background-color: #1f1f1f;
			color: white;
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
		}
		
		.modal-body {
			padding: 20px 16px;
			background-color: #3a3a3a;
			color:white;
		}
		
		.modal-buttons {
		    display: flex;
		    justify-content: flex-end; /* Aligns items to the right */
		    padding-top: 10px; /* Adds some space above the buttons */
		}

		.modal-save-button, .modal-cancel-button {
		    margin-left: 5px; /* Adds spacing between buttons */
		}		
		.modal-footer {
			padding: 2px 12px;
			background-color: #1f1f1f;
			color: white;
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
		} 
		
		.modal-save-button {
	        width: 160px;
            height: 30px;
		    border: 2px solid #005c33; /* Darker border for bevel effect */
		    margin-left:10px;
		    border-radius: 2px;
		    background-color: #007e45;
		    color: white;
		    cursor: pointer;

		    font-size: large;
		    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), /* Inner shadow for depth */
		               0 2px 4px rgba(0, 0, 0, 0.4); /* Outer shadow for lift effect */
		    text-shadow: -1px -1px 1px #005c33, /* Text shadow for engraved look */
		                1px 1px 1px #005c33;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		}

        .modal-save-button:hover{
        	background-color: #01502c;
	
		}
		
		.modal-cancel-button {
		    width: 160px;
		    height: 30px;
		    border: 2px solid #005c33; /* Darker border for bevel effect */
		    margin-left: 10px;
		    border-radius: 2px;
		    background-color: #6c757d; /* Updated background color */
		    color: white;
		    cursor: pointer;
		
		    font-size: large;
		    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), /* Inner shadow for depth */
		               0 2px 4px rgba(0, 0, 0, 0.4); /* Outer shadow for lift effect */
		    text-shadow: -1px -1px 1px #005c33, /* Text shadow for engraved look */
		                1px 1px 1px #005c33;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		}

		.modal-cancel-button:hover{
        	background-color: #565e64;
	
		}
        
        .modal-header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            color: white;
        }
        .modal-header-content button {
            cursor: pointer;  /* Specifically targets buttons within modal-header-content */
        }
        /* Hover effect for the button */
        #setup2faButton:hover {
            background-color: #4A90E2; /* Change to your preferred hover background color */
            color: #ffffff; /* Change text color for better visibility */
        }


		
		#intacct_configTable {
		    border-collapse: collapse;
		    width: 100%;
		}
		
		#intacct_configTable td, #configTable th {
		    border: 1px solid #3a3a3a;
		    padding: 8px;
		    border-radius: 2px;
		}
		
		#intacct_configTable tr:nth-child(odd) {
		    background-color: #2a2a2a;
		}
		
		#intacct_configTable tr:nth-child(even) {
		    background-color: #1e1e1e;
		}
		
		#intacct_configTable tr:hover {
		    background-color: #1e1e1e;
		}
		
		#intacct_configTable th {
		    padding-top: 12px;
		    padding-bottom: 12px;
		    text-align: left;
		    background-color: #4CAF50;
		    color: white;
		}
        
        @keyframes blinker {
          50% {
            opacity: 0;
          }
        }

        .blink-image {
          animation: blinker 1s linear infinite;
        }
        
        #setup2faButton {
            margin-left: auto; /* Pushes the button to the right */
        }

/*END OF MODAL*/


		
		
		/*MAIN CONTENT BELOW HEADER*/
        
        .content {
		    margin-top: 0px; /* Offset for the fixed header */
		    padding: 2px; /* Inner padding */
		        background: linear-gradient(to right, #212121, #212121); /* Example gradient */
		    margin-left: 2px; /* Adjust position for outer margin */
		    width: calc(100% - 6px); /* Adjust width for outer margin */
		    box-sizing: border-box;
		    display: flex;
		    justify-content: center;
		    border-radius: 2px;
		    /* Remove the fixed height to allow the box to grow with its content */
		    
		     display: flex;
		    flex-direction: column; /* Stack children vertically */
		    align-items: center; /* Center items horizontally */
		}
		
		/*
		syncq-mappings
		*/
		.syncq-config {
		    display: flex;
			margin-top: 0px; /* Add some padding at the top and bottom */
		    background: #1e1e1e;
		    justify-content: center;
		    align-items: center;
		    
		    margin-left: 1px; /* Adjust position for outer margin */
		    width: calc(100% - 6px); /* Adjust width for outer margin */
		    background-color: #1f1f1f;
		    margin: 2px; /* Outer margin */
		    border-radius: 2px; /* Rounded corners */
		    padding: 2px; /* Inner padding */
		}
        
        .loader {
            display: none; /* Hidden by default */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.2); /* Optional: Overlay background */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index:20000;
            text-align: center;
            width: 100%;
            height: 100%;
            left: 50%; /* Center horizontally */
            top: 50%; /* Center vertically */
            transform: translate(-50%, -50%); /* Adjust for exact centering */
        }

        .loader img {
            display: inline-block;
            vertical-align: middle;
        }
        
        #intacct_config_notificationMessage {
            position: absolute; /* Absolute position within the header */
            top: 40px; /* Positioned at the bottom of the header */
            left: 8px; /* Align to the left side */
            width: 100%; /* Full width of the header */
            color: yellow; /* Text color */
            font-size: 10px; /* Font size */
            padding: 5px; /* Padding around the text */
            box-sizing: border-box; /* Includes padding in width calculation */
        }		
                
        
		/* Clearfix for floated elements */
		.clearfix{
		    width:99.8%;
		}
		
		.clearfix::after {
		    content: "";
		    display: table;
		    clear: both;
		}
		
		.table-container {
		    border: 1px solid #636363; /* 1px border with specified color */
		    padding: 2px; /* Creates space between the table and the border */
		    /* Other styling as needed */
		    width: 99.8%;
		    border-radius: 2px;
		    display: block; /* Ensures each table container is a block-level element */
            font-size: 13px;
            text-align: left;
		}
		
		.syncq-config .table-container:nth-child(2),
		.syncq-config .table-container:nth-child(3) {
		    margin-top: 5px; /* Setting top margin to 20px */
		}
		
		.config-table {
		    width: 99.8%;
		    border-collapse: collapse;
		    color:white;
		}
		
		
		
		.config-table thead {
		    background-color: #2a3a4b; /* Updated header background color */
		    color: white; /* Font color for header text */
		}
		
		.config-table thead tr th {
		    background-color: #181818; /* Slightly darker than body background */
		    color: white; /* Ensuring text is readable */
		}
		
		.config-table th,
		.config-table td {
		    border: 1px solid #ddd;
		    text-align: center;
		    padding: 8px;
		    border: none; /* Removes borders from the header cells */
		}
		
		.config-table th {
		    height: 20px;
		}
		
		.config-table tr:nth-child(odd) {
		    background-color: #3a3a3a; /* Medium gray for odd rows */
		}
		
		.config-table tr:nth-child(even) {
		    background-color: #323232; /* Lighter gray for even rows */
		}
		
		.config-table td:nth-child(-n+4), .config-table th:nth-child(-n+4) {
		    text-align: left;
		    padding-left: 8px; /* Adjust padding as needed */
		}
		
		.config-table td:nth-child(1) {
		    width: 120px;
		}
		.config-table td:nth-child(2),
		.config-table td:nth-child(3) {
		    width: 35%;
		}
		.config-table td:nth-child(4),
		.config-table td:nth-child(5),
		.config-table td:nth-child(6) {
		    width: 6%;
		}
		
		/* Icon hover effect and cursor change */
		.config-table .fa-regular, .fa-solid{
		    cursor: pointer;
		}
		
		.config-table .fa-regular:hover, .fa-solid:hover{
		    color: yellow; /* Change icon color on hover */
		}
		.config-table .fa-solid:nth-child(6):hover{
		    color: red; /* Change icon color on hover */
		}
		
		.config-table td:nth-child(6):hover{
		    color: red; /* Change icon color on hover */
		}
		
		
		/* Tooltip styling */
		.icon-container {
		    position: fixed;
		    display: inline-block; /* or inline-flex */
		    cursor: pointer; /* If you want to change cursor on hover */
		}
		.config-tooltip {
		    visibility: hidden;
		    width: 320px;
		    height: 120px;
		    background-color: black;
		    color: white;
		    text-align: center;
		    border-radius: 6px;
		    padding: 5px 0;
		    position: absolute;
		    z-index: 1;
		    bottom: 100%;
		    margin-left: -60px; /* Adjust to ensure the tooltip is centered */
		    position: absolute;
		    top: 50%; /* Adjust these values as necessary */
		    left: 70%;
		    transform: translate(-50%, -50%);
		    /* Transition for smooth appearance */
		    opacity: .7;
		    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
		}
		
		.icon-container:hover .config-tooltip {
		    visibility: visible;
		    opacity: 1;
		}
		
		td:hover .config-tooltip {
		    visibility: visible;
		    /* Optional: Add more styling for the visible state */
		}
		
		.popup-container {
			position: fixed;
		    z-index: 1000;
		    left: 50%;
		    top: 50%;
		    width: 80%;
		    height: 80%;
		    background-color: rgba(0, 0, 0, 0.5);
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    transform: translate(-50%, -50%);
		    /* Additional styles for visibility and aesthetics */
		    overflow: auto; /* In case the content overflows */
		    border-radius: 10px; /* Optional, for rounded corners */
		    padding: 20px; /* Optional, for some internal spacing */
		}
		.popup-content {
		    background: white;
		    padding: 20px;
		    border-radius: 5px;
		    text-align: center;
		}
		
		.popup-content .mapping-explaination-close {
		    float: right;
		    cursor: pointer;
		}
		
		.config-table .fas:hover + .tooltip {
		    visibility: visible;
		    opacity: 1;
		}
		
		.map-button {
		    background-color: #007e45;
		    border: none;
		    color: white;
		    padding: 5px 10px;
		    cursor: pointer;
		    border-radius: 2px;
		}
		
		.map-button:hover {
		    background-color: #005c33;
		}
		
		.config-table select {
		    padding: 4px;
		    border-radius: 2px;
		    border: 1px solid #ddd;
		}
		
		
		.error-message {
            width: 100%;
            background-color: #ffcccc; /* Light red background */
            color: #ff0000; /* Red text color */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            border-radius: 8px;
            box-sizing: border-box;
            margin-top: 2px;
            border-radius: 8px;
            box-sizing: border-box;
            background: linear-gradient(to right, #1e1e1e, #1e1e1e);
        
        }    
		
		
		/*
		syncq-app
		*/
		.syncq-app {
		    display: flex;
		    justify-content: space-between; /* Align children with space between */
		    align-items: center; /* Align items vertically in the center */
			padding: 4px 0; /* Add some padding at the top and bottom */
		
		    gap: 40px; /* Set horizontal gap */
		    background: #1e1e1e;
		    margin-top: 120px;
            width: 100%;
		}
		.hubspot-div, .sync-div, .intacct-div {
		    position: relative;
		
		    height: 750px;
		    background-color: #1e1e1e;
		    border-radius: 8px;
		    box-sizing: border-box;
		    padding: 10px;
		    margin-bottom: 10px;
		    background: linear-gradient(to right, #1e1e1e, #1e1e1e);
		
		}
		
		.hubspot-div {
		    width: 40%;
		    align-self: flex-start; /* Align to the left */
		    margin-left: 10px; /* Margin from the left */    
		    
		    display: flex;
		    flex-direction: column;
		    align-items: flex-start;
		    align-self: flex-start; /* Align to the left */
		    
		    /* Very light box shadow with color fading from #ff7a59 to transparent */
		    box-shadow: 
		        0 0 5px rgba(255, 122, 89, 0.3),   /* Red color with lower opacity */
		        0 0 5px 1px rgba(255, 122, 89, 0.25),
		        0 0 5px 2px rgba(255, 122, 89, 0.2),
		        0 0 5px 3px rgba(255, 122, 89, 0.15),
		        0 0 5px 4px rgba(255, 122, 89, 0.1);
		
		}
		
		
		.hubspot-div .logo {
		    height: 50px; /* Fixed height for the logo */
		    width: 100px; /* Adjust width to maintain aspect ratio */
		    background-image: url('images/hubspot_logo.png');
		    background-size: contain; /* Adjust size to fit within the container */
		    background-repeat: no-repeat; /* Prevent image repetition */
		    margin-left: 10px; /* Left align logo with 10px margin */
		}
	
        .hubspot-div .horizontal-line {
            width: 98%;
            height: 3px;
            background: linear-gradient(to bottom, #ff7a59, #fcbbab); /* Gradient effect */
            box-shadow: inset 0px 1px 2px #000000; /* Inset shadow for cut effect */
            position: absolute;
            top: 105px; /* Positioning below the title */
            left: 1%; /* Centering the line */
        }


        .hubspot-div .info {
             position: absolute;
		    left: calc(60% + 2px); /* Start just right of the vertical line; adjust '2px' as needed */
		    width: calc(37% - 2px); /* 90% of the parent width minus the offset from the vertical line */
		    height:3px;
		    font-size: 16px;
		    font-weight: bold;
		    background-color: #ff7a59;
		    color: white;
		    padding: 3px;
		    border-radius: 6px;
		    /* Adjust the top position as needed */
		    top: 10px; /* Example hubspot-record-, adjust as needed */        
	    }
        
        
        .hubspot-div .hubspot-record-info {
		    display: flex;
		    align-items: center;
		    margin-left: 10px; /* Margin from the left */
		    margin-top: 0px;
		}
		
		.hubspot-div .hubspot-record-info .hubspot-record-text p {
		    margin-top: 0px; /* Reduced space above each paragraph */
		    margin-bottom: 2px; /* Reduced space below each paragraph */
		    /* Other styles like font-size and color */
		}
		
		.hubspot-div .hubspot-record-icon {
		    /* Style for the icon */
		    color: #ff7a59; /* Example color */
		    margin-right: 10px; /* Spacing between icon and text */
		    font-size:36px;
		}
		
		.hubspot-div .hubspot-record-text {
		    text-align: left;
		}
		
		.hubspot-div .hubspot-record-text .hubspot-record-row {
		    font-size: 12px;
		    color: white;
		}
		
		.hubspot-div .hubspot-record-text .hubspot-record-name {
		    font-size: 14px;
		    color: white;
		}
		
		.hubspot-div .hubspot-record-text .hubspot-record-amount {
		    font-size: 18px;
		    font-weight: bold;
		    color: white;
		}
		     
		     
		.scrollable-record-details{
            font-size: 12px;
			width: 100%; /* Full width of the container */
		    /*max-height: 300px; *//* Adjust based on your requirement */
		    overflow-y: auto;
		    margin-bottom: 10px; /* Spacing between this table and the next content */
		    margin-top:10px;
		}
		
		/* Styling the scrollbar track (the background of the scrollbar) */
		.scrollable-record-details::-webkit-scrollbar-track {
		    border-radius: 5px;
		    background-color: #f1f1f1; /* Adjust the color as needed */
		}
		
		/* Styling the scrollbar handle */
		.scrollable-record-details::-webkit-scrollbar-thumb {
		    border-radius: 5px;
		    background-color: #888; /* Adjust the color as needed */
		}
		
		/* Styling the width of the scrollbar */
		.scrollable-record-details::-webkit-scrollbar {
		    width: 10px;
		} 
		
		     
		.record-details, .record-line-items {
		    width: 100%; /* Full width of the container */
		    border-collapse: collapse;
		    margin-top: 0px; /* Spacing after the horizontal line */
		    color:white;
		}
		
		.record-details tr:nth-child(odd),
		.record-line-items tr:nth-child(odd) {
		    background-color: #2a2a2a; /* Slightly lighter than #1e1e1e */
		}
		
		.record-details tr:nth-child(even),
		.record-line-items tr:nth-child(even) {
		    background-color: #1e1e1e;
		}
		
		.record-details td,
		.record-line-items th,
		.record-line-items td {
		    border: 1px solid #3a3a3a; /* Adjust color as needed */
		    padding: 5px;
		    text-align: left;
		}
		
		.record-line-items thead tr{
		    background-color: #181818; /* Header background */
		    color: #ff7a59; /* Header text color */
		}
		   
		  
		
		.record-line-items .input-description,
		.record-line-items .input-currency,
		.record-line-items .input-qty,
		.record-line-items .input-date,
		.record-line-items .input-tax,
		.record-line-items .input-class {
		    width: 100%; /* Full width of the cell */
		    border: 1px solid #ccc; /* Light border */
		    padding: 4px; /* Padding for text area */
		    box-sizing: border-box; /* Include padding and border in width and height */
		}
		
		.record-line-items .input-description {
		    height: 40px; /* Fixed height for textarea */
		    resize: vertical; /* Allow vertical resizing only */
		}
		
		.record-line-items .input-currency,
		.record-line-items .input-qty {
		    text-align: right; /* Right align for numeric inputs */
		}
		
		/* Adjust the select dropdown arrow to be consistent across browsers */
		.record-line-items .input-tax,
		.record-line-items .input-class {
		    -webkit-appearance: none;
		    -moz-appearance: none;
		    appearance: none;
		    background: url('images/dropdown-arrow.png') no-repeat right; /* Path to your arrow icon */
		    background-size: 12px; /* Size of the arrow icon */
		}
		
		     
		     
		     
		/* MIDDLE COLUMN, SYNC DIV*/     
		
		
		.sync-div {
			width:20%;
			display: flex; /* Enable Flexbox */
		    flex-direction: column; /* Stack children vertically */
		    justify-content: top; /* Vertically top content in the container */
		    align-items: center; /* Horizontally center content in the container */
		    gap: 10px; /* Optional: space between buttons */}
		   
		        
		.sync-div .sync-warning {
		    color: #ffcc00; /* Warning color */
		    margin-bottom: 10px; /* Space above the button */
		    text-align: center; /* Center the text */
		    font-size:16px;
		}
		
		.sync-div .sync-warning a {
		    color: inherit; /* Use the same color as the warning text */
		    text-decoration: underline; /* Make it look like a clickable link */
		    text-decoration: none; /* Removes the underline from the link */
		}
		
		.sync-div .sync-warning i {
		    margin-right: 5px; /* Space between icon and text */
		}
		        
		.sync-to-intacct-button {
		    padding: 10px 20px;
		    width: 90%;
		    height: 40px;
		    border: 2px solid #005c33; /* Darker border for bevel effect */
		    border-radius: 4px;
		    background-color: #007e45;
		    color: white;
		    cursor: pointer;
		    margin-bottom: 10px;
		    font-size: large;
		    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), /* Inner shadow for depth */
		               0 2px 4px rgba(0, 0, 0, 0.4); /* Outer shadow for lift effect */
		    text-shadow: -1px -1px 1px #005c33, /* Text shadow for engraved look */
		                1px 1px 1px #005c33;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		}
		
		.sync-to-intacct-button:hover {
		    background-color: #005c33; /* Darker background on hover */
		    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3), /* Enhanced inner shadow for depth */
		               0 3px 5px rgba(0, 0, 0, 0.5); /* Enhanced outer shadow for lift effect */
		    border: 2px solid #004822; /* Darker border for enhanced bevel effect */
		    text-shadow: -1px -1px 1px #004822, /* Enhanced text shadow for a deeper engraved look */
		                1px 1px 1px #004822;
		}
		
		.sync-from-intacct-button {
		    padding: 10px 20px;
		    width: 90%;
		    height: 40px;
		    border: 2px solid #c65842; /* Adjusted border color for bevel effect */
		    border-radius: 4px;
		    background-color: #ff7a59; /* Updated base color */
		    color: white;
		    cursor: pointer;
		    margin-bottom: 10px;
		    font-size: large;
		    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), /* Inner shadow for depth */
		               0 2px 4px rgba(0, 0, 0, 0.4); /* Outer shadow for lift effect */
		    text-shadow: -1px -1px 1px #c65842, /* Text shadow for engraved look */
		                1px 1px 1px #c65842;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		}
		
		.sync-from-intacct-button:hover {
		    background-color: #c65842; /* Darkened background on hover */
		    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3), /* Enhanced inner shadow for depth */
		               0 3px 5px rgba(0, 0, 0, 0.5); /* Enhanced outer shadow for lift effect */
		    border: 2px solid #a04634; /* Darker border for enhanced bevel effect */
		    text-shadow: -1px -1px 1px #a04634, /* Enhanced text shadow for a deeper engraved look */
		                1px 1px 1px #a04634;
		}

/* END OF MIDDLE COLUMN, SYNC DIV*/     

/* RIGHT COLUMN, INTACCT DIV*/     

		.intacct-div {
		    width: 40%;
		    align-self: flex-end; /* Align to the right */
		    margin-right: 10px; /* Margin from the right */
		    display: flex;
		    flex-direction: column;
		    align-items: flex-start; /* Align items to the start (left) */
		
		    /* Lighter box shadow */
		    box-shadow: 
		        0 0 5px rgba(0, 126, 69, 0.3),   /* Red color with lower opacity */
		        0 0 5px 1px rgba(0, 126, 69, 0.25),
		        0 0 5px 2px rgba(0, 126, 69, 0.2),
		        0 0 5px 3px rgba(0, 126, 69, 0.15),
		        0 0 5px 4px rgba(0, 126, 69, 0.1);
		}

		.intacct-div .logo {
		    width: 110px;
		    height: 50px;
		    background-image: url('images/sage_logo.png');
		    background-size: contain; /* Adjust size to fit within the container */
		    background-repeat: no-repeat; /* Prevent image repetition */
		    margin-left: 10px; /* Left align logo with 10px margin */		
		}
		
		
		.intacct-div .intacct-record-info {
		    display: flex;
		    margin-top: 0px;
		    display: flex;
		    align-items: center;
		    margin-left: 10px; /* Align with the logo */
		    width: 100%; /* Adjust width to fit the parent container */
		}
		

        .intacct-div .intacct-info {
             position: absolute;
		    left: calc(60% + 2px); /* Start just right of the vertical line; adjust '2px' as needed */
		    width: calc(37% - 2px); /* 90% of the parent width minus the offset from the vertical line */
		    height:3px;
		    font-size: 16px;
		    font-weight: bold;
		    background-color: #007e45;
		    color: white;
		    padding: 3px;
		    border-radius: 6px;
		    /* Adjust the top position as needed */
		    top: 10px; /* Example hubspot-record-, adjust as needed */        
	    }
	    
	    .intacct-div .horizontal-line {
            width: 96%;
            height: 3px;
            background: linear-gradient(to bottom, #00d639, #01fb44); /* Gradient effect */
            box-shadow: inset 0px 1px 2px #000000; /* Inset shadow for cut effect */
            position: absolute;
            top: 110px; /* Positioning below the title */
            left: 2%; /* Centering the line */
        }



		.intacct-div .intacct-record-info .intacct-record-text p {
		    margin-top: 0px; /* Reduced space above each paragraph */
		    margin-bottom: 2px; /* Reduced space below each paragraph */
		    /* Other styles like font-size and color */
		}
		
		.intacct-div .intacct-record-icon {
		    /* Style for the icon */
		    color: #ff7a59; /* Example color */
		    margin-right: 10px; /* Spacing between icon and text */
		    font-size:36px;
		}
		
		.intacct-div .intacct-record-text {
		    text-align: left;
		}
		
		.intacct-div .intacct-record-text .intacct-record-row {
		    font-size: 12px;
		    color: white;
		}
		
		.intacct-div .intacct-record-text .intacct-record-name {
		    font-size: 14px;
		    color: white;
		}
		
		.intacct-div .intacct-record-text .intacct-record-amount {
		    font-size: 18px;
		    font-weight: bold;
		    color: white;
		}
		.intacct-div .record-details{
		    margin-top: 0px; /* Spacing after the horizontal line */
		}
		
		
		.intacct-div .record-line-items thead tr{
		    background-color: #181818; /* Intacct Header background */
		    color: #007e45; /* Header text color */
		}
		
		
		
		/*
		unsubscribed users
		*/

		.syncq-new-user {
			display: block;
		}
		/*
		subscription plans
		*/
		
		.syncq-plans {
			display: flex;
		    justify-content: center;
		    gap: 40px; /* Set horizontal gap to 25px */
		    
		    padding-top: 120px; /* Add some padding at the top and bottom */
		    box-sizing: border-box;
		    display: flex;
		    background:#1e1e1e;
		
		}
		
		.plan {
		    position: relative;
		    width: 300px;
		    height: 630px;
		    background-color: #1e1e1e; /* Background color */
		    border-radius: 20px;
		    display: flex;
		    flex-direction: column;
		    justify-content: space-between;
		    align-items: center;
		    box-sizing: border-box;
		    padding: 15px;
		    margin-bottom: 10px;
		    background: linear-gradient(to right, #1e1e1e, #1e1e1e); /* Uniform gradient background */
		
		    /* Box shadow with color fading from #08a8fe to transparent */
		    box-shadow: 
		        0 0 5px rgba(8, 168, 254, 0.5),   /* Innermost shadow with moderate opacity */
		        0 0 5px 1px rgba(8, 168, 254, 0.4), /* Slightly larger shadow with reduced opacity */
		        0 0 5px 2px rgba(8, 168, 254, 0.3),  /* Larger shadow with more reduced opacity */
		        0 0 5px 3px rgba(8, 168, 254, 0.2), /* Even larger shadow with low opacity */
		        0 0 5px 4px rgba(8, 168, 254, 0.1);    /* Largest shadow, very light opacity */
		}
		
		
		.plan-details {
		    text-align: center;
		}
		
		.plan-name {
		    font-size: 30px;
		    font-weight: bold;
		    margin-bottom: 10px;
		}
		
		.plan-explanation {
		    font-size: 12px; /* Set text size to 12px */
		    font-weight: normal; /* Regular font */
		    text-align: center; /* Center aligned text */
		    padding-top: 12px; /* 15px padding at the top */
		    padding-bottom: 12px; /* 15px padding at the bottom */
		    color:white;
		}
		
		.plan-price {
		    font-size: 70px; /* Font size for the price amount */
		    font-weight: bold;
		    text-align: center;
		}
		
		.plan-name, .plan-price {
		    background: -webkit-linear-gradient(left, #35d840, #08a8fe);
		    -webkit-background-clip: text;
		    -webkit-text-fill-color: transparent;
		    background-clip: text;
		    color: transparent; /* Fallback color if the browser doesn't support background-clip */
		}
		
		.plan-price sup {
		    font-size: 30px; /* Smaller font size for the $ symbol */
		}
		
		.plan-per-month {
		    font-size: 20px; /* Smaller font size for 'user/month' */
		    text-align: center;
		}
		
		.plan-features {
		    list-style: none; /* Remove default list styling */
		    padding: 0; /* Remove default padding */
		    font-size: 12px;
		}
		
		.plan-features li {
		    display: flex; /* Use flexbox for alignment */
		    align-items: center; /* Align icons with text */
		    margin-bottom: 5px; /* Space between list items */
		     color: white;
		}
		
		.plan-features i {
		    color: green; /* Color for the check icon */
		    margin-right: 5px; /* Space between the icon and text */
		}
		.free-trial-button {
		    padding: 10px 20px;
		    width: 90%;
		    height:50px;
		    border: none;
		    border-radius: 2px;
		    background-color: #007bff;
		    color: white;
		    cursor: pointer;
		    margin-bottom: 10px;
		    font-size:large;
		} 
		.free-trial-button:hover {
            background-color: #032d60;
        }
		       
		.toggle-button {
		    width: 30px;
		    height: 30px;
		    background-color: #007bff;
		    border-radius: 50%;
		    color: white;
		    text-align: center;
		    line-height: 30px;
		    cursor: pointer;
		    right: 20px;
		    top: 20px;
		    z-index: 2;
		}
		
		.top-features {
		    display: block;
		    padding: 20px;
		    margin-top: 20px;
		    
		    width: 100%; /* Full width */
		    background:#212121;
		
		}
		
		.top-features table {
		    width: 100%;
		    border-collapse: collapse;
		}
		
		.top-features th, .top-features td {
		    border: 1px solid #ddd;
		    text-align: center;
		    padding: 8px;
		}
		
		.top-features th {
		    background-color: #f4f4f4;
		}
		
		.green {
		    color: green;
		}
		
		.hidden {
		    display: none;
		}   
        
       
        
    </style>