@import url('https://fonts.googleapis.com/css2?family=Lato');
@import url('https://fonts.googleapis.com/css2?family=Oswald');

body
{
	background-color: #ccc;
	background-image: url('img/okcloud-seamless-396px.png');
	font-family: Lato, Tahoma, Helvetica, Arial, sans-serif;
	font-size: 13pt;
	margin: 0;
	padding: 0;
}

/* elementy kontrolne */
input, select, .like-button
{
	font-size: inherit;
	padding: 0.2em;
	margin-top: 0.5em;
	margin-left: 0.5em;

	border: 1px solid #999;
	border-radius: 3px;
}
body.touchscreen input, body.touchscreen select, body.touchscreen .like-button
{
	padding: 0.5em;
}

label, .like-ctrl
{
	font-size: inherit;
	margin-top: 0.5em;
	margin-left: 0.5em;
}

select, input[type=button], input[type=submit], .like-button
{
	background-color: #ddd;
}
input[type=text]
{
	background-color: #fff;
}


/* elementy kontrolne - wyroznienia active */
input[type=button]:active, .like-button:active
{
	background-color: #ffd;
}
select:focus-visible, input[type=button]:focus-visible
{
	-outline-style: solid;
	-outline-width: 2px;
	-outline-color: #888;
}

/* elementy kontrolne - wyroznienia disabled */
.disabled-ctl, .disabled-ctl:active
{
	color: #444;
	background-color: #bbb;
}
.like-button.disabled-ctl
{
	pointer-events: none;
	cursor: default;
}
.like-button.disabled-ctl img.like-button-ico-l, .like-button.disabled-ctl img.like-button-ico-r, .like-button.disabled-ctl img.like-button-ico
{
	opacity: 0.4;
}
input:disabled, select:disabled
{
	pointer-events: none;
	cursor: default;
	user-select: none;
	color: #444;
	background-color: #bbb;
	opacity: 1.0;
}


/* wnetrze div.like-button */
.like-button
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	cursor: pointer;
}
img.like-button-ico
{
	padding-left: 8px;
	padding-right: 8px;
}
img.like-button-ico-r
{
	text-align: right;
	padding-left: 8px;
}
img.like-button-ico-l
{
	text-align: left;
	padding-right: 8px;
}
.button-3em
{
	width: 3em;
}

/* odstepy przy ukladaniu kontrolek */
.grouping
{
	/* do skompensowania left- i top-marginu elementow wewnatrz */
	margin-left: -0.5em;
	margin-top: -0.5em;
}
.grouping-vsp
{
	/* do skompensowania left-marginu elementow wewnatrz */
	margin-left: -0.5em;
}
.vspace
{
	/* zwyczajny top-margin dla div-a albo form-a */
	margin-top: 0.5em;
}


/* dodatki stylowe */
.center
{
	text-align: center;
}
.bold
{
	font-weight: bold;
}
.noselect
{
	user-select: none;
}
.pointer
{
	cursor: pointer;
}
.hidden
{
	visibility: hidden;
}
.left
{
	float: left;
}
.right
{
	float: right;
}
.clear
{
	clear: both;
}
.block
{
	display: block;
}

.squashed
{
	max-height: 0;
	overflow-y: hidden;
	transition: max-height 0.3s ease-in;
}
.unsquashed
{
	max-height: 10em;
	overflow-y: hidden;
	transition: max-height 0.3s ease-in;
}
.smaller-text
{
	font-size: 0.85em;
}
.red-text
{
	color: red;
}
.orange-text
{
	color: orange;
}
.blue-text
{
	color: blue;
}
.brown-text
{
	color: brown;
}
.gray-text
{
	color: #555;
}

.flex-col
{
	display: flex;
	flex-direction: column;
}
.flex-row
{
	display: flex;
	flex-direction: row;
}
.flex-wrap
{
	flex-wrap: wrap;
}
.grow, .flex-grow
{
	flex-grow: 1;
}
.align-center
{
	align-items: center;
}


/* EMPTY SPACE */
div.empty-space
{
	border-top: solid 7px #ddd;
	border-bottom: solid 3px #eee;
}


/* INDICATOR */

div.indicator-window
{
	position: fixed;
	top: 20px;
	left: 60px;
	background: rgba(0,0,0,0.5);
	z-index: 95;
}

div.indicator-window-hidden
{
	display: none;
}

div.color-sq
{
	display: inline-block;
	width: 12px;
	height: 12px;
	border: none;
}


/* STATUS-BAR */

div.status-bar
{
	min-height: 19px;
	height: 1em;
	margin-left: 0.5em;
	margin-right: 0.5em;
	padding: 2px;
	background-color: #fefefe;
	border-bottom: 1px dotted #bbb;
	font-size: 0.8em;
}
div.status-bar #status-sysname
{
	color: #333;
	margin-right: 1em;
}
div.status-bar #status-readout-timer
{
	position: relative;
	top: 2px;
}

div#status-loading-icon
{
	float: right;
	width: 53px;
	height: 19px;
}

/* PAGE */

div.the-page
{
	display: flex;
	margin: 0;
	padding: 0;
	flex-flow: nowrap row;
}

