/**************************** _Base2020.2.css ****************************/
/**************************** START **********************/
/**************************** START **********************/
/**************************** START **********************/


/* General */
html
{
    margin: 0;
    padding: 0;
	min-width: 320px;
    min-height: 100%;
}

body, p, table, tr, td, th, input, select, textarea, h1, h2, h3, h4, h5, h6
{
	font-family: 'Barlow Condensed', sans-serif;
	text-align: left; 
}
p
{
	font-weight: 400;
}

body, p, table, tr, td
{
	font-size: 16px;
	font-weight: 300;
	text-align: left; 
	color: var(--BodyText);
}
p.Smaller
{
    font-size: 15px;
    line-height: calc(15px * 1.25);
}
th
{
	font-size: 14px;
	font-weight: 400;
	text-align: left; 
	color: var(--BodyText);
}
input, select, textarea, button
{
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 18px;
	font-weight: 700;
	text-align: left; 
	color: var(--Blue);
    vertical-align: baseline;
    box-sizing: border-box;
}
option
{
	font-size: 18px;
}
input[type='submit']
{
	text-align: center;
}
body
{
	background-color: var(--White);
	margin: 0px;
	padding: 0px;
	clear: none;
    min-height: 100%;
}

/**************************** BLOCK ELEMENTS **********************/
p, h1, h2, h3, h4, h5, h6
{
	margin: 12px 0px 12px 0px;
}

p, q, li
{
	font-weight: 400;
	color: var(--BodyText);
	padding: 0px;
	clear: none;
	line-height: calc(16px * 1.25);
}

h1 
{
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 24px;
    font-weight: 600;
    color: var(--Blue);
    padding: 12px 0px 0px 0px;
    clear: both;
	line-height: calc(24px * 1.25);
}
h2
{
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 24px;
    font-weight: 600;
    color: var(--Blue);
    padding: 12px 0px 0px 0px;
    clear: both;
	line-height: calc(24px * 1.25);
}
h3
{
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 18px;
	font-weight: 600;
    color: var(--Blue);
    padding: 8px 0px 0px 0px;
    clear: both;
	margin-top: 0;
	margin-bottom: 12px;
	line-height: calc(18px * 1.25);
}
h4
{
	font-family: 'Barlow Condensed', sans-serif;
    font-size: 18px;
	font-weight: 600;
    color: var(--BodyText);
    padding: 8px 0px 0px 0px;
    clear: both;
	margin-top: 0;
	margin-bottom: 12px;
	line-height: 20px;
}

/*@media (max-width: 1050px)
{
    p, li
    {
		font-size: 16px;
		line-height: calc(16px * 1.25);
    }
	h1, body.Home h1
	{
		font-size: 42px;
		line-height: calc(42px * 1.25)
	}
	h2, body.Home h2
	{
		font-size: 30px;
		line-height: calc(30px * 1.25)
	}
	h3, body.Home h3
	{
		font-size: 24px;
		line-height: calc(24px * 1.25)
	}
    h4
    {
		font-size: 18px;
		line-height: calc(18px * 1.25);
    }
    p.Smaller
    {
        font-size: 13px;
        line-height: calc(13px * 1.25);
    }
}
@media (max-width: 700px)
{
    p, li
    {
		font-size: 14px;
		line-height: calc(14px * 1.25);
    }
	h1, body.Home h1
	{
		font-size: 36px;
		line-height: calc(36px * 1.25);
	}
    h2, body.Home h2
    {
		font-size: 24px;
		line-height: calc(24px * 1.25);
    }
    h3, body.Home h3
    {
		font-size: 20px;
		line-height: calc(20px * 1.25);
    }
    h4
    {
		font-size: 17px;
		line-height: calc(17px * 1.25);
    }
    p.Smaller
    {
        font-size: 12px;
        line-height: calc(12px * 1.25);
    }
}*/


