/*!
*
* application specific styles
*
*/

/* ----------------------------------------------------------------------------------------------------------
   Basic Heights and Widths
-----------------------------------------------------------------------------------------------------------*/

/* heights */
.ui-height-1 {
	height: 	1px;
}
.ui-height-2 {
	height: 	2px;
}
.ui-height-3 {
	height: 	3px;
}
.ui-height-4 {
	height: 	4px;
}
.ui-height-5 {
	height: 	5px;
}
.ui-height-10 {
	height: 	10px;
}
.ui-height-15 {
	height: 	15px;
}
.ui-height-20 {
	height: 	20px;
}
.ui-height-25 {
	height: 	25px;
}
.ui-height-50 {
	height: 	50px;
}
.ui-height-75 {
	height: 	75px;
}
.ui-height-100 {
	height: 	100px;
}

/* widths */
.ui-width-50 {
	width: 		50px;
}
.ui-width-100 {
	width: 		100px;
}
.ui-width-200 {
	width: 		200px;
}
.ui-width-250 {
	width: 		250px;
}
.ui-width-500 {
	width: 		500px;
}
.ui-width-750 {
	width: 		750px;
}

/* max widths */
.ui-max-width-50 {
	max-width: 	50px;
}
.ui-max-width-100 {
	max-width: 	100px;
}
.ui-max-width-200 {
	max-width:	200px;
}
.ui-max-width-250 {
	max-width: 	250px;
}
.ui-max-width-350 {
	max-width: 	350px;
}
.ui-max-width-500 {
	max-width: 	500px;
}
.ui-max-width-750 {
	max-width: 	750px;
}

/* special width classes */
.ui-page-refresh-popup {
	max-width: 	400px;
}

/* ----------------------------------------------------------------------------------------------------------
   Hamburger menu
-----------------------------------------------------------------------------------------------------------*/

/* the hamburger menu */
.navicon-button {
	display: inline-block;
	position: relative;
	padding: 1.3rem .2rem;
	transition: 0.25s;
	cursor: pointer;
	user-select: none;
	opacity: .8;
}

/* middle line */
.navicon {
	position: relative;
	width: 2.5rem;
	height: .2em;
	background: #2A6EBB;
	transition: 0.5s;
	border-radius: 				2.5rem;
	-moz-border-radius: 		2.5rem;
	-webkit-border-radius: 		2.5rem;
}

/* top and bottom lines */
.navicon:before, .navicon:after {
	display: block;
	content: "";
	height: .2em;
	width: 2.5rem;
	background: #2A6EBB;
	position: absolute;
	z-index: -1;
	transition: 0.5s 0.25s;
	border-radius: 				1rem;
	-moz-border-radius: 		1rem;
	-webkit-border-radius: 		1rem;
}

/* position the top and bottom lines at the beginning */
.navicon:before {
	top: .625rem;
}
.navicon:after {
	top: -.625rem;
}

/* move the top and bottom lines as the user hovers*/
.navicon-button .navicon:before, .navicon-button .navicon:after {
	transition: 0.25s;
}
.navicon-button:hover .navicon:before, .navicon-button:hover .navicon:after {
	transition: 0.25s;
}
.navicon-button:hover .navicon:before {
	top: .825rem;
}
.navicon-button:hover .navicon:after {
	top: -.825rem;
}

/* rotate the top and bottom lines to make an X */
.makeX.x .navicon {
	background: transparent;
}
.makeX.x .navicon:before {
	transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
	transition: 0.5s;
	top: 1px;
}
.makeX.x .navicon:after {
	transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
	transition: 0.5s;
	top: 1px;
}

/* ----------------------------------------------------------------------------------------------------------
   Popup boxes
-----------------------------------------------------------------------------------------------------------*/

.ui-welcomeBox {
	-moz-border-radius: 		.4em;
	-webkit-border-radius: 		.4em;
	border-radius: 				.4em;
	border:						1px solid lightgray;
	padding-top: 				2px;
	padding-bottom: 			2px;
	padding-left:				10px;
	padding-right:				10px;
	line-height:				40px;
	color:						#2A6EBB;
	display:					inline-block;
	top:						-19px;
	position:					relative;
	cursor: 					pointer;
	font-size:					14px;
	font-weight:				300;
}
.ui-welcomeBox:hover {
	border:						1px solid #003359;
}
.ui-nav-box {
	height:						43px;
	padding-top: 				1px;
	padding-top: 				2px;
	-moz-border-radius: 		.4em;
	-webkit-border-radius: 		.4em;
	border-radius: 				.4em;
	border:						1px solid lightgray;
	cursor: 					pointer;
}
.ui-nav-box:hover {
	border:						1px solid #003359;
}

