body{
    font-family:Arial, sans-serif !important;
}

button{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

#cboxClose{
	border:none;
}

#content{
    max-width:1024px;
    margin:0px;
    padding:40px 0px;
	min-height:0px;
}

#tabs{
    padding: 0 !important;    
}

.covidBanner {
    display: none !important;
}

.tabContent{
	padding: 0 !important;
}

.canvasContainer{
    width:1000px;
    height:500px;
    /* border:1px solid #555; */
}

#hiddenCanvasContainer{
	display:none;
}

.canvasContainer .canvasLoadingImage{
	width:20px;
	margin:240px 490px;
	display:none;
}

#tabsLoading {	
    display: -webkit-flex;
    -webkit-justify-content: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 675px;
}

#tabsLoading img{	
    width: 20px;
    height: 20px;
    margin: 200px auto;
}

#defaultProductLink{
	float:right;
	margin:3px;
}

#mainCanvas{
    width:1000px;
    height:500px;
}

.wallFeet, .wallInches, .borderFeet, .borderInches{
    font-size:0.8em;
    text-align:right;
}

#swatchContainer{
    width:296px;
}

.swatch{
    float:left;
    margin:5px;
    border:2px solid #555;
}

.swatch.selected{
    border:2px solid #0F0;
}

#tabLabels, #stepName{
    float:left;
}

#stepName{
    font-family:Arial, sans-serif;
	font-size:24px;
	font-weight:bold;
    color: #555555;
    padding:22px 0px;
    margin-left:-4px;
}

#stepDirections p{
	display:none;
}

#toolButtons{
    float:right;
    overflow:hidden;
    display: -webkit-flex;
    -webkit-justify-content: flex-end;
    -webkit-flex-wrap: wrap;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}

#toolButtons img{
    display: block;
    float: left;
    cursor: pointer;
    margin-left:3px;
}

#toolButtons img#resetRoomDimensionsButton, #toolButtons img#resetBordersButton,
#toolButtons img#customUndoButton, #toolButtons img#customClearButton,
#toolButtons img#resetTilesButton{
	margin-top:2px;
}

.toolButtonContainer {
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-flex-direction: column;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 4px 4px;
}

#toolButtons .toolButtonContainer img{
    width: 50px; 
    height: auto;
    margin:auto;
}


#toolButtons .toolButtonContainer span{
    font-size:16px; 
    text-align:center;
    line-height: 1;
    cursor: pointer;
}

.tabContent{   
    height:auto;
    margin:20px 0px;
    color:#555;
}

.tabContent *{
    font-family:Arial, sans-serif;
    color:#555;
}

.tabContent .inputButtons div {
    text-align: center;
    padding: 4px 4px;
}

.tabContent .inputButtons div strong{
    font-family:Arial, sans-serif;
    color:#fff;
}

#closeStep7HowTo {
    font-family:Arial, sans-serif;
    background-color:#03abc9;
    color:#fff;
    border-radius: 3px;
    border:.5px solid #02869D;
    box-shadow: 2px 4px #e6e6e6;
    padding: 10px 20px;
    font-size:20px;
    font-weight:bold;
}

#closeStep7HowTo:hover {
    text-decoration: none;
    background-color:#02869d;
    box-shadow: none;
}

#loading-tab{
    width:100%;
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: column;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 675px;
}

#loading-tab img{
	width:20px;
	margin:146px 486px;
}

.icon svg path{
    color:red;
}

/*#allWallLengthsEdit, #allBorderWidthsEdit{
    margin:0px 60px;
}

#allWallLengthsEdit h3, #allBorderWidthsEdit h3{
    text-align:center;
	margin:10px 0px;
}

#allWallLengthsEdit table td, #allBorderWidthsEdit table td{
    padding:4px;
}*/

#allWallLengthsEdit h3, #allBorderWidthsEdit h3{
    display:none;
}

#allWallLengthsEdit table td, #allBorderWidthsEdit table td{
    padding:4px;
}

.wallLengthText td, .borderWidthText td{
    padding:3px;
}

.wallLengthText td:first-child, .borderWidthText td:first-child{
    font-weight:bold;
}

#wallLengthEdit{
	display:none;
    position:absolute;
    top:0px;
    left:0px;
	width:151px;
	padding:15px;
    border:1px solid #000;
	background:#EEE;
}

#wallLengthEdit h4{
    text-align:center;
    padding:0px;
    margin:0px 0px 10px 0px;
}

#wallLengthEditFeet, #wallLengthEditInches, .wallFeet, .wallInches, .borderFeet, .borderInches{
	padding:4px;
}

#applyWallLength{
    display:block;
    cursor:pointer;
    width:107px;
    height:44px;
    margin:10px auto 0px auto;
}

a#applyWallLength:hover{
    text-decoration: none;
}

.wallUpdate, .borderUpdate{
    display:block;
    width:107px;
    height:43px;
    margin:10px auto 0px auto;
}

a.wallUpdate:hover, a.borderUpdate:hover{
    text-decoration: none;
}

#step7HowTo{
	width:360px;
	margin:0px 20px;
}

.okayButton{
    display:block;
    width:57px;
    height:20px;
    margin:10px auto 0px auto;
    text-decoration: none;
}

.okayButton strong{
    background-color: #03abc9;
    color: #fff;
    border-radius: 3px;
    border: .5px solid #0061a6;
    box-shadow: 2px 4px #e6e6e6;
    padding: 7px 10px 5px 10px;
    font-size: 18px;
    width:100px;
    height:25px;
    margin:0px auto;
}