ul, ol
{
    color: var(--BodyText);
	margin: 0px;
    padding: 0px 0px 0px 40px;
	margin-bottom: 12px;
}
ul ul, ul ol, ol ol, ol ul
{
    margin: 4px 0 0 0;                            /** CanChange: Spacing between UL/OL inside UL/OL **/
}
li 
{
	margin: 4px 0px 4px 0px;        /** CanChange: Inter LI Spacing **/
}
li:not(.APS):first-child
{
	margin-top: 0;
}
li:not(.APS):last-child
{
	margin-bottom: 0;
}
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;
}
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
{
    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
{
	margin-bottom: 0;
}

/**************************** FIX ELEMENTS **********************/
div, form { margin: 0px; padding: 0px; }
div { padding-top: 0.01px; padding-bottom: 0.01px; 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}

/**************************** INLINE ELEMENTS **********************/
a 
{
    color: var(--BodyText);
    text-decoration: none;
	cursor: pointer;
	font-weight: inherit;
}
a:hover
{
    text-decoration: underline;
}

/**************************** LEGACY STYLES **********************/
.Bordered 
{
    border: black 1px solid;
}
div.FormGeneric div.ValidatorErrors 
{    
	background-color: var(--Red);
	border: solid 1px #000000;
	margin-bottom: 8px;
}
div.FormGeneric div.ValidatorErrors p {
	color: var(--White);
	margin: 8px 10px 8px 10px;
}

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

DIV.TopBar
{
    height: 40px;
    background: -webkit-linear-gradient(center top, #3e3e3e 0px, #101010 100%) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(center top, #3e3e3e 0px, #101010 100%) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(center top, #3e3e3e 0px, #101010 100%) repeat scroll 0 0 transparent;
    background: linear-gradient(center top, #3e3e3e 0px, #101010 100%) repeat scroll 0 0 transparent;
}

DIV.ContentSection
{

}

DIV.TopMenu
{
    height: 40px;
    background: -webkit-linear-gradient(center top, #f9b35f 0px, #f78f1f 20%, #f1831f 80%, #de761e 100%) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(center top, #f9b35f 0px, #f78f1f 20%, #f1831f 80%, #de761e 100%) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(center top, #f9b35f 0px, #f78f1f 20%, #f1831f 80%, #de761e 100%) repeat scroll 0 0 transparent;
    background: linear-gradient(center top, #f9b35f 0px, #f78f1f 20%, #f1831f 80%, #de761e 100%) repeat scroll 0 0 transparent;    
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
}
DIV.TopMenu P
{
    font-family: 'univers_lt_std_57_cnregular';
    color: #ffffff;
    font-size: 14px;
    margin: 0px 10px 8px 10px;
    text-shadow: 1px 1px 8px #442222; 
}
DIV.TopMenu A
{
    color: #ffffff;
}
DIV.TopMenu A:hover
{
    text-decoration: none;
}
DIV.TopMenu TD.Separator
{
    width: 1px;
    max-width: 1px;
    background: -webkit-linear-gradient(center top, #f9b35f 0px, #f2680e 20%, #f2680e 80%, #de761e 100%) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(center top, #f9b35f 0px, #f2680e 20%, #f2680e 80%, #de761e 100%) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(center top, #f9b35f 0px, #f2680e 20%, #f2680e 80%, #de761e 100%) repeat scroll 0 0 transparent;
    background: linear-gradient(center top, #f9b35f 0px, #f2680e 20%, #f2680e 80%, #de761e 100%) repeat scroll 0 0 transparent;    
    margin-bottom: 4px;
}
DIV.TopMenu DIV.Button
{
    padding-top: 10px;
    height: 30px;
    width: 100%;
}
DIV.TopMenu DIV.Button:hover
{
    background: -webkit-linear-gradient(center top, #f6963f 0px, #f2690d 20%, #f2690d 100%) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(center top, #f6963f 0px, #f2690d 20%, #f2690d 100%) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(center top, #f6963f 0px, #f2690d 20%, #f2690d 100%) repeat scroll 0 0 transparent;
    background: linear-gradient(center top, #f6963f 0px, #f2690d 20%, #f2690d 100%) repeat scroll 0 0 transparent; 
    cursor: pointer;   
}

DIV.BoxHomePage H2
{
	font-family: 'univers_lt_std_57_cnregular';
	font-size: 50px;
    font-weight: normal;
    padding-top: 0px;
    margin-top: 0px;
    color: #222222;
    text-shadow: 1px 1px 2px #000000;
    clear: both;
    line-height: 48px;
}
DIV.BoxHomePage H3
{
    font-size: 16px;
    padding-top: 0px;
    margin-top: 0px;
    color: #ffffff;
}
DIV.BoxGetAFreeQuote DIV.Header
{
    background: -webkit-linear-gradient(0deg, #c5c5c5 0px, #272727 100%) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(0deg, #c5c5c5 0px, #272727 100%) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(0deg, #c5c5c5 0px, #272727 100%) repeat scroll 0 0 transparent;
    background: linear-gradient(0deg, #c5c5c5 0px, #272727 100%) repeat scroll 0 0 transparent;    
    padding-top: 10px;
    padding-bottom: 10px;
}
DIV.BoxGetAFreeQuote DIV.Content
{
    background: white;
    height: 100%;
}
DIV.BoxGetAFreeQuote DIV.Header H2
{
	font-family: 'univers_lt_std_47_cn_ltbold';
    font-size: 18px;
    padding: 0px;
    margin: 0px;
    color: #ffffff;
    text-shadow: 0px 0px 2px #000000;
}
DIV.BoxGetAFreeQuote INPUT.Location
{
    height: 26px;
    border: 1px solid #f37801;
    border-radius: 4px;
    width:200px;
    font-weight: bold;
    font-size: 17px;
    font-family: Arial;
    padding: 4px 6px 4px 6px;
}
DIV.BoxGetAFreeQuote DIV.LocationDropDown
{
    background-color: #f8f8f8;
    border: 1px solid #444444;
    border-radius: 4px;
    width:200px;
    padding: 4px 6px 4px 6px;
}
DIV.BoxGetAFreeQuote DIV.LocationDropDown P
{
    margin: 4px 0px 4px 0px;
}
SPAN.Black
{
    color: #000000;
}
SPAN.White
{
    color: #ffffff;
}

a, label
{
    user-select: none;
}

/**************************** _Variables.css ****************************/
:root
{
    --BodyText: #000000; 
    --Blue: #0677c7;
    --PalerBlue:#0653ae;
    --PalestBlue: #2e648e;
    --LighterBlue: #0c75c6;
	--BorderGray: #bdbdbd;
    --DarkerGray: #a5a5a5;
    --Gray: #d7d7d7;
    --DarkestGray: #5a5a5a;
    --BodyGray: #333333;
    --Red: #800000;
    --White: #ffffff;
    --HoverGray: #666666;
    --RowHighlight: rgba(0,0,0,0.1);
    --PalestGrayBlue: #eaedf4;
}

/* IMPORTANT CLASSES FOR LAYOUT */

/* Inside Grids, .Item's that need to have: div.Image, h4, div.Desc, div.Link & div.Progress*/

/* Section.Content can be .WhiteBackground or .GrayBackground */
/* Inside Section.Content, a div.Content that is .Read (adjusts line height) and .ConstraintWidth or .ConstraintWidthTight */

/* To float images, div.AvoidWidows with two divs inside: div.FL & div.Content */

/**************************** CartGrid.css ****************************/
div#CartGridWrapper
{
    background-color: #e8e8e8;
    padding: 20px;
    align-self: flex-start;
    position: sticky;
    top: 0;
}
@media (max-width: 750px) {
    /* This breakpoint is for the top bar becoming a mobile-friendly one */
    /* This should be in sync with the media query @ Main.css */
    div#CartGridWrapper
    {
        top: 100px;
    }
}

div#CartGridWrapper h2
{
    color: var(--BodyText);
}
.Shock
{
    color: var(--Blue);
}
div#CartGrid p
{
    margin-top: 2px;
    margin-bottom: 2px;
}
div#CartGrid>p
{
    margin-top: 4px;
    margin-bottom: 8px;
}
div#CartGrid hr
{
    height: 1px;
    border-top: var(--BorderGray) solid 1px;
    width: 100%;
    box-sizing: border-box;
    background: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    margin-bottom: 0;
    margin-top: 16px;
}
div#CartGrid div.Total
{
    display: flex;
}
div#CartGrid h4
{
    flex: 1 1 100%;
}
div#CartGrid p.Total
{
    flex: 0 0 auto;
    margin-top: 8px;   /** To Match H4 Padding */
    font-weight: 600;
}
div#CartGrid li
{
    margin-top: 2px;
    margin-bottom: 2px;
}
div#CartGrid p, div#CartGrid span
{
    transition: color 1.5s ease;
}
div#CartGrid p.ProductRemove
{
    margin-top: 0;
    text-align: right;
    margin-bottom: 6px;
    user-select: none;
}
div#CartGrid p.ProductRemove:hover
{
    cursor: pointer;
    text-decoration: underline;
}
div#CartGrid p.ProductPrice
{
    margin-top: 2px;
    margin-bottom: 0;
    text-align: right;
}
div#CartGrid div[data-id]
{
    display: flex;
    flex-wrap: nowrap;
}
div#CartGrid div[data-id] div.Col1
{
    flex: 0 0 40px;
}
div#CartGrid div[data-id] div.Col1 p
{
    text-align: right;
    margin-right: 8px;
}

div#CartGrid div[data-id] div.Col2
{
    flex: 1 1 100%;
    padding-right: 10px;
}
div#CartGrid div[data-id] div.Col3
{
    flex: 0 0 auto;
}
div#CartGrid span.SmallLink
{
    font-size: 13px;
    font-weight: 400;
    user-select: none;
}
div#CartGrid h4 span.SmallLink
{
}
div#CartGrid span.SmallLink:hover
{
    color: red;
    cursor: pointer;
}
div#CartGridWrapper button.Next
{
    width: 100%;
    margin-bottom: 0;
}

/**************************** Checkout1.css ****************************/
body.Checkout1 div.MainGrid
{
    display: grid;
    grid-template-columns: 3fr minmax(250px, 1fr);
    grid-column-gap: 40px;
    align-items: stretch;
}


body.Checkout1 form#CH1Form input, body.Checkout1 form#CH1Form select
{
    width: 100%; max-width: 260px;
}
body.Checkout1 form#CH1Form input[name='ShippingAddressLine1'], body.Checkout1 form#CH1Form input[name='ShippingAddressLine2']
{
    width: 100%; max-width: 400px;
}
body.Checkout1 form#CH1Form input[name='AgreeToTerms']
{
    width: 24px;
    height: 24px;
    margin-top: 0;
    vertical-align: middle;
    margin-right: 12px;
}

@media (max-width: 750px) {
    body.Checkout1 div.MainGrid
    {
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
    }
    body.Checkout1 form#CH1Form input, body.Checkout1 form#CH1Form select
    {
        width: 100%; 
    }
    body.Checkout1 form#CH1Form input[name='ShippingAddressLine1'], body.Checkout1 form#CH1Form input[name='ShippingAddressLine2']
    {
        width: 100%;
    }
    body.Checkout1 form#CH1Form button
    {
        width: 100%;
    }
}


/**************************** Checkout3.css ****************************/
body.Checkout3 div#paypal-button-container 
{
    max-width: 300px;
}
@media (max-width: 800px) {
    body.Checkout3 div#paypal-button-container 
    {
        margin-left: auto;
        margin-right: auto;
    }
    body.Checkout3 h1, body.Checkout3 p
    {
        text-align: center;
    }
}

/**************************** Checkout4.css ****************************/
@media (max-width: 800px) {
    body.Checkout4 h1, body.Checkout4 p
    {
        text-align: center;
    }
}

/**************************** ContactUs.css ****************************/
body.ContactUs form#CONForm input
{
    width: 100%; max-width: 260px;
}
body.ContactUs form#CONForm textarea
{
    width: 100%; max-width: 400px; height: 200px;
}


@media all and (max-width: 1200px) 
{
    body.ContactUs div.FormGrid {
        grid-template-columns: 1fr;
        grid-row-gap: 0;
    }
    body.ContactUs div.FormGrid p.Caption:not(:first-child) {
        margin-top: 12px;
    }
}
@media all and (max-width: 1000px) 
{
    body.ContactUs div.FormGrid {
        /*  Back to initial div.FormGrid @ General-Step.css */
        grid-template-columns: max-content 1fr;
        grid-row-gap: 8px;
    }
    body.ContactUs div.FormGrid p.Caption:not(:first-child) {
        margin-top: 0;
    }
}
@media all and (max-width: 750px) 
{
    body.ContactUs div.FormGrid {
        grid-template-columns: 1fr;
        grid-row-gap: 0;
    }
    body.ContactUs div.FormGrid p.Caption:not(:first-child) {
        margin-top: 12px;
    }
    body.ContactUs form#CONForm textarea
    {
        max-width: none;
    }
    body.ContactUs form#CONForm button
    {
        width: 100%;
    }
}


/**************************** ContactUs3.css ****************************/
@media (max-width: 800px) {
    body.ContactUs3 h1, body.ContactUs3 p
    {
        text-align: center;
    }
}

/**************************** ContentArea.css ****************************/
div.ContentArea
{
	background-color: var(--White);
}
div.ContentText
{
    overflow: hidden;
}
div#ContentBoxes
{
	display: flex;
	flex-wrap: wrap;
	padding-top: 40px;
	margin-right: -20px;
	justify-content: center;
}
div.ContentArea div.ContentBox
{
	background-image: url(/'images/ContentBoxBack.jpg');
	background-repeat: no-repeat;
	background-position: bottom right;
	background-color: var(--PalerBlue);
	flex: 1 0 260px;
	margin-right: 20px;
	margin-bottom: 20px;
	padding-bottom: 40px;
	position: relative;
	max-width: 540px;
    min-height: 66px;
}
div.ContentArea div.ContentBox.Smaller
{
    flex: 1 0 240px;
    max-width: 400px;
}
div.ContentArea div.ContentBox.NoButton
{
    padding-bottom: 10px;
}
div.ContentArea div.ContentBoxGray
{
	background-image: url('/images/ContentBoxGrayBack.jpg');
	background-color: #7f7f7f;
	position: relative;
	min-height: 200px;
	overflow-x: hidden;
}

div.ContentArea div.ContentBox div.Title
{
	background-color: var(--LighterBlue);
	height: 50px;
	padding-left: 20px;
	padding-right: 60px;
	position: relative;
}
div.ContentArea div.ContentBoxGray div.Title
{
	background-color: var(--LighterGray);
	padding-right: 20px;
}
div.ContentArea div.ContentBox div.Title img
{
	position: absolute;
	top: -10px;
	right: 10px;
    width: 55px;
    background-color: var(--DarkestGray);
    padding: 0px;
}
div.ContentArea div.ContentBox div.Title h3
{
	color: #ffffff;
	font-size: 24px;
	font-weight: 300;
	padding-top: 12px;
}
div.ContentArea div.ContentBoxGray div.Title h3
{
	text-align: right;
}
div.ContentArea div.ContentBox ul
{
	margin-top:20px;
	margin-bottom: 20px;
}
div.ContentArea div.ContentBox li
{
	margin-right: 20px;
	color: #ffffff;
	margin: 2px 0 2px 0;
}
div.ContentArea div.ContentBox p
{
     color: #ffffff;
     margin: 2px 20px 2px 20px;
}
div.ContentArea div.ContentBox a
{
     color: #ffffff;
}
div.ContentArea div.ContentBox div.Title + p
{
     margin-top: 12px;
}
div.ContentArea div.ContentBoxGray p
{
	text-align: right;
	margin-right: 20px;
	margin-left: 120px;
}
div.ContentArea div.ContentBox a.Button
{
	position: absolute;
	bottom: 10px;
	left: 20px;
	display: block;
	padding: 6px 10px;
	background-color: var(--BodyGray);
	color: #ffffff;
	padding-left: 20px;
	padding-right: 20px;
	font-weight: 400;
	font-size: 18px;
	text-decoration: none;
	z-index: 4;
}
div.ContentArea div.ContentBoxGray a.Button
{
	display: block;
	background-color: var(--Blue);
	right: 20px;
	left: unset;
	width: 100%;
	text-align: right;
}
div.ContentArea div.ContentBox a.Button:hover
{
	background-color: var(--HoverGray);
}
div.ContentArea div.ContentBoxGray img
{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 5;
}

/**************************** ContentFlex.css ****************************/
/* ContentFlex800 includes a ContentPic and a ContentText. It's a layout that picture=none when max-width:800px */
div.ContentFlex800
{
	display: grid;
	grid-template-columns: minmax(auto, 800px) minmax(440px, min-content);
    grid-column-gap: 40px;
    min-height: 480px;
}
div.ContentFlex900
{
	display: grid;
	grid-template-columns: minmax(auto, 800px) minmax(440px, min-content);
    grid-column-gap: 40px;
    min-height: 480px;
}
div.ContentFlex1000
{
	display: grid;
	grid-template-columns: minmax(auto, 800px) minmax(440px, min-content);
    grid-column-gap: 40px;
    min-height: 480px;
}

@media all and (max-width: 1000px)
{
    div.ContentFlex1000
    {
        grid-template-columns: 1fr;
    }
    div.ContentFlex1000 > div.ContentText
    {

    }
    div.ContentFlex1000 > div.ContentPic
    {
        display: none;
    }
}

@media all and (max-width: 900px)
{
    div.ContentFlex900
    {
        grid-template-columns: 1fr;
    }
    div.ContentFlex900 > div.ContentText
    {

    }
    div.ContentFlex900 > div.ContentPic
    {
        display: none;
    }
}

@media all and (max-width: 800px)
{
    div.ContentFlex800
    {
        grid-template-columns: 1fr;
    }
    div.ContentFlex800 > div.ContentText
    {

    }
    div.ContentFlex800 > div.ContentPic
    {
        display: none;
    }
}

/* ContentPic is only available in ContentFlexXXX */
div.ContentPic
{
	box-sizing: border-box;
	background-size: auto;
	background-position: right top;
	background-repeat: no-repeat;
	margin-top: 20px;
	margin-bottom: 20px;
}
div.ContentPicAboutUs			{ background-image: url('/images/PicAboutUs.jpg'); }
div.ContentPicSolutions			{ background-image: url('/images/PicSolutions.jpg'); }
div.ContentPicWhyGoVoIP			{ background-image: url('/images/PicWhyGoVoIP.jpg'); }
div.ContentPicContactUs			{ background-image: url('/images/PicContactUs.jpg'); background-size: contain }

@media all and (max-width: 1200px) {
	div.ContentPic
	{
		background-size: contain;
		background-repeat: no-repeat;
		background-position: right top;
		margin-top: 70px;
	}
}


/**************************** ContentItem.css ****************************/
div.ContentItem
{
	display: flex;
	flex-wrap: nowrap;
	margin-bottom: 10px;
	padding-top: 10px;
}
div.ContentItem > div.ContentItemIcon
{
	flex: 0 0 100px;
}
div.ContentItem.VSmall
{
	margin-top: -20px;
}
div.ContentItem.VSmall div.ContentItemIcon
{
	background-image: url('/images/VSmall.png');
	background-repeat: no-repeat;
	margin-right: 20px;
}
div.ContentItem.VSmall div.ContentItemDescription
{
	padding-top: 24px;
}
div.ContentItem.VSmall div.ContentItemIcon h4
{
	color: var(--White);
	margin-top: 35px;
	margin-right: 20px;
	font-size: 30px;
	text-align: right;
}
div.ContentItem > div.ContentItemDescription
{
	flex: 0 1 100%;
}
div.ContentItem > div.ContentItemDescription p
{
	padding-top: 0;
	margin-top: 0;
}
div.ContentItem > div.ContentItemDescription h4
{
	margin-bottom: 4px;
	margin-top: 0;
	padding-top: 0;
}

/**************************** ContentSolutions.css ****************************/
/* ContentSolutions includes a ContentPic and a ContentTextAuxiliar. It's a layout that does not hide the picture panel, instead it puts it below. */
div.ContentSolutions
{
	display: grid;
	grid-template-columns: minmax(60%, 700px) minmax(min-content, 480px);
    grid-column-gap: 40px;
}
div.ContentSolutions div.ContentTextInverse
{
    background-color: var(--Blue);
    padding: 20px;
}
div.ContentSolutions div.ContentTextInverse p
{
	line-height: 22px;
	margin-top: 16px;
	margin-bottom: 16px;
    color: var(--White);
}
div.ContentSolutions div.ContentTextInverse li, div.ContentSolutions div.ContentTextInverse h2, div.ContentSolutions div.ContentTextInverse h4 
{
    color: var(--White);
}

div.ContentSolutions div.ContentTextAuxiliar
{
	padding-bottom: 40px;
	padding-top: 20px;
	overflow: hidden;
}
div.ContentSolutions div.ContentTextAuxiliar div.Features
{
    display: grid; 
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
    grid-column-gap: 40px;
    grid-row-gap: 20px;
}

@media all and (max-width: 1100px) {
    div.ContentSolutions
    {
        grid-template-columns: 1fr;
    }
    div.ContentSolutions div.ContentTextAuxiliar
    {
        padding-top: 0;
    }
    div.ContentSolutions div.ContentTextAuxiliar div.Features
    {
        grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) )
    }
}

@media all and (max-width: 900px)
{
    div.ContentSolutions div.ContentTextAuxiliar div.Features
    {
        grid-template-columns: 1fr 1fr;
    }
}

div.ContentSolutions div.ContentLogos
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
div.ContentSolutions div.ContentLogos img
{
    flex: 1 1 auto;
    max-width: 180px;
    margin-bottom: 10px;
}
div.ContentAreaLast
{
    padding-bottom: 40px;
}
div.ContentAreaLast div.Flex
{
    display: flex; flex-wrap: wrap; margin-right: -40px; margin-bottom: -20px; padding-top: 40px; padding-bottom: 40px;
}
div.ContentAreaLast div.Flex > div
{
     flex: 1 1 400px; margin-right: 40px; margin-bottom: 20px;
}

/**************************** Estimate.css ****************************/
div#EstimateWrapper p
{
    margin-top: 8px;
    margin-bottom: 8px;
}
div#EstimateWrapper td.HeaderTDBlank
{

}
div#EstimateWrapper td.HeaderTDTop
{
    padding: 2px 4px; background-color: #000000;
}
div#EstimateWrapper p.HeaderTDTopP
{
    color: #ffffff; text-align: right;
    margin-top: 4px;
    margin-bottom: 4px;
}
div#EstimateWrapper td.SectionTD
{
    padding: 2px 12px; background-color: #0c75c6; border-top: solid 4px #ffffff;
}
div#EstimateWrapper h4.SectionH4
{
    color: #ffffff;
}
div#EstimateWrapper td.BodyTD1
{
    border: solid 1px #888888; width: 100%; padding-left: 12px;
}
div#EstimateWrapper td.BodyTD2
{
    border-top: solid 1px #888888; border-bottom: solid 1px #888888; border-right: solid 1px #888888; width: 120px; padding-left: 12px; padding-right: 12px;
}
div#EstimateWrapper td.BodyTD3
{
    border-top: solid 1px #888888; border-bottom: solid 1px #888888; border-right: solid 1px #888888; width: 120px; padding-left: 12px; padding-right: 12px;
}
div#EstimateWrapper p.BodyTD1P
{
    margin-top: 4px;
    margin-bottom: 4px;
}
div#EstimateWrapper p.BodyTD2P
{
    margin-top: 4px;
    margin-bottom: 4px;
    text-align: right;
    white-space: nowrap;
}
div#EstimateWrapper p.BodyTD3P
{
    margin-top: 4px;
    margin-bottom: 4px;
    text-align: right;
    white-space: nowrap;
}
div#EstimateWrapper td.FooterTDBlank
{
    padding: 2px 12px; background-color: #000000; border-top: solid 4px #ffffff;
}
div#EstimateWrapper td.FooterTDTotalCaption
{
    padding: 2px 12px; background-color: #000000; border-top: solid 4px #ffffff; width: 120px;
}
div#EstimateWrapper p.FooterTDTotalCaptionP
{
    color: #ffffff; text-align: right;
    white-space: nowrap;
    margin-top: 4px;
    margin-bottom: 4px;
}
div#EstimateWrapper td.FooterTDTotalAmount
{
    padding: 2px 12px; background-color: #000000; border-top: solid 4px #ffffff; width: 120px;
}
div#EstimateWrapper p.FooterTDTotalAmountP
{
    color: #ffffff; text-align: right;
    white-space: nowrap;
    margin-top: 4px;
    margin-bottom: 4px;
}

/**************************** Footer.css ****************************/
div#FooterBar
{
	background-color: var(--BodyGray);
	min-height: 100%;
	overflow-y: no-content;
	padding-bottom: 40px;
}
div#FooterBar p
{
	color: #ffffff;
}
div#FooterLayout
{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding-top: 20px;
}
div#FooterCol1
{
	flex: 0 0 auto;
	padding-right: 20px;
}
div#FooterCol1 a
{
	display: inline-block;
}
div#FooterCol2
{
	flex: 1 1 auto;
}
div#FooterCol3
{
	flex: 1 0 auto;
	padding-left: 20px;
}
div#FooterCol3 p
{
	text-align: right;
}
div#FooterBar p#MobileFooterP
{
	display: none;
	text-align: center;
}
@media all and (max-width: 600px) {
	div#FooterCol3 p#NormalFooterP
	{
		display: none;
	}
	div#FooterBar p#MobileFooterP
	{
		display: block;
	}
	div#FooterLayout
	{
		justify-content: center;
	}
	div#FooterCol1 {
		flex: 0 0 100%;
		text-align: center;
		padding-right: 0;
	}
	div#FooterCol2{
		flex: 0 0 auto;
	}
	div#FooterCol2 p
	{
		text-align: center;
	}
	div#FooterCol3
	{
		display: none;
	}
}

/**************************** General-Step.css ****************************/
div.ContentMain
{
    padding-top: 20px;
}
div.ContentText p.StepNavigation
{
    margin-top: 0;
}
div.FormGrid
{
    /* If editing the values for div.FormGrid, make sure they are in sync with the ones in ContactUs.css & Step01.css */
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 8px;
    align-items: first baseline;
}
div.FormGrid div.Field div.InputAndLabelWrapper
{
    display: inline-block;
    margin-right: 20px;
}

div.FormGrid div.Field p
{
    display: inline-block;
    padding-right: 20px;
}
div.FormGrid div.Field label
{
    cursor: pointer;
}
div.FormGrid p, div.ContentText div.FormGrid p
{
    margin-top: 4px;
    margin-bottom: 4px;
}
div.FormGrid hr
{
    height: 1px;
    border-top: var(--BorderGray) dotted 1px;
    width: 100%;
    box-sizing: border-box;
    background: none;
    border-left: none;
    border-right: none;
    border-bottom: none;

}
div.FormGrid input.Number
{
    max-width: 60px;
}
div.FieldHighlighter
{
    position: absolute;
    clip-path: polygon(0 20px, 20px 20px, 40px 0, 60px 20px, 100% 20px, 100% 100%, 0 100%, 0 0);
    background-color: var(--Red);
    display: none;
    padding: 30px 10px 10px 10px;
    color: var(--White);
}
div.FieldHighlighter p
{
    color: var(--White);
}
button.Next
{
    width: 200px;
    /*height: 40px;*/
    margin-top: 20px;
}
div.ValidatorErrors 
{    
	background-color: var(--Red);
	border: solid 1px #000000;
	margin-bottom: 20px;
    padding: 10px;
    display: none;
}
div.ValidatorErrors p {
	color: var(--White);
	margin: 8px 10px 8px 10px;
}
div.ProductItem div.DescShort p
{
    font-size: 14px;
    line-height: auto;
}

span.RemoveIcon
{
    background-color: var(--Red);
    border-radius: 24px;
    color: var(--White);
    padding: 4px;
    margin-right: 8px;
    display: inline-block;
    width: 20px;
    text-align: center;
}

div#CartGrid div.Col1
{
    cursor: pointer;
}

/**************************** GetAQuote.css ****************************/
div#GetAQuoteArea
{
    background-color: var(--PalestGrayBlue);
}

div#GetAQuoteArea div.CenterContent
{
    background-image: url('/images/GetAQuoteBack.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 20px;
}

@media all and (max-width: 1280px) {
	div#GetAQuoteArea div.CenterContent {
		margin-left: 0;
        margin-right: 0;
	}
}

div#GetAQuoteArea p
{
    margin-right: 50%;
}
div#GetAQuoteArea a.Button
{
    display: inline-block;
	padding: 6px 10px;
	background-color: var(--Blue);
	color: #ffffff;
	padding-left: 20px;
	padding-right: 20px;
	font-weight: 400;
	font-size: 18px;
	text-decoration: none;
}
div#GetAQuoteArea a.Button:hover
{
    background-color: var(--HoverGray);
}

/**************************** Main.css ****************************/
body
{
	overflow-x: hidden;
	background-color: var(--BodyGray);
}
DIV.CenterContentWrapper					{width: 100%; margin-left: auto; margin-right: auto; max-width: 1280px;}
DIV.CenterContent							{margin-left: 20px; margin-right: 20px;}

div#TopBar
{
min-height: 97px;
padding-top: 10px;
background-color: var(--White);
}
div#TopBar div.CenterContent
{
	position: relative;
}
div#TopBarLayout
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding-top: 20px;
}
div#TopBarLayout img#Logo
{
	flex: 0 0 auto;
	margin-right: 40px;
	position: relative;
	top: -10px;
}

div#TopBarLayout ul#TopMenu
{
	flex: 1 0 auto;
	display: flex;
	flex-wrap: nowrap;
	padding: 14px 320px 14px 0px;
	z-index: 4;
}
div#TopBarLayout ul#TopMenu li
{
	flex: 0 0 auto;
	list-style: none;
	margin: 0px 4px 0px 4px;
	font-weight: 400;
}
div#TopBarLayout ul#TopMenu li a
{
	padding: 6px 10px 6px 10px;
}
div#TopBarLayout ul#TopMenu li a:hover
{
	background-color: #eeeeee;
	text-decoration: none;
}
div#TopBarLayout ul#TopMenu li.Separator
{
	flex: 0 0 auto;
	list-style: none;
	margin: 0px 0px 0px 0px;
	border-left: solid 1px var(--BorderGray);
}
div#TopBarLayout ul#TopMenu li:first-child
{
	margin-left: 0;
}
ul#SocialMediaLinks
{
	position: absolute;
	top: 26px;
	right: 0;
	display: flex;
	flex-wrap: nowrap;
	padding: 0;
	z-index: 4;
}
ul#SocialMediaLinks li
{
	flex: 0 0 auto;
	list-style: none;
	margin: 0px 2px;
    padding-top: 9px;
}
ul#SocialMediaLinks li.CustomerPortal
{
    text-align: center;
    margin: 0 0 0 10px;
}
ul#SocialMediaLinks li a
{
    color: var(--Blue);
    font-weight: 700;
    padding: 6px 10px 6px 10px;
}
ul#SocialMediaLinks li a:hover
{
	background-color: #eeeeee;
	text-decoration: none;
}
ul#MobileMenuButton
{
	position: absolute;
	top: 32px;
	right: 0;

	font-weight: 600;
	font-size: 30px;
	display: none;
	list-style: none;
	padding: 0;
}
ul#MobileMenuButton a
{
	padding: 10px 20px 12px 20px;
	background-color: var(--Blue);
	color: var(--White);
	text-decoration: none;
}
@media all and (max-width: 750px) {
    /* This breakpoint is for the top bar becoming a mobile-friendly one */
    /* This should be in sync with the media query @ CartGrid.css */
	ul#SocialMediaLinks
	{
		display: none;
	}
	div#TopBarLayout ul#TopMenu
	{
		display: none;
	}
	ul#MobileMenuButton
	{
		display: block;
	}
    div#TopBar
    {
        position: sticky;
        top: 0;
        z-index: 10;
    }
}

div#MobileMenuDropDown
{
	display: none;
}
div#MobileMenuDropDown ul
{
	display: block;
	padding: 0;
}
div#MobileMenuDropDown li
{
	display: block;
}
div#MobileMenuDropDown a
{
	display: block;
	background-color: var(--White);
	text-align: center;
	padding-top: 16px;
	padding-bottom: 16px;
}
div#MobileMenuDropDown a:hover
{
	background-color: #eeeeee;
	text-decoration: none;
}

div#HeaderBar
{
	background-color: var(--BodyGray);
}
div#Header 
{
	background-image: url('/images/Header.jpg');
	background-position: top left;
	height: 280px;
	background-repeat: no-repeat;
	position: relative;
}
div#Header img#V
{
position: absolute;
top: -187px;
right: -40px;
overflow-x: hidden;
z-index: 2;
}

@media all and (max-width: 1080px) {
	div#Header {
		overflow: hidden;
	}

}

@media all and (max-width: 1280px) {
	div#HeaderBar div.CenterContent {
		margin-left: 0;
	}
}

div#HeaderText
{
	position: absolute;
	right: 0;
	width: 300px;
	z-index: 3;
}

@media all and (max-width: 500px) {
	div#Header {
		height: 320px;
	}
	div#HeaderText {
		/*width: 100%;*/
		padding-left: 20px;
		box-sizing: border-box;
	}
}

div#HeaderText h1
{
	text-align: right;
	color: var(--White);
	position: relative;
	margin-left: 50px;
	margin-top: 20px;
}
div#HeaderBar p
{	
	position: relative;
	text-align: right;
	color: var(--White);
	margin-top: 20px;
}



input[type='submit'], button {
	display: block;
	padding: 12px 10px;
	background-color: var(--BodyGray);
	color: var(--White);
	font-weight: 400;
	font-size: 18px;
	text-decoration: none;
	z-index: 4;
	border: none;
	margin-top: 20px;
	margin-bottom: 40px;
	width: 300px;
	text-align: center;
	cursor: pointer;
	max-width: 100%;
	box-sizing: border-box;
}
input[type='submit']:hover, button:hover
{
	background-color: var(--PalerBlue);
}
input.Small[type='submit'], button.Small
{
    padding: 8px 16px;
    font-size: 16px;
    width: auto;
    margin-bottom: 20px;
}

.Centered
{
    text-align: center;
}



/* ContentText can be inside a ContentSolutions or ContentFlexXXX section */
div.ContentText
{
	padding-bottom: 40px;
	padding-top: 20px;
	overflow: hidden;
}
div.ContentText p
{
	line-height: 22px;
	margin-top: 16px;
	margin-bottom: 16px;
}
div.ContentText p.Highlight
{
	margin: 40px 20px;
	border-left: 10px solid var(--Blue);
	padding-left: 20px;
	font-weight: 400;
	font-style: italic;
}


a.TermsAndConditions
{
    color: var(--Blue)
}


/**************************** MoreInformation.css ****************************/
div#MoreInformationOverlay
{
    z-index: 19;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.5);
    display: none;
}
div#MoreInformationWrapper2
{
    display: none;
    border: solid 1px var(--BodyText);
    padding: 20px;
    position: fixed;
    z-index: 20;
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background-color: var(--White);
}
div#MoreInformationWrapper1
{
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--White);
}
div#MoreInformationClose
{
    background-color: var(--Blue);
    color: var(--White);
    width: 32px;
    height: 32px;
    position: absolute;
    right: -20px;
    top: -20px;
    text-align: center;
    padding: 4px;
    box-sizing: border-box;
    user-select: none;
}
div#MoreInformationClose:hover
{
    background-color: var(--PalerBlue);
    cursor: pointer;
}
div#MoreInformationHeader
{
    flex: 0 0 auto;
    padding-bottom: 20px;
    position: relative;
}
div#MoreInformationHeader h1
{
    padding-top: 0;
}
div#MoreInformationStepNavigation
{
    flex: 0 0 auto;
    padding-bottom: 20px;
}
div#MoreInformationContent
{
    flex: 1 1 auto;
}
div#MoreInformationFooter
{
    flex: 0 0 auto;
    box-sizing: border-box;
    padding-top: 20px;
}
div#MoreInformationFooter button
{
    width: 100%;
    margin-top: 0;    
    margin-bottom: 0;

}
div#MoreInformationFooter button.Disabled
{
    background-color: var(--Gray);
    cursor: unset;
}
div#MoreInformationContent div.TabContent
{
    display: none;
}
div#MoreInformationContent div.TabContent iframe
{
    border: none;
    display: block;
}

