@import (less) "/shared/Styles/AresPallet.less";

* {
    font-family: "Montserrat Bold", "Proxima Nova", Armitage, sans-serif;
    color: @gray9;
	font-size: 12pt;
}

div {
	&#backgroundFade {
		z-index: 1;
	}
	
	&.systemError {
		font-size: 3em;
		span, span b {
			color: white;
			font-size: 16pt;
		}
	}
	&.unitOfWorkParent {
		display: flex;
		flex: 1 1 auto;
		background-color: @wspLightGray;
		margin: 0px 15px 0px 15px !important;
		padding: 5px 20px 5px 20px;
		
		flex: 0 0 auto;
	
		width: 90%;
		height: 80px;
		max-height: 125px;
		
		border-radius: 8px 8px 0px 0px;
		
		> div.wide {
			max-width: 600px;
		}
		
		span {
			color: @black;
			max-width: 600px;
			text-align: center;
		}
	}
	&.unitOfWorkLast {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		justify-content: center;
		
		flex: 0 0 auto;
		
		background-color: @wspLightGray;
		margin: 0px 15px 5px 15px;
		padding: 5px 20px 5px 20px;
		
		width: 90%;
		min-height: 6px;
		
		border-radius: 0px 0px 8px 8px;
	}
	&.unitOfWork {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		justify-content: center;
		
		color: @black;
		
		background-color: @wspLightGray;
		margin: -2px 15px -2px 15px !important;
		padding: 5px 20px 5px 20px;
		line-height: 25px;
		width: 90%;
		
		flex: 0 0 auto;
	
		span.bigNbold {
			color: @gray9;
			margin-top: 10px;
		}
		input.box,
		select.box {
			color: @wspCharcoalDark;
			font-size: 1em;
		}
	}
	&.fade {
		opacity: 0.60;
		z-index: 2;
		max-height: 100% !important;
		max-width: 100% !important;
		height: 100% !important;
		width: 100% !important;
		bottom: 100% !important;
		position: fixed;
		top: 0;
		left: 0;
		border-radius: 0px;
	}
	&.column {
		display: flex;
		flex-direction: column;
	}
	&.row {
		display: flex;
		flex-direction: row;
	}
	&.wide {
		width: 100%;
	}
	&.centered {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	&.right {
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
	}
	&.bottom {
		display: flex;
		align-items: flex-end;
	}
	&.nowrap {
		display: flex;
		flex-wrap: none;
	}
	&.wrapped {
		display: flex;
		flex-wrap: wrap;
	}
	&.spacedBetween {
		display: flex;
		justify-content: space-between;
	}
	&.spaced {
		display: flex;
		flex: 1 1 auto;
		justify-content: space-evenly;
		align-items: flex-start;
		margin-right: 15px;
		margin-left: 15px;
	}
	&.stretch {
		display: flex;
		width: fit-content;
	}
	&.tall {
		height: 100%;
	}
	&.start {
		justify-content: flex-start;
	}
	&.vertical {
		align-items: center;
	}
	&.third {
		width: 33%
	}
	&.half {
		width: 49%;
	}
	&.twoThird { 
		width: 66%;
	}
	&.full {
		width: 100%;
	}
	
	&#notificationDiv {
		position: fixed;
		
		z-index: 1000;
		width: 100%;
		max-width: 60%;
		height: 60%;
		max-height: 80% !important;
		
		background-color: #FFF;
		border: 5px solid #d9d9d6;
		
		flex: 1 1 auto;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		
		border-radius: 16px 16px 16px 16px;
		margin: 0 auto 0 auto;
		top: ~"calc(40% / 2)";
		left: ~"calc(40% / 2)";
		
		> div {
			position: relative;
			width: ~"calc(100% - 150px)";
			left: -80px;
		}
		li, span {
			color: black;
		}
	}
	&#LoginDivPanel {
		height: 100%;
	}
	&#wspBanner {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		
		position: relative;
		background-color: @wspRed;
			
		padding-left: 60px;
		left: 0;
		z-index: 5;
		height: 70px;
		align-items: center;
		
		span { 
			color: white; 
			font-weight: unset; 
			font-size: 28pt;
			margin-left: 60px;
		}
		svg { height: 52px; }
		.st0 { fill: white; }
	}
}
select, 
input {
	-webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: content-box;    /* Firefox, other Gecko */
	box-sizing: content-box;         /* Opera/IE 8+ */
	
	transition: border-color 0.3s, background-color 0.3s;
		
	&.box  {
		color: @wspCharcoalDark;
		font-size: 1.3em;
		background: @wspLightGray;
		border-color: 2px solid @gray9;
		border-radius: 8px;
		height: 48px;
		min-height: 25px;
		min-width: 150px;
		margin-top: 1px;
		margin-bottom: 1px;
		margin-right: 5px;
		margin-left: 5px;
		text-align: center;
		text-align-last: center;
		padding-top: 0px !important;
		padding-bottom: 0px !important;
		
		font-weight: normal;
		text-align: center;

		& { transition: font-size 0.25s, background-color 0.5s; }
		
		&.required {
			background: @wspLightGray;
		}
		&:hover:enabled {
			background-color: #efefef;
			border-color: 1px solid lightblue;
		}
		&:disabled {
			background-color: @gray9;
			color: @white;
		}
	}
	&.shadowed {
		box-shadow: 5px 5px 8px #888;
	}
	&.grow {
		display: flex;
		flex-grow: 0.9;
	}
	&.invalid {
		border: 1px solid red !important;
		background-color: #FDD !important;
		background-image: none !important;
	}
	&.valid {
		background-color: lightgreen !important;
		color: white;
	}
	&.changed {
		background-color: yellow !important;
		transition: background-color 0.5s;
	}
	&.plain {
		font-weight: bold !important;
		font-size: 1.3em;
	}

	&[type="radio"].toggle + label {
		color: white;
		font-size: 10pt;
	}
	&[type='number']::-webkit-outer-spin-button,
	&[type='number']::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	&[type="radio"].toggle {
		opacity: 0.00;
		z-index: 100;
		position: absolute;
		width: 5px !important;
		height: 0px !important;

		& + label {
			display: flex;
			align-items: center;
			justify-content: center;
			
			width: 65px;
			min-width: 85px;
			height: 65px;
			
			border: 1px solid @white;
			background-color: @gray6;
			box-shadow: 3px 3px 6px #000;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			
			font-size: 12pt;
			margin: 2px 4px 2px 4px;
			text-align: center;
			color: @white;
			cursor: pointer !important;
				
			transition: background-color 0.35s;
				
			&.huge {
				width: 380px;
				min-width: 95px;
				height: 40px;
				border: 1px solid @white;
				background-color: @gray6;
				font-size: 1.9em;
				margin: 4px 8px 4px 8px;
				text-align: center;
				color: @white;
				box-shadow: 5px 5px 8px #000;
				-webkit-box-shadow: 5px 5px 8px #000;
				-moz-box-shadow: 5px 5px 8px #000;
			}
			&.mobile {
				font-size: 3.0em;
				width: 200px;
				height: 50px;
				margin: 10px 5px 10px 5px;
			}
			&.large {
				width: 120px;
				min-width: 95px;
				border: 1px solid @white;
				background-color: @gray6;
				margin: 2px 4px 2px 4px;
				text-align: center;
				color: @white;
				box-shadow: 5px 5px 8px #000;
				-webkit-box-shadow: 5px 5px 8px #000;
				-moz-box-shadow: 5px 5px 8px #000;
			}
			&.invalid,
			&.large.invalid {
				color: @maroon;
			}
			
			&:hover {
				background-color: #888;
			}
			
			> span {
				color: @white;
			}
		}
		&:checked + label {
			background-color: @wspRed;
			border-color: @black;
			text-shadow: 0 1px 1px rgba(40, 40, 40, 0.75);
		}
		&:disabled {
			background-color: @grayB;
			color: @gray6;
		}
		&:disabled:checked + label {
			background-color: @wspRed;
		}
	}
}
label {
	&.btn {
		color: white;
	}
	&.button {
		color: white;
	}
	&.stretch {
		display: flex;
		width: fit-content;
	}
}
span {
	&.small {
		font-size: 0.8em;
	}
	&.idSubName {
		min-width: 100px;
		width: 100px;
		font-weight: bold;
	}
	&.bigNbold {
		font-size: 1.2em;
		font-weight: bold;
		padding-left: 10px;
		margin-bottom: 5px;
		margin-top: 10px;
	}
	&.bigNbold.gray {
		color: @gray3 !important;
	}
	&.biggerNbolder {
		font-size: 2.0em;
		font-weight: bold;
		line-height: 40px;
	}
	&.biggererNbolderer {
		font-size: 3.0em;
		font-weight: bold;
	}
	&.biggestNboldest {
		font-size: 4.0em;
		font-weight: bold;
	}
	&.closeModal {
		font-size: 2.1em;
	}
}
button {
	&.grayButton {
		font-size: 1.2em;
		font-weight: normal;
		color: @white;
		width: 255px;
		height: 35px;
		border: 1px solid black;
		border-radius: 6px;
		text-align: center !important;
		background-color: @gray6;
		box-shadow: 5px 5px 8px #aaa;
		-webkit-box-shadow: 5px 5px 8px #aaa;
		-moz-box-shadow: 5px 5px 8px #aaa;
		transition: background-color 0.3s;
		cursor: pointer;
	
		i {
			color: white;
		}
		&:enabled:hover {
			background-color: @wspCharcoalBlue;
		}
	}
	&.graybox {
		font-size: 1.8em;
		color: @white;
		width: 55px;
		text-align: center !important;
		background-color: @gray6;
		box-shadow: 5px 5px 8px #000;
		-webkit-box-shadow: 5px 5px 8px #000;
		-moz-box-shadow: 5px 5px 8px #000;
		
		&.active {
			background-color: @wspRed;
		}
	}
	&.grayfat {
		font-size: 1.4em;
		color: @white;
		width: 55px;
		height: 40px;
		text-align: center;
		margin: 0px 3px 0px 3px;
		background-color: @gray6;
		box-shadow: 5px 5px 8px #000;
		-webkit-box-shadow: 5px 5px 8px #000;
		-moz-box-shadow: 5px 5px 8px #000;
	}
	&.grayBoxToggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 155px;
		min-width: 100px;
		height: 42px;
		border: 1px solid @white;
		background-color: @gray6;
		font-size: 1.9em;
		margin: 2px 4px 2px 4px;
		text-align: center;
		color: @white;
		box-shadow: 5px 5px 8px #000;
		-webkit-box-shadow: 5px 5px 8px #000;
		-moz-box-shadow: 5px 5px 8px #000;
		-webkit-border-top-left-radius: 0;
		-webkit-border-bottom-left-radius: 0;
		-moz-border-top-left-radius: 0;
		-moz-border-bottom-left-radius: 0;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	&.closeModal {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		position: absolute;
		margin: 0 auto;
		width: 80px;
		height: 80px;
		
		border-radius: 40px;
		border: 4px solid #333e48;
		
		top: 10px;
		font-size: 3.0em;
		color: #333e48;
		background-color: #FFF;
		left: ~"calc(100% - 100px)";
		box-shadow: 5px 5px 8px #000;
		
		& { transition: background-color 0.2s; }
		&:hover {
			background-color: @lightRed;
		}
		
		i {
			position: relative;
			display: inline-block;
			font-size: 22pt;
		}
	}
	&.addUow {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		margin-top: 80px;
		
		width: 80px;
		height: 80px;
		
		border-radius: 40px;
		font-size: 3.0em;
		color: #333e48;
		background-color: #FFF;
		border: 4px solid #333e48;
		box-shadow: 5px 5px 8px #000;
		
		cursor: pointer;
		position: absolute;
	
		transition: background-color 0.2s;
	
		& i {
			&.fa-save {
				position: relative;
				display: inline-block;		
				font-size: 0.7em;
			}
		}
		& span {
			position: relative;
			display: inline-block;
			line-height: 1em;
			width: 1em;
			height: 1em;
			top: -6px;
			left: -8px;
			
			& i {
				position: absolute;
				width: 100%;
			}
		
			& i.left {
				text-align: left;
				left: -10px;
				max-width: 15px;
			}
			& i.right {
				text-align: right;
				right: -2px;
				max-width: 30px;
				font-size: 24pt;
			}
		}
		
		&:enabled:hover {
			background-color: @lightGreen;
			border: 4px solid @wspCharcoalBlue;
		}
		&:disabled {
			opacity: 0.5;
			border: 1px solid gray;
		}
	}
	
	&.navButton {
		font-size: 1.5em;
		padding: 4px;
		border-radius: 4px;
		color: @white;
		width: 180px;
		text-align: center;
		background-color: @wspRed;
		box-shadow: 5px 5px 8px #000;
		-webkit-box-shadow: 5px 5px 8px #000;
		-moz-box-shadow: 5px 5px 8px #000;
		cursor: pointer !important;
		pointer-events: auto;
		
		& { transition: background-color 0.35s; }
		&:hover { background-color: #ff7970; }
	}
	&:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}
	&.expInc {
		background-color: transparent;
		border: none;
		& > i {
			font-size: 6em;
		}
	}
	&.short {
		width: 75px;
	}
}
table {
	&#LoginTable {
		height: 100%;
		width: 100%;
	}
}
i, a {
	&.big {
		font-size: 1.1em;
	}
	&.click {
		cursor: pointer;
		font-size: 1em;
	}
}
li {
	line-height: 25px;
}