.okayButton strong:hover{
    text-decoration: none;
    background-color:#02869d;
    box-shadow: none;
}

a.okayButton:hover{
    text-decoration: none;
}

#selectInstallationTypeContent, 
#selectTileSizeContent, 
#selectTileTypeContent, 
#selectRoomShapeContent, 
#selectWallCeilingContent{
    overflow:hidden;
    width:100%;
    margin:0px auto;
    min-height: 420px;
}

div.calculatorOption{
    float:left;
}

div.calculatorOption input[type="radio"]{
    display:none;
}

div.calculatorOption input[type="radio"] + span.selectionImage + span.optionTitle{
    display:block;
    width:100%;
    margin:20px 0px;
    text-align:center;
}

div.calculatorOption input[type="radio"] + span.selectionImage + span.optionTitle + span.radioButton{
    background: url(/static/images/calculator/button-radio.png);
    background-position:0px -36px;
    display:block;
    width:36px;
    height:36px;
    margin:0px auto;
}

div.calculatorOption input[type="radio"]:checked + span.selectionImage + span.optionTitle + span.radioButton{
    background-position:0px 0px;
}

div.calculatorOption * {
    cursor: pointer;
}

div.calculatorOption.tileType, div.calculatorOption.wallCeiling{
	margin: 0 20px;
}

div.calculatorOption.installType input#drop[type="radio"] + span.selectionImage{
    background: url(/static/images/calculator/img-step-1-drop.png);
    background-position:0px 0px;
    display:block;
    width:464px;
    height:214px;
}

div.calculatorOption.installType input#glueup[type="radio"] + span.selectionImage{
    background: url(/static/images/calculator/img-step-1-glue-up.png);
    background-position:0px 0px;
    display:block;
    width:464px;
    height:214px;
}

div.calculatorOption.installType input#drop[type="radio"]:checked + span.selectionImage, div.calculatorOption.installType input#glueup[type="radio"]:checked + span.selectionImage,
div.calculatorOption.installType input#drop[type="radio"]:hover + span.selectionImage, div.calculatorOption.installType input#glueup[type="radio"]:hover + span.selectionImage{
    background-position:0px -214px;
}

div.calculatorOption.wallCeiling input#wall[type="radio"] + span.selectionImage{
    background: url(/static/images/calculator/img-step-2-wall.png);
    background-position:0px -5px;
    display:block;
    width:214px;
    height:208px;
}

div.calculatorOption.wallCeiling input#ceiling[type="radio"] + span.selectionImage{
    background: url(/static/images/calculator/img-step-2-ceiling.png);
    background-position:0px -5px;
    display:block;
    width:214px;
    height:208px;
}

.calculatorOptionOuterContainer {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

.calculatorOptionOuterContainer.RoomShapeOuterContainer {
    width: 100%;
    display: -webkit-flex;
    -webkit-justify-content: space-around;
    -webkit-flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.calculatorOptionContainer {
    -webkit-flex-basis: 500px;
    flex-basis: 500px;
    box-sizing: border-box;
    padding:20px;
}

.calculatorOptionContainer.shapeOption {
    -webkit-flex-basis: 195px;
    flex-basis: 195px;
    box-sizing: border-box;
    padding:20px;
}

.calculatorOptionContainer, .calculatorOptionContent {
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    -webkit-flex-direction: column;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    margin: 0 auto;
}

.calculatorOptionContainer img {
    width: 100%;
    height: auto;
    max-width: 460px;
    margin: 0 auto;
    border: 1px solid #555555;
    box-sizing: border-box;
}

.calculatorOptionContainer.sizeOption img {
    width: 100%;
    height: auto;
    max-width: 230px;
    max-height: 230px;
    margin: 0 auto;
}

.calculatorOptionContainer.shapeOption img {
    width: 100%;
    height: auto;
    max-width: 150px;
    max-height: 150px;
    margin: 0 auto;
    border: none;
}

.calculatorOptionContainer h3 {
    text-align: center;
}

button.calculatorOptionContainer {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

button.calculatorOptionContainer:focus {
    outline: none;
}

.calculatorOptionContent span {
    margin: 0 auto;
    text-align: center;
}

.calculatorOptionContent button, .continueCeilingDesign button, .resultsMobileButtons button, .calculatorOptionContent span.selectButton {
    width: max-content;
    margin: 20px auto 40px;
    background-color:#03abc9;
    color:#fff;
    border-radius: 3px;
    border:.5px solid #02869D;
    box-shadow: 2px 4px #e6e6e6;
    padding: 20px 20px;
    font-size:20px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    line-height: 0.15;
    max-width: 85%;
    text-align: center;
    display: inline-block;
}

.calculatorOptionContent button:hover, .continueCeilingDesign button:hover, .resultsMobileButtons button:hover, .calculatorOptionContent span.selectButton:hover {
    background-color:#02869d;
    border:.5px solid #015462;
    box-shadow: none;
}

.resultsMobileButtons button {
    margin: 20px auto 10px;
    width:190px;
}

div.calculatorOption.wallCeiling input#wall[type="radio"]:checked + span.selectionImage, div.calculatorOption.wallCeiling input#ceiling[type="radio"]:checked + span.selectionImage,
div.calculatorOption.wallCeiling input#wall[type="radio"]:hover + span.selectionImage, div.calculatorOption.wallCeiling input#ceiling[type="radio"]:hover + span.selectionImage{
background-position:0px -213px;
}

div.calculatorOption.tileSize input#tile[type="radio"] + span.selectionImage{
    background: url(/static/images/calculator/img-step-2-2x2.png);
    background-position:0px 0px;
    display:block;
    width:237px;
    height:237px;
}

div.calculatorOption.tileSize input#panel[type="radio"] + span.selectionImage{
    background: url(/static/images/calculator/img-step-2-2x4.png);
    background-position:0px 0px;
    display:block;
    width:462px;
    height:237px;
}