.ui-popup-div {
	padding-top:				12px;
	padding-left:				15px;
	padding-bottom:				12px;
}
.ui-popup-header-text {
	font-size:					18px;
	color:						black;
	font-weight:				400;
}
.ui-popup-text {
	font-size:					14px;
	color:						gray;
	padding-left:				15px;
	line-height:				30px;
	cursor:						pointer;
}
.ui-popup-hr {
	background-color: 			gray; 
	height: 					1px; 
	border: 					0;
}

/* ----------------------------------------------------------------------------------------------------------
   Navigation popup box shell with arrow
-----------------------------------------------------------------------------------------------------------*/

.arrow-box {
	position:					relative;
	background: 				#ffffff;
	border:						1px solid gray;
	width:						250px;
	box-shadow:					2px 2px 2px #888888;
	z-index: 					1000;
}
.arrow-box:after, .arrow-box:before {
	bottom:						100%;
	left:						85%;
	border:						solid transparent;
	content:					" ";
	height:						0;
	width:						0;
	position:					absolute;
	pointer-events:				none;
}

.arrow-box:after {
	border-color:				rgba(255, 255, 255, 0);
	border-bottom-color: 		#ffffff;
	border-width:				10px;
	margin-left:				-10px;
}
.arrow-box:before {
	border-color: 				rgba(0, 0, 0, 0);
	border-bottom-color: 		#000000;
	border-width:				11px;
	margin-left:				-11px;
}

/* ----------------------------------------------------------------------------------------------------------
   Tabs
-----------------------------------------------------------------------------------------------------------*/

.ui-tab-outline {
    border-top: 				1px solid #B0B0B0;
    border-right: 				1px solid #B0B0B0;
    border-left: 				1px solid #B0B0B0;
    height:						40px;
    background-color: 			white;
	border-top-right-radius: 	4px;
	border-top-left-radius:		4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-topleft: 4px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-top-left-radius: 4px;
	padding-top: 				8px;
	width: 						auto !important;
    padding-left:				15px;
    padding-right:				15px;
}
.ui-tab-underline {
    border-bottom: 				1px solid #B0B0B0;
    height:						40px;
	cursor: 					pointer;
	width: 						auto !important;
	padding-top: 				9px;
    padding-left:				15px;
    padding-right:				15px;
}
.ui-tab-fillin {
    height:						40px;
    border-bottom: 				1px solid #B0B0B0;
}

.ui-tab-heading-active {
	font-size:					16px;
	font-weight:				700;
    padding-top:				15px;
    padding-left:				5px;
    padding-right:				5px;
    height:						50px;
    color:						black;
    letter-spacing: 			.02em;
}

.ui-tab-heading {
	font-size:					16px;
    padding-top:				15px;
    padding-left:				5px;
    padding-right:				5px;
    height:						50px;
    color:						#2A6EBB;
	font-weight:				200;
}

.ui-tab-mainarea {
    border-bottom: 				1px solid #B0B0B0;
    border-right: 				1px solid #B0B0B0;
    border-left: 				1px solid #B0B0B0;
    background-color: 			white;
    border-top-right-radius: 	4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
	border-bottom-right-radius: 	4px;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;
	border-bottom-left-radius:		4px;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-bottom-left-radius: 4px;
	padding:					25px;
}

.ui-tab-mainarea-no-permission {
    border-top: 				1px solid #B0B0B0;
    border-bottom: 				1px solid #B0B0B0;
    border-right: 				1px solid #B0B0B0;
    border-left: 				1px solid #B0B0B0;
    background-color: 			white;
    border-top-right-radius: 	4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
	border-bottom-right-radius: 	4px;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;
	border-bottom-left-radius:		4px;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-bottom-left-radius: 4px;
	padding:					25px;
}


/* ----------------------------------------------------------------------------------------------------------
   Text
-----------------------------------------------------------------------------------------------------------*/