.modal.closed,
.mobileModal.closed {
    display: none;
}
.modal {
    position: fixed;
    z-index: 100;
    width: 100%;
    max-width: 100%;
    height: 80%;
    max-height: 80% !important;
    background-color: @white;
    border: 5px solid @wspLightGray;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    border-radius: 16px 16px 16px 16px;
}
.modalPane {
	display: flex;
	width: 90%;
	height: 90%;
	
	background-color: @wspCharcoalDark;
	border-radius: 16px 16px 16px 16px;
	
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 15px;
	padding-bottom: 0px;

	/* let it scroll */
	overflow: auto;
}
.tracker {
	display: flex;
    flex-direction: row;
	
    margin: 0px;
    padding: 0px;
    overflow: hidden;

    align-items: center;
    justify-content: center;
	
	& li span {
		color: white;
		font-weight: none;
		font-size: 1em;
	}
	& li {
		background-color: @gray9;
		list-style-type: none;
		display: inline-block;
		position: relative;
		text-align: center;
		line-height: 20px;
		height: 9px;
		width: 9px;
		margin: 0px 5px 0px 5px;
		border-radius: 16px;
		
		cursor: pointer;
	}
	& li.active {
		background-color: @wspRed;
	}
	& li.blue {
		background-color: @blue;
	}
	& li.active.blue {
		background-color: @royalBlue;
	}
	& li.active span {
		font-weight: bold;
	}
	& li.finished {
		background-color: @lightRed;
	}
}
.hidden { display: none; }

