body
{
	margin: 0;
	font-family: 'TG', serif;
	padding:0;
}

h1 { font-size: 1.5em; }

@font-face {
    font-family: Autography;
    src: url("Autography.ttf") format("truetype");
}

/* STAGE */
.stages, .stages-extra
{
	position: relative;
    display: flex;
    flex-direction: column;
}

.stages-extra
{
	flex-direction: row;
	margin-left: -10px;
	margin-top:30px;
	margin-right: -10px;
}

.stages .stage:last-child::before, .stages-extra .stage::before
{
	display: none !important;
}

.stages .stage:last-child
{
	margin-bottom:0px;
}

.stage {
    width: 100%;
    padding: 8px;
    position: relative;
	margin-bottom:25px;
	background: #e27676;
    border: 2px solid #a03939;
}

.stages-extra .stage
{
	width: 50%;    
	border: 2px solid #71a6d0;
    background: #77c0e2;
	margin:10px;
}

.stage.blue
{
	border: 2px solid #71a6d0;
    background: #77c0e2;	
}

.stage.status0, .statusbg0, .statusbg0 > *
{
    border: 2px solid #71d072;
    background: #77e277;
	background: rgb(119,226,119);
    background: linear-gradient(198deg, rgba(119,226,119,1) 0%, rgba(87,180,87,1) 100%);
}

.stage.status1, .statusbg1, .statusbg1 > *
{
	background: #e2bc76;
    border: 2px solid #d0a871;background: rgb(254,172,72);
background: linear-gradient(198deg, rgba(254,172,72,1) 0%, rgba(254,163,52,1) 100%);
}

.stage.status2, .statusbg2, .statusbg2 > *
{
    background: #e27676;
    border: 2px solid #a03939;
	background: rgb(228,98,109);
	background: linear-gradient(198deg, rgba(228,98,109,1) 0%, rgba(225,81,93,1) 100%);
}

.stage.status1, .statusbg3, .statusbg3 > *
{
	background: #e2bc76;
    border: 2px solid #d0a871;background: rgb(254,172,72);
background: linear-gradient(198deg, rgba(254,172,72,1) 0%, rgba(254,163,52,1) 100%);
}

.stage span.title
{
	font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}


.stage.status0::after 
{
	content: "COMPLETE";
	font-size:10px;
	position: absolute; 
	letter-spacing: 1px;
	top: 5px;
	right: 5px;
}

.stage.status1::after 
{
	content: "IN PROGRESS";
	font-size:10px;
	letter-spacing: 1px;
	position: absolute; 
	top: 5px;
	right: 5px;
}


.stage.status3::after 
{
	content: "NOT APPLICABLE";
	font-size:10px;
	letter-spacing: 1px;
	position: absolute; 
	top: 5px;
	right: 5px;
}

.stage::before {
    content: "";
    width: 30px;
    height: 30px;
    border: 6px solid;
    border-color: #ad5151 transparent transparent #ad5151;
    transform: rotate( -135deg );
    display: block;
    left: 50%;
    position: absolute;
    top: 100%;
    margin-left: -13px;
    margin-top: -11px;
    z-index: 99;
}
.stage.status0::after, .stage.status0::before
{
    border-color: #55b556 transparent transparent #55b556;
}


@font-face {
  font-family: "TG";
  src: url("TradeGothicLTStd-Extended.eot");
}

@font-face {
  font-family: 'TG';
  src: url('TradeGothicLTStd-Extended.eot') format('eot'), url('TradeGothicLTStd-Extended.woff2') format('woff2'), url('TradeGothicLTStd-Extended.ttf') format('truetype');
}

hr {
    border-bottom: 1px solid #e2e2e2;
    width: 100%;
    border-top: 0px;
}

a
{
	color:#000;
	text-decoration: none;
}

.icon 
{
	width: 40px;
    height: 40px;
    float: left;
    background-size: cover;
    margin-right: 10px;
}

.icon-20
{
	width: 20px;
    height: 20px;
}

.icon-30
{
	width: 30px;
    height: 30px;
}

