@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    
    --global-full-border-radius                                            : 6px;
    --global-menu-border-radius                                            : 3px 3px 3px 3px;
    --global-section-spacer                                                : 45px;
	--global-section-small-spacer    									   : 12px;
    --global-width-pad                                                     : clamp(5px, calc(2px + (180 - 5) * ((100vw - 320px) / (1440 - 320))), 180px);
    --global-object-shadow                                                 : 4px 4px 10px rgba(0, 0, 0, 0.8);
    --global-object-shadow-l                                               : -4px 4px 12px rgba(0,0,0,0.45);
    --global-button-shadow												   : -2px 2px 5px rgba(0,0,0,0.45);
    --global-object-shadow-r                                               : 4px 4px 12px rgba(0,0,0,0.45);
    --global-text-shadow                                                   : 10px 10px 10px #000000;
    --global-h2-text-shadow                                                : 2px 2px 2px #000000;
    --global-h3-text-shadow                                                : 2px 2px 2px #000000;
    --global-text-shadow-white                                             : 1px 2px 3px #737373;
    --global-border                                                        : 0px solid var(--global-yellow);
    --global-green														   : #00bb00;
    --global-green-hovered												   : #007100;
    --global-yellow                                                        : #f1df01;
    --global-grey														   : #d2d2d2;
    
    --global-black														   : #1e1e1e;

	--font-a																: 'Oswald', sans-serif;
    --font-b																: 'Roboto', sans-serif;
    --quote-font															: 'Lato', sans-serif;
 
    --fixed-top-area-height                                                : 67px;
    --fixed-top-area-background                                            : #313035;
    --fixed-top-area-menu-bar-top-start                                    : 6px;
    --fixed-top-area-skip                                                  : var(--fixed-top-area-height);

    --menu-bar-font                                                        : var(--font-a);
    --menu-bar-font-size                                                   : 1rem;
    --menu-bar-font-weight                                                 : 600;
    --menu-bar-dropped-background                                          : #3a3e39;
    --menu-bar-options-color                                               : var(--global-yellow);
    --menu-bar-options-hover-background                                    : var(--global-yellow);
    --menu-bar-options-hover-color                                         : #313035;
    --menu-bar-transition-speed                                            : .4s;
    --menu-bar-button-bars-color                                           : var(--global-yellow);
    --menu-bar-button-bars-hover-color                                     : #252724;    
    
    --footer-background                                                    : var(--fixed-top-area-background);
    --footer-font-color                                                    : white;
    --footer-area-logo-height                                              : 60px;
    --footer-text-link-font-color                                          : var(--menu-bar-options-color);
    --footer-text-link-hover-color                                         : var(--menu-bar-options-hover-background);
    
    --body-background                                                      : linear-gradient(180deg,rgba(49, 48, 53, 1) 50%, rgba(33, 33, 33, 1) 100%);
    --body-background 														: linear-gradient(180deg,rgba(94, 94, 102, 1) 50%, rgba(71, 71, 71, 1) 100%);
    --body-background : #f9fcff;
        
    --canvas-a-hx-color                                                    : white;
    --canvas-a-text-color                                                  : white;    
    --canvas-a-text-anchor-background                                      : none;
    --canvas-a-text-anchor-color                                           : #3366cc;
    --canvas-a-text-anchor-hover-background                                : none;
    --canvas-a-text-anchor-hover-color                                     : #264b99;
    
    --canvas-b-hx-color                                                    : #3366cc;
    --canvas-b-text-color                                                  : #333333;
    --canvas-b-text-anchor-background                                      : none;
    --canvas-b-text-anchor-color                                           : #3366cc;    
    --canvas-b-text-anchor-hover-background                                : none;
    --canvas-b-text-anchor-hover-color                                     : #264b99;
        
    --canvas-c-hx-color                                                    : black;
    --canvas-c-text-color                                                  : #ffffff; 
    --canvas-c-text-anchor-background                                      : none;
    --canvas-c-text-anchor-color                                           : #3366cc;    
    --canvas-c-text-anchor-hover-background                                : none;
    --canvas-c-text-anchor-hover-color                                     : #264b99;
    
    --canvas-font-size-sm                                                  : 1rem;
    --canvas-font-weight-sm                                                : 300;
    --canvas-font-size-md                                                  : 1.2rem;    
    --canvas-font-weight-md                                                : 400;
    --canvas-font-size-lg                                                  : 1.3rem;
    --canvas-font-weight-lg                                                : 500; 
    --canvas-font-size-xl                                                  : 1.4rem;
    --canvas-font-weight-xl                                                : 600;    
    --canvas-font-size-xxl                                                 : 1.5rem;
    --canvas-font-weight-xxl                                               : 700;    
    
    



/* 1. Define raw numbers for the math */
    --h1-min-num: 1.5;
    --h1-max-num: 3.5;
    
    /* 2. Create the actual rem variables for use elsewhere if needed */
    --font-h1-min: calc(var(--h1-min-num) * 1rem);
    --font-h1-max: calc(var(--h1-max-num) * 1rem);

    /* 3. The Scaling Factor (Math is done with raw numbers) */
    --font-size-h1: clamp(
        var(--font-h1-min),
        calc( var(--h1-min-num) * 1rem + (var(--h1-max-num) - var(--h1-min-num)) * ((100vw - 20rem) / (80 - 20)) ), 
        var(--font-h1-max) 
    );

    /* 4. Chained Logic with a 2rem Floor Protection */
    --line-height-h1: calc(var(--font-size-h1) * 1.2);
    --font-weight-h1: 800;

    /* H2 floor protection */
    --font-size-h2: max(calc(var(--font-size-h1) * 0.8), 2rem);
    --line-height-h2: calc(var(--font-size-h2) * 1.2);
    --font-weight-h2: 700;

    /* H3 floor protection */
    --font-size-h3: max(calc(var(--font-size-h2) * 0.8), 2rem);
    --line-height-h3: calc(var(--font-size-h3) * 1.2);
    --font-weight-h3: 600;

    /* H4 floor protection */
    --font-size-h4: max(calc(var(--font-size-h3) * 0.8), 2rem);
    --line-height-h4: calc(var(--font-size-h4) * 1.2);
    --font-weight-h4: 500;

    /* H5 floor protection */
    --font-size-h5: max(calc(var(--font-size-h4) * 0.8), 2rem);
    --line-height-h5: calc(var(--font-size-h5) * 1.2);
    --font-weight-h5: 400;

    

	--global-button-font-size                                              : 1.1rem;
	--global-button-font-weight                                            : 500;	
	--global-button-padding                                                : 9px;	
	--global-button-height                                                 : 45px;
    --global-button-background                                             : #405268;
    --global-button-color                                                  : white;
    --global-button-background-hovered                                     : #1c232d;
    --global-button-color-hovered                                          : white;        
    --global-button-shadow                                                 : var(--global-object-shadow);
    --global-button-border-radius                                          : 30px;
    --global-button-border                                                 : none;