div#MoreInformationContent div.PictureSlideshow div.Image
{
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

/**************************** ProductGrid.css ****************************/
div.ProductGrid
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-column-gap: 12px;
    grid-row-gap: 12px;
}
div.ProductGrid div.ProductItem
{
    padding: 8px 8px 40px 8px;
    border: solid 1px var(--LightGray);
    box-shadow: rgba(0,0,0,0.25) 0 0 10px;
    position: relative;
}
div.ProductGrid div.ProductItem img
{
    width: 100%;
}
div.ProductGrid div.ProductItem p.Price
{
    font-weight: 600;
    color: var(--Blue);
    text-align: right;
    font-size: 18px;
}
div.ProductGrid div.ProductItem a
{
    font-weight: 600;
    color: var(--Blue);
}
div.ProductGrid div.ProductItem p.ProductAddToCart
{
    position: absolute;
    bottom: 8px;
    right: 8px;
}
div.ProductGrid div.ProductItem span.AddIcon
{
    background-color: var(--Blue);
    border-radius: 36px;
    color: var(--White);
    padding: 10px 8px 14px 8px;
    margin-left: 8px;
    display: inline-block;
    width: 26px;
    text-align: center;
    font-weight: 700;
    font-size: 24px;
}
div.ProductGrid div.ProductItem span.AddIcon:active
{
    background-color: var(--PalerBlue);
}