.icon.pencil
{
    background-image: url(/images/icons/pencil.svg);	
}
.icon.pencil-f
{
    background-image: url(/images/icons/pencil-f.svg);	
}
.icon.set-square
{
    background-image: url(/images/icons/set-square.svg);	
}
.icon.shield
{
    background-image: url(/images/icons/shield.svg);	
}
.icon.cog
{
    background-image: url(/images/icons/cog.svg);	
}
.icon.document
{
    background-image: url(/images/icons/document.svg);	
}
.icon.home
{
    background-image: url(/images/icons/home.svg);	
}
.icon.clipboard
{
    background-image: url(/images/icons/clipboard.svg);	
}

.logo
{
	height: auto;
}

.menu
{
	position: absolute;
    top: 47px;
    right: 15px;
    width: 240px;
    text-align: right;
    background: white;
    border: 1px solid #d2d4dc;
	border-bottom: 0px;
	z-index:100;
	display: none;
}

.menu a
{
	width: 100%;
	border-bottom: 1px solid #d2d4dc;
    font-size: 13px;
    text-transform: uppercase;
    font-family: "Roboto";
    padding: 10px;
	color:#7987a1!important;
	float:left;
}

.menu > div {
    background: #172b3a;
    width: 100%;
    border-bottom: 1px solid #d2d4dc;
    font-size: 13px;
    text-transform: uppercase;
    font-family: "Roboto";
    padding: 10px;
    color: #dadce5!important;
    float: left;
}

.menu > div span
{
    word-break: break-word;
}

.toggle:checked ~ .menu
{
	display: block;
}
#toggleproject:checked ~ .menu
{
	display: block;
	top: 60px;
}

.menu a:hover 
{
    background: #ecf0fa;
    color: #1b1b1b !important;
}

.clickable { cursor: pointer; }

.burger
{
	width: 30px;
    margin-top: 5px;
    cursor: pointer;
	margin-bottom:0px;
}

.burger span
{
	width: 100%;
    height: 3px;
    background: #172b3a;
    display: block;
    margin: 2px 0px;
    float: left;
}

.login input[type="email"], .login input[type="text"], .login input[type="password"] {
    width: 100%;
    border: 0;
    border-bottom: 1px solid gray;
    padding: 12px 0px;
    font-size: 15px;
    outline: none;
	background:transparent;
}

.form-control
{
	display: block;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	width:100%;
}

select.form-control
{
	width: auto;
}

.form-group.form-title 
{
    width: 100%;
    margin-top: 20px;
    padding: 10px;
    font-weight: bold;
    background: #edf0fa;
    border: 1px solid #e2e2e2;
    font-size: 18px;
    letter-spacing: 0px;
}

.form-field-down 
{
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 8px;
    position: absolute;
    right: 15px;
    bottom: 15px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.form-field-up {
	border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 8px;
    position: absolute;
    right: 50px;
    bottom: 5px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

a.disabled
{
	filter: grayscale(1);
    pointer-events: none;
	opacity:0.25;
}

.form-control:disabled
{
    background-color: #e4e4e4;
    cursor: not-allowed;
}

label {
    display: inline-block;
    margin-bottom: .5rem;
}

input[type="submit"], button, .btn
{
	padding: 10px 25px;
	background-color:#172b3a;
	color: #fff;
	font-size: 16px;
    font-family: 'TG', serif;
	display:inline-block;
}

.btn.center { text-align: center; }

input[name*="contactdelete"] + div
{
	text-decoration: line-through;
}

a.contact_up {
    display: inline-block;
    padding-top: 5px;
    float: right;
    height: 20px;
}

.faq:after 
{
    content: "";
    border: solid black;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 12px;
    height: 12px;
    padding: 0px;
    margin: 0px 10px;
    display: inline-block;
    right: 10px;
    position: absolute;
	top: 15px;
}

.faq.show:after
{
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
	top: 20px;
}

.faq 
{
    border: 1px solid #d8dae2;
    padding: 15px 10px;
    cursor: pointer;
	margin-bottom: 10px;
}

.faq.show span
{
	display: block;
	color: #7987a1;
}

.faq span
{
	display: none;
}

.contact_down:before
{
	content: "";
	border: solid black;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 12px;
    height: 12px;
    padding: 0px;
    margin: 0px 10px;
    display: inline-block;
}
.contact_up:before
{
	content: "";
	border: solid black;
    border-width: 0 3px 3px 0;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    width: 12px;
    height: 12px;
    padding: 0px;
    margin: 0px 10px;
    display: inline-block;
}

a.contact_remove {
    width: 20px;
    position: relative;
    float: right;
    display: inline-block;
    height: 20px;
    margin-left: 3px;
}

.contact_remove:before, .contact_remove:after {
  position: absolute;
    right: 7px;
    content: ' ';
    height: 20px;
    width: 3px;
    background-color: #333;
    top: 0px;
}
.contact_remove:before {
  transform: rotate(45deg);
}
.contact_remove:after {
  transform: rotate(-45deg);
}

a.btn.light {
    background: #f2f2f2;
    color: #172b3a !important;
}

.folder
{
	background-color: #172b3a;
    color: #ffffffd1;
    padding: 8px 15px;
	text-decoration: none;
	font-size:18px;
}

.folder.mauve
{
	background: #b7a27d;
    padding: 20px 15px;
    text-align: center;
}

.folder.noaccess {
    opacity: 0.25;
    cursor: not-allowed;
}

.file {
    background-color: #ecf0fa;
    color: #172b3a;
    padding: 10px;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 2px;
	height: 100%;
}

.file.noaccess {
    opacity: 0.4;
    cursor: not-allowed;
}

.file img {
    max-height: 100px;
}

.mute {
    color: #7987a1!important;
}

table tr td
{
	border-top: 1px solid #d6d6d6;
	padding:10px 5px;
}

table.wide
{
	width: 100%;
}

table tr td.thin
{
    width: 150px;
    text-align: center;
}

td.nowrap
{
    white-space: nowrap
}

table thead th
{
	font-weight: bold;
	padding:10px 5px;
	text-transform: uppercase;
}

table tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.05);
}

