/* Scroll indicator */
body {
  margin: 0;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

.header h2 {
  text-align: center;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  background: #04AA6D;
  width: 0%;
}

.content {
  padding: 100px 0;
  margin: 50px auto 0 auto;
  width: 80%;
}

/* flip toggle and others */
.tgl {
	display: none;
  
	// add default box-sizing for this scope
	&,
  &:after,
  &:before,
	& *,
  & *:after,
  & *:before,
	& + .tgl-btn {
		box-sizing: border-box;
		&::selection {
			background: none;
		}
	}
  
	+ .tgl-btn {
		outline: 0;
		display: block;
		width: 4em;
		height: 2em;
		position: relative;
		cursor: pointer;
    user-select: none;
		&:after,
    &:before {
			position: relative;
			display: block;
			content: "";
			width: 50%;
			height: 100%;
		}
    
		&:after {
			left: 0;
		}
    
		&:before {
			display: none;
		}
	}
  
	&:checked + .tgl-btn:after {
		left: 50%;
	}
}

// themes
.tgl-light {
	+ .tgl-btn {
		background: #f0f0f0;
		border-radius: 2em;
		padding: 2px;
		transition: all .4s ease;
		&:after {
			border-radius: 50%;
			background: #fff;
			transition: all .2s ease;
		}
	}
  
	&:checked + .tgl-btn {
		background: #9FD6AE;
	}
}

.tgl-ios {
	+ .tgl-btn {
		background: #fbfbfb;
		border-radius: 2em;
		padding: 2px;
		transition: all .4s ease;
		border: 1px solid #e8eae9;
		&:after {
			border-radius: 2em;
			background: #fbfbfb;
			transition:
        left .3s cubic-bezier(
          0.175, 0.885, 0.320, 1.275
        ),
        padding .3s ease, margin .3s ease;
			box-shadow:
        0 0 0 1px rgba(0,0,0,.1),
        0 4px 0 rgba(0,0,0,.08);
		}
    
    &:hover:after {
      will-change: padding;
    }
    
		&:active {
			box-shadow: inset 0 0 0 2em #e8eae9;
			&:after {
				padding-right: .8em;
			}
		}
	}
  
	&:checked + .tgl-btn {
    background: #86d993;
    &:active {
      box-shadow: none;
      &:after {
        margin-left: -.8em;
      }
    }
	}
}

.tgl-skewed {
	+ .tgl-btn {
		overflow: hidden;
		transform: skew(-10deg);
		backface-visibility: hidden;
		transition: all .2s ease;
		font-family: sans-serif;
		background: #888;
		&:after,
    &:before {
			transform: skew(10deg);
			display: inline-block;
			transition: all .2s ease;
			width: 100%;
			text-align: center;
			position: absolute;
			line-height: 2em;
			font-weight: bold;
			color: #fff;
			text-shadow: 0 1px 0 rgba(0,0,0,.4);
		}
    
		&:after {
			left: 100%;
			content: attr(data-tg-on);
		}
    
		&:before {
			left: 0;
			content: attr(data-tg-off);
		}
    
		&:active {
			background: #888;
			&:before {
				left: -10%;
			}
		}
	}
  
	&:checked + .tgl-btn {
    background: #86d993;
    &:before {
      left: -100%;
    }

    &:after {
      left: 0;
    }

    &:active:after {
      left: 10%;
    }
	}
}

.tgl-flat {
	+ .tgl-btn {
		padding: 2px;
		transition: all .2s ease;
		background: #fff;
		border: 4px solid #f2f2f2;
		border-radius: 2em;
		&:after {
			transition: all .2s ease;
			background: #f2f2f2;
			content: "";
			border-radius: 1em;
		}
	}
  
	&:checked + .tgl-btn {
    border: 4px solid #7FC6A6;
    &:after {
      left: 50%;
      background: #7FC6A6;
    }
  }
}

.tgl-flip {
	+ .tgl-btn {
		padding: 2px;
		transition: all .2s ease;
		font-family: sans-serif;
		perspective: 100px;
		&:after,
    &:before {
			display: inline-block;
			transition: all .4s ease;
			width: 100%;
			text-align: center;
			position: absolute;
			line-height: 2em;
			font-weight: bold;
			color: #fff;
			position: absolute;
			top: 0;
			left: 0;
			backface-visibility: hidden;
			border-radius: 4px;
		}
    
		&:after {
			content: attr(data-tg-on);
			background: #02C66F;
			transform: rotateY(-180deg);
		}
    
		&:before {
			background: #FF3A19;
			content: attr(data-tg-off);
		}

		&:active:before {
      transform: rotateY(-20deg);
		}
	}
  
	&:checked + .tgl-btn {
    &:before {
      transform: rotateY(180deg);
    }
    
    &:after {
      transform: rotateY(0);
      left: 0;
      background:  #2ecc71 /*#7FC6A6*/;
    }
    
    &:active:after {
      transform: rotateY(20deg);
    }
	}
}





/* min/max inputs -- JS has bugs that need fixing... */
.handle-counter { overflow: hidden;margin:0!important;/*margin-top:10px;*/ }


.counter-minus{border-top-left-radius:24px;border-bottom-left-radius:24px}
.counter-plus{border-top-right-radius:24px;border-bottom-right-radius:24px}


.handle-counter .counter-minus,  .handle-counter .counter-plus,  .handle-counter input {
 float: left;
  text-align: center;
  margin:0!important;

}

.handle-counter .counter-minus,  .handle-counter .counter-plus { text-align: center;  margin:0; }

.handle-counter input {
  min-width: 50px;
  width:75px;
  border-width: 1px;
  border-left: none;
  border-right: none;
  height:40px;
  border:1px solid #ccc;
  font-size:22px;
  margin:0!important;
  padding:0;
}

.btn {
  padding: 6px 12px;
  border: 1px solid transparent;
  color: #fff;
  cursor:default;
    margin:0;
}

.btn:disabled, .btn:disabled:hover {
  background-color: darkgrey;
  cursor: not-allowed;
}

.btn-primary { font-size:22px;font-weight:strong;background-color:#3498db; }

.btn-primary:hover, .btn-primary:focus { background-color: #009dda; }

/*
body{font-family:Verdana, Arial;font-size:13px;}
.tableData{margin-top:20px;}
.tableData table, .tableData td{border:1px solid #000;border-collapse:collapse;}
.tableData td{padding:0px;}

#797d7f
*/


 
#portrait_cover{
 background:#797d7f url('/hyperlynx/template/img/portrait_cover.png');
  width: 150px;
 height: 150px;
 background-size:150px 150px;
 transition: 0.9s;
 transform-style: preserve-3d;
 position: relative;
 cursor:default;
 }

#portrait_cover:hover{
 box-shadow: 0 15px 15px rgb(245,245,245,.2);
}

#wwaportrait_wrap:hover{
 width: 150px;
 height: 150px;
 transition: 0.9s;
 -webkit-transform: rotateX(20deg);
 transform: rotateX(20deg)
}



/*
 #515a5a
 #797d7f
 #616a6b
 


	'https://ei.phncdn.com/(m=bLWsSeKlbyaT)(mh=1l6cZO50p66IBzmF)80a27ebc-c8a6-4b8f-b773-f2e485c59203.jpg'
	
   background-image: url("./hyperlynx/template/img/portrait_cover.png");
   height: 300px;
   width: 300px;
   z-index:9999;
   no-repeat;

display:block;
background-img:('/hyperlynx/template/img/portrait_cover.png');
height:300px;
width:300px;



*/