* {
	user-select: none;
	-webkit-user-select: none;
}

html, body {
	background-color: #FFF;
	margin: 0px;
	padding: 0px;
	font-size: 14px;
	font-family: "Roboto Condensed";
	height:100%;
    width: 100%;
    position: relative;
}

@font-face {
    font-family: "Roboto Condensed";
    src: url("/assets/web_fonts/Roboto_Condensed/RobotoCondensed-VariableFont_wght.ttf") format("truetype");
}


/* --------------- LEFT BODY WRAPPER --------------- */

	#leftBodyWrapper {
		width: 300px;
		background-color: #222222;
		height: 100%;
		min-height: 100%;
		float: left;
		user-select: none;
		-webkit-user-select: none;
		max-height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}
	#logoWrapper {
		width: 100%;
	}
	#logoWrapper img {
		width: 150px;
		margin: 30px 75px 30px 75px;
		transition: ease all 0.2s;
		cursor: pointer;
	}
	#logoWrapper img:hover {
		transform: scale(1.3);
		transition: ease all 0.2s;
	}


		/* --------------- PRIMARY NAVIGATION --------------- */

			#primaryNavigation {
				margin: 0px;
				padding: 0px;
				list-style-type: none;
			}
			#primaryNavigation > li {
				margin: 10px;
				padding: 16px 16px 16px 20px;
				cursor: pointer;
				color: #888888;
				transition: ease all 0.2s;
				border-radius: 8px;
				background: transparent;
			}
			#primaryNavigation > li:hover {
				background-color: #0066FF;
				color: #FFFFFF;
				transition: ease all 0.2s;
			}
			#primaryNavigation > li.active {
				background-color: #0066FF;
				color: #FFFFFF;
				transition: ease all 0.2s;
			}
			#primaryNavigation > li:last-child:hover {
				background-color: #F00;
				color: #FFFFFF;
				transition: ease all 0.2s;
			}


		/* --------------- SECONDARY NAVIGATION --------------- */

			.subPrimaryNavigation {
				margin: 20px;
				margin-bottom: 0px;
				margin-top: -10px;
				padding: 0px;
				list-style-type: none;
				background-color: #555555;
				border-radius: 0px 0px 8px 8px;
				display: none;
				box-shadow: inset 0px 15px 10px -10px #333333;
			}
			.subPrimaryNavigation > li {
				padding: 16px 16px 16px 20px;
				cursor: pointer;
				color: #AAAAAA;
				transition: ease all 0.2s;
			}
			.subPrimaryNavigation > li:last-child {
				border-radius: 0px 0px 8px 8px;
			}
			.subPrimaryNavigation > li:hover {
				background-color: #838383;
				color: #FFFFFF;
				transition: ease all 0.2s;
			}





/* ---------- RIGHT BODY WRAPPER ---------- */

	#rightBodyWrapper {
		width: calc(100% - 300px);
		height: 100%;
		overflow-y: auto;
        overflow-x: hidden;
		float: right;
		background-color: rgb(245,245,245);
        box-sizing: border-box;
	}
	#pageHeaderWrapper {
		width: 100%;
		background-color: #ffffff;
		padding: 15px;
		padding-bottom: 0px;
	}
	#pageTitle {
		font-size: 22px;
		font-weight: bold;
		color: #222222;
		margin: 0px;
		padding: 0px;
		padding-bottom: 15px;
		font-family: "Roboto Condensed" !important;
	}
	#secondaryNavigation {
		margin: 0px;
		padding: 0px;
		list-style-type: none;
	}
	#secondaryNavigation li {
		display: inline-block;
		padding: 10px 15px 10px 15px;
		cursor: pointer;
		border-bottom: 2px solid transparent;
		color: #444444;
		transition: ease all 0.2s;
	}
	#secondaryNavigation li:hover, #secondaryNavigation li.active {
		color: #0066FF;
		border-bottom: 2px solid #0066FF;
		transition: ease all 0.2s;
	}
	#pageContent {
		width: 100%;
		max-width: 1300px;
		padding: 20px;
		box-sizing: border-box;
	}
	.left {
		float: left;
		width: 49%;
		margin-right: 2%;
	}
	.right {
		float: left;
		width: 49%;
	}