div.calculatorOption.tileSize input#tile[type="radio"]:checked + span.selectionImage, div.calculatorOption.tileSize input#panel[type="radio"]:checked + span.selectionImage,
div.calculatorOption.tileSize input#tile[type="radio"]:hover + span.selectionImage, div.calculatorOption.tileSize input#panel[type="radio"]:hover + span.selectionImage{
    background-position:0px -237px;
}

div.calculatorOption.tileType input#butt[type="radio"] + span.selectionImage{
    background: url(/static/images/calculator/img-step-2-butt.png);
    background-position:0px -5px;
    display:block;
    width:214px;
    height:208px;
}

div.calculatorOption.tileType input#overlap[type="radio"] + span.selectionImage{
    background: url(/static/images/calculator/img-step-2-lap.png);
    background-position:0px -5px;
    display:block;
    width:214px;
    height:208px;
}

div.calculatorOption.tileType input#butt[type="radio"]:checked + span.selectionImage, div.calculatorOption.tileType input#overlap[type="radio"]:checked + span.selectionImage,
div.calculatorOption.tileType input#butt[type="radio"]:hover + span.selectionImage, div.calculatorOption.tileType input#overlap[type="radio"]:hover + span.selectionImage{
    background-position:0px -213px;
}

div.calculatorOption.roomShape input#rectangle[type="radio"] + span.selectionImage{
    background: url(/static/images/calculator/img-step-3-rectangular.png);
    background-position:0px 0px;
    display:block;
    width:162px;
    height:162px;
    margin:0px 15px;
}

div.calculatorOption.roomShape input#l-shape[type="radio"] + span.selectionImage{
    background: url(/static/images/calculator/img-step-3-l-shaped.png);
    background-position:0px 0px;
    display:block;
    width:162px;
    height:162px;
    margin:0px 15px;
}

div.calculatorOption.roomShape input#t-shape[type="radio"] + span.selectionImage{
    background: url(/static/images/calculator/img-step-3-t-shaped.png);
    background-position:0px 0px;
    display:block;
    width:162px;
    height:162px;
}

div.calculatorOption.roomShape input#u-shape[type="radio"] + span.selectionImage{
    background: url(/static/images/calculator/img-step-3-u-shaped.png);
    background-position:0px 0px;
    display:block;
    width:162px;
    height:162px;
    margin:0px 15px;
}

div.calculatorOption.roomShape input#custom-shape[type="radio"] + span.selectionImage{
    background: url(/static/images/calculator/img-step-3-draw-your-own.png);
    background-position:0px 0px;
    display:block;
    width:162px;
    height:162px;
    margin:0px 15px;
}

div.calculatorOption.roomShape input#rectangle[type="radio"]:checked + span.selectionImage,
div.calculatorOption.roomShape input#l-shape[type="radio"]:checked + span.selectionImage,
div.calculatorOption.roomShape input#t-shape[type="radio"]:checked + span.selectionImage,
div.calculatorOption.roomShape input#u-shape[type="radio"]:checked + span.selectionImage,
div.calculatorOption.roomShape input#custom-shape[type="radio"]:checked + span.selectionImage,
div.calculatorOption.roomShape input#rectangle[type="radio"]:hover + span.selectionImage,
div.calculatorOption.roomShape input#l-shape[type="radio"]:hover + span.selectionImage,
div.calculatorOption.roomShape input#t-shape[type="radio"]:hover + span.selectionImage,
div.calculatorOption.roomShape input#u-shape[type="radio"]:hover + span.selectionImage,
div.calculatorOption.roomShape input#custom-shape[type="radio"]:hover + span.selectionImage{
    background-position:0px -162px;
}

#pencil{
    /*margin:3px 0px;*/
	text-align:middle;
	cursor:pointer;
}

.continueCeilingDesign {
    display: -webkit-flex;
    -webkit-justify-content: center;
    display: flex;
    justify-content: center;
}

.resultsMobileButtons {
    display: -webkit-flex;
    -webkit-justify-content: center;
    display: flex;
    justify-content: center;
}

#pencilWallLengths {
    display: none;
}

#pencilBorderWidths {
    display: none;
}

#resultsImagesContainer, #resultsDetailContainer{
    width:100%;
    margin-bottom:50px;
}

#ceilingLayout, #ceilingDesign{
    width:100%;
    margin-bottom:50px;
    padding-top: 40px;
	padding-bottom: 40px;
}

#ceilingLayoutBackGround, #ceilingDesignBackGround{
	/* background-color: #eeeeee;
    border: solid #ccc 1px; */
    margin-bottom: 100px;
}

#ceilingLayoutDetailsContainer, #cartProductSelectionContainer{
	display: inline-block;
	vertical-align: top;
	width:49%;
}

#ceilingLayoutDetailsContainer{
	line-height: 30px;
}

#dimensions div, #borderWidths div {
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
}

#dimensions div span, #borderWidths div span{
    padding-right: 10px;
}