/* Form Type a styling */
    --form-a-font-family                                                   : var(--font-b);
    --form-a-base-background                                               : #1b1e29;
    --form-a-base-padding  												   : 12px 12px 34px 12px;  /* clamp(1.25rem, 5vw, 3rem); */
    --form-a-base-shadow                                                   : var(--global-object-shadow);
    --form-a-heading-area-background                                       : none;
    --form-a-heading-area-padding                                          : 12px 5px 12px 5px;
    --form-a-heading-area-font-color                                       : #fff304;
    --form-a-heading-area-font-size                                        : 1.5rem;
    --form-a-heading-area-line-height                                      : 1.8rem;    
    --form-a-heading-area-font-weight                                      : 800;
    --form-a-heading-area-padding-2                                        : 5px 5px 18px 5px;
    --form-a-heading-area-font-color-2                                     : #e9e9e9;
    --form-a-heading-area-font-size-2                                      : 1rem;
    --form-a-heading-area-line-height-2                                    : 1.2rem;
    --form-a-heading-area-font-weight-2                                    : 500;

	--form-a-field-area-background-color								   : var(--global-yellow);

    
    --form-a-labels-font-color                                             : black;
    --form-a-labels-font-size                                              : 1rem;
    --form-a-labels-font-weight                                            : 400;

    --form-a-instructions-font-color                                       : #000000;
    --form-a-instructions-font-size                                        : 1rem;
    --form-a-instructions-font-weight                                      : 700;



    
    --form-a-input-font-size                                               : 1rem;
    --form-a-input-font-weight                                             : 400;
    --form-a-input-background-color                                        : #262c31;
    --form-a-input-color                                                   : white;
    --form-a-input-border                                                  : 1px solid #787878;
    --form-a-input-padding                                                 : 12px 12px 12px 12px;
    --form-a-input-margin                                                  : 0px;
    --form-a-input-placeholder-color                                       : #c0c0c0;
    --form-a-input-all-fields-border-radius                                : 24px;
    
	--form-a-submit-button-font-size                                       : 1.1rem;
	--form-a-submit-button-font-weight                                     : 700;	
	--form-a-submit-button-padding                                         : 24px 6px 24px 6px;	
	--form-a-submit-button-height                                          : auto;
	
	--demo-css : #e7d601;
	
    --form-a-submit-button-background 									   : linear-gradient(180deg,rgba(11, 49, 61, 1) 0%, rgba(0, 0, 38, 1) 100%);
    --form-a-submit-button-color                                           : #ffffff;
    --form-a-submit-button-background-hovered                              : linear-gradient(0deg,rgba(18, 17, 17, 1) 0%, rgba(18, 76, 115, 1) 100%);
    --form-a-submit-button-color-hovered                                   : #ebebeb;        
    --form-a-submit-button-shadow                                          : var(--global-button-shadow);
    --form-a-submit-button-border-radius                                   : 34px;
    --form-a-submit-button-border                                          : 4px solid #e8e800;   


	--form-a-menu-button-font-size                                       : 1.2rem;
	--form-a-menu-button-font-weight                                     : 600;	
	--form-a-menu-button-padding                                         : 24px 6px;	
	--form-a-menu-button-height                                          : auto;
    --form-a-menu-button-background   	 								 : linear-gradient(180deg,rgba(11, 49, 61, 1) 0%, rgba(0, 0, 38, 1) 100%);
    --form-a-menu-button-color                                           : white;
    --form-a-menu-button-background-hovered                              : linear-gradient(0deg,rgba(18, 17, 17, 1) 0%, rgba(18, 76, 115, 1) 100%);
    --form-a-menu-button-color-hovered                                   : white;        
    --form-a-menu-button-shadow                                          : var(--global-button-shadow);
    --form-a-menu-button-border-radius                                   : 34px;
    --form-a-menu-button-border                                          : 4px solid #e8e800;  



/* Form Type b styling */
    --form-b-font-family                                                   : 'Muli', sans-serif;
    --form-b-base-background                                               : linear-gradient(138deg,rgba(1, 88, 131, 1) 0%, rgba(0, 101, 149, 1) 71%);
    --form-b-base-padding                                                  : 30px;
    --form-b-base-shadow                                                   : var(--global-object-shadow);
    --form-b-heading-area-background                                       : linear-gradient(138deg,rgba(8, 106, 156, 1) 0%, rgba(0, 101, 149, 1) 71%);  
    --form-b-heading-area-padding                                          : 20px 10px;
    --form-b-heading-area-font-color                                       : white;
    --form-b-heading-area-font-size                                        : 1.4rem;
    --form-b-heading-area-font-weight                                      : 700;
    
    --form-b-labels-font-color                                             : white;
    --form-b-labels-font-size                                              : 1rem;
    --form-b-labels-font-weight                                            : 500;

    --form-b-instructions-font-color                                       : white;
    --form-b-instructions-font-size                                        : 1rem;
    --form-b-instructions-font-weight                                      : 700;
    
    --form-b-input-font-size                                               : 1rem;
    --form-b-input-font-weight                                             : 400;
    --form-b-input-background-color                                        : white;
    --form-b-input-color                                                   : #4a4a4a;
    --form-b-input-border                                                  : 1px solid #787878;
    --form-b-input-padding                                                 : 4px 10px 4px 10px;
    --form-b-input-margin                                                  : 0px;
    --form-b-input-placeholder-color                                       : #ff8040;
    
	--form-b-submit-button-font-size                                       : 1.1rem;
	--form-b-submit-button-font-weight                                     : 500;	
	--form-b-submit-button-padding                                         : 5px 5px 5px 5px;	
	--form-b-submit-button-height                                          : 45px;
    --form-b-submit-button-background                                      : #0080c0;
    --form-b-submit-button-color                                           : white;
    --form-b-submit-button-background-hovered                              : #3e5182;
    --form-b-submit-button-color-hovered                                   : white;        
    --form-b-submit-button-shadow                                          : var(--global-object-shadow);

    --form-b-input-all-fields-border-radius                                : var(--global-full-border-radius);

    --object-padding-sm                                                    : clamp(10px, 2vw, 20px);
    --object-padding-md                                                    : clamp(10px, 3.5vw, 45px);
    --object-padding-lg                                                    : clamp(10px, 4vw, 80px); 
    --object-padding-xl                                                    : clamp(10px, 4.5vw, 120px);
    
    
    
}




html 
{ 
	font-size: 15px;
}


body 
{
    font-family : var(--font-a);
	font-smooth : always;
	-webkit-font-smoothing : antialiased; 
	-moz-osx-font-smoothing : grayscale;
	text-rendering : geometricPrecision;
    background : var(--body-background);
    color : var(--canvas-a-color);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}


input::placeholder {
  text-transform: none; /* keep placeholder as-is */
}


input:read-only {
  background-color: #676767; /* light grey */
}


.accordion {
    width : 100%;
    margin: 0 auto;
    background : black;
    border-radius : var(--global-full-border-radius);
    padding : 30px;
}

.accordionquestion
{
	display : inline-block;
	max-width : 70%;
	background-color : #e9e9e9;
    color : #001224;
    font-family: var(--font-b);     
}

.accordionitem {
    margin : 10px;
    font-family: var(--font-b);     
    border-radius: 5px;
	background-color : #e9e9e9;
    font-weight : 600;
}

.accordionheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
	background-color : #e9e9e9;
    border-radius: 5px;
}


.accordioncircle {
	position : relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    top : -1px;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: yellow;
	font-size : 1.5rem;
	font-weight : 800;
	border-radius : var(--global-full-border-radius);
    box-shadow: var(--global-button-shadow);
    border : none;  
    transition: transform 0.3s ease;
}
.accordioncircle:hover
{
    top : 1px;
    color : yellow;
    background-color : #7a7a7a;    
	cursor : pointer;
}

.accordionarrow {
	font-size : 1.5rem;
	font-weight : 800;
    transition: transform 0.3s ease;
}

.accordionanswer {
    padding: 0px 30px;
    background-color: #f9f9f9;
    font-weight : 400;    
    max-height: 0; /* Start closed */
    overflow: hidden;
    transition: max-height .3s ease-out; /* Sliding effect */
    color : #001224;    
}