/* ---------- SECTION STYLING ---------- */

	.contentSection {
		background-color: #ffffff;
		padding: 20px;
		border-radius: 4px;
		box-sizing: border-box;
		box-shadow: 0px 0px 7px 0px #DDD;
	}
    .contentSection .body {
        padding: 20px;
    }
	.contentSection h1.contentTitle {
		margin: 0px;
		padding: 0px;
		padding-bottom: 20px;
		font-size: 18px;
		color: #444;
		font-weight: 500;
	}
    .contentSection h2 {
        margin: 0px;
        padding: 0px;
        font-size: 24px;
        font-weight: 500;
    }
    .contentSection h3 {
        margin: 0px;
        padding: 0px;
        font-size: 16px;
        color: #666;
        font-style: italic;
        font-weight: 500;
    }
	.contentSection p {
		margin: 0px;
		padding: 0px;
	}
    span.link {
        color: #09F;
        cursor: pointer;
    }
	.contentSection .popup_hover {
		border: 1px solid transparent;
		transition: ease all 0.2s;
		border-radius: 4px;
		padding: 10px;
		display: inline-block;
		user-select: none;
		-webkit-user-select: none;
		cursor: default;
		box-sizing: border-box;
	}
	.contentSection .popup_hover:last-child {
		margin-right: 0px;
	}
	.contentSection .popup_hover.link:hover td {
		color: #06F;
	}
	.contentSection .popup_hover:hover {
		transition: ease all 0.2s;
		border: 1px solid #ddd;
		box-shadow: 5px 10px 20px -10px #eee !important;
		transform: scale(1.1);
		background-color: #fff;
	}

    .stepper-wrapper {
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        font-size: 12px;
        user-select: none;
        -webkit-user-select: none;
        cursor: default;
    }
    .stepper-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
    }
    .stepper-item::before {
      position: absolute;
      content: "";
      border-bottom: 2px solid #ccc;
      width: 100%;
      top: 20px;
      left: -50%;
      z-index: 2;
    }
    .stepper-item::after {
      position: absolute;
      content: "";
      border-bottom: 2px solid #ccc;
      width: 100%;
      top: 20px;
      left: 50%;
      z-index: 2;
    }
    .stepper-item .step-counter {
      position: relative;
      z-index: 5;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #ccc;
      margin-bottom: 6px;
    }
    .stepper-item.active {
      font-weight: bold;
    }
    .stepper-item.completed .step-counter {
      background-color: #4bb543;
    }
    .stepper-item.completed::after {
      position: absolute;
      content: "";
      border-bottom: 2px solid #4bb543;
      width: 100%;
      top: 20px;
      left: 50%;
      z-index: 3;
    }
    .stepper-item:first-child::before {
      content: none;
    }
    .stepper-item:last-child::after {
      content: none;
    }





/* ---------- CUSTOMER ITEM STYLING ---------- */

div.customerItem {
	float: left;
	display: inline-block;
	padding: 10px;
	border-radius: 6px;
	border: 1px solid #DDD;
	border-top: 4px solid #0A0;
	margin-right: 20px;
	width: 350px;
	user-select: none;
	-webkit-user-select: none;
	cursor: pointer;
	transition: ease all 0.2s;
	background-color: #FFF;
}

div.customerItem:hover {
	transform: scale(1.09);
	transition: ease all 0.2s;
	background-color: #EEE;
}





/* ---------- TABLE STYLING ---------- */

	table.tableStyle1 {
		width: 100%;
		border: none;
		border-spacing: 0px;
		box-sizing: border-box;
	}

	table.tableStyle1 thead {
		border-bottom: 1px solid #444;
	}

	table.tableStyle1 thead th {
		padding: 15px;
		font-weight: 500;
		border-bottom: 1px solid #EEE;
		border-right: 1px solid #EEE;
		text-transform:  uppercase;
		text-align: left;
		white-space: nowrap;
	}

	table.tableStyle1 thead th:last-child {
		border-right: 0px;
	}

	table.tableStyle1 tbody tr {
		cursor: pointer;
		transition: ease all 0.2s;
	}

	table.tableStyle1 tbody tr:hover {
		background-color: #F5F5F5;
		transition: ease all 0.2s;
	}

	table.tableStyle1 tbody td {
		padding: 15px;
		border-bottom: 1px solid #EEE;
		color: #666;
	}





/* ---------- STATUS BUTTON STYLING ---------- */

	div.statusGreen {
		background-color: #90FF90;
		color: #0A0;
		font-size: 12px;
		border-radius: 4px;
		padding: 5px;
		display: inline;
	}

	div.statusGold {
		background-color: #FFD879;
		color: #B27900;
		font-size: 12px;
		border-radius: 4px;
		padding: 5px;
		display: inline;
	}

	div.statusRed {
		background-color: #FFBFC0;
		color: #A00;
		font-size: 12px;
		border-radius: 4px;
		padding: 5px;
		display: inline;
	}

	div.statusTeal {
		background-color: #B9FFFF;
		color: #008B8B;
		font-size: 12px;
		border-radius: 4px;
		padding: 5px;
		display: inline;
	}

	div.statusGrey {
		background-color: #CECECE;
		color: #444444;
		font-size: 12px;
		border-radius: 4px;
		padding: 5px;
		display: inline;
	}