/**************************** Products.css ****************************/
body.Products div.MainGrid
{
    display: grid;
    grid-template-columns: 3fr minmax(250px, 1fr);
    grid-column-gap: 40px;
    align-items: flex-start;
    margin-bottom: 20px;
}
@media (max-width: 600px) {
    body.Products div.MainGrid
    {
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
    }
}


/**************************** SeparatorBanner.css ****************************/
div.SeparatorBanner
{
    background-color: var(--PalestGrayBlue);
}

div.SeparatorBanner div.CenterContent
{
    background-image: url('/images/GetAQuoteBack.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 20px;
}

@media all and (max-width: 1280px) {
	div.SeparatorBanner div.CenterContent {
		margin-left: 0;
        margin-right: 0;
	}
}

div.SeparatorBanner ul, div.SeparatorBanner p
{
    margin-right: 60%;
}

@media all and (max-width: 1050px) {
    div.SeparatorBanner div.CenterContent {
        background-position-x: 10vw;
    }

}

@media all and (max-width: 800px) {
    div.SeparatorBanner div.CenterContent {
        background-position-x: 20vw;
    }
}

@media all and (max-width: 650px) {
    div.SeparatorBanner div.CenterContent {
        background-image: none;
    }
    div.SeparatorBanner ul, div.SeparatorBanner p
    {
        margin-right: 20px;
    }
}



/**************************** Step01.css ****************************/
body.Step01 div.FormGrid input:not([type='radio'])
{
    width: 100%; max-width: 260px;
}

@media all and (max-width: 960px) 
{
    body.Step01 div.FormGrid {
        grid-template-columns: 1fr;
        grid-row-gap: 0;
    }
    body.Step01 div.FormGrid p.Caption:not(:first-child) {
        margin-top: 12px;
    }
}

@media all and (max-width: 800px) 
{
    body.Step01 div.FormGrid {
        grid-template-columns: max-content 1fr;
        grid-row-gap: 8px;
    }
    body.Step01 div.FormGrid p.Caption:not(:first-child) {
        margin-top: inherit;
    }
}


@media all and (max-width: 600px) 
{
    body.Step01 div.FormGrid {
        grid-template-columns: 1fr;
        grid-row-gap: 0;
    }
    body.Step01 div.FormGrid input:not([type='radio']) {
        width: 100%;
        max-width: none;
    }
    body.Step01 div.FormGrid p.Caption:not(:first-child) {
        margin-top: 12px;
    }
    body.Step01 button
    {
        width: 100%;
    }
}


/**************************** Step02.css ****************************/
button#ButtonExistingNumberAdd, button#ButtonNewNumberAdd
{
    display: inline-block;
    margin-top: 8px;
}

div#SearchNewNumbersListOverlay
{
    z-index: 19;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.5);
    display: none;
}
div#SearchNewNumbersListWrapper2
{
    display: none;
    border: solid 1px var(--BodyText);
    padding: 20px;
    position: fixed;
    z-index: 20;
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background-color: var(--White);
}
div#SearchNewNumbersListWrapper1
{
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--White);
}
div#SearchNewNumbersListClose
{
    background-color: var(--Blue);
    color: var(--White);
    width: 32px;
    height: 32px;
    position: absolute;
    right: -20px;
    top: -20px;
    text-align: center;
    padding: 4px;
    box-sizing: border-box;
}
div#SearchNewNumbersListClose:hover
{
    background-color: var(--PalerBlue);
    cursor: pointer;
}
div#SearchNewNumbersListHeader
{
    flex: 0 0 auto;
    padding-bottom: 20px;
    position: relative;
}
div#SearchNewNumbersListHeader h1
{
    padding-top: 0;
}
div#SearchNewNumbersListTable
{
    flex: 1 1 100%;
    overflow-y: scroll;
    border: solid 1px var(--BodyText);
}
div#SearchNewNumbersListTable p.Message
{
    margin-top: 20px;
    text-align: center;
}
div#SearchNewNumbersListTable table
{
    width: 100%;
    box-sizing: border-box;
}

