/**********************************************************************************************/
/**********************************************************************************************/
/***																						***/
/***	SERVICES 								   											***/
/***	Property of U.S. OMNI & TSACG Compliance Services									***/
/***	73 Eglin Parkway NE Suite 202														***/
/***	Fort Walton Beach, FL 32548															***/
/***	Copyright © 2025  U.S. OMNI & TSACG Compliance Services.  All Rights Reserved.		***/
/***																						***/
/**********************************************************************************************/
/**********************************************************************************************/

html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	min-height: 100%;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	font-family: Verdana, Tahoma, sans-serif;
	position: relative;
	background-color: #ffffff;
}

.page {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px 0px 35px 0px;
}

.progressArea {
	position: fixed; 
	top: 49%; 
	left: 33%; 
	z-index: 10000; 
	width: 33%; 
	height: 100px;
	color: #555555; 
	background: transparent;
	text-align: center; 
}

.hide {
	display: none;
}

.parentDisabled {
	position: fixed;
	top: 0;
	left: 0;
	background: #000;
	opacity: 0.5;
	z-index:998;
	height: 100%;
	width: 100%;
}

.processingImage {
	z-index: 9000;
}

.confirmbox {
	text-align: center;
	position: fixed;
	color: black;
	background-color: white;
	border: 3px solid #C9C9C9;
	-webkit-box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.45);
	-moz-box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.45);
	box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.45);
	box-sizing: border-box;
	padding: 25px 10px;
	top: 30%; 
	left: 35%;
	z-index: 5000; 
	width: 30%;
	border-radius: 4px;
}

.confirmbox h2 {
	margin-top: 0px;
}

.jsFormBox {
	text-align: center;
	position: fixed;
	color: #555555;
	background-color: white;
	border: 3px solid #C9C9C9;
	-webkit-box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.45);
	-moz-box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.45);
	box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.45);
	box-sizing: border-box;
	padding: 25px 10px;
	top: 20%; 
	left: 15%;
	z-index: 5000; 
	width: 70%;
	border-radius: 4px;
}

.jsFormBox h2 {
	margin-top: 0px;
	font-size: 18px;
	font-weight: bold;
	color: #b51b1f;
}

.jsWarning {
	display: none;
}


/*======================================================================================*/
/*									  HEADER SECTION									*/
/*======================================================================================*/
.header {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100px;
	margin: 0px auto;
	border-bottom: 1px solid #bcbcbc;
	/* box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.18), 0 2px 4px 0 rgba(0, 0, 0, 0.08); */
	box-shadow: 0px 2px 4px 0px rgba(35, 101, 185, 0.18), 0 2px 8px 0 rgba(35, 101, 185, 0.08);
	z-index: 5000;
}

.headerLogo {
	width: 90%;
	max-width: 185px;
	max-height: 90px;
}

.headerIconArea {
	font-size: 34px;
	color: #777777;
}

.headerIconArea i {
	margin: 5px 15px;
}

.headerIconArea i:hover {
	cursor: pointer;
	color: #2365B9;
	font-size: 38px;
}

.headerIcon2Area {
	font-size: 34px;
	color: #2365B9;
}

.headerIcon2Area i {
	margin: 5px 15px;
}

.headerIcon2Area i:hover {
	cursor: pointer;
	color: #777777;
	font-size: 38px;
}

.iconArea,
.iconArea a {
	font-size: 34px;
	color: #777777;
	text-align: center;
}

.iconArea a:hover i,
.iconArea i:hover {
	cursor: pointer;
	color: #2365B9;
	font-size: 38px;
	/*transform: scale(1.10, 1.10); */
}

.iconArea2 {
	font-size: 28px;
	color: #2365B9;
	text-align: center;
}

.iconArea2 i:hover {
	cursor: pointer;
	color: #777777;
	font-size: 34px;
	/*transform: scale(1.10, 1.10); */
}

.headingLine {
	font-size: 26px;
	text-shadow: 1px 2px rgba(35, 101, 185, 0.18);
}

.welcomeLine {
	font-size: 22px;
	text-shadow: 1px 2px rgba(35, 101, 185, 0.18);
}
/*======================================================================================*/
/*								   /END HEADER SECTION									*/
/*======================================================================================*/


/*======================================================================================*/
/*									  FOOTER SECTION									*/
/*======================================================================================*/
.footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 25px;
	margin: 0px auto;
}
/*======================================================================================*/
/*								   /END FOOTER SECTION									*/
/*======================================================================================*/


/*======================================================================================*/
/*								  LEFT MENU BAR SECTION									*/
/*======================================================================================*/
.leftMenuBar {
	display: none;
	position: absolute;
	width: 75px;
	height: calc(100% - 100px);
	margin-top: -10px;
	z-index: 1000;
	border-right: 1px solid #bcbcbc;
	background-color: #ffffff;
	overflow-y: auto;
}