@media screen and (min-width: 1000px) {

    .container {
        display: flex;
        height: 100%;
        max-width: 100%;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        flex-direction: column;
    }
    .container, html, body, form {
        margin: 0px;
        height: 100%;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
	
    .panelControl {
        display: flex;
        width: 100%;
        max-width: 100%;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
		
		height: ~"calc(100% - 80px)";
		overflow-y: auto;
		overflow-x: hidden;
		
		& div {
			margin-bottom: 5px;
			
			&.disExp {
				border: 1px solid darkgray;
				background-color: white;
				margin: 4px 8px 4px 8px;
				border-radius: 4px;
				
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 8px;
				
				width: ~"calc(45% - 10px)";
				
				&.full {
					width: 99% !important;
				}
				&.wide {
					width: 85% !important;
				}
			}
		}
		& > span {
			display: flex;
			font-size: 2em;
			color: @white;
			justify-content: center;
		}
    }

	input.toggle + label {
		border-radius: 4px !important;
	}
	
	img {
		&.worksheetImage {
			margin: 4px;
		}
	}
	div {
		&.legalBox {
			display: flex;
			flex-direction: column;
			
			span {
				color: white;
				font-size: 0.9em; 
			}
		}
		&.item {
			span {
				color: #777;
			}
		}
		&.unitOfWorkParent {
			align-items: center;
			justify-content: center;
			
			span { width: 70%; }
		}
		&.scrRmobC {
			display: flex;
			flex-direction: row;
		}
		&.scrCmobR {
			display: flex;
			flex-direction: column;
		}
		
		&#toggles {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
	}
	span {
		&.big {
			font-size: 1.5em;
			margin-left: 5px;
		}
		&.noneFound {
			font-weight: bold;
			font-style: italic;
			font-size: 1.1em;
		}
		a {
			font-size: unset;
		}
	}
	
    #mobileHeader, #mobileBreadcrumb, .mobile {
        display: none !important;
    }
    #wrapper {
        height: 100%;
        display: flex;
        flex: 2;
        -webkit-flex: 2;
        -ms-flex: 2;
    }
    #menu {
        background-color: @wspCharcoalDark;
        flex: 0 0 310px;
        -webkit-flex: 0 0 310px;
        -ms-flex: 0 0 310px;
        flex-direction: column;
        -webkit-flex-direction: column;
        ie-flex-direction: column;
        padding-top: 40px;
        max-width: 20%;
        min-width: 200px;
		
		& div {
			color: @grayC;
			font-size: 1.2em;
			font-weight: bold;
			height: 35px;
			text-align: right;
			padding-right: 20px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			
			&.active {
				color: @white;
				background-color: @wspCharcoalBlue;
				height: 40px;
				border-collapse: separate;
				box-shadow: 1px 2px 3px #000;
				-webkit-box-shadow: 1px 2px 3px #000;
				-moz-box-shadow: 1px 2px 3px #000;
			}
			&.finished {
				color: @grayC;
				background-color: @white;
				height: 40px;
				border-collapse: separate;
			}
			&.legalBox {
				font-size: 0.7em;
				text-align: justify;
				border-radius: 8px;
				background-color: @gray9;
				color: white;
				width: ~"calc(100% - 40px)";
				height: fit-content;
				padding: 5px 10px 5px 10px;
				margin: 0px 10px 50px 10px;
				
				display: block;
				
				a {
					color: unset;
					font-size: unset;
				}
			}
		}
    }
    #window {
        background-color: @white;
        flex: 1 1;
        -webkit-flex: 1 1;
        -ms-flex: 1 1;
        max-width: 80%;
    }
    #linksRow {
        display: flex;
        background-color: @white;
        height: 30px;
        padding-right: 20px;
        color: @wspRed;
        font-size: 1.1em;
        justify-content: flex-end;
        -webkit-justify-content: flex-end;
        -ms-justify-content: flex-end;
		a {
			color: @wspRed;
			font-size: 1.3em;
			font-weight: bold;
			
			& { transition: color 0.35s; }
			&:hover {
				color: darkred;
			}
		}
    }
    #banner {
        height: 78px;
        background-color: @wspRed;
        background-image: url("/images/registration_banner.jpg");
        background-repeat: no-repeat;
		background-size: 60%;
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
    }
    #content {
        display: flex;
        height: 80%;
        flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
        ie-flex: 1 1 auto;
        flex-direction: row;
        -webkit-flex-direction: row;
        ie-flex-direction: row;
        align-content: stretch;
        -webkit-align-content: stretch;
        ie-align-content: stretch;
        align-items: stretch;
        -webkit-align-items: stretch;
        ie-align-items: stretch;
        position: relative;
        width: 100%;
    }
    #panel {
        display: flex;
        flex-direction: column;
        flex-flow: space-between;
        background-color: @wspCharcoalDark;
        border-radius: 25px;
        margin: 10px 10px 0px 25px;
        padding: 15px 10px 5px 20px;
        width: 100%;
        max-width: 100%;
		align-items: center;
    }
    #panelBreadcrumb, 
	#examBreadcrumb {
		background-color: #efefef;
		text-align: center;
		width: 100%;
		margin: 10px 0px 5px 0px;
		height: 15px;
		padding-top: 8px;
		border-bottom: 1px solid gray;
		border-top: 1px solid gray;
		border-right: 1px solid lightgray;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
    }

	#phoneModal, #contactModal, #expModal {
		opacity: 1.0;
		overflow: inherit;
		background-color: transparent;
		border: 0px;
		position: fixed;
		top: ~"calc( (100% - 400px) / 2)";
		left: ~"calc( (100% - 900px) / 2)";
		height: 400px;
		width: 900px;
		box-shadow: 3px 3px 3px black;
		
		> div.modalPane {
			justify-content: center;
			border: 10px solid white;
		}
		center {			
			margin-top: -45px;
			margin-bottom: -10px;
		}
	}
	
    #navControl {
        display: flex;
		margin-top: -55px;
		z-index: 1;
		position: relative;
		width: 95%;
		margin-left: 10px;
        padding: 0px 20px 5px 20px;
        align-items: baseline;
        justify-content: flex-end;
        flex-flow: row;
    }
    #introPanel {
        align-items: flex-start;
		flex-wrap: wrap;
		
		& > span {
			margin-bottom: 15px;
			width: 100%;
			justify-content: left;
			font-size: 1.5em;
		}
    }
	#initPanelNameBlock {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        width: 95%;
        max-width: 95%;
        justify-content: center;
    
		& .w30 {
			width: 30%;
			max-width: 30%;
			margin-bottom: 0px;
		}
		& .w30 {
			padding-left: 3px;
			padding-right: 3px;
		}
		& .w70 {
			width: 70%;
			max-width: 70%;
			margin-bottom: 0px;
		}
		& .w70 input.box {
			width: 95%;
			max-width: 95%;
		}
		& > div > label > div {
			margin-top: 0px;
		}
		& button {
			min-width: 90px;
		}
		& > div {
			display: flex;
			flex-direction: column;
		}
		
		/* Correction applied to middle name button block */
		& > div > label > div {
			margin-bottom: 0px;
		}
	}
    #initPanelExtraData {
        display: flex;
        flex-direction: row;
        width: 95%;
    
		& .w30 {
			width: 30%;
			max-width: 30%;
			margin-bottom: 0px;
		}
		& .w30 {
			padding-left: 3px;
			padding-right: 3px;
		}
		& .w70 {
			width: 70%;
			max-width: 70%;
			margin-bottom: 0px;
		}
		& .w70 input.box {
			width: 95%;
			max-width: 95%;
		}
		& div.column label {
			width: 45%;
		}
		& input.box.tiny {
			width: 45px;
			min-width: 20px;
		}
		& input.box.small {
			width: 60px;
			min-width: 30px;
		}	
	}
	#initPanel {
		> div {
			display: flex;
			width: 100%;
			flex-direction: column;
			align-items: center;
			> div {
				max-width: 900px;
			}
		}
	
		& input.toggle + label, #infoPanel input.toggle + label {
			height: 30px;
			font-size: 1.0em;
			max-width: 125px
		}
	}
    #infoPanel {
        display: flex;
        flex-direction: column;
        align-items: center;
		
		& > label {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			margin-bottom: 10px;
		}
		& > label.wide {
			width: 100%;
		}
		& input.toggle + label {
			width: 300px;
			height: 50px;
			padding-left: 10px;
			padding-right: 10px;
		}
		& input.box, #infoPanel select.box {
			height: 48px;
		}
    }
    #howPanel {
        display: flex;
        flex-direction: column;
        align-items: left;
        width: 75%;
		
		& input[type="text"]{
			width: 600px;
		}
		& input.toggle + label {
			width: 200px;
			margin: 5px 5px 5px 5px;
			font-size: 1.0em;
			height: 55px;
			padding-left: 10px;
			padding-right: 10px;
		}
    }
	#phoneModal {
		top: ~"calc( (100% - 555px) / 2)";
		left: ~"calc( (100% - 900px) / 2)";
		height: 610px;
		width: 900px;
		
		button.addUow {
			position: relative;
		}
	
		& div.primaryBlock input[type='radio'].toggle + label  {
			width: 40%;
			min-width: 145px;
		}
		& div.toggles {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
		}
		& input.toggle + label {
			width: 125px;
			height: 50px;
			font-size: 14px;
		}
		& button.addUow {
			margin-top: 35px;
		}
		& div.modalPane {
			padding-top: 40px;
			border: 10px solid lightgray;
			
			select, input {
				background-color: @wspCharcoalBlue;
				color: white;
			}
			p {
				text-align: center;
			}
			span.bigNbold {
				font-size: 1.3em;
			}
			
			& > div > div {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			& > div > div > div {
				flex-wrap: wrap;
				margin-bottom: 30px;
			}
		}
		& .modalPane div.bottom {
			
			text-align: center;
			justify-content: center;
			height: 80px;
		}
		& div#textingPanel {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			self-align: center;
			
			div.toggles {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-self: center;
			}
			
			& > div > div:nth-child(1) {
				max-width: 75%;
			}
			& div > div {
				margin-bottom: 20px;
			}
			& div > span {
				font-size: 1.1em;
				align: center;
			}
			
		}
		& div.phoneBlock {
			margin-bottom: 20px;
		}
	}
	#contactPanel {
		& div.item { max-width: 700px !important; }
		& div.item > span:nth-child(1) { min-width: 30px; }
		& div.item > span:nth-child(2) { min-width: 130px; }
		& div.item > span:nth-child(3) { min-width: 300px; }
		& div.item > span:nth-child(4) { min-width: 150px; justify-content: flex-start !important; }
	}
	#contactModal {
		opacity: 1.0;
		
		& div > span {
			margin-top: 30px;
		}
		& div.phones input[type='text']{
			width: 150px;
		}
		& .modalPane div.bottom {
			height: 100px;
			justify-content: center;
		}
		& button.addUow {
			margin-top: 10px;
		}
	}
	#emContactPanel {
		div.unitOfWork {
			& > div {
				display: flex;
				flex-direction: row;
				justify-content: center;
				max-width: 700px;
				width: 100%;
			}
			span {
				color: @gray6;
			}
		}
	}
	#eduPanel {
		max-width: 1100px;
		> div {
			align-items: center;
		}
		& div.toggles {
			flex-wrap: wrap;
			justify-content: center;
		}
		& input[type='radio'] + label {
			width: 225px;
			font-size: 1.0em;
		}
	}
	#expModal {
		& > div.modalPane {
			justify-content: flex-start;
			
			span.bigNbold {
				font-size: 1.4em;
				margin-top: 10px;
				margin-bottom: 8px;
			}
		}
		& > div.modalPane > div {
			align-items: center;
		}
		& > div.modalPane > div.column > div {
			margin: 0px 20px 30px 20px;
			align-items: center;
		}
		& > div.modalPane div.centered {
			align-items: center;
		}
		& > div.modalPane  input.short {
			width: 150px;
		}
		& > div.modalPane div.groupBatch {
			display: flex;
			flex-direction: row;
			width: 100%;
			justify-content: space-around;
		}
		& button.addUow {
			margin: 0px;
			position: relative;
		}
		& > div.modalPane select { height: 50px; }
	}
	#qualPanel {
		div.controls {
			display: flex;
			justify-content: space-around;
			flex-direction: row;
			
			width: 90%;
			margin-left: 20px;
		}
		div.unitOfWorkBody {
			justify-content: space-around;
		}
		div.qualBox {
			max-width: 370px;
			min-width: 370px;
			margin-top: 20px;
			
			span.bigNbold {
				font-size: 2em;
				color: @wspCharcoalBlue;
				margin-bottom: 10px;
				border-bottom: 1px solid gray;
			}
		}
		button.addUow {
			margin-top: -25px;
			position: relative;
		}
	}
	#travelPanel {
		max-width: 900px;
	
		&.wide {
			display: flex;
			flex-direction: column;
			align-items: center;
			
		}
		& div.toggles {
			width: 100%;
			margins: 30px 10px 15px 10px;
		}
		& div.toggles input[type='radio'] + label {
			width: 48%;
			font-size: 1em;
		}
	}
	#assessmentPanel {
		display: flex;
		flex-direction: column;
		
		button {
			height: 30px;
			border-radius: 8px;
		}
		
		& div.unitOfWorkParent {
			height: 35px;
			min-height: 25px;
		}
		& div.unitOfWork{
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 0;
			
			height: 70%;
			max-height: 100%;
			
			div span {
				margin-bottom: 25px;
				color: @black;
				display: block;
			}
		}
		& div.unitOfWork span.bigNbold {
			width: 100%;
			margin-bottom: 25px;
		}
	}
	#cheatsheetModal {
		top: 25px;
		max-width: 700px;
		left: ~"calc( (100% / 2) - 350px)";
		
		& button.closeModal {
			font-size: 2em;
			height: 50px;
			width: 50px;
		}
		& ol li {
			margin-left: 50px;
		}
	}
	#assessmentQuestionPanel {
		& > div {
			width: 100%;
		}
		& div.toggles {
			flex-wrap: wrap;
			width: 100%;
			margin-top: 20px;
			justify-content: center;
		}
		& div.toggles input[type='radio'] + label {
			height: 45px;
			width: 270px;
			font-size: 1.3em;
			color: white;
			padding: 2px 6px 2px 6px;
			
			p {
				color: white;
				i {
					color: white;
				}
			}
		}
		& span#assessmentInjection {
			display: flex;
			align-self: center;
		}
	}

	#expModal > div.modalPane { 
		width: 840px;
		height: 365px;
	}
	#phoneModal > div.modalPane { 
		width: 840px;
		height: 550px;
	}
	#contactModal > div.modalPane { 
		width: 840px;
		height: 365px;
	}
	
	#contactPanel, #emContactPanel, #disasterPanel, #techPanel, #langPanel, #qualPanel, #mailPanel {
		div.unitOfWorkParent {
			span {
				font-size: 1.1em;
				white-space: normal;
			}
			i {
				font-size: 1.1em;
			}
		}
		div.unitOfWork {
			div.wide {
				max-width: 600px;
				justify-content: space-between;
				font-size: 1.4em;
			}
			span.controls {
				min-width: 100px;
			}
			i {
				font-size: 12pt;
				padding-left: 6px;
				padding-right: 6px;
	
				&.negNinty {
					transform: rotate(-90deg);
				}
				&.fade {
					opacity: 0.1;
				}
				&.addressIcon {
					font-size: 2.2em;
					margin-left: 15px;
					cursor: pointer;
					width: 40px;
					& {
						transition: font-size 0.1s, color 0.3s;
					}
					&:hover {
						color: @wspCharcoalBlue;
					}
					&.selected {
						font-size: 3em;
						color: @wspCharcoalBlue;
					}
				}
			}
		}
	}
	
	#mailPanel {
		div {
			&.unitOfWork {
				align-items: flex-start;
				
				div.spaced {
					margin-right: 0px;
					margin-left: 0px;
				}
				
				select {
					height: 30px;
					background-color: white;
				}
				span {
					b {
						color: @gray3;
					}
					color: @gray3;
					&.bigNbold  {
						font-size: 1.4em;
						color: @gray6;
					}
				}
				input {
					&[type='text'] {
						height: 30px;
						background-color: white;
					}
					&[type='radio'] + label.large {
						height: 45px;
						width: 48%;
					}
				}
			}
			&#newAddressForm {
				width: 100%;
				
				button {
					&.grayButton {
						width: 250px;
						margin-left: 4px;
						margin-right: 4px;
	
						span {
							color: white;
							font-size: 0.9em;
						}
						&.short {
							width: 60px !important;
						}
						&.copier {
							width: 180px;
							span {
								color: white;
							}
						}
					}
					&.next {
						width: 180px;
					}
				}
			}
			&#addresses {
				width: 65%;
			}
		}
		span {
			&.idSubName {
				height: 100%;
				display: flex;
				justify-content: center;
				flex-direction:column;
				align-items: flex-end;
				max-width: 110px;
				min-width: 110px;
				line-height: 40px;
			}
			&.zipSpan {
				max-width: 60px;
				min-width: 60px;
			}
		}
		input.zipBox {
			display: flex;
			flex: 1;
		}
		select {
			&.stateBox {
				display: flex;
				flex: 3;
			}
			&.grayButton {
				font-size: 1.3em;
				font-weight: normal;
				color: @white;
				height: 35px;
				border: 1px solid black;
				border-radius: 6px;
				text-align: center !important;
				background-color: @gray6;
				box-shadow: 5px 5px 8px #aaa;
				-webkit-box-shadow: 5px 5px 8px #aaa;
				-moz-box-shadow: 5px 5px 8px #aaa;
				transition: background-color 0.3s;
				cursor: pointer;
				margin-left: 10px;
			
				i {
					color: white;
				}
				&:enabled:hover {
					background-color: @wspCharcoalBlue;
				}
				
			}
		}
		
		button {
			z-index: 1;
		}
	}

	#workPanel div.unitOfWork,
	#disasterPanel div.unitOfWork,
	#techPanel div.unitOfWork,
	#langPanel div.unitOfWork {
		justify-content: center;
		margin: 10px 25px 5px 25px;
		
		div {
			&.disExpBlock {
				width: ~"calc(100% - 33%)";
				min-width: 600px;
			}
			&.disExp {
				span {
					font-size: 0.9em;
				}
				& { transition: background-color 0.2s; }
				&:hover {
					background-color: #e8fffd;
				}
			}
		}
		& i {
			font-size: 1.2em;
		}
	}
	
	#workPanel {
		div.unitOfWorkParent {
			span {
				width: unset;
			}
		}
	}
	
	#disasterPanel, #techPanel, #langPanel, #qualPanel {
		div.unitOfWorkBody {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			width: 90%;
			margin: 0px 15px 0px 15px;
			padding: 5px 20px 5px 20px;
			background-color: @wspLightGray;
		}
		div.unitOfWork {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
	}
}
@media screen and (max-width: 999px) {
	* {
		color: @gray3;
		font-size: 26pt;
		overflow-y: auto;
	}
	.container {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        font-size: 1.0em;
        background-color: @wspLightGray;
    }
    .container, html, body, form {
        height: 100%;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

	.modal {
		width: 90%;
		height: 90%;
		position: fixed;
		top: ~"calc( 10% / 2)";
		left: ~"calc( 10% / 2)";
		justify-content: flex-start;
		border: 0px;
		
		span {
			color: white;
		}
	}
	.modalPane {
		height: 100%;
		position: relative;
		top: unset;
		left: unset;
		border: 4px solid white;
	}
    .panelControl {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		
		span {
			font-size: 1.0em;
			display: block;
			padding: 2px 20px 2px 20px;
		}
		div {
			&.disExpBlock {
				flex: 0 0 auto;
				flex-direction: column;
				justify-content: flex-start;
			}
		}
    }
	
    input.box,
	select.box {
		color: @wspCharcoalBlue;
		background-color: white;
        min-width: unset;
        font-size: 1.4em;
        height: 70px;
		border: rgb(153, 153, 153) solid 0.5px;
		min-height: 20px;
		
		&.required {
			background-color: white;
		}
		
		&.tiny {
			width: 100px;
			min-width: 20px;
			font-size: 1.2em;
		}
		&.small {
			width: 120px;
			min-width: 30px;
			font-size: 1.2em;
		}
	}
	
	i {
		&.fa-question-circle {
			font-size: 2em;
			margin: 30px;
		}
	}
	div {
		&.scrRmobC {
			display: flex;
			flex-direction: column;
		}
		&.scrCmobR {
			display: flex;
			flex-direction: row;
		}
	
		&#notificationDiv {
			width: 90%;
			height: 90%;
			position: fixed;
			top: ~"calc( 20% / 2)";
			left: ~"calc( 10% / 2)";
			justify-content: flex-start;
			border: 0px;
			
			max-width: 90%;
			
			button {
				width: 90px;
				height: 90px;
				padding: 0px;
				
				align-items: center;
				justify-content: center;
				
				i {
					font-size: 0.5em;
				}
			}
			
			> div {
				overflow-y: auto;
				height: 100%;
				width: 90%;
				left: 0px;
				margin-top: 100px;
			}
			li { line-height: 50px; }
			span {
				&.bigNbold {
					color: @wspCharcoalBlue;
				}
			}
		}
	
		&.unitOfWorkParent {
			align-items: center;
			justify-content: flex-end;
			min-height: 60px;
			margin-bottom: -2px !important;
			width: 80%;
		}
		&.unitOfWorkLast {
			min-height: 25px;
			max-height: 25px;
			width: 80%;
		}
		&.unitOfWork {
			width: 90%;
			span {
				line-height: 40px;
			}
		}
	}
	button {
		&.closeModal {
			display: flex;
			justify-content: center;
			width: 60px;
			height: 60px;
			top: unset;
			left: unset;
			i {
				font-size: 0.6em;
				margin-top: 12px;
			}
		}
		&.addUow {
			display: flex;
			height: 100px;
			width: 190px;
			float: center;
			font-size: 3.0em !important;
			justify-content: center;
			border-radius: 70px;
			position: relative;
			padding: 0px;
			
			span  {
				padding: 2px 8px 2px 8px;
				margin-top: 3px;
				i.left {
					font-size: 0.4em;
					text-align: left;
					left: -20px;
					top: 0px;
				}
				i.right {
					font-size: 0.6em;
					text-align: right;
					right: -20px;
					top: 5px;
				}
			}
			i {
				margin-top: 8px;
				font-size: 0.7em;
				max-width: unset !important;
			}
		}
	}
	span {
		&.noneFound {
			font-weight: bold;
			font-style: italic;
			font-size: 1.1em;
		}
	}
	input {
		&.phonenumber {
			width: 500px !important;
			font-size: 1.5em !important;
			text-align: center;
		}
		&[type="radio"].toggle {
			& + label,
			& + label + label {
				margin: 4px;
				font-size: 0.85em;
				width: 100px;
				height: 80px;
				min-width: 30px;
				border-radius: 4px;
				box-shadow: none;
			}
			& + label.large {
				box-shadow: none;
			}
			& + label.huge {
				width: 60px;
				min-width: 60px;
				box-shadow: none;
			}
			&:checked + label {
				box-shadow: 3px 3px 6px #888;
			}
		}
	}
	img {
		&.worksheetImage {
			margin: 4px;
		}
	}
	
	#wspBanner {
		display: none !important;
	}
    #menu, #linksRow, .screen {
        display: none !important;
    }
	#mobileLinksRow {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		a {
			font-size: 1.8em;
			padding-bottom: 10px;
			color: @wspRed;
			font-weight: bold;
		}
	}
    #mobileMenu {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
        height: 70%;
        background-color: @white;
        border-radius: 16px;
        z-index: 5;
		
		& > div {
			display: flex;
			align-self: center;
			width: 95%;
			height: 95%;
			margin-bottom: 3%;
			background-color: @wspCharcoalBlue;
			border-radius: 16px;
		}
    }
    #wrapper {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
	#window {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: ~"calc(100% - 45px)";
	}
	#content {
		height: ~"calc(100% - 40px)";
		padding-top: 40px;
	}
	#panel {
		height: 100%;
		overflow-x: hidden;
    }
	#mobileHeader {
        display: flex;
        height: 85px;
		min-height: 85px;
        width: 100%;
        background-color: @wspRed;
        flex-direction: row;
        align-items: center;
		
		span {
			color: @white;
			font-size: 1.3em;
			margin-right: 10px;
			margin-left: 5px;
			i {
				color: @white;
				font-size: 1em;
				margin-left: 20px;
				margin-right: 20px;
			}
		}
    }
    #panelBreadcrumb {
        display: flex;
        height: 35px;
		min-height: 35px;
        background-color: @white;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    } 
	#examBreadcrumb {
		height: 40px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
    #mobileBreadcrumb {
        display: flex;
        height: 70px;
		min-height: 70px;
        background-color: @wspCharcoalBlue;
        flex-direction: row;
        align-items: center;
        justify-content: center;
		
		span {
			font-size: 1.4em;
			color: @white;
		}
    }
    #navControl {
        display: flex;
        min-height: 85px;
		max-height: 85px;
        background-color: @wspCharcoalDark;
        flex-direction: row;
        justify-content: space-between;
		
		button {
			font-size: 1.6em;
			width: 50%;
			margin: 0px 0px 0px 0px;
			background-color: @wspRed;
			color: @white;
		}
		button:disabled {
			cursor: not-allowed;
			color: @wspLightGray;
			background-color: @white;
		}
    }
	
	#workPanel,
	#disasterPanel,
	#techPanel,
	#langPanel,
	#qualPanel {
		div {
			&.tall {
				justify-content: flex-start;
			}
			
			&.disExp {
				width: 100%;
				align-items: center;
				line-height: 50px;
			}
			&.unitOfWorkParent {
				padding-bottom: 20px;
				padding-top: 10px;
				min-height: 10px;
				height: fit-content;
				width: 90%;
				justify-content: flex-start;
				max-height: unset;
				flex: 0 0 auto;
				
				line-height: 50px;
				
				> div.wide {
					max-width: unset;
				}
				& span {
					max-width: unset;
					padding: 5px 0px 5px 0px;
				}
			}
			&.unitOfWorkLast{
				padding: 0px 0px 0px 0px;
				height: fit-content;
				width: 90%;
				min-height: unset;
				max-height: unset;
				
				flex: 0 0 auto;
				
				i {
					text-align: center;
				}
				div.row {
					align-items: center;
				}
			}
			&.unitOfWorkBody {
				width: 80%;
				margin: -1px 15px -1px 15px !important;
				
				display: flex;
				flex: 1 1 auto;
				align-items: center;
				justify-content: center;
				
				background-color: #d9d9d6;
				margin: 0px 15px 5px 15px;
				padding: 5px 20px 5px 20px;
				min-height: 6px;
				
				flex: 0 0 auto;
			}
			&.unitOfWork {
				justify-content: flex-start;
				flex: 0 0 auto;
				max-height: unset;
				
				span {
					color: @black;
					padding: 2px 5px 1px 5px;
					i {
						font-size: 1.5em;
					}
				}
			}
		}
	}
	
    #introPanel {
        flex-direction: column;
    }
	#initPanelNameBlock {
		& {
			display: flex;
			flex-direction: column;
			margin: 0px 10px 10px 10px;
		}
		& button {
			height: 28px;
		}
		& > div {
			margin: 8px 8px 0px 0px;
		}
		& div {
			span {
				margin-bottom: 1px;
				font-weight: none;
			}
			input {
				width: 95%;
			}
		}
    }
	#initPanelExtraData {
        display: flex;
        flex-direction: column;
        margin: 0px 10px 10px 10px;
    
		& > div {
			margin: 8px 8px 0px 0px;
			> div {
				width: 100%;
				margin: 4px 0px 4px 0px;
			}
		}
		& label.button {
			width: 47%;
			font-size: 1.3em;
			height: 95px;
			
			 > span {
				font-size: 0.75em;
				padding-left: 0px;
				padding-right: 0px;
			}
		}
		& div input.boxWide {
			width: 410px;
		}
		& div.topSpace {
			margin-top: 15px;
		}
		& div.w30,
		& div.w70 {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
		& div.w30 div.part {
			width: 45%;
			margin: 0px 5px 0px 5px;
		}
	}
	#initPanel {
		overflow-y: auto;
		div#toggles {
			margin-top: 10px;
		}
	}
	#infoPanel {
        display: flex;
        flex-direction: column;
        margin: 0px 10px 10px 10px;
    
		& input.toggle + label {
			width: 43%;
			margin: 2px 4px 2px 4px;
			font-size: 0.85em;
			height: 110px;
			padding-left: 5px;
			padding-right: 5px;
		}
		& > label {
			margin-bottom: 15px;
		}
		& label.stretch {
			display: flex;
			flex-direction: column;
			width: 100%;
		}
		& label div input[type="text"] {
			width: 90%;
		}
		& div#toggles {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: flex-end;
			justify-content: center;
		}
		& div#birthDiv {
			flex-direction: column;
			align-items: left;
			
			> div {
				width: 100%;
				align-items: flex-start;
				flex-direction: column;
				margin-bottom: 15px;
			}
			
			input, select {
				width: 95%;
			}
		}
		& div.stretch {
			width: 100%;
		}
		& select.box {
			width: 48%;
			font-size: 1.4em;
		}
	}
    #howPanel {
        display: flex;
        flex-direction: column;
        margin: 0px 10px 10px 10px;
    
		& div#toggles {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding-bottom: 15px;
			padding-top: 10px;
		}
		& input.toggle + label {
			width: 45%;
			margin: 2px 2px 2px 2px;
			padding: 1px 5px 1px 5px;
		}
		& input[type="text"]{
			font-size: 1.8em;
			width: 95%;
		}
	}
	#emContactPanel {
		& div.unitOfWorkParent {
			height: fit-content;
			width: 90%;
			justify-content: center;
			overflow-y: hidden;
			margin-bottom: 20px !important;
		}
		& div.unitOfWorkLast {
			padding: 0px 0px 0px 0px;
			height: fit-content;
			width: 90%;
			min-height: unset;
			max-height: unset;
			
			i {
				text-align: center;
			}
			div.row {
				align-items: center;
			}
		}
		& div.unitOfWork {
			padding: 0px 20px 0px 20px;
			height: 75px;
			width: 90%;
			max-height: unset;
			
			& > div {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				width: 100%;
				
				> span.bigNbold {
					color: @wspLightGray;
				}
			}
			span {
				color: @gray6;
				
				&.row {
					display: flex;
					flex-wrap: none;
					i {
						margin: 0px 2px 0px 2px;
					}
				}
			}
			i {
				font-size: 1.3em;
				width: 50px;
				text-align: center;
			}
			div.row {
				align-items: center;
			}
		}
	}
	#phoneModal {
		& button.addUow { 
			margin-top: 0px;
		}
		& input[type='radio'].toggle + label {
			width: 45%;
			margin: 8px;
		}
		& div.modalPane > div > div {
			flex-wrap: wrap;
			&  > div {
				flex-wrap: wrap;
				margin-bottom: 5px;
				justify-content: flex-start;
			}
		}
		& div.toggles {
			flex-wrap: wrap;
			justify-content: center;
		}
		& div.primaryBlock {
			input[type='radio'].toggle + label  {
				width: 98%;
			}
			& > div.row {
				flex-direction: column;
			}	
		}
		& div.phoneBlock input {
			min-width: 200px;
		}	
		& div#textingPanel {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			self-align: center;
			
			width: 95%;
			
			div > span {
				font-size: 1.1em;
				align: center;
			}
			div.carrierList {
				height: ~"calc(100% - 300px)";
			}
			div.toggles {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-self: center;
				
				width: 95%;
			}
		}
		& div.bottom {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: flex-end;
		}
	}
	#contactPanel {
		display: flex;
		flex-direction: column;
        margin: 10px 10px 10px 10px;
		
		div.bottom {
			display: flex;
			height: 100%;
			flex-direction: row;
			justify-content: center;
			align-items: flex-end;
		}
	
		div.clicker {
			i {
				width: 55px;
			}
		}
		& span {
			font-size: 0.9em;
			max-width: unset; 
			
			&.bigNbold {
				font-size: 1.5em;
				color: @wspCharcoalDark;
				text-align: left;
				font-weight: none;
				margin-right: 10px;
				i {
					font-size: 1.7em;
					text-align: left;
				}
			}
			&.controls {
				min-width: 50px;
			}
		}
		& div.unitOfWorkParent {
			height: fit-content;
			width: 90%;
			justify-content: center;
			overflow-y: hidden;
			margin-bottom: 20px !important;
		}
		& div.unitOfWork {
			height: 75px;
			width: 90%;
			max-height: unset;
		}
		& div.unitOfWorkLast {
			padding: 0px 0px 0px 0px;
			height: fit-content;
			width: 90%;
			min-height: unset;
			max-height: unset;
			
			i {
				text-align: center;
			}
			div.row {
				align-items: center;
			}
		}
	}
	#contactModal {
		& button.addUow {
			margin-top: 10px;
		}
		& div > span {
			margin-top: 30px;
		}
		& div.phones {
			input[type='text']{
				width: 200px;
			}
		}
		& div.modalPane div.left {
			width: 47%;
		}
	}
	#mailPanel {
		flex-direction: column;
		
		button {
			&.grayButton {
				height: 100px;
				width: 120px;
				margin: 15px;
				
				&.copier {
					width: 160px;
					font-size: 0.9em;
					span {
						color: white;
					}
				}
				&:disabled {
					opacity: 0.4;
					color: gray;
					i {
						color: gray !important;
					}
				}
			}
		}
		
		input, select {
			font-size: 0.9em;
		}
		input.toggle + label {
			width: 120px;
			
			i { color: white; }
		}
		i {
			&.click {
				font-size: 1.8em;
				width: 120px;
				text-align: center;
				margin: 5px 0px 5px 0px;
			}
		}
		
		div {
			&.tall {
				justify-content: flex-start;
			}
			&.spaced {
				margin-left: 0px;
				margin-right: 0px;
			}
			&.unitOfWorkParent {
				width: 90%;
				height: 35px !important;
				min-height: 30px;
				padding: 5px 10px 5px 10px;
				margin: 5px 0px 0px 5px !important;
				justify-content: center;
				flex: 0 0 auto;
				
				span {
					font-weight: bold;
				}
			}
			&.unitOfWork {
				width: ~"calc(100% - 20px)";
				align-items: flex-start;
				padding: 5px 10px 5px 5px;
				margin: -1px 0px -1px 0px !important;
				max-height: unset;
				flex: 0 0 auto;
			
				div {
					width: 100%;
				}
				span {
					padding: 2px 7px 2px 7px;
					text-align: center;
					line-height: 45px;
					
					&.idSubName {
						min-width: 300px;
					}
				}
			}
			&.unitOfWorkLast {
				width: 90%;
				padding-top: 30px;
				padding: 5px 10px 5px 10px;
				margin: 0px 0px 5px 5px !important;
				flex: 0 0 auto;
			}
			&.wide {
				width: 95%;
			}
			
			&.w30 {
				width: 30%;
			}
			&.w70 {
				width: 70%;
			}
		
		}
	}
	#eduPanel {
		& > div {
			margin-bottom: 10px;
		}
		& span.bigNbold {
			padding-top: 10px;
		}
		& div.toggles {
			flex-wrap: wrap;
			justify-content: center;
		}
		& input[type='radio'] + label {
			width: 45%;
			margin: 2px 4px 2px 4px;
			font-size: 1.1em;
		}
	}
	#expModal {
		background-color: transparent;
	
		& div.bottom {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: flex-end;
		}
		& > div.modalPane {
			justify-content: flex-start;
			
			input.short {
				width: 150px;
				font-size: 1.4em;
			}
			& > div {
				align-items: center;
				&.column > div {
					margin-bottom: 10px;
				}
			}
			div.groupBatch {
				flex-direction: column;
				 > div {
					margin-bottom: 15px;
				}
			}
		}
		& input[type="text"].box, 
		& input[type="number"].box {
			font-size: 1.1em;
		}
		& select.box {
			font-size: 1.1em;
			width: ~"calc(100% - 40px)";
		}
		span {
			&.bigNbold {
				line-height: 100px;
			}
		}
	}
	#qualPanel {
		height: ~"calc(100% - 45px)";
		
		button.addUow {
			i {
				&.left {
					left: 0px;
				}
				&.right {
					right: 20px;
				}
			}
		}
		
		> div {
			height: 100%;
		}
		button.addUow {
			position: relative;
			margin-top: 0px;
		}
		div.controls {
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			
			width: 90%;
			margin-top: -20px;
			margin-left: 20px;
		}
		div.unitOfWorkParent {
			margin-bottom: 10px;
		}
		div.unitOfWorkBody {
			justify-content: flex-start;
			background-color: @wspLightGray;
			background-color: #d9d9d6;
			width: 80%;
			padding-bottom: 20px;
			padding-top: 10px;
			min-height: 40px;
			margin: 0px 15px 0px 15px !important;
			padding: 5px 20px 5px 20px;
			max-height: ~"calc(100% - 155px)";
			overflow-y: auto;
			
			flex-direction: column;
			flex: 0 1 auto;
		}
		div.unitOfWorkLast {
			padding: 0px 0px 0px 0px;
			height: fit-content;
			width: 90%;
			min-height: unset;
			max-height: unset;
			
			i {
				text-align: center;
			}
			div.row {
				align-items: center;
			}
		}
		div.qualBox {
			width: 90%;
			margin-bottom: 50px;
			
			div.item {
				span {
					color: #777;
				}
			}

			span {
				padding: 2px 20px 2px 10px;
			}
			span.big {
				font-size: 1.1em;
				margin-left: 0px;
			}
			span.bigNbold {
				font-size: 1.4em;
				color: @wspCharcoalBlue;
				margin-bottom: 10px;
				border-bottom: 1px solid gray;
				
				i {
					width: 70px;
				}
			}
		}
		div.item {
			margin-top: 5px;
			margin-bottom: 5px;
		}
	}
	#travelPanel {
		& div.toggles {
			width: 100%;
			margins: 30px 10px 45px 10px;
			flex-direction: row;
		}
		& div.toggles input[type='radio'] + label {
			width: 47%;
			font-size: 1.2em;
			padding-top: 5px;
			padding-bottom: 5px;
		}
		& > div {
			margin-bottom: 10px;
		}
	}
	#assessmentPanel {
		& div.unitOfWorkParent {
			height: 5px;
			min-height: 5px;
		}
		& div.unitOfWork {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			max-height: 100%;
			width: ~"calc(100% - 50px)";
			
			span {
				margin-bottom: 30px;
				color: #000;
				padding: 2px 0px 2px 0px;
				/* height: unset; */
				font-size: 0.8em;
				line-height: 32px;
				width: 100%;
			}
		}
	}
	#assessmentQuestionPanel {
		& > div {
			width: 100%;
		}
		& div.toggles {
			flex-wrap: wrap;
			width: 100%;
			margin-top: 20px;
			justify-content: center;
			flex-direction: row;
			
			input[type='radio'] + label {
				height: 95px;
				width: 45%;
				font-size: 1.0em;
				margin-bottom: 10px;
				border-radius: 10px;
				
				p { 
					color: white; 
					
					i {
						color: white;
					}
				}
			}
		}
		& span#assessmentInjection p {
			align: center;
		}
	}
	#cheatsheetModal {
		button.closeModal {
			font-size: 2em;
		}
		ol li {
			margin-left: 50px;
		}
	}
}