@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

:root {
	--clr-dark-1: hsl(210, 50%, 76%);
	--clr-dark-2: hsl(210, 50%, 50%);
	--clr-dark-3: hsl(210, 50%, 30%);
	--clr-light-1: hsl(0, 0%, 90%);
	--clr-light-2: hsl(0, 0%, 100%);
	--clr-black: #3e3e3e;
	--clr-accent: hsl(159, 56%, 40%);
	--clr-accent-hover: hsl(159, 56%, 50%);
	--clr-tbl-brd: #ccc;
}

/* ************* RESET ********************** */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;

}

img {
	display: block;
	max-width: 100%;
}

a {
	-webkit-transition: all 250ms ease;
	-moz-transition: all 250ms ease;
	-ms-transition: all 250ms ease;
	-o-transition: all 250ms ease;
	transition: all 250ms ease;
}

	a:hover,
	a:focus {
		outline: none;
	}

h1, h2, h3, h4 {
	margin: 0;
	line-height: 1;
}


html,
body, ._form {
	height: 100vh;
}


html {
	font-family: 'Roboto', sans-serif;
	font-size: 100%;
	font-weight: 300;
	scroll-behavior: smooth;
}

.wrapper {
	min-height: 100%;
	display: grid;
	grid-template-rows: min-content auto min-content;
}

footer {
	background-color: var(--clr-dark-2);
	color: var(--clr-light-1);
}

/* HEADER **************************************************** */
header {
	padding: 0.25em;
	margin-bottom: 1em;
	background-color: var(--clr-light-2);
}

.header__container {
	display: grid;
	column-gap: 0.5em;
	grid-template-columns: auto 1fr auto auto;
	grid-template-rows: auto auto;
	/*align-items:flex-start;*/
}

.header__logo-image {
	width: 80px;
	grid-row: span 2;
}

	.header__logo-image img {
		max-width: 100%;
	}

.logo-text__title {
	margin: 0;
	font-size: 1.9em;
	letter-spacing: 0.07em;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	color: var(--clr-dark-2);
	padding-top: 1.1rem;
}

	.logo-text__title > span {
		color: var(--clr-dark-3);
	}

.logo-text__subtitle {
	margin: 0;
	line-height: 1;
	font-size: 0.75em;
	font-weight: 400;
	letter-spacing: 0.04em;
	font-weight: 300;
	color: var(--clr-dark-2);
}

.header__utils {
	align-self: center;
}

	.header__utils .phone-button,
	.header__utils .phone-button:visited {
		color: var(--clr-dark-3);
	}

		.header__utils .phone-button:hover,
		.header__utils .phone-button:focus {
			color: var(--clr-dark-1);
		}

.header__burger {
	display: none;
}

.header__menu {
	grid-row: 2/2;
	grid-column: 2/-1;
}

.header__separator {
	height: 1px;
	border: none;
	/* background: radial-gradient(var(--clr-dark-2), white 55%); */
	background: linear-gradient(90deg, var(--clr-dark-2) 0%, white 70%);

}

