input:focus { outline: 0; }
button:focus { outline: 0; }
button, input, optgroup, select, textarea { margin: 0; font: inherit; color: inherit; padding: 0; border: 0; }
button { overflow: visible; }
button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
 -webkit-appearance: none;
 margin: 0;
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
p { margin: 0 0 10px; }
sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; top: -0.5em; }
.hide { display: none; }
.hide-important { display: none !important; }
.show { display: inline-block; }
.cache { display: none; }
img { border: 0; }
a { text-decoration: none; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; xxxbackground-color: #fff; }
body { background-color: #ddd; }
/*html { 
  background: url(images/loading-bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}*/
img { /* Stops spaces under inline elements like under thumbnails. */
vertical-align: middle; }
/* Don't hide for any as can the use general scrollbar hiding code for all browsers */
/*
::-webkit-scrollbar
{
display: none;
}
*/
/* Simpler than the parent div overflow method. Both methods result in extra right padding due to the use of box-sizing: border-box */
.vit-hide-vertical-scrollbar { position: absolute; right: 0; width: 15px; height: 100%; background-color: red; }
/*****************************************************************************/
.vcol-md-1, .vcol-md-2, .vcol-md-3, .vcol-md-4, .vcol-md-5, .vcol-md-6, .vcol-md-7, .vcol-md-8, .vcol-md-9, .vcol-md-10, .vcol-md-11, .vcol-md-12 { float: left; position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; }
.vcol-md-12 { width: 100%; }
.vcol-md-11 { width: 91.66666667%; }
.vcol-md-10 { width: 83.33333333%; }
.vcol-md-9 { width: 75%; }
.vcol-md-8 { width: 66.66666667%; }
.vcol-md-7 { width: 58.33333333%; }
.vcol-md-6 { width: 50%; }
.vcol-md-5 { width: 41.66666667%; }
.vcol-md-4 { width: 33.33333333%; }
.vcol-md-3 { width: 25%; }
.vcol-md-2 { width: 16.66666667%; }
.vcol-md-1 { width: 8.33333333%; }
.vcol-md-offset-1 { margin-left: 8.33333333%; }
.vcol-md-offset-2 { margin-left: 16.66666667%; }
.vcol-md-offset-3 { margin-left: 25%; }
.vcol-md-offset-4 { margin-left: 33.33333333%; }
.vcol-md-offset-5 { margin-left: 41.66666667%; }
.vcol-md-offset-6 { margin-left: 50%; }
.vcol-md-offset-7 { margin-left: 58.33333333%; }
.vcol-md-offset-8 { margin-left: 66.66666667%; }
.vcol-md-offset-9 { margin-left: 75%; }
.vcol-md-offset-10 { margin-left: 83.33333333%; }
.vcol-md-offset-11 { margin-left: 91.66666667%; }
.vcol-md-offset-12 { margin-left: 100%; }
.vl-row { margin-right: -15px; margin-left: -15px; }
.vl-no-padding { padding-right: 0; padding-left: 0; }
.vl-no-padding-left { padding-left: 0; }
.vl-no-padding-right { padding-right: 0; }
.vl-text-right { text-align: right; }
.vl-text-center { text-align: center; }
.vl-pull-right { float: right; }
.vl-pull-right { float: right!important; }
.vl-center-block { aaadisplay: block; margin-right: auto; margin-left: auto; }
/*****************************************************************************/
.vl-main-nav { /*width: 250px;*/
width: 100px; overflow: hidden; }
.vl-main-nav-content { /* Hide scrollbar, assume 15px wide */
width: 113px; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
.vl-rooms { padding-right: 10px; padding-left: 10px; width: 100%; float: left; padding-top: 20px;}
.vl-room { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; width: 25%; float: left; }
/*
.vl-tiles
{
padding-right: 10px;
padding-left: 10px;
width: 100%;
float: left;
padding: 20px;
}

.vl-tile
{
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
width: 12.5%;
float: left;
}
*/
.vl-search { padding-left: 17px; padding-right: 15px; padding-top: 20px; width: 100%; float: left; zbackground-color: red; }
.vl-search-text { padding-left: 10px; padding-right: 20px; width: 83.33%; float: left; }
.vl-search-refine { padding-left: 10px; width: 16.67%; float: left; }
.vl-current-filters { padding-right: 10px; padding-left: 10px; width: 100%; float: left; }
.vl-tile-type { width: 100%; float: left; }
.vl-filters-heading { width: 75%; float: left; padding-right: 0px; }
.vl-filters-bottom-padding { width: 75%; float: left; padding-left: 10px; padding-right: 0px; }
.vl-filters-apply-filters { width: 25%; float: left; padding-left: 0px; padding-right: 20px; aaamargin-top: 35px; }
.vl-filters-desc { width: 100%; float: left; padding-left: 20px; padding-right: 20px; }
.vl-filter-set { width: 100%; float: left; padding-left: 10px; padding-right: 10px; }
.vl-filter-set-heading { padding-top: 20px; padding-bottom: 0px; padding-left: 10px; }
.vl-filter-set-line { width: 100%; float: left; padding-left: 10px; padding-right: 10px; }
.vl-filter-button-small { width: 16.66666666%; float: left; padding-left: 10px; padding-right: 10px; font-size: 16px; }
.vl-filter-button-medium { width: 25%; float: left; padding-left: 10px; padding-right: 10px; font-size: 16px; }
.vl-filter-button-large { width: 33.33333%; float: left; padding-left: 10px; padding-right: 10px; font-size: 16px; }
.current-filters { margin-left: 10px; }
.current-filters button { margin-right: 10px; margin-bottom: 10px; padding: 10px 14px; background-color: #1eb9a4; color: #fff; border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; text-align: center; line-height: normal; outline: none; cursor: pointer; color: #424a52; }
.current-filters button:hover { background-color: #e9da06; }
.vl-tile-popup-thumbnail { width: 50%; float: left; padding-left: 10px; padding-right: 10px; }
.vl-tile-popup-details { width: 41.66666667%; float: left; padding-left: 0px; padding-right: 0px; }
.vl-wishlists { width: 100%; float: left; padding-right: 10px; padding-left: 10px; }
.vl-wishlist-item-container { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; padding-bottom: 20px; width: 50%; float: left; }
.vl-wishlist-item { position: relative; min-height: 1px; padding-left: 0px; padding-right: 0px; width: 100%; float: left; }
.vl-wishlist-item-thumbnail { padding-left: 0px; padding-right: 0px; width: 33.3333%; float: left; }
.vl-wishlist-item-details { padding-left: 0px; xpadding-right: 10px; width: 50.66666667%; float: left; }
/*****************************************************************************/
.heading { font-size: 16px; }
.vit-worktops-cabinets-subheading { font-size: 14px; margin-left: 8px; clear: both; }
.vit-room-container button.close img { position: absolute; top: 20px; right: 10px; height: 30px; width: 30px; color: #fff; background-color: #444b51; opacity: 1; z-index: 10; }
.vit-room-container button.share img { position: absolute; top: 20px; left: 10px; height: 30px; width: 30px; color: #fff; background-color: #444b51; opacity: 1; z-index: 10; }
.vit-room-container button.email img { position: absolute; top: 20px; left: 43px; height: 30px; width: 30px; color: #fff; background-color: #444b51; opacity: 1; z-index: 10; }
.vit-room-container button.print img { position: absolute; top: 20px; left: 76px; height: 30px; width: 30px; color: #fff; background-color: #444b51; opacity: 1; z-index: 10; }
.vit-room { width: 100%; margin: 0 0 20px; cursor: pointer; }
.vit-room:hover {box-shadow: 0 0 0 4px #1eb9a4; opacity: .9;}
/* Stop otherwise iPad (others?) needs two taps if hover is used. */
.touch-device .vit-room:hover { opacity: 1.0; }
.vit-room.selected { box-shadow: 0 0 0 4px #1eb9a4; }
.vit-room.disabled { opacity: 0.3; cursor: default; }
/*
.vit-tile
{
width: 100%;
margin: 0 0 20px;
cursor: pointer;
}

.vit-tile.selected
{
box-shadow: 0 0 0 4px #1eb9a4;
}

.vit-tile.disabled
{
opacity: 0.3;
cursor: default;
}
*/
.vit-grout { width: 100%; margin: 0 0 20px; cursor: pointer; padding-bottom: 100%; border: 1px #7c868f solid; }
/* MOD: 01-Dec-2016
Add grout names. */
.vit-grout { margin: 0 0 0px; }
.vit-grout.v-dulux { padding-bottom: 62%; margin-bottom: 4px; border: 0px #7c868f solid; }
.v-dulux-text-container { position: absolute; left: 8px; top: 8px; width: 67px; height: 35px; pointer-events: none; /* Pass through to scene */
zbackground-color: yellow; }
.v-dulux-text { display: table-cell; vertical-align: bottom; font-size: 11px; line-height: 13px; width: 100%; height: 35px; zbackground-color: cyan; }
.v-dulux-text.v-dulux-text-colour-white { color: #eee; }
.vit-content-tiles .dulux-logo { margin-left: 572px; width: 100px; margin-bottom: 20px; }
.vit-grout-text { height: 35px; text-align: center; zzborder: 1px black solid; padding-top: 4px; margin: 0 0 10px; font-size: 12px; }
.vit-grout.selected { box-shadow: 0 0 0 4px #1eb9a4; }
/*****************************************************************************/
.vit-select-tile-overlay { position: absolute; left: 50%; top: 50%; width: auto; padding: 20px 20px 0px 20px; z-index: 99990; background-color: #fff; text-align: center; height: 145px; transform: translate(-50%, -50%); }
.vit-select-tile-overlay-text { margin-top: 25px; padding-bottom: 5px; margin-left: 15px; font-size: 18px; width: auto;}
.vit-select-tile-overlay-button { margin-left: 15px; font-size: 18px; text-align: center; color: white; background-color: #888; width: auto; cursor: pointer; }
.vit-select-tile-overlay button.close { position: absolute; top: 0; right: 0; height: 30px; width: 30px; color: #fff; background-color: #444b51; opacity: 1; }
.vit-select-tile-overlay button.close img { width: 100%; padding: 0; }
/*****************************************************************************/
.vit-select-tile-overlay-2 { position: absolute; left: 50%; top: 50%; width: 300px; padding: 20px 20px 0px 20px; z-index: 99990; border-bottom: 4px solid #1eb9a4; background-color: #fff; text-align: center; height: 145px; transform: translate(-50%, -50%); }
.vit-select-tile-overlay-text-2 { margin-top: 15px; padding-bottom: 5px; margin-left: 15px; font-size: 18px; width: 230px; zzbackground-color: yellow; }
.vit-select-tile-overlay-2 button.close { position: absolute; top: 0; right: 0; height: 30px; width: 30px; color: #fff; background-color: #444b51; opacity: 1; }
.vit-select-tile-overlay-2 button.close img { width: 100%; padding: 0; }
/*****************************************************************************/
.vit-startup-overlay { position: absolute; left: 50%; top: 50%; width: 590px; padding: 20px 20px 0px 20px; z-index: 99990; background-color: #EAEAEA; text-align: center; transform: translate(-50%, -50%); }
.mobile-device .vit-startup-overlay { top: 2%; }
.vit-startup-overlay-title { font-size: 18px; text-align: center; font-weight: 100; }
.mobile-device .vit-startup-overlay-title { font-size: 10px !important; text-align: center; font-weight: 100; }
.mobile-device .vit-startup-overlay p { font-size: 7px !important; text-align: center; }
.vit-startup-overlay-list { text-align: left; }
.mobile-device .vit-startup-overlay-list { font-size: 10px !important; }
.vit-startup-overlay .vit-help-link { text-decoration: underline; cursor: pointer; }
.vit-startup-overlay button.close { position: absolute; top: 0; right: 0; height: 30px; width: 30px; color: #000; background-color: #333333; opacity: 1; }
.vit-startup-overlay button.close img { width: 100%; padding: 0; }
.vit-get-started-image { margin-top: 10px; margin-bottom: 20px;}
.vit-get-started-button { margin-bottom: 20px; }
.vit-loading { position: absolute; margin: 0 auto; left: 0; right: 0; top: 40%; width: 200px; padding: 30px 0 20px 0; text-align: center; font-size: 16px; z-index: 99999; border: 3px solid black; background-color: #1eb9a4; }
.vit-message { position: absolute; margin: 0 auto; left: 0; right: 0; top: 40%; /*width: 200px;*/
width: 300px; padding: 10px 20px 10px 20px; text-align: center; font-size: 16px; z-index: 99999; border: 2px solid #F4F4F4; background-color: #fff; font-size: 17px; }
.vit-message img { padding-top: 10px; }
.vit-message p { padding-top: 10px; }
.vit-tool-message { position: absolute; margin: 0 auto; left: 0; right: 0; top: 10%; width: 600px; padding: 20px 20px 20px 20px; text-align: center; font-size: 14px; z-index: 99999; border: 4px solid #1eb9a4; background-color: #fff; }
.vit-loading .small-text { font-size: 12px; }
.vit-page-container { display: none; position: absolute; top: 0; margin: 0 auto; padding: 0; height: 100%; width: 100%; overflow: hidden; }
.vl-pane { width: 888px; /*overflow: hidden;*/ }
/*.vit-pane-container { float: left; pointer-events: all; -webkit-transform: translateZ(0); position: relative; height: 100%; display: block; margin: 0 auto;}*/
.vit-pane-container { position: absolute; left: 50%; height: 100%; transform: translate(-50%);}
.vit-pane-container .vit-content-pane { float: left; position: relative; height: 94%; top: 40px; /*background-color: #fff;*/
background-color: #ececec; overflow-y: auto; }
.vl-pane-content { width: 888px; /* Narrower by the parent's border width otherwise border appears in front of scrollbar */
overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.vit-hide-scrollbar { position: absolute; width: 15px; height: 100%; top: 0; right: 0; z-index: 99; }
.vit-scrollbar1 { background-color: #fff; }
.vit-scrollbar2 { background-color: #ececec; }
/*
img.vit-pane-tab
{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
height: 100px;
width: 40px;
cursor: pointer;
}
*/
.vit-pane-tab { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 50px; height: 140px; background-color: rgba(255, 0, 0, 0); }
.vit-pane-tab img { left: 0px; margin-top: 10px; width: 40px; height: 140px; cursor: pointer;}
.vit-pane-tab-top { position: absolute; right: 0px; width: 50px; height: 40px; background-color: rgb(30, 185, 164); text-align: center; cursor: pointer;}
.vit-pane-tab-top img { }
.vit-pane-container .vit-content-pane .heading { position: fixed; top: 0px; width: 100%; text-align: center; background-color: #1eb9a4; padding: 10px 20px; color: white; }
.vit-pane-container .vit-content-pane .contentheading { position: relative; text-align: center; padding: 20px; }
.vit-pane-container .vit-content-pane .menutab { padding: 6px 10px; background-color: #1eb9a4; color: white; cursor: pointer;}
.vit-pane-container .vit-content-pane .mainheading { position: fixed; top: 0px; width: 100%; text-align: center; background-color: #1eb9a4; padding: 10px 20px; color: white; }
.vit-commercial-rooms-sub-heading { position: relative; margin: 0 20px 15px 10px; text-align: center; }
.vit-content-rooms .rooms-empty { margin: 50px; }
/*
.vit-show-more button
{
width: 100%;
height: 30px;
text-align: center;
box-shadow: 1px 2px 1px #888;
background: #f1e60e;
background: linear-gradient(to bottom,#f1e60e 17%,#e6d605 73%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1e60e',endColorstr='#e6d605',GradientType=0);
margin-bottom: 20px;
}
*/
.vit-search { margin: 0 0 30px; }
.vit-search .vit-input-container { box-shadow: 0 0 0 1px #ececec; height: 32px; }
.vit-search .vit-input-container input { height: 30px; background: url(images/assets/magnifying-glass.svg) scroll 5px 3px no-repeat; background-size: 23px 23px; border: none; padding: 0 10px 0 30px; width: 100%; font-size: 14px; /*CJC*/
}
.vit-search p { padding: 20px 0 10px; }
/*
.vit-search button
{
width: 100%;
height: 38px;
text-align: center;
box-shadow: 0 0 0 1px #d9d9d9;
background-color: #fff;
}

.vit-search button 
{
width: 100%;
height: 30px;
text-align: center;
box-shadow: 1px 2px 1px #888;
background: #f1e60e;
background: linear-gradient(to bottom,#f1e60e 17%,#e6d605 73%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1e60e',endColorstr='#e6d605',GradientType=0);
}

.vit-search button:active
{
box-shadow: none;
}
*/
.vit-pane-container .vit-content-pane .refine { padding: 0 25px 0 10px; }
.vit-apply-filters { right: 0; }
/*
.vit-apply-filters button
{
zzbox-shadow: 0 0 0 1px #d9d9d9;
width: 100%;
height: 30px;
text-align: center;
box-shadow: 1px 2px 1px #888;
background: #f1e60e;
background: linear-gradient(to bottom,#f1e60e 17%,#e6d605 73%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1e60e',endColorstr='#e6d605',GradientType=0);
margin-bottom: 20px;
margin-top: 35px;
}

.vit-apply-filters button.bottom
{
margin-top: 15px;
}

.vit-apply-filters button:active
{
box-shadow: none;
}
*/
.vit-apply-filters div { margin-bottom: 20px; margin-top: 35px; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ YELLOW BUTTON START ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.ActionButton { font-family: Arial, Helvetica, sans-serif; color: #fff; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; cursor: pointer; border: 0; xxxpadding: 10px 0; padding: 7px 0; width: 100%; display: block; outline: none; background: #1eb9a4; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); position: relative; }
.ActionButton:hover { background: #1eb9a4; color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.ActionButton:active { background: #333; background-image: none; -moz-box-shadow: 0 0px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0px 1px rgba(0, 0, 0, 0.35); box-shadow: 0 0px 1px rgba(0, 0, 0, 0.35); top: 1px; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ YELLOW BUTTON END ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.vit-filter-sets button { width: 100%; height: 38px; margin: 7px 0; line-height: normal; text-align: center; box-shadow: 0 0 0 1px #d9d9d9; background-color: #fff; font-size: 14px; }
.vit-filter-sets button.disabled { opacity: 0.4; color: #424a52; cursor: default; text-decoration: line-through; background-color: #fff; }
.vit-filter-sets button.selected { color: #fff; background-color: #444b51; }
.vit-filter-set-divider { padding-top: 30px; height: 5px; width: 100%; border-bottom: 1px solid #d9d9d9; margin-bottom: 15px; }
.vit-content-wishlist { height: 100%; background-color: #ececec; }
.vit-content-wishlist-holder { background-color: #ececec; padding: 0px; }
.vit-content-wishlist .wishlist-empty { margin: 50px; }
.vit-wishlist-item { background-color: white; }
.vit-content-wishlist button.close { position: absolute; top: 0; right: 0; height: 30px; width: 30px; color: #fff; background-color: #444b51; opacity: 1; }
.vit-content-wishlist button.close img { width: 100%; padding: 0; }
.vit-content-wishlist img.thumbnail { width: 100%; aamargin: 20px; padding: 15px 10px 15px 15px; }
.vit-content-wishlist .normal-text { margin-top: 0; font-size: 16px; padding-top: 10px; }
.vit-content-wishlist .small-text { margin-top: -7px; font-size: 13px; margin-bottom: 0px; padding-bottom: 7px; }
.vit-content-wishlist .add-to-basket { wwidth: 100%; wbottom: 0; wleft: 0; }
.vit-content-wishlist .add-to-basket button { height: 40px; color: #424a52; background-color: #1eb9a4; }
.vit-content-basket { height: 100%; background-color: #ececec; }
.vit-content-basket-holder { background-color: #ececec; padding: 0px; }
.vit-content-basket button.pay { width: 100%; height: 30px; text-align: center; box-shadow: 1px 2px 1px #888; background: #f1e60e; background: linear-gradient(to bottom, #f1e60e 17%, #e6d605 73%);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1e60e', endColorstr='#e6d605', GradientType=0);
}
.vit-content-basket .table-heading { height: 25px; }
.vit-content-basket .basket-empty { margin: 50px; }
/*.main-pane-container .content-pane .basket .qty-space
{
margin: 5px;
}*/
.vit-content-basket button.pay { margin-bottom: 20px; }
.vit-content-basket button.pay:hover { background-color: #ececec; }
.vit-content-basket button.pay.selected { color: #fff; background-color: #444b51; }
.vit-content-basket .basket-item-container { margin: 10px 0 0 0; background-color: #ececec; height: 150px; }
.vit-content-basket .basket-item { background-color: #fff; }
.vit-content-basket .basket-item { padding: 20px; }
.vit-content-basket .basket-item button.close { position: absolute; top: 0; right: 0; height: 30px; width: 30px; color: #fff; background-color: #444b51; opacity: 1; }
.vit-content-basket img.thumbnail { width: 100%; }
.vit-content-basket .basket-item button.close img { width: 100%; padding: 0; }
.vit-content-basket .basket .table-heading { height: 25px; }
.vit-content-basket .number-input { width: 65px; border: 2px inset; padding: 1px; }
.vit-content-basket .refresh { margin: 0 auto; cursor: pointer; padding-top: 3px; text-align: left; width: 65px; }
.vit-content-basket .refresh img { width: 11px; height: 9px; display: inline-block; margin-right: 5px; }
.vit-content-basket .refresh span { text-decoration: underline; font-size: 10px; }
/*****************************************************************************/
.main-nav-container { float: left; /* CJC */
pointer-events: all; zzoverflow-x: hidden; zzoverflow-y: scroll; -webkit-overflow-scrolling: touch; position: relative; z-index: 1; -webkit-transform: translateZ(0); background-color: #424a52; height: 100%; border-right: 4px solid #1eb9a4; }
.main-nav { /*
position: relative;
float: left;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
width: 33.33333333%;

left: 0;
position: relative;
xxoverflow: hidden;
height: 100%;
*/
zzzoverflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; height: 100%; zzwidth: 100%; zzmin-height: 100%; color: #fff;/*overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
*/
}
/*
.main-nav-container .main-nav .logo
{
zzcursor: pointer;
width: 130px;
height: 83px;
display: block;
padding-right: 5px;
margin: 28px auto 23px;
}
*/
.main-nav-container .main-nav .logo { width: 180px; display: block; padding-right: 10px; margin: 8px auto 8px auto; }
.main-nav-container .main-nav .logo map area { outline: none; }
.main-nav-container .main-nav .logo img { width: 100px; }
/*****************************************************************************/
.main-nav-container .main-nav .menu-items { font-size: 10px; border-top: solid 1px #7c868f; }
.menu-item.v-basket-list p { color: #1eb9a4; }
.menu-item.v-basket-list .v-view-basket-total-container { text-align: center; }
.menu-item.v-basket-list .v-view-basket-total { position: absolute; margin-left: 150px; margin-top: 6px; width: 30px; height: 30px; border-radius: 100%; background-color: #CD2219; padding-top: 8px; font-size: 12px; color: white; }
.main-nav-container .main-nav .menu-items a { border-left: 0; border-right: 0; }
.main-nav-container .main-nav .menu-items a.menu-item, .main-nav-container .main-nav .menu-items a.sub-menu-item { position: relative; cursor: pointer; /*padding: 0 23px;*/
padding: 0 8px; height: 66px; width: 100%; z-index: 1; display: block; text-decoration: none; color: #fff; border-bottom: solid 1px #7c868f; }
.main-nav-container .main-nav .menu-items a.menu-item p, .main-nav-container .main-nav .menu-items a.sub-menu-item p { /* padding-top: 2px; padding-right: 15px; position: absolute; left: 53px;
left: 26px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); */}
.main-nav-container .main-nav .menu-items .fa-icon { float: left; margin-right: 10px; font-size: 1.6em; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.main-nav-container .main-nav .menu-items img.icon { float: left; xpadding-left: 23px; margin-right: 10px; width: 14px; height: 14px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.main-nav-container .main-nav .menu-items .menu-item.selected, .main-nav-container .main-nav .menu-items .sub-menu-item { background: #2c333a; }
.main-nav-container .main-nav .menu-items a.sub-menu-item { padding: 11px 30px; height: 42px; border-top-color: #424a52!important; border-bottom-color: #424a52!important; }
.main-nav-container .main-nav .menu-items .sub-menu-item:last-child { border-top-color: #424a52!important; border-bottom-color: #7c868f!important; }
.main-nav-container .main-nav .menu-items .menu-item:hover { background-color: #363f46; }
.main-nav-container .main-nav .menu-items .menu-item.selected { background-color: #2c333a; margin-left: 1px; }
.main-nav-container .main-nav .menu-items .sub-menu-item:hover { background-color: #1f252a; }
.main-nav-container .main-nav .menu-items .sub-menu-item.selected { color: #424a52; background-color: #fff; }
.main-nav-container .main-nav .web-link { display: table; margin: 0 auto; /*padding: 20px 0;*/
padding: 20px 10px 20px 0; text-align: center; font-size: 13px; color: #fff; }
.fa-angle-right:before { content: "\f105"; }
/*****************************************************************************/
.select-tile-modal { position: fixed; display: none; left: 0; top: 0; height: 225px; width: 450px; z-index: 100; box-shadow: 0 0 32px -1px rgba(0, 0, 0, 0.75); background-color: #fff; }
.select-tile-modal img { width: 100%; padding: 20px 10px; }
.select-tile-modal .details { padding: 20px 10px; }
.select-tile-modal .details .normal-text { font-size: 16px; padding-top: 0px; abackground-color: red; }
.select-tile-modal .details .small-text { margin-top: -7px; font-size: 11px; color: #979797; padding-bottom: 0px; }
.select-tile-modal .details .price { margin-top: -5px; }
.select-tile-modal .select-tile { width: 100px;/*
height: 30px;
text-align: center;
box-shadow: 1px 2px 1px #888;
background: #f1e60e;
background: linear-gradient(to bottom,#f1e60e 17%,#e6d605 73%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1e60e', endColorstr='#e6d605', GradientType=0);
*/
}
.select-tile-modal button.close { position: absolute; top: 0; right: 0; height: 30px; width: 30px; color: #fff; background-color: #444b51; opacity: 1; }
.select-tile-modal button.close img { padding: 0; }
/*****************************************************************************/
/*
Needed to add this so the scene could be relative which stopped the problem of the outlines
canvas having a gap at the bottom when the horizontal scroll bar appeared so the outlines
didn't appear overlaid exactly on the room image.
*/
.scene-container { top: 0; left: 0; position: absolute; width: 100%; height: 100%; }
.scene { top: 0; left: 0; position: relative; -webkit-overflow-scrolling: touch; overflow: auto; width: 100%; height: 100%; }
.scene .render { width: 100%; height: 100%; }
.outlines-canvas { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;/*opacity: 0.25;
background-color: blue;*/
}
/*****************************************************************************/
.tools-container.closeTools { right: -465px; }
.tools-container { pointer-events: all; position: absolute; z-index: 100; right: 0; /*  width: 466px;*/
zzwidth: 364px; width: 265px; bottom: 0; zzheight: 144px; height: 108px; border-left: 4px solid #1eb9a4; border-bottom: 4px solid #1eb9a4; }
.tools-container .gui-tools { position: relative; height: 100%; width: 100%; }
/*
.tools-container .gui-tools .tab {
  cursor: pointer;
  border-right: 4px solid #1eb9a4;
}

.tools-container .gui-tools .tab img {
  position: relative;
  top: 47px;
  height: 50px;
  width: 40px;
}
*/
.tools-container .gui-tools .thumb { /*  background-color: rgba(152,152,152,.8);*/
background-color: #7c868f; }
.tools-container .gui-tools .thumb .current-tile { float: left; display: inline-block; height: 102px; width: 102px; margin: 1px; background-color: #f1f1f1; }
.tools-container .current-tile { cursor: pointer; }
.tools-container .gui-tools .thumb .current-tile img { height: 100%; /*padding: 10px;*/
display: block; }
/* MOD: 25-Jun-2018 - Show current tile details.
.tools-container .gui-tools .thumb .current-tile div { */
.tools-container .gui-tools .thumb .current-tile div.vit-current-colour { width: 102px; height: 102px; /* margin: 10px;*/
display: block; }
/* MOD: 25-Jun-2018 - Show current tile details. */
.vit-current-tile-details { position: absolute; top: 38px; width: 132px; zzbackground-color: cyan; }
/* MOD: 25-Jun-2018 - Show current tile details. */
.v-toolbar-left-heading { cursor: pointer; }
.v-toolbar-left-heading-i { display: inline-block; font-weight: bold; border: 1px solid #000; border-radius: 42px; background-color: white; width: 15px; height: 15px; }
.tools-container .gui-tools .tool-container { float: left; display: inline-block; /*  width: 312px;*/
width: 156px; margin: 0px 0; }
.tools-container .gui-tools .tool-container .tool { cursor: pointer; text-align: center; line-height: 1.2em; font-size: 9px; float: left; margin: 1px; background-color: #424a52; color:white; zzheight: 64px; zzwidth: 50px; height: 50px; width: 50px; }
.tools-container .gui-tools .tool-container .tool .tool-img-container { width: 22px; zzmargin-left: 11px; margin-left: 10px; height: 24px; overflow: hidden; }
.tools-container .gui-tools .tool-container .tool .tool-img-container img { position: relative; width: 44px; padding: 5px; }
.tools-container .gui-tools .tool-container .tool:hover { background-color: #363f46; }
.tools-container .gui-tools .tool-container .tool:active { color: #fff; background-color: #424a52; }
.tools-container .gui-tools .tool-container .tool:active img { right: 0px; }
.tools-container .gui-tools .tool-container .tool.selected { color: #fff; background-color: #424a52; }
.tools-container .gui-tools .tool-container .tool.selected img { right: 17px; }
.tools-container .gui-tools .tool-container .tool.disabled { cursor: default; }
.tools-container .gui-tools .tool-container .tool.disabled:hover { background-color: #363f46; cursor: default; }
.tools-container .gui-tools .tool-container .tool span.disabled { color: #aaa; }
.tools-container .gui-tools .tool-container .tool img.disabled { opacity: 0.3; }
.tools-container .gui-tools .tool-container .tool.disabled:active img { right: 0px; }
/*
img.vit-tools-tab
{
position: absolute;
z-index: 100;
right: 466px;
bottom: 47px;
height: 50px;
width: 40px;
cursor: pointer;
}
*/
.vit-tools-tab { position: absolute; z-index: 100; right: 466px; bottom: 37px; width: 50px; height: 70px; background-color: rgba(255, 0, 0, 0); }
.vit-tools-tab img { left: 0px; margin-left: 10px; margin-top: 10px; width: 40px; height: 50px; cursor: pointer; }
/*****************************************************************************/
.modal-container { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.45); z-index: 900; }
.modal-container .modal-popup { position: absolute; height: 100%; width: 100%; top: 50%; left: 50%; }
.modal-container .modal-popup .heading { padding: 30px 0 5px; text-align: center; }
.modal-container .modal-popup .basket-margins { margin: 15px 0 25px; height: 56px; }
.modal-container .modal-popup button.close { position: absolute; top: 0; right: 0; height: 30px; width: 30px; color: #fff; background-color: #444b51; opacity: 1; }
.modal-container .modal-popup .modal-default-bkg { position: relative; height: 200px; width: 100px; top: -100px; left: -50px; display: block; background: #fff; border-bottom: 4px solid #1eb9a4; }
.modal-container .normal-text { font-size: 16px; }
.modal-container .modal-popup .basket, .modal-container .modal-popup .sample { height: 270px; width: 380px; top: -135px; left: -190px; }
.modal-container .modal-popup .basket .basket-btn { width: 189px; /*
height: 30px;
text-align: center;
box-shadow: 1px 2px 1px #888;
background: #f1e60e;
background: linear-gradient(to bottom,#f1e60e 17%,#e6d605 73%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1e60e', endColorstr='#e6d605', GradientType=0);
display: block;
*/
margin-right: auto; margin-left: auto; }
.modal-container .modal-popup .basket .close img { width: 100%; }
.modal-container .modal-popup .basket input { text-align: center; }
.modal-container .modal-popup .basket .number-input { width: 65px; border: 2px inset; padding: 1px; }
.modal-container .modal-popup .basket .basket-centre-or { margin-top: 33px; font-style: italic; }
.modal-container .modal-popup .pattern { /*height: 230px;
width: 350px;
top: -130px;
left: -175px;*/
height: 370px; width: 520px; top: -205px; left: -260px; }
.modal-container .modal-popup .pattern img { cursor: pointer; }
.modal-container .modal-popup .pattern .close img { width: 100%; }
.modal-container .modal-popup .pattern img.selected { border: 2px solid #1eb9a4; }
.modal-container .modal-popup .share { display: block; background: #fff; height: 150px; width: 380px; top: -75px; left: -190px; }
.modal-container .modal-popup .share .exporting, .modal-container .modal-popup .share .social-icon-container { width: 100%; }
.modal-container .modal-popup .share .exporting .icons, .modal-container .modal-popup .share .social-icon-container .icons { /*width: 148px;*/
width: 110px; }
.modal-container .modal-popup .share .exporting .icons img, .modal-container .modal-popup .share .social-icon-container .icons img { cursor: pointer; width: 34px; }
.modal-container .modal-popup .share .exporting .close img, .modal-container .modal-popup .share .social-icon-container .close img { width: 100%; }
.modal-container .modal-popup .share .exporting img:hover, .modal-container .modal-popup .share .social-icon-container img:hover { opacity: .8; }
.share-it button { width: 100%; height: 30px; text-align: center; box-shadow: 1px 2px 1px #888; background: #f1e60e; background: linear-gradient(to bottom, #f1e60e 17%, #e6d605 73%);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1e60e', endColorstr='#e6d605', GradientType=0);
margin-bottom: 20px; }
.modal-container .modal-popup .email { zzzzzzzzheight: 350px; height: 450px; width: 440px; zzzzzztop: -175px; top: -250px; left: -220px; }
.modal-container .modal-popup .email .input-full-width { width: 100%; }
.modal-container .modal-popup .email input { border: 1px #d8d8d8 solid; padding: 1px; }
.modal-container .modal-popup .email textarea { border: 1px #d8d8d8 solid; padding: 1px; overflow: auto; outline: none; resize: none; -aawebkit-box-shadow: none; -aamoz-box-shadow: none; aabox-shadow: none; dbackground-color: red; }
.modal-container .modal-popup .email .input-padding { padding: 17px 0; }
.modal-container .modal-popup .email .email-btn { zzzzzzmargin-top: 32px; margin-top: 0px; width: 100px; /*
height: 30px;
text-align: center;
box-shadow: 1px 2px 1px #888;
background: #f1e60e;
background: linear-gradient(to bottom,#f1e60e 17%,#e6d605 73%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1e60e', endColorstr='#e6d605', GradientType=0);
display: block;
*/
margin-right: auto; margin-left: auto; }
.modal-container .modal-popup .email .close img { width: 100%; }
.modal-container .modal-popup .email .gdpr-consent { padding-top: 20px; zzpadding: 10px 0 0 0; font-size: 12px; margin-bottom: 20px; }
.modal-container .modal-popup .email .gdpr-consent ul { padding-left: 20px; }
.modal-container .modal-popup .email .gdpr-consent input { margin-right: 5px; }
.modal-container .modal-popup .email .gdpr-consent a { color: #333; text-decoration: underline; }
.modal-container .modal-popup .email .email-btn.no-gdpr-consent { opacity: 0.5; }
/*****************************************************************************/
.vit-content-help .section-jump { cursor: pointer; text-decoration: underline; margin: 0; padding: 0; }
.vit-content-help img { display: block; margin-top: 7px; margin-bottom: 10px; zzzzzzzwidth: 615px; max-width: 615px; margin-left: auto; margin-right: auto; }
/*****************************************************************************/
.print-message { position: absolute; margin: 0 auto; left: 0; right: 0; top: 40%; width: 200px; padding: 30px 0 20px 0; text-align: center; font-size: 16px; z-index: 99999; border: 1px #444444 solid; border-bottom: 4px solid #1eb9a4; background-color: #fff; }
.print-header { padding-bottom: 10px; }
.print-title { font-size: 24px; font-weight: bold; text-align: center; margin: 0; }
.print-date { font-size: 14px; margin: 0; padding: 8px; }
.print-footer { padding-top: 10px; }
.print-logo img { width: 100%; }
.print-room-image { width: 100%; margin-bottom: 10px; }
.print-products-title { font-size: 16px; font-weight: bold; padding: 0; margin: 0; }
.printout-tiles-used-list .list { padding: 0; }
.printout-tiles-used-list .item { padding-top: 10px; padding-bottom: 10px; padding-left: 0; padding-right: 0; }
.printout-tiles-used-list img.thumbnail { width: 100%; margin: 0; padding: 0; }
.printout-tiles-used-list .normal-text { margin-top: 0; font-size: 16px; padding-top: 0px; }
.printout-tiles-used-list .small-text { margin-top: -7px; font-size: 13px; margin-bottom: 0px; padding-bottom: 7px; }
.vit-logo { cursor: pointer; text-align: center; height: 20px; margin: 10px auto 0 auto; padding: 12px 10px 12px 0; display: table; }
.vit-logo span { margin: 0; padding: 0; font-size: 11px; color: #fff; }
.vit-logo img { height: 25px; margin: 0; padding: 0; }
/*************************************************************/
.modal-container .modal-popup .range-basket-margins { min-height: 120px; zzbackground-color: blue; }
.modal-container .modal-popup .range-basket { margin-left: 141px; width: 692px; height: 560px; top: -280px; left: -346px; }
.modal-container .modal-popup .range-basket .basket-btn { width: 189px; margin-right: auto; margin-left: auto; }
.modal-container .modal-popup .range-basket .close img { width: 100%; }
.modal-container .modal-popup .range-basket input { text-align: center; }
.modal-container .modal-popup .range-basket .number-input { width: 65px; border: 2px inset; padding: 1px; }
.modal-container .modal-popup .range-basket .basket-centre-or { font-style: italic; }
.vit-tile-range-list { width: 100%; height: 390px; overflow-y: auto; }
.tile-range-col-tile-name { margin: 0; padding: 0; margin-left: 10px; width: 168px; zzbackground-color: cyan; }
.tile-range-col-tile { float: left; position: relative; margin: 0; padding: 0; margin-left: 25px; width: 138px; zzbackground-color: yellow; }
.tile-range-col-select { float: left; position: relative; margin: 0; padding: 0; width: 138px; zzbackground-color: cyan; }
.tile-range-col-price { float: left; position: relative; margin: 0; padding: 0; width: 138px; zzbackground-color: yellow; }
.tile-range-col-already-in-basket { float: left; position: relative; margin: 0; padding: 0; width: 276px; zzbackground-color: yellow; }
.tile-range-col-quantity { float: left; position: relative; margin: 0; padding: 0; width: 80px; zzbackground-color: cyan; }
.tile-range-col-percentage { float: left; position: relative; margin: 0; padding: 0; width: 138px; zzbackground-color: yellow; }
.tile-range-col-or { float: left; position: relative; margin: 0; padding: 0; width: 40px; zzbackground-color: yellow; }
.tile-range-col-coverage { float: left; position: relative; margin: 0; padding: 0; width: 80px; zzbackground-color: cyan; }
.tile-range-col-sample-already-in-basket { float: left; position: relative; margin: 0; padding: 0; width: 476px; zzbackground-color: yellow; }
.vit-range-basket-heading { height: 30px; }
.vit-tile-range-tile-name { aamargin-left: 0%; aawidth: 100%; font-size: 13px; font-style: italic; }
.vit-tile-range-thumbnail { aamargin-left: 40%; width: 50%; }
.vit-tile-range-tick { cursor: pointer; }
.vit-tile-range-top-align { margin-top: 22px; }
.modal-container .modal-popup .range-basket-add { margin: 15px 0 0; zzheight: 56px; }
.range-basket-disabled { opacity: 0.3; zzcursor: default; }
.range-disabled { opacity: 0.3; }
.range-tick-disabled { cursor: default; }
.range-add-basket-disabled { opacity: 0.3; cursor: default; }
/*************************************************************/
.modal-container .modal-popup .range-samples-margins { min-height: 120px; zzbackground-color: yellow; }
.modal-container .modal-popup .range-samples { margin-left: 141px; width: 580px; height: 560px; top: -280px; left: -290px; }
.modal-container .modal-popup .range-samples .basket-btn { width: 189px; margin-right: auto; margin-left: auto; }
.modal-container .modal-popup .range-samples .close img { width: 100%; }
.vit-range-samples-heading { padding-left: 65px; height: 30px; }
.vit-range-samples-list { padding-left: 65px; width: 100%; height: 390px; overflow-y: auto; zzbackground-color: cyan; }
/*************************************************************/
.modal-container .modal-popup .tiling-range-or-single-margins { height: 50px; zzbackground-color: yellow; }
.modal-container .modal-popup .tiling-range-or-single { margin-left: 141px; width: 500px; height: 180px; top: -90px; left: -250px; }
.modal-container .modal-popup .tiling-range-or-single .basket-btn { width: 400px; margin-right: auto; margin-left: auto; }
.modal-container .modal-popup .tiling-range-or-single .close img { width: 100%; }
.modal-container .modal-popup .tiling-range-margins { min-height: 120px; zzbackground-color: yellow; }
.modal-container .modal-popup .tiling-range { margin-left: 141px; width: 580px; height: 580px; top: -290px; left: -290px; }
.modal-container .modal-popup .tiling-range .basket-btn { width: 189px; margin-right: auto; margin-left: auto; }
.modal-container .modal-popup .tiling-range .close img { width: 100%; }
.modal-container .modal-popup .tiling-range input { text-align: center; }
.modal-container .modal-popup .tiling-range .number-input { width: 65px; border: 2px inset; padding: 1px; }
.vit-tiling-range-heading { padding-left: 65px; height: 30px; }
.modal-tiling-range .heading .sub-heading { font-size: 13px; }
.vit-tiling-range-list { padding-left: 65px; width: 100%; height: 390px; overflow-y: auto; zzbackground-color: cyan; }
.vit-tiling-range-error-message { padding-top: 4px; text-align: center; font-size: 12px; color: red; }
/*************************************************************/
.modal-container .modal-popup .decorate-options-margins { height: 50px; wwbackground-color: green; }
.modal-container .modal-popup .decorate-options { width: 300px; height: 180px; top: -110px; left: -150px; }
.modal-container .modal-popup .decorate-options .basket-btn { width: 200px; margin-right: auto; margin-left: auto; }
.modal-container .modal-popup .decorate-options .close img { width: 100%; }
.decorate-tile-zone-text { font-size: 85%; padding-top: 10px; margin-left: 10px; margin-right: 10px; }
/*****************************************************************************/
.vit-webgl-overlay { position: absolute; left: 50%; margin-left: -250px; top: 20%; width: 500px; padding: 20px; z-index: 99990; border-bottom: 4px solid #1eb9a4; background-color: #fff; }
.vit-webgl-overlay-title { font-size: 18px; text-align: center; }
.vit-webgl-overlay button.close { position: absolute; top: 0; right: 0; height: 30px; width: 30px; color: #fff; background-color: #444b51; opacity: 1; }
.vit-webgl-overlay button.close img { width: 100%; padding: 0; }
.vit-webgl-overlay-margins { margin-top: 10px; margin-right: auto; margin-left: auto; width: 200px; height: 32px; text-align: center; }
.vit-small-text { font-size: 11px; }
/*************************************************************/
.save-saved-rooms-to-disk { z-index: 99999; display: none; padding: 10px; }
/*****************************************************************************/
.vit-styles-overlay { position: absolute; left: 50%; margin-left: -250px; /* Left panel hides so normal full width centre. */
top: 20%; width: 500px; padding: 20px; z-index: 99990; border-bottom: 4px solid #1eb9a4; background-color: #fff; }
.vit-styles-overlay-title { font-size: 18px; text-align: center; }
.vit-styles-overlay button.close { position: absolute; top: 0; right: 0; height: 30px; width: 30px; color: #fff; background-color: #444b51; opacity: 1; }
.vit-styles-overlay button.close img { width: 100%; padding: 0; }
.style-tile-modal { position: fixed; display: none; left: 50%; margin-left: -225px; top: 5%; bottom: auto; height: 225px; width: 450px; z-index: 100; box-shadow: 0 0 32px -1px rgba(0, 0, 0, 0.75); background-color: #fff; }
.style-tile-modal img { width: 100%; padding: 20px 10px; }
.style-tile-modal .details { padding: 20px 10px; }
.style-tile-modal .details .normal-text { font-size: 16px; padding-top: 0px; abackground-color: red; }
.style-tile-modal .details .small-text { margin-top: -7px; font-size: 11px; color: #979797; padding-bottom: 0px; }
.style-tile-modal .details .price { margin-top: -5px; }
.style-tile-modal .vl-tile-popup-details { width: 50%; float: left; padding-left: 0px; padding-right: 0px; }
/******************************************************/
.vit-grout-sub-heading { position: relative; margin: 0 20px 15px 10px; text-align: center; }
/*************************************/
/* Revised Designs - From March 2016 */
/*************************************/
.vit-room { margin-bottom: 20px; border: 1px solid #ccc; }
.v-select-room-button { width: 100%; height: 40px; color: white; margin-bottom: 20px; padding-top: 12px; background-color: #2c333a; cursor: pointer; font-size: 13px; text-align: center; }
.v-select-room-button:hover { background-color: #1f252a; }
.v-select-room-button:hover { background-color: #1f252a; }
.v-view-room-button { float: left; width: 48%; height: 40px; color: white; margin-bottom: 20px; padding-top: 12px; background-color: #2c333a; cursor: pointer; font-size: 13px; text-align: center; }
.v-view-tiles-used-button { float: left; margin-left: 4%; width: 48%; height: 40px; color: white; margin-bottom: 20px; padding-top: 12px; background-color: #2c333a; cursor: pointer; font-size: 13px; text-align: center; }
.vit-room.selected { box-shadow: none; }
.v-room-selector.selected { box-shadow: 0 0 0 0px #1eb9a4; }
.v-select-room-back { position: fixed; top: 0px; font-size: 13px; cursor: pointer; z-index: 1; color: #fff; background-color: #34a797; padding: 10px 20px;  }
/*************************************/
.main-nav-container .main-nav .menu-items span.icon2 { float: left; margin-right: 10px; width: 15px; height: 15px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-repeat: no-repeat; background-position: -15px 0px; zzbackground-size: contain; background-size: 30px 15px; }
.main-nav-container .main-nav .menu-items .menu-item.selected { background-color: white; color: #424a52; }
.main-nav-container .main-nav .menu-items .menu-item.selected span.icon2 { background-position: 0px 0px; }
.main-nav-container .main-nav .menu-items span.icon2.v-main-item-rooms { background-image: url(images/assets/icon_menu_select_a_room.png); }
.main-nav-container .main-nav .menu-items span.icon2.v-main-item-decorate { background-image: url(images/assets/icon_menu_decorate_your_room.png); }
.main-nav-container .main-nav .menu-items span.icon2.v-main-item-favourites { background-image: url(images/assets/icon_menu_your_favourites.png); }
.main-nav-container .main-nav .menu-items span.icon2.v-main-item-tiles-used { background-image: url(images/assets/icon_menu_view_tiles_used.png); }
.main-nav-container .main-nav .menu-items span.text-not-icon2 { float: left; margin-right: 10px; width: 14px; height: 14px; position: absolute; top: 14px; font-size: 110%; }
/*************************************/
.vit-content-rooms-type { top: 0px; height: 100%; background-color: #ececec; }
.vit-content-rooms-type .heading { margin-top: 0 !important; padding: 40px 0 10px; }
.vl-room-type { position: relative; height: 200px; padding-right: 10px; padding-left: 10px; width: 25%; float: left;}
.v-room-type-selector { height: 180px; text-align: center; margin-bottom: 20px; background-color: white; cursor: pointer; }
.v-room-type-selector .heading { padding: 25px 0 10px; }
.vit-room-type { width: 70%; margin: 33px 0 0 0; }
.v-room-type-selector:hover { background-color:#1db9a4; color:#fff }
/* Stop otherwise iPad (others?) needs two taps if hover is used. */
.touch-device .vit-room-type:hover { opacity: 1.0; }
.v-room-type-selector:hover { opacity: .9; }
.v-select-room-type-button { width: 100%; height: 40px; color: white; zzmargin-bottom: 20px; padding-top: 12px; background-color: #2c333a; cursor: pointer; font-size: 13px; text-align: center; }
/*************************************/
.vit-content-rooms-type { top: 0px; height: 100%; background-color: #ececec; }
.vit-content-tile-type .heading { margin-top: 0 !important; padding: 40px 0 10px; }
.vl-tile-type { position: relative; zzheight: 175px; padding-right: 10px; padding-left: 10px; width: 25%; float: left; zbackground-color: yellow; }
.v-tile-type-selector { height: 200px; text-align: center; margin-bottom: 20px; background-color: white; cursor: pointer; }
.v-tile-type-selector .heading { padding: 25px 0 10px; }
.vit-tile-type { zzwidth: 100%; margin: 0 0 33px; }
.vit-tile-type:hover { zzopacity: .9; }
/* Stop otherwise iPad (others?) needs two taps if hover is used. */
.touch-device .vit-tile-type:hover { opacity: 1.0; }
.v-tile-type-selector:hover { opacity: .9; }
.v-select-tile-type-button { width: 100%; height: 40px; color: white; zzmargin-bottom: 20px; padding-top: 12px; background-color: #2c333a; cursor: pointer; font-size: 13px; text-align: center; }
/*************************************/
.v-select-tile-back { position: fixed; top: 0px; font-size: 13px; cursor: pointer; z-index: 1; color: #fff; background-color: #43a99b; padding: 12px 20px; }
.vl-colour { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; width: 12.5%; float: left; }
.vl-colour.v-dulux { position: relative; padding-right: 2px; padding-left: 2px; }
.vl-tiles { padding-right: 10px; padding-left: 10px; width: 100%; float: left; padding: 20px }
.vl-tile-container { position: relative; margin-bottom: 10px; width: 16.6%; height: 180px; float: left; /* MOD: 22-Jun-2018 - Adjusted tile thumbnail popup system. */
}
/* MOD: 22-Jun-2018 - Adjusted tile thumbnail popup system. */
.vit-show-hover-thumbnail-data {position: absolute; top: 30px; width: 100%; background-color: cyan;}
/* MOD: 22-Jun-2018 - Adjusted tile thumbnail popup system. */
.vit-hover-select-tile {position: absolute; top: 107px; margin-left: -5px; left: 13.5%; width: 80%;}
.vl-tile-container.v-no-details { height: 120px;}
.vl-tile-container.v-worktops-cabinets { width: 20%;}
.vl-tile { position: relative; min-height: 1px; margin-left: 5px; margin-right: 5px; margin-bottom: 10px; height: 100%; float: left; border: 1px solid #dcdcdc; background-color: white; cursor: pointer; }
.vit-tile { padding: 12px; width: 100%}
.vit-tile.v-worktops-cabinets { padding-top: 0px; padding-left: 0px; padding-right: 0px; }
.vl-tile.selected { box-shadow: 0 0 0 1px #1eb9a4;}
.vit-tile.disabled { opacity: 0.3; cursor: default;}
.vit-tile-details { font-size: 12px; text-align: center; /* MOD: 22-Jun-2018 - Adjusted tile thumbnail popup system. */
padding: 0 5px; width: 100%; }
.vit-tile-details p { margin-bottom: 2px; }
.vit-tiles-found { margin-left: 15px; float: left; margin-bottom: 20px; }
.vit-tiles-pages { margin-right: 15px; float: right; }
.vit-tiles-pages a { text-decoration: none; color: #333; }
.vit-tiles-pages .page-prev { cursor: pointer; }
.vit-tiles-pages .page-next { cursor: pointer; }
.vit-tiles-pages .page-num { cursor: pointer; }
.vit-tiles-pages .page-num.selected { background-color: #1eb9a4; }
/*************************************/
.vl-search-text { padding-left: 0px; padding-right: 0px; width: 100%; zzfloat: left; }
.vl-search-refine { padding-left: 16px; width: 50%; text-align: center;}
.vit-search .vit-input-container { position: relative; box-shadow: 0 0 0 1px #dcdcdc; height: 32px; background-color: white; width: 50% }
.vit-search .vit-input-container input { height: 30px; background: url(images/assets/magnifying-glass.svg) scroll 5px 3px no-repeat; background-size: 23px 23px; border: none; padding: 0 50px 0 10px; width: 100%; font-size: 14px; background-position: right; /* In case below format is not supported */
background-position: right 20px top 5px; }
.vit-search .vit-input-container .vit-search-button { position: absolute; right: 10px; top: 0px; width: 45px; height: 32px; /*background-color: rgb(0,0,0,0);*/
cursor: pointer; }
.vit-search-results { width: 100%; margin-top: 15px; text-align: center; float: left; }
.vit-search-results .vit-clear-search { font-size: 12px; text-decoration: underline; cursor: pointer; }
.vit-content-tiles { position: relative; }
.vit-search-in-progress { position: absolute; width: 100%; top: 250px; text-align: center; }
.vl-filters-heading { width: 100%; }
.vl-filters-apply-filters { width: 100%; text-align: center; padding-left: 20px; margin-bottom: 20px; }
.vl-filters-desc { margin-bottom: 20px; }
.filter-button {  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background-color: #f5e517; padding: 7px 15px; color: #424a52; font-size: 13px; border: none; outline: none; width: 100% }
.filter-button:hover { cursor: pointer; background-color: #e9da06; }
.filter-button:active { position: relative; top: 1px; }
/*************************************/
.v-toolbar-left-heading { width: 130px; height: 18px; padding-top: 2px; margin-left: -4px; margin-top: -18px; text-align: center; font-size: 9px; color: #fff; background-color: #1eb9a4; }
.v-toolbar-heading { width: 160px; height: 18px; padding-top: 2px; margin-left: 125px; margin-top: -18px; text-align: center; font-size: 10px; color: #fff; background-color: #1eb9a4; }
/*****************************************************************************/
.v-quick-edit-heading { width: 100%; height: 18px; padding-top: 2px; text-align: center; font-size: 10px; color: #fff; background-color: #1eb9a4; }
.quick-edits-container { pointer-events: all; position: absolute; z-index: 100; right: 0; zzwidth: 481px; zzwidth: 414px; width: 110px; top: 0; /*height: 96px;*/
z-index: 0; border-left: 4px solid #1eb9a4; border-bottom: 4px solid #1eb9a4; }
.quick-edits-container .gui-tools { position: relative; height: 100%; width: 100%; }
.quick-edits-container .gui-tools .thumb { /*  background-color: rgba(152,152,152,.8);*/
background-color: #7c868f; }
.quick-edits-container .gui-tools .quick-edit-container { float: left; display: inline-block; /*  width: 312px;*/
zzwidth: 376px; width: 104px; margin: 1px; }
.quick-edits-container .gui-tools .quick-edit-container .tool { cursor: pointer; text-align: center; line-height: 1.2em; font-size: 9px; float: left; margin: 1px; background-color: #424a52; zzheight: 64px; zzwidth: 50px; height: 50px; width: 50px; color: white; }
.quick-edits-container .gui-tools .quick-edit-container .tool .tool-img-container { width: 22px; zzmargin-left: 11px; margin-left: 10px; height: 24px; overflow: hidden; }
.quick-edits-container .gui-tools .quick-edit-container .tool .tool-img-container img { position: relative; width: 44px; padding: 5px; }
.quick-edits-container .gui-tools .quick-edit-container .tool:hover { background-color: #363f46; }
.quick-edits-container .gui-tools .quick-edit-container .tool:active { color: #fff; background-color: #424a52; }
.quick-edits-container .gui-tools .quick-edit-container .tool:active img { right: 17px; }
.quick-edits-container .gui-tools .quick-edit-container .tool.selected { color: #fff; background-color: #424a52; }
.quick-edits-container .gui-tools .quick-edit-container .tool.selected img { right: 17px; }
.quick-edits-container .gui-tools .quick-edit-container .tool.disabled { cursor: default; }
.quick-edits-container .gui-tools .quick-edit-container .tool.disabled:hover { background-color: #363f46; cursor: default; }
.quick-edits-container .gui-tools .quick-edit-container .tool span.disabled { color: #aaa; }
.quick-edits-container .gui-tools .quick-edit-container .tool img.disabled { opacity: 0.3; }
.quick-edits-container .gui-tools .quick-edit-container .tool.disabled:active img { right: 0px; }
.quick-edits-container .gui-tools .quick-edit-container .v-view-basket-total { position: absolute; margin-left: 27px; margin-top: -50px; width: 20px; height: 20px; border-radius: 100%; background-color: #CD2219; padding-top: 4px; font-size: 8px; color: white; }
.vit-quick-edits-tab { position: absolute; z-index: 100; right: 466px; top: 22px; width: 50px; height: 70px; background-color: rgba(255, 0, 0, 0); z-index: 0; }
.vit-quick-edits-tab img { left: 0px; margin-left: 10px; margin-top: 10px; width: 40px; height: 50px; cursor: pointer; }
/*************************************/
.vit-content-wishlist .add-to-basket button { height: 40px; color: white; background-color: #2c333a; font-size: 13px; }
.vit-wishlist-item .small-text { font-size: 11px; color: #979797; margin-bottom: 5px; }
.vit-wishlist-item .price { margin-top: -5px; }
.vit-wishlist-item { height: 170px; }
/*************************************/
.vl-tiles-useds { width: 100%; float: left; padding-right: 10px; padding-left: 10px; }
.vl-tiles-used-item-container { position: relative; min-height: 1px; padding: 20px;  width: 50%; float: left; }
.vl-tiles-used-item { position: relative; min-height: 1px; padding-left: 0px; padding-right: 0px; width: 100%; float: left; }
.vl-tiles-used-item-thumbnail { padding-left: 0px; padding-right: 0px; width: 33.3333%; float: left; }
.vl-tiles-used-item-details { padding-left: 0px; xpadding-right: 10px; width: 50.66666667%; float: left; }
.vit-content-tiles-used { height: 100%; background-color: #ececec; }
.vit-content-tiles-used-holder { background-color: #ececec; padding: 0px; }
.vit-content-tiles-used .tiles-used-empty { margin: 50px; }
.vit-tiles-used-item { background-color: white; }
.vit-content-tiles-used button.close { position: absolute; top: 0; right: 0; height: 30px; width: 30px; color: #fff; background-color: #444b51; opacity: 1; }
.vit-content-tiles-used button.close img { width: 100%; padding: 0; }
.vit-content-tiles-used img.thumbnail { width: 100%; aamargin: 20px; padding: 15px 10px 15px 15px; }
.vit-content-tiles-used .normal-text { margin-top: 0; font-size: 16px; padding-top: 10px; }
.vit-content-tiles-used .small-text { margin-top: -7px; font-size: 13px; margin-bottom: 0px; padding-bottom: 7px; }
.vit-content-tiles-used .add-to-basket { width: 48%; }
.vit-content-tiles-used .add-to-basket button { height: 40px; color: #424a52; background-color: #1eb9a4; }
.vit-content-tiles-used .add-to-basket button { height: 40px; color: white; background-color: #2c333a; font-size: 13px; }
.vit-content-tiles-used .add-to-favourites { margin-left: 4%; width: 48%; }
.vit-content-tiles-used .add-to-favourites { /*  margin-left: 0;
  width: 100%;*/
}
.vit-content-tiles-used .add-to-favourites button { height: 40px; color: #424a52; background-color: #1eb9a4; }
.vit-content-tiles-used .add-to-favourites button { height: 40px; color: white; background-color: #2c333a; font-size: 13px; }
.vit-tiles-used-item .small-text { font-size: 11px; color: #979797; margin-bottom: 5px; }
.vit-tiles-used-item .price { margin-top: -5px; }
.vit-tiles-used-item { height: 170px; }
/*************************************/
.modal-container .modal-popup .save-room-changes-yn { zzmargin-left: 141px; width: 500px; height: 180px; top: -90px; left: -250px; }
.modal-container .modal-popup .save-room-changes-yn .v-text { text-align: center; margin: 0 50px 20px 50px; }
.modal-container .modal-popup .save-room-changes-yn-margins { height: 50px; text-align: center; }
.modal-container .modal-popup .save-room-changes-yn .basket-btn { display: inline-block; width: 60px; margin: 0 5px; }
.modal-container .modal-popup .save-room-changes-yn .close img { width: 100%; }
/*************************************/
.modal-container .modal-popup .area-options { zzmargin-left: 141px; width: 530px; height: 220px; top: -110px; left: -265px; }
.modal-container .modal-popup .area-options-margins { height: 50px; text-align: center; }
.modal-container .modal-popup .area-options .area-options-margins div { display: inline-block; margin: 0 10px; }
.modal-container .modal-popup .area-options .area-options-margins div img { cursor: pointer; }
.modal-container .modal-popup .area-options .area-options-margins div p { margin-top: 10px; font-size: 12px; }
.modal-container .modal-popup .area-options .close img { width: 100%; }
/*************************************/
.modal-container .modal-popup .rhomba-patterns { width: 530px; height: 190px; top: -110px; left: -265px; }
.modal-container .modal-popup .rhomba-patterns .rhomba-patterns-margins div { display: inline-block; margin: 0 10px; }
.modal-container .modal-popup .rhomba-patterns .rhomba-patterns-margins div img { cursor: pointer; }
.modal-container .modal-popup .rhomba-patterns .close img { width: 100%; }
.modal-tiling-range .rhomba-tile-pattern { position: absolute; margin-left: -10px; margin-top: 65px; }
.v-rhomba-tile-slot-up { position: absolute; margin-left: 58px; margin-top: -61px; font-size: 32px; cursor: pointer; background-color: yellow; }
.v-rhomba-tile-slot-down { position: absolute; margin-left: 58px; margin-top: -2px; font-size: 32px; cursor: pointer; background-color: yellow; }
/*************************************/
/* MOD: 22-Jun-2018 */
.vit-highlight-tiles-used { color: #1eb9a4; }
/*************************************/
.PWR-logo { position: relative; width: 150px; height: 25px; left: 0; right: 0; margin-left: 19px; margin-right: auto; bottom: 0px; margin-top: 20px; font-family: Sans-Serif; font-size: 11px; font-weight: 100; text-decoration: none; letter-spacing: 0.02rem; }
.PWR-logo a { color: #ffffff; opacity: 0.7; }
/*.vit-logo
{
cursor: pointer;
text-align: center;
height: 20px;
margin: 10px auto 0 auto;
padding: 12px 10px 12px 0;
display: table;
}

.vit-logo span
{
margin: 0;
padding: 0;
font-size: 11px;
color: #fff;
}

.vit-logo img
{
height: 25px;
margin: 0;
padding: 0;

*/
.v-sel-menu { font-family: Arial, Helvetica, sans-serif; color: #fff; font-size: 12px; font-weight: bold; text-align: center; cursor: pointer; padding: 4px 8px; background-color: #000; }