/**************************** _Base2024.1.css ****************************/
/**************************** START **********************/
/**************************** START **********************/
/**************************** START **********************/


/**************************** GENERAL **/
/* Do not change anything in these configurations */
html
{
	margin: 0;
	padding: 0;
	min-width: 320px;
	min-height: 100%;
}
body
{
	background-color: var(--BodyBackgroundColor);
	margin: 0px;
	padding: 0px;
	clear: none;
    min-height: 100%;
    min-width: 320px;
}

body, p, table, tr, td, th, q, li
{
	font-size: calc(var(--MainFontSize) * var(--FontRatio));
	font-family: var(--MainFontFamily);
	font-weight: var(--MainFontWeight);
	text-align: left; 
    line-height: calc(var(--MainFontSize) * var(--MainLineHeightRatio));
	color: var(--MainFontColor);
}
h1, h2, h3, h4, h5, h6
{
	font-family: var(--HsFontFamily);
	font-weight: var(--HsFontWeight);
    color: var(--HsColor);
	text-align: left; 
    clear: both;
}
p, q, li
{
	padding: 0px;
	margin: calc(var(--T0MA) * var(--MarginRatio)) 0px calc(var(--T0MB) * var(--MarginRatio)) 0px;
	clear: none;
}
input:not([type='submit']):not([type='radio']), select, textarea, option
{
	font-family: var(--FormControlFontFamily);
	font-weight: var(--FormControlFontWeight);
	font-size: var(--FormControlFontSize);
	text-align: left; 
    vertical-align: baseline;
    background: var(--FormControlBackgroundColor);
}
input[type='submit'], button
{
	font-family: var(--FormButtonFontFamily);
	font-weight: var(--FormButtonFontWeight);
	font-size: var(--FormButtonFontSize);
	text-align: left; 
    vertical-align: baseline;
    background: var(--FormButtonBackgroundColor);
    color: var(--FormButtonTextColor);
}
ul, ol
{
    color: var(--ListColor);
	margin: 0px;
    padding: 0px 0px 0px calc(var(--M3) * var(--PaddingRatio));
	margin-bottom: calc(var(--M1) * var(--MarginRatio));
}
ul ul, ul ol, ol ol, ol ul
{
    margin: calc(var(--D3) * var(--MarginRatio)) 0 0 0;                            /** CanChange on _Root.css: Spacing between UL/OL inside UL/OL **/
}
li 
{
	margin: calc(var(--D3) * var(--MarginRatio)) 0px calc(var(--D3) * var(--MarginRatio)) 0px;        /** CanChange on _Root.css: Inter LI Spacing, typically D3 or D2 **/
}
table, tr, td, th, thead, tfoot, tbody
{
	margin: 0px;
	padding: 0px;
	clear: none;
    text-align: left;
	border-spacing: 0;
}
table
{
	border-collapse: collapse;
}
td, th
{
	vertical-align: top;
}
strong
{
    font-weight: var(--StrongFontWeight);
}

/**************************** ADDITIONAL STYLING FOR Hs ELEMENTS **********************/
/* Your styles in here */
/* Font family, weight are var-configured, but can be overriden. Text-align is configured above.*/
/* Required configurations include font-size and color; padding and margin and line-height. */