@media screen and (max-width: 800px) {
	.header {
		position: sticky;
		top: 0;
		box-shadow: 0 0 3px rgb(0 0 0 /0.8);
	}

	body.lock {
		overflow: hidden;
	}

	.header__logo-image {
		width: 50px;
		height: 50px;
		grid-row: span 1;
	}

	.logo-text__title {
		font-size: 1.5em;
		padding-top: 0.75rem;
	}

	.logo-text__subtitle {
		display: none;
	}

	.header__utils .callback-button {
		display: none;
	}

	.header__utils .phone-button {
		font-size: 1.2em;
	}

	.header__burger {
		display: block;
		position: relative;
		width: 24px;
		height: 16px;
		margin-top: auto;
		margin-bottom: auto;
		margin-left: 0.75em;
	}

		.header__burger::before,
		.header__burger::after {
			content: '';
			background-color: var(--clr-dark-2);
			position: absolute;
			width: 100%;
			height: 2px;
			left: 0;
			transition: all 0.3s ease;
		}

		.header__burger::before {
			top: 0;
		}

		.header__burger::after {
			bottom: 0;
		}

		.header__burger span {
			position: absolute;
			left: 0;
			top: 7px;
			width: 100%;
			height: 2px;
			background-color: var(--clr-dark-2);
			transition: all 0.3s ease;
		}

		.header__burger.active::before {
			transform: rotate(45deg);
			top: 7px;
		}

		.header__burger.active span {
			transform: scale(0);
		}

		.header__burger.active::after {
			transform: rotate(-45deg);
			bottom: 7px;
		}

	.header__menu {
		position: fixed;
		top: -100%;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: var(--clr-dark-2);
		padding-bottom: 3em;
		transition: all 0.3s ease;
	}

		.header__menu.active {
			top: 55px;
		}

	.header__separator {
		display: none;
	}
}

@media screen and (max-width: 580px) {
	.header__utils .phone-button {
		display: none;
	}

	.logo-text {
		margin-top: auto;
		margin-bottom: auto;
	}

	.logo-text__title {
		padding-top: 0;
		font-size: clamp(0.85em, 5vw, 1.5em);
	}
}

@media screen and (max-width: 299px) {
	header {
		padding-left: 0;
		padding-right: 0;
	}

	.header__container {
		column-gap: 0;
	}

	.header__logo-text {
		padding-left: 0.3em;
		font-size: 0.84em;
	}

	.header__logo-image {
		width: 30px;
		height: 30px;
	}

	.header__burger {
		margin: 0.5em 0 0.5em auto;
	}

	.header__menu.active {
		top: 40px;
	}
}

@media screen and (max-width: 219px) {
	.header__logo-text {
		display: none;
	}
}

/* *********************** MENU ************************* */
.menu__list {
	list-style: none;
	padding: 1.25em 0 0.25em 0;
	margin: 0;
	display: flex;
	flex-flow: row nowrap;
}

.menu__item {
	display: inline-block;
	text-transform: uppercase;
	margin-top: auto;
	margin-bottom: auto;
	font-size: 0.9em;
}

	.menu__item:not(:last-child) {
		margin-right: 1em;
	}

.menu__item-login {
	font-size: 0.9em;
	text-transform: capitalize;
	margin-left: auto;
	margin-right: 0.6em;
}

.menu__item-callback,
.menu__item-phone {
	display: none;
}

.menu__link,
.menu__link:visited {
	text-decoration: none;
	font-weight: 400;
	color: var(--clr-dark-2);
	white-space: nowrap;
}

	.menu__link:hover,
	.menu__link:focus {
		outline: none;
		color: var(--clr-dark-1);
		border-bottom: 1px solid var(--clr-dark-1);
	}

	.menu__link.login-button:hover,
	.menu__link.login-button:focus {
		border-bottom: none;
	}

.menu__link--active, .menu__link--active:visited, .menu__link--active:hover, .menu__link--active:focus-visible {
	color: var(--clr-black);
	font-weight: 600;
	cursor: text;
	border-bottom: 2px solid var(--clr-black);
}

@media screen and (max-width: 800px) {
	.menu__list {
		flex-flow: column nowrap;
	}

	.menu__item {
		margin: 0.5em 0 0.5em 5rem;
		font-size: 1.3em;
	}

	.menu__link,
	.menu__link:visited,
	.login-button,
	.login-button:visited {
		color: var(--clr-light-1);
	}

		.menu__link:hover {
			color: var(--clr-light-2);
		}
	.menu__link--active, .menu__link--active:hover {
		color: var(--clr-light-1);
		border-bottom: 2px solid var(--clr-light-1);
	}

	.menu__item-callback {
		display: inline-block;
		margin-left: 2.5rem;
	}

	.menu__item-phone {
		display: none;
		margin-left: 2.5rem;
	}

	.menu__item-login {
		margin-left: 3rem;
	}
}