div#SearchNewNumbersListTable table th
{
    background-color: var(--Blue);
    font-weight: 600;
    padding: 4px;
    color: var(--White);
    border: solid 1px var(--BorderGray);
    position: sticky;
    top: 0;
    border-top: 1px;
}

div#SearchNewNumbersListTable table td
{
    border: solid 1px var(--BorderGray);
    padding: 2px 4px;
}
div#SearchNewNumbersListTable table tr
{
    cursor: pointer;
}
div#SearchNewNumbersListTable table tr th
{
    cursor: default;
}
div#SearchNewNumbersListTable table tr:hover
{
    background-color: var(--RowHighlight);
}
div#SearchNewNumbersListHeader input
{
    display: inline-block;
}
div#SearchNewNumbersListHeader button
{
    display: inline-block;
    margin-left: 12px;
    margin-bottom: 0;
}

div#SearchNewNumbersListFooter
{
    flex: 0 0 auto;
}
div#SearchNewNumbersListFooter button
{
    width: 100%;
    margin-top: 20px;    
    margin-bottom: 0;

}
div#SearchNewNumbersListFooter button.Disabled
{
    background-color: var(--Gray);
    cursor: unset;
}
div.FormInternalGrid
{
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 2px;
    align-items: first baseline;
}
div.FormInternalGrid p
{
    margin-top: 2px;
    margin-bottom: 2px;
}
div.FormInternalGrid p.NewNumberRemove:hover, div.FormInternalGrid p.ExistingNumberRemove:hover
{
    text-decoration: underline;
    cursor: pointer;
}
@media (max-width: 1200px) {
    body.Step02 div.FormGrid
    {
        grid-template-columns: 1fr;
    }
    body.Step02 div.FormGrid p.PortExistingNumbersCaption {
        margin-top: 20px;
        margin-bottom: 0;
    }
    body.Step02 div.FormGrid p.AddNewNumbersCaption {
        margin-top: 20px;
        margin-bottom: 0;
    }
}
body.Step02 div.FormGrid input.ExistingNumber
{
    width: 120px;
}
@media (max-width: 600px) {
    body.Step02 button#ST02Submit
    {
        width: 100%;
    }
}
body.Step02 div.FormGrid hr
{
     grid-column: 1/-1;
}