#ceilingLayoutDetailsContainer div{
	margin:5px 0px;
}    
#ceilingLayoutDetailsContainer p{
    margin:0px 0px 5px 0px;
}

#enlargedCanvasWrapper{
    display:none;
}

#productSelection{
	width:944px;
	margin:0px 0px;
	overflow:hidden;
}

#productSelection .selectedProduct{
    width:130px;
    margin:0px 2px;
    position:relative;
}

#productSelection .selectedProduct.tile, #productSelection .selectedProduct.panel{
    float:left;
}

#productSelection .selectedProduct.accessory{
    float:right;
}

#productSelection .selectedProduct img.productImage{
    border:1px solid #000;
    box-shadow: 2px 2px 10px 0px #AAA;
    cursor:pointer;
}

#productSelection .selectedProduct.tile img.productImage, #productSelection .selectedProduct.accessory img.productImage{	
    width:98px;
    height:98px;
	margin:0px 15px;
}

#productSelection .selectedProduct.panel img.productImage{
    width:49px;
    height:98px;
    margin:0px 39px 0px 40px;
}

#productSelection .selectedProduct.noImageBorder img.productImage{
	padding:0px;
    border:0px;
    box-shadow:none;
}

#productSelection .selectedProduct div{
	font-size:15px;
    text-align:center;
	margin-top:10px;
}

#productSelection .selectedProduct .checkMark{
    position:absolute;
    display:none;
}

#productSelection .selectedProduct.tile .checkMark, #productSelection .selectedProduct.accessory .checkMark{
    top: 78px;
    left: 2px;
}

#productSelection .selectedProduct.panel .checkMark{
    top: 78px;
    left: 28px;
}

#productSelection .selectedProduct.selected .checkMark{
    display:block;
}

#productSelection .selectedProduct .borderLabel, #productSelection .selectedProduct .accessoryLabel{
    position:absolute;
    top:37px;
    left:0px;
	
    width:100px;
    height:22px;
    padding:2px 0px;
    margin:0px 15px;
	
	background-color:rgba(85, 85, 85, 0.7);
	
    /*background: #555;
    opacity: 0.6;*/
	color:#FFF;
    font-weight:bold;
	line-height:22px;
    display:none;
}

#productSelection .selectedProduct .accessoryLabel{
    display:none;
}

/*#productSelection .selectedProduct.tile .borderLabel{
    width:100px;
    height:22px;
	margin:0px 15px;
}

#productSelection .selectedProduct.panel .borderLabel{
    width:51px;
    height:22px;
    margin:0px 39px 0px 40px;
}*/

#productSelection .selectedProduct.border .borderLabel{
	cursor:pointer;
    display:block;
}

#productSelection .selectedProduct.accessory .accessoryLabel{
	cursor:pointer;
    display:block;
}

#productSelection .selectedProduct .changeButton{
    margin-top:10px;
    display:none;
    height: 35px;
}

#productSelection .selectedProduct.selected .changeButton{  
    display:block;
}

#productSelection .selectedProduct .changeButton a{
    display:block;
    background-color: #03abc9;
    color: #fff;
    border-radius: 3px;
    border: .5px solid #0061a6;
    box-shadow: 2px 4px #e6e6e6;
    padding: 5px 0px 0px 0px;
    font-size: 18px;
    width:100px;
    height:25px;
    margin:0px auto;
}

#productSelection .selectedProduct .changeButton a:hover{
    text-decoration: none;
    background-color:#02869d;
    box-shadow: none;
}

#productSelection .selectedProduct .removeButton{
    margin-top:10px;
    display:none;
}

#productSelection .selectedProduct.selected .removeButton{  
    display:block;
}

#productSelection .selectedProduct .removeButton a{
    display:block;
    background-color: #03abc9;
    color: #fff;
    border-radius: 3px;
    border: .5px solid #0061a6;
    box-shadow: 2px 4px #e6e6e6;
    padding: 5px 0px 0px 0px;
    font-size: 18px;
    width:100px;
    height:25px;
    margin:0px auto;
}

#productSelection .selectedProduct .removeButton a:hover{
    display:block;
    text-decoration: none;
    background-color:#02869d;
    box-shadow: none;
}

#productSelection .selectedAccessory{
    float:right;
    width:100px;
    margin:0px 10px;
}

#productSelection #addTile{
    float:left;
	cursor:pointer;
    font-size:15px;
	text-align:center;	
    width:100px;
    margin:0px 15px;
}

#productSelection #addAccessory{
    float:right;
    cursor:pointer;
    font-size:15px;
    text-align:center;  
    width:100px;
    margin:0px 15px;
}

#productSelection #addTile svg, #productSelection #addAccessory svg{
    font-size:110px;
    margin-bottom: 10px;
    margin-top: -4px;
}

#productSelection #addTile svg path, #productSelection #addAccessory svg path{
    color:#ccc;
}

#pickATileTypeWrapper{
    display:none;
	margin:20px;
}

#pickATileTypeContainer{
    width:562px;
	margin:30px 80px;
	overflow:hidden;
}

#pickATileTypeContainer .tileTypeChoice{ 
    float:left;	
    cursor:pointer;
	text-align:center;
	font-size:24px;
	font-weight:bold;
    line-height:30px;
}

#pickATileTypeContainer #tileTypeChoiceOr{ 
    text-align:center;
    float:left;
	width:80px;
	padding:75px 0px;
    font-size:24px;
    font-weight:bold;
	line-height:30px;
}