@media screen and (max-width: 580px) {
	.menu__item-callback {
		margin-top: 0;
	}

	.menu__item-phone {
		display: inline-block;
	}

		.menu__item-phone a,
		.menu__item-phone a:visited {
			color: var(--clr-light-1);
		}

			.menu__item-phone a:hover {
				color: var(--clr-light-2);
			}

	.menu__item {
		font-size: clamp(0.75em, 4vw, 1.3em);
	}
}

@media screen and (max-width: 299px) {
	.menu__item {
		margin-left: 2.3rem;
	}

	.menu__item-callback {
		margin-left: 0.3rem;
	}

	.menu__item-phone {
		margin-left: 0.3rem;
	}

	.menu__item-login {
		margin-left: 0.5rem;
	}
}

/* Buttons w icon */
.with-icon {
	display: inline-grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.25em;
	place-items: center;
}

.callback-button,
.callback-button:visited {
	font-size: 0.85rem;
	text-decoration: none;
	color: var(--clr-light-2);
	background-color: var(--clr-accent);
	border-radius: 8px;
	padding: 0.2em 0.6em 0.2em 0.4em;
}

	.callback-button:hover,
	.callback-button:focus {
		background-color: var(--clr-accent-hover);
	}

.phone-button,
.phone-button:visited {
	text-decoration: none;
	font-size: 1rem;
	font-weight: 400;
	padding: 0.2em 0 0.2em 0.4em;
}

	.phone-button:hover,
	.phone-button:focus {
		outline: none;
	}

.phone-num {
	color: inherit;
}

@media screen and (max-width: 800px) {
	.callback-button,
	.phone-button,
	.login-button {
		font-size: 1em;
	}
}

/* ****************** MAIN *********************** */
.main {
	color: var(--clr-black);
	/* prevent ASP.Net GridView overflow */
	overflow-x: hidden;
}

.main h1 {
	font-size: 1.5em;
	font-weight: 400;
}
.main h2 {
	font-size: 1em;
	font-weight: 300;
}

.main h2 > small {
	font-size: 0.7em;
	font-weight: 300;
}

.main h1 + h2 {
	margin-top: 0.3em;
}

	.main a, .main a:visited {
		color: var(--clr-dark-2);
		text-decoration: none;
		border-bottom: 1px solid var(--clr-dark-2);
	}
.main a:hover, .main a:focus-visible {
	color: var(--clr-dark-1);
	border-bottom: 1px solid var(--clr-dark-1);
}

ul.default__links {
	margin-block: 2em;
	list-style: none;
}

	ul.default__links li + li {
		margin-top: 0.75em;
	}

	ul.default__links a, ul.default__links a:visited {
		border-bottom: none;
		font-size: 1.5em;
	}

.default .admin-link {
	display: inline-block;
	margin-block: 2em;
	margin-left: 2.5em;
}

.main .no-data {
	display: block;
	color: tomato;
	font-size: 1.5em;
	text-align: center;
	padding-top: 2em;
	padding-bottom: 2em;
}

	.main .no-data > span {
		font-weight: 500;
	}

@media screen and (max-width: 800px) {
	.main h1 {
		margin-top: 1em;
	}
}

/* Grid View */

/* making ASP.Net GridViews responsive */
.gv-container {
	display: block;
	width: 100%;
	overflow-x: auto;
}

.gv {
	width: 100%;
	margin: 0.5em auto 2em auto;
	font-size: 0.9em;

	overflow: hidden;
}

.cell {
	padding: 0.75em 1em;
}

.gv__header {
	background-color: var(--clr-dark-2);
	color: var(--clr-light-1);
}

	.gv__header a, .gv__header a:visited {
		color: var(--clr-light-1);
		border-bottom: 1px solid var(--clr-light-1);
	}

		.gv__header a:hover, gv__header a:focus-visible {
			color: var(--clr-light-2);
			border-bottom: 1px solid var(--clr-light-2);
		}

