:root {
	--main-color:#0090d3;
	--main-back: #006392;
}
body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}
* {
	font-family: 'Montserrat', sans-serif;
}
div {
	text-align: center;
}
.container {
	margin: 0 auto;
	max-width: 900px;
}
.header {
	height: 12vh;
	box-shadow: 0px -5px 10px 10px #999;
}
.footer {
	height: 16vh;
	display: flex;
	flex-direction: column;
	justify-content: end;
	position:absolute;
	bottom:0;
	width:100%;
	max-width: 900px;
	
}
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
	.footer {
	height: 18vh;
	}
}

#select_footer {
	height: 10vh;
	position: absolute;
	width: 100%;
	max-width: 900px;
}
#job_screen {
	background-color: var(--main-color);
	height: 100vh;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	background-size: cover;
    background-repeat: no-repeat;
	background-image: url('./images/hero_BG@3x.png');
}
#draw_screen {
	display:none;
}
#select_screen {
	display:none;
	/* .background: #800000; */
	height: 100%;
	/* .position:relative; */
}
#lengths_screen {
	display: none;
	padding: 0px;
	height: 84vh;
	overflow:auto;
}
#job_details_screen {
    display: none;
    padding: 0px;
    height: 84vh;
}
#job_desc_screen {
	display: none;
	padding: 0px;
	height: 84vh;
}
.jd {
	padding: 20px;
	.height: 72vh;
	overflow: auto;
}
.jd input, .jd select {
    margin-bottom: 20px;
    width: 100%;
    background-color: #eaeaea;
    border: 2px solid #979797;
    padding: 15px 11px;
	box-sizing: border-box;
	color: #4c4d4f;
	font-weight: bold;
	box-sizing: border-box;
}
.half_input {
	width: 49%;
	display: inline-block;
}
.mandatory_asterix {
	font-weight: bold;
	color: red;
}
#summary_screen {
	display: none;
	height: 84vh;
	overflow: auto;
	padding: 0px;
}
#finished_screen {
	display: none;
	height: 84vh;
	padding: 0px;
}
.draw_screen_btn {
	margin: 0 auto 25px;
	width: 80%;
	text-transform: uppercase;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.1);
    border: 3px solid #fff;
    padding: 10px 0;
    font-size: 1.3em;
	cursor: pointer;
}
.job_screen_menu {
	margin-top: 100px;
}
.job_screen_cancel {
    color: white;
    font-weight: bold;
    letter-spacing: 1px;
}
.bordered_x {
    border: 2px solid #fff;
    font-size: 2em;
    line-height: 0.7em;
    padding: 0 2px;
    display: inline-block;
    position: relative;
    top: 4px;
    text-decoration:none;
    color:white;
}
#ss_heading {
    width: 90%;
    background: var(--main-color);
    border-bottom: 2px solid var(--main-back);
    color: white;
    margin: auto;
    text-align: center;
    padding: 5%;
    border-top: 2px solid #999;
    font-weight: bold;
}
.design-back-button {

    width: 90%;
    border: 2px solid var(--main-color);
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #000;
    font-size: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px;

}
.ss1 {
	border: 2px solid var(--main-color);
	margin-bottom: 20px;
    position: relative;
	font-size: 1em;
	box-sizing: border-box;
}
.ss2 {
	color: #666;
	text-align: left;
	font-weight: bold;
}
.ss3 {
	color: var(--main-color);;
	text-align: left;
}
#jsb3 {
	padding-top: 10%;
	width:30%;
	margin:auto;
	text-align: center;
}
.X {
	border:2px solid white;
	color: white;
	float: left;
	padding: 5px;
}
#js_cancel {
	color: white;
	float: right;
	margin-top:5%;
}
#js2 {
	color: white;
	font-size: 1em;
}
.login_page {
	margin: 0px;
	width: 100%;
	height: 100vh;
	background-size: cover;
    background-repeat: no-repeat;
	background-image: url('./images/hero_BG@3x.png');
}
.login_container {
	margin: 0 auto;
	/*background: var(--main-color);;*/
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}
.login_container h1 {
	color: #fff;
	text-transform: uppercase;
	font-size: 3em;
	margin: 0;
}
#job_screen h1 {
	color: #fff;
	text-transform: uppercase;
	font-size: 1em;
	margin: 0;
}
.login_footer {
	color: #fff;
}
.uppercase {
	text-transform: uppercase;
}
#login_start_button {
    text-transform: uppercase;
    color: #fff;
    background-color: rgba(0, 0, 0, 0);
    border: 3px solid #fff;
    padding: 10px 40px;
    font-size: 1.5em;
    font-weight: bold;
}
#loginbar {
	position: absolute;
	top: 0px;
}
.pup input {
	font-size: 1.5em;
	background: #EAEAEA;
	width: 100%;
	border: none;
	color: #4c4d4f;
	font-weight: bold;
	padding: 4px 8px;
	box-sizing: border-box;
}
.pup .input-connect {
	background-color: #EAEAEA;
	line-height: 1.7em;
	font-size: 1em;
	display: inline-block;
	color: #999
}
.login {
	font-size: 3vh;
}
#login_form input {
	width: 80%;
	border: 3px solid #999;
	padding: 4px 8px;
	color: #fff;
	background-color: rgba(255, 255, 255, 0.1);
	margin-bottom: 10px;
	transition: 0.5s ease;
	box-sizing: border-box;
}
#login_form input.active {
	border: 3px solid #fff;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.2);
}
#login_form input.good {
	border: 3px solid #4F8A10;
	color: #4F8A10;
	background-color: rgba(79, 138, 16, 0.2);
}
#login_form input.bad {
	border: 3px solid #D8000C;
	color: #D8000C;
	background-color: rgba(216, 0, 12, 0.2);
}
.popup_content
{
	font-size: 1.2em;
	color: #4c4d4f;
}
#ls1 {
	overflow: auto;
	padding: 30px;
}
#set_lengths
{
	width: 100%;
}
#set_lengths td
{
	font-size: 3vh;
	text-align:center;
}
#table_lengths_body tr:nth-child(odd) {
	background-color: #4484B3;
}
#set_lengths input {
    padding: 3px 6px;
    border: 2px solid #999;
	width: 100%;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.8);
	font-size: 1em;
}
#table_lengths_body tr:nth-child(odd) input {
	border: 2px solid #115180;
}
.btn {
	width:25%;
	height:12vh;
	padding:0px 0px 0px 0px;
	background-color: var(--main-color);;
	-webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 0.7em;
	color:white;
	box-sizing: border-box;
	float: left;
	display: flex;
	border-top: 2px solid #999;
	border-right: 2px solid #115180;
	border-bottom: 2px solid #115180;
	border-left: 2px solid #4484B3;
}