#pickATileTypeContainer #featureTileTypeChoice .choiceImage{
    background:url(/static/images/calculator/img-step-6-feature.png);    
}

#pickATileTypeContainer #borderTileTypeChoice .choiceImage{
    background:url(/static/images/calculator/img-step-6-border.png);    
}

#pickATileTypeContainer .choiceImage{
	display:block;
    width:241px;
    height:180px;
	margin-bottom:10px;
	background-position:0px -1px;
}

#pickATileTypeContainer .choiceImage:hover{
    background-position:0px -181px !important;
}

.featureOrBorderTile{
	display:none;
}

#pickATileWrapper{
    display:none;
}

#pickATileContainer{
	position:relative;
    margin:30px;
}

#loadingAnimationContainer{
    display:none;
}

#loadingAnimation{
    width:20px;
    height:20px;
}

#stylePickerWrapper{
    position:relative;
}

#stylePickerWrapper #prevArrow, #stylePickerWrapper #nextArrow{
    cursor:pointer;
}

#stylePickerWrapper #prevArrow{
    position:absolute;
	top:145px;
    left:51px;
    color: #ccc;
    font-size: 57px;
}

#stylePickerWrapper #nextArrow{
    position:absolute;  
    top:145px;
	left:925px;
    color: #ccc;
    font-size: 57px;
}

#stylePickerWindow{
	width:750px;
	margin:0px auto;	
	overflow:hidden;    
}

#stylePickerContainer{
    /*width:11750px;*/
    width:35250px;
	padding:0px 0px 30px 0px;
	overflow:hidden;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
    /*apply a transform to kick in the hardware acceleration.  Without this, the first
    time we add the transform you get odd rendering of the divs (half missing) */
    transform: translate(0, 0);            
    -webkit-transition-property: transform;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    -webkit-transform: translate(0, 0);
}

.tilePickerStep{
	display:inline-block;
    width:26px;
    height:24px;
	padding:18px 17px;
    background: url(/static/images/calculator/steps-background-circle.png);
    background-position: 0 0;
    font-family: Arial, sans-serif !important;
    font-size: 48px !important;
    font-weight: bold !important;
    color: #ffffff !important;
	vertical-align:middle;
}

.tileContainer{
    cursor:pointer;
	position:relative;
	float:left;
	width:200px;
	height:220px;
	margin:0px 25px;
}

.tileContainer.hidden{
	display:none;
}

.tileContainer .tileImage{	
    border:1px solid #000;
    box-shadow: 2px 2px 10px 0px #AAA;
}

.tileContainer.tile .tileImage,
.tileContainer.accessory .tileImage{
    width:198px;
    height:198px;
}

.tileContainer.panel .tileImage{
    width:99px;
    height:198px;
	margin:0px 45px 0px 44px;
}

.tileContainer  span.notAvailable {
    position: absolute;
    top: 74px;
    left: 0px;
    width: 100%;
    height: auto;
    padding: 2px 0px;
    background-color: rgba(85, 85, 85, 0.7);
    color: #FFF;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
}

.tileContainer  span.recommendedColor {
    position: absolute;
    top: 74px;
    left: 0px;
    width: 100%;
    height: auto;
    padding: 2px 0px;
    background-color: rgba(85, 85, 85, 0.7);
    color: #FFF;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
}


.theme-checkMark {
    --fa-primary-color: white; 
    --fa-secondary-color: rgb(2 134 157); 
    --fa-secondary-opacity: 1.0;
}

.theme-checkMark path.fa-secondary{
    fill:#02869d;
}

.theme-checkMark path.fa-primary{
    fill:#ffffff;
}

.tileContainer .tileImage.noBorder{
    padding:1px;
    border:0px;
    box-shadow:none;
    cursor:pointer;
}

.tileContainer .checkMark{
    position:absolute;
    display:none;
}

.tileContainer.tile .checkMark,.tileContainer.accessory .checkMark{
    top: 207px;
    left: -5px;
    font-size: 20px;
}

.tileContainer.panel .checkMark{
    top:204px;
    left:10px;
}

.tileContainer.selected .checkMark{
    display:block;
}

.tileContainer p{
    text-align:center;	
    font-weight: bold;
    margin: 5px 0px;
}

#swatchesContainer{
	width:990px;
    padding:0px 15px 15px 15px;
	margin:0px auto;
    overflow:hidden;
}

.colorSwatchContainer{
    float:left;	
	position:relative;
	cursor:pointer;
    width:52px;
    height:52px;
	margin:0px 7px;
	overflow:visible;
}

.colorSwatchContainer.na .naLabel{
    display:block;
}

.colorSwatchContainer .colorSwatch{
    width:50px;
    height:50px;   
    border:1px solid #000;
}

.colorSwatchContainer .naLabel{
    position:absolute;
	left:0px;
	top:0px;
	background:#FFF;
	opacity:0.85;
    width:52px;
    height:22px;
    padding:15px 0px;
	display:none;
	text-align:center;
}

.colorSwatchContainer .checkMark{
    position:absolute;
    display:none;
    top: 15px;
    left: 15.5px;
}

.colorSwatchContainer.selected .checkMark{
    display:block;
}

#selectTileContainer{
	text-align:center;
    margin-top:25px;
}

#selectTile{
    display:block;
    cursor:pointer;
    width:186px;
    height:57px;
    margin:10px auto 0px auto;
}

#selectTile:hover{
    background-position:0px -59px;
}