.leftMenuShow {
	display: block;
}

.leftSideMenu {
	text-align: center;
}

.leftSideMenu button {
	border: 0px;
}

.leftSideMenu button:hover {
	background-color: #bcbcbc;
	color: #ffffff;
}

.leftSideMenu button:hover i {
	color: #ffffff;
}

.leftSideMenu i {
	font-size: 24px;
	color: #777777;
	text-align: center;
}
/*======================================================================================*/
/*							   /END LEFT MENU BAR SECTION								*/
/*======================================================================================*/


/*======================================================================================*/
/*								  CENTER CONTENT SECTION								*/
/*======================================================================================*/
.centerContent {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding-top: 110px;
}

.mainContent {
	width: 100%;
	margin: 10px auto;
}

.formContent {
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: flex-start;
    justify-content: center;
}

.instructionSection {
    justify-content: center;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: flex-start;
    max-height: 100%;
}

.uploadFormSection {
    justify-content: center;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    max-height: 100%;
}

#employerUploadForm {
	width: 80%;
	margin: 0px auto;
}

.instructionBox {
	width: 90%;
	margin: 0px auto 25px auto;
	background: #f5f5f5;
	color: #666666;
	border: 1px solid #e9e9e9;
	-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.19), 0 2px 4px 0 rgba(0, 0, 0, 0.05),
		0px -1px 1px 0px rgba(0, 0, 0, 0.19), 0 -2px 4px 0 rgba(0, 0, 0, 0.05),
		1px 0px 1px 0px rgba(0, 0, 0, 0.19), 2px 0px 4px 0 rgba(0, 0, 0, 0.05),
		-1px 0px 1px 0px rgba(0, 0, 0, 0.19), -2px 0px 4px 0 rgba(0, 0, 0, 0.05);
	-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.19), 0 2px 4px 0 rgba(0, 0, 0, 0.05),
		0px -1px 1px 0px rgba(0, 0, 0, 0.19), 0 -2px 4px 0 rgba(0, 0, 0, 0.05),
		1px 0px 1px 0px rgba(0, 0, 0, 0.19), 2px 0px 4px 0 rgba(0, 0, 0, 0.05),
		-1px 0px 1px 0px rgba(0, 0, 0, 0.19), -2px 0px 4px 0 rgba(0, 0, 0, 0.05);
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.19), 0 2px 4px 0 rgba(0, 0, 0, 0.05),
		0px -1px 1px 0px rgba(0, 0, 0, 0.19), 0 -2px 4px 0 rgba(0, 0, 0, 0.05),
		1px 0px 1px 0px rgba(0, 0, 0, 0.19), 2px 0px 4px 0 rgba(0, 0, 0, 0.05),
		-1px 0px 1px 0px rgba(0, 0, 0, 0.19), -2px 0px 4px 0 rgba(0, 0, 0, 0.05);
}

.instructionInnerBox {
	width: 90%;
	margin: 15px auto;
	text-align: center;
	color: #666666;
	font-size: 14px;
}

.instructionInnerBox ul {
	width: 80%;
	margin: 0px auto;
	list-style-type: none;
	text-align: left;
	font-size: 14px;
	font-size: normal;
}

.instructionInnerBox i {
	color: #00549e;
	font-weight: bold;
	margin-right: 10px;
}

.fileErName {
	font-style: italic;
}

.uploadResultMsg {
	width: 100%;
	margin: 0px auto;
	color: red;
	text-align: center;
}

.maintenanceMsg {
	width: 100%;
	margin: 100px auto 20px auto;
	color: #00549e;
	text-align: center;
}

.instructEmail,
.instructEmail a {
	color: #00549e;
}

.instructHeading {
	font-weight: bold;
	color: #00549e;
	font-size: 18px;
}

label,
.instructHeading {
	font-weight: bold;
	color: #00549e;
}

input[type=button],
button {
	background-color: #00549e !important;
}

input[type=button]:hover,
button:hover {
	opacity: .7;
}

/*======================================================================================*/
/*							   /END CENTER CONTENT SECTION								*/
/*======================================================================================*/


/**************************************************************************************************************************************************************/
/*																																							  */
/*					  								    SMALL DEVICES (LANDSCAPE PHONES, LESS THAN 768PX)													  */
/*																																							  */
/**************************************************************************************************************************************************************/
@media (max-width: 768px) {
	.formContent {
		display: block;
		align-items: flex-start;
		justify-content: center;
	}

	.instructionSection {
		display: block;
		width: 100%;
		margin: 0px auto 15px auto;
		max-height: 100%;
	}

	.uploadFormSection {
		display: block;
		width: 100%;
		margin: 15px auto;
		max-height: 100%;
	}
}