.btn_selected {
	background-color: var(--main-back);
}
.btn_inner {
    text-align: center;
	width: 100%;
	align-self: flex-end;
}

#draw_1 { left:0px; background-image: url('./draw.jpg'); background-position: center; background-size: inherit;}
#draw { left:0px; background-image: url('./images/icon_pencil.svg'); background-position: center; background-size: inherit;}
#dimensions { left:25%; background-image: url('./images/icon_ruler.svg'); background-position: center; background-size: inherit;}
#angles { left:50%; background-image: url('./images/icon_angle.svg'); background-position: center; background-size: inherit;}
#colour_side { left:75%; background-image: url('./images/icon_down-arrow.svg'); background-position: center; background-size: inherit;}
.draw_s { left:0px; background-image: url('draw_s.jpg');}
.dimensions_s { left:25%; background-image: url('dimensions_s.jpg');}
.angles_s { left:50%; background-image: url('angles_s.jpg');}
.colour_side_s { left:75%; background-image: url('colour_side_s.jpg');}


#draw_canvas
{ 
	width:100%;
	height:72vh;
	.border:1px solid black;
}
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
   /* CSS overrides for mobile here */
   #draw_canvas
	{ 
		width:100%;
		height:58vh;
		.border:1px solid blue;
	}
}
#ss_list {
	height: 78vh;
	padding: 20px;
	box-sizing: border-box;
	overflow: auto;
}
#bottom_bar, #select_bottom_bar
{
	width: 100%;
	max-width: 900px;
	box-shadow: 0px 5px 10px 10px #999;
	position:absolute;
	bottom:0;
}
#back_btn, #select_back_btn {
	width: 25%;
	font-size: 4em;
	line-height: 0.8em;
	font-weight: bold;
}
#next_btn, #select_next_btn {
	width:50%;
	background-color:var(--main-color);
	color:white;
	border-right: 1px solid #4484B3;
	border-left: 1px solid #4484B3;
}
#select_next_btn.inactive {
    background-color: #787878;
    border-right: 1px solid #9b9b9b;
    border-left: 1px solid #9b9b9b;
}
#fwd_btn, #select_fwd_btn {
	width: 25%;
	font-size: 4em;
	line-height: 0.8em;
	font-weight: bold;
}
#fwd_btn.inactive, #select_fwd_btn.inactive, #back_btn.inactive, #select_back_btn.inactive {
	color: #6f7072;
}
.botbut 
{	
	font-size: 1.5em;
	color: #333333;
	line-height: 10vh;
	background: #4c4d4f;
	border: 1px solid #333;
	height: 10vh;
	text-align: center;
	box-sizing: border-box;
	float: left;
}
.botbut_active
{
 	color: white;
}

