html,body{ width: 100%; height: 100%; }
*{font-family: "Segoe UI Light","Helvetica Neue","Segoe UI","Segoe WP",sans-serif;}
#overlay, #window{ display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 99991; }
#overlay{ display: block; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.5s ease; }
#window{ z-index: 99990; }
#overlay-message, #window-content{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate3d(-50%, -50%, 0);
	z-index: 99991;
	width: 50%;
	height: 125px;
	background-color: rgba(255,255,255,0.8);
	border-radius: 7px;
	font-size: 19px;
	text-align: center;
	box-sizing: content-box;
	padding: 10px;
}

#overlay-message{display:flex;justify-content: center;align-items: center;font-size: 24px; flex-direction: column; }
#window-content{top:5%;	left:5%;transform: translate(0%, 0%);width: 90%;height: 90%;z-index: 99990;overflow: hidden;}
sup{ top: -.4em; }
.tile{	display: flex;	border: 0;	flex-direction: column;	justify-content: space-around;	opacity: .90; text-align: center; color: #FFF;}
.tile header{ font-size: 23px; }
h1{ font-size: 40px; font-weight: bold; margin: 0; }
h1.fve-status { display: flex; font-size: 24px; }
h1.fve-status i { flex: 1; }
.tile footer{ display: flex; flex-flow: row; justify-content: space-around; font-size: 20px; }
.tile.tile-weather{ grid-column: span 3; opacity: 1; }
.tile.tile-weather .tile-container{ display: flex; flex-direction: column; width: 100%; height: 100%; }
.tile.tile-weather h1{ display: flex; justify-content: center; }
.tile.tile-weather h1 i { margin-right: 10px; margin-top: 5px; }
.tile.tile-weather h1 sup{ top: 0.5em; }
.tile.tile-weather footer{ font-size: 21px; flex: 1; }
.tile .tile-col{ flex: 1; display: flex; flex-flow: column; }
.tile footer .row-block{ display: flex; flex-direction: column; align-self: center; font-weight: 400; }

.tile.tile-weather{ background-color: #F39C07; }
.tile.tile-switch{ background-color: #e51400; }
.tile.tile-toggle{ background-color: #344937; }
.tile.tile-flow{ background-color: #7b4f9d; }
.tile.tile-power{ background-color: #7f8c8d; }
.tile.tile-temp{ background-color: #384; }
.tile.tile-pool{ background-color: #2e8bcc; }
.tile.tile-clouds{ background-color: #ecf0f1; color: #34495e; }
.tile.tile-fve{ background-color: #995730; }

.list-block .item-content.fve-cell { font-size: 13px; justify-content: start; padding: 0 0 0 15px; min-height: 10px; }
.list-block .item-content.fve-cell .item-media { padding: 0; width: 8px; }
.list-block .item-content.fve-cell .item-media.wide-label { width: 75px; font-weight: bold; justify-content: flex-end; }
.list-block .item-content.fve-cell .item-inner { padding: 0; min-height: 8px; }
.list-block .item-content.fve-cell .item-inner:after { display: none; }

.item-inner .fve-battery { width: 100%; display: flex; align-items: center; }
.item-inner .fve-battery-bg { position: absolute; width: 100%; height: calc(100% - 10px); background-color: #F39C07; z-index:  13501; }
.fve-battery h2, .fve-battery h3 { margin: 0; z-index: 13502; }
.fve-battery h2{ font-size: 20px; }
.fve-battery h3{ font-size: 16px; }
.fve-cells { display: flex; flex-direction: row; flex-wrap: wrap; }
.fve-cells div.fve-cell { flex: 1 0 50%; }


html,body{background-color: #000;}
.modal{
	width: 500px;
	max-height: calc(100% - 40%);
	left: calc(100% / 2 - (500px / 2));
	margin-left: 0;
	overflow-y: hidden;
	display: flex;
	flex-direction: column;
}
.modal .modal-inner{ height: 80%; display: flex; flex-direction: column;}
.modal .modal-inner .modal-text{ flex: 1; overflow-y: scroll; }
.modal .modal-inner .modal-text .list-block { margin: 5px 0; }
.modal .modal-buttons{ height: 20%; }

.fve-wrapper {
	display: flex;
	height: 70%;
}
.fve-wrapper > .fve-item, .fve-group {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-self: center;
}
.fve-group{
	height: 100%;
}
.fve-group .fve-item {
	flex: 1;
}
.fve-item > i, .fve-item > .fve-icon {
	font-size: 26px;
}
.fve-props{
	display: flex;
	flex-direction: column;
}
.fve-line{
	width: 50px;
	height: 2px;
	background-color: #fff;
	position: absolute;
}
.fve-line-to-house{
	margin-top: -8px;
	margin-left: -19px;
	width: 35px;
	transform: rotateZ(30deg);
}
.fve-line-to-solar{
	margin-top: -8px;
	margin-left: -19px;
	width: 35px;
	transform: rotateZ(-30deg);
}
.fve-line-to-battery{
	margin-top: -20px;
	margin-left: -19px;
	width: 23px;
}

@supports not (display: grid){
	.grid{
		width: 100%;
		height: 100%;
	}
	.tile{
		box-sizing: border-box;
		float: left;
		width: calc(100% / 5);
		height: calc(100% / 5);
		border: 2px solid rgba(0,0,0,.8);
	}
	/*.tile-clouds{order: 1;}
	.tile-power{order: 2;}*/

	.tile.tile-weather{
		width: 60%;
		display: block;
	}
}

@supports (display: grid){
	.grid{
		display: grid;
		grid-gap: 3px;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(4, 1fr);
		height: 100%;
		grid-auto-flow: row dense;
	}
}

/* landscape and portrait iphones */
@media screen and (max-width: 414px), screen and (max-height: 414px){
	.grid{ grid-gap: 2px; }
	.tile header{ font-size: 14px; }
	h1{ font-size: 32px; }
	.tile footer{ font-size: 13px; }
	.tile.tile-weather footer{ font-size: 13px; }
	.fve-item > i, .fve-item > .fve-icon { font-size: 20px; }
	.fve-line-to-house{
		margin-top: -8px;
		margin-left: -19px;
		width: 10px;
		transform: rotateZ(30deg);
	}
	.fve-line-to-solar{
		margin-top: -8px;
		margin-left: -19px;
		width: 10px;
		transform: rotateZ(-30deg);
	}
	.fve-line-to-battery{
		margin-top: -20px;
		margin-left: -19px;
		width: 10px;
	}
}

/* landspace iphones */
@media screen and (max-width: 896px) and (max-height: 414px){
	.grid{ grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); }
	.tile.tile-weather{ grid-column: span 2; }
}

/* portrait iphones */
@media screen and (max-width: 414px) and (max-height: 896px){
	.grid{ grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(7, 1fr); }
	.modal{ width: 325px; left: calc(100% / 2 - (325px / 2)) }
	.tile.tile-weather{ grid-column: span 2; }
}

/* portrait iphone SE */
@media screen and (max-width: 400px) and (max-height: 600px){
	.grid{ grid-template-columns: repeat(3, 1fr); }
	.list-block{ font-size: 14px; }
	.list-block .item-content{ min-height: 30px; }
	.list-block .item-inner{ min-height: 33px; padding-top: 2px; padding-bottom: 2px; }
	.modal{ width: 310px; left: calc(100% / 2 - (310px / 2)); }
	.tile.tile-weather{ grid-column: span 2; }
}

@media screen and (max-height: 320px), screen and (max-width: 320px){
	.tile header{ font-size: 13px; }
	h1{ font-size: 29px; }
	.tile footer{ font-size: 11px; }
	.tile.tile-weather{ grid-column: span 2; }
	.tile.tile-weather footer{ font-size: 10px; }
}

.ios-popover {
	position: absolute;
	width: 412px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	font-family: "Helvetica Neue";
	-webkit-box-shadow: 0 10px 45px 0px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,.5);
	background: rgba(0,15,46,.94);
	background-clip: padding-box;
	border: 1px solid rgba(0,0,0,.8);
	/* force hardware acceleration */
	-webkit-transform:translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transition: opacity .3s ease-out;
	opacity: 1;
}

.trigger-msg{ display: flex; flex-direction: column; width: 100%; height: 100%; justify-content: space-around; }
.trigger-msg i{ font-size: 55px; }
.list-block .item-title.label{width: unset; text-align: left; flex: 1; }
.list-block .item-input{width: 50px;}
.list-block .item-inner{
	align-items: flex-start;
}

#modal-form div.accordion-item-content ul{
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}