.projects-table .head 
{
	font-weight: bold;
    padding: 10px 5px;
    text-transform: uppercase;
}

.projects-table .body > div
{	
    padding: 10px 5px;
    border-top: 1px solid #d6d6d6;
}

.projects-table .body > div:nth-of-type(odd) {
    background-color: rgba(0,0,0,.05);
}

.projects-table .head > div, .projects-table .body > div 
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.projects-table .head > div > div,
.projects-table .body > div > div
{
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 1;
}

.projects-table .head > div > div:nth-child(2),
.projects-table .body > div > div:nth-child(2) 
{
    max-width: 150px;
}
.projects-table.stage-table .head > div > div:nth-child(2),
.projects-table.stage-table .body > div > div:nth-child(2) 
{
    max-width: initial;
}
.projects-table.stage-table .head > div > div:nth-child(1),
.projects-table.stage-table .body > div > div:nth-child(1) 
{
    flex:2;
}

.projects-table .head > div > div.thin,
.projects-table .body > div > div.thin
{
    flex: 0;
}

.stage-folder 
{
    background-color: #ffffff;
    padding: 8px;
    text-decoration: none;
    font-size: 12px;
    border: 1px solid #dfe2ea;
    color: #a4b0ba;
    max-width: 100%;
    overflow: hidden;
	position: relative;
}

.burger.cross
{
	position: absolute;
    bottom: 17px;
    right: 7px;
}

.burger.cross span:nth-child(1) 
{
    display: none;
}

.burger.cross span:nth-child(2) 
{
    transform: rotate(45deg);
}

.burger.cross span:nth-child(3) 
{
    transform: rotate(-45deg);
    margin-top: -4px;
}

.stage-folder .menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
}

.stage-folder:hover 
{
    border: 1px solid #172b3a;
    color: #172b3a;
}


.stage-folder img 
{
    max-height: 150px;
    border: 1px solid #ecf0fa;
    width: auto;
    margin-bottom: 5px;
}

.container.pdf { width:100% !important; max-width:100% !important; }
.container.pdf .card { font-size: 16px; }


.card, .notification
{
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background: #fff;
    background-clip: border-box;
    border: 1px solid #e2e2e2;
    margin-bottom: 1.3rem;
    flex: 1 1 auto;
    padding: 1rem;
    -ms-flex: 1 1 auto;
    min-height: 1px;
	font-size: 14px;
}

.btn.btn-warning {
    background: #d83c3c;
    border: 1px solid #ff8989;
}

.notification.warning {
    background: #ff8989;
}

