body {
-webkit-overflow-scrolling: touch; 
margin: 0;
padding:0;

color:#EEEEEE;
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont,'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans','Droid Sans', 'Helvetica Neue', sans-serif;

background: #242F35;
}

.multiroom {background-color:#333D46;}


.sys1 {display:inline-block;position:absolute;}
.sys2 {position:absolute;top:-20px;left:-40px;background-color:rgba(0,0,0,0.5);text-align:center;font-size:8pt;border-radius:8px;color:white;padding:1px 5px;}

.sonancelogo {
background:url('/images/Sonance_Light.png') center center no-repeat;background-size:contain;width:300px;margin:0 auto;
}
#popupmenu {display:none;}
#popupmenu.ui-dialog-content {display:block;}
.card {display:inline-block;padding:10px;text-align:center;}
.product_price {font-size:0.75em;opacity:0.7;text-align:center;margin-bottom:5px;}
.product_title {font-size:1em;text-align:center;}
.surround_room_name {font-size:1.3em;text-align:center;margin:10px;}
.product_roomtitle {text-align:center;font-size:1.25em;opacity:0.7;padding:5px 10px;background-color:rgba(0,0,0,0.1);}
.product_roomtitle:not:first-child {margin-bottom:20px;}


.moreinfolink {text-decoration:none;display:inline-block;background-color:#00A3E1;padding:2px 10px;margin:2px 5px;border-radius:3px;font-size:0.9em;color:rgba(255,255,255,1) !important;}
.moreinfolink i {color:rgba(255,255,255,1) !important;}
.moreinfolink:hover {color:rgba(255,255,255,0.7) !important;}

.results h2 {margin:0;padding:0 0 10px 0;}
.spacerheight {height:30px;}
.product_image {max-width:200px;max-height:150px;width:auto;height:auto;}
.product_wrap {float:left;display:inline-block;margin:10px;}
.roomwrap {border:2px solid #495C6D;padding:10px;border-radius:5px;}
.sitewidth {width:100%;max-width:720px;margin:0 auto;;}
.tl {text-align:left;}
.tr {text-align:right;}
.tc {text-align:center;}
.dc {margin:0 auto;}
.b0 {border:0;}
.b1b {border:1px solid black;}
img {border:0;margin:0;padding:0;}
.p {cursor:pointer;}
table, table tr td, table tr th, table tr, tbody {margin:0;padding:0;}
.tdp1 td {padding:1px;}
.tdp2 td {padding:2px;}
.tdp3 td {padding:3px;}
.tdp5 td {padding:5px;}
.tdp10 td {padding:10px;}
.abs {position:absolute;}
.cb {clear:both;}
.vt {vertical-align:top;}
.vm {vertical-align:middle;}
.vb {vertical-align:bottom;}
.w100 {width:100%;}
.dib {display:inline-block;}
.sw {max-width:720px;}
.swp {padding-left:10px;padding-right:10px;}

a:link, a:visited {color:#00A3E1;}
a:hover, a:active {color:#45C4F3;}


a:link i.icon-tag, a:link i.fas, a:visited i.fas, a:link i.fab, a:visited i.icon-tag, a:visited i.fab  {color:gray;transition: color 0.5s ease;}
a:hover i.icon-tag, a:hover i.fas, a:active i.fas, a:hover i.fab, a:active i.fab {color:#383838;transition: color 0.5s ease;}
h2 {text-align:center;font-weight:normal;letter-spacing:1px;}
.line {display:inline-block;float:right;background-color:gray;padding:0 5px;border-radius:5px;line-height:12px;color:white;font-weight:normal;font-size:7pt;font-family:Arial;}
.boxalert {background-color:white;
    border: 2px solid #98a0a6;
    border-radius: .4rem;
    color: #000000;
    display: block;
    font-size: 12pt;
    padding: 1rem;
    width: 100%;}

/* Sonance Blue: #00A3E1  Sonance Dark Gray: #333F48  My Different shade of gray: #5F666B Sonance Light Gray: #D9D9D6 */
/* TOP GRAY BAR */
.header {color:#313131;padding:10px;text-align:center;background-color:#242F35;box-shadow:0 0 5px #242F35;}
.header h1 {font-size: 13pt;
    text-align: center;
    display: inline-block;
    margin: 3px;
    padding: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color:#373737;
	text-shadow: 0 0 rgba(0,0,0,0.2);
}
.header {position:relative;z-index:9;}
/* TOP GRAY BAR */

/* SUB NAV */
.topbar {position:relative;z-index:8;background-color:#F7F7F7;border-bottom:1px solid #D9D9D9;color:#878787;box-shadow:0 0 5px 0 rgba(0,0,0,0.1);text-align:center;}

.topbar div[class*='col'] { 
	text-align:center;
	font-size:9pt;
	color:silver;
	font-family:'Montserrat', -apple-system, BlinkMacSystemFont,'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans','Droid Sans', 'Helvetica Neue', sans-serif;
	cursor:pointer;
	padding-top:15px;
	padding-bottom:1px;
	transition:all 0.5s ease;
	line-height:12px;
}
.topbar div[class*='col'] table {margin:0 auto;}
.topbar div[class*='col'] i {font-size:14pt;}
.topbar div[class*='col']:hover {background-color:#EEEEEE;color:#878787;}
.topbar div.on[class*='col'] {background-color:#E2E2E2;color:#00A3E1;}
/* SUB NAV */


/* ZONES */

.droppable {

}
.draggable {

}
.ui-droppable {}

.ui-droppable-hover { 

}

.dropmain {}

.dropsub.zonegrouphover {
	border-radius:10px;
	margin:5px;
	display:inline-block;
	padding:10px;
	border:2px solid #242F35;
	background-color:rgba(100,173,241,0.4);
	box-shadow:0 0 5px 0 rgba(0,0,0,0.4);
}
.roomdoticon i.fas, .roomdoticon i.far {color:white;transition:all 0.3s ease-in-out;}


.zonegroup {
	vertical-align:top;
	transition:all 0.3s ease-in-out;
	border-radius:10px;
	margin:5px;
	display:inline-block;
	padding:10px;
	min-width:104px;
	min-height:113px;
	border:2px solid #242F35;
	background-color:rgba(73,87,101,0.9);
	box-shadow:0 0 5px 0 rgba(100,100,100,0.1);
}

.dropsub.zonegroupon {
	border-radius:10px;
	margin:5px;
	display:inline-block;
	padding:10px;
	border:2px solid white;
	background-color:rgba(100,173,241,0.2);
	box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
}
.dropmain.zonegroupon, .hidegroup {
	vertical-align:top;
	transition:all 0.3s ease-in-out;
	border-radius:10px;
	margin:-px;
	display:inline-block;
	padding:-px;
	
	border:0px solid white;
	background-color:rgba(255,255,255,1);
	box-shadow:0 0 0 0 rgba(255,255,255,0.1);
}
/* zoneroom dotanim on draggable droppable roomdoticon on*/
.zoneroom {
display:inline-block;
cursor:move;
text-align:center;
font-size:14pt;
color:black;
width:80px;
height:85px;
overflow:hidden;
}
.zoneroom .roomdoticon{cursor:move;}

.ui-droppable-active {border-radius:10px;
	margin:5px;
	display:inline-block;
	padding:10px;
	border:2px solid white;
	background-color:rgba(100,100,100,0.1);
	box-shadow:0 0 5px 0 rgba(100,100,100,0.1);
	
	}
.dropmain {display:block !important;padding:0 !important;}



.roomwrap .product_title:nth-child(n+2) {
	margin-top:10px;
}


.clearspace { margin-top:10px;clear:both; }
/* ZONES */






.resultstable th {white-space:nowrap;background-color:#586876;text-align:left;color:#242F35;padding:5px;font-size:9pt;}
.resultstable td {white-space:nowrap;text-align:left;color:#EEEEEE;padding:5px;font-size:10pt;}
.resultstable .c {text-align:center;}
.resultstable .r {text-align:right;}








.staff1 {text-align:center;margin-bottom:10px;}
.staff2 {background-color:#333D46;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.2);padding:10px;}
.staff_name {font-size:10pt;font-weight:bold;}
.staff_region {font-size:10pt;}
.staff_email {font-size:8pt;}
.staff_email a {color:#099FDE;}
.staff_phone {font-size:12pt;}


















/* The switch - the box around the slidecheck */
.toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 36px;
}

/* Hide default HTML checkbox */
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slidecheck */
.slidecheck {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border:1px solid rgba(0,0,0,0.5);
  background-color: rgba(255,1,19,0.3);
	
}

.slidecheck:before {
font-family: 'Font Awesome 5 Free';
font-weight:900;
  position: absolute;
  content: "\f1f8";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  color:#EEEEEE;
border:6px solid white;
border-top:5px solid white;
  background-color: white;
 box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.16);
   -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transition: .2s;
  transition:all .2s ease-in-out;
}
input:checked + .slidecheck {
  background-color: rgba(255,1,19,0.3);
}

input:focus + .slidecheck {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16);

}

input:checked + .slidecheck:before {

color:#FF0113;/*#FF0113*/

}

/* Rounded slidechecks */
.slidecheck.round {
  border-radius: 34px;
}

.slidecheck.round:before {
  border-radius: 50%;
}






























/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 35px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border:1px solid rgba(0,0,0,0.5);
  background-color: #596775;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
 box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.16);
   -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transition: .4s;
  transition:all .4s ease-in-out;
}
label {cursor:pointer;}
input:checked + .slider {
  background-color: #00A3E1;
}

input:focus + .slider {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16);

}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  transition:all .4s ease-in-out;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}







.lock-container {
  width: 60px;
  height: 60px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 100%;
}

.lock {
  background-color: rgba(51,63,72,1);
  width: 24px;
  height: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -4px;
  margin-left: -12px;
  animation: wiggle 1.5s linear infinite alternate;
  transition: background-color 0.5s ease;
}
.lock:before, .lock:after {
  content: '';
  position: absolute;
  left: 2px;
  animation: close 3s linear infinite alternate;
}
.lock:before {
  border-top: 3px solid rgba(51,63,72,1);
  border-left: 3px solid rgba(51,63,72,1);
  border-right: 3px solid rgba(51,63,72,1);
  border-radius: 10px 10px 0 0;
  width: 20px;
  height: 12px;
  top: -20px;
  transform-origin: 1px 0;
  transition: border-color 0.5s ease;
}
.lock:after {
  width: 3px;
  background-color: rgba(51,63,72,1);
  height: 15px;
  top: -11px;
  transition: background-color 0.5s ease;
}
.lock .keyhole {
  position: absolute;
  width: 4px;
  height: 7px;
  background-color:#242F35;
  border-radius: 5px;
  top: 6px;
  left: 10px;
}
.lock-container.faded .lock, .lock-container.faded .lock:after {
	background-color: rgba(51,63,72,0);
}
.lock-container.faded .lock:before {
	border-color: rgba(51,63,72,0);
}

@keyframes close {
  0%, 10% {
    transform: translate(0%, 0%);
  }
  20%, 100% {
    transform: translate(0%, 8px);
  }
}
@keyframes wiggle {
  0%, 10%, 20%, 30%, 40% {
    transform: rotate(0);
  }
  40%, 50%, 60%, 70%, 80% {
    transform: rotate(10deg);
  }
  45%, 55%, 65%, 75%, 85% {
    transform: rotate(-10deg);
  }
  85%, 100% {
    transform: rotate(0);
  }
}
























 /* buttons have margins, wrap to remove */
.button_wrap {
	margin-left: 5px;
	margin-right: 5px;
}

/* If you need to add an icon to a form element input tag, <i class="left_icon fas fa-key"></i><input .... Used on input fields for login, key and @ symbol. Add padding left 30 to the input field */

label {display:block;margin: 0 0 .4em;}

i.left_icon {
position:absolute;left:15px;padding-top:20px;color:silver;zoom:1;
}
i.left_icon+input, i.left_icon+textarea, i.left_icon+select {padding-left:40px !important;}

i.right_icon {
position:absolute;right:15px;padding-top:17px;color:silver;zoom:1;
}
i.left_icon+input, i.left_icon+textarea, i.left_icon+select {padding-left:40px !important;}
i.right_icon+input, i.right_icon+textarea, i.right_icon+select, i.right_icon+i+input, i.right_icon+i+textarea, i.right_icon+i+select  {padding-right:25px !important;}


.video {
	/*background:url('/images/loading.gif') center center no-repeat;*/
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	width:100%;
}
.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.fas.fa-question-circle {cursor:pointer;float:right;vertical-align:top;color:rgba(0,0,0,0.5);}


input:not([type='submit']):not([type='button']):not([class^='slick']):not([id^='slick']), textarea:not([class^='slick']):not([id^='slick']), select:not([class^='slick']):not([id^='slick']), .simulateinput:not([class^='slick']) {
-webkit-appearance: none;
border: 2px solid #98a0a6;
border-radius: .4rem;
color: #000000;
background-color:white;
display: block;
font-size:12pt;
margin: 0 0 10px 0;
padding: 1rem;
width: 100%;
outline: none;
font-family:'Montserrat', -apple-system, BlinkMacSystemFont,'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans','Droid Sans', 'Helvetica Neue', sans-serif;
}
input:active:not([type='submit']):not([type='button']):not([class^='slick']):not([id^='slick']), input:focus:not([type='submit']):not([type='button']):not([class^='slick']):not([id^='slick']), textarea:active:not([class^='slick']):not([id^='slick']), textarea:focus:not([class^='slick']) {
border: 2px solid #00A3E1;
-webkit-appearance: none;
outline: none;
}
input[type='submit']:not([class^='slick']):not([id^='slick']), input[type='button']:not([class^='slick']):not([id^='slick']), .button:not([class^='slick']):not([id^='slick']) {
position:relative;
cursor:pointer;
-webkit-appearance: none;
border: 0px solid #00A3E1;
border-radius: .4rem;
text-decoration:none;
color: #FFFFFF;
height:48px;
vertical-align:baseline;
display: block;
font-size:13px;
margin: 0 0 10px 0;
padding: 0 0 0 0;
width: 100%;
background-color:#00A3E1;
text-align:center;
box-sizing: border-box;
font-family:'Montserrat', -apple-system, BlinkMacSystemFont,'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans','Droid Sans', 'Helvetica Neue', sans-serif;
outline: none;
box-shadow: 0 0 4px #242F35;
white-space: normal;
word-wrap: break-word;
user-select: none;
}

.ripple {
  cursor:pointer;
  background-position: center;
  transition: background 0.8s;
}
/* Sonance Blue: #00A3E1  Sonance Dark Gray: #333F48  My Different shade of gray: #5F666B Sonance Light Gray: #D9D9D6*/
.ripple:hover {
background: #1EBAF4 radial-gradient(circle, transparent 1%, #1EBAF4 1%) center/15000%;
}

.ripple:active {
 background-color: #00A3E1;
 background-size: 100%;
 transition: background 0s;
}


.request-loader {
  position: absolute;
  left:0px;
  top:0px;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 50px;
}


.request-loader::after {
  position: absolute;
  opacity: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
 
  content: "";
  height: 100%;
  width: 100%;
  border: 6px solid rgba(0, 123, 255, 0.5);
  border-radius: 100%;
  -webkit-animation-name: ripple;
          animation-name: ripple;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0,0, 0.3, 1);
          animation-timing-function: cubic-bezier(0,0, 0.3, 1);
  z-index: -1;
}
.request-loader::before {
  opacity: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  
  content: "";
  height: 100%;
  width: 100%;
  border: 6px solid rgba(0, 123, 255, 0.5);
  border-radius: 100%;
  -webkit-animation-name: ripple;
          animation-name: ripple;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0, 0, .3, 1);
          animation-timing-function: cubic-bezier(0, 0, .3, 1);
  z-index: -1;
}

@-webkit-keyframes ripple {
  from {
  	border: 4px solid rgba(71, 167, 245, 0.5);
    opacity: 1;
    -webkit-transform: scale3d(0.0, 0.0, 0);
            transform: scale3d(0.0, 0.0, 0);
  }
  to {
  	border: 10px solid rgba(71, 167, 245, 0.5);
    opacity: 0;
    -webkit-transform: scale3d(6, 6, 6);
            transform: scale3d(6, 6, 6);
  }
}

@keyframes ripple {
  from {
  	border: 4px solid rgba(71, 167, 245, 0.5);
    opacity: 1;
    -webkit-transform: scale3d(0.0, 0.0, 0);
            transform: scale3d(0.0, 0.0, 0);
  }
  to {
  	border: 4px solid rgba(71, 167, 245, 0.5);
    opacity: 0;
    -webkit-transform: scale3d(6, 6, 6);
            transform: scale3d(6, 6, 6);
  }
}


/* RIPPLE MULTI */


.alert {
    position: relative;
    padding: 10px;
	margin:0 auto 5px auto;
    border: 1px solid transparent;
    border-radius: 3px;
	
}
.alert-dark {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca;
}
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}
.alert-secondary {
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.alert-light {
    color: #818182;
    background-color: #fefefe;
    border-color: #fdfdfe;
}
.alert-dark {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca;
}













/* PROJECT PAGES */


/* SUB NAV 2 */
.topbar2 {position:relative;z-index:8;border-bottom:1px solid #333D46;background-color:#333D46;text-align:center;
	font-size:9pt;
	color:silver;
	padding-top:0;
	padding-bottom:1px;
	transition:all 0.5s ease;
	line-height:12px;

   box-shadow:  0 0 5px 0 rgba(0,0,0,0.2);}

.topbar2 td {text-align:center;}




.roomdoticon {cursor:pointer;margin:0 auto;text-align:center;font-size:14pt;color:white;border-radius:20%;width:60px;height:60px;overflow:hidden;
background-color:rgba(0,0,0,0.2);
transition: background-color 0.1s ease;
}
.roomdoticon:hover {background-color:rgba(0,0,0,0.5);
}
.roomdoticon.finished {background-color:rgba(0,0,0,0.5);
}
.roomdoticon.on {background-color:#00A3E1; }
.gs {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.roomdottitle.on {color:white;}

.roomdottitle {font-size:9pt;width:80px;text-align:center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-bottom:5px;margin-top:5px;padding-bottom:5px;}

.roomdoticon i.fas {}
.topbarscroll {margin:0 auto;padding-top:15px;overflow-y:hidden;overflow-x:auto;}
.topbarscroll::-webkit-scrollbar {
    width: 20px;
}
.topbarscroll::-webkit-scrollbar-track {
background-color:#EDEDED;


}
.topbarscroll::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
  background-color: #ABABAB;
  border: 5px solid #EDEDED;

}
.box50 {display:block;width:50px !important;height:50px !important;overflow:hidden;}
.box20 {display:block;width:20px !important;height:20px !important;overflow:hidden;}
.dotanim {display:block;width:0px;overflow:hidden;text-align:center;transition:width 1s ease;}
.dotanim2 {animation-delay: 0.3s !important;
}

.dotanim.on {width:80px !important;transition:width 1s ease;}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}




.checklist {border-top:1px solid #242F35;border-bottom:1px solid #242F35;background-color:#333D46;padding:5px;}
@media only screen and (min-width: 720px) {
  .checklist {border-radius:10px;padding:10px;}
}

.questions label {margin:0 !important;}
.questions input {margin:0 !important;}
.questions .switch {}
.questions tr td {padding-top:5px;padding-right:5px;}

.questions .icon {padding-top:4px;margin:0 auto;text-align:center;border-radius:6px;color:white;width:30px;height:30px;font-size:18px;background-color:#242F35;}


.questions .questiontitle {font-size:16px;font-weight:500;padding-top:2px;}
.questions {margin:0 10px 0 0;}




.questions > tbody > tr:nth-child(1) > td:nth-child(1) {width:60px;text-align:center;height:46px;}
.questions > tbody > tr:nth-child(1) > td:nth-child(2) {width:calc(100% - 120px);}
.questions > tbody > tr:nth-child(1) > td:nth-child(3) {width:60px;}

.questions > tbody > tr > td:nth-child(1) {height:46px;text-align:center;border-top:1px solid #242F35;}
.questions > tbody > tr > td:nth-child(2) {border-top:1px solid #242F35;}
.questions > tbody > tr > td:nth-child(3) {border-top:1px solid #242F35;}


.questions > tbody > tr > td:not([colspan="3"]):nth-child(1) {height:46px;}


.questions .sub {border-top:0px solid white !important;}


 
label .toggletext {
position:absolute;
top:9px;
width:60px;
color:white;
text-align:left;
font-size:10pt !important;
}
label .toggletext:after {
content:'No';
position:absolute;
width:30px;
right:0;top:0;
text-align:center;
}
label .toggletext:before {
content:'Yes';
position:absolute;
width:30px;
padding-left:5px;
left:0;top:0;
text-align:center;

}
label input:checked + .toggletext:before {color:green;}




.flex_item {
	/*
	flex-grow:1;
	
	flex-basis:100px;
	*/
	vertical-align:top;
	width:100px;
	display:inline-block;
	text-align:center;
	margin-bottom:20px;
}
.flex_item2 {
	/*
	flex-grow:1;
	
	flex-basis:100px;*/
	vertical-align:top;
	min-width:0;
	display:inline-block;
	text-align:center;
	margin-bottom:20px;
}





/* The radiocheck */
.radiocheck {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border:1px solid rgba(0,0,0,0.5);
  background-color: rgba(36,47,53,1);
	
}

.radiocheck:before {
font-family: 'Font Awesome 5 Free';
font-weight:900;
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  color:#EEEEEE;
border:6px solid white;

  background-color: white;
 box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.16);
   -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transition: .2s;
  transition:all .2s ease-in-out;
}
input:checked + .radiocheck {
/*  background-color: #00A3E1;*/
background-color: rgba(255,255,255,1);
}

input:focus + .radiocheck {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16);

}

input:checked + .radiocheck:before {
/*color:#00A3E1;*/
background-color: #00A3E1;
border:#00A3E1;
}

/* Rounded radiochecks */
.radiocheck.round {
  border-radius: 34px;
}

.radiocheck.round:before {
  border-radius: 50%;
}


/* The starcheck */
.starcheck {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border:1px solid rgba(0,0,0,0.5);
  background-color: rgbargba(36,47,53,1);
	
}

.starcheck:before {
font-family: 'Font Awesome 5 Free';
font-weight:900;
  position: absolute;
  content: "\f005";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
color:rgba(171,179,195,1);
border:4px solid rgba(255,255,255,1);
background-color:rgba(255,255,255,1);
 box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.16);
   -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transition: .2s;
  transition:all .2s ease-in-out;
}
input:checked + .starcheck {
background-color: rgba(255,255,255,1);
}

input:focus + .starcheck {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16);

}

input:checked + .starcheck:before {

background-color:#00A3E1;
border-color:#00A3E1;
}







/* Rounded starchecks */
.starcheck.round {
  border-radius: 34px;
}

.starcheck.round:before {
  border-radius: 50%;
}

.star1:before {
content: "\f005";
font-weight:400;
}
.star2:before {
content: "\f5c0";
}
.star3:before {
content: "\f005";
}

.shapes1:before {
border-top:5px solid transparent;
font-family: 'LouishFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
   content: "\e906"; /* .icon-square */


}
.shapes2:before {
border-top:5px solid transparent;
font-family: 'LouishFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    content: "\e905"; /* .icon-circle */

}
.shapes3:before {
border-top:5px solid transparent;
/*content: "\e907";*/
font-family: 'LouishFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
   content: "\e907"; /* .icon-rectangle */
  
}
.radiotitle {font-size:10pt;text-align:center;margin: 0 auto;}


/* Project Setup */
.room label {margin:0 !important;}
.room input {margin:0 !important;}
.room .switch {}
.room tr td {padding-top:5px;}

.room .iconholder {margin-left:10px;color:silver;width:50px;font-size:28px;}
.room .roomtitle {font-size:20px;}
.room {margin:0 10px;width:calc(100% - 20px); }

.room td:nth-child(1) {width:60px;text-align:left;}
.room td:nth-child(2) {border-bottom:1px solid #242F35;}
.room td:nth-child(3) {width:60px;border-bottom:1px solid #242F35;}
/* Project Setup */


/* PROJECT PAGES */




















.specialnotes {color:#00A3E1;font-size:8pt;padding:0px 5px 10px 5px;}







#dim {cursor:arrow;display:none;position:fixed;z-index:99;width:4000px;height:4000px;top:-50px;left:-50px;background-color:rgba(0,0,0,0.4);}
/* DIALOG POPUP IOS STYLE BUTTONS */
		.dialogbuttons {border-bottom-right-radius:10px;
border-bottom-left-radius:10px;border-top:1px solid #DDDDDD;margin:0 -5px -5px -5px;overflow:hidden;font-family:-apple-system, BlinkMacSystemFont,'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans','Droid Sans', 'Helvetica Neue', sans-serif;}
		.dialogbuttons .button_left {border-right:1px solid #DDDDDD;padding:18px 0 20px 0;}
		.dialogbuttons .button_left, .dialogbuttons .button_right {text-align:center;cursor:pointer;color:#00A3E1;padding:18px 0 20px 0;background-color:white;}
		.dialogbuttons .button_left:hover, .dialogbuttons .button_right:hover {background-color:#EAEAEA;}

		
	
#stickyheader {z-index: 8;}
	
		
		
.ui-dialog-buttonset {border-bottom-right-radius:10px;
border-bottom-left-radius:10px;border-top:1px solid #DDDDDD;margin:0 !important;overflow:hidden;
}


.ui-dialog-buttonset button {
	width:49.9% !important;
	height:auto !important;
	border:0 solid white !important;
	font-family:-apple-system, BlinkMacSystemFont,'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans','Droid Sans', 'Helvetica Neue', sans-serif !important;
	border-radius:0 !important;
	box-shadow:none !important;
	margin:0 !important;
	padding:18px 0 20px 0 !important;
	text-align:center !important;
	cursor:pointer !important;
	color:#00A3E1 !important;
	background-color:white !important;
}
.ui-dialog-buttonset button:hover {background-color:#EAEAEA !important;}
.ui-dialog-buttonset button:first-child {font-weight:bold !important;padding:18px 0 20px 0 !important;}
.ui-dialog-buttonset button:nth-child(2) {font-weight:normal !important;border-left:1px solid #DDDDDD !important;}
.ui-dialog-buttonset > button:only-child {
	width:100% !important;
}
.ui-dialog-buttonpane {
    text-align: center !important;
	border:0 solid white !important;
    background-image: none;
    margin: 0 !important;
    padding: 0 !important;
	background-color:transparent !important;
}
		
		ul.list {margin:0;padding:0;list-style-type: none;position:relative;}
		ul.list li:hover {background-color:#EEEEEE;}
		ul.list li {cursor:pointer;display:block;border-radius:0px;border-bottom:1px solid #EEEEEE;background-color:#F7F7F7;padding:8px 15px 8px 15px;margin-bottom:2px;text-decoration:none;}
		ul.list li i {color:#00A3E1;font-style:italic;}
		
			
		ul.list {
			position:relative;
			margin:0;
			max-height:calc(100vh - 480px);
			overflow-x:hidden;
			overflow-y:scroll;
		}
		
		.fadedScroller {
			height:40px;
			width:100%;
		    background: linear-gradient(to top, rgba(251, 251, 251, 1) 0%, rgba(251, 251, 251, 0) 100%);
		    position: absolute;
			top:-40px;
		}


		ul.list .projecttime {position:absolute;right:10px;padding-top:25px;font-size:0.8em;}
		ul.list .zipcode {font-size:0.7em;color:gray;}
		
		ul.nav {margin:0;padding:0;list-style-type: none;}
		ul.nav a:link, ul.nav a:active, ul.nav a:visited {
	margin-left:-5px;margin-right:-5px;cursor:pointer;display:block;border-radius:0px;padding:10px 10px 10px 20px;margin-bottom:2px;text-decoration:none;}
		ul.nav a i {margin-right:10px;}
		
		
		
.ui-menu-item-wrapper.ui-state-active
{
  border:0 solid silver !important;
  border-top:1px solid silver !important;
  background: rgba(0,0,0,0.2);
  color:black;
  margin:0;
  
}




.ui-dialog {padding:0;}
.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable {
	border-radius:10px;
}

.ui-dialog-titlebar.ui-corner-all.ui-widget-header.ui-helper-clearfix.ui-draggable-handle {
	border-radius:8px;margin:2px;background-color:rgba(0,0,0,0.1);border:0px solid white;
	/*font-family:-apple-system, BlinkMacSystemFont,'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans','Droid Sans', 'Helvetica Neue', sans-serif;*/
font-weight:bold;
font-size:1.2em;
	
}
.ui-dialog .ui-dialog-titlebar {
    padding: .5em .8em !important;
}


.ui-dialog-titlebar.ui-corner-all.ui-widget-header.ui-helper-clearfix.ui-draggable-handle:hover {
	background-color:rgba(0,0,0,0.2);
}

.ui-dialog-content.ui-widget-content input[type='submit'] {margin:0;}
.ui-dialog .ui-dialog-buttonpane button {width:auto;}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {float:none;text-align:center;margin:0 auto;}

.ui-accordion-header-active {
border-top-left-radius: 5px !important;
border-top-right-radius: 5px !important;
border-bottom-right-radius: 0px !important;
border-bottom-left-radius: 0px !important; transition: all 0.5s ease;
}

.ui-accordion-content.ui-corner-bottom.ui-helper-reset.ui-widget-content.ui-accordion-content-active {
border-bottom-left-radius: 5px !important;
border-bottom-right-radius: 5px !important;

}
.ui-accordion-content-active {margin-bottom:5px;}
.ui-dialog {box-shadow:none;/*0px 0px 500px 800px rgba(0,0,0,0.3),0px 0px 10px 0px rgba(0,0,0,0.5)*/}
.ui-dialog[aria-describedby='popupmenu'] {box-shadow:none;}
.ui-button-icon-only.ui-dialog-titlebar-close {box-shadow:none;background-color:transparent;border-radius:0;border:0px solid white;position: absolute;
  right: 12px;
  top: 12px;
  width: 32px;
  height: 32px;
  opacity: 0.3;}
.ui-button-icon-only.ui-dialog-titlebar-close span {display:none;}

.ui-button-icon-only.ui-dialog-titlebar-close:hover {
  opacity: 1;
}
.ui-button-icon-only.ui-dialog-titlebar-close:before, .ui-button-icon-only.ui-dialog-titlebar-close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #333;
}
.ui-button-icon-only.ui-dialog-titlebar-close:before {
  transform: rotate(45deg);
}
.ui-button-icon-only.ui-dialog-titlebar-close:after {
  transform: rotate(-45deg);
}

/* JQUERY UI */






.cancelbutton {
margin-top:10px;
margin-left:7px;
display:inline-block;
width:48%;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#999999+0,828282+50,6e6e6e+51,585858+100 */
background: rgb(153,153,153); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(153,153,153,1) 0%, rgba(130,130,130,1) 50%, rgba(110,110,110,1) 51%, rgba(88,88,88,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(153,153,153,1) 0%,rgba(130,130,130,1) 50%,rgba(110,110,110,1) 51%,rgba(88,88,88,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(153,153,153,1) 0%,rgba(130,130,130,1) 50%,rgba(110,110,110,1) 51%,rgba(88,88,88,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#585858',GradientType=0 ); /* IE6-9 */



}

.deletebutton {
margin-top:10px;
display:inline-block;
width:48%;

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ef6e6e+0,ed5555+50,ef3737+51,dd1f1f+100 */
/*background:#A1A1A1; */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ef6e6e+0,ed5555+50,ef3737+51,dd1f1f+100 */
background: rgb(239,110,110); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(239,110,110,1) 0%, rgba(237,85,85,1) 50%, rgba(239,55,55,1) 51%, rgba(221,31,31,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(239,110,110,1) 0%,rgba(237,85,85,1) 50%,rgba(239,55,55,1) 51%,rgba(221,31,31,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(239,110,110,1) 0%,rgba(237,85,85,1) 50%,rgba(239,55,55,1) 51%,rgba(221,31,31,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef6e6e', endColorstr='#dd1f1f',GradientType=0 ); /* IE6-9 */


}

.deletesize {width:30px;}

.animated label {background-color:rgba(255,255,255,0.5);}
#deletetrigger {position:absolute;background-color:white;padding-bottom:5px;}

#deletetrigger {}
.nav li.on {background-color:#EEEEEE;}
#menuicon {cursor:pointer;}



.togglenext {cursor:pointer;color:gray;transition:color 0.5s ease;}
.togglenext+div {display:none;}