@media screen {
	/* code that is here will apply to any screen size */
	#header {
		text-align: center;
		width: auto;
		overflow: hidden; /* will contain if #first is longer than #second */
	}
	#logo {
		float:left; /* add this */
	}
	#hlavicka {
		text-align: center;
		width: auto;
		overflow: hidden; /* if you don't want #second to wrap below #first */
		/*float: left; !* add this *!*/
		padding-left: 20px;
	}



	/* region commons */


	/*div {*/
	/*	border-width: thin;*/
	/*	border-style: dashed;*/
	/*}*/


	.mensi {
		font-size: smaller;
	}
	.bold {
		font-weight: bold;
	}
	.red {
		color: red;
	}
	.vcelku {
		white-space: nowrap;
	}
	.ar {
		text-align: right;
	}
	span.no-link {
		pointer-events: none;
	}
	span.no-link > a {
		text-decoration:none;
		color:inherit;
	}
	span.strikethrough {
		text-decoration: line-through;
	}
	.mb-10 {
		margin-bottom: 10px;
	}
	.mb-30 {
		margin-bottom: 30px;
	}

	body {
		font-family: Tahoma, Verdana, Arial, sans-serif;
		background-color: #ffffc4;
		color: #802000;
		text-align: center;
		font-size: medium;
	}
	table {
		text-align: center;
	}
	table.scroll {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
		max-width: 1036px;
	}
	table.scroll-2 {
		overflow-x: scroll;
	}

	h2 {
		font-size: larger;
		font-weight: bold;
		text-decoration: underline;
		text-transform: uppercase;
		margin-bottom: 6px;
	}
	h3 {
		font-size: medium;
		font-weight: bold;
		text-decoration: underline;
		text-transform: uppercase;
		margin-bottom: 3px;
	}
	h4 {
		font-size: medium;
		font-weight: bold;
		text-decoration: underline;
		margin-bottom: 3px;
	}
	p {
		margin: 3px;
	}
	table {
		border: 1px solid #ffd04e;
		border-spacing: 0;
		margin: 3px auto 10px;
	}
	td, th {
		border-spacing: 2px;
		padding-left: 5px;
		padding-right: 5px;
	}
	th {
		border: 1px solid #ff8c39;
		background-color: #ff8c39;
		color: #ffffc4;
	}
	td {
		border: 1px solid #ffd04e;
	}

	table.seznam tr {
		height: 26px;
	}
	table.seznam th {
		font-weight: bold;
	}
	th {
		font-weight: bold;
		height: 26px;
	}
    summary {
        margin-top: 5px;"
    }

	ul.seznam {
		list-style-type: none;
		font-weight: bold;
		margin-block-start: 0;
		margin-block-end: 0;
		margin-right: 40px;
	}

	p.otevirani {
		font-size: small;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	p.upozorneni {
		font-weight: normal;
	}
	.red,
	p.upozorneni span {
		color: red;
	}
	.capital {
		text-transform: uppercase;
	}
	#body a,
	#paticka a {
		color: #e02f00;
	}
	#body a:hover,
	#paticka a:hover {
		color: #FF0000;
	}

	/* tooltips */
	.tooltip {
		position: relative;
		display: inline-block;
		border-bottom: 0 dotted black;
	}
	.tooltip .tooltiptext {
		visibility: hidden;
		background-color: #ff6107;
		color: #ffffc4;
		font-weight: bold;
		border-radius: 6px;
		padding: 5px 10px;
		position: absolute;
		z-index: 1;
		bottom: 125%;
		opacity: 0;
		transition: opacity 0.3s;
	}
	.tooltip .long {
		width: 400px;
		text-align: left;
		left: 0;
		margin-left: 0;
	}
	.tooltip .short {
		width: 280px;
		text-align: center;
		left: 0;
		margin-left: -50px;
	}
	.tooltip .tooltiptext::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: #555 transparent transparent transparent;
	}
	.tooltip:hover .tooltiptext {
		visibility: visible;
		opacity: 1;
	}

	/* endregion */

	/* region ikonky */

	img.pozor {
		background-image: url(obrazky/red.gif);
		background-repeat: no-repeat;
		width: 16px;
		height: 16px;
		min-width: 16px;
		min-height: 16px;
		vertical-align: middle;
	}
	img.info {
		background-image: url(obrazky/echo.gif);
		background-repeat: no-repeat;
		width: 16px;
		height: 16px;
		min-width: 16px;
		min-height: 16px;
		vertical-align: middle;
	}
	img.posta {
		background-image: url(obrazky/dopis.gif);
		background-repeat: no-repeat;
		width: 16px;
		height: 16px;
		min-width: 16px;
		min-height: 16px;
		vertical-align: middle;
	}

	/* endregion */

	/* region hlavicka */

	#logo img {
		text-align: center;
		border: none;
		width: 98px;
		height: 80px;
	}

	/* endregion */

	/* region obsah */

	#obsah-pc a,
	#obsah-mobile a{
		text-decoration: none;
		font-weight: bold;
		display: block;
		margin-top: 2px;
		margin-bottom: 2px;
		padding: 3px;
		color: #ffffc4;
		background-color: #ff8c39;
	}
	#obsah-pc a:hover,
	#obsah-mobile a:hover {
		color: #ffffc4;
		background-color: #ff6107;
	}

	/* endregion */

	/* region hlavni */

	#hlavni p {
		line-height: 1.5;
	}
	#hlavni div.nadpis2 {
		font-weight: bold;
		margin-top: 15px;
	}
	#hlavni div.nadpis2 p {
		margin-top: 5px;
	}
	#hlavni div.nadpis2 ul {
		margin-top: 0;
	}
	#hlavni table.pozor td {
		border-collapse: collapse;
		border: 2px solid #ff0000;
		padding: 30px;
	}
	#hlavni table.pozor tr.spacer {
		height: 20px;
	}
	#hlavni table.plyn td {
		border-collapse: collapse;
		padding: 3px 8px;
		margin-bottom: 10px;
		margin-top: 10px;
		font-weight: bold;
	}
	#hlavni div.sluzby p.nadpis {
		font-size: large;
		height: 15px;
		margin-bottom: 15px;
	}
	#hlavni div.sluzby p {
		font-weight: bold;
	}
	#hlavni div.sluzby ul {
		list-style-image: url("obrazky/green.gif");
		font-weight: bold;
		line-height: 30px;
	}
	#hlavni	div.sluzby ul li {
		padding-left: 15px;
	}
	#hlavni div.pozvankaCS div.dokumentyCS p,
	#hlavni div.pozvankaCS div.dokumentyCS ul
	{
		list-style-image: url("obrazky/green.gif");
		font-weight: bold;
		font-size: large;
		line-height: 30px;
	}
	#hlavni div.pozvankaCS p {
		font-size: larger;
		font-weight: bold;
		line-height: 25px;
	}
	#hlavni div.pozvankaCS div.plnamoc p {
		/*	font-size: x-large;*/
		color: red;
		margin: 15px 0;
	}
	#hlavni div.pozvankaCS img {
		border: 1px solid #ff8c39;
	}

	/* endregion */

	/* region havarie */

	#havarie span.warning  {
		color: red;
	}
	#havarie p + p {
		padding-top: 6px;
	}
	#havarie p ~ h3 {
		padding-top: 2px;
	}
	#havarie p span.title {
		text-decoration: underline;
		text-transform: uppercase;
		font-weight: bold;
	}
	#havarie p span.provider {
		font-weight: bold;
	}
	#havarie span.contact {
		font-weight: bold;
		white-space: nowrap;
	}
	#havarie table {
		margin-top: 5px;
		margin-bottom: 20px;
	}
	#havarie td {
		padding: 3px 5px;
	}
	#havarie td.contact {
		white-space: nowrap;
	}
	#havarie td.contact3 {
		white-space: nowrap;
		padding: 3px 8px;
	}

	/* endregion */

	/* region odkazy */

	#odkazy ul {
		text-align: left;
	}
	#odkazy ul li {
		padding-bottom: 3px;
		padding-top: 3px;
	}

	/* endregion */

	/* region kontakty */

	#kontakty p span.subtitle {
		font-weight: bold;
		font-size: x-large;
	}
	#kontakty span.contact {
		white-space: nowrap;
	}
	#kontakty table.contacts th {
		height: 20px;
		font-weight: bold;
	}
	#kontakty table.contacts tr,
	#kontakty table.contacts_bd tr {
		height: 18px;
	}
	#kontakty table.hodiny tr {
		height: 18px;
	}
	#kontakty table.hodiny td {
		padding-left: 10px;
		padding-right: 10px;
	}
	#kontakty ul.seznam {
		font-weight: normal;
	}

	/* endregion */

	/* region hodiny */

	#hodiny tr {
		height: 22px;
	}

	/* endregion */

	/* region spotreba */

	#spotreba th {
		height: auto;
		font-weight: normal;
	}
	#spotreba th, #spotreba td {
		text-align: right;
	}
	#spotreba th.al, #spotreba td.al {
		text-align: left;
	}

	#spotreba h3 {
		text-transform: none;
		text-decoration: none;
	}

	#spotreba select,
	#spotreba input {
		font-size: larger;
	}
	#spotreba select {
		margin-top: 20px;
		margin-bottom: 10px;
	}
	#spotreba label[for=year],
	#spotreba label[for=spotreba_house],
	#spotreba label[for=spotreba_flat] {
		font-weight: bold;
	}

	/* endregion */

	/* region login NEW */

	#login p {
		font-weight: bold;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	#login div#login-data {
		width: max-content;
		display: inline-block;
	}
	#login label {
		margin-top: 2px;
		margin-bottom: 2px;
	}
	#login div#container label {
		margin-left: 10px;
		padding-top: 10px;
	}
	#login input[type=text],
	#login input[type=password] {
		color: #777;
		padding-left: 10px;
		margin: 2px;
		width: 280px;
		height: 24px;
	}

	/* endregion */

	/* region register */

	#register p {
		font-weight: bold;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	#register span.star {
		width: 10px;
		margin-left: 0;
		margin-right: 0;
		display: inline-block;
	}
	#register label {
		margin-top: 2px;
		margin-bottom: 2px;
	}
	#register input[type=text],
	#register input[type=password],
	#register input[type=email] {
		width: 280px;
		height: 24px;
		padding-left: 10px;
		margin: 2px 0 5px;
	}

	/* endregion */

	/* region zpravy */

    #zpravy p {
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #zpravy span.star {
        width: 10px;
        margin-left: 0;
        margin-right: 0;
        display: inline-block;
    }
    #zpravy label {
        margin-top: 2px;
        margin-bottom: 2px;
    }
    #zpravy input[type=text],
    #zpravy input[type=password],
    #zpravy input[type=email] {
        width: 280px;
        height: 24px;
        padding-left: 10px;
        margin: 2px 0 5px;
    }

	/* endregion */

	/* region inputs */

	input {
		outline: none;
	}
	#buttons {
		padding: 20px;
	}
	#buttons a {
		font-size: medium;
		margin-right: 10px;
		margin-left: 10px;
		margin-top: 20px;
		padding: 2px 10px;
		height: 30px;
		font-weight: bold;
		color: #ffffc4;
		background-color: #ff8c39; /*IE fallback*/
		border: 1px solid #ff8c39;
		border-radius: 5px;

		/*background-image: -webkit-gradient(linear, left top, left bottom, from(#ff8c39), to(#ff8c39));*/
		/*background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);*/
		/*background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);*/
		/*box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);*/
		cursor: pointer;
	}
	#buttons a#submitButton {
		/*background-color: #ff6107; !*IE fallback*!*/
		/*border: 1px solid #ff6107;*/
	}
	#buttons a:hover {
		color: #ffffc4;
		background-color: #ff6107;
	}

	/* endregion */

	/* region confirm */

	#confirm p {
		color: red;
		margin: 3px;
		vertical-align: center;
	}

	/* endregion */

}