/* ---------- BUTTON STYLING ---------- */

	button {
		padding: 10px;
		background-color: #06F;
		color: #FFF;
		border-radius: 5px;
		border: 1px solid #06F;
		transition: ease all 0.2s;
		cursor: pointer;
	}

	button:hover {
		transition: ease all 0.2s;
		background-color: #0061A2;
        border: 1px solid #0061A2;
	}

    button.clearButton {
        background-color: transparent;
        color: #444;
        border: 1px solid transparent;
    }

    button.clearButton:hover {
        background-color: transparent;
        transition: ease all 0.2s;
        color: #A00;
    }

    button.clearButtonBorder {
        background-color: transparent;
        color: #444;
        border: 1px solid #444;
    }

    button.clearButtonBorder:hover {
        background-color: transparent;
        transition: ease all 0.2s;
        color: #06F;
        border: 1px solid #06F;
    }





/* ---------- POPUP MODAL STYLING ---------- */

	.modalBackground {
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.8);
		z-index: 9999;
		display: none;
		position: fixed;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		min-height: 100%;
	}

	.modalContentWrapper {
		width: 1100px;
		border-radius: 6px;
		margin: auto;
		box-sizing: border-box;
		box-shadow: 2px 2px 20px #111;
		position: relative;
		margin-top: 100px;
		display: none;
	}

	.modalHeader {
		padding: 15px;
		border-bottom: 1px solid #CCC;
		font-size: 18px;
		background-color: #06F;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		color: #FFF;
	}

	.modalContent {
		background-color: #FFF;
		padding: 15px;
		min-height: 100px;
		max-height: 400px;
		overflow-y: auto;
	}

	.modalContent h1 {
		margin: 0px;
		padding: 0px;
		font-size: 22px;
		margin-bottom: 10px;
	}

	.modalContent h2 {
		margin: 0px;
		padding: 0px;
		font-size: 16px;
		margin-bottom: 7px;
		font-weight: 500;
	}

    .modalContent p {
		margin: 0px;
		padding: 0px;
	}

    .modalContent hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #ccc;
        margin: 20px 0px;
        padding: 0;
    }

	.modalFooter {
		background-color: #EEE;
		padding: 15px;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
        text-align: right;
	}





/* --------------- INPUT STYLING --------------- */

		input {
			box-sizing: border-box;
			padding: 5px;
			width: 300px;
			line-height: 16px;
			outline: none;
		}
		textarea {
			border: 1px solid #999999;
			line-height: 16px;
			width: 100%;
			height: 50px;
			box-sizing: border-box;
			resize: none;
			padding: 5px;
			outline: none;
		}
		select {
			box-sizing: border-box;
			padding: 5px;
			width: 300px;
			outline: none;
			-webkit-appearance: none;
			line-height: 16px;
			background-color: transparent;
		}
		input.disabled, select.disabled, textarea.disabled {
			opacity: 0.6;
			cursor: pointer;
			pointer-events: none;
		}

		.input-field {
			position: relative;
			box-sizing: border-box;
			width: 100%;
			min-width: 50px;
		}
		.input-field input, .input-field select {
			width: 100%;
			padding: 10px;
			border-radius: 6px;
			font-size: 12px;
			border: 1px solid #CCC;
			background: transparent;
			color: #333;
			outline: none;
			transition: ease all 0.2s;
		}
		.input-field label {
		  position: absolute;
		  top: 50%;
		  left: 10px;
		  transform: translateY(-50%);
		  color: #999;
		  font-size: 12px;
		  pointer-events: none;
		  transition: 0.2s;
		}
		input:focus, select:focus {
			border: 1px solid var(#0066FF);
			transition: ease all 0.2s;
		}
		input:focus ~ label, select:focus ~ label {
			color: var(#0066FF);
		}
		input:focus ~ label, select:focus ~ label,
		input:valid ~ label, select:valid ~ label {
			top: 0;
			left: 7px;
			font-size: 10px;
			padding: 0 3px;
			background: #FFF;
		}

		.switch {
		  position: relative;
		  display: inline-block;
		  width: 32px;
		  height: 20px;
		}
		.switch input {
		  opacity: 0;
		  width: 0;
		  height: 0;
		}
		.slider {
		  position: absolute;
		  cursor: pointer;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: #ccc;
		  -webkit-transition: .4s;
		  transition: .4s;
		}
		.slider:before {
		  position: absolute;
		  content: "";
		  height: 12px;
		  width: 12px;
		  left: 4px;
		  bottom: 4px;
		  background-color: white;
		  -webkit-transition: .4s;
		  transition: .4s;
		}
		input:checked + .slider {
		  background-color: var(--theme-color);
		}
		input:focus + .slider {
		  box-shadow: 0 0 1px var(--theme-color);
		}
		input:checked + .slider:before {
		  -webkit-transform: translateX(12px);
		  -ms-transform: translateX(12px);
		  transform: translateX(12px);
		}
		.slider.round {
		  border-radius: 34px;
		}
		.slider.round:before {
		  border-radius: 50%;
		}