@import (less) "/shared/styles/AresPallet.less";
@screenWidth: 100%;

.UnderConstruction {
	background: repeating-linear-gradient(-45deg, transparent, transparent 20px, #FF0 20px, #FF0 40px);
}

body, html {
	font-size: 16px;
	margin: 0px;
	padding: 0px;
	font-family: Arial,"Segoe UI","Segoe",Tahoma,Helvetica,sans-serif;
}

td {
	vertical-align: top;
}

input[type='text'], input[type='email'], input[type='number'], textarea, select {
	border: solid 1px @gray9;
}

input[type='text'].focus, textarea.focus, select.focus {
	border-color: @black !important;
}

input[type='date'].invalid:not(:disabled), input[type='datetime-local'].invalid:not(:disabled), input[type='text'].invalid:not(:disabled), input[type='number'].invalid:not(:disabled), input[type='password'].invalid:not(:disabled), textarea.invalid:not(:disabled), select.invalid:not(:disabled), label.invalid, span.invalid, ul.invalid, tr.invalid td {
	border: 1px solid red;
	background-color: @mistyRose !important;
	background-image: none !important;
}

input[type='text'].inactive, textarea.inactive, select.inactive, option.inactive {
	color: @gray9;
	font-style: italic;
}

input[type='text'].required, input[type='password'].required, textarea.required {
	background: url(images/required-input.png) right 5px no-repeat;
	background-color: @white;
}

table.DataTable {
	margin: 0px;

	td, th {
		font-size: 16px;
		color: @black;
	}

	tr:nth-child(odd) {
		> td {
			background-color: @white;
			border-bottom: 1px solid @lightBlue;
		}
	}

	tr:nth-child(even) {
		> td {
			background-color: @blueTint;
			border-bottom: 1px solid @lightBlue;
		}
	}

	tr {
		> th {
			background-color: @blue;
			color: @white;
			border-right: 1px solid @lightBlue;
			padding: 3px;

			&.last-child {
				border: none;
			}
		}

		&:hover {
			> td {
				background-color: @lightGold;
				color: @black;
			}
		}

		&.inactive {
			td {
				color: @red;
			}
		}

		&.Total {
			td {
				background-color: @blue;
				color: @white;
			}
		}

		tbody {
			tr {
				&.highlight {
					td {
						font-weight: bold;
					}
				}
			}
		}
	}
}

.AresApplication {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	width: 115px;
	text-align: center;
	color: @wspCharcoalDark;

	img {
		width: 74px;
		height: 74px;
		border: 5px solid #4f5781;
		border-radius: 5px;
		background: linear-gradient(#FFF,#BBE);

		&:hover {
			background: linear-gradient(#FFF,#CCF);
			border: 5px solid #333;
		}
	}

	&:hover {
		color: @wspRed;
	}
}

#tblPasswordRequirements {
	background-color: @grayC;
	border-radius: 0px 0px 5px 5px;
	margin-top: -7px;
	width: 100%;

	td {
		background-color: @grayC;
		vertical-align: middle;
		text-align: center;

		&.pass {
			background-color: #bfffbf;
			color: @black;
		}

		input[type=submit] {
			margin: 0px;
			font-weight: bold;
			font-size: 14px;
		}
	}
}

ul.menu {
	padding-right: 10px;
	list-style: none;
	margin: 0px;
	padding: 0px;
	position: relative;

	&.siteUser {
		min-width: 150px;
		border: 1px solid @white;
		padding: 5px;
		background-color: @grayC;
		color: @black;
		white-space: nowrap;
		z-index: 1;

		ul {
			min-width: 150px;
			padding: 5px;
			background-color: @grayC;
			color: @black;
			border-right: 1px solid @white;
			border-left: 1px solid @white;
			white-space: nowrap;
		}

		li.version {
			background-color: @grayE;
			color: @gray6;
			font-weight: normal;
		}
	}

	h3 {
		border-bottom: 1px solid @black;
	}

	ul {
		display: none;
		list-style: none;
		margin: 0px;
		padding: 0px;
		position: absolute;
		right: -1px;

		li {
			margin: 0px;
			white-space: nowrap;
		}
	}

	&:hover {
		ul {
			display: inherit;
		}
	}

	a {
		display: block;
		padding: 3px 3px 3px 10px;
		text-decoration: none;
		color: @black;

		&:hover {
			background-color: @gold;
		}
	}
}

.siteBar {
	background-color: @wspCharcoalBlue;
	color: @white;
	padding: 5px;
	display: flex;
	justify-content: space-between;
	font-weight: bold;
	font-size: 20px;
	/*margin-bottom: 5px;*/

	.siteBarLeft {
	}

	.siteBarRight {
	}
}

.siteMenu {
	display: flex;

	ul {
		float: left;
		list-style: none;
		margin: 0px;

		li {
			display: inline-block;

			ul {
				display: none;

				li {
					ul {
						display: none !important;
					}

					&:hover {
						ul {
							display: initial !important;
						}
					}
				}
			}

			&:hover {
				ul {
					display: initial;
				}
			}
		}
	}

	a {
		display: block;
		padding: 15px;
		text-decoration: none;
		color: @white;

		&:hover {
			background-color: @gold;
			color: @black;
		}
	}
}

.siteContent {
	.bifold {
		display: flex;
		width: ~"calc(100% - 2px)";
		justify-content: space-between;

		.column {
			padding: 5px;
		}
	}

	.siteSideBar {
		padding-right: 10px;
		display: flex;
		flex-direction: column;
		white-space: nowrap;

		&.left {
			background-color: @grayE;
		}

		h3 {
			border-bottom: 1px solid @black;
		}

		ul {
			list-style: none;
			margin: 0px;
			padding: 0px;

			li {
				margin: 0px;
			}
		}

		a {
			display: block;
			padding: 3px 3px 3px 10px;
			text-decoration: none;
			color: @black;

			&:hover {
				background-color: @gold;
			}
		}
	}

	> .content {
		width: 100%;
		width: -moz-available;
		width: -webkit-fill-available;
		width: fill-available;
	}
}

.toolbar { /* Generally used on a div which contains filtering/searching controls above the rest of the app */
	background-color: @wspLightGray;
	border-bottom: 2px solid @grayC;
	padding: 10px 1px 10px 1px; /* For IE8 Compatibility */
	padding: 0.7143rem 1px 0.7143rem 1px; /* For IE9+, Chrome, Firefox */
	width: 100%;
}

.PopUp {
	font-family: Arial, sans-serif;
	font-size: 16px;
	display: none;
}

div {
	&.Note {
		border: none;
		padding: 5px;
		margin: 0px;
		border-radius: 5px;
		background-color: @blueTint2;
		margin-bottom: 5px;
		color: @black;
	}

	&.Warning {
		border: 1px solid @gray9;
		padding: 5px;
		margin: 0px;
		border-radius: 5px;
		background-color: @darkGold;
		margin-bottom: 5px;
		color: @black;
	}
}

table.dataTable thead > tr:nth-child(2) > th, table.dataTable thead > tr:nth-child(2) td {
	padding-top: 10px !important;
	padding-right: 10px !important;
	padding-bottom: 10px !important;
	padding-left: 8px !important;
	background-color: initial;
}

table.dataTable > thead > tr:nth-child(2) > th {
	text-align: left !important;
}

table.dataTable {
	tr.selected {
		th, td {
			background-color: @lightGold !important;
		}
	}
}

ul.rightmenu {
	position: relative;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	display: inline-block;

	ul {
		position: absolute;
		display: none;
		min-width: 140px;
		right: 0px;
		list-style-type: none;
		padding: 0px;
		margin: 0px;

		li {
			text-align: right;
			background-color: #444;
			padding: 3px;
			color: #FFF;

			&:hover {
				background-color: #666;
				cursor: pointer;
			}
		}
	}

	li:hover ul {
		display: inline-block;
	}
}

.btn {
	background-color: #fff;
	height: 25px; /* For IE8 Compatibility */
	height: 24px; /* For IE9+, Chrome, Firefox */
	margin-left: 0.5%;
	padding: 2px; /* For IE8 Compatibility */
	padding: 2px; /* For IE9+, Chrome, Firefox */
	border: 1px solid #8ab4d5;
	color: #3966bf !important;
	font-size: 14px !important; /* For IE8 Compatibility */
	font-size: 16px !important; /* For IE9+, Chrome, Firefox */
	cursor: pointer;
	display: inline;
	line-height: 20px; /* For IE8 Compatibility */
	line-height: 20px; /* For IE9+, Chrome, Firefox */
	&.btn.hover, &.btn:hover {
		background-color: #dfeffc;
		border-color: #3590d5;
		color: #1d5987 !important;
	}

	&.btn.active, &.btn:active {
		background-color: #FBEC88;
		color: #3966bf !important;
		border: 1px solid #FAD42E;
	}

	&.btn:disabled {
		background-color: #ccc;
		color: #efefef;
		border: #4c4c4c;
		cursor: default;
	}
}

.bttn {
	min-width: 1em;
	padding: 1px 6px 1px 6px;
	border: 1px solid #ababab;
	background-color: #fdfdfd;
	background-color: #fdfdfd;
	font-family: Arial,sans-serif;
	font-size: 14px;
	margin-left: 25px !important;
	font-size: 16px;
	color: #fff !important;
	height: 30px;
	background-color: #4297d7 !important;
	outline: 0;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-webkit-border-radius: 2px;

	&.hover, &:hover {
		font-style: italic;
		font-weight: 700;
		color: #fff;
		background-color: #2e6e9e !important;
		outline: 0;
		box-shadow: 7px 7px 9px #3b3b3b !important;
	}

	&:disabled {
		background-color: #ccc !important;
		color: #efefef;
		border: #4c4c4c;
		cursor: default;
	}
}

.ajaxLoadSpinnerModal {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.3);
	width: 100%;
	height: 100%;
	z-index: 2000; /*setting high value so these will always appear above any other elements like a jquery ui dialog */
}

.ajaxLoadSpinner {
	position: absolute;
	width: 10%;
	left: 50%;
	top: 50%;
	margin-left: -10%;
	background-color: #fff;
	border: 1px solid #C8C8C8;
	padding: 1%;
	color: #E28419;
	text-align: center;
	z-index: 2001; /*setting high value so these will always appear above any other elements like a jquery ui dialog */
	font-family: sans-serif;
}

.ajaxSendingSpinnerModal {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.3);
	width: 100%;
	height: 100%;
	z-index: 2000; /*setting high value so these will always appear above any other elements like a jquery ui dialog */
}

.ajaxSendingSpinner {
	position: absolute;
	width: 10%;
	left: 50%;
	top: 50%;
	margin-left: -10%;
	background-color: #fff;
	border: 1px solid #C8C8C8;
	padding: 1%;
	color: #E28419;
	text-align: center;
	z-index: 2001; /*setting high value so these will always appear above any other elements like a jquery ui dialog */
	font-family: sans-serif;
}

.Fill {
	width: 100%;
	width: -webkit-fill-available;
}
label {
	&.Fill {
		display: block;
	}
}

.ui-dialog-titlebar-close {
	font-size: 0px !important;
	margin-right: 3px !important;
}

.msg-popup {
	background-color: @green;
	border: 5px solid @white;
	color: @white;
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 50%;
	padding: 5px;
	transform: translate(-50%, -50%);
	text-align: center;

	&.error {
		background-color: @red;
	}
}

.ui-autocomplete {
	position: absolute;
	cursor: default;
	z-index: 300 !important;
}
.ui-datepicker-trigger img {
	max-height: 15px;
}