h1 
{
	font-size: calc(var(--T1) * var(--HeaderRatio));
    padding: calc(var(--T1P) * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(var(--T1M) * var(--MarginRatio)) 0px calc(var(--T1M) * var(--MarginRatio)) 0px;
    line-height: calc(var(--T1) * var(--HeaderRatio) * var(--HsLineHeightRatio));
}
h2
{
	font-size: calc(var(--T2) * var(--HeaderRatio));
    padding: calc(var(--T2P) * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(var(--T2M) * var(--MarginRatio)) 0px calc(var(--T2M) * var(--MarginRatio)) 0px;
    line-height: calc(var(--T2) * var(--HeaderRatio) * var(--HsLineHeightRatio));
}
h3
{
	font-size: calc(var(--T3) * var(--HeaderRatio));
    padding: calc(var(--T3P) * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(var(--T3M) * var(--MarginRatio)) 0px calc(var(--T3M) * var(--MarginRatio)) 0px;
    line-height: calc(var(--T3) * var(--HeaderRatio) * var(--HsLineHeightRatio));
}
h4
{
	font-size: calc(var(--T4) * var(--HeaderRatio));
    padding: calc(var(--T4P) * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(var(--T4M) * var(--MarginRatio)) 0px calc(var(--T4M) * var(--MarginRatio)) 0px;
    line-height: calc(var(--T4) * var(--HeaderRatio) * var(--HsLineHeightRatio));
}
h5
{
	font-size: calc(var(--T5) * var(--HeaderRatio));
    padding: calc(var(--T5P) * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(var(--T5M) * var(--MarginRatio)) 0px calc(var(--T5M) * var(--MarginRatio)) 0px;
    line-height: calc(var(--T5) * var(--HeaderRatio) * var(--HsLineHeightRatio));
}
h6
{
	font-size: calc(var(--T6) * var(--HeaderRatio));
    padding: calc(var(--T6P) * var(--PaddingRatio)) 0px 0px 0px;
    margin: calc(var(--T6M) * var(--MarginRatio)) 0px calc(var(--T6M) * var(--MarginRatio)) 0px;
    line-height: calc(var(--T6) * var(--HeaderRatio) * var(--HsLineHeightRatio));
}

/****************************  ADDITIONAL STYLING FOR FORM CONTROL ELEMENTS **/
input:not([type='submit']):not([type='file']):not([type='radio']):not([type='checkbox']), select, textarea
{
    padding: calc(var(--FormControlPaddingV) * var(--PaddingRatio)) calc(var(--FormControlPaddingH) * var(--PaddingRatio));
    border-radius: var(--FormControlRadius);
    box-sizing: border-box;
    outline: none;
    border: var(--FormControlBorder);
    box-shadow: var(--FormControlShadow);
}
textarea
{
    resize: none;
}
input:not([type='submit']):not([type='radio']):not([type='checkbox']), select
{
    height: var(--FormControlHeight);
}
label {
    user-select: none;
    cursor: pointer;
}

/**************************** APS Class - If not used, first H's, P's, OL's, UL's have a margin-top and padding-top of 0; and last childs have a margin-bottom of 0 **/
div>h1:not(.APS):first-child, div>h2:not(.APS):first-child, div>h3:not(.APS):first-child, div>h4:not(.APS):first-child, div>h5:not(.APS):first-child, div>h6:not(.APS):first-child, div>p:not(.APS):first-child, div>ul:not(.APS):first-child, div>ol:not(.APS):first-child,
td>h1:not(.APS):first-child, td>h2:not(.APS):first-child, td>h3:not(.APS):first-child, td>h4:not(.APS):first-child, td>h5:not(.APS):first-child, td>h6:not(.APS):first-child, td>p:not(.APS):first-child, td>ul:not(.APS):first-child, td>ol:not(.APS):first-child,
th>h1:not(.APS):first-child, th>h2:not(.APS):first-child, th>h3:not(.APS):first-child, th>h4:not(.APS):first-child, th>h5:not(.APS):first-child, th>h6:not(.APS):first-child, th>p:not(.APS):first-child, th>ul:not(.APS):first-child, th>ol:not(.APS):first-child,
li:not(.APS):first-child
{
    margin-top: 0;
	padding-top: 0;
}
div>h1:not(.APS):last-child, div>h2:not(.APS):last-child, div>h3:not(.APS):last-child, div>h4:not(.APS):last-child, div>h5:not(.APS):last-child, div>h6:not(.APS):last-child, div>p:not(.APS):last-child, div>ul:not(.APS):last-child, div>ol:not(.APS):last-child,
td>h1:not(.APS):last-child, td>h2:not(.APS):last-child, td>h3:not(.APS):last-child, td>h4:not(.APS):last-child, td>h5:not(.APS):last-child, td>h6:not(.APS):last-child, td>p:not(.APS):last-child, td>ul:not(.APS):last-child, td>ol:not(.APS):last-child,
th>h1:not(.APS):last-child, th>h2:not(.APS):last-child, th>h3:not(.APS):last-child, th>h4:not(.APS):last-child, th>h5:not(.APS):last-child, th>h6:not(.APS):last-child, th>p:not(.APS):last-child, th>ul:not(.APS):last-child, th>ol:not(.APS):last-child,
li:not(.APS):last-child
{
	margin-bottom: 0;
}

/**************************** FIX ELEMENTS **/
div, form { margin: 0px; padding: 0px; }
div { padding-top: 0.02px; padding-bottom: 0.02px; text-align: left; }
img { border: none; display: block;}
p img { display: inline;}
table { border-spacing: 0px; border-collapse: collapse; }
td, th { border-spacing: 0px; vertical-align: top; }
object {display: block}

/**************************** A ELEMENT **/
a 
{
    color: var(--AColor);
    text-decoration: none;
	cursor: pointer;
	font-weight: inherit;
}
a:hover
{
    text-decoration: underline;
}
a:hover, a:active
{
	outline: none;
}

/**************************** LEGACY STYLES **********************/
.Bordered 
{
    border: black 1px solid;
}

/**************************** LAYOUT BLOCKS & INLINEs ***********************/
.CenterSelfBlock
{
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    display: block;
}
.RightSelfBlock
{
    margin-left: auto;
    margin-right: 0;
    width: max-content;
    display: block;
}
.CenterChildrenInlineBlocks
{
    text-align: center;
}
span.NoBreak
{
	white-space: nowrap;
	text-wrap: avoid;
}
DIV.CenterContentWrapper
{
    width: 100%; margin-left: auto; margin-right: auto; max-width: var(--LayoutMaxWidth)
}
DIV.CenterContent	
{
    margin-left: var(--LayoutMargin); margin-right: var(--LayoutMargin); overflow-x: clip; 
}

/**************************** VALIDATOR **********************/
div.ValidatorErrors 
{    
	background-color: var(--ValidatorErrorBackgroundColor);
	border: none;
	margin-bottom: calc(var(--M1) * var(--MarginRatio));
    padding: calc(var(--M1) * var(--PaddingRatio)) 0;
    box-sizing: border-box;
    display: none;
    border-radius: var(--FormControlRadius);
    margin-bottom: calc(var(--M2) * var(--MarginRatio));
}
div.ValidatorErrors p {
	color: var(--ValidatorErrorTextColor);
	margin: calc(var(--D2) * var(--FontRatio)) calc(var(--M1) * var(--FontRatio));
}
div.ValidatorOK
{
	background-color: var(--ValidatorOKBackgroundColor);
	border: none;
	margin-bottom: calc(var(--M1) * var(--MarginRatio));
    padding: calc(var(--M1) * var(--PaddingRatio)) 0;
    box-sizing: border-box;
    display: none;
    border-radius: var(--FormControlRadius);
    margin-bottom: calc(var(--M2) * var(--MarginRatio));
}
div.ValidatorOK p {
	color: var(--ValidatorOKTextColor);
	margin: calc(var(--D2) * var(--FontRatio)) calc(var(--M1) * var(--FontRatio));
}
div.ButtonResultOK /* This is the style while showing the OK result*/
{
    cursor: wait !important;
    background-color: var(--ValidatorOKBackgroundColor) !important;
}
div.ButtonSubmitting
{
    cursor: wait;
}

div.ResultOK {
} /* This is the class that is set on the div's when the result OK shows, can be changed in _Root.css */

/**************************** END **********************/
/**************************** END **********************/
/**************************** END **********************/

/**************************** _FormGrid.v3.css ****************************/
div.FormGrid
{
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column-gap: 0;
    grid-row-gap: 4px;
    align-items: stretch;
}

div.FormGrid div.Field input[type='text'], div.FormGrid div.Field input[type='password'], div.FormGrid div.Field select, div.FormGrid div.Field textarea {
    display: inline-block;
    min-width: 240px;
    box-sizing: border-box;
    vertical-align: baseline;
    width: 100%;
}
div.FormGrid div.ColumnSpanner input[type='text'], div.FormGrid div.ColumnSpanner input[type='password'], div.FormGrid div.ColumnSpanner select, div.FormGrid div.ColumnSpanner textarea {
    box-sizing: border-box;
    width: 100%;
}
div.FormGrid>div
{
    padding: 4px 0;
    align-self: baseline;
}
div.FormGrid>div.Background.ErrorField
{
    background-color: var(--LightRed);
    align-self: stretch;
    border-radius: 6px;
}
div.FormGrid>div.ErrorField, div.FormGrid>div.ErrorField p
{
    color: var(--White);
}
div.FormGrid>div.ColumnSpanner p
{
    margin-top: 8px;
    margin-bottom: 12px;
}

div.FormGrid>div.Caption
{
    padding-right: 20px;
}
div.FormGrid>div.ButtonWrapper
{
    padding-top: 12px;
}


div.FormGrid div.Background:nth-child(1) { grid-row: 1; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(4) { grid-row: 2; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(7) { grid-row: 3; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(10) { grid-row: 4; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(13) { grid-row: 5; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(16) { grid-row: 6; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(19) { grid-row: 7; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(22) { grid-row: 8; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(25) { grid-row: 9; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(28) { grid-row: 10; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(31) { grid-row: 11; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(34) { grid-row: 12; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(37) { grid-row: 13; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(40) { grid-row: 14; grid-column: 1/3; }
div.FormGrid div.Background:nth-child(43) { grid-row: 15; grid-column: 1/3; }

div.FormGrid div.Caption:nth-child(2) { grid-row: 1; grid-column: 1; }
div.FormGrid div.Caption:nth-child(5) { grid-row: 2; grid-column: 1; }
div.FormGrid div.Caption:nth-child(8) { grid-row: 3; grid-column: 1; }
div.FormGrid div.Caption:nth-child(11) { grid-row: 4; grid-column: 1; }
div.FormGrid div.Caption:nth-child(14) { grid-row: 5; grid-column: 1; }
div.FormGrid div.Caption:nth-child(17) { grid-row: 6; grid-column: 1; }
div.FormGrid div.Caption:nth-child(20) { grid-row: 7; grid-column: 1; }
div.FormGrid div.Caption:nth-child(23) { grid-row: 8; grid-column: 1; }
div.FormGrid div.Caption:nth-child(26) { grid-row: 9; grid-column: 1; }
div.FormGrid div.Caption:nth-child(29) { grid-row: 10; grid-column: 1; }
div.FormGrid div.Caption:nth-child(32) { grid-row: 11; grid-column: 1; }
div.FormGrid div.Caption:nth-child(35) { grid-row: 12; grid-column: 1; }
div.FormGrid div.Caption:nth-child(38) { grid-row: 13; grid-column: 1; }
div.FormGrid div.Caption:nth-child(41) { grid-row: 14; grid-column: 1; }
div.FormGrid div.Caption:nth-child(44) { grid-row: 15; grid-column: 1; }

div.FormGrid div.Field:nth-child(3) { grid-row: 1; grid-column: 2; }
div.FormGrid div.Field:nth-child(6) { grid-row: 2; grid-column: 2; }
div.FormGrid div.Field:nth-child(9) { grid-row: 3; grid-column: 2; }
div.FormGrid div.Field:nth-child(12) { grid-row: 4; grid-column: 2; }
div.FormGrid div.Field:nth-child(15) { grid-row: 5; grid-column: 2; }
div.FormGrid div.Field:nth-child(18) { grid-row: 6; grid-column: 2; }
div.FormGrid div.Field:nth-child(21) { grid-row: 7; grid-column: 2; }
div.FormGrid div.Field:nth-child(24) { grid-row: 8; grid-column: 2; }
div.FormGrid div.Field:nth-child(27) { grid-row: 9; grid-column: 2; }
div.FormGrid div.Field:nth-child(30) { grid-row: 10; grid-column: 2; }
div.FormGrid div.Field:nth-child(33) { grid-row: 11; grid-column: 2; }
div.FormGrid div.Field:nth-child(36) { grid-row: 12; grid-column: 2; }
div.FormGrid div.Field:nth-child(39) { grid-row: 13; grid-column: 2; }
div.FormGrid div.Field:nth-child(42) { grid-row: 14; grid-column: 2; }
div.FormGrid div.Field:nth-child(45) { grid-row: 15; grid-column: 2; }

div.FormGrid.div.ButtonWrapper:nth-child(1) { grid-row: 1; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(4) { grid-row: 2; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(7) { grid-row: 3; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(10) { grid-row: 4; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(13) { grid-row: 5; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(16) { grid-row: 6; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(19) { grid-row: 7; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(22) { grid-row: 8; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(25) { grid-row: 9; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(28) { grid-row: 10; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(31) { grid-row: 11; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(34) { grid-row: 12; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(37) { grid-row: 13; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(40) { grid-row: 14; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(43) { grid-row: 15; grid-column: 2 }
div.FormGrid.div.ButtonWrapper:nth-child(46) { grid-row: 16; grid-column: 2 }

div.FormGrid div.ColumnSpanner:nth-child(2) {grid-row: 1; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(5) {grid-row: 2; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(8) {grid-row: 3; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(11) {grid-row: 4; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(14) {grid-row: 5; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(17) {grid-row: 6; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(20) {grid-row: 7; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(23) {grid-row: 8; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(26) {grid-row: 9; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(29) {grid-row: 10; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(32) {grid-row: 11; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(35) {grid-row: 12; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(38) {grid-row: 13; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(41) {grid-row: 14; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(44) {grid-row: 15; grid-column: 1/3}
div.FormGrid div.ColumnSpanner:nth-child(47) {grid-row: 16; grid-column: 1/3}

div.FormGrid.AtLeastOneError div.Caption, div.FormGrid.AtLeastOneError div.ColumnSpanner
{
    padding-left: 12px;
}
div.FormGrid.AtLeastOneError div.Field, div.FormGrid.AtLeastOneError div.ColumnSpanner
{
    padding-right: 12px;
}
div.FormGrid.ResultOK div.Caption, div.FormGrid.ResultOK div.Field
{
}     /* I could do the same as above if I need to show something on the fields when the result is OK */

@media (max-width: 1200px) and (min-width: 900px), (max-width: 500px) {
    div.FormGrid
    {
        display: grid;
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        grid-row-gap: 0;
        align-items: stretch;
    }
    div.FormGrid>div.Background 
    {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    div.FormGrid>div.Caption
    {
        padding: 4px 0 4px 0 ;
    }
    div.FormGrid>div.Field
    {
        padding: 0 0 4px 0 ;
    }
    div.FormGrid>div.ColumnSpanner p
    {
        margin-top: 4px;
        margin-bottom: 4px;
    }

    div.FormGrid div.Background:nth-child(1) { grid-row: 1/3; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(4) { grid-row: 3/5; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(7) { grid-row: 5/7; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(10) { grid-row: 7/9; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(13) { grid-row: 9/11; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(16) { grid-row: 11/13; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(19) { grid-row: 13/15; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(22) { grid-row: 15/17; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(25) { grid-row: 17/19; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(28) { grid-row: 19/21; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(31) { grid-row: 21/23; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(34) { grid-row: 23/25; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(37) { grid-row: 25/27; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(40) { grid-row: 27/29; grid-column: 1; margin-bottom: 4px;}
    div.FormGrid div.Background:nth-child(43) { grid-row: 29/31; grid-column: 1; margin-bottom: 4px;}

    div.FormGrid div.Caption:nth-child(2) { grid-row: 1; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(5) { grid-row: 3; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(8) { grid-row: 5; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(11) { grid-row: 7; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(14) { grid-row: 9; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(17) { grid-row: 11; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(20) { grid-row: 13; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(23) { grid-row: 15; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(26) { grid-row: 17; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(29) { grid-row: 19; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(32) { grid-row: 21; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(35) { grid-row: 23; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(38) { grid-row: 25; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(41) { grid-row: 27; grid-column: 1; }
    div.FormGrid div.Caption:nth-child(44) { grid-row: 29; grid-column: 1; }

    div.FormGrid div.Field:nth-child(3) { grid-row: 2; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(6) { grid-row: 4; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(9) { grid-row: 6; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(12) { grid-row: 8; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(15) { grid-row: 10; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(18) { grid-row: 12; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(21) { grid-row: 14; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(24) { grid-row: 16; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(27) { grid-row: 18; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(30) { grid-row: 20; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(33) { grid-row: 22; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(36) { grid-row: 24; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(39) { grid-row: 26; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(42) { grid-row: 28; grid-column: 1; margin-bottom: 12px; }
    div.FormGrid div.Field:nth-child(45) { grid-row: 30; grid-column: 1; margin-bottom: 12px; }

    div.FormGrid.div.ButtonWrapper:nth-child(1) { grid-row: 1; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(4) { grid-row: 3; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(7) { grid-row: 5; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(10) { grid-row: 7; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(13) { grid-row: 9; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(16) { grid-row: 11; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(19) { grid-row: 13; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(22) { grid-row: 15; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(25) { grid-row: 17; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(28) { grid-row: 19; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(31) { grid-row: 21; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(34) { grid-row: 23; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(37) { grid-row: 25; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(40) { grid-row: 27; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(43) { grid-row: 29; grid-column: 1 }
    div.FormGrid.div.ButtonWrapper:nth-child(46) { grid-row: 31; grid-column: 1 }

    div.FormGrid div.ColumnSpanner:nth-child(2) {grid-row: 1; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(5) {grid-row: 3; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(8) {grid-row: 5; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(11) {grid-row: 7; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(14) {grid-row: 9; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(17) {grid-row: 11; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(20) {grid-row: 13; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(23) {grid-row: 15; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(26) {grid-row: 17; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(29) {grid-row: 19; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(32) {grid-row: 21; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(35) {grid-row: 23; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(38) {grid-row: 25; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(41) {grid-row: 27; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(44) {grid-row: 29; grid-column: 1; margin-bottom: 12px;}
    div.FormGrid div.ColumnSpanner:nth-child(47) {grid-row: 31; grid-column: 1; margin-bottom: 12px;}


    div.FormGrid.AtLeastOneError div.Caption
    {
        padding-left: 12px;
        padding-right: 12px;
    }
    div.FormGrid.AtLeastOneError div.Field
    {
        padding-left: 12px;
        padding-right: 12px;
    }
    div.FormGrid.ResultOK div.Caption, div.FormGrid.ResultOK div.Field
    {
    }     /* I could do the same as above if I need to show something on the fields when the result is OK */

    
}

div.FormGrid div.Field table.RadioFields
{
    display: inline-block;
    vertical-align: top;
}
div.FormGrid div.Field table.RadioFields td {
    display: inline-block;
    vertical-align: unset;
}
div.FormGrid div.Field input[type='radio']
{
    vertical-align: baseline;
}
div.FormGrid div.Field table.RadioFields p {
    display: inline-block;
    vertical-align: baseline;
    margin-bottom: 0;
}

div.FormGrid div.Field.ErrorField>input, div.FormGrid div.Field.ErrorField>textarea, div.FormGrid div.Field.ErrorField>select {
    background-color: var(--Red);
    color: var(--White);
}

/**************************** _Root.css ****************************/
/* Override Hs*/
h2 {
    color: var(--Orange1);
}


div.MW /* This is the main div to ensure footer is left at the bottom*/
{
    display: grid;
    min-height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    background-color: var(--LightBlue);
}

.CursorPointer								{cursor: pointer;}
div.FlexFiller								{visibility: hidden; margin-bottom: 0; margin-top: 0; padding-bottom: 0; padding-top: 0;}
    
/* Alert should be same as ValidatorErrors*/
div.Alert       
{
	background-color: var(--Red);
	border: none;
	border-radius: 6px;
    padding: calc(8px * var(--PaddingRatio)) 0;
}
div.Alert p
{
	color: var(--White);
	margin: calc(8px * var(--FontRatio)) calc(10px * var(--FontRatio));
}


DIV.CenterContent	{
    overflow: visible !important;
}

/**************************** _Variables.css ****************************/
:root
{
    /* Standard variables*/
    --MarginRatio: 1;
    --PaddingRatio: 1;
    --HeaderRatio: 1;
    --FontRatio: 1;
    --FontRatioFixed: 1;
    
    --BodyBackgroundColor: #ffffff;

    --MainFontFamily: 'Source Sans Pro', sans-serif;
    --MainFontWeight: 400;
    --MainFontSize: var(--T0);
    --MainLineHeightRatio: 1.25;
    --MainFontColor: var(--Black);

    --HsFontFamily: 'Source Sans Pro', sans-serif;
    --HsFontWeight: 400;
    --HsLineHeightRatio: 1.25;
    --HsColor: var(--DarkBlue);

    --FormControlFontFamily: 'Source Sans Pro', sans-serif;
    --FormControlFontWeight: 400;
    --FormControlFontSize: 16px;
    --FormControlTextColor: var(--Black);
    --FormControlBackgroundColor: var(--White);
    --FormControlShadow: rgba(0,0,0,0.2) 2px 2px 4px inset;
    --FormControlPaddingV: 8px;
    --FormControlPaddingH: 20px;
    --FormControlRadius: var(--D2);
    --FormControlBorder: 2px solid #ffffff;
    --FormControlHeight: 50px;

    --FormButtonFontFamily: 'Source Sans Pro', sans-serif;
    --FormButtonFontWeight: 600;
    --FormButtonFontSize: 16px;
    --FormButtonTextColor: var(--White);
    --FormButtonBackgroundColor: var(--Orange);
    --FormButtonTextColorHover: var(--White);
    --FormButtonBackgroundColorHover: var(--LightBlue);

    --ValidatorOKBackgroundColor: var(--DarkGreen);
    --ValidatorOKTextColor: var(--White);
    --ValidatorErrorBackgroundColor: var(--Red);
    --ValidatorErrorTextColor: var(--White);
    --ValidatorFieldHighlighterBackgroundColor: var(--Orange2);
    --ValidatorFieldHighlighterTextColor: var(--White);
    --ValidatorErrorFieldBackgroundColor: var(--Orange2);
    --ValidatorErrorFieldTextColor: var(--White);

    --ListColor: var(--DarkGreen);
    --AColor: var(--DarkBlue);
    --StrongFontWeight: 700;

    --LayoutMaxWidth: 1280px;
    --LayoutMargin: 20px;

    --M1: 12px;
    --M2: 24px;
    --M3: 36px;
    --M4: 48px;
    --M8: 96px;
    --M10: 120px;
    --M12: 144px;
    --D2: 6px;
    --D3: 4px;
    --D6: 2px;

    --T0: 16px;     --T0MA: 12px;      --T0MB: 12px;  /* For standard texts, T0MA is typically M1, while T0MB can be M1 or M2 */
    --T1: 32px;     --T1M: 12px;   --T1P: 12px;   /* As H1 */
    --T2: 32px;     --T2M: 12px;   --T2P: 12px;   /* As H2 */
    --T3: 24px;     --T3M: 12px;   --T3P: 8px;     /* As H3 */
    --T4: 24px;     --T4M: 12px;   --T4P: 8px;     /* As H4 */
    --T5: 18px;     --T5M: 8px;     --T5P: 6px;     /* As H5 */
    --T6: 16px;     --T6M: 8px;     --T6P: 6px;     /* As H6 */

    /* Custom colors & variables*/
    --Black: #202020;
    --White: #ffffff;
    --DarkBlue: #00448b;
    --LightGray: #ccc;
    --DarkGray: #444444;
    --Red: #a00000;
    --DarkRed: #800000;
    --LightRed: #ff4040;
    --DarkGreen: #208040;
    --LightBlue: #1095d3;
    --Orange: #f7931d;
    --LightGrayBackground: #f4f7fa;
    --DarkBlueSemiOpaque: rgba(0,68,139,0.9);
    --LightBlueSemiOpaque: #1095d3c0;
    
    --FormControlDropdownShadow: rgba(0,0,0,0.2) 0px 0px 4px;
    --FormControlDropdownItemTextColor: var(--Black);
    --FormControlDropdownHeaderTextColor: var(--DarkBlue);
    --FormControlDropdownHeaderFontWeight: 400;
    --FormControlDropdownItemBackgroundColorHover: var(--LightBlue);
    --FormControlDropdownItemTextColorHover: var(--White);
    
    --SmallTItleFontSize: 16px; /* Used for Extra titles*/
    --SmallTitleHeightRatio: 1.25;

    --MedFontSize: 14px;     /* Used for Extra descriptions*/
    --MedLineHeightRatio: 1.25;

    --SmallFontSize: 12px; /* Used for Comments Under Quote*/
    --SmallLineHeightRatio: 1.25;

    /* Separation Between Sections - a section is a differently colored div area, or divs separated by a line */
    /* Base is 4px, 8px, 16px, 28px, 40px */
    --SeparationBeforeSection: 28px; /* Typically a 16px margin and the 12px padding of the H1/H2*/
    --SeparationAfterSection: 40px; /* This is a 40px margin at the bottom*/

    /* Base is 20px, 40px for Horizontal, but 8px or 16px can exist for padding */
    --SeparationInsideSections: 20px; /* In between subtitles*/

    /* These paddings are for text content boxes*/
    --PaddingTopInsideBox: 16px;
    --PaddingBottomInsideBox: 24px;
    --PaddingSideInsideBox: 20px;
    
    /* These paddings are for more square / image content, where we will have a constant padding all around*/
    --PaddingAroundBoxSmall: 4px; /* Destinations and Testimonials*/
    --PaddingAroundBoxMedium: 8px; /* Extras*/
    --PaddingAroundBoxLarge: 16px; 

    --HorizontalGap: 40px;
    --GapBetweenSmallBoxes: 16px; /* For example, Testimonials and Destiantions on home page*/
    --LineColor: #666666;
    
    /* These are buttons used in QuoteForm and QuoteInfo, that is, orange panels */
    --OrangePanelBackgroundColor: var(--Orange);
    --OrangePanelBoxShadow: rgba(0,0,0,0.2) 0px 0px 10px;
    --OrangePanelButtonFontFamily: 'Source Sans Pro', sans-serif;
    --OrangePanelButtonFontWeight: 600;
    --OrangePanelButtonFontSize: 16px;
    --OrangePanelButtonTextColor: var(--White);
    --OrangePanelButtonBackgroundColor: var(--LightBlue);
    --OrangePanelButtonTextColorHover: var(--Orange);
    --OrangePanelButtonBackgroundColorHover: var(--DarkBlue);

    --ComboboxDropdownItemColor: var(--DarkGray);

    --CalendarTHBackgroundColor: var(--DarkBlue);
    --CalendarTHTextColor: var(--White);
    --CalendarTDDisabledBackgroundColor: var(--White);
    --CalendarTDDisabledTextColor: var(--LightGray);
    --CalendarTDEnabledBackgroundColor: var(--White);
    --CalendarTDEnabledTextColor: var(--Black);
    --CalendarButtonBackgroundColor: var(--Orange);
    --CalendarButtonTextColor: var(--White);
    --CalendarTDEnabledBackgroundColorHover: var(--LightBlue);
    --CalendarTDEnabledTextColorHover: var(--White);
    --CalendarCurrentMonthTextColor: var(--Black);

    --NoExcessGradient: linear-gradient(to right, darkviolet, #400080);

    /* These are used in  */
    --ProcessButtonBackgroundColor: var(--Orange);

    --QuoteFormPadding: var(--PaddingAroundBoxSmall) 0 0 var(--PaddingAroundBoxSmall);

    --QuoteResultsWrapperBackgroundColor: var(--LightGrayBackground);
    --QuoteResultTextColor: var(--Black);
    --QuoteResultTitleColor: var(--DarkBlue);
    --QuoteResultTitleFontWeight: 400;
    --QuoteResultBoxShadow: rgba(0,0,0,0.2) 0px 0px 10px;
    --QuoteResultPriceColor: var(--Black);
    --QuoteResultButtonBackgroundColor: var(--Orange);
    --QuoteResultButtonTextColor: var(--White);
    --QuoteResultButtonFontWeight: 600;
    --QuoteResultButtonFontSize: 16px;
    --QuoteResultButtonBackgroundColorHover: var(--LightBlue);
    --QuoteResultButtonTextColorHover: var(--White);
    --QuoteResultPricePanelBackgroundColor: var(--LightGrayBackground);

    --QuoteInfoBackgroundColor: var(--Orange);
    --QuoteInfoTextColor: var(--DarkBlue);
    --QuoteInfoTextHighlightShadow: rgba(255, 255, 255, 0.6) 0px 0px 6px;
    --QuoteInfoTextHighlightFontWeight: 700;
    --QuoteInfoTitleFontWeight: 300;

    --TopBarBackgroundColor: var(--DarkBlue);
    --TopBarBackgroundImage: none;
    --TopBarBorderBottom: 2px solid var(--LightBlue);
    --TopBarComboboxButtonBackgroundColor: inherit;
    --TopBarComboboxButtonBackgroundColorHover: var(--LightBlue);
    --TopBarComboboxButtonActiveBackgroundColor: var(--LightBlue);
    --TopBarComboboxMenuBackgroundColor: var(--DarkBlue);
    --TopBarComboboxMenuTextColor: var(--White);
    --TopBarLoginButtonBackgroundColor: var(--Orange);
    --TopBarLoginButtonTextColor: var(--White);
    --TopBarLoginButtonBackgroundColorHover: var(--LightBlue);
    --TopBarLoginButtonTextColorHover: var(--White);
    --TopBarTextColor: var(--White);
    --TopBarBoxShadow: rgba(0,0,0,0.3) 10px 0px 20px;
    
    --WhatsIncludedWrapperBackgroundColor: #f8f8f8;
    --WhatsIncludedTitleAlign: center;

    --DestinationsWrapperBackgroundColor: none;
    --DestinationsWrapperBackgroundImage: linear-gradient(to bottom, #ffffff, transparent 50%), url('/images/TravelDestinationsBack.webp'); 
    --DestinationBackgroundColor: var(--White);
    --DestinationsTitleColor: inherit;
    --DestinationsTitleFontWeight: inherit;
    --DestinationsTitleAlign: inherit;
    --DestinationTitleColor: var(--DarkBlue);
    --DestinationTextColor: var(--Black);
    --DestinationBulletColor: var(--LightBlue);
    --DestinationBoxShadow: none;

    --WorkingTitleColor: #00448b;
    --WorkingTextColor: #00448b;

    --FooterBackgroundImage: linear-gradient(165deg, #00448b 40%, rgba(0,68,39,0.5) 100%), url('/images/Footer.webp');
    --FooterBackgroundColor: none;
    --FooterBorderTop: 2px solid #1095d3;
    --FooterMinHeight: 400px;

    --BookItMainWrapperBackgroundColor: #f4f7fa;

    --ExtraBackgroundColor: var(--White);
    --ExtraBackgroundColorHover: var(--LightGrayBackground);
    --ExtraTextColor: var(--Black);
    --ExtraTitleColor: var(--DarkBlue);

    --BookItButtonBackgroundColor: var(--Orange);
    --BookItButtonBackgroundColorHover: var(--LightBlue);
    --BookItButtonTextColor: var(--White);
    --BookItButtonTextColorHover: var(--White);
    --BookItButtonFontWeight: 700;
    --BookItTitleColor: inherit;

    --BookItSectionPadding: 16px;
    --BookItSectionBorder: solid 4px var(--White);
    --BookItSectionBorderRadius: 4px;
    --BookItSectionBoxShadow: rgba(0,0,0,0.2) 0px 0px 10px;
    --BookItSectionBoxBackgroundColor: none;

    --HomeBackgroundImage: url('/images/HeaderHome.webp');
    --HomeTitleColor: var(--White);
}

/**************************** Benefits.css ****************************/
div.BenefitsWrapper
{
	display: grid; 
	grid-template-columns: 1fr 1fr;
	grid-column-gap: var(--HorizontalGap);
	box-sizing: border-box;
	overflow: hidden;
    margin-top: var(--SeparationInsideSections);
	margin-bottom: var(--SeparationAfterSection);
    border-radius: 4px;
    background-color: var(--DarkBlueSemiOpaque);
    padding: var(--PaddingTopInsideBox) var(--PaddingSideInsideBox) var(--PaddingBottomInsideBox) 0;
}
div.BenefitsWrapper li
{
	color: var(--White);
}

@media all and (max-width: 1280px) {
	div.BenefitsWrapper
	{
		background-color: var(--LightBlueSemiOpaque);
	}
}
@media all and (max-width:900px) {
div.BenefitsWrapper
	{
		background-color: var(--LightBlue);
	}
}
@media all and (max-width: 600px) {
	div.BenefitsWrapper
	{
		grid-template-columns: 1fr;
	}

}

/**************************** BookItConfirmation.css ****************************/
iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--SeparationAfterSection);
}

/**************************** BookItForm.css ****************************/
div#BookItMainWrapper
{
    background-color: var(--BookItMainWrapperBackgroundColor);
}

div#BookItFormWrapper
{
	border-top: solid 1px var(--LineColor);
    padding-top: calc(var(--SeparationBeforeSection) - 12px) ; /* 12px is the H2 padding top */
    margin-top: var(--SeparationAfterSection); /* This is in fact, the ExtrasAvailable bottom margin, but I cannot put it under Extras since we may have Extras Required */
}
div#BookItMainWrapper h2 {
    color: var(--BookItTitleColor);
}
div#BookItFormLayout {
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	grid-column-gap: calc(var(--HorizontalGap) * 2);
}
div#BookItFormLayout div.Section:first-child h5:first-child
{
    margin-top: 0;
}
div#BookItFormLayout div.Section
{
    margin-bottom:  var(--SeparationInsideSections);
    background-color: var(--BookItSectionBoxBackgroundColor);
    padding: var(--BookItSectionPadding);
    border: var(--BookItSectionBorder);
    box-sizing: border-box;
    border-radius: var(--BookItSectionBorderRadius);
    box-shadow: var(--BookItSectionBoxShadow);
}
div#BookItFormLayout table.RadioFields td:not(:last-child)
{
	padding-right: 20px;
}
div#BookItFormLayout table.RadioFields
{
    padding-bottom: 10px;
}

div#BOKSubmit
{
	background-color: var(--BookItButtonBackgroundColor);
	border-radius: 4px;
	height: 80px;
	margin-top: var(--SeparationInsideSections);
	margin-bottom: var(--SeparationAfterSection);
	margin-left: auto;
	margin-right: auto;
	width: 240px;
    user-select: none;
    cursor: pointer;
	box-sizing: border-box;
	padding: 16px 8px;

}
div#BOKSubmit p
{
    color: var(--BookItButtonTextColor);
	font-weight: var(--BookItButtonFontWeight);
	margin-top: 12px;
	text-align: center;
	font-size: 18px;
}
div#BOKSubmit:hover
{
	background-color: var(--BookItButtonBackgroundColorHover);
	cursor: pointer;
}
div#BOKSubmit:hover p
{
    color: var(--BookItButtonTextColorHover);
}
span.Required
{
	color: var(--Red);
}

/**************************** Buttons.css ****************************/
/* Button over white background are ServiceRate and ContactUs form*/

div.ButtonOverWhiteBackground {
	background-color: var(--FormButtonBackgroundColor);
	border-radius: 4px;
	margin-right: var(--PaddingAroundBoxSmall);
	margin-bottom: var(--PaddingAroundBoxSmall);
	margin-left: auto;
	margin-right: auto;
    user-select: none;
    cursor: pointer;
	box-sizing: border-box;
	padding: 16px 8px;

}
div.ButtonOverWhiteBackground p
{
	color: var(--FormButtonTextColor);
	font-weight: 700;
	text-align: center;
	font-size: 18px;
}

/* Button over quote panel are over QuoteInfo and QuoteForm*/
div.ButtonOverQuotePanel {
	background-color: var(--OrangePanelButtonBackgroundColor);
	border-radius: 4px;
    user-select: none;
    cursor: pointer;
	box-sizing: border-box;
	padding: 16px 8px;
    border: solid 2px var(--White);
}
div.ButtonOverQuotePanel p
{
	color: var(--OrangePanelButtonTextColor) !important;
	font-weight: var(--OrangePanelButtonFontWeight);
	font-size: var(--OrangePanelButtonFontSize);
	text-align: center;
	font-size: 18px;
	margin: 0; padding: 0;
}
div.ButtonOverQuotePanel:hover {
	background-color: var(--OrangePanelButtonBackgroundColorHover);
}
div.ButtonOverQuotePanel:hover p {
	color: var(--OrangePanelButtonTextColorHover) !important;
}

/* Button BookIt styling is located under BookItForm.css */

/**************************** CompanyLogos.css ****************************/
div.CompanyLogosWrapper
{
	background-color: var(--DarkBlue);
	padding-bottom: calc(var(--SeparationAfterSection) - 16px); /* The CompanyLogos div has a 16px padding */
}
div.CompanyLogosWrapper h2
{
	margin-top: calc(var(--SeparationBeforeSection) - 12px); /* 12px is the h2 padding*/
	color: var(--White);
}
div.CompanyLogosWrapper p
{
	color: var(--White);
}
div.CompanyLogos
{
	display: flex;
	flex-wrap: wrap;
	margin-right: -16px;
	margin-bottom: -16px;
	padding-top: 16px;
	padding-bottom: 16px;
	box-sizing: border-box;
}
div.CompanyLogos img
{
	flex: 0 0 62px;
	margin-right: 16px;
	margin-bottom: 16px;
	display: block;
    max-width: 62px
}



/**************************** CompanyStationInBookIt.css ****************************/
div#Location
{
	margin-top: 20px;
}
div.CompanyStationPickUp.CompanyStationDropOff.Active
{
	background-color: #e0e0e0;
}

/**************************** ContactUsForm.css ****************************/
div.ContactUsForm textarea
{
    height: 200px;
}

/**************************** Content.css ****************************/
body.Content div.DualColumns div.Left img {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}


/**************************** ControlPanelBookings.css ****************************/
div.ControlPanelBookings table
{
    width: 100%;
}
div.ControlPanelBookings table td, div.ControlPanelBookings table th
{
    padding: 4px 12px;
    vertical-align: middle;
}
div.ControlPanelBookings table th p
{
    font-weight: 700;

}
div.ControlPanelBookings table tr
{
    border-bottom: solid 1px var(--DarkGray);
}
div.ControlPanelBookings table th
{
    border-bottom: solid 2px var(--DarkGray);
}

/**************************** Destinations.css ****************************/

div.DestinationsWrapper
{
	background-color: var(--DestinationsWrapperBackgroundColor);
    background-image: var(--DestinationsWrapperBackgroundImage);
    background-size: cover; background-position: bottom center;
	padding-bottom: calc(var(--SeparationAfterSection) - var(--GapBetweenSmallBoxes)); /* The Destinations div has a 16px padding */
}
div.DestinationsWrapper h2
{
	margin-top: calc(var(--SeparationBeforeSection) - 12px); /* 12px is the h2 padding*/
    color: var(--DestinationsTitleColor);
    font-weight: var(--DestinationsTitleFontWeight);
    text-align: var(--DestinationsTitleAlign);
}
div.Destinations
{
	display: flex;
	flex-wrap: wrap;
	margin-right: calc(0px - var(--GapBetweenSmallBoxes));
	margin-bottom: calc(0px - var(--GapBetweenSmallBoxes));
	padding-top: var(--GapBetweenSmallBoxes);
	padding-bottom: var(--GapBetweenSmallBoxes);
	box-sizing: border-box;
	justify-content: center;
}
div.Destinations div.Destination
{
	flex: 1 0 200px;
	margin-right: var(--GapBetweenSmallBoxes);
	margin-bottom: var(--GapBetweenSmallBoxes);
	background-color: var(--DestinationBackgroundColor);
	border-radius: 4px;
	padding: var(--PaddingAroundBoxSmall);
	max-width: 400px;
    box-shadow: var(--DestinationBoxShadow);
}
@media all and (max-width: 1150px) {
	div.Destinations div.Destination
	{
		flex: 1 1 300px;
	}
}
@media all and (max-width: 1000px) {
	div.Destinations div.Destination
	{
		flex: 1 0 250px;
	}
}
div.Destinations div.Destination img
{
	width: 100%;
}
/* Text is a further inside than image above*/
div.Destinations div.Destination h4
{
	margin-top: 0;
	padding-left: 4px;
	padding-right: 4px;
	margin-bottom: 0;
    color: var(--DestinationTitleColor);
}
div.Destinations div.Destination p
{
	padding-left: 4px;
	padding-right: 4px;
	margin-bottom: 4px;
    margin-top: 4px;
	font-size: var(--MedFontSize);
    color: var(--DestinationTextColor);
}
div.Destinations div.Destination a
{
	font-size: var(--MedFontSize);
}
/* List of hyperlinks */
div.Destination ul
{
	font-size: var(--MedFontSize);
	padding: 8px 4px;
}
div.Destination ul li
{
	padding: 0;
}
div.Destination ul li i.fas
{
	padding-right: 8px;
	color: var(--DestinationBulletColor);
}

/**************************** DualColumns.css ****************************/
div.DualColumnsWrapper {
	background-color: var(--LightBlue); border-top: 2px solid var(--White);
	padding-bottom: var(--SeparationAfterSection);
    padding-top: var(--SeparationBeforeSection);
}
div.DualColumns
{
	display: grid;
    grid-column-gap: var(--HorizontalGap);
}
div.DualColumnsA {
    grid-template-columns: minmax(100px,0.3fr) 1fr;
}
div.DualColumnsB {
    grid-template-columns: 1fr minmax(320px,0.6fr);
}

div.DualColumns>div
{
	background-color: var(--White);
	border-radius: 4px;
}

/* DualColumnsB has square content on left, and standard content on right */
div.DualColumnsA div.Left
{
	padding: var(--PaddingAroundBoxLarge); /* Square/image-like content, typically logo grid */
}
div.DualColumnsA div.Right /* Standard content*/
{
	padding: var(--PaddingTopInsideBox) var(--PaddingSideInsideBox) var(--PaddingBottomInsideBox) var(--PaddingSideInsideBox); 
}

/* DualColumnsB has standard content on both columns */
div.DualColumnsB div.Left/* Standard content*/
{
	padding: var(--PaddingTopInsideBox) var(--PaddingSideInsideBox) var(--PaddingBottomInsideBox) var(--PaddingSideInsideBox); 
}
div.DualColumnsB div.Right /* Standard content*/
{
	padding: var(--PaddingTopInsideBox) var(--PaddingSideInsideBox) var(--PaddingBottomInsideBox) var(--PaddingSideInsideBox); 
}

div.DualColumns div.Left div.CompanyGrid
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    grid-column-gap: 12px;
    grid-row-gap: 12px;
}
div.DualColumns div.Left div.CompanyGrid img
{
    width: 100%;
}

@media all and (max-width: 900px) {
	div.DualColumnsA
	{
		grid-template-columns: 1fr;
        grid-row-gap: var(--SeparationAfterSection);
	}
	div.DualColumnsB
	{
		grid-template-columns: 1fr;
        grid-row-gap: var(--SeparationAfterSection);
	}
}

/**************************** DualMessages.css ****************************/
/* DualMessages page is the confirmation page */
div.DualMessagesWrapper {
	background-color: var(--LightBlue); border-top: 2px solid var(--White);
	padding-top: var(--SeparationBeforeSection);
	padding-bottom: var(--SeparationAfterSection);
}
div.DualMessages
{
	display: flex;
	flex-wrap: wrap;
	margin-right: calc(0px - var(--HorizontalGap));
	margin-bottom: calc(0px - var(--SeparationInsideSections));
	box-sizing: border-box;
	justify-content: center;
}
div.DualMessages div.DualMessage
{
	flex: 1 0 500px;
	margin-right: var(--HorizontalGap);
	margin-bottom: var(--SeparationInsideSections);
	background-color: var(--White);
	border-radius: 4px;
	padding: var(--PaddingTopInsideBox) var(--PaddingSideInsideBox) var(--PaddingBottomInsideBox) var(--PaddingSideInsideBox);
	max-width: 400px;
}
@media all and (max-width: 1150px) {
	div.DualMessages div.DualMessage
	{
		flex: 1 1 400px;
	}
}
@media all and (max-width: 1000px) {
	div.DualMessages div.DualMessage
	{
		flex: 1 1 500px;
	    max-width: 500px;
	}
}

/**************************** Extras.css ****************************/
div#ExtrasAvailable
{
    padding-top: calc(var(--SeparationBeforeSection) - 12px - 12px) ; /* 12px is the H2 padding top and  12px is the H2 margin area, it's added as APS so I have to take both of them out  */
	border-top: solid 1px var(--LineColor);
    margin-top: var(--SeparationAfterSection);
}
div.ExtrasWrapper
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-column-gap: 1px;
	grid-row-gap: 1px;
	background-image: url('images/pattern.png'); background-repeat: repeat;
}
div.Extra
{
	overflow: hidden;
	cursor: pointer;
	background-color: var(--ExtraBackgroundColor);
	padding: var(--PaddingAroundBoxMedium);
    user-select: none;
}
div.Extra input
{
	float: left;
	margin-top: 4px;
	margin-right: 8px;
}
div.Extra h5
{
	color: var(--ExtraTitleColor);
    clear: none;
	padding-top: 0;
	margin-top: 0;
	margin-bottom: 4px;
	font-size: var(--SmallTitleFontSize);
    line-height: calc(var(--SmallTitleFontSize) * var(--SmallTitleHeightRatio));
}
div.Extra div
{
	overflow: hidden;
}
div.Extra p
{
	overflow: auto;
	font-size: var(--MedFontSize);
    line-height: calc(var(--MedFontSize) * var(--MedFontSizeHeightRatio));
	margin-top: 0;
    max-height: 120px;
    color: var(--ExtraTextColor);
}
div.Extra:hover
{
	background-color: var(--ExtraBackgroundColorHover);
}
p.ExtrasRequiredIncluded
{
	margin-top: var(--SeparationInsideSections);
    margin-bottom: 0;
}

div#ExtrasHelpBox {
    background-color: var(--White);
    padding: var(--PaddingAroundBoxLarge);
    user-select: none;
    max-height: 200px;
    overflow: auto;
}
div#ExtrasHelpExpanded {
    display: none;
}
span#ExtrasHelpExpand {
    cursor: pointer;
    color: var(--AColor);
}

/**************************** Fleet.css ****************************/
div.Fleet div.Grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    grid-column-gap: var(--HorizontalGap);
    grid-row-gap: calc(var(--SeparationInsideSections) * 2);
}
div.Fleet div.Grid img
{
    width: 100%;
}
div.Fleet div.Grid p.Code
{
    margin-top: 4px;
    margin-bottom: 0px;
    font-weight: 700;
    text-align: center;
}
div.Fleet div.Grid p.Name
{
    margin-top: 0px;
    text-align: center;
}
div.Fleet div.Grid div div.Icons
{
    display: flex;
    flex-wrap: nowrap;
    padding-left: 20px;
    width: max-content;
    margin-right: auto;
    margin-left: auto;
}
div.Fleet div.Grid div div.Icons div
{
    margin-right: 20px;
    text-align: center;
}
div.Fleet div.Grid div div.Icons div>img
{
    width: 32px;
}

/**************************** Footer.css ****************************/
div.SectionFooter
{
	background-image: linear-gradient(165deg, #00448b 40%, rgba(0,68,39,0.5) 100%), url('/images/Footer.webp'); background-size: cover; border-top: 2px solid #1095d3;
	min-height: 400px; overflow-x: hidden;	
}
div.SectionFooter h2
{
	margin-top: calc(var(--SeparationBeforeSection) - 12px); /* 12px is the h2 padding*/
	margin-bottom: 16px;
	color: #ffffff;
}
div.SectionFooter h4 {
    color: #ffffff;
    font-size: 16px;
	white-space: nowrap;
}

div.SectionFooter div.ColumnSet {
    display: flex;
    flex-wrap: wrap;
	margin-right: -60px;
}

div.SectionFooter div.Column {
    flex: 1 1 min-content;
    padding: 0 60px var(--SeparationAfterSection) 0;
    min-width: 200px;
	box-sizing: border-box;
}

div.SectionFooter div.Column p {
    text-align: left;
}

div.SectionFooter ul {
    padding-left: 16px;
}

div.SectionFooter li {
    color: #ffffff;
    margin-top: 2px;
    margin-bottom: 2px;
}

div.SectionFooter a {
    color: #ffffff;
    z-index: 1;
    position: relative;
    font-weight: 300;
}

div.SectionFooter i {
    color: #ffffff;
    width: 36px;
    text-align: center;
}

div.SectionFooter p {
    text-align: center;
    color: #ffffff;
    font-weight: 400;
}

div.SectionFooter ul.RentalCompanies
{
	display: flex;
	flex-wrap: wrap;
}
div.SectionFooter ul.RentalCompanies li
{
	flex: 0 0 50%;
	box-sizing: border-box;
	padding-right: 20px
}

/**************************** ImageHeader.css ****************************/
div.ImageHeader1
{
	background-image: var(--HomeBackgroundImage);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	min-height: 500px;
    padding-top: 64px;
}
@media all and (max-width: 600px) {
	div.ImageHeader1
	{
		padding-top: var(--SeparationBeforeSection);
	}
}
div.ImageHeader1 h1
{
	color: var(--HomeTitleColor);
}
div.ImageHeader1Back
{
	background-image: url('/images/Lady3Back.jpg');
	background-position: right top;
	background-repeat: repeat-x;
}

/* This is for the internal pages*/
div.ImageHeaderInternal
{
	width: 100%;
    padding-top: var(--SeparationBeforeSection);
	padding-bottom: var(--SeparationBeforeSection); /* This is an exception, to make the header internal look more symmetric */
}
div.ImageHeaderInternal h1
{
	color: var(--White);
}
div.ImageHeaderInternalBack
{
	background-image: url('/images/HeaderInternal.webp');
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
}

/**************************** MessageBox.css ****************************/
div.MessageBox 
{
    background-color: var(--BodyBackgroundColor);
    border-radius: 4px;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--SeparationBeforeSection);
    padding: var(--PaddingTopInsideBox) var(--PaddingSideInsideBox) var(--PaddingBottomInsideBox) var(--PaddingSideInsideBox)
}
div.MessageBox p
{
    text-align: center;
}

/**************************** MobileMenu.css ****************************/
div#MobileMenu
{
	display: none;
	background-color: var(--FormButtonBackgroundColor);
}
div#MobileMenu ul
{
	padding: 0;
	margin: 0;
	display: block;
	box-shadow: rgba(0,0,0,0.3) 10px 0px 20px;
}
div#MobileMenu li
{
	display: block;
	text-align: center;
	color: #ffffff;
	list-style: none;
	padding: 16px;
	border-bottom: 2px solid rgba(255,255,255,0.5);
	margin: 0;

}
div#MobileMenu li:hover
{
	background-color: #00448b;
	cursor: pointer;
}
div#MobileMenu  li a
{
	color: #ffffff;
}
div#MobileMenu  li a:hover
{
	text-decoration: none;
}

/**************************** QuoteForm.css ****************************/
/* Box*/
div.QuoteForm {
    background-color: var(--OrangePanelBackgroundColor);
    box-shadow: var(--OrangePanelBoxShadow);
    padding: var(--QuoteFormPadding);
    display: inline-block;
	border-radius: 4px;
    user-select: none;
}

div.QuoteField
{
	padding-right: var(--PaddingAroundBoxSmall);
	margin-bottom: var(--PaddingAroundBoxSmall);
}
div.QuoteFieldsWrapper1:last-child div.Button
{
    margin-right: 0;
}
div.QuoteFieldsWrapper1:last-child {
    padding-right: var(--PaddingAroundBoxSmall);
}

/*QuoteFields layout that adjusts with viewport width */
div.QuoteFieldsWrapper2
{
    display: flex;
    flex-wrap: nowrap;
}
@media all and (max-width: 800px) {
	div.QuoteFieldsWrapper2
	{
		flex-wrap: wrap;
	}
    div.QuoteFieldsWrapper1:last-child {
        padding-right: 0;
    }
}
div.QuoteFieldsWrapper1 
{
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
	align-items: center;
}
div.QuoteField
{
    flex: 1 1 auto;
}
div.QuoteField100 {
    flex: 8 0 180px;
}
@media all and (max-width:1300px) {
    div.QuoteField100
    {
        flex: 1 1 100%;
    }
}

/* This is for the "to" text in the middle */
div.QuoteForm p 
{
	margin-top: 0px;
	margin-bottom: 4px;
	padding: 0;
	color: #ffffff;
}
@media all and (max-width: 800px) {
    div.QuoteForm p {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    div.QuoteFieldsWrapper1:last-child div.Button
    {
        margin-right: var(--PaddingAroundBoxSmall);
    }
}

/* Additional styling for Quote Form input boxes*/
div.QuoteForm input:not([type='submit']):not([type='file']):not([type='radio']):not([type='checkbox']), div.QuoteForm select, div.QuoteForm textarea
{
    width: 100%;
	display: inline-block;
    height: 55px;
}

/* This is for the button */
div.QuoteForm div.Button, div.QuoteInfo div.Button
{
	width: 100%;
	min-width: 120px;
	margin-right: var(--PaddingAroundBoxSmall);
	margin-bottom: var(--PaddingAroundBoxSmall);
}

/* ComboboxDropdown */
div.ComboboxDropdown
{
	display: none;
	position: absolute;
	background-color: var(--White);
	border-radius: 4px;
	overflow: hidden;
    padding: var(--PaddingAroundBoxSmall);
	z-index: 4;
    margin-top: var(--PaddingAroundBoxSmall); /* Needs to go down the padding of the box above*/
    box-shadow: var(--FormControlDropdownShadow);
    max-height: 70vh;
    overflow-y: auto;
}
div.ComboboxDropdown .ComboboxDropdownItem
{
	padding: 8px 16px;
    border-radius: 2px;
	display: flex;
	flex-wrap: nowrap;
    color: var(--FormControlDropdownItemTextColor);
}
div.ComboboxDropdown .ComboboxDropdownItemHeader
{
	padding: 8px 16px;
    border-radius: 2px;
	display: flex;
	flex-wrap: nowrap;
    border-bottom: solid 1px var(--LineColor);
    color: var(--FormControlDropdownHeaderTextColor);
    font-weight: var(--FormControlDropdownHeaderFontWeight);
}
div.ComboboxDropdown .ComboboxDropdownItem:not(:last-child)
{
    border-bottom: solid 1px var(--LineColor);
}
div.ComboboxDropdown .ComboboxDropdownItem div.Bullet
{
    flex: 0 0 40px;
}
div.ComboboxDropdown .ComboboxDropdownItem div.Caption
{
    flex: 1 1 auto;
}
div.ComboboxDropdown .ComboboxDropdownItem:hover { background-color: var(--FormControlDropdownItemBackgroundColorHover); cursor: pointer; color: var(--FormControlDropdownItemTextColorHover);}


/* Calendar */
div.CalendarBar
{
	display: flex;
	flex-wrap: nowrap;
}
span#CurrentMonth
{
	flex: 1 0 auto;
	padding: 8px;
	text-align: center;
    color: var(--CalendarCurrentMonthTextColor);
}
span#NextMonth
{
	flex: 0 0 auto;
	cursor: pointer;
	text-align: right;
    background-color: var(--CalendarButtonBackgroundColor);
    color: var(--CalendarButtonTextColor);
    padding: 8px;
    border-radius:2px;
    user-select: none;
}
span#PreviousMonth {
    flex: 0 0 auto;
    cursor: pointer;
    text-align: left;
    background-color: var(--CalendarButtonBackgroundColor);
    color: var(--CalendarButtonTextColor);
    padding: 8px;
    border-radius: 2px;
    user-select: none;
}
table.Calendar th {
    width: 30px;
    border: 1px solid #cccccc;
    border-collapse: collapse;
    padding: 4px 8px;
    box-sizing: border-box;
    text-align: center;
    background-color: var(--CalendarTHBackgroundColor);
    color: var(--CalendarTHTextColor);
}
table.Calendar
{
    margin-top: 8px;
    user-select: none;
}
table.Calendar td
{
	width: 40px;
	border: 1px solid #cccccc;
	border-collapse: collapse;
	padding: 4px 8px;
	box-sizing: border-box;
	text-align: right;
}
table.Calendar td.Enabled
{
	background-color: var(--CalendarTDEnabledBackgroundColor);
    color: var(--CalendarTDEnabledTextColor);
}
table.Calendar td.Disabled
{
	background-color: var(--CalendarTDDisabledBackgroundColor);
    color: var(--CalendarTDDisabledTextColor);
}
table.Calendar td.Enabled:hover
{
	background-color: var(--CalendarTDEnabledBackgroundColorHover);
    color: var(--CalendarTDEnabledTextColorHover);
	cursor: pointer;
}
div.CalendarBar
{
}

/* Time Selector */
@media all and (max-width: 600px) {
	div.ComboboxTime
	{
		position: absolute;
		right: 0;
	}
}
table.Time
{
    user-select: none;
}
table.Time td
{
	width: 60px;
	border-collapse: collapse;
	padding: 8px 8px;
	box-sizing: border-box;
	text-align: left;
}
table.Time div p
{
	color: var(--Black);;
	text-align: center;
	margin-top: 2px;
	margin-bottom: 2px;
}
table.Time td:hover { background-color: var(--CalendarTDEnabledBackgroundColorHover); cursor: pointer; border-radius: 4px;}
table.Time td:hover p {	color: var(--CalendarTDEnabledTextColorHover); }

/* ComboboxAlert Messaage*/
div.ComboboxAlert
{
	position: absolute;
	display: none;
}

/* Combobox Small font size on each option*/
div.QuoteForm span.Tiny
{
	font-size: var(--SmallFontSize);
    display: block;
    line-height: calc(var(--SmallFontSize) * var(--SmallLineHeightRatio));
}

/* Delete Text Button on Combobox*/
div.QuoteForm div.ComboboxInputDelete
{
	display: none;
	position: absolute;
	right: 10px;
	top: 6px;
	width: 36px;
	height: 44px;
	border-radius: 2px;
	background-color: #ff0000;
	color: #ffffff;
	font-weight: 400;
	text-align: center;
	padding-top: 12px;
	padding-bottom: 12px;
	cursor: pointer;
	box-sizing: border-box;
}

/**************************** QuoteInfo.css ****************************/
div.QuoteInfo {
    background-color: var(--QuoteInfoBackgroundColor);
    box-shadow: var(--OrangePanelBoxShadow);
    padding: 4px 0 0 4px;
    border-radius: 4px;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
    max-width: calc(100vw - 40px); /* 20px each side for center content*/
}
div.QuoteInfoLargerPadding {
    padding: var(--PaddingAroundBoxLarge);
}
div.QuoteInfoWrapper
{
	display: flex;
	flex-wrap: nowrap;
}
div.QuoteInfoSection
{
    flex: 1 1 auto;
	margin-right: 20px;
}
div#QuoteInfoSection1
{
	padding-left: 8px;
}
div#QuoteInfoSpring
{
	flex: 1000 1000 auto;
}
div.QuoteInfoButtonStandard
{
	flex: 1 0 auto;
	margin-right: 12px;  /* Because QuoteInfoSection1 has a padding-left of 8px. When wrapped, all QuoteInfo's are padded 8px too.*/
    user-select: none;
}
div.QuoteInfoButtonBelow
{
	flex: 0 1 100%;
	margin-right: 4px;
	margin-top: 8px;
	order: 5;
    user-select: none;
}
div.QuoteInfoData
{
    margin-bottom: 8px;
}
div.QuoteInfoData p {
	white-space: nowrap;
}
div.QuoteInfoData div {
	display: inline-block;
	margin-right: 20px;
}
div.QuoteInfo h4
{
	margin-bottom: 0px;
	padding-top: 0;
    font-weight: var(--QuoteInfoTitleFontWeight);
}
div.QuoteInfo p
{
	color: var(--QuoteInfoTextColor);
}
div.QuoteInfoData p span.Highlight {
	font-weight: var(--QuoteInfoTextHighlightFontWeight);
    text-shadow: var(--QuoteInfoTextHighlightShadow);
}


/**************************** QuoteResults.css ****************************/
div.QuoteResultsWrapper
{
    background: var(--QuoteResultsWrapperBackgroundColor);
}
#Table
{
    width: 100%;
	color: #aaaaaa;
	background-color: #ffffff;
    user-select: none;

}
#Table td
{
	border: 1px solid white;
	border-radius: 4px;
	padding: 4px 10px;
	width: 90px;
	/*min-width: 90px;*/
	cursor: pointer;
	text-align: right;
	font-weight: 400;
	color: #aaaaaa;
	font-size: 13px;
}
#Table th
{
	font-size: 13px;
	border: 1px solid white;
	border-radius: 4px;
	padding: 4px 2px 4px 2px;
	font-weight: 400;
	width: 80px;
	/*min-width: 80px;*/
	cursor: pointer;
	background-color: #00448b;
	color: rgba(255,255,255,0.25);
    text-align: center;
}
#Table th#ResetFilters p
{
	font-size: 13px;
    color: #ffffff;
    text-align: center;
	margin-top: 14px;
}
#Table th img
{
    width: 70%;
    margin: 4px auto 4px auto;
    opacity: 0.25;
}
#Table th.Active
{
	color: #ffffff;
	font-weight: 400;
}
#Table th.Active img {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.75;
}

#Table tr.Active td:not(.CompanyName), #Table col.Active
{
	background-color: rgba(0, 0, 0, 0.05);
}
#Table td.Active
{
	font-weight: 400;
	color: #000000;
}
#Table td.CompanyName
{
	padding: 0 4px 0 0;
	white-space: nowrap;
	text-align: left;
	font-weight: 400;
	background-color: #00448b;
	color: rgba(255,255,255,0.25);
}
#Table tr.Active td.CompanyName
{
	color: #ffffff;
	font-weight: 400;
}
#Table td.CompanyName img
{
	max-height: 28px;
	display: inline;
	vertical-align: middle;
	margin-right: 4px;
}

#TableWrapper
{
	width: 100%;
	overflow-x: hidden;
	border: solid 2px #ffffff;
	border-radius: 4px;
	box-sizing: border-box;
	overflow-y: hidden;
	display: none;
}
@media all and (max-width: 1100px)
{

}
#Results
{
	padding-top: 16px;
	padding-bottom: 16px;
}
div.QuoteResult
{
	background-color: #ffffff;
	box-shadow: var(--QuoteResultBoxShadow);
	padding: 0;
	margin-bottom: 16px;
	display: flex;
	flex-wrap: nowrap;
	border-radius: 4px;
	padding: 4px;
    user-select: none;
}
div.QuoteResult p
{
    color: var(--QuoteResultTextColor);
}
div.QuoteResult.Collapsed
{
	margin-bottom: 10px;
}
div.QuoteResult:last-child
{
	margin-bottom: 0;
}
div.QuoteResult h5
{
	color: var(--QuoteResultTitleColor);
    font-weight: var(--QuoteResultTitleFontWeight);
    font-size: 21px;
}
div.Collapsed.QuoteResult h5
{
	font-size: 16px;
}
div.QRA
{
	flex: 1 1 auto;
	display: flex;
	flex-wrap: nowrap;
}
div.Collapsed div.QRA
{
	margin-bottom: -4px;
}
div.QRB
{
	flex: 0 0 220px;
	display: flex;
}
div.QRA1
{
	flex: 0 0 30%;
	order: 1;
	min-width: 250px;
	padding-right: 4px;
}
div.Collapsed div.QRA1
{
	flex: 0 0 64px;
	min-width: initial;
}
div.QRA1 img
{
	width: 100%;
	border-radius: 4px;
}
div.QRA2
{
	flex: 0 0 128px;
	order: 2;
	margin-right: 4px;
}
div.Collapsed div.QRA2
{
	flex: 0 0 auto;
}
div.QRA2 table
{
	margin-bottom: 4px;
}
div.Collapsed div.QRA2 table
{
	display: inline-block;
	vertical-align: middle;
}
div.QRA2 td.Group
{
	width: 64px;
}
div.QRA2 td img.CompanyLogo
{
	margin: 0;
}
div.QRA2 td.Group
{
	background-color: #f0f0f0;
	color: #ffffff;
	text-align: center;
	vertical-align: middle;
	height: 48px;
}

div.QRA2 td.Group p
{
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	line-height: 14px;
    margin-bottom: 6px;
}
div.QRA2 td.Group span.Small
{
	font-weight: 400;
	font-size: 11px;
}
div.QRA2A
{
	display: flex;
	margin-right: -4px;
    flex-direction: column;
}
div.Collapsed div.QRA2A
{
    display: inline-block;
	width: 72px;
}
div.QRA2A img:last-child
{
	margin-right: 0;
}
.Pic2
{
	display: none;
}
div.QRA3
{
	flex: 4 1 400px;
	order: 4;
	padding: 0 10px 10px 4px;
	box-sizing: border-box;
	border-left: 1px solid #f0f0f0; 
}
div.QuoteResult.Collapsed div.QRA div.QRA3
{
	padding-bottom: 0;
}
div.QRA3 h5
{
	margin-bottom: 0;
	padding-top: 0;
}
div.QuoteResult p.OrSimilarLine
{
	font-size: 12px;
	margin-bottom: 4px;
	padding-bottom: 5px;
	border-bottom: 1px solid #f0f0f0;
}
div.QuoteResult.Collapsed p.OrSimilarLine
{
	border-bottom: none;
}
div.QRA3 h5+p
{
	margin-top: 0;
	padding-top: 0;
}
div.QRB5
{
	flex: 0 0 220px;
	background-color: var(--QuoteResultPricePanelBackgroundColor);
	order: 5;
	padding: 4px 10px;
	box-sizing: border-box;
	text-align: right;
}
div.QRB5 p
{
	margin: 0;
	text-align: right;
}
div.Collapsed div.QRB5 div.Price
{
	display: inline-block;
	margin-right: 10px;
}
div.QRB5 div.Price p
{
	color: var(--QuoteResultPriceColor);
	font-size: 24px;
	font-weight: 700;
}
div.Collapsed div.QRB5 div.Price p
{
	font-size: 16px;
}
span.Currency
{
	font-size: var(--MedFontSize);
}
div.QRB5 div.Breakdown
{
    padding-top: 4px;
    padding-bottom: 8px;
}
div.QRB5 div.Breakdown p
{
	font-size: var(--MedFontSIze);
}
div.Collapsed div.QRB5 div.Breakdown
{
	display: none;
}
div.QRB5 div.BookIt
{
	background-color: var(--QuoteResultButtonBackgroundColor);
	border-radius: 4px;
	height: 48px;
    user-select: none;
}
div.Collapsed div.QRB5 div.BookIt
{
	display: inline-block;
	height: 30px;
	width: 90px;
}
div.QRB5 div.BookIt p
{
	color: var(--QuoteResultButtonTextColor);
	font-weight: var(--QuoteResultButtonFontWeight);
	text-align: center;
	margin-top: 12px;
	font-size: var(--QuoteResultButtonFontSize);
}
div.Collapsed div.QRB5 div.BookIt p
{
	margin-top: 5px;
	font-size: var(--FormButtonFontSize);
}
div.Collapsed div.QRB5 div.BookIt:hover, div.QRB5 div.BookIt:hover
{
	background-color: var(--QuoteResultButtonBackgroundColorHover);
	cursor: pointer;
}
div.Collapsed div.QRB5 div.BookIt:hover p, div.QRB5 div.BookIt:hover p
{
    color: var(--QuoteResultButtonTextColorHover);
}
div.FlexIcons
{
	display: flex;
	flex-wrap: wrap;
}
div.FlexIcons1
{
	flex: 0 1 auto;
}
div.FlexIcons2
{
	flex: 1 1 auto;
}

div.AsImg1
{
	border-radius: 4px;
	background-image: linear-gradient(to right, #aaaaaa 34px, #f0f0f0 34px);
	clear: both;
	width: 128px;
	height: 32px;
	display: block;
	vertical-align: middle;
	margin-bottom: 4px;
	margin-right: 4px;
}
div.Collapsed div.AsImg1
{
	width: 32px;
}
div.Collapsed div.QRA2A div.AsImg1 {
	display: inline-block;
}
div.AsImg1.IconNoExcess {
    display: none;
}
div.Collapsed div.AsImg1.IconNoExcess {
	display: inline-block;
    background-image: var(--NoExcessGradient);
}
div.Collapsed div.AsImg1Big.IconNoExcess {
	display: none;
}
div.AsImg1 img
{
	display: inline-block;
	margin: 2px 8px 2px 2px;
	vertical-align: middle;
	width: 28px;
	height: 28px;
	filter: brightness(200);
}
div.AsImg1 p
{
	display: inline-block;
	font-size: 11px;
	color: #000000;
	line-height: 11px;
	margin: 0 0 2px 0;
	padding: 0;
	vertical-align: middle;
}
div.Collapsed div.AsImg1 p
{
	display: none;
}
div.AsImg2
{
	border-radius: 4px;
	background-color: #f0f0f0;
	color: #000000;
	clear: both;
	width: 60px;
	margin-right: 4px;
	height: 32px;
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 4px;
} 
div.Collapsed div.AsImg2
{
	display: none;
}
div.AsImg2 img {
    display: inline-block;
    margin: 4px 4px 0 4px;
    width: 24px;
	height: 24px;
    vertical-align: middle;
	filter: grayscale(100%) brightness(200%);
}
div.AsImg2 p
{
	display: inline-block;
	font-size: var(--MedFontSize);
	color: #000000;
	line-height: 11px;
	margin: 8px 0 0 0;
	padding: 0;
	vertical-align: middle;
	position: relative;
	top: -2px;
}
div.Collapsed div.QRA2 table 
{
	margin-right: 4px;
}
div.Collapsed .Pic2
{
	width: 64px;
}

@media all and (max-width: 1100px)
{
	div.QuoteResult
	{
		flex-wrap: nowrap;
	}
	div.QRA1
	{
		order: 1;
		display: none;
	}
	div.Collapsed div.QRA1
	{
		display: block;
	}
	div.QRA2
	{
		flex: 0 0 40%;
		margin-right: 4px;
	}
	div.Collapsed div.QRA2
	{
		flex: 0 0 auto;
	}
	div.QRA2A
	{
		margin-top: 4px;
	}
	.Pic2
	{
		display: block;
		width: 100%;
	}
	div.Collapsed .Pic2
	{
		display: none;
	}
	div.AsImg1
	{
		display: inline-block;
	}
	div.QRA3
	{
		padding: 0 10px 10px 4px;
	}
	div.Collapsed div.QRA3
	{
		padding: 0 10px 10px 4px;
	}
}
@media all and (max-width: 950px)
{
	div.QuoteResult
	{
		margin-bottom: 40px;
		flex-wrap: wrap;
	}
	div.Collapsed.QuoteResult
	{
		flex-wrap: nowrap;
		margin-bottom: 10px;
	}
	div.QRB
	{
		flex: 0 0 100%;
	}
	div.Collapsed div.QRB
	{
		flex: 0 0 220px;
	}
	div.QRA1
	{
		order: 1;
		display: block;
	}
	div.QRA2
	{
		flex: 0 0 auto;
		order: 2;
		margin-right: 4px;
	}
	div.QRA2A
	{
		margin-top: 0;
	}
	.Pic2
	{
		display: none;
	}

	div.QRA3
	{
		flex: 0 1 auto;
		order: 5;
		padding: 0 10px 10px 4px;
	}
	div.QRB5
	{
		flex: 0 0 100%;
		order: 6;
	}
	div.Collapsed div.QRB5
	{
		flex: 0 0 220px;
	}
	div.AsImg1
	{
		display: block;
	}
	div.QRB5 p
	{
		text-align: center;
	}
}
@media all and (max-width: 800px)
{
	div.QRA1
	{
		order: 1;
		display: none;
	}
	div.Collapsed div.QRA1
	{
		display: block;
	}
	div.QRA2
	{
		flex: 0 0 35%;
		min-width: 260px;
		margin-right: 4px;
	}
	div.Collapsed div.QRA2
	{
		flex: 0 0 auto;
		min-width: initial;
	}
	div.AsImg1
	{
		display: inline-block;
	}
	.Pic2
	{
		display: block;
		width: 100%;
		margin-bottom: 4px;
	}
	div.Collapsed .Pic2
	{
		width: 64px;
	}
	div.Collapsed div.QRB
	{
		flex: 0 0 120px;
	}
	div.Collapsed div.QRB5
	{
		flex: 0 0 120px;
		padding: 4px 10px;
	}
	div.Collapsed div.QRB5 div.Price
	{
		margin-right: 0;
		margin-bottom: 4px;
	}
	div.QRA3
	{
		padding: 0 10px 10px 4px;
	}
	div.Collapsed div.QRA3
	{
		padding: 0 10px 10px 4px;
	}
}
@media all and (max-width: 650px)
{
	div.Collapsed div.QRA
	{
		flex-wrap: wrap;
	}
}
@media all and (max-width: 550px)
{
	div.QuoteResult
	{
		margin-bottom: 40px;
	}
	div.Collapsed.QuoteResult
	{
		margin-bottom: 10px;
	}
	div.QRA
	{
		flex-wrap: wrap;
	}
	div.QRA1 
	{
		flex: 1 1 auto;
		display: block;
		padding-right: 0;
		padding-bottom: 4px;
	}
	div.Collapsed div.QRA1
	{
		flex: 0 0 64px;
		padding-right: 4px;
	}
	div.QRA1 img
	{
		width: 100%;
	}
	div.QRA2
	{
		flex: 1 1 auto;
	}
	div.Collapsed div.QRA2
	{
		flex: 0 0 auto;
	}
	div.QRA2 table 
	{
		display: inline-block;
		vertical-align: middle;
		margin-right: 4px;
	}
	div.Collapsed div.QRA2 table 
	{
		display: block;
	}

	div.QRA3
	{
		flex: 0 0 100%;
		order: 5;
		border-left: none;
		padding-right: 4px;
	}
	div.QRA3A
	{
		display: block;
	}
	div.QRB5
	{
		flex: 0 0 100%;
		order: 6;
	}
	.Pic2
	{
		display: none;
	}
	div.AsImg1
	{
		display: inline-block;
		vertical-align: middle;
	}
}
div.BodyBarWrapper
{
	box-sizing: border-box;
	overflow: hidden;
}
@media all and (max-width: 1000px)
{
	div.BodyBarWrapper {
		padding-right: 10px; 
        padding-left: 10px; background-color: rgba(10,149,211,1);
		margin-top: 4px; margin-bottom: 4px;
		border-radius: 4px;
	}
}
ul.BodyBar
{
	display: flex;
    flex-wrap: wrap;
	padding-left: 0;
}
ul.BodyBar li:first-child {
    align-items: baseline;
    flex: 1 0 auto;
}
@media all and (max-width: 800px) {
    ul.BodyBar {
        flex: 0 0 auto;
    }
    ul.BodyBar li:first-child {
        flex: 0 0 auto;
        padding-top: 12px;
        padding-bottom: 8px;
    }

}
ul.BodyBar li
{
    flex: 0 0 auto;
	list-style: none;
	margin-right: 40px;
	color: #ffffff;
	font-weight: 400;
	text-shadow: 0 0 2px rgba(0,0,0,0.5);
    align-self: baseline;
}
ul.BodyBar li img
{
	vertical-align: middle;
	display: inline-block;
	margin-left: 20px;
}
span.ViewMode
{
	display: inline-block;
	padding: 6px 4px;
	cursor: pointer;
	border-radius: 4px;
	vertical-align: middle;
}
span.ViewMode.Active
{
	background-color: #00448b;
	color: #ffffff;
}
span.ComparisonChart
{
	display: inline-block;
	padding: 6px 4px;
	cursor: pointer;
	border-radius: 4px;
	vertical-align: middle;
}
span.ComparisonChart.Active
{
	background-color: #00448b;
	color: #ffffff;
}

div.QuoteResult div.QRA3B
{
	display: inherit;
}
div.QuoteResult div.QRA3B P
{
	font-size: var(--MedFontSize);
}
div.Collapsed.QuoteResult div.QRA3B
{
	display: none;
}
div#ScrollBar input
{
	border: outset 2px #aaaaaa;
}
div#ScrollBar
{
	width: 100%;
	box-sizing: border-box;
	display: flex;
	border: solid 1px #ffffff;
	flex-wrap: nowrap;
}
div#ScrollBarRail
{
	background-color: #ffffff;
}
div#ScrollBarControl
{
	background-color: #aaaaaa;
	border: outset 2px #aaaaaa;
	box-sizing: border-box;
	height: 100%;
}
div#ButtonScrollTop
{
	position: fixed;
	right: 20px;
	bottom: 20px;
	height: 60px;
	width: 60px;
	border-radius: 4px;
	background-color: #00448b;
	cursor: pointer;
	display: none;
	text-align: center;
	line-height: 68px;
	color: #ffffff;
    z-index: 2;
}
@keyframes BoxShadowPulse {
    0% {
        box-shadow: rgba(0,0,0,0.2) 0px 0px 10px;
    }

    50% {
        box-shadow: #00448b 0px 0px 20px 5px;
    }

    100% {
        box-shadow: rgba(0,0,0,0.2) 0px 0px 10px;
    }
}
.BoxShadowPulse
{
	animation-name: BoxShadowPulse;
	animation-duration: 0.5s;
	animation-iteration-count: 2;
	animation-delay: 1s;
	animation-timing-function: ease-in-out;
}
div#Working
{
	box-sizing: border-box;
}
div#Working h1
{
	padding-top: 40px;
	padding-bottom: 20px;
	text-align: center;
    color: var(--WorkingTitleColor);
}
div#Working p
{
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	font-size: 20px;
    font-weight: 400;
    color: var(--WorkingTextColor);
}
div.AsImg1.IconBestService {
    background-image: linear-gradient(to right, #40c000 34px, #f0f0f0 34px);
}
div.AsImg1.IconTopCompany {
    background-image: linear-gradient(to right, #40c000 34px, #f0f0f0 34px);
}
div.AsImg1Big.IconNoExcess
{
    background-image: var(--NoExcessGradient);
    border-radius: 4px;
    padding: 8px;
    display: inline-block;
    width: calc(100% - 4px);
    box-sizing: border-box;
    margin-bottom: 4px;
}
div.AsImg1Big.IconNoExcess>div
{
    display: flex;
    align-items: center;
}
div.AsImg1Big.IconNoExcess p
{
    color: var(--White);
    margin-top: 0;
}
div.AsImg1Big.IconNoExcess img
{
    max-width: 48px;
    max-height: 48px;
    margin-right: 8px;
}
@media (max-width: 1100px) {
    div.QRA2
    {
        position: relative;
    }
    div.QRA2A
    {
        flex-direction: row;
        flex-wrap: wrap;
    }
    div.QRA2A div.AsImg1
    {
        flex: 0 0 auto;
    }
    div.QRA2A div.AsImg1Big
    {
        flex: 0 0 auto;
        position: absolute;
        top: 0;
        right: 0;
        width: 130px;
    }
    div.AsImg1Big.IconNoExcess img
    {
        max-width: 32px;
        max-height: 32px;
    }
}
@media (max-width: 950px) {
    div.QRA2A
    {
        flex-direction: column;
    }
    div.QRA2A div.AsImg1Big {
        position: relative;
    }
}
@media (max-width: 800px) {
    div.QRA2A
    {
        flex-direction: row;
    }
    div.QRA2A div.AsImg1Big {
        position: absolute;
    }
}
@media (max-width: 550px) {
    div.QRA2A
    {
        display: inline-flex;
        flex-direction: row;
    }
}

div.QRB5 p.ShareRate
{
    margin-top: 8px;
    cursor:pointer;
}
@media (max-width: 950px) {
    div.QRB5 p.ShareRate {
        margin-top: 8px;
        text-align: center;
    }
}

/**************************** References.css ****************************/
div.ReferencesWrapper
{
	background-color: var(--DarkBlue);
    padding-bottom: calc(var(--SeparationAfterSection) - 16px); /* The References div has a 16px padding */

}
div.ReferencesWrapper h2
{
	color: var(--White);
	margin-top: calc(var(--SeparationBeforeSection) - 12px); /* 12px is the h2 padding*/
    text-align: center;
}
div.ReferencesWrapper p
{
	color: var(--White);
    text-align: center;
}
div.References
{
	display: flex;
	flex-wrap: wrap;
	margin-right: calc(0px - var(--GapBetweenSmallBoxes));
	margin-bottom: calc(0px - var(--GapBetweenSmallBoxes));
	padding-top: var(--GapBetweenSmallBoxes);
	padding-bottom: var(--GapBetweenSmallBoxes);
	box-sizing: border-box;
	justify-content: center;
}
div.References img
{
	flex: 0 1 auto;
	margin-right: var(--GapBetweenSmallBoxes);
	margin-bottom: var(--GapBetweenSmallBoxes);
	display: block;
	border-radius: 4px;
	padding: var(--PaddingAroundBoxSmall);
	max-width: 400px;
}


/**************************** ServiceRate.css ****************************/
table.Score td
{
    padding: var(--M1) var(--D2);
}
form#SVRForm textarea 
{
    width: 100%;
    height: 200px;
}

/**************************** Settings.css ****************************/
div.SettingsWrapper
{
	background-color: var(--DarkBlue); border-radius: 4px; padding: 16px;
}
div.Setting
{
	background-color: var(--LightBlue);
	border-radius: 4px;
	padding: 16px;
	margin-bottom: 8px;
	margin-top: 8px;
}
div.Setting:first-child
{
	margin-top: 0;
}
div.Setting:last-child
{
	margin-bottom: 0;
}
div.Setting p
{
	color: var(--White);
	margin-bottom: 0;
	margin-top: 0;
}
div.Setting img
{
	margin-right: 16px;
	vertical-align: middle;
}
div.Setting:hover
{
	background-color: var(--Orange);
	cursor: pointer;
}

/**************************** SingleColumns.css ****************************/
div.SingleColumnsWrapper {
	background-color: var(--LightBlue); border-top: 2px solid var(--White);
	padding-bottom: var(--SeparationAfterSection);
    padding-top: var(--SeparationBeforeSection);
}
div.SingleColumns
{
}

div.SingleColumns>div
{
	background-color: var(--White);
	border-radius: 4px;
}

div.SingleColumns div.Single /* Standard content*/
{
	padding: var(--PaddingTopInsideBox) var(--PaddingSideInsideBox) var(--PaddingBottomInsideBox) var(--PaddingSideInsideBox); 
}

/**************************** Terms.css ****************************/
div.Terms h1
{
    color: var(--MainFontColor)
}
div.Terms h2
{
    color: var(--DarkBlue)
}
div.Terms h3
{
    color: var(--LightBlue)
}
div.Terms table
{
    border: solid 1px var(--DarkGray)
}
div.Terms td
{
    border: solid 1px var(--DarkGray);
    padding: 4px;
}

/**************************** Testimonials.css ****************************/
div.TestimonialsWrapper {
	background-color: #1095d3; border-top: 2px solid #ffffff;
	padding-bottom: calc(var(--SeparationAfterSection) - var(--GapBetweenSmallBoxes)); /* The Testimonials div has a 16px padding */
}
div.TestimonialsWrapper h2 {
	margin-top: calc(var(--SeparationBeforeSection) - 12px); /* 12px is the h2 padding*/
	color: var(--White);
}
div.Testimonials
{
	display: flex;
	flex-wrap: wrap;
	margin-right: calc(0px - var(--GapBetweenSmallBoxes));
	margin-bottom: calc(0px - var(--GapBetweenSmallBoxes));
	padding-top: var(--GapBetweenSmallBoxes);
	padding-bottom: var(--GapBetweenSmallBoxes);
	box-sizing: border-box;
	justify-content: center;
}
div.Testimonials div.Testimonial
{
	flex: 1 0 200px;
	margin-right: var(--GapBetweenSmallBoxes);
	margin-bottom: var(--GapBetweenSmallBoxes);
	background-color: var(--White);
	border-radius: 4px;
	padding: var(--PaddingAroundBoxSmall);
	max-width: 400px;
}
@media all and (max-width: 1150px) {
	div.Testimonials div.Testimonial
	{
		flex: 1 1 300px;
	}
}
@media all and (max-width: 1000px) {
	div.Testimonials div.Testimonial
	{
		flex: 1 0 250px;
	}
}
div.Testimonials div.Testimonial img
{
	width: 100%;
}
/* Text is a further inside than image above*/
div.Testimonials div.Testimonial h4
{
	margin-top: 0;
	padding-left: 4px;
	padding-right: 4px;
	margin-bottom: 0;
}
div.Testimonials div.Testimonial p
{
	padding-left: 4px;
	padding-right: 4px;
	margin-bottom: 4px;
    margin-top: 4px;
	font-size: var(--MedFontSize);
}
/* List of hyperlinks */
div.Testimonial ul
{
    font-size: var(--MedFontSize);
    padding: 8px 4px;
}
div.Testimonial ul li
{
	padding: 0;
}
div.Testimonial ul li i.fas
{
	padding-right: 8px;
	color: var(--LightBlue);
}

/**************************** TextContent.css ****************************/
div.TextContent

{
	padding: 40px 0;
}

/**************************** TopBar.css ****************************/
div.TopNotice {
    background-color: #000000;
    width: 100%;
    padding: 8px 20px;
    box-sizing: border-box;
}
div.TopNotice p {
    text-align: center;
    color: #ffffff;
}
div.TopNotice a {
    color: #ffffff;
}

div.Top1
{
	background-color: var(--TopBarBackgroundColor);
    background-image: var(--TopBarBackgroundImage);
	padding-top: 12px;
	padding-bottom: 8px;
	border-bottom: var(--TopBarBorderBottom);
	box-shadow: var(--TopBarBoxShadow);
	position: relative;
	z-index: 2;
    user-select: none;
}
div.Top1 a
{
	color: var(--White);
}

div.Top1 li.ComboboxButton
{
	position: relative;
	cursor: pointer;
	border-radius: 4px;
	background-color: var(--TopBarComboboxButtonBackgroundColor);
    margin-right: 20px;
}
div.Top1 div.ComboboxButton:last-child
{
    margin-right: 0;
}
div.Top1 li.ComboboxButton:hover
{
	background-color: var(--TopBarComboboxButtonBackgroundColorHover);
}
div.Top1 li.ComboboxButtonActive
{
	background-color: var(--TopBarComboboxButtonActiveBackgroundColor);
}
div.Top1 div.ComboboxMenu
{
	background-color: var(--TopBarComboboxMenuBackgroundColor);
	display: none;
	position: absolute;
	top: 64px;
	padding: 8px;
	border-radius: 4px;
    left: 0;
}
div.Top1 div.ComboboxMenu div.ComboboxMenuOption
{
	color: var(--TopBarComboboxMenuTextColor);
	white-space: nowrap;
	margin-top: 8px;
	margin-bottom: 4px;
	width: 100%;
	border-radius: 2px;
	padding: 2px 8px 2px 2px;
	box-sizing: border-box;
}
div.Top1 div.ComboboxMenu div.ComboboxMenuOption a
{
    text-decoration: none;
}
div.Top1 div.ComboboxMenu div.ComboboxMenuOption:first-of-type
{
	margin-top: 0;
}
div.Top1 div.ComboboxMenu div.ComboboxMenuOption:last-of-type
{
	margin-bottom: 0;
}
div.Top1 div.ComboboxMenu img
{
	margin: 2px 8px 2px 2px;
	vertical-align: text-top;
    display: inline-block;
}
div.Top1 div.ComboboxMenu a
{
	color: var(--White);
	width: 100%;
}
div.Top1 div.ComboboxMenu a:hover
{
	text-decoration: none;
}
div.Top1 div.ComboboxMenu div.ComboboxMenuOption:hover
{
	background-color: rgba(255,255,255,0.5);
}
div#ComboboxLoginMenu
{
	right: 0;
}
div#ComboboxLoginMenu > p 
{
	margin-top: 0;
    padding-top: 0;
}

div.ComboboxMenu p
{
	color: var(--White);
	margin-bottom: 2px;
    margin-top: 0;
	white-space: nowrap;
}
div#ComboboxLoginMessage
{
	display: none;
}
div#ComboboxLoginMenu div.Button
{
	background-color: var(--TopBarLoginButtonBackgroundColor);
    color: var(--TopBarLoginButtonTextColor);
	padding: 8px 8px;
	border-radius: 2px;
	margin-right: 4px;
	margin-bottom: 0;
	margin-top: 8px;
	border: 2px solid var(--White);
	width: 100%;
	min-width: 80px;
	box-sizing: border-box;
	text-align: center;
}
div#ComboboxLoginMenu div.Button:hover
{
	background-color: var(--TopBarLoginButtonBackgroundColorHover);
    color: var(--TopBarLoginButtonTextColorHover);
}
span#ComboboxCurrencyConversionRatio
{
	display: none;
}
div.Top1 h1
{
    color: var(--HomeTitleColor);
}

/**************************** TopBar.Megasite.css ****************************/
@media all and (max-width: 460px) {
    div.Top1 img.ByPARPTLogo {
        display: none;
    }
}

div.Top1 a:hover
{
	text-decoration: none;
}
div.Top1 img
{
	display: inline;
}
@media all and (max-width: 460px) {
	div.Top1 img
	{
		width: 200px;
	}
}
div.Top1 ul
{
	display: inline-flex;
	float: right;
	margin-right: 0;
	margin-top: 8px;
}
div.Top1 li.ComboboxButton
{
	flex: 1 0 auto;
	padding: 0;
	margin-right: 20px;
	padding-right: 20px;
	color: var(--TopBarTextColor);
	list-style: none;
}

div.Top1 li.ComboboxButton img
{
	vertical-align: middle;
}
div.Top1 div#MobileButton
{
	display: none;
	cursor: pointer;
}
div.Top1 div#MobileButton:hover
{
	background-color: var(--DarkBlue);
}
div.Top1 div#MobileButton i
{
	font-size: 32px;
	color: rgba(255,255,255,0.5);
	position: relative;
	top: 1px;
}
div.Top1 div#MobileButton:hover i
{
	color: var(--Orange);
}
@media all and (max-width: 800px) {
	div.Top1 ul
	{
		display: none;
	}
	div.Top1 div#MobileButton
	{
		background-color: var(--LightBlue);
		padding: 14px 16px;
		border-radius: 2px;
		margin-right: 4px;
		margin-bottom: 4px;
		border: 2px solid var(--White);
		position: absolute;
		right: 0;
		display: inline;
	}
}
@media all and (max-width: 460px) {
	div.Top1 div#MobileButton
	{
		padding: 20px 16px 14px 16px;
        height: 64px;
        box-sizing: border-box;
	}
	div.Top1 div#MobileButton i
	{
		font-size: 20px;
	}
}

/**************************** WhatsIncluded.css ****************************/
div.WhatsIncludedWrapper
{
	background-color: #f8f8f8;
	padding-bottom: var(--SeparationAfterSection);
}
div.WhatsIncludedWrapper h2 {
	margin-top: calc(var(--SeparationBeforeSection) - 12px); /* 12px is the h2 padding*/
	margin-bottom: 16px;
}
div.WhatsIncluded
{
	display: grid;
	grid-template-columns: auto 1fr 1fr;
	grid-column-gap: var(--HorizontalGap);
}
@media all and (max-width: 1000px)
{
	div.WhatsIncluded
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: var(--HorizontalGap);
	}
	div.Man
	{
		display: none;
	}
}
div.WhatsIncluded p
{
	margin-top: 0px;
	padding-top: 8px;
	margin-bottom: 24px;
	overflow: hidden;
}
div.WhatsIncluded img
{
	float: left;
	vertical-align: middle;
	margin-right: 8px;
}
div.WhatsIncluded div.Bullets
{
	margin-top: 32px;
}