#help_bar {
	width:100%;
	height:6vh;
	.color: var(--main-color);
	color: #0090d3;
	font-weight: bold;
	font-size: 1.0em;
	.border:2px solid green;
	position:absolute;
	top : 0;
}

.crush_img {
	height: 15vh;
	display: inline-block;
	margin: 0 auto;
}
.crush_popup_tbl {
	/* .height:25vh; */
	/* .width:50vw; */
	/* .margin: 0 auto; */
	padding: 3vw;
	margin: 0 auto;
}
.crush_popup_tbl td {
	text-align:center;
}
.popup_container {
	display: inline-block;
	margin: 15vh auto;
	
	/* .width:100vw; */
}
.crush_popup {
	/* .position:absolute; */
	/* .height: 50vh; */
	/* .min-height : 50%; */
	/* .left: 15vw; */
	top: 15vh;
	border:1vw var(--main-color) solid;
	/* .padding: 1vw; */
	spacing: 5px;
	margin: 15vh auto;
	display:none;
	
}

.popup_banner {
	text-align:center;
}
.popup_banner.input {
	background-color: #EAEAEA;
	border: 2px solid #999;
	width: 60%;
}
.pup-container {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.7);
	display: none;
}
.pup {
	position: fixed;
	width: 80%;
	left: 50%;
	top: 20%;
	border: 2px solid var(--main-color);
	padding: 20px;
	box-shadow: 0px 0px 40px 0px #999;
	box-sizing: border-box;
	transform: translateX(-50%);
	background-color: #fff;
	max-width: 720px;
}

.close_btn {
	display: inline-block;
	border: 2px solid var(--main-color);
	padding: 2px 6px;
	line-height: 1em;
}
.close {
	display: inline-block;
}
.close_tbl {
	padding: 10px 0px;
	margin: 1vh auto;
}
.close_row {
	font-size: 1.3em;
	color: var(--main-color);
	font-weight: bold;
}
.close_space {
	min-width:40px;
}

.grey_img {
    -webkit-filter: grayscale(50%);
       -moz-filter: grayscale(50%);
         -o-filter: grayscale(50%);
        -ms-filter: grayscale(50%);
            filter: grayscale(50%); 
}

#colhead
{
	color:black;
}

#selColor
{
	border: 2px black solid;
	margin: 1vh 0vh 2vh 0vh; 
	color: black;
}

.coldiv 
{
	height:7.5vh;
	border: 2px var(--main-color) solid;
	line-height: 7.5vh;
	color:var(--main-color);
	margin-top: 10px;
}

.textdiv
{
	text-align:left;
	padding-left: 15px;
	float: left;
}

.seldiv
{
	padding-right: 20px;
	text-align:right;
}
.pfull {
	height: 72vh;
	padding: 20px;
	box-sizing: border-box;
}
.circle {
	/* .display:block; */
	/* .height:4vh; */
	/* .width:4vh; */
	border-radius: 50%;
	text-align: center;
	border: 0.5vh solid var(--main-color);
	/* .font-size:200%; */
	padding-top: 0.1vw;
}
.center {
	line-height: 90px;
  	text-align: center;
  	display: inline-block;
}
#ls_add {
	font-size: 3vh;
	/* .padding-top:2vh; */
	
	text-align: center;
	display: inline-block;
  	vertical-align: middle;
  	position: absolute;
  	top: 0;
  	width:100%;
}
#ls_add span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  color:var(--main-color);
}
table.cscroll 
{
	text-align:left;
	width:100%;
	/* .line-height:30px; */
	display:block;
}

table.cscroll thead
{
	display:inline-block;
	width:100%;
	/* .height:30px; */
}

