/* ── Global ───────────────────────────────────────────────────────────────── */

html { overflow: hidden; letter-spacing: 0; font-family: verdana, sans-serif; }

div { position: absolute; }

/* ── Canvas ───────────────────────────────────────────────────────────────── */

#Content
{
	width: 1920px; height: 1080px; left: 0; top: 0; background: rgb(207,226,243)
}

/* ── Header ──────────────────────────────────────────────────────────────── */

#Header
{
	width: 1920px; height: 80px; left: 0; top: 0; background: rgb(68,68,68)
}

#HeaderLogo
{
	width: 360px; height: 80px; left: 0; top: 0; background: #FFFFFF
}

#logo
{
	max-width: 297px;
	max-height: 76px;
}

#HeaderText
{
	width: 795px; height: 80px; left: 380px; top: 0;
	color: #FFFFFF;
	font-size: 48px;
	overflow: hidden;
}

#HeaderDate, #HeaderTime
{
	color: #FFFFFF;
	font-size: 32px;
	overflow: hidden;
}

#HeaderDate { width: 550px; height: 80px; left: 1185px; top: 0 }
#HeaderTime { width: 180px; height: 80px; left: 1725px; top: 0 }

/* ── Information ─────────────────────────────────────────────────────────── */

#InformationHeader
{
	width: 1080px; height: 60px; left: 15px; top: 95px; background: rgb(0,98,155)
}

#Information
{
	width: 1080px; height: 810px; left: 15px; top: 155px; background: #FFFFFF;
	overflow: hidden;
}

#Information img
{
	max-width: 1080px;
	max-height: 810px;
}

/* ── Contacts ────────────────────────────────────────────────────────────── */

#ContactsHeader
{
	width: 470px; height: 60px; left: 1110px; top: 95px; background: rgb(119,189,34)
}

#Contacts
{
	width: 470px; height: 525px; left: 1110px; top: 155px; background: #FFFFFF;
	overflow: hidden;
}

.ContactName
{
	background-color: rgb(119,189,34);
	font-size: 25px;
	padding: 5px;
	margin-left: 10px;
	margin-right: 10px;
	color: #FFFFFF;
}

.ContactNumber
{
	font-size: 25px;
	margin-left: 20px;
	color: rgb(68,68,68);
}

/* ── Important ───────────────────────────────────────────────────────────── */

#ImportantHeader
{
	width: 470px; height: 60px; left: 1110px; top: 695px; background: rgb(235,67,52); display: none;
}

#Important
{
	width: 470px; height: 210px; left: 1110px; top: 755px; background: #FFFFFF; display: none;
	color: rgb(235,67,52);
	font-size: 36px;
	padding: 0 5px 0 20px;
	box-sizing: border-box;
}

/* ── Weather ─────────────────────────────────────────────────────────────── */

#WeatherHeader
{
	width: 310px; height: 60px; left: 1595px; top: 95px; background: rgb(232,119,34)
}

#Weather
{
	width: 310px; height: 600px; left: 1595px; top: 155px; background: #FFFFFF;
	overflow: hidden;
	color: rgb(0,98,155);
}

/* ── QR Code ─────────────────────────────────────────────────────────────── */

#QRCodeHeader
{
	width: 310px; height: 60px; left: 1595px; top: 770px; background: rgb(0,98,155); display: none
}

#QRCode
{
	width: 135px; height: 135px; left: 1595px; top: 830px; background: #FFFFFF; display: none;
}

#QRCode img
{
	width: 125px; height: 125px;
}

#QRCodeText
{
	width: 175px; height: 135px; left: 1730px; top: 830px; background: #FFFFFF; display: none;
	font-size: 20px;
	padding-right: 5px;
	box-sizing: border-box;
}

/* ── Footer / News ───────────────────────────────────────────────────────── */

#Footer
{
	width: 1920px; height: 100px; left: 0; top: 980px; background: rgb(68,68,68)
}

#NewsFeed
{
	width: 1250px; height: 90px; left: 400px; top: 988px
}

#NewsHeader
{
	width: 200px; height: 100px; left: 0; top: 980px
}

#NewsImage
{
	width: 160px; height: 100px; left: 210px; top: 980px
}

#NewsImage img
{
	height: 90px;
}

#NewsTitle
{
	width: 1195px; height: 90px; /* revert: height: 36px */ left: 385px; top: 982px; /* revert: top: 982px */
	color: #FFFFFF;
	font-size: 28px;
	line-height: 30px;
	display: -webkit-box;
	-webkit-line-clamp: 3;        /* revert: remove these 3 lines, restore white-space/font-weight/overflow/text-overflow below */
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* revert: font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; */
}

#NewsDescription
{
	width: 1195px; height: 60px; left: 385px; top: 1018px;
	color: #FFFFFF;
	font-size: 24px;
	line-height: 30px;
	display: none;                /* revert: display: -webkit-box; */
	/* revert: -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-wrap: break-word; */
}

#UbimobLogo
{
	width: 200px; height: 100px; left: 1650px; top: 980px; background: rgb(66,66,66)
}

#UbimobLogo img
{
	max-width: 200px;
	max-height: 100px;
	object-fit: contain;
}

/* ── Shared classes ──────────────────────────────────────────────────────── */

.icon-text {
	display: flex;
	align-items: center;
	height: 60px;
	color: #FFFFFF;
}

.icon-text img.nb-icon {
	margin-left: 15px;
	margin-right: 12px;
	width: 50px;
	height: 50px;
	flex-shrink: 0;      /* prevents icon squishing in flex container */
}

.icon-text span {
	font-size: 45px;
	line-height: 1;
}

.center-content, .center-content-left, .center-content-right {
	display: flex;
	align-items: center;
}

.center-content       { justify-content: center; }
.center-content-left  { justify-content: flex-start; }
.center-content-right { justify-content: flex-end; }

/* ── Conditional panel expansion ─────────────────────────────────────────── */

body.important-hidden #Contacts { height: 810px; }
body.qr-hidden #Weather         { height: 810px; }