*{ padding: 0; margin: 0; box-sizing: border-box; -webkit-box-sizing: border-box;}
body { font-family: 'Arial'; font-size: 16px; line-height: 24px; }
a { text-decoration: none; }
h1{ padding: 0; font-size: 26px; line-height: 32px; font-weight: 600; margin: 0 0 15px 0;color: #3665b0; }
@media (max-width: 767px){
	h1{ padding: 0; font-size: 16px; line-height: 20px; font-weight: bold; margin: 0 0 15px 0;color: #3665b0; }
}
h2{ padding: 0; font-size: 20px; line-height: 26px; font-weight: 600; margin: 0 0 15px 0; color: #3665b0;}
h3{ padding: 0; font-size: 18px; line-height: 24px; font-weight: 600; margin: 0 0 15px 0; color: #3665b0;}
h4{ padding: 0; font-size: 16px; line-height: 22px; font-weight: 600; margin: 0 0 10px 0; color: #3665b0;}
h5{ padding: 0; font-size: 14px; line-height: 20px; font-weight: 600; margin: 0 0 10px 0; }
h6{ padding: 0; font-size: 12px; line-height: 18px; font-weight: 600; margin: 0 0 10px 0; }
p {margin: 0 0 10px 0; padding: 0;}
ul { margin: 0 0 0 15px; }
.btn { border: 1px solid #062351; display: inline-block; margin: 0 0 10px 0; background: #3665b0; color: #ffffff; text-transform: uppercase; padding: 10px 15px; }
.btn:hover { background: #062351; }
.text-center { text-align: center; }
.row { margin-left: -15px; margin-right: -15px; clear:both; }
.col1, .col2, .col3, .col4, .col5 { float: left; width: 100%; padding: 0 15px; }
.header { width: 100%; float: left; background: #efefef; border-bottom: 3px solid #ddd; display: flex; align-items: center; position: fixed; padding: 10px; z-index: 99999;}
.headWrap { display: flex; align-items: center; width: 100%;} 
.menuIcon { width: 27px; }
.logoWrap{ font-size: 16px; line-height: 20px;font-weight: bold; display: flex; align-items: center; padding-right: 15px;}
.logoWrap .logo { max-height: 40px; width: auto; margin: 0 15px 0 0;}
@media (min-width: 768px){
	.col2, .col3, .col4, .col5 { float: left; width: 50%; padding: 0 15px; }
	.logoWrap{ font-size: 24px; line-height: 30px; }
	.menuIcon { display: none; }
}
@media (min-width: 1024px){
	.col3 { float: left; width: calc(100% / 3); padding: 0 15px; }
	.col4 { float: left; width: 25%; padding: 0 15px; }
	.col5 { float: left; width: 20%;  padding: 0 15px;}
}
/* breadcrumb */
.breadcrumbWrap {width: 100%; float: left; margin-bottom: 10px; }
.breadcrumb { padding: 0; margin: 0; list-style: none;}
.breadcrumb > li { display: inline-block; }
.breadcrumb > li::before { content: '>'; }
.breadcrumb > li:first-child::before { display: none; }
@media(max-width: 767px){
	.breadcrumbWrap { display: none; }
}
/* logout */
.logout { width: 100px; margin-left: auto;}
.logout > a{ display: flex; align-items: center; color: #000; }
.logout > a > span { margin-left: 5px; }
@media (max-width: 767px){
	.logout { width: 27px; margin-right: 15px; }
	.logout > a > span { display: none; }
}
/* pagination */
.paginationWrap {}
.pagination { padding: 0; margin: 0; list-style-type: none; }
.pagination > li { display: inline-block; position: relative;}
.pagination > li > a { display: block; padding: 5px 10px; background: #3665b0; color: #ffffff; }
.pagination > li:nth-child(2) > a { background: #123772; }
.pagination > li > ul { padding: 0; margin: 0; list-style-type: none; display: none; background: #3665b0; }
.pagination > li:hover > ul { display: block; position: absolute; left: 0; bottom: 100%; width: 100%; z-index: 9; }
.pagination > li > ul li { display: block; }
.pagination > li > ul li a { display: block; padding: 2px 10px; color: #ffffff; font-size: 14px; line-height: 20px; }
.pagination > li > ul > li{ display: block;  }
/* ContentArea */
.contentArea{ width: 100%; float: left; position: relative; padding-top: 62px; }
.sidebar {position: fixed;  font-size: 14px; line-height: 22px;}
.sidebar ul {padding: 0; margin: 0; list-style: none; background: url('images/dot.png') repeat-y 7px top;}
.sidebar > ul { height: auto; max-height: 100%;/* overflow-y: scroll;  */}
.sidebar ul::before { }
.sidebar ul li { padding: 0 0 0 20px; position: relative; background: url('images/file.png') no-repeat 2px 5px;  }
.sidebar ul li.submenu { background: url('images/folder-icon2.png') no-repeat left 5px; }
.sidebar a { color: #ffffff; }
.sidebar a.active {color: #ccc; font-weight: bold;}
.sidebar ul.dropdown {display: none;}
.sidebar ul.dropdown.open { display: block !important; }
@media (max-width: 767px){
	.sidebar { width: 0px; left: 0; top: 0; z-index: 99999; height: 100%; background: rgba(0,0,0,.9); overflow: hidden; transition: 0.5s; }
	.sidebar > ul { padding: 30px; width: 300px; }
	.sidebar .closeNav { position: absolute; right: 10px; top: 5px; color: #ffffff; text-transform: uppercase; font-weight: bold; }
}
@media (min-width: 768px){
	.sidebar { width: 200px; float: left; height: calc(100vh - 60px); z-index: 99998; background: #3665b0; padding: 15px 30px ; }
	.sidebar .closeNav { display: none; }
}
@media (min-width: 1024px){
	.sidebar { width: 300px; }
}
/* mainContent styling */
.mainContent { width: 100%; float: right; padding: 30px; }
#loginpage .mainContent { width: 100%; max-width: 1200px; float: none; margin: 0 auto; }
@media (max-width: 767px){
	#loginpage { padding-top: 0; }
}
@media (min-width: 768px){
	.mainContent { width: calc(100% - 200px);}
}
@media (min-width: 1024px){
	.mainContent { width: calc(100% - 300px);}
}
/* form styling */
form { padding: 30px; margin: 0; font-size: 14px; line-height: 22px; width: 100%; float: left;}
form h3 { text-align: center; }
form p { margin: 0; }
form input.forminput,
form select,
form textarea { border: 1px solid #888888; border-radius: 5px; margin: 0 0 15px 0; box-shadow: none; width: 100%; float: left; padding: 10px 15px; background: #eeeeee; }
form input[type="submit"],
form input[type="reset"],
form input[type="button"]{ border: 1px solid #062351; border-radius: 5px; background: #3665b0; color: #ffffff; text-transform: uppercase; padding: 10px 15px; }
input[type="submit"]:hover { background: #062351; }
form .checkbox, 
form .radio { margin: 0 15px 15px 0; display: inline-block; } 
form .photoBox,
form .signatureBox { width: 100%; display: block; margin: 0 0 15px 0; }
form .photoBox .photo,
form .signatureBox .signature { width: 160px; height: 200px; border: 1px solid #000; display: block; margin: 0 0 5px 0;}
form .photoBox .logo{ width: 170px; height: 120px; border: 1px solid #000; display: block; margin: 0 0 5px 0;}

.loginForm { border: 1px solid #ddd; box-shadow: 0 0 2px #888; background: #efefef; }
.loginForm input[type="submit"]{ width: 100%; margin-bottom: 15px; }
.loginBox { width: 100%; float: left; margin-bottom: 30px;}
.loginContent { width: 100%; float: left; }
.ui-button { padding:  10px 15px; border: 1px solid #888888; border-radius: 5px; background: #eeeeee; }
.ui-checkboxradio-label { margin-bottom: 15px; margin-right: 15px; }
#tabs { width: 100%; float: left; }
.ui-tabs .ui-tabs-panel { width: 100%; float: left; }
.tabContainer { width: 100%; float: left; }
#tabs form { padding: 0; }
@media (min-width: 768px){
	.loginBox { width: 40%;}
	.loginContent { width: 60%; padding-left: 30px; }
}
@media (min-width: 1024px){
	.loginBox { width: 30%;}
	.loginContent { width: 70%; }
}
/* table Styling */
table { width: 100%; float: left; border: 1px solid #000; margin: 0 0 10px 0; padding: 0; font-size: 10px; }
table thead { width: 100%; background: #3665b0; color: #ffffff;}
table tbody { width: 100%;}
table tfoot  { width: 100%; background: #3665b0; color: #ffffff; }
table th { font-weight: 400; /*text-transform: capitalize;*/ padding: 10px; border:1px solid #123772} 
table td { border: 1px solid #ddd; padding:  5px 10px; }

.tableWrap { width: 100%; float: left;}
.tableTop { display: flex; width: 100%; align-items: center; justify-content: space-between; }
.tableBottom { display: flex; width: 100%; align-items: center; justify-content: center; }
@media (max-width: 767px){
	.tableWrap { overflow-y: hidden; overflow-x: scroll; margin: 0 0 30px; }
}
.txt-center { text-align: center; }
#submit{
    cursor: pointer;
}