@media only screen and (max-width: 1176px)
{
	#content
	{
		padding: 25px 25px 0 25px;
		margin-bottom: 30px;
	}

	#head
	{
		background-color: var(--dark-layer-one);
		/* opacity: .95; */
		height: calc(env(safe-area-inset-top) * 1.5);
		position: fixed;
		z-index: 10000;
		left: 0;
		width: 100%;
		top: 0;
	}

	#footer-container
	{
		margin: 0;
	}

	#head-content, #footer-content
	{
		position: fixed;
	}

	#head-content
	{
		box-sizing: border-box;
		top: 0;
		width: 100%;
		border-bottom: 1px solid rgba(220, 220, 230, 0.1);
		
		padding-top: calc(64px + env(safe-area-inset-top));
		padding-bottom: 20px;
		box-shadow: 0px -20px 20px 20px rgba(0, 0, 10, .4);
		/* background-color: var(--dark-layer-two); */
		background-color: rgb(40, 40, 55);
		margin-bottom: 100px;
		/* opacity: .95; */
		margin-top: 0;
	}

	#footer-content
	{
		width: 100%;
		bottom: 0;
		border-width: 0;
		border-top: 1px solid rgba(220, 220, 230, 0.1);
		max-width: none;
		border-radius: 0;
		padding: 30px 25px;
	}

	#head-temp
	{
		padding-top: calc(64px + env(safe-area-inset-top));
		padding-bottom: 20px;
	}

	#footer-temp
	{
		padding: 30px 25px;
	}

	#head-content p, #head-temp p
	{
		margin-left: 20px;
		margin-right: 20px;
	}

	#head-content h1, #head-temp h1
	{
		max-width: calc(100% - 40px);
	}

	#head-content h1.hidden, #head-content p.hidden
	{
		opacity: 0;
	}

	#head-content.hidden, #footer-content.hidden, #top-menu.hidden
	{
		opacity: 0;
		pointer-events: none;
	}

	h1
	{
		font-size: 38px;
	}

	h2
	{
		font-size: 24px;
	}

	p, a, label
	{
		font-size: 18px!important;
	}

	body
	{
		min-height: 100vh;
	}

	.main
	{
		max-width: 100%;
	}

	.control-panel
	{
		border-radius: 0!important;
		max-width: 100%!important;
		white-space: normal;
		margin-bottom: 0px;
		box-shadow: none;
	}

	.control-container
	{
		width: calc(100% + 50px)!important;
		left: -25px;
		margin-top: calc(env(safe-area-inset-top) * 1.5);
		min-width: none;
		max-width: none;
		grid-template-columns: 100%!important;
		gap: 0px;
		top: -25px;
	}

	input, textarea, button, select, .select-selected, .custom-select > .select-items, .scrollarea
	{
		font-size: 18px;
		font-weight: 300!important;
		border-radius: 30px;
	}

	input, button, select, .select-selected
	{
		height: 60px;
	}

	.overlay, .overlay-bottom
	{
		top: 70px;
		margin-top: -70px;
	}

	.overlay-bottom
	{
		top: 90px;
	}

	.widget
	{
		display: block;
		border-radius: 30px;
		font-size: 18px!important;
		font-weight: 300!important;
		margin-left: 0;
	}

	.widget-multi
	{
		display: flex;
	}

	.widget:not(.widget-multi) .widget-right, .widget:not(.widget-multi) .widget-left
	{
		width: 100%;
		text-align: center;
	}

	#widgets .widget, .widgets .widget
	{
		flex-basis: calc(100% / 2 - 20px / 2);
	}

	textarea::-webkit-scrollbar-track, textarea::-webkit-scrollbar, .custom-select > .select-items::-webkit-scrollbar-track, .custom-select > .select-items::-webkit-scrollbar, .scrollarea::-webkit-scrollbar-track, .scrollarea::-webkit-scrollbar
	{
		border-radius: 0 26px 26px 0;
	}

	textarea::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-corner, .custom-select > .select-items::-webkit-scrollbar-thumb, .custom-select > .select-items::-webkit-scrollbar-corner, .scrollarea::-webkit-scrollbar-thumb, .scrollarea::-webkit-scrollbar-corner
	{
		min-height: 52px;
	}
	/*
	#devices, #plugin-container, #automation-infos, #settings-form, #automation, #create-form, #config-editor, #service-form, #settings-form-main
	{
		gap: 30px;
	}
	*/
	#automation .widgets
	{
		gap: 15px;
	}
	
	#devices.grid-view button
	{
		height: 160px;
	}
	
	#devices.grid-view .overlay
	{
		top: 160px;
		margin-top: -160px;
	}

	.connection
	{
		font-size: 17px;
	}

	.accessory-img
	{
		height: 55%;
	}

	#devices.grid-view .accessory-img
	{
		position: absolute;
		left: 18px;
		top: 18px;
		height: 25%;
	}

	#devices.grid-view .connection
	{
		width: calc(100% - 40px);
    	margin-left: auto;
		margin-top: 24px;
		margin-bottom: auto;
		text-align: right;
		font-size: 14px;
	}

	#devices.grid-view .device-name
	{
		margin-bottom: 10px;
		margin-top: auto;
		-webkit-line-clamp: 3;
	}

	#devices.grid-view .name-connection
	{
		width: 100%;
	}

	.image-button
	{
		width: 60px!important;
		padding: 15px;
	}

	.panel
	{
		border-radius: 0px;
		/*border-radius: 60px;*/
		width: calc(100% + 30px)!important;
		margin: 0 auto;
		margin-left: -15px!important;
		padding: 15px;
		border: none;
		border-radius: 45px;
		box-sizing: border-box;
	}

	.title-container
	{
		min-height: 60px;
		border-radius: 30px;
		margin-bottom: 15px;
	}

	#groups
	{
		border-radius: 30px;
	}

	#groups button
	{
		min-width: 200px;
	}

	#groups button:last-child
	{
		border-radius: 0 30px 30px 0;
	}

	#groups button:first-child
	{
		border-radius: 30px 0 0 30px;
	}

	.select-selected, select
	{
		padding: 16px 20px;
	}

	.select-selected:after
	{
		top: 28px;
	}

	.select-selected.select-active:after
	{
		top: 22px;
	}
	
	.custom-select > .select-items
	{
		z-index: 10000;
		top: 80px;
	}

	.custom-select.on-top > .select-items
	{
		top: auto;
		bottom: 80px;
	}

	#trigger .custom-select > .select-items
	{
		top: 75px;
	}

	#trigger .custom-select.on-top > .select-items
	{
		bottom: 75px;
	}

	.custom-select > .select-items .select-item
	{
		padding: 18px 23px;
	}

	.table
	{
		gap: 15px;
		font-size: 18px;
		font-weight: 300;
		line-height: 24px;
	}

	.table .column
	{
		border-radius: 30px;
	}

	.table .primary
	{
		padding: 18px 18px 18px 21px;
	}

	.table .secondary
	{
		gap: 18px;
		padding: 18px;
	}

	.vertical-view .table
	{
		flex-direction: column;
	}

	.vertical-view .table .primary
	{
		height: 60px;
	}

	.vertical-view .table .secondary
	{
		box-sizing: border-box;
	}

	.plugin-container
	{
		min-height: 60px;
		padding: 12px 20px;
	}

	.plugin-container b
	{
		font-weight: 300;
	}

	.plugin-container > div:first-of-type
	{
		top: -1px;
		position: relative;
	}

	.update-status
	{
		border-radius: 36px;
		right: -8px;
		height: 36px;
		font-size: 16px;
		padding: 1.5px;
	}

	#groups
	{
		height: 60px;
	}

	.icon-button.round .button-icon
	{
		border-radius: 30px;
		padding: 12px;
	}

	.icon-button.left
	{
		padding-right: 21px;
	}

	.icon-button.right
	{
		padding-left: 21px;
	}

	.icon-button.split .button-icon
	{
		padding: 16px 26px;
	}

	.icon-button.split.left .button-icon
	{
		padding-right: 24px;
		border-radius: 30px 0 0 30px;
	}

	.icon-button.split.right .button-icon
	{
		padding-left: 22px;
		border-radius: 0 30px 30px 0;
	}

	.icon-button.split.arrow .button-icon:after
	{
		top: 24px;
	}

	.icon-button.split.arrow.left .button-icon:after
	{
		left: 69px;
	}

	.icon-button.split.arrow.right .button-icon:after
	{
		right: 69px;
	}

	.icon-button.split.separated
	{
		padding: 10px;
	}

	.icon-button.split.separated .button-icon
	{
		padding: 7px 20px;
	}

	.icon-button.split.layer .button-icon
	{
		padding: 17px 26px;
	}

	.icon-button.compact .button-icon
	{
		padding: 15px;
	}

	.icon-button.compact.left .button-icon
	{
		margin-right: 15px;
	}

	.icon-button.compact.right .button-icon
	{
		margin-left: 15px;
	}

	.panel.expand
	{
		border-radius: 0;
		padding: 20px;
		width: calc(100% + 50px)!important;
		margin-left: -25px!important;
	}

	.log-title
	{
		border-radius: 15px 15px 0 0;
		font-size: 16px;
		padding: 15px;
	}

	.log-message
	{
		border-radius: 0 0 15px 15px;
		padding: 10px 15px;
	}

	.widget-left, .widget-right
	{
		padding: 12px 20px;
	}

	#networks
	{
		margin-top: 70px;
	}

	#dialogue .content
	{
		border-radius: 56px;
		max-width: calc(100% - 50px);
		padding: 25px;
	}

	.gradient-overlay::before, .gradient-overlay::after
	{
		border-radius: 30px;
	}
	
	#top-menu
	{
		width: 100%;
		height: 64px;
		padding: 0;
		flex-direction: row;
		justify-content: center;
	}

	#top-menu button
	{
		height: 100%;
		padding: 8px;
		width: 64px!important;
	}

	#top-menu > div
	{
		padding: 16px 8px;
		margin-bottom: 0;
	}

	#top-menu button:last-of-type
	{
		margin-right: 0;
	}

	#connection-status
	{
		border-radius: 30px;
		font-weight: 400;
	}

	#status
	{
		height: 80px;
		border-radius: 30px;
	}

	#status img
	{
		height: calc(100% - 30px);
	}

	#trigger .blocks, #result .blocks
	{
		gap: 30px;
	}

	#trigger .groups, #trigger .group, #result
	{
		gap: 15px;
	}

	#trigger .group
	{
		padding: 15px;
		border-radius: 45px;
	}

	#trigger .block, #result .block
	{
		grid-template-columns: calc(100% - max(20%, 140px) - 15px) max(20%, 140px);
	}

	#trigger .control, #result .control
	{
		border-radius: 30px;
	}

	#trigger .control .image-button, #result .control .image-button
	{
		width: 100%!important;
		padding: 15px 21px;
	}

	#trigger .control .image-button:first-child img, #result .control .image-button:first-child img
	{
		float: left;
	}

	#trigger .control .image-button:last-child img, #result .control .image-button:last-child img
	{
		float: right;
	}

	.automation-color-container, #trigger .block, #result .block, #trigger .bottom
	{
		gap: 15px
	}

	.panel .panel-content
	{
		gap: 15px
	}

	.panel .panel-content.padding
	{
		padding: 15px;
	}

	#main-menu
	{
		width: 100%;
	}

	#dialogue form, .label-input
	{
		gap: 25px;
	}

	input[type="checkbox"]
	{
		width: 60px!important;
		height: 60px!important;
	}

	input[type="checkbox"]::before
	{
		background-size: calc(100% - 30px);
	}
}