@media screen and (max-width: 800px) {
	/* comes into effect for screens less than or equal to 320 pixels */
	#logo {
		width: 0;
		display: none;
	}
	#content {
		padding-top: 32px;
		width: auto;
		overflow: hidden; /* will contain if #first is longer than #second */
	}
	#body {
		width: auto !important;
		float: none !important;
	}
	#hlavicka {
		display: none;
	}
	#hlavicka h1 {
		font-size: x-large;
		margin-top: 5px;
		margin-bottom: 0;
	}
	#hlavicka p {
		font-size: small;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	#obsah-pc {
		display: none;
	}
	#obsah-mobile {
		width: 100%;
		float: none; /* add this */
		left: 0;
		top: 0;
		position: absolute;
		background-color: #ffffc4;
	}
	#obsah-mobile a {
		width: 100%;
		left: 0;
	}
	#obsah-mobile #stranky-mobile {
		display: none;
	}
	#obsah-mobile a#stranky-nadpis-mobile {
		/*position: absolute;*/
		/*top: 0;*/
		/*left: 0;*/
		/*background: #ffffc4;*/
		/*width: 100%;*/
		display: block;
		/*width: -moz-available;*/
		overflow: hidden;
	}

	#hlavni {
		margin-left: 0;
	}
	#hlavni div.pozvankaCS div.scan {
		display: none;
	}
	#register div#container,
	#zpravy div#container {
		min-width: 295px;
	}
	div#register div#login-data,
	div#register div#validace-email,
	div#zpravy div#validace-email {
		display: inline-block;
	}
	div#register div#validace-byt,
    div#zpravy div#validace-byt,
    div#zpravy div#input-zprava,
	div#register div#validace-vypocet,
	div#zpravy div#validace-vypocet {
		display: inline;
	}
	#login div#login-data label,
	#register div#login-data label,
	#register div#validace-email label,
	#zpravy div#validace-email label {
		display: block;
		text-align: left;
		width: 280px;
	}
	#register div#login-data label,
	#register div#validace-email label,
    #zpravy div#validace-email label {
		margin-left: 0;
	}
	#register div#validace-byt label,
	#zpravy div#validace-byt label,
	#register div#validace-vypocet label,
	#zpravy div#validace-vypocet label,
    #zpravy div#input-zprava label {
		display: inline-block;
		text-align: right;
		margin-left: 0;
		padding-top: 10px;
	}
	#register div.vchod input,
	#zpravy div.vchod select {
		width: 140px;
	}
	#register div.vchod label,
	#zpravy div.vchod label {
		width: 135px;
	}
	#register div.byt input,
    #zpravy div.byt select,
    #register div.vysledek input,
    #zpravy div.vysledek input,
    #zpravy div.nadpis select {
		width: 140px;
	}
	#register div.byt label,
	#zpravy div.byt label,
	#register div.vysledek label,
	#zpravy div.vysledek label,
    #zpravy div.nadpis label {
		width: 135px;
	}
    #zpravy div.zprava {
        padding-top: 10px;
        margin-top: 10px;
    }
    #zpravy div.zprava textarea {
        min-width: 140px;
        max-width: 320px !important;
        min-height: 50px;
        width: 280px;
    }
    #zpravy div.zprava label {
        width: 80px;
    }
	table.seznam {
		/*min-width: 304px;*/
	}
	body {
		margin: 3px;
		min-width: 314px;
	}
}
@media screen and (min-width: 801px) {
	/* comes into effect for screens larger than or equal to 481 pixels */
	#logo {
		width: 240px;
		display: block;
	}
	#content {
		width: auto;
		overflow: hidden; /* will contain if #first is longer than #second */
		display: block;
	}
	#body {
		text-align: center;
		width: auto;
		overflow: hidden; /* if you don't want #second to wrap below #first */
		float: none; /* add this */
	}
	#body {
		padding-left: 20px;
	}
	#hlavicka h1 {
		font-size: xx-large;
		margin-top: 5px;
		margin-bottom: 0;
	}
	#hlavicka p {
		font-size: large;
		margin-top: 8px;
	}
	#obsah-mobile {
		display: none;
	}
	#obsah-pc {
		text-align: center;
		width: 240px;
		float:left; /* add this */
	}
	#obsah-pc #stranky-nadpis {
		display: none;
	}
	#hlavni div.pozvankaCS div.scan {
		display: block;
	}
	div#register div#login-data,
	div#register div#validace-email,
    div#zpravy div#validace-email {
		width: max-content;
		display: inline-block;
	}
	div#register div#validace-byt,
    div#zpravy div#validace-byt,
	div#register div#validace-vypocet,
    div#zpravy div#validace-vypocet,
    div#zpravy div#input-zprava {
		width: max-content;
		display: inline;
	}
	#register div#container label,
    #zpravy div#container label {
		margin-left: 8px;
		padding-top: 10px;
	}
	#login label,
	#register div#login-data label,
    #zpravy div#login-data label,
	#register div#validace-email label,
    #zpravy div#validace-email label {
		display: inline-block;
		text-align: right;
		width: 135px;
	}
	#register div#validace-byt label,
    #zpravy div#validace-byt label,
	#register div#validace-vypocet label,
    #zpravy div#validace-vypocet label,
    #zpravy div#input-zprava label {
		display: inline-block;
		text-align: right;
	}
	#register div.vchod input {
        width: 60px;
    }
    #zpravy div.vchod select,
    #zpravy div.byt select,
    #zpravy div.nadpis select {
		width: 140px;
	}
	#register div.vchod label {
		width: 355px;
	}
    #zpravy div.vchod label,
    #zpravy div.byt label,
    #zpravy div.nadpis label {
        width: 273px;
    }
	#register div.byt input,
	#register div.vysledek input,
    #zpravy div.vysledek input {
		width: 40px;
	}
	#register div.byt label,
	#register div.vysledek label,
    #zpravy div.vysledek label {
		width: 375px;
	}
    #zpravy div.zprava textarea {
        min-width: 320px;
        max-width: 640px !important;
        min-height: 50px;
        width: 429px;
    }
    #zpravy div.zprava label {
        width: 80px;
    }

}

@media print {
	#logo {
		width: 0;
		display: none;
	}
	#hlavicka {
		display: none;
	}
	#obsah-pc {
		display: none;
	}
	#obsah-mobile {
		display: none;
	}
	#paticka {
		display: none;
	}
	.no-print {
		display: none;
	}
	body {
		color: black;
		text-align: center;
	}
	table {
		text-align: center;
		margin-right: auto;
		margin-left: auto;
	}
	td, th {
		/*border-spacing: 0;*/
		text-align: center;
	}
	#spotreba td, #spotreba th {
		text-align: right;
		font-size: 0.72em;
	}
	#spotreba td.al, #spotreba th.al {
		text-align: left;
	}
	th {
		border-bottom-width: 1px;
		border-bottom-style: solid;
		font-weight: normal;
	}
	tr.last-row td {
		border-top-width: 1px;
		border-top-style: solid;
	}
	p, h4 {
		margin-bottom: 5px;
		margin-top: 5px;
	}
	.mb-10 {
		margin-bottom: 10px;
	}
	.mb-30 {
		margin-bottom: 30px;
	}


}