table.cscroll tbody
{
	display:inline-block;
	width:100%;
	height:40vh;
	overflow:auto;
}

.scroll {
	overflow: auto;
}
table.cscroll td
{
	padding:2vh;
	width:100vw;
}

table.cscroll th
{
	padding:10px;
}
.banner {
	background: var(--main-color);
	color: #fff;
	width: 100%;
	height: 12vh;
	line-height: 4vh;
	font-weight: bold;
	font-size: 1.5em;
	padding: 14px;
	box-sizing: border-box;
	box-shadow: 0px -5px 10px 10px #999;
	border-top: 2px solid #999;
	border-right: 2px solid #115180;
	border-bottom: 2px solid #115180;
	border-left: 2px solid #4484B3;
}
#lengths {
	width:100%;
}
#job_desc_txt {
	font-size: 1em;
	width: 100%;
	height: 6em;
	background-color: #eaeaea;
	border: 2px solid #979797;
	padding: 8px 13px;
	box-sizing: border-box;
	color: #4c4d4f;
}
.summary_2 {
	font-size:1.5vh;
}
.summary_1 > div {
	border: 2px solid #979797;
	margin-bottom: 10px;
	box-sizing: border-box;
}
#summary_description {
	display: flex;
	flex-direction: column;
	padding: 6px 10px;
	margin-top:10px;
}
#summary_thumb {
    background-color: #eaeaea;
}
#summary_details{
	text-align: left;
}
.summary_row {
	display: flex;
}
.summary_heading {
	width: 50%;
	text-align: left;
	color: #4c4d4f;
}
.summary_value {
	color: var(--main-color);
	text-align: left;
}
.summary_label {
	font-size: 1em;
	color: #4c4d4f;
}
.summary_data {
	font-size:3vh;
	color: var(--main-color);
}
.summary_1 {
	.padding: 20px;
	height: 78vh;
	box-sizing: border-box;
	overflow: auto;
	text-align: left;
}
#bottom_bar1
{
	position: absolute;
	left: 0px;
	top:81vh;
	width: 100%;
	/* .height: 80px; */
	/* .display:none; */
}
#back_btn1 {
	position:  absolute;
	top:0px;
	width:25%;
}
#next_btn1 {
	position:  absolute;
	width:50%;
	top:0px;
	left:25%;
	
}

#fwd_btn1 {
	text-align: center;
	position:  absolute;
	width:25%;
	top:0px;
	left:75%;
}
.black {
	color: #4c4d4f;
}
.taper_popup_tbl {
	width:60vw;
	margin:auto;
	font-size:6vw;
	border-spacing:2vw 2vh;
    border-collapse:separate;
}
.taper_heading {
	background: white;
    color: #4c4d4f;
    margin: auto;
    text-align: center;
    font-size: 1.2em;
	
}
.taper_btn {
	background: var(--main-color);
    color: white;
    margin: auto;
    text-align: center;
    padding: 2vh 0;
    width: 35%;
    font-size: 1.2em;
	font-weight: bold;
	display: inline-block;
}
.input_wrapper {
	border: 2px solid #979797;
	background-color: #eeeeee;
	width: 70%;
	margin: 15px auto 0;
}
.blue_circle {
	background-color: var(--main-color);
	width: 2em;
	height: 2em;
	line-height: 2em;
	border-radius: 1em;
	font-weight: bold;
	color: #ffffff;
	font-size: 1.2em;
	margin: 0 auto 10px;
}

.length_container {
	color: #4c4d4f;
	font-weight: bold;
	margin-bottom: 20px;
}
.length_container:last-child {
	margin-bottom: 70px;
}
.length_container * {
	box-sizing: border-box;
	text-align: left;
}
.length_title {
	font-size: 1.8em;
	border-bottom: 2px solid #dddcde;
	padding-bottom: 10px;
}
.length_inputs {
	padding: 10px 0 20px;
	border-bottom: 2px solid #787878;
	display: flex;
	justify-content: space-between;
}
.length_inputs label {
	font-size: 1.3em;
	line-height: 1.5em;
}
.length_inputs input {
	font-size: 1.5em;
	background: #EAEAEA;
	width: 100%;
	border: none;
	border: 2px solid #979797;
	color: #4c4d4f;
	font-weight: bold;
	padding: 4px 8px;
	box-sizing: border-box;
}
.length_quantity {
	width: 35%;
}
.length_length {
	width: 60%;
}