.accordionheader.active .accordionarrow {
    transform: rotate(180deg);
}

.accordionheader.active + .accordionanswer {
    max-height: 3000px; /* Adjust the max-height as per the content size */
}

.accordionheading
{
    display : block;
    font-family: var(--font-b); 
    font-size : 1.6rem;
    font-weight : 700;
    line-height : 1.8rem;
    color : #001224;
    background-color : white;
    padding : 4px 4px;
    border-radius : var(--global-full-border-radius);
}


.accent-yellow {
    border-left: 5px solid #f0e633;
    padding-left: 1rem;
    color: #eaeaea; /* Slightly dim the body text to make the H2 pop more */
}


.div-100
{
	height : 100%;
}


.quotes-bg
{
    background-image: 
        linear-gradient(rgba(34, 34, 34, 0.6), rgba(34, 34, 34, 0.6)), /* Dark overlay for legibility */
        url('/images/mixed/quotes-facility.png');
    
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    
    /* 2. Style alignment */
    transition: background-color 0.3s ease; /* Smooth transition if you hover */
}

.fixed-top-area
{
    position          : fixed;
    top               : 0;
    left              : 0;
    width             : 100%;
    z-index           : 500;
    height            : var(--fixed-top-area-height);
    max-height        : var(--fixed-top-area-height);
    padding           : 0px;
    background        : none;
}

.fixed-top-area-combined-section
{
	display           : inline-block;
	width             : 100%;
	background        : var(--fixed-top-area-background);
	height            : var(--fixed-top-area-height);
    max-height        : var(--fixed-top-area-height);
}

.fixed-top-area-logo
{
    position          : relative;
	top               : 0;
	left              : 0;
	padding           : 5px 5px 5px 5px;
	max-height        : var(--fixed-top-area-height);
	z-index           : 510;
}

.fixed-top-area-menu-bar
{
	display           : block;
	float             : right;
    padding-top       : var(--fixed-top-area-menu-bar-top-start);	
	margin-right      : 15px;
    height            : var(--fixed-top-area-height);
    max-height        : var(--fixed-top-area-height);
}

.fixed-top-area-skip
{
	min-height        : var(--fixed-top-area-skip);
}

.block_of_6_icon
{
    background: #4b4750;
    padding: 1rem;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 1.5rem;
    border: 2px solid #e2e2e2;	
	max-height : 80px;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);	
	
}

.block_of_6_canvas
{
	background : linear-gradient(180deg,rgba(38, 38, 38, 1) 0%, rgba(49, 48, 53, 1) 80%);
}


.block-of-6-text-background
{
	background : rgba(0,0,0,.4);
	padding : 12px 10px;

}



.block_of_x_icon
{
    background: #4b4750;
    padding: 1rem;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 1.5rem;
    border: 2px solid #e2e2e2;	
	max-height : 80px;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);	
	
}

.block_of_x_canvas
{
	background : linear-gradient(180deg,rgba(38, 38, 38, 1) 0%, rgba(49, 48, 53, 1) 80%);
}


.block-of-x-text-background
{
	background : rgba(0,0,0,.4);
	padding : 12px 10px;

}


.btn-start 
{
  background : linear-gradient(180deg,rgba(0, 187, 0, 1) 50%, rgba(0, 145, 0, 1) 100%);
  color: #FFFFFF;
  padding: 12px 25px 14px 25px;
  border: 1px solid #76c774;
  border-radius: 40px;

  font-family: var(--font-a);
  font-weight: 600;

  font-size: clamp(1.6rem, 2.2vw, 2.4rem);
  line-height: clamp(1.1, calc(1.4 - 0.2vw), 1.4);
}

/* Hover effect - gets slightly darker */
.btn-start:hover 
{
  background : var(--global-green-hovered);
  cursor: pointer;
}


.btn-start-from-pricing
{
  background : linear-gradient(180deg,rgba(0, 187, 0, 1) 50%, rgba(0, 145, 0, 1) 100%);
  color: #FFFFFF;
  padding: 8px 18px 8px 18px;
  border: 1px solid #76c774;
  border-radius: 40px;

  font-family: var(--font-a);
  font-weight: 600;

  font-size : clamp(1.1rem, 1.2vw, 1.3rem);

}

/* Hover effect - gets slightly darker */
.btn-start-from-pricing:hover 
{
  background : var(--global-green-hovered);
  cursor: pointer;
}

.banner-type-image
{
	max-height : 800px;
	min-height : 250px;
	object-fit : cover;
}


.hero-type-h1-text
{
	font-family : var(--font-a);
	font-size : clamp(3rem, 5vw, 4.5rem);
    line-height: clamp(1.05, calc(1.25 - 0.25vw), 1.25);    
	font-weight: 900;
	color : white;
}


.hero-type-h1-sub-text
{
    display: inline-flex;
    align-items: center;	
    gap: 12px;
    font-family : var(--font-a);
    font-size : clamp(1.6rem, 2vw, 2.5rem);
    line-height: 1;
    font-weight: 900;
    color : var(--global-yellow);
}





.hero-type-h2-text
{
	font-family : var(--font-a);
	font-size : clamp(2rem, 5vw, 3.5rem);
    line-height: clamp(1.05, calc(1.25 - 0.25vw), 1.25);    
	font-weight: 900;
	color : white;
}


.hero-type-h2-sub-text
{
    display: inline-flex;
    align-items: center;	
    gap: 12px;
    font-family : var(--font-a);
    font-size : clamp(1.6rem, 2vw, 2.5rem);
    line-height: 1;
    font-weight: 900;
    color : var(--global-yellow);
}



.width-pad 
{
  padding-left: var(--global-width-pad);
  padding-right: var(--global-width-pad);
}

.object-padding-sm { padding : var(--object-padding-sm);  }
.object-padding-md { padding : var(--object-padding-md);  }
.object-padding-lg { padding : var(--object-padding-lg);  }
.object-padding-xl { padding : var(--object-padding-xl);  }

.canvas-centered
{
	text-align : center;
}

.canvas-a, .canvas-b, .canvas-c
{
	display           : block;
    padding           : var(--object-padding-lg);
    border-radius     : var(--global-full-border-radius);
    
}




.canvas-a-h1, .canvas-b-h1, .canvas-c-h1,
.canvas-a-h2, .canvas-b-h2, .canvas-c-h2,
.canvas-a-h3, .canvas-b-h3, .canvas-c-h3,
.canvas-a-h4, .canvas-b-h4, .canvas-c-h4,
.canvas-a-h5, .canvas-b-h5, .canvas-c-h5
{
	display           : block;
	font-family       : var(--font-a);	
}

.canvas-a-h1, .canvas-b-h1, .canvas-c-h1
{
	font-size         : var(--font-size-h1);
	line-height       : var(--line-height-h1);
	font-weight       : var(--font-weight-h1);
}

.canvas-a-h2, .canvas-b-h2, .canvas-c-h2
{
	font-size         : var(--font-size-h2);
	line-height       : var(--line-height-h2);
	font-weight       : var(--font-weight-h2);
}

.canvas-a-h3, .canvas-b-h3, .canvas-c-h3
{
	font-size         : var(--font-size-h3);
	line-height       : var(--line-height-h3);	
	font-weight       : var(--font-weight-h3);
}

.canvas-a-h4, .canvas-b-h4, .canvas-c-h4
{
	font-size         : var(--font-size-h4);
	line-height       : var(--line-height-h4);	
	font-weight       : var(--font-weight-h4);
}