.gv__item {
	border-bottom: 1px solid var(--clr-tbl-brd);
	overflow-x: hidden;
}
.gv__item--editing {
	border-bottom: 1px solid var(--clr-dark-2);
	background-color: var(--clr-light-1);
}
.gv__pager table {
	margin-top: 0.75em;
}

	.gv__pager table td {
		padding: 0.25em;
	}

		.gv__pager table td span {
			font-weight: 600;
			font-size: 1.25em;
			color: var(--clr-black);
		}

.gv__docs {
	white-space: nowrap;
}
.gv__docs > .docs__doc {
	display: block;
	line-height: 1.2;
	font-size: 0.75em;
	margin-top: 0.5em;
	color: #a8a8a8;
}

.gv__.docs > .docs__doc + .docs__doc {
	margin-top: 0.75em;
}

.gv__buttons {
	display: flex;
	flex-flow: row nowrap;
}

	.gv__buttons a, .gv__buttons input {
		font-size: 1.2em;
		border-bottom: none;
	}

		.gv__buttons a:hover {
			border-bottom: none;
		}

		.gv__buttons a + a, .gv__buttons input + input {
			margin-left: 0.75em;
		}

.gv__buttons--ok, .gv__buttons--ok:visited {
	color: green !important;
}

	.gv__buttons--ok:hover, .gv__buttons--ok:focus-visible {
		color: lightgreen !important;
	}


.gv__buttons--cancel, .gv__buttons--cancel:visited {
	color: red !important;
}

	.gv__buttons--cancel:hover, .gv__buttons--cancel:focus-visible {
		color: tomato!important;
	}

.cell {
	vertical-align: top;
}

.cell--leftborder {
	border-left: 1px solid var(--clr-tbl-brd);
}

.cell--rightborder {
	border-right: 1px solid var(--clr-tbl-brd);
}

.cell--center {
	text-align: center;
}

.cell--left {
	text-align: left;
}

.cell--right {
	text-align: right;
}

.cell--nowrap {
	white-space: nowrap;
}

.edit-button:hover {
	border-bottom: none;
}

.showinv {
	text-align: center !important;
}

	.showinv a {
		display: inline-block;
		font-size: large;
		border: none;
		text-decoration: none;
	}

		.showinv a + a {
			margin-left: 0.5em;
		}
/* Trackers */
.trackers .a { background-color: rgba(102,204,0, .6); }

.trackers .b { background-color: rgba(102,204,0, .2); }

.trackers .c { background-color: rgba(255,255,33,.4); }

.trackers .d { background-color: rgba(255,51,0,.4); }