#selectAccessory{
    display:block;
    cursor:pointer;
    width:100px;
    height:57px;
    margin:10px auto 0px auto;
}

#selectAccessory:hover{
    background-position:0px -59px;
}

.addOrChange{
    display:none;
}

#chooseATileHTML{
    display:none;
}

#productSelectionResultsHTML{
    display:none;
}

#cartProductSelectionContainer .productSelectionResult{
    clear:both;
    overflow:hidden;
    margin-bottom:20px;
}

#cartProductSelectionContainer .productSelectionResult p{
    /*margin:0px;*/
    margin: 0px 0px 5px 0px;
    line-height: 16px;
}

#cartProductSelectionContainer .productSelectionResult p.quantityContainer{
    margin-top:3px;
}

#cartProductSelectionContainer .productSelectionResult .checkBoxContainer{
    float:left;
	width:36px;
	margin-right:12px;
}

#cartProductSelectionContainer .productSelectionResult .details{
    float:left;
}

#cartProductSelectionContainer .productSelectionResult .imageContainer{
	float:left;
	margin-right:20px;
}
#cartProductSelectionContainer .productSelectionResult img.productImage{
    border:1px solid #000;
    box-shadow: 2px 2px 10px 0px #AAA;
    cursor:pointer;
}

#cartProductSelectionContainer .productSelectionResult.tile img.productImage, #cartProductSelectionContainer .productSelectionResult.accessory img.productImage{    
    width:88px;
    height:88px;
}

#cartProductSelectionContainer .productSelectionResult.panel img.productImage{
    width:44px;
    height:88px;
}

#cartProductSelectionContainer .productSelectionResult img.productImage.noBorder{
    padding:0px;
    border:0px;
    box-shadow:none;
}

#cartProductSelectionContainer .productSelectionResult .quantity{
    width:50px;
}

#cartProductSelectionContainer .productSelectionResult .addToCartCheckbox{
    display:none;
}

#cartProductSelectionContainer .productSelectionResult input[type="checkbox"] + span.checkBox{
    display:none;
    width:36px;
    height:36px;
    margin:26px 0px;
}

#cartProductSelectionContainer .productSelectionResult input[type="checkbox"] + span.checkBox + span.checkEmpty{
    display:block;
    width:36px;
    height:36px;
    margin:26px 0px;
}

#cartProductSelectionContainer .productSelectionResult input[type="checkbox"]:checked + span.checkBox{
    display:block;
}

#cartProductSelectionContainer .productSelectionResult input[type="checkbox"]:checked + span.checkBox + span.checkEmpty{
    display:none;
}


#cartProductSelectionContainer #subtotalContainer{
    margin-left:48px;
	margin-bottom:20px;
}

#cartProductSelectionContainer #pdfLinkContainer{
    font-size:14px;
    padding-left:48px;
}

#cartProductSelectionContainer #pdfLinkContainer img{
    vertical-align:middle;
}

#cartProductSelectionContainer #pdfLinkContainer img.loadingImage{
    display:none;
}

.resultsButtonContainer {
    display: -webkit-flex;
    display: flex;
    padding-left: 36px;
    margin: 30px 0;
}

#pdfLinkText {
    padding: 0;
    margin: 0 0 0 -11px;
}

.resultsButton {
    display: flex;
    min-width: 205px;
    background-color: #03abc9;
    color: #fff !important;
    border-radius: 3px;
    border: .5px solid #0061a6;
    box-shadow: 2px 4px #e6e6e6;
    padding: 15px 20px;
    font-size: 20px;
    margin-left: 10px;
    justify-content: center;
}

.resultsButton.resultsButtonGray {
    background-color: #ccc;
    color: #555 !important;
    border: .5px solid #555;
    box-shadow: 2px 4px #e6e6e6;
}

.resultsButton:hover{
    background-color: #02869d;
    box-shadow: none;
    text-decoration: none !important;
}

.resultsButton.resultsButtonGray:hover{
    background-color: #b8b8b8;
    box-shadow: none;
    text-decoration: none !important;
}

#hiddenColorboxContent{
	display:none;
}

div.colorboxMessage{
	margin:20px;
}

#PDFLayoutImage, #PDFDesignImage{
	display:none;
}

#ceilingLayoutDetailsContainer div{
	margin-top:10px;
    margin-bottom:18px;    
}
    
#ceilingLayoutDetailsContainer div#resultDetails{
    clear:both;
	margin-top:10px;
}

#tabContent-8{
	margin:0;
}

#tabContent-8 h3{
	margin-bottom: 30px;
	margin-top: 50px;
	font-size: 30px;
}

#tabContent-8 hr{
	color: #ccc;
	background-color: #ccc;
	border:0;
	border-top: 1px solid #ccc;
}

.step8Directions{
	margin-bottom: 40px;
}

.previousAndNextContainer {
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#emailPdfForm, .emailPdfFormRow {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    display: flex;
    flex-direction: column;
}

#emailPdfForm h3 {
    margin-top: 0;
}

#emailPdfForm .emailPdfFormRow input{
    padding:3px;
    font-size: 20px;
}

@media all and (-ms-high-contrast:none) {
    #stepName {
        margin-left:-30px;
    }

    .calculatorOptionContainer.shapeOption {
        -webkit-flex-basis: 155px;
        flex-basis: 155px;
    }

    button.calculatorOptionContainer {
        padding: 0;
    }

    .calculatorOptionContent button, .continueCeilingDesign button {
        margin: 20px 300px 40px;
    }

    .svg-inline--fa .fa-secondary {
        opacity: 1;
    }
}