.notification.success {
    background: #b4ffb4;
}

.card b 
{
	font-size: 20px;
}

.card.dark
{
	background: #172b3a;
	color:#fff;
}
.card.dark a 
{
	color:#fff;
	display:inline-block;
}
.card.dark h1
{
	font-weight: normal;
	margin:0;
	color:#fff;
}
.card.dark span.extra
{
	font-size: 12px;
	display: inline-block;
	margin-left: 5px;
}

.media-img img 
{
    width: 65px;
    height: 65px;
    border-radius: 50%;
    margin-right: 10px;
}

.fields-container > div {
    border: 1px solid #000;
    box-sizing: border-box;
    padding: 10px 15px;
    margin-top: -2px;
    border: 2px dashed #e2e2e2;
	position: relative;
}

.fields-container .del 
{
    position: absolute;
    top: 10px;
    right: 10px;
}

.shadow
{
    box-shadow: 0 1px 15px 1px #c0c0c7;
}

.white
{
	background: #fff;
}

.login-bg
{
	min-height: 100vh;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
	position: absolute;
    z-index: 1;
    background-position: center center;
	
    -webkit-animation: loginslides 15s cubic-bezier(0,2,1,2);
    -moz-animation: loginslides 15s cubic-bezier(0,2,1,2);
    -o-animation: loginslides 15s cubic-bezier(0,2,1,2);
    animation: loginslides 15s cubic-bezier(0,2,1,2);

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@media (max-width: 992px) {
	.login-bg.grid
	{
		display:none !important;
	}
}

.company.login-bg
{
	left: 15px;border-right:20px solid #fff;background-image: url(../images/orangery.jpg) !important;min-height:90vh
}

.company.login-bg.bronze
{
	right: 15px;left:auto;border-right:auto;border-left:20px solid #fff;background-image: url(../images/bronze-screen2.jpg) !important;
}

.company.login-bg > div 
{
   text-align: center;
    background: rgba(23, 43, 58, 0.7);
    padding: 30px 40px 10px;
    position: absolute;
    bottom: 50px;
}

.company.login-bg.bronze > div
{
	background: rgba(0,0,0,0.7);    padding: 40px 40px 25px;
}

.folder-caption
{
	text-align:center; line-height:26px;color:#fff;text-transform:uppercase;font-size:24px;position:absolute;padding:30px 20px;bottom:0px;left:15px;right:15px;<?php echo $columnClass2;?>text-align:center;background:rgba(0,0,0,0.4);    border-top: 1px solid rgba(255,255,255,0.75);
}

.folder-caption-2
{
	padding-bottom:20px;line-height:26px;color:#fff;text-transform:uppercase;font-size:18px;position:absolute;padding:10px 20px;bottom:0px;left:15px;right:15px;<?php echo $columnClass2;?>text-align:center;background:rgba(0,0,0,0.4);    border-top: 1px solid rgba(255,255,255,0.75);
}

.folder-desc
{
	margin-top:0px;line-height:26px;
}

.login-box img.headshot
{
	height:160px;
}
	

@media (max-width: 992px) {
	
	.login-box img.headshot
	{
		height: 100px;
	}
	.folder-desc
	{
		font-size: 12px;
		line-height: 17px;
	}
	.folder-caption br 
	{
		display: none;
	}

	.folder-caption
	{
		left:5px; right:5px;
        font-size: 14px;
        text-align: center;
        padding: 10px;
        line-height: 18px;
	}
	
	.folder-caption-2
	{
		left:5px; right:5px;
        font-size: 17px;
        text-align: center;
        padding: 10px;
	}
	
	.company.login-bg > div 
	{
		position:relative;
		background: rgba(23, 43, 58, 1);
		bottom:auto;
	}
	
	.company.login-bg img { max-width:75%; }
	
	.company.login-bg.bronze > div 
	{
		background: rgba(0,0,0,1);
	}
	.company.login-bg,
	.company.login-bg.bronze
	{
		background-image: none !important;
        position: relative;
        min-height: auto;
        left: 0px;
        right: 0px;
        border: none;
        margin-bottom: 20px;
	}
}


.login-box
{
	max-width:450px;
	width:100%;
	margin:20px;
	background: #fff;
	z-index:2;
	padding: 20px;
}

.login-box img
{
	height: auto;
}

.col-center
{
	-webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media (min-width: 992px) {
	.login-bg
	{
		position: relative;
		margin: 0;
	}
}
@media (max-width: 992px) {
	.card.dark h1 { font-size:16px; display: inline;}
	.card b { font-size: 16px; }
	input[type="submit"], button, .btn { padding: 8px 15px; font-size:14px; }
	.row { 
    margin-right: -5px;
    margin-left: -5px;
	}
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto
	{		
    padding-right: 5px;
    padding-left: 5px;
	}
}

@media (max-width: 768px) {
	.menu { left: 0px; right: 0px; width: auto; }
	.login-box { margin: 20px 0px; padding:0px; }
}

a[data-test*="Vale White"] { background-color: #f2efe0; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Gardenia"] { background-color: #f2efe0;  text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Taylor Cream"] { background-color: #eee9d6; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Limewash"] { background-color: #dddbbf; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Wild Mink"] { background-color: #c7c2ad; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Sheepskin"] { background-color: #dbd6b0; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Vellum"] { background-color: #ccc39d; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Putty"] { background-color: #bfb698; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Catkin"] { background-color: #b0b599; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Mud Pie"] { background-color: #aaa98d; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Flagstone"] { background-color: #8f8a67; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Mothwing"] { background-color: #a8b0a1; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Pikes Belly"] { background-color: #a8b0a1; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Eucalyptus"] { background-color: #7c918a; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Old Sage"] { background-color: #8f926f; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Poachers Green"] { background-color: #61705d; color: #fff !important;}
a[data-test*="Lighthouse"] { background-color: #f9faf5; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Rice Paper"] { background-color: #fcf9e6; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Olivine White"] { background-color: #d5d1b6; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Sugar Beet"] { background-color: #c3c0b4; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Pavement"] { background-color: #a4a69c; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Engine Room"] { background-color: #818477; color: #fff !important;}
a[data-test*="Porcini"] { background-color: #b9b5a4; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Ermine"] { background-color: #726f60;  color: #fff !important;}
a[data-test*="Earth"] { background-color: #58573e;  color: #fff !important;}
a[data-test*="Burnt Ash"] { background-color: #88918b; color: #fff !important;}
a[data-test*="Tempest"] { background-color: #88918b;  color: #fff !important;}
a[data-test*="Carbon"] { background-color: #2c3334; color: #fff !important;}
a[data-test*="Quail"] { background-color: #8a8f7a; color: #fff !important;}
a[data-test*="Grey Goblin"] { background-color: #6e7463;  color: #fff !important;}
a[data-test*="Atlantis"] { background-color: #515f5f;  color: #fff !important;}
a[data-test*="Conch"] { background-color: #d2d1cf; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Nimbus"] { background-color: #eaecea; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Portland"] { background-color: #d4d2c8; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Parker"] { background-color: #a9aa9c; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Dismal"] { background-color: #c5c6be; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Leaden"] { background-color: #a7a89c; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Dirty White"] { background-color: #ddded6; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Thumper"] { background-color: #c3c5c1; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Silver Birch"] { background-color: #b8bdbf; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Pinafore"] { background-color: #a4a8a9; text-shadow: 1px 1px 3px #fff; color: #000;}
a[data-test*="Alabaster"] { background-color: #e9e9e7; text-shadow: 1px 1px 3px #fff; color: #000;}

/* TABBED FORM STYLING */

/* Mark input boxes that gets an error on validation: */
input.invalid, textarea.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

#documents-container > div {
    padding: 20px;
}

#documents-container > div:nth-child(odd) {
    background: #ecf0fa;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

/* Mark the active step: */
.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #04AA6D;
}


.openBtn {
  background: none;
  border: none;
  padding: 0px;
  font-size: 20px;
  cursor: pointer;
}

.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
}

.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}

.overlay .closebtn:hover {
  color: #ccc;
}

.overlay input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 100%;
  background: white;
}

.overlay input[type=text]:hover {
  background: #f1f1f1;
}

.overlay button {
  float: left;
  width: 120px;
  padding: 15px;
  background: #000;
  font-size: 17px;
  border: none;
  right:0px;
  position:absolute;
  cursor: pointer;
}

.overlay button:hover {
  background: #bbb;
}