body {
	direction: rtl;
	font-family: "Vazirmatn";
	margin: 0;
}

body * {
	scrollbar-width: thin;
}

#main {
	float: left;
	width: 80%;
	margin: 0px;
	padding: 10px 0;
	height: 95vh;
	overflow-y: scroll;
}

#chart {
	width: 95%;
	height: 60vh;
	padding: 0px;
	margin: auto;
}

#sidebar {
	float: right;
	height: 100vh;
	/* height: calc(100dvh - 2px) ; */
	width: 20%;
	overflow-y: hidden;

}

#user-panel {
	display: none;
}

#meter-data {
	/* margin-top: 20pt; */
	/* margin-bottom: 20pt; */
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 80%;
	border-collapse: collapse;
	align-items: center;
}

#meter-list {
	padding: 5px;
	cursor: pointer;
	list-style-type: none;
	/* width: 100%; */
	height: 100vh;
	border: 1px solid #caced1;
	border-radius: 0.25rem;
	overflow-y: scroll;
	/* scrollbar-width: thin; */
	margin: 0px;
	font-size: 10pt;
}

#meter-list li {
	padding: 3pt;
	border-radius: 5px;
	margin: 2px 0;
}

.consumption_level_ {
	/* unknown */
	background-color: #aaa;
}

.consumption_level_Low {
	background-color: #bfd9f1;
}

.consumption_level_Normal {
	background-color: #d2ffba;
}

.consumption_level_Borderline {
	background-color: #fff9c3;
}

.consumption_level_High {
	background-color: #ffdfbf;
}

.consumption_level_VeryHigh {
	background-color: #fa5c5c;
}

.option-row {
	height: auto;
	padding-right: 200px;
}

.option-key {
	float: right;
	margin-left: 10px;
	margin-right: 10px;
	/* width: 100pt; */
	background-color: #aaa;
	border-radius: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
}

.option-key:hover {
	background-color: #777;
	cursor: pointer;
}

th {
	height: 50px;
}

table,
th,
td {
	border: 1px solid;
}

th,
td {
	padding: 15px;
}

.list-icon {
	height: 12pt;
	float: left;
	margin-right: 2px;
}

#meter-voltage,
#meter-temperature {
	direction: ltr;
}

/* #banner-container {
	position: fixed;
}

#banner {
	width: 100%;
} */

#login {
position: fixed;
  /* border: 1px solid #000; */
  width: 300px;
  height: 100x;
  z-index: 100;
  background-color: #0094c2;
  padding: 20px;
  right: 10vw;
  top: 40%;
  text-align: center;
  border-radius: 10px;
}

#login input[type=submit] {
	/* background-color: #00AB41; */
	padding: 3px 10px;
	font-size: 14pt;
	font-family: "Vazirmatn";

}

#login div {
	margin: 10px;
	font-size: 14pt;
}

#blur {
	z-index: 50;
	position: absolute;
	width: 100%;
	height: 100vh;
	background: #FFF;
	background-position-x: 0%;
	background-position-y: 0%;
	background-repeat: repeat;
	background-image: none;
	background-size: auto;
	backdrop-filter: blur(3px);
	background-image: url("img/245-160-2.jpg");
	background-repeat: no-repeat;
	background-position: left;
	background-size: 60%;
}

#last-message-box {
	background-color: #EEE;
	margin: 10px;
	padding: 10px;
	border-radius: 10px;
	overflow-y: scroll;
	height: 30vh;
}

#last-message-box div {
	font-weight: bold;
}

#last-message {
	width: 100%;
}

#last-message th,
td {
	padding: 0 5pt;
}

#last-message-box input {
	margin: 10px 0;
	font-weight: bold;
}

.warning {
	background-color: #FC0;
	border-radius: 5px;
	/* width: fit-content; */
	width: 80%;
	overflow: hidden;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
	direction: rtl;
	font-size: 12pt;
}
.warning-group-header {
	background-color: #FC0;
	border-radius: 5px;
	/* width: fit-content; */
	width: 80%;
	overflow: hidden;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
	direction: rtl;
	font-size: 12pt;
	cursor: pointer;
}

.warning-icon {
	height: 18pt;
	float: right;
	margin-left: 2px;
}

.dismiss-icon {
	height: 18pt;
	float: left;
	margin-right: 2px;
	cursor: pointer;
}

.chart-tooltip-date {
	text-align: center;
	font-weight: bold;
}

.hidden {
	display: none;
}