.ui-page-heading {
	font-size:					24px;
	line-height:				30px;
	font-weight:				300;
}

.ui-admin-heading {
	font-size:					24px;
	line-height:				30px;
	font-weight:				700;
}

.ui-heading-text {
	font-size:					12px;
	line-height:				12px;
	font-weight:				400;
}

.ui-page-text {
	font-size:					14px;
	line-height:				18px;
	font-weight:				300;
}
.ui-page-text-bolder {
	font-size:					14px;
	line-height:				18px;
	font-weight:				400;
}
.ui-page-text-boldest {
	font-size:					14px;
	line-height:				18px;
	font-weight:				700;
}

.ui-line-action {
	font-size:					14px;
	line-height:				18px;
	font-weight:				400;
	position: 					relative;
	top:						-6.5px;
}

.ui-results-text {
	font-size:					16px;
	line-height:				22px;
	font-weight:				300;
}

.ui-status-text {
	font-size:					15px;
	line-height:				20px;
	font-style:					normal;
	color:						#2A6EBB;
	font-weight:				400;
}
.ui-error-text {
	font-size:					15px;
	line-height:				20px;
	font-style:					italic;
	color:						red;
	font-weight:				400;
}
.ui-copyright {
	font-size:					10px;
	line-height:				14px;
	color:						white;
	letter-spacing: 			.1em;
}
.ui-faq-header {
	font-size:					16px;
	line-height:				15px;
	font-weight:				400;
	color:						#003359;
	cursor: 					pointer;
}
.ui-faq-text {
	font-size:					14px;
	line-height:				15px;
	font-weight:				300;
	color:						#2A6EBB;
}



/* handle pre-formatted code */
pre {
	white-space: 				normal;
	word-wrap: 					break-word;
}

/* ----------------------------------------------------------------------------------------------------------
   Account Boxes
-----------------------------------------------------------------------------------------------------------*/

/* sign in page box */
.ui-topbar-heading {
	display:					inline-block;
	font-size:					30px;
	padding-top:				7px;
	font-weight:				bold;
	color:						#2A6EBB;
}

.ui-singlepage-box {
	padding:					15px;
	border-color:				#b3b3b3;
	border-style:				solid;
	border-width:				1px;
	max-width: 					600px;
	border-radius: 				6px;
	-moz-border-radius: 		6px;
	-webkit-border-radius: 		6px;
}

.ui-singlepage-heading {
	font-size:					24px;
	font-weight:				300;
	color:						black;
}


/* ----------------------------------------------------------------------------------------------------------
   Forms
-----------------------------------------------------------------------------------------------------------*/

/* button line */
.ui-button-line {
	padding-top:				10px;
}

/* popup actions */
.ui-popup-actions-line {
	padding-top: 				2px;
	padding-left: 				5px;
	padding-bottom: 			2px;
	font-size: 					14px;
}

/* remove spacing on collapsable list sets */
.noSpacing > .ui-collapsible-content
{
    padding-top: 0px;
    padding-bottom: 0px;
}

.noSpacing > .ui-collapsible-content > .ui-collapsible-set
{
    margin-top: 0px;
    margin-bottom: 0px;
}

/* ----------------------------------------------------------------------------------------------------------
   Tables
-----------------------------------------------------------------------------------------------------------*/

/* positioning for buttons in the table line */
td.ui-table-line-button-first {
	background-color:			transparent ! important;
}
td.ui-table-line-button-rest {
	padding: 					0px ! important;
	padding-left: 				10px ! important;
	background-color:			transparent ! important;
}

.ui-table-icon {
	display: 					inline-block;
	padding-right: 				10px;
	position: 					relative;
	top: 						3px;
	cursor:						pointer;
}

.ui-table-text {
	font-size:					14px;
	font-weight:				300;
	line-height: 				28px;
	position:					relative;
	top:						-5px;
}


/* ----------------------------------------------------------------------------------------------------------
   Tables and Grids
-----------------------------------------------------------------------------------------------------------*/

/* grid breakpoint to handle mobile apps */
@media all and (max-width: 35em) {
	.gridBreakpoint .ui-block-a,
	.gridBreakpoint .ui-block-b,
	.gridBreakpoint .ui-block-c,
	.gridBreakpoint .ui-block-d,
	.gridBreakpoint .ui-block-e {
		width: 100%;
		float: none;
	}
}