ul.the-menu
{
	position: sticky;
	top: 0;
	display: flex;
	margin: 0;
	padding: 0;
	flex-flow: nowrap column;
	list-style: none;
	max-height: 100vh;
	z-index: 5;
}
ul.the-menu li
{
	padding-left: 0.5em;
	padding-right: 0.5em;
	cursor: pointer;
}

div.the-showspace
{
	flex-grow: 1;
	background-color: #fefefe;
}

main
{
	display: block;
	flex-grow: 1;
	padding: 0.5em;
}

.menu-button
{
	display: flex;
	border-bottom: solid 2px #000;
	border-right: solid 2px #000;
	background-color: #ddd;
	align-items: center;
	user-select: none;
	text-decoration-color: rgba(44,44,44,0.7);
}
.menu-button-filler
{
	flex-grow: 1;
	border-color: #ddd;
}
.menu-button-gray   { background-color: #eee; border-color: #000 #ccc #ccc; }
.menu-button-gray2  { background-color: #bbb; border-color: #000 #999 #999; }
.menu-button-green  { background-color: #cea; border-color: #000 #ac8 #ac8; }
.menu-button-green2 { background-color: #bdd; border-color: #000 #9bb #9bb; }
.menu-button-red    { background-color: #eaa; border-color: #000 #c88 #c88; }
.menu-button-blue   { background-color: #ace; border-color: #000 #8ac #8ac; }
.menu-button-purple { background-color: #b8e; border-color: #000 #96c #96c; }

.menu-selected
{
	background-image: linear-gradient(to right, rgba(0,0,0,0.0), rgba(254,254,254,1.0));
	border-right: 2px solid #fefefe;
	border-bottom: 2px solid #fefefe;
}
.menu-name
{
	display: block;
	font-size: 1.5em;
}
.menu-button:hover
{
	text-decoration-line: underline;
}


/* RED-ERROR */

.red-error
{
	background-color: #fefefe;
}
.red-error-inside
{
	padding: 0.5em;
	margin: 0.5em;
	border: 1px solid red;
}

/* DATA PAGE */

.device-data
{
	display: block;
	border-bottom: 1px dotted #686;
}
.device-data-bar
{
	display: block;
	margin: 0;
	padding: 0.5em;
	background-color: #ded;
	user-select: none;
	cursor: pointer;
	text-decoration-color: rgba(80,80,80,0.7);
}
.device-data-bar:hover
{
	text-decoration-line: underline;
}
.device-data-opened .device-data-bar
{
	background-color: #797;
	color: #fafafa;
	text-decoration-color: rgba(230,230,230,0.7);
}
.device-open-close-icon
{
	float: right;
	height: 24px;
	width: 24px;
	background-image: url('img/ico-plus-24.png');
	pointer-events: none; /* przezroczystosc dla klikania */
}
.device-data-opened .device-open-close-icon
{
	background-image: url('img/ico-minus-24.png');
}

.device-data-drawer
{
	max-height: 0;
	overflow-y: hidden;
	transition: max-height 0.3s ease-in-out;
}
.device-data-opened    .device-data-drawer
{
	max-height: 50px /*90em*/;
	transition: max-height 0.3s ease-in-out;
}

.device-data-content
{
	padding: 0.1em 0.1em 0.6em 0.6em;
}
.device-info
{}
.device-sn
{
	color: brown;
}
.device-warnings ul
{
	padding: 0;
	margin: 0;
	text-indent: 0;
	font-size: 0.8em;
	list-style-position: inside;
	list-style-image: url('img/ico-warn-9.png');
	color: #850;
}

.device-data-separated-div
{
	margin-top: 0.4em;
}

table.device-msrs-tab
{
	background-color: #f4f4f4;
	border-collapse: collapse;
	margin-top: 0.5em;
}
table.device-msrs-tab td
{
	padding: 0.2em 0.4em 0.2em 0.4em;
	border-bottom: 1px dotted #c0c0c0;
}
table.device-msrs-tab td.top
{
	vertical-align: top;
}
table.device-msrs-tab tr:nth-child(2n+1)
{
	background-color: #e8e8e8;
}

table.device-msrs-tab tr.rowlight td
{
	background-color: #f4f4f4;
}
table.device-msrs-tab tr.rowdark td
{
	background-color: #e8e8e8;
}
table.device-msrs-tab td.device-data-par-name
{
	max-width: 28vw;
	white-space: pre-line;
	word-wrap: break-word;
}

/* INFO PAGE */

.system-info
{
	display: block;
	margin: 0;
	padding: 0.3em;
}


/* USER PAGE */

.user-info
{
	display: block;
	margin: 0;
	padding: 0.3em;
}


/* NARROW LAYOUT */

@media screen and (max-width: 699px)
{
	div.the-page
	{
		flex-flow: wrap column;
	}
	ul.the-menu
	{
		flex-flow: wrap row;
	}
	ul.the-menu li
	{
		padding: 0.1em 0 0.3em 0;
	}
	.menu-button
	{
		flex-flow: wrap column;
		flex-grow: 1;
		-flex-shrink: 2;
	}
	.menu-button-filler
	{
		display: none;
	}
	.menu-icon
	{
		max-width: 10vw;
	}
	.menu-name
	{
		font-size: 3.5vw;
	}
	.menu-selected, .menu-button:hover
	{
		background-image: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(254,254,254,1.0));
	}
}

@media screen and (max-width: 259px)
{
	.menu-name
	{
		display: none;
	}
}