.canvas-a-h5, .canvas-b-h5, .canvas-c-h5
{
	font-size         : var(--font-size-h5);
	line-height       : var(--line-height-h5);	
	font-weight       : var(--font-weight-h5);
}

.canvas-a-h1, .canvas-a-h2, .canvas-a-h3, .canvas-a-h4, .canvas-a-h5 { color : var(--canvas-a-hx-color); }
.canvas-b-h1, .canvas-b-h2, .canvas-b-h3, .canvas-b-h4, .canvas-b-h5 { color : var(--canvas-b-hx-color); }
.canvas-c-h1, .canvas-c-h2, .canvas-c-h3, .canvas-c-h4, .canvas-c-h5 { color : var(--canvas-c-hx-color); }


.canvas-a-border { border : 1px solid var(--global-yellow); }

.canvas-a-text-sm, .canvas-a-text-md, .canvas-a-text-lg, .canvas-a-text-xl, .canvas-a-text-xxl,
.canvas-b-text-sm, .canvas-b-text-md, .canvas-b-text-lg, .canvas-b-text-xl, .canvas-b-text-xxl,     
.canvas-c-text-sm, .canvas-c-text-md, .canvas-c-text-lg, .canvas-c-text-xl, .canvas-c-text-xxl
{
	display     : block;
	font-family : var(--font-b);
 }
 
.canvas-a-text-sm, .canvas-a-text-md, .canvas-a-text-lg, .canvas-a-text-xl, .canvas-a-text-xxl { color : var(--canvas-a-text-color); }
.canvas-b-text-sm, .canvas-b-text-md, .canvas-b-text-lg, .canvas-b-text-xl, .canvas-b-text-xxl { color : var(--canvas-b-text-color); }
.canvas-c-text-sm, .canvas-c-text-md, .canvas-c-text-lg, .canvas-c-text-xl, .canvas-c-text-xxl { color : var(--canvas-c-text-color); }


.canvas-a-text-sm, .canvas-b-text-sm, .canvas-c-text-sm
{
	font-size : var(--canvas-font-size-sm); font-weight : var(--canvas-font-weight-sm); 
}

.canvas-a-text-md, .canvas-b-text-md, .canvas-c-text-md
{
	font-size : var(--canvas-font-size-md); font-weight : var(--canvas-font-weight-md); 
}

.canvas-a-text-lg, .canvas-b-text-lg, .canvas-c-text-lg
{
	font-size : var(--canvas-font-size-lg); font-weight : var(--canvas-font-weight-lg); 
}

.canvas-a-text-xl, .canvas-b-text-xl, .canvas-c-text-xl
{
	font-size : var(--canvas-font-size-xl); font-weight : var(--canvas-font-weight-xl); 
}

.canvas-a-text-xxl, .canvas-b-text-xxl, .canvas-c-text-xxl
{
	font-size : var(--canvas-font-size-xxl); font-weight : var(--canvas-font-weight-xxl); 
}

.canvas-a-text-anchor
{
	background : var(--canvas-a-text-anchor-background);
	color      : var(--canvas-a-text-anchor-color);
}

.canvas-a-text-anchor:hover
{
	background : var(--canvas-a-text-anchor-hover-background);
	color      : var(--canvas-a-text-anchor-hover-color);
}


.canvas-b-text-anchor
{
	display : inline-block;
	background : var(--canvas-b-text-anchor-background);
	color      : var(--canvas-b-text-anchor-color);
	padding : none;
	margin : none;
}

.canvas-b-text-anchor:hover
{
	background : var(--canvas-b-text-anchor-hover-background);
	color      : var(--canvas-b-text-anchor-hover-color);
}


.canvas-c-text-anchor
{
	background : var(--canvas-c-text-anchor-background);
	color      : var(--canvas-c-text-anchor-color);
}

.canvas-c-text-anchor:hover
{
	background : var(--canvas-c-text-anchor-hover-background);
	color      : var(--canvas-c-text-anchor-hover-color);
}

.section-spacer
{
    display    : block;
	min-height : var(--global-section-spacer);
    height     : var(--global-section-spacer);
}

.section-small-spacer
{
    display    : block;
	min-height : var(--global-section-small-spacer);
    height     : var(--global-section-small-spacer);
}

.standard-contact-form-link
{
	color : #0076ae;
}
.standard-contact-form-link:hover
{
	color : #2e2e2e;
	
	
}



.canvas-x-hx-spacer
{
	display     : block;
	height      : 4px;
	min-height  : 4px;
}

.global-object-shadow 
{
	box-shadow        : var(--global-object-shadow);
}

.global-form-modal
{
	display           : none;
	position          : fixed; 
	text-align        : center;
	top               : 40%;
	left              : 50%;
    transform         : translate(-50%, -50%);
    background        : white; 
    padding           : 20px; 
    border            : 1px solid #c0c0c0;
    border-radius     : var(--global-full-border-radius);
    overflow          : hidden;
    box-shadow        : var(--global-object-shadow);
    z-index           : 25010;    /* has to be above the blocker - class global-form-block-background - below */
}


.global-modal-message
{
	font-family : var(--font-b);
	color : #454545;
	font-size : 1.1rem;
	font-weight : 400;
}

.global-full-border-radius
{
	border-radius : var(--global-full-border-radius);
}

.global-top-border-radius
{
	border-radius : var(--global-full-border-radius) var(--global-full-border-radius) 0px 0px;
}

.global-bottom-border-radius
{
	border-radius : 0px 0px var(--global-full-border-radius) var(--global-full-border-radius);
}




.global-text-shadow
{
	text-shadow : var(--global-text-shadow);
}

.global-h2-text-shadow 
{
	text-shadow : var(--global-h2-text-shadow);
}

.global-button
{
	display           : inline-block;
    font-family       : var(--font-b);		
	font-size         : var(--global-button-font-size);
	font-weight       : var(--global-button-font-weight);
	padding           : var(--global-button-padding);
	height            : var(--global-button-height);
	background        : var(--global-button-background);
	color             : var(--global-button-color);
    
	border-radius     : var(--global-button-border-radius);
    -webkit-box-shadow: var(--global-button-shadow);
    -moz-box-shadow   : var(--global-button-shadow);
    box-shadow        : var(--global-button-shadow);	
    
    border            : var(--global-button-border);
	outline           : none;
	text-decoration   : none;
    width             : 100%;
	
}

.global-button:hover
{
	background        : var(--global-button-background-hovered);
	color             : var(--global-button-color-hovered);
}



.global-form-block-background 
{
    display           : none;
    position          : fixed;
    top               : 0px;
    left              : 0px;
    width             : 100%;
    height            : 100%;
    background-color  : rgba(0,0,0, .4);
    z-index           : 25000;
}



.global-form-block-background.active
{
    display          : block;
}


.large-vertical-spacer
{
	display : block;
	min-height : 40px;
}


.logo-preview-display-wrapper
{
    display: flex;
    justify-content: center;  /* horizontal centering */
    align-items: center;      /* vertical centering */
    overflow: hidden;         /* hide any overflow */
    border-radius : var(--form-a-input-all-fields-border-radius);
    padding : 12px;
    background : white;
    margin : 17px;
}


.form-input-radio-wrapper
{
	display : block;
	width : 100%;
	background : white;
	border-radius : var(--global-full-border-radius);
	padding : 12px;
	border : 1px solid #f2f2f2; 
	text-align : left;
}

.canvas-heading-spacer
{
	display : block;
    min-height : 10px;
}

.form-input-radio {
  display: inline-flex;
  align-items: center;
  padding-top : 4px;
  margin-right: 25px;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 1rem;
}