/**************************** Step03.css ****************************/
@media (max-width: 600px) {
    body.Step03 button#ST03Submit
    {
        width: 100%;
    }
}


/**************************** Step04.css ****************************/
@media (max-width: 600px) {
    body.Step04 button#ST04Submit
    {
        width: 100%;
    }
}


/**************************** Step05.css ****************************/
body.Step05 div.MainGrid
{
    display: grid;
    grid-template-columns: 3fr minmax(250px, 1fr);
    grid-column-gap: 40px;
    align-items: stretch;
}

@media (max-width: 600px) {
    body.Step05 div.MainGrid
    {
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
    }
}


/**************************** Step06.css ****************************/
body.Step06 div.MainGrid
{
    display: grid;
    grid-template-columns: 3fr minmax(250px, 1fr);
    grid-column-gap: 40px;
    align-items: stretch;
}

@media (max-width: 600px) {
    body.Step06 div.MainGrid
    {
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
    }
}


/**************************** Step07.css ****************************/
body.Step07 div#CartGridWrapper
{
    max-width: 400px;
}

/**************************** Step08.css ****************************/
body.Step08 img.IconPDF {
    vertical-align: middle;
    margin-right: 12px;
    max-width: 48px;
}
body.Step08 p.Action input
{
    margin-right: 12px;
}
body.Step08 p.Action
{
    cursor: pointer;
    user-select: none;
}