.trackers .e { color: #f44336; }

.trackers .f { color: gray; }

.trackers .green { color: green !important; }
.trackers .green:hover {
	color: lightgreen !important;
}

.trackers .red {
	color: red !important;
}
	.trackers .red:hover {
		color: tomato !important;
	}

.fuelsensors {
	margin-left: 2em;
}

	.fuelsensors li {
		line-height: 1.5;
	}
/* tables */
.table .note {
	color: var(--clr-black);
	max-width: 90ch;
	margin-top: 2em;
}

.calib .note ul {
	margin: 1em 2em;
}

	.calib .note ul > li {
		line-height: 1.5;
	}

.table {
	margin-top: 2em;
	margin-bottom: 2em;
	box-shadow: 0 2px 4px 0 rgba(0 0 0 / 0.4);
	padding: 1em;
}

	.table h3 {
		color: var(--clr-black);
	}

	.table td {
		padding: 0.25em;
	}

		.table td:first-child {
			text-align: right;
		}

	.table td {
		text-align: left;
	}

	.table input, .table select {
		padding: 0.5em;
	}

		.table input[type=text], .table input[type=password], .table select {
			border: 1px solid var(--clr-tbl-brd);
		}

.table__calendar-btn {
	vertical-align: middle;
	font-size: 1.55em;
	color: var(--clr-dark);
	text-decoration: none;
	border-bottom: none!important;
}

/* change password table */
.table__button {
	padding-top: 1em !important;
}

.calib__success, .calib__error {
	display: block;
	font-weight: 500;
}
.calib__success {
	color: green;
}
.calib__error {
	color: tomato;
}
	/* Calendar */
	.calendar {
		background-color: var(--clr-light-2);
		box-shadow: 0 2px 4px 0 rgba(0 0 0 / 0.4);
		padding: 0.75em;
		z-index: 1;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
.calendar__content {
	border: 1px solid var(--clr-tbl-brd);
}
.calendar__content td {
	padding: 0;
	background-color: var(--clr-light-2);
}

	.calendar__content a {
		border-bottom: 1px solid var(--clr-tbl-brd);
	}

	.calendar__title td {
		padding: 0.5em 1em;
		background-color: var(--clr-light-2);
		text-align: center;
		font-weight: 400;
	}
.calendar__time span {
	display: block;
	font-size: 0.8em;
	color: gray;
}

.calendar__pager a, .calendar__pager a:hover {
	text-decoration: none;
	border-bottom: none;
	color: var(--clr-dark-2) !important;
}
	.calendar__pager a:hover {
		color: var(--clr-dark-1) !important;
		border-bottom: 1px solid var(--clr-dark-1);
	}
.calendar__day-header {

}
.calendar__day, .calendar__weekend, .calendar__today, .calendar__other-month, .calendar__day--selected {
	padding: 0.5em 1em !important;
	text-align: center !important;
	border: 1px solid var(--clr-tbl-brd);
}
	.calendar__day, .calendar__weekend, .calendar__today {
		font-weight: 400;
	}
	.calendar__weekend a {
		color: tomato !important;
	}
.calendar__today {
	background-color: var(--clr-tbl-brd)!important;
}
.calendar__other-month a {
	color: var(--clr-tbl-brd)!important;
}
.calendar__day--selected {
	background-color: var(--clr-accent)!important;
}
	.calendar__day--selected a {
		color: var(--clr-light-2)!important;
	}

	.calendar__close {
		display: inline-block;
		margin-block: 0.5em;
		font-size: 0.9em;
		font-weight: 400;
	}
.calendar__rfv {}

.robopay__sum {
	font-weight: 500;
}



/* Reports */
.range__item td {
	padding-block: 0.5em;	
		font-size: 1.2em;
		font-weight: 500;
}
.range__item a, .range__item a:visited {
	border-bottom-color: var(--clr-tbl-brd);
}
	.range__item a:hover, .range__item a:focus-visible {
		border-bottom-color: var(--clr-dark-1);
	}

/* Voting */
.voting h3 {
	margin-top: 2em;
	text-align: center;
	font-size: 1.3em;
	font-weight: 400;
}

.voting__list {
	padding-left: 0.75em;
}

.voting__item table {
	width: 100%;
	border-bottom: 1px solid var(--clr-tbl-brd);
}
	.voting__item table td { 
		padding-top: 0.75em;
		padding-bottom: 0.5em;
		width: 33%;
	}
.voting__comment {
	font-size: 0.9em;
	color: gray;
	margin-top: 0;
}
.voting__buttons {
	margin-top: 2em;
	margin-bottom: 3em;
}

/* *************************** FOOTER ***************************** */
.footer__container {
	display: flex;
	justify-content: center;
}

.footer-links__list {
	list-style: none;
	padding: 1.25em 0;
	margin: 0;
	display: flex;
	flex-flow: row nowrap;
}

.footer-links__item {
	display: inline-block;
	margin-top: auto;
	margin-bottom: auto;
	font-size: 0.9em;
}

	.footer-links__item:not(:last-child) {
		margin-right: 1em;
	}

	.footer-links__item a, .footer-links__item a:visited {
		color: var(--clr-light-1);
		text-decoration: none;
	}
		.footer-links__item a:hover, .footer-links__item a:focus-visible {
			color: var(--clr-light-2);
			border-bottom: 1px solid var(--clr-light-2);
		}

@media screen and (max-width: 460px) {
	.footer-links__list {
		flex-flow: column nowrap;
		padding-left: 0;
	}
	.footer__list {
		padding-left: 0;
	}
	.footer-link {
		text-align: center;
		margin: 0!important
	}
		.footer-link:not(:last-child) {
			margin-bottom: 0.5em!important;
		}

}
/* *************** OPEN PAGES ****************** */
/* Login *************************************** */
.login__table {
	margin-top: 2em;
	margin-bottom: 1em;
}
.login__table td { 
	padding: 0.5em;
}

	.login__table input[type=text], .login__table input[type=password] {
		width: 100%;
		font-size: 1.1em;
		padding: 0.5em;
		border: 1px solid var(--clr-tbl-brd);
	}

.login__buttons {
	margin-top: 1em;
}
.login__buttons input[type=submit] {
	padding: 0.3em 0.75em;
	font-size: 1.1em;
	margin-right: 2em;
}
	.login__buttons a {
		font-size: 0.8em;
	}
.login__error {
	margin-block: 0.5em;
	color: red;
}
.ch-accept label {
	display: inline-block;
	line-height: 1.5;
	padding-left: 0.5ch;
}

/* Restore passw ************************* */
.restore__login, .restore__panel {
	margin-top: 2em;
}

	.restore__login input[type=text], .restore__panel input[type=text] {
		font-size: 1.1em;
		padding: 0.5em;
		border: 1px solid var(--clr-tbl-brd);
	}

	.restore__login input[type=submit], .restore__panel input[type=submit] {
		font-size: 1.1em;
		padding: 0.5em;
	}

.restore__login-link {
	display: inline-block;
	margin-block: 1em;
}

.footer__info {
	padding-block: 1em;
	font-size: 0.9em;
}

.footer__info h3 {
	text-align: center;
	font-size: 0.9rem;
	font-weight: 300;
}

.footer__social {
	margin-block: 0.5em;
	text-align: center;
}
.footer__social a {
	display: inline-block;
	font-size: 1.75rem;
}
	.footer__info a + a {
		margin-left: 0.25em;
	}

.footer__social a, .footer__social a:visited, .footer__link a, .footer__link a:visited {
	color: var(--clr-light-1);
	border-bottom: none;
	text-decoration: none;
}
	.footer__link a:hover, .footer__link a:focus-visible {
		color: var(--clr-light-2);
		border-bottom: 1px solid var(--clr-light-2);
	}
	.footer__social a:hover, .footer__social a:focus-visible {
		color: var(--clr-light-2);
		border-bottom: none;
	}
	.footer__list {
		list-style: none;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
	}

.footer__link + .footer__link {
	line-height: 1.5;
	margin-left: 1em;
}

/* ******************* UTILITY CLASSES ************************** */
._content {
	width: min(98%, 980px);
	margin-inline: auto;
	padding-left: 1em;
	padding-right: 1em;
}

@media screen and (max-width: 299px) {
	._content {
		padding-left: 0.3em;
		padding-right: 0.3em;
	}
}

.note {
	color: gray;
	font-size: 0.9em;
	padding: 0.5em 1em;
	max-width: 95ch;
	margin-block: 2em;
	display: block;
}

	.note + .note {
		margin-top: 1em;
	}

.note--gray {
	border-left: 3px solid gray;
}
.note--green {
	border-left: 3px solid green;
}
.note--red {
	border-left: 3px solid tomato;
}

.note p:first-child {
	margin-top: 0;
}
.note p:last-child {
	margin-bottom: 0;
}

.text-gray {
	color: gray;
}

.centered {
	text-align: center;
}

/* ****************** /UTILITY CLASSES ************************ */