@supports (-ms-ime-align: auto) {
    
}

@media only screen and (min-width: 1366px) and (max-width: 1366px) and (orientation: landscape) {
    .calculatorOptionContainer.shapeOption.customShape {
        display: none;
    }
    
}


@media screen and (max-width: 1194px) and (min-width: 1024px) {
	#mainCanvas{
        width: 100% !important;
        height: auto !important;
    }
    
    .canvasContainer {
	    width: 100%;
        height: auto;
        padding: 1px;
    }

    #selectInstallationTypeContent, #selectTileSizeContent, #selectTileTypeContent, #selectRoomShapeContent, #selectWallCeilingContent {
        overflow: hidden;
        width: 100%;
        margin: 0px auto;
        min-height: 510px;
    }

    .calculatorOptionOuterContainer.RoomShapeOuterContainer {
        width: 100%;
        display: -webkit-flex;
        -webkit-justify-content: space-between;
        -webkit-flex-wrap: wrap;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #stylePickerWrapper #nextArrow {
        position: absolute;
        top: 145px;
        left: 90%;
    }

    #stylePickerWrapper #prevArrow {
        position: absolute;
        top: 145px;
        left: 5%;
    }

    #swatchesContainer {
        width: initial;
    }
    
    .colorSwatchContainer {
        margin: 0 7px 14px;
    }

    .calculatorOptionContainer {
        -webkit-flex-basis: 490px;
        flex-basis: 490px;
    }

    .calculatorOptionContainer.shapeOption.customShape {
        display: none;
    }
    
}