/**************************** Step09.css ****************************/
body.Step09 div#paypal-button-container
{
    max-width: 300px;
}

/**************************** StepNavigation.css ****************************/
br+p.StepNavigation
{
margin-top: 0;
}
div.ContentText p.StepNavigation  /* Leave div.ContentText because otherwise it takes precedence **/
{
    line-height: normal;
}
p.StepNavigation span
{
    display: inline-block;
    margin-right: 20px;
    background-color: var(--PalestBlue);
    border-radius: 36px;
    padding: 12px;
    width: 20px;
    color: var(--White);
    text-align: center;
    margin-bottom: 8px;
    user-select: none;
}
p.StepNavigation span.Text
{
    display: inline-block;
    margin-right: 20px;
    background-color: var(--PalestBlue);
    border-radius: 36px;
    padding: 12px;
    width: auto;
    color: var(--White);
    text-align: center;
    margin-bottom: 8px;
}
p.StepNavigation span.Available
{
    background-color: var(--DarkerGray);
    cursor: pointer;
}
p.StepNavigation span.Available.Complete
{
    background-color: var(--PalestBlue);
    cursor: pointer;
}
p.StepNavigation span.Unavailable
{
    background-color: var(--Gray);
    color: #ffffff;
}
p.StepNavigation span.Current
{
    font-weight: 700;
    background-color: var(--Blue)
}

/**************************** Support.css ****************************/
body.Support div#ContentBoxes

{
    padding-top: 20px;
}