:root {
	--padding-default: 4px 6px;
	--line-height-default: 18px;
	--border-default: 1px solid #999999;
	--font-family-default: "Trebuchet MS", Arial, Helvetica, sans-serif;
	--font-size-default: 13px;
	--box-shadow-focus-inset : inset 0px 0px 2px 1px #7da2bd;
	--logo-column-width: 180px; /* please make sure this number match with the one in css-variables.css */
	--header-height: 80px; /* please make sure this number match with the one in css-variables.css */
	--border-radius-button-with-label: 6px;
}


* {
	padding: 0;
	margin: 0;

	&:focus {
		outline: none;
	}
}

a,
a:visited {
	color: #0153ff;
}

.ws_keep_conn{
	position: absolute;
	visibility: hidden;
	left: -9999px;
}

body {
	padding: 0;
	margin: 0 auto;
	font-family: var(--font-family-default), sans-serif;
	font-size: var(--font-size-default);
	line-height: var(--line-height-default);
	height: 100%;
}

#loginForm {
	margin: 4px auto;
	width: 300px;
	text-align: left;


	table {
		border-spacing: 0 2px;
		width: 100%;
		text-align: left;
	}

	tbody {
		display: grid;
		grid-template-columns: max-content max-content;
		align-items: baseline;
		gap: 4px 12px;

		tr {
			display: contents;
			td.login-control {

				padding-bottom: 6px;

				input {
					width: 200px;
				}
			}

			td.login-label {
				padding: 0;
			}
		}
	}

	input {
		&[type='text'],
		&[type='password']{
			line-height: var(--line-height-default);
			padding: var(--padding-default);
			border-radius: 4px;
			border: var(--border-default);
			font-size: 1em; /* 1em to make the input field the same font size with its parents/surrounding */
			font-family: var(--font-family-default), sans-serif;

			&:focus-visible {
				box-shadow: var(--box-shadow-focus-inset);
				border-color: #4D92FD;
			}
			&:focus {
				outline: none;
			}
		}
	}

	.password-container {
		position: relative;
		display: block;

		.password-input {
			padding-right: 30px;
			width: 100%;
			width: -moz-available;
			width: -webkit-fill-available;
			width: fill-available;
			box-sizing: border-box;
		}

		.toggle-password {
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
			cursor: pointer;
		}
	}

	#loginsubmit {
		padding: 4px 16px;
		border-radius: 6px;
		line-height: 18px;
		cursor: pointer;
		border: var(--border-default);
		background-color: #d7ebf9;
		color: #1c4955;
		text-decoration: none;
		font-family: var(--font-family-default), sans-serif;
		margin-bottom: 4px;
		&:focus-visible {
			box-shadow: var(--box-shadow-focus-inset);
			border-color: #4D92FD;
		}
		&:focus {
			outline: none;
		}
	}
}

.wrapper {
	min-height: 100dvh;
	/* minimum height for modern browsers */
	min-width: 1000px;
	height: 100%;
	margin: 0 auto;
	background-color: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
}

div.header {
	margin: 0 0;
	padding: 0 0;
	height: var(--header-height);
	display: grid;
	grid-template-columns: var(--logo-column-width) 1fr auto;
	grid-template-rows: auto auto;
	gap: 0 16px;
	grid-template-areas: "Logo Search Time-date" "Logo Search Actions";
	position: relative;
	text-align: center;
	width: 100%;
	background: linear-gradient(to bottom, #004a7f 0%, #5d96bf 100%); /* please make sure this number match with the one in css-variables.css */
	box-shadow: 3px 3px 2px rgba(177, 194, 242, 0.75); /* please make sure this number match with the one in css-variables.css */

	#header-logo-area {
		width: auto;
		grid-area: Logo;
		height: var(--header-height);

		.header-logo {
			width: var(--logo-column-width);
			height: var(--header-height);
			margin: 0 0;
			display: inline-block;
			background: url('../images/svg/ckmslogo.svg') no-repeat scroll center;
			background-size: 80%;
		}
	}

	.header-menubar {
		min-width: 450px;
		grid-area: Actions;
		display: flex;
	}
}

.contentarea {
	padding: 20px 30px 20px 30px;
	background: #fff;

	div.description-and-search {
		margin: 15vh auto 36px;
		text-align: center;
		max-width: 800px;
		padding: 36px 72px;
		border: 1px solid #005972;
		border-radius: 10px;
		box-shadow: 3px 3px 2px rgba(177, 194, 242, 0.75);

		h1 {
			padding: 0 0;
			margin: 4px 8px;
			color: #318DA4;
			font-size: 24px;
			line-height: 28px;
			font-weight: bold;
		}

		.mis {
			line-height: 18px;
			color: #333;
			font-weight: bold;
			text-transform: none;
			margin: 8px;
			.imp {
				text-transform: uppercase;
			}
		}

		p.search-hint {
			line-height: var(--line-height-default);
			color: #a90325;
			font-weight: bold;
			margin: 4px;
		}
	}
}

div.footer {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	background: #eeeeee;
	box-shadow: none;
	border-top: 2px solid #dddddd;
	margin-top: auto;

	div.footer-left {
		color: #666666;
		line-height: 1.3em;
		padding: 10px 0 0 15px;
		text-align: left;

		.menu ul {
			display: inline-grid;
			list-style: none;
			margin: 0;
			padding: 0;

			.navigation-item {
				color: #666666;
				font-size: 13px;
				font-weight: unset;
				padding: 0;
				text-transform: none;
				text-decoration: underline;
			}
		}
	}

	div.footer-logo {
		background: url('../images/Logo.png') no-repeat center;
		height: 70px;
	}

	div.footer-right {
		color: #666666;
		padding: 10px 20px 0;
		text-align: right;

		a {
			color: #666666;
			text-decoration: none;
		}

		a:hover {
			text-decoration: underline;
		}
	}
}

.ckms-feedbackPanel  {
	.feedbackPanelError {
		background-color: #cd0a0a;
		border: 1px solid #cd0a0a;
		color: white;
	}
	.ckms-message-row {
		margin-top: 1px;
		border: 1px solid transparent;
		.ckms-message {
			padding: 4px;
			margin: 1px;
			display: flex;
			gap: 4px;
		}
		i.icon {
			display: inline-block;
			vertical-align: middle;
			line-height: unset;
			padding-top: 1px;
		}
	}
}

.ui-corner-all {
	border-radius: var(--border-radius-button-with-label);
}