/* Hide the native radio */
.form-input-radio input[type="radio"] {
  display: none;
}

/* Custom radio appearance */
.form-input-radio .form-input-custom-radio {
  display: inline-block;
  width: 24px;          /* diameter */
  height: 24px;
  border: 3px solid #006595;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
  box-sizing: border-box;
  transition: background 0.2s, border-color 0.2s;
}

/* Add inner circle when checked */
.form-input-radio input[type="radio"]:checked + .form-input-custom-radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;         /* inner dot size */
  height: 12px;
  background : #006595;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}


.form-input-custom-radio-option-text
{
	display : inline-block;
	font-family : var(--font-a);
	font-size : 1rem;
	font-weight : 700;
	color       : #006595;
    padding-top : 4px;
}





.form-a-base
{
	display           : block;
	background        : var(--form-a-base-background);
	padding           : var(--form-a-base-padding);
	border-radius     : var(--global-full-border-radius);
	border            : var(--global-border);
	box-shadow        : var(--form-a-base-shadow);
}



.form-a-base-2
{
	display           : block;
	background        : var(--form-a-base-background);
	padding           : 0px 5px;
	border-radius     : var(--global-full-border-radius);
	border            : var(--global-border);
	box-shadow        : none;
}

.form-a-file-upload-label, .form-a-file-upload-clear-button
{
    font-family       : var(--font-b);
    font-size         : 1rem;
    font-weight       : 600;
	background			: linear-gradient(0deg,rgba(57, 57, 59, 1) 0%, rgba(18, 76, 115, 1) 100%);
	border: 1px solid #556779;
	color: #ffffff;
    border-radius     : var(--global-full-border-radius);
    padding           : 12px;
    text-align        : center;
    width             : 100%;
}


.form-a-file-upload-label:hover, .form-a-file-upload-clear-button:hover
{
    background: linear-gradient(0deg,rgba(18, 17, 17, 1) 0%, rgba(18, 76, 115, 1) 100%); 
    border-color: #556779; /* Lighter border to "highlight" the edge */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    cursor: pointer;
}



.form-a-file-upload-panel
{
	background: var(--global-yellow);
	border : 2px solid grey;
	border-radius : var(--form-a-input-all-fields-border-radius);
	
}


.form-a-file-input
{
	position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}




.form-a-heading-area
{
    display           : block;
    padding           : var(--form-a-heading-area-padding);
	background        : var(--form-a-heading-area-background);
	border-radius     : var(--global-full-border-radius);
    align-items       : center;
    justify-content   : center;
}

.form-a-heading
{
	display           : block;
    font-family       : var(--form-a-font-family);
    font-size         : var(--form-a-heading-area-font-size);
    line-height       : var(--form-a-heading-area-line-height);
    font-weight       : var(--form-a-heading-area-font-weight);
    padding           : var(--form-a-heading-area-padding);
    color             : var(--form-a-heading-area-font-color);
}

.form-a-heading-2
{
	display           : block;
    font-family       : var(--form-a-font-family);
    font-size         : var(--form-a-heading-area-font-size-2);
    line-height       : var(--form-a-heading-area-line-height-2);
    font-weight       : var(--form-a-heading-area-font-weight-2);
    padding           : var(--form-a-heading-area-padding-2);    
    color             : var(--form-a-heading-area-font-color-2);
}


.form-a-input-label
{
    display           : inline-block;
    font-family       : var(--form-a-font-family);
    font-size         : var(--form-a-labels-font-size);
    font-weight       : var(--form-a-labels-font-weight);
    color             : var(--form-a-labels-font-color);
    padding-top       : 9px;
}

.form-a-input-label-small
{
    display           : inline-block;
    font-family       : var(--form-a-font-family);
	font-size 		  : .9rem;
    font-weight       : var(--form-a-labels-font-weight);
    color             : var(--form-a-labels-font-color);
    padding-top       : 9px;	
	line-height 	  : 1rem;
}


.form-a-input-text-one-line, .form-a-input-text-one-lineUCASE, .form-a-input-text-multi-line
{
	display           : inline-block;
    font-family       : var(--form-a-font-family);
    font-size         : var(--form-a-input-font-size);
    font-weight       : var(--form-a-input-font-weight);    
	background-color  : var(--form-a-input-background-color);
	color             : var(--form-a-input-color);
	border            : var(--form-a-input-border);
	padding           : var(--form-a-input-padding);
    margin            : var(--form-a-input-margin);
	border-radius     : var(--form-a-input-all-fields-border-radius);
	outline           : none;    
	width : 100%;

}


.quote-item-text-price-inputs
{
	display           : inline-block;
    font-family       : var(--form-a-font-family);
    font-size         : var(--form-a-input-font-size);
    font-weight       : var(--form-a-input-font-weight);    
	background-color  : var(--form-a-input-background-color);
	color             : white;
	padding           : var(--form-a-input-padding);
    margin            : var(--form-a-input-margin);
	padding : 6px 8px;
	border-radius : 5px;
	outline           : none;    
	max-width : 95px;	
    text-decoration: none;	
	width : 90%;	
	border : none;
}



.quote-item-text-inputs-multi
{
	display           : inline-block;
    font-family       : var(--form-a-font-family);
    font-size         : var(--form-a-input-font-size);
    font-weight       : var(--form-a-input-font-weight);    
	background-color  : var(--form-a-input-background-color);
    margin            : var(--form-a-input-margin);
	border-radius     : var(--form-a-input-all-fields-border-radius);
	outline           : none;    
	width : 100%;	
	padding : 6px 8px;
	border-radius : 5px;
	border : none;
	color : white;
}

.form-a-input-text-one-line::placeholder,
.form-a-input-text-one-lineUCASE::placeholder,
.form-a-input-text-multi-line::placeholder, 
.quote-item-text-inputs-multi::placeholder,
.quote-item-text-price-inputs::placeholder
{
    color: var(--form-a-input-placeholder-color);
    opacity: 1; /* keeps colour solid in Firefox */
}


.form-a-input-text-one-line::-webkit-input-placeholder,
.form-a-input-text-one-lineUCASE::-webkit-input-placeholder,
.form-a-input-text-multi-line::-webkit-input-placeholder,
.quote-item-text-inputs-multi::placeholder,
.quote-item-text-price-inputs::placeholder
{
    color: var(--form-a-input-placeholder-color);
}

.form-a-input-text-one-line:-ms-input-placeholder,
.form-a-input-text-one-lineUCASE:-ms-input-placeholder,
.form-a-input-text-multi-line:-ms-input-placeholder,
.quote-item-text-inputs-multi::placeholder,
.quote-item-text-price-inputs::placeholder 
{
    color: var(--form-a-input-placeholder-color);
}

.form-a-input-text-one-line::-ms-input-placeholder,
.form-a-input-text-one-lineUCASE::-ms-input-placeholder,
.form-a-input-text-multi-line::-ms-input-placeholder,
.quote-item-text-inputs-multi::placeholder,
.quote-item-text-price-inputs::placeholder
{
    color: var(--form-a-input-placeholder-color);
}

.form-a-input-text-one-lineUCASE
{
   text-transform     : uppercase;
}


.form-a-input-text-multi-line 
{
    height            : 100px;	
    resize            : none;
}

.quote-item-text-inputs-multi
{
	height            : 60px;	
    resize            : none;
    border : none;
	
}
.form-a-input-text-multi-line-letter-height
{
	height : 400px;
}