@media screen and (max-width: 1023px) and (min-width: 551px) {
	#mainCanvas{
        width: 100% !important;
        height: auto !important;
    }
    
    .canvasContainer {
	    width: 100%;
	    height: auto;
	}
	
	#selectInstallationTypeContent {
        width: 100%;
    }
	
	#selectInstallationTypeContent div:nth-child(n), #selectTileSizeContent  div:nth-child(n){
        transform:scale(.67);
        -webkit-transform:scale(.67);
        transform-origin:0 0;
        -webkit-transform-origin:0 0;
    }
    
    #ceilingLayout img, #ceilingDesign img, #ceilingLayoutDetailsContainer img, #cartProductSelectionContainer img {
	    width: 100%;
	}
	
	#cartProductSelectionContainer #pdfLinkContainer img{
        width:inherit;
    }
    
    div#rectangle-container {
        margin-left: 0px !important;
    }

    #productSelection{
        width:100%;
        margin:0px 0px;
        overflow:hidden;
    }

    #enlargedCanvas {
        width: 100% !important;
        height: auto !important;
    }

    .calculatorOptionOuterContainer.RoomShapeOuterContainer {
        width: 100%;
        display: -webkit-flex;
        -webkit-justify-content: space-between;
        -webkit-flex-wrap: wrap;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    #stylePickerWrapper #nextArrow {
        position: absolute;
        top: 145px;
        left: 90%;
    }

    #stylePickerWrapper #prevArrow {
        position: absolute;
        top: 145px;
        left: 5%;
    }

    #swatchesContainer {
        width: initial;
    }
    
    .colorSwatchContainer {
        margin: 0 7px 14px;
    }
    
    .calculatorOptionContainer {
        -webkit-flex-basis: 490px;
        flex-basis: 490px;
    }
    
    .calculatorOptionContainer.shapeOption.customShape {
        display: none;
    }
    
}
@media screen and (max-width: 900px) and (min-width: 551px) {
	/* #mainCanvas{
        transform:scale(.782);
        -webkit-transform:scale(.782);
        transform-origin:0 0;
        -webkit-transform-origin:0 0;
    } */
    
    .canvasContainer {
	    width: 100%;
        height: auto;
        padding: 1px;
    }
    
    #selectRoomShapeContent {
        width: 100%;
        margin: 0px auto;
    }

    .calculatorOptionOuterContainer.RoomShapeOuterContainer {
        width: 100%;
        display: -webkit-flex;
        -webkit-justify-content: space-around;
        -webkit-flex-direction: row;
        -webkit-flex-wrap: wrap;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-around;
    }

    .calculatorOptionOuterContainer {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    
    .calculatorOptionContainer {
        -webkit-flex-basis: 510px;
        flex-basis: 510px;
    }
    
    .calculatorOptionContainer img {
        margin: 0px auto;
    }

    #productSelection .selectedProduct .changeButton.mobile a, 
    #productSelection .selectedProduct .overlapChangeButton.mobile, 
    #productSelection .selectedProduct .removeButton.mobile a, 
    #productSelection #addAccessory.addAccessory .changeButton.mobile {
        background-color: transparent;
        border: none;
        box-shadow: none;
        color:#02869d;
        font-size: 40px;
        width: max-content;
        height: auto;
        padding: 0;
	}
	
    #productSelection .selectedProduct .changeButton a svg path, 
    #productSelection .selectedProduct .overlapChangeButton svg path, 
    #productSelection .selectedProduct .removeButton a svg path, 
    .addAccessory .changeButton svg path{
        color:#02869d !important;
    }
    
    #productSelection #addTile svg, #productSelection #addAccessory svg {
        font-size: 54px;
    }
	
	#productSelection {
	    width: 100%;
	    margin: 0px 0px;
        overflow: hidden;
        display: -webkit-flex;
        -webkit-justify-content: space-between;
        -webkit-flex-direction: row;
        -webkit-flex-wrap: wrap;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
	}
	
	.productSelectionResult{
		width:100%;
		margin:10px 2%;
        clear: none !important;
		float:left;
    }
    
    #ceilingLayoutDetailsContainer, #cartProductSelectionContainer {
        display: inline-block;
        vertical-align: top;
        width: 40%;
        box-sizing: border-box;
    } 
    
    #cartProductSelectionContainer {
        display: inline-block;
        vertical-align: top;
        width: 56%;
        box-sizing: border-box;
        margin-right: 3%;
    }
	
	#productSelection .selectedProduct.tile img.productImage, 
    #productSelection .selectedProduct.accessory img.productImage, 
    #productSelection .selectedProduct.panel img.productImage, .addAccessory img {
        width: 100%;
        max-width: 198px;
	    height: auto;
	    margin: 0 auto 15px;
    }
	
	#productSelection .selectedProduct, .addAccessory {
	    width: 100%;
	    margin: 20px 0;
        position: relative;
        display: -webkit-flex;
        -webkit-flex-direction: column;
        -webkit-flex-basis: 220px;
        display: flex;
        flex-direction: column;
        flex-basis: 220px;
    }

    #productSelection #addAccessory.addAccessory {
	    float: none;
        cursor: pointer;
        font-size: 20px;
        text-align: center;
        width: 100%;
        margin: 20px 0;
        padding: 0;
    }

    #productSelection .selectedProduct div {
        font-size: 20px;
        margin-top: 2px;
    }
	
    #productSelection .selectedProduct .productData {
        line-height: 23px;
    }
	
	#productSelection .selectedProduct .editTitleContainer, .addAccessory .editTitleContainer {
        display: -webkit-flex;
        display: flex;
        margin: 0 auto;
    }
    	
	#productSelection .selectedProduct .editTitleContainer .labelTitleContainer, .addAccessory .editTitleContainer .labelTitleContainer {
        display: -webkit-flex;
        -webkit-flex-direction: column;
        display: flex;
        flex-direction: column;
    }
    
    #productSelection .selectedProduct .changeButton.mobile a, 
    #productSelection .selectedProduct .overlapChangeButton.mobile, 
    #productSelection .selectedProduct .removeButton.mobile a, 
    #productSelection #addAccessory.addAccessory .changeButton.mobile {
        margin-top: 0px;
        height: auto;
        display: block;
        margin-right: 10px;
    }
	   
    #productSelection .selectedProduct .productData, .addAccessory .editTitleContainer .clickAccessory {
        margin-top: 0;
        height: auto;
        text-align: left;
    }
	
	#productSelection .selectedProduct .borderLabel, #productSelection .selectedProduct .accessoryLabel {
	    position: relative;
	    width: 100%;
	    height: auto;
	    padding: 0;
        margin: 0;
        font-size:20px;
        background-color: transparent;
        color: #555555;
        top: 0;
        left: 0;
    }

    #productSelection .selectedProduct .featureLabel, 
    #productSelection .selectedProduct .accessoryLabel, 
    #productSelection .selectedProduct .borderLabel {
        margin:0;
        text-align: left;
    }
	
    #productSelection .selectedProduct.border .featureLabel {
        cursor: pointer;
        display: none;
    }

    #pickATileContainer {
        width: 310px;
        margin: 10px auto 10px;
        overflow: hidden;
    }

    #stylePickerWindow {
        width: 250px !important;
    }

    #stylePickerWrapper #nextArrow {
        position: absolute;
        top: 110px;
        left: 265px;
    }

    #stylePickerWrapper #prevArrow {
        position: absolute;
        top: 110px;
        left: 0px;
    }
    
    #swatchesContainer {
        width: 98%;
        padding: 0px 15px 15px 15px;
        margin: 0px auto;
        overflow: hidden;
        box-sizing: border-box;
    }

    .colorSwatchContainer {
        float: left;
        position: relative;
        cursor: pointer;
        width: 52px;
        height: 52px;
        margin: 0px 7px 14px;
        overflow: visible;
    }

    #cartProductSelectionContainer .productSelectionResult .imageContainer {
        margin-bottom: 20px;
    }

    .resultsButtonContainer {
        display: -webkit-flex;
        display: flex;
        padding-left: 36px;
        margin: 30px 0;
    }

    .resultsButton {
        padding: 10px 20px 10px 20px;
        margin: 10px 0;
        text-align: center;
        width: 150px;
        height: auto;
    }

    .closeLink {
        margin-top: 20px;
    }
    
    .customShape {
        display: none;
    }

    .cancelContainer {
        display: flex;
    }
    
    .cancelContainer button {
        width: max-content;
        margin: 20px auto 40px;
        background-color:rgb(243, 0, 0);
        color:#fff;
        border-radius: 3px;
        border:.5px solid rgb(163, 2, 2);
        box-shadow: 2px 4px #e6e6e6;
        padding: 20px 20px;
        font-size:20px;
        font-family: inherit;
        font-weight: bold;
        cursor: pointer;
        line-height: 0.15;
        max-width: 85%;
        text-align: center;
    }
    
    .cancelContainer button:hover {
        background-color: rgb(163, 2, 2);
        border:.5px solid rgb(109, 1, 1);
        box-shadow: none;
    }
}
@media screen and (max-width: 551px) { 
    .calculatorOptionContainer.shapeOption.customShape {
        display: none;
    }
}