.form-a-instruction-area
{
    display           : inline-block;
    font-family       : var(--form-a-font-family);
    font-size         : var(--form-a-instructions-font-size);
    font-weight       : var(--form-a-instructions-font-weight);
    color             : var(--form-a-instructions-font-color);
    padding           : 10px 0px 0px 0px;
}


.form-a-submit-button
{
	display           : inline-block;
    font-family       : var(--form-a-font-family);		
	font-size         : var(--form-a-submit-button-font-size);
	font-weight       : var(--form-a-submit-button-font-weight);
	padding           : var(--form-a-submit-button-padding);
	height            : var(--form-a-submit-button-height);
	background        : var(--form-a-submit-button-background);
	color             : var(--form-a-submit-button-color);
    text-align        : center;
	border-radius     : var(--form-a-submit-button-border-radius);
    border            : var(--form-a-submit-button-border);
	box-shadow        : var(--global-button-shadow);
	outline           : none;
	text-decoration   : none;
    width             : 100%;
	margin            : 0px 0px;
}

.form-a-submit-button:hover
{
	background        : var(--form-a-submit-button-background-hovered);
	color             : var(--form-a-submit-button-color-hovered);
	cursor            : pointer;
}





.form-a-menu-button
{
	display           : inline-block;
    font-family       : var(--form-a-font-family);		
	font-size         : var(--form-a-menu-button-font-size);
	font-weight       : var(--form-a-menu-button-font-weight);
	padding           : var(--form-a-menu-button-padding);
	height            : var(--form-a-menu-button-height);
	background        : var(--form-a-menu-button-background);
	color             : var(--form-a-menu-button-color);
    text-align        : center;
	border-radius     : var(--form-a-menu-button-border-radius);
    border            : var(--form-a-menu-button-border);
	box-shadow        : var(--global-button-shadow);
	outline           : none;
	text-decoration   : none;
    width             : 100%;
	margin            : 0px 0px;
}

.form-a-menu-button:hover
{
	background        : var(--form-a-menu-button-background-hovered);
	color             : var(--form-a-menu-button-color-hovered);
	cursor            : pointer;
}

.letter-row 
{
  align-items: center; /* Vertically centers everything */
  justify-content: space-between; /* Pushes the groups to the far left and right */
  padding: 10px 5px;
  background: var(--global-black);
  margin : 10px 0px;
  border : none;
  border-radius : var(--global-full-border-radius);
}




.letter-letter-wrapper
{
    display: block;
    background : var(--global-black);
    min-width: 0; /* Important: prevents the text from pushing the container wider than the screen */
	max-height : 500px;
	height : auto;
	font-family : var(--font-b);
	font-size : .85rem;
	font-weight : 400;
	line-height : 1rem;
	overflow-y: auto;
    overflow-x: hidden;
	word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-line;
	padding : 10px;
	color : white;
}

/* ==========================================================================
   1. Shared Button Styles & Drop Mechanic
   ========================================================================== */
.form-a-icon-edit-button, 
.form-a-icon-copy-button, 
.form-a-icon-delete-button, 
.form-a-icon-email-send-button {
    display: inline-block;
    width: 100%;
    max-width: 100px;
    padding: 20px;
    color: white;
    border-radius: 18px;
    border: none;
    outline: none;
    text-decoration: none;
    cursor: pointer;
	box-shadow        : var(--global-button-shadow);    
    /* Original shadow depth from image_fb0f3c.png */
    
    /* Smooth transitions for the physical press effect */
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Global Hover Drop (Press) Effect */
.form-a-icon-edit-button:hover, 
.form-a-icon-copy-button:hover, 
.form-a-icon-delete-button:hover, 
.form-a-icon-email-send-button:hover {
    transform: translateY(2px);
    /* Shadow flattens slightly to match the physical drop */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}


/* ==========================================================================
   2. Original Color Gradients Restored
   ========================================================================== */

/* --- Edit Button (Original Green) --- */
.form-a-icon-edit-button {
    background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
}
.form-a-icon-edit-button:hover {
    background: linear-gradient(135deg, #388e3c 0%, #217326 100%);
}

/* --- Copy Button (Original Muted Teal) --- */
.form-a-icon-copy-button {
    background: linear-gradient(135deg, #407a82 0%, #2b545b 100%);
}
.form-a-icon-copy-button:hover {
    background: linear-gradient(135deg, #4d8d96 0%, #34636b 100%);
}

/* --- Send Button (Original Electric Cyan) --- */
.form-a-icon-email-send-button {
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
}
.form-a-icon-email-send-button:hover {
    background: linear-gradient(135deg, #26d0ff 0%, #1a85ff 100%);
}

/* --- Delete Button (Original Intense Red) --- */
.form-a-icon-delete-button {
    background: linear-gradient(135deg, #b71c1c 0%, #7f0000 100%);
}
.form-a-icon-delete-button:hover {
    background: linear-gradient(135deg, #d32f2f 0%, #9a0007 100%);
}
























.form-a-icon-standard-size
{
	max-height : 30px;
	min-height : 30px;	
}


.form-a-icon-text
{
	font-size : 1rem;
	font-family : var(--font-b);
	font-weight : 600;
	color : #ffffff;
	padding-top : 5px;
}


.quote-item-icon-action-button {
    /* Flexbox handles the magic centering */
    display: flex;
    align-items: center;     /* Vertically centers the image */
    justify-content: center; /* Horizontally centers the image */
    
    /* Explicit Button Sizes */
    width: 60px;
    height: 60px;
    
    /* Reset & Custom Properties */
    padding: 0; /* Clear padding so it doesn't offset the centering */
    background: var(--form-a-submit-button-background);
    border-radius: var(--form-a-submit-button-border-radius);
    border: none;
    outline: none;
    margin: 0px;
    box-sizing: border-box; /* Ensures padding/borders don't skew your 60x60px size */
}

.quote-item-icon-action-button:hover {
    background: var(--form-a-submit-button-background-hovered);
    cursor: pointer;
}

/* Explicit Image Sizes */
.quote-item-icon-action-button-img {
    width: 30px;
    height: 30px;
    object-fit: contain; /* Prevents the image from stretching/distorting */
}



.form-a-icon-row-styling
{
  	background: var(--global-grey);
	border-radius : var(--global-full-border-radius);
}






.form-a-field-area
{
	background : var(--form-a-field-area-background-color);
	padding : 16px;
	border-radius : var(--global-full-border-radius);
}



















.form-a-list-area
{
	background : #ffffff;
	padding : 5px;
	border-radius : var(--form-a-input-all-fields-border-radius);
}

.maq-accpwd-inputbox
{
    position: relative;
    display: flex;
    align-items: center;
}

.maq-accpwd-inputbox input {
    width: 100%;
    padding-right: 40px;
}

.maq-accpwd-toggle
{
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: .8rem;
    font-family : var(--font-b);
    color : #6b8bab;
    font-weight : 500;
    letter-spacing : -.06rem;
}







/* FORM TYPE B START */
.form-b-base
{
	display           : block;
	background        : var(--form-b-base-background);
	padding           : var(--form-b-base-padding);
	border-radius     : var(--global-full-border-radius);
	box-shadow        : var(--form-b-base-shadow);
	
}

.form-b-heading-area
{
    display           : flex;
    padding           : var(--form-b-heading-area-padding);
	background        : var(--form-b-heading-area-background);
	border-radius     : var(--global-full-border-radius);
    align-items       : center;
    justify-content   : center;
}

.form-b-heading
{
	display           : inline-block;
    font-family       : var(--form-b-font-family);
    font-size         : var(--form-b-heading-area-font-size);
    font-weight       : var(--form-b-heading-area-font-weight);
    color             : var(--form-b-heading-area-font-color);
}

.form-b-input-label
{
    display           : inline-block;
    font-family       : var(--form-b-font-family);
    font-size         : var(--form-b-labels-font-size);
    font-weight       : var(--form-b-labels-font-weight);
    color             : var(--form-b-labels-font-color);
    padding-top       : 8px;
}

.form-b-input-text-one-line, .form-b-input-text-one-lineUCASE, .form-b-input-text-multi-line
{
	display           : inline-block;
    font-family       : var(--form-b-font-family);
    font-size         : var(--form-b-input-font-size);
    font-weight       : var(--form-b-input-font-weight);    
	background        : var(--form-b-input-background-color);
	color             : var(--form-b-input-color);
	border            : var(--form-b-input-border);
	padding           : var(--form-b-input-padding);
    margin            : var(--form-b-input-margin);
	border-radius     : var(--form-b-input-all-fields-border-radius);
	outline           : none;    
	width             : 100%;
}


.form-b-input-text-one-line::placeholder,
.form-b-input-text-one-lineUCASE::placeholder,
.form-b-input-text-multi-line::placeholder 
{
    color: var(--form-b-input-placeholder-color);
    opacity: 1; /* keeps colour solid in Firefox */
}


.form-b-input-text-one-line::-webkit-input-placeholder,
.form-b-input-text-one-lineUCASE::-webkit-input-placeholder,
.form-b-input-text-multi-line::-webkit-input-placeholder 
{
    color: var(--form-b-input-placeholder-color);
}

.form-b-input-text-one-line:-ms-input-placeholder,
.form-b-input-text-one-lineUCASE:-ms-input-placeholder,
.form-b-input-text-multi-line:-ms-input-placeholder 
{
    color: var(--form-b-input-placeholder-color);
}

.form-b-input-text-one-line::-ms-input-placeholder,
.form-b-input-text-one-lineUCASE::-ms-input-placeholder,
.form-b-input-text-multi-line::-ms-input-placeholder 
{
    color: var(--form-b-input-placeholder-color);
}

.form-b-input-text-one-lineUCASE
{
   text-transform     : uppercase;
}


.form-b-input-text-multi-line 
{
	display           : block;
    height            : 100px;
    resize            : none;
    margin            : 0;
}


.form-b-instruction-area
{
    display           : inline-block;
    font-family       : var(--form-b-font-family);
    font-size         : var(--form-b-instructions-font-size);
    font-weight       : var(--form-b-instructions-font-weight);
    color             : var(--form-b-instructions-font-color);
    padding           : 10px 0px 0px 0px;
}


.form-b-submit-button
{
	display           : inline-block;
    font-family       : var(--form-b-font-family);		
	font-size         : var(--form-b-submit-button-font-size);
	font-weight       : var(--form-b-submit-button-font-weight);
	padding           : var(--form-b-submit-button-padding);
	height            : var(--form-b-submit-button-height);
	background        : var(--form-b-submit-button-background);
	color             : var(--form-b-submit-button-color);
    
	border-radius     : var(--global-full-border-radius);
    -webkit-box-shadow: var(--form-b-submit-button-shadow);
    -moz-box-shadow   : var(--form-b-submit-button-shadow);
    box-shadow        : var(--form-b-submit-button-shadow);	
    
    border            : none;
	outline           : none;
	text-decoration   : none;
    width             : 100%;
	
}

.form-b-submit-button:hover
{
	background        : var(--form-b-submit-button-background-hovered);
    color             : var(--form-b-submit-button-color-hovered);
	cursor            : pointer;
}


.form-b-file-upload-label
{
    padding           : 6px 12px;
    background        : #007bff;
    color             : #fff;
    border-radius     : var(--global-full-border-radius);
    cursor            : pointer;
}

.form-b-file-upload-label:hover
{
    background        : #0060ca;
    color             : #fff;
}


.form-b-file-input
{
	position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}



.footer-base
{
	display           : block;
	background        : var(--footer-background);
    padding           : var(--object-padding-sm);
    font-family       : var(--font-b);
}

.footer-area-logo
{
	height            : var(--footer-area-logo-height);
	max-height        : var(--footer-area-logo-height);
	font-family       : var(--font-b);	
}

.footer-address
{
	display           : block;
  	color             : var(--footer-font-color);
    font-family       : var(--font-b);  	
	font-size         : var(--canvas-font-size-sm);
    font-weight       : var(--canvas-font-weight-normal);	 
}

.footer-area-photon-text-link
{
	display           : block;
	color             : var(--footer-text-link-font-color);
	font-family       : var(--font-b);
	font-size         : var(--canvas-font-size-sm);
    font-weight       : var(--canvas-font-weight-normal);	 
}

.footer-area-photon-text-link:hover
{
    color : var(--footer-text-link-hover-color);
}


.global-border
{
	border : var(--global-border);
}

.global-spin-on-hover {
  transition: transform 0.6s ease-in-out;
  display: inline-block; /* ensures transform behaves properly */
}

.global-spin-on-hover:hover {
  transform: rotate(360deg);
}

.global-rotate-3d-hover {
  transition: transform 0.8s;
  transform-style: preserve-3d;
  display: inline-block;
}

.global-rotate-3d-hover:hover {
  transform: rotateY(360deg); /* flip horizontally */
  /* try rotateX(180deg) for vertical flip */
}








ul
{
    color : white;
	list-style-type     : disc;          /* standard bullet */
}


.ul-document
{
    color : #333333;
	list-style-type     : disc;          /* standard bullet */
}

.ul-document-li
{
    font-size : 2rem;
}

/*************************
Quote lists
**************************/
.quotelistcolheading
{
	font-family : var(--font-b);
	font-size : 1.1rem;
	font-weight : 600;
	color : #ffffff;
}
  
  
.quotelistcoldata
{
	font-family : var(--font-b);	
	font-size : 1rem;
	font-weight : 400;
	color : #ffffff;
}

.quotelist-row 
{
  align-items: center; /* Vertically centers everything */
  padding: 14px;
  background: var(--global-grey);
  border-radius : var(--global-full-border-radius);
}  

 .quotelist-headinganddatabg
{
	background : #353535;
	border-radius : var(--global-full-border-radius);
}
  
/*************************
MAKE A QUOTE MODULE CSS
*************************/

.mq-app-container 
{
    width: 100%;
    background-color: #1a1a1a;
    border-radius: var(--global-full-border-radius);
    padding: 1px;
    box-sizing: border-box;
    font-family : var(--font-b);
    border-radius : var(--global-full-border-radius);
}

.mq-app-container *, 
.mq-app-container *::before, 
.mq-app-container *::after {
    box-sizing: border-box;
}

.mq-app-header h1 {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 0 16px 0;
    color: #ffffff;
}

.mq-tab-container 
{
	background : #484848;
	border-radius : 40px 40px 0px 0px;
}

.mq-tab-btn {
    flex: 1;
    background: #484848;
    border: none;
    color: var(--global-yellow);
    padding: 15px 0;
    font-size: 1rem;
    text-align: center;
    border-radius: var(--global-full-border-radius) var(--global-full-border-radius) 0 0; 

    cursor: pointer;
    font-weight: normal;
    width : 100%;
}

.mq-tab-btn.mq-active {
    background-color: var(--global-yellow);
    color: #000000;
    font-weight: bold;
    border-radius: var(--global-full-border-radius) var(--global-full-border-radius) 0 0;    
}

.mq-main-panel {
    background-color: #e9e9e9;
    color: #000000;
    padding: 12px 0px;
    border-radius: 0 0 var(--global-full-border-radius) var(--global-full-border-radius);
    min-height: 250px;
}

.mq-tab-content {
    display: none;
}

.mq-tab-content.mq-active {
    display: block;
}

.mq-action-container {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
  
.large-vat-checkbox {
  transform: scale(2);
  -webkit-transform: scale(2); 
  -moz-transform: scale(2);    
  -ms-transform: scale(2);     
  -o-transform: scale(2);      
  margin-right: 14px;          
  margin-left: 9px;            
  cursor: pointer;
  outline: none;  
  
}

/* ANIMATION SYSTEM - STEP 1: INSERTION ONLY */
.quote-row {
  position: relative;
  display: flex;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  /* Added padding and margin to the transition string */
  transition: max-height 0.35s ease-out, opacity 0.25s ease-out, padding 0.35s ease-out, margin 0.35s ease-out;
}

.quote-row.slide-active {
  max-height: 250px; 
  opacity: 1;
  /* Explicitly matches your template padding if applicable, otherwise browser defaults */
  padding-top: 0.5rem;   /* Matches Bootstrap p-2 */
  padding-bottom: 0.5rem;
}

/* Hard override to compress the row when the deleting class is present */
.quote-row.is-deleting {
  max-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.quote-row.is-moving {
  /* Use a clean cubic-bezier for a snappy, physics-based slide feel */
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 10;
  pointer-events: none; /* Prevents double-clicking while transitioning */
}


.maq-account-view-plan-badge
{
	animation : maq-plan-badge-spin-3d 2s ease-in-out 1;
	transform-style : preserve-3d;
	backface-visibility : visible;
	max-height : 110px;
}

.maq-plan-badge-perspective
{
	perspective : 800px;
}


.maq-account-view-legend
{
	font-family : var(--font-b);
	color : white;
	font-weight : 700;
	font-size : 1rem;
}


.maq-account-view-data
{
	font-family : var(--font-b);
	color : #ebebeb;
	font-weight : 500;
	font-size : 1rem;
}


.maq-totals-row
{
	font-size : .9rem;
	font-weight : 500;
	color : #535353;
	background-color : white;
	border-radius : 5px;
	padding : 10px;
}


.maq-letter-list-row
{
	border : 15px solid var(--global-yellow);
	border-radius : var(--global-full-border-radius);
    background : var(--global-yellow);
}

.maq-letter-list-show-letter
{
    display: block;
    background : var(--global-black);
    min-width: 0; /* Important: prevents the text from pushing the container wider than the screen */
	max-height : 500px;
	height : auto;
	font-family : var(--font-b);
	font-size : .85rem;
	font-weight : 400;
	line-height : 1rem;
	overflow-y: auto;
    overflow-x: hidden;
	word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-line;
	color : white;	
	border-radius : var(--global-full-border-radius);
	padding : 10px;	
}


.maq-login-forgot-password-link
{
	font-family : var(--font-b);
	font-size : 1rem;
	font-weight : 600;
	color : #3065a7;
}

.maq-login-forgot-password-link:hover
{
	font-family : var(--font-b);
	font-size : 1rem;
	font-weight : 600;
	color : #0e1d30;
	cursor : pointer;
}




.maq-menu-cog-wrapper:hover
{
	cursor : pointer;
}


.maq-menu-cog
{
	position : relative;
	top : -2px;
	max-height : 23px;
}



/* Displaying a quote for sending and customer display. */
.maq-sq-container-outer
{
	display : block;
	font-family : var(--quote-font);
	background : #ffffff;
	padding : 10px;
	border-radius : 0px;
}


.maq-sq-container-inner
{
	display : block;
	background : #ffffff;
	padding : 10px;
	border-radius : 0px;
	border : 1px solid #e9e9e9;
}

.maq-sq-meta-grid {
    display: grid;
    grid-template-columns: auto auto; /* Column 1: Labels | Column 2: Your Value Classes */
    column-gap: 15px;                 /* Space between the label and your data */
    row-gap: 0px;                     /* MODIFIED: Forced zero vertical gap between grid rows */
    align-items: center;
  
}

.maq-sq-meta-grid .maq-sq-meta-label 
{
    font-size   : .8rem;
    font-weight : 600;
    color       : #080808;
    text-align  : left;               /* Keeps legends perfectly aligned under each other */
    line-height : 1.1;                /* ADDED: Tighter spacing around text */
}

/* Forces your custom value classes to align perfectly underneath each other inside the grid */
.maq-sq-meta-grid div {
    text-align: left;
    margin-bottom: 0 !important;      /* ADDED: Wipe out any rogue div margins pushing rows down */
}



.maq-sq-line-legend
{
    font-size   : .8rem;
    font-weight : 600;
    color       : #000000;
    line-height : 1.1;             /* Enforce matching structural box height */
}

.maq-sq-line-data
{
    font-size   : .8rem;
    font-weight : 500;
    color       : #080808;
    line-height : 1.1;             /* Enforce matching structural box height */
}


.maq-sq-header-data
{
    font-size   : .8rem;
    font-weight : 500;
    color       : #080808;
    line-height : 1.1;                /* ADDED: Tighter spacing around text */
}

.maq-sq-companyname
{
	font-size   : 1.5rem;
	font-weight : 800;
	color       : #313131;
}


.maq-sq-quotetitle
{
	font-size   : 1.2rem;
	font-weight : 700;
	color       : #313131;
}


.maq-sq-address-block, .maq-sq-lines-section, .maq-sq-header-wrapper
{
	background : #f5f5f5;
	border-radius : 0px;
	border : 1px solid #f2f2f2;
	padding : 10px;
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}

.maq-sq-logo-image
{
	min-height : 100px;
	max-height : 150px;
	border-radius : 0px;
	border : 1px solid #e9e9e9;
}

.maq-sq-target-email-display-legend
{
	font-family : var(--font-b);
	font-size : 1.1rem;
	font-weight : 700;
	color : #1e3653;
	
}

.maq-sq-target-email-display
{
	font-family : var(--font-b);
	font-size : 1.1rem;
	font-weight : 700;
	color : #2c2c2c;
	
}

@media (max-width: 1850px) 
{
    :root
    {
 
    }
}

@media (max-width: 1650px) 
{
    :root
    {
         
    }
}

@media (max-width: 1400px) 
{
    :root
    {

    }
}


/* bs xl */
@media only screen and (max-width: 1200px) 
{
    :root
    {

    }

}

/* bs lg */
@media only screen and (max-width: 992px) 
{
	:root 
    {
     
    }

}

/* bs md */
@media only screen and (max-width: 768px) 
{
    :root 
    {
 
    }

}


/*bs sm - xs is everything below this. */
@media only screen and (max-width: 576px) 
{
    :root 
    {

    }
    
    .global-form-modal
    {
        width : 90%;
        max-width : 90%;
    }
}


@media only screen and (max-width: 420px) 
{
    :root 
    {

    }
    
    .fixed-top-area-logo
    {
		padding           : 10px 5px 5px 5px;
		max-height        : 57px;
		height        	   : 57px;
	}
}




@media only screen and (max-width: 376px) 
{
    :root 
    {
    
    }
}




@keyframes spinShrinkFade 
{
    from { transform: rotate(0deg)   scale(4); opacity: 0; }
    to   { transform: rotate(360deg) scale(1); opacity: 1; }
}

@keyframes shine 
{
    100% { left: 125%; }
}  



@keyframes maq-plan-badge-spin-3d
{
	from
	{
		transform : rotateY(0deg);
	}

	to
	{
		transform : rotateY(360deg);
	}
}