extension.css

:root {
	--extension-dashboard-background-color: #3089bf;
	--extension-dashboard-widget-background-color: #cfdde6; /*#bdc8d2;*/
	--extension-dashboard-widget-text-color:#555555;
	--extension-dashboard-widget-editable-text-color: #3089bf; /*#fa7204; orange*/
}


/*
#extension-dashboard-view .clicked{
	border-left:10px solid white;
	background-color:rgba(255,255,255,.1);
}


#extension-dashboard-overview{
	margin-top:6rem;
}
*/

#extension-dashboard-view input:not([type]), 
#extension-dashboard-view input[type=''], 
#extension-dashboard-view input[type='number'], 
#extension-dashboard-view input[type='text']{
	height:auto;
	margin:0;
}



#extension-dashboard-main-page{
	width:100vw;
    max-width:100%;
	height:calc(100vh - 9.6rem);
	position:fixed;
	top:9.6rem;
	left:0;
	display:flex;
	flex-wrap:wrap;
	align-content: space-between;
	justify-content: center;
	align-items: flex-end;
	background-color: var(--extension-dashboard-background-color);
	box-shadow: -0rem 0rem 9.6rem 9.6rem var(--extension-dashboard-background-color);
}

body.candle-theme #extension-dashboard-main-page{
	top:0;
	height:100vh;
}




/*  Candle theme zoom support/fix  */

/*
.zoom1 .extension-dashboard-picture{
    zoom:.84;
}
.zoom2 .extension-dashboard-picture{
    zoom:.72;
}
.zoom3 .extension-dashboard-picture{
    zoom:.63;
}


.zoom1 #extension-dashboard-date-container{
    font-size:2.5rem;
}
.zoom2 #extension-dashboard-date-container{
    font-size:2.5rem;
}
.zoom3 #extension-dashboard-date-container{
    font-size:3rem;
}
*/




.extension-dashboard-button-bar{
	margin:2rem 0 1rem 0;
	padding:1rem 0;
	border-top:1px solid rgba(0,0,0,.2);
	flex-wrap:wrap;
}


#extension-dashboard-view input::placeholder { 
	color: rgba(0,0,0,.3);
}

#extension-dashboard-view input:focus::placeholder {
	color: transparent;
}

#extension-dashboard-view input[type=number]::-webkit-inner-spin-button,
#extension-dashboard-view input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
 
#extension-dashboard-view input[type=number] {
    -moz-appearance: textfield;
    -ms-appearance: textfield;
    appearance: textfield;
}


#extension-dashboard-view button{
	letter-spacing:0.7px;
}

#extension-dashboard-icon{
    display: inline-block;
    width: 5rem;
    height: 2rem;
    background-image: url('../images/menu-icon.svg');
    background-size: contain;
    background-size: 4rem;
    background-repeat: no-repeat;
    background-position: 0;
}

#extension-dashboard-icon:hover{
	background-image: url('../images/menu-icon-open.svg');
}



#extension-dashboard-view .extension-dashboard-invisible{
	visibility: hidden;
}

#extension-dashboard-content-container h3{
	margin-top:3rem;
	margin-bottom:4rem;
	font-weight:100;
}

.zoom {
    cursor: move;
    fill: none;
    pointer-events: all;
}

.extension-dashboard-hidden{
	display:none!important;
}

.extension-dashboard-allow-overflow{
	overflow:visible!important;
}

#extension-dashboard-content a{
	text-decoration:none;
	color:inherit;
}
#extension-dashboard-content ul{
	list-style: none;
}

#extension-dashboard-content ul:empty{
	display:none;
}

#extension-dashboard-content.extension-dashboard-editing #extension-dashboard-tabs .extension-dashboard-template input{
	pointer-events:none!important;
}


#main-menu #extension-dashboard-menu-item {
    background-image: url('../images/menu-icon.svg');
}


#extension-dashboard-view{
	height: calc(100% - 7.6rem);
    box-sizing: border-box;
    /*overflow: auto;*/
	overflow: auto;
	position: absolute;
	top: 7.6rem;
	left: 0;
	padding: 2rem;
}


#extension-dashboard-content {
	display:flex;
	flex-direction: column;
	flex-direction: column;
	overflow: auto;
	position: relative;
	text-align: left;
	font-size: 1.6rem;
	color: var(--extension-dashboard-widget-text-color);
	height:auto;
	letter-spacing: .5px;
}



body:not(.developer) .extension-dashboard-show-if-developer,
#extension-dashboard-content:not(.extension-dashboard-editing) .extension-dashboard-show-if-editing{
	display:none!important;
}


#extension-dashboard-content-container{
	height:100%;
	max-height: 100%;
}

#extension-dashboard-response{
	padding: 2rem;
	background-color: rgba(255,0,0,.9);
	border-radius: .5rem;
	opacity:0;
	margin-bottom: 10rem;
}






#extension-dashboard-main-container{
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
}
#extension-dashboard-tab-menu{
	display:flex;
	justify-content: center;
	padding:0 9.6rem;
	align-items:center;
	flex-grow:0;
	flex-shrink:0;
}

@media screen and (max-width: 640px) {
	#extension-dashboard-content.extension-dashboard-editing #extension-dashboard-tab-menu{
		/*margin-top:9.6rem;*/
		padding:0 1rem;
	}
	
	#extension-dashboard-content.extension-dashboard-editing .extension-dashboard-editing-round-buttons-container > div{
		width:4.6rem;
		height:4.6rem;
		margin:2.5rem .5rem;
	}
	
	.extension-dashboard-widget-log-change-buttons-container{
		padding:1rem .5rem;
	}
	
	
}

@media screen and (max-width: 1025px) {

	#extension-dashboard-content:not(.extension-dashboard-editing) #extension-dashboard-tab-menu.extension-dashboard-wide-menu{
		margin-top:9.6rem;
	}
	#extension-dashboard-tab-menu.extension-dashboard-wide-menu{
		padding-left:1.5rem;
		padding-right:1.5rem;
	}
	
}

.extension-dashboard-editing #extension-dashboard-tab-menu{
	justify-content:center;
	min-height:9.6rem;
	background-color: rgba(0, 0, 0, .1);
	flex-wrap:wrap;
}

/*
@media screen and (max-width: 640px) {
	.extension-dashboard-editing #extension-dashboard-tab-menu{
		
	}
	.extension-dashboard-editing #extension-dashboard-tab-menu > .extension-dashboard-flex > div{
		height: 4.6rem;
		background-size: 60%;
		margin: 2.5rem 0.5rem;
	}
}
*/

.extension-dashboard-editing #extension-dashboard-tab-menu:not(.extension-dashboard-wide-menu) > div{
	margin:0 2rem;
}


.extension-dashboard-editing #extension-dashboard-tab-menu.extension-dashboard-wide-menu{
	flex-direction:column;
}



/*
#extension-dashboard-tab-menu > div:not(#extension-dashboard-tab-buttons-container):not(#extension-dashboard-add-widget-button){
	background-color:rgba(255,255,255,.4);
}
*/


/*  #extension-dashboard-tab-menu > div:not(#extension-dashboard-trash):not(#extension-dashboard-tab-buttons-container)  */
#extension-dashboard-tab-buttons-container > div > div{
	padding:.6rem 1.5rem;
	font-size: 3rem;
	line-height: 3rem;
	/*
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
	*/
}

/*
#extension-dashboard-tab-menu > div:not(#extension-dashboard-tab-buttons-container):not(#extension-dashboard-add-widget-button):hover
*/
#extension-dashboard-tab-buttons-container > div:hover > div{
	background-color:#7dafd2;
	color:white;
}


.extension-dashboard-tab-button{
	margin: 1rem;
	background-color:rgba(0,0,0,.05);
	white-space:nowrap;
	border-radius:2rem;
	cursor:pointer;
	color:#ddd;
	/*
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
	*/
	background-color: rgba(0,0,0, .15);
}

/*
.extension-dashboard-editing #extension-dashboard-tab-buttons-container .extension-dashboard-tab-button{
	border: 1px solid rgba(255, 255, 255, .1);
	box-sizing: border-box;
}
*/

.extension-dashboard-tab-button-selected > div{
	color:#eee;
	/*border-bottom:1px solid white;*/
	background-color:rgba(0,0,0,.4);
	/*
	box-shadow:  -9px -9px 18px #0b324e,
	             9px 9px 18px #0f446a;
	*/
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
}




/*
@media (orientation: portrait) {
	#extension-dashboard-main-container{
		flex-direction:column-reverse;
	}
	#extension-dashboard-tab-menu{
		flex-direction:row;
	}
}
*/

#extension-dashboard-tabs{
	width:100%;
    height: 50%;
	max-height:100%;
	overflow:auto;
	padding: .5rem;
	box-sizing:border-box;
	flex-shrink:1;
	flex-grow:1;
}

.extension-dashboard-editing #extension-dashboard-tabs{
	flex-grow: 3;
}

#extension-dashboard-tab-buttons-container{
	background-color:transparent;
	min-height:7.6rem;
	align-items:center;
	padding:1rem 0;
	overflow-x:auto;
}

/*
.extension-dashboard-editing #extension-dashboard-tab-buttons-container{
	border-right: 1px solid rgba(0, 0, 0, .1);
	padding-right:1rem;
}*/

#extension-dashboard-tab-buttons-container div.extension-dashboard-tab-button-with-name{
	font-size:1.6rem;
	display:inline-block;
}

#extension-dashboard-tab-menu .extension-dashboard-tab-name-input{
	font-size:1.6rem;
	padding:1.5rem;
	margin:.5rem;
	max-width:10rem;
}

.extension-dashboard-tab:not(.extension-dashboard-tab-selected){
	display:none;
}


.extension-dashboard-template-container{
	border-radius:2.5rem;
	margin:1rem;
	min-width:150px;
	min-height:150px;
	max-height:300px;
	cursor:pointer;
	transition: transform .2s ease-out;
}


.extension-dashboard-template-container:hover{
	transform: translate(0, -10px);
	transition: transform .2s ease-in;
}

#extension-dashboard-templates{
	padding-top:1rem;
    display: flex;
	overflow:auto;
	overflow-x: scroll;
}


#extension-dashboard-templates .extension-dashboard-template *{
	pointer-events:none;
}


.extension-dashboard-template{
	position:relative;
	height:100%;
	min-height:100%;
	overflow:hidden;
	background-color: var(--extension-dashboard-widget-background-color);
}

#extension-dashboard-templates .extension-dashboard-template{
	/*background-color: var(--extension-dashboard-widget-background-color);*/
	border-radius:2rem;
}
#extension-dashboard-templates .extension-dashboard-template-container.extension-dashboard-widget-round{
	border-radius:50%!important;
	overflow:hidden!important;
}

/*
#extension-dashboard-templates .extension-dashboard-widget-thermostat .extension-dashboard-widget-thermostat-setpoint-display strong{
	flex-direction:column;
	margin-top:5rem;
}
*/




.extension-dashboard-configure-widget-button{
	position: absolute;
	bottom: 0;
	z-index:12;
	background-color: #7dafd2;
    background-image: url(/images/settings-icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 40px;
    height: 40px;
    border: 10px solid #7dafd2;
    border-top-right-radius: 10px;
	cursor:pointer;
}


.extention-dashboard-widget-ui:not(:empty){
	background-color:rgba(0,0,0,.1);
	padding:1rem;
	border-radius:.5rem;
}

.extention-dashboard-widget-ui h4{
	margin-bottom:0;
}

.extention-dashboard-widget-ui:not(:empty):before{
	content:"Template settings";
	font-style:italic;
	border-bottom:1px solid rgba(0,0,0,.1);
	display:block;
	margin: 1rem 0;
	opacity:.5;
}

#extension-dashboard-logging-add-log-modal button,
#extension-dashboard-widget-modal button,
#extension-dashboard-settings-modal button{
	padding: 1rem 1.5rem;
	border-radius:0.5rem;
	margin:.5rem 1rem;
	border:none;
	background-color: #7caed1;
	color: white;
	cursor:pointer;
}


.extension-dashboard-modal-thing-select,
.extension-dashboard-modal-thing-selector-property-container > select,
.extension-dashboard-modal-log-selector{
	font-size: 1.6rem;
	padding: 1rem;
	max-width: 100%;
	border-radius:.5rem;
}

#extension-dashboard-logging-add-log-modal #extension-dashboard-logging-add-log-modal-save-button,
#extension-dashboard-settings-modal #extension-dashboard-settings-modal-done-button,
#extension-dashboard-widget-modal #extension-dashboard-widget-modal-save-button{
	background-color: #378c19;
	letter-spacing:0.7px;
}

#extension-dashboard-logging-add-log-modal-cancel-button,
#extension-dashboard-settings-modal-reset-button,
#extension-dashboard-widget-modal-cancel-button{
	letter-spacing:0.7px;
}


.extension-dashboard-widget-modal-highlighted-template{
	border:5px solid #378c19;
	box-sizing: content-box;
}




/*   TRASH   */

.extension-dashboard-trash{
	width:5.6rem;
	height:5.6rem;
	background-image:url('../images/trash.svg');
	background-size:70%;
	background-position:center;
	background-repeat:no-repeat;
	transition: background .5s ease-in;
	transition: all .3s ease-in;
	border-radius:50%;
	background-color: #7dafd2;
	margin: 2rem 1rem;
	cursor:pointer;
}
.extension-dashboard-trash:hover{
	background-position:center 70%;
	background-color:#9c0101;
}





/*  ADD WIDGET BUTTON  */

#extension-dashboard-add-widget-button{
	width:56px;
	height:56px;
	background:none;
	background-image:url('/images/add.svg');
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	border-radius:50%;
	margin:2rem 1rem;
	cursor:pointer;
}

#extension-dashboard-trash:hover,
#extension-dashboard-add-widget-button:hover,
#extension-dashboard-add-dashboard-button:hover,
#extension-dashboard-open-settings-button:hover{
	box-shadow: inset -9px -9px 18px #779dc0,
	            inset 9px 9px 18px #a1d5ff;
}



















/*  WIDGET AND SETTINGS MODAL  */

#extension-dashboard-logging-add-log-modal,
#extension-dashboard-widget-modal{
	z-index:4;
	border-radius:1rem;
	max-height:90vh;
	border:none;
	background-color: #0d3b5c;
	max-width:90vw;
}
#extension-dashboard-widget-modal{
	height:90%;
}

#extension-dashboard-widget-modal::backdrop{
	background-color:rgba(0,0,0,.9);
}

#extension-dashboard-widget-modal > div
#extension-dashboard-settings-modal > div{
	flex-direction:column;
	justify-content: space-between;
	box-sizing:border-box;
	height:100%;
}

#extension-dashboard-widget-modal-content{
	overflow:auto;
	flex-grow:1;
	box-sizing: border-box;
}

#extension-dashboard-logging-add-log-modal-title,
#extension-dashboard-widget-modal-ui-container,
#extension-dashboard-widget-modal-title{
	color:#eee;
}
#extension-dashboard-widget-modal-title{
	font-weight:100;
	letter-spacing: 1px;
}

#extension-dashboard-widget-modal-ui-container{
	margin:1.5rem 0;
	padding: 2rem;
	padding-bottom:6rem;
	background-color: rgba(255, 255, 255, .1);
	border-radius: 1rem;
}

body.kiosk #extension-dashboard-widget-modal-ui-container:not(:empty){
	margin-bottom:40vh;
}

#extention-dashboard-widget-ui-rename-container input{
	display:block;
	margin:1rem 0;
	width:50rem;
	max-width: 70vw;
}

/*
#extension-dashboard-widget-modal-cancel-button,
#extension-dashboard-widget-modal-save-button{
	cursor:pointer;
}
*/



#extension-dashboard-widget-modal-ui-container:empty{
	display:none;
}

.extension-dashboard-widget-ui{
	margin-top:1.5rem;
}

.extension-dashboard-widget-ui h4{
	margin-bottom:.5rem;
	text-transform: capitalize;
	font-weight:100;
	color: rgba(255, 255, 255, .8);
}

.extension-dashboard-widget-ui-rename-container input{
	display:block;
	padding: 1rem;
	margin-bottom:1.5rem;
	background-color:white;
	width: calc(100% - 2rem);
}

#extension-dashboard-logging-add-log-modal select{
	width:100%;
}





/*  SUGGESTED WIDGET NAMES LIST  */


.extension-dashboard-widget-suggested-names-container li.extension-dashboard-list-selector-item{
	border-top-left-radius:0;
}

.extension-dashboard-widget-suggested-names-container:not(:empty){
	margin-bottom:3rem;
}


/*   ICON PICKER   */

.extension-dashboard-widget-ui-icon-picker-container{
	border:1px solid white;
	padding:1rem;
	border-radius:1rem;
	margin:.5rem 0 3rem 0;
	background-color: var(--extension-dashboard-widget-background-color);
}
.extension-dashboard-widget-ui-icon-has-been-selected .extension-dashboard-widget-ui-icon-picker-container{
	display:none;
}

.extension-dashboard-widget-ui-icon-output{
	margin-top:.5rem;
	display:flex;
	flex-direction:column;
}

.extension-dashboard-widget-ui-icon-output-image{
	width:100px;
	cursor:pointer;
}

#extension-dashboard-content .extension-dashboard-widget-ui-icon-output-image + button{
	margin-right: auto;
	margin-left:0;
}


.extension-dashboard-widget-ui-icon-output-image:not([src]){
	width: 100px;
    height: 100px;
    border: 5px dashed white;
    border-radius: 1rem;
	padding:1rem;
}
.extension-dashboard-widget-ui-icon-output-image:not([src]) + button{
	display:none;
}

.extension-dashboard-widget-ui-icon-output-image:not([src]) + button + .extension-dashboard-widget-ui-icon-picker-container .extension-dashboard-widget-ui-icon-picker-close-button{
	display:none;
}
/*
.extension-dashboard-widget-ui-icon-picker-header:not(.extension-dashboard-widget-ui-icon-picker-show-close-button) .extension-dashboard-widget-ui-icon-picker-close-button{
	display:none;
}
*/

.extension-dashboard-widget-ui-icon-picker-tags-button{
	margin-left:1rem;
}

.extension-dashboard-widget-ui-icon-picker-close-button{
	margin-left:auto;
}




.extension-dashboard-widget-ui-icon-picker-search{
	padding:1rem;
	font-size: 1.6rem;
	min-width:250px;
	border-radius:.5rem;
	border:none;
	background-color:white;
}

.extension-dashboard-widget-ui-icon-picker-folder-button{
	display:inline-block;
	padding:.5rem;
	margin:0 .5rem .5rem 0;
	font-size:90%;
	border-radius:10px;
	background-color:rgba(0,0,0,.4);
	cursor:pointer;
}

.extension-dashboard-widget-ui-icon-picker-folder-button:hover{
	background-color:rgba(0,0,0,.6);
}

.extension-dashboard-widget-ui-icon-picker-folders-container{
	margin-top:1.5rem;
}



.extension-dashboard-widget-ui-icon-picker-images-container{
	border:1px solid white;
	margin:1rem 0;
}

.extension-dashboard-widget-ui-icon-picker-images-container > img{
	margin:.5rem;
	cursor:pointer;
	transition-delay: 1s;
	transition: transform .2s ease-in;
}
.extension-dashboard-widget-ui-icon-picker-images-container > img:hover {
	transform: scale(2.5);
}


.extension-dashboard-widget-ui-icon-current-image{
	box-shadow: inset 0 0 2px green;
}


#extension-dashboard-content .extension-dashboard-widget-thing-small-icon-container{
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	pointer-events:none;
	opacity:.4;
	transition: all 1s ease-in;
    box-sizing: border-box;
	width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#extension-dashboard-content .extension-dashboard-widget-thing-icon-container{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center 70%;
	pointer-events:none;
	opacity:.4;
	transition: all 1s ease-in;
    box-sizing: border-box;
    border: 3rem solid transparent;
	border-top: 5rem solid transparent;
}


#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"][gs-h="2"] .extension-dashboard-widget-thing-icon-container,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"][gs-h="2"] .extension-dashboard-widget-thing-icon-container,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"][gs-h="3"] .extension-dashboard-widget-thing-icon-container,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"][gs-h="3"] .extension-dashboard-widget-thing-icon-container{
    /*border: 4rem solid transparent;*/
	border: 8rem solid transparent;
}

#extension-dashboard-content .extension-dashboard-widget-property-switch input:checked + label .extension-dashboard-widget-thing-icon-container{
	filter: invert(1);
	opacity:1;
}

.extension-dashboard-widget-ui-icon-picker-info{
	color:var(--widget-text-color);
}





/*   SQUARE BOX   */


.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]) .extension-dashboard-style-square-outer{
	width:calc(50% - 3rem);
	padding-bottom:calc(50% - 3rem);
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-style-square-outer,
.extension-dashboard-style-square-outer{
	width:100%;
	padding-bottom:100%;
	position: relative;
}
.extension-dashboard-style-square-inner{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}





/*
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h])  .extension-dashboard-style-square-outer{
	
}
*/


/*  BASIC STYLES  */

.extension-dashboard-widget-style-round{
	border-radius:50%!important;
}
.extension-dashboard-widget-style-overflow-hidden{
	overflow:hidden;
}

.extension-dashboard-style-cursor-pointer{
	cursor:pointer;
}


.extension-dashboard-style-padding,
.extension-dashboard-style-thick-padding{
	padding:1.5rem;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-style-padding,
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-style-thick-padding{
	padding:1rem;
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-style-thick-padding{
	padding:3rem;
}

.extension-dashboard-style-rounded{
	border-radius:1rem;
}

.extension-dashboard-style-switch{
	background-color:#7dafd2;
	cursor:pointer;
}
.extension-dashboard-style-button{
	padding:1rem 1.5rem;
	border-radius:1rem;
	background-color:#7dafd2;
	color:white;
	cursor:pointer;
}
.extension-dashboard-style-button:hover{
	background-color:rgba(0,0,0,.3)!important;
}
span.extension-dashboard-style-button{
	display:inline-block;
}
.extension-dashboard-style-hover-bg-button{
	cursor:pointer;
}
.extension-dashboard-style-button:hover,
.extension-dashboard-style-hover-bg-button:hover{
	background-color:#7dafd2!important;
}

.extension-dashboard-style-hover-bg-darker:hover{
	background-color:rgba(0,0,0,.3)!important;
}

.extension-dashboard-style-invisible-overlay{
	position:absolute;
	width:100%;
	height:100%;
	z-index:5;
}



/*   CHECKBOX CONTENT TOGGLE   */

input[type="checkbox"]:not(:checked) + label .extension-dashboard-widget-checkbox-toggle-checked-content-color-white{
	color:#eee;
}
/*
input[type="checkbox"]:not(:checked) + label::before {
    content: "";
}
*/

input[type="checkbox"]:not(:checked) + label .extension-dashboard-widget-checkbox-toggle-checked-content,
input[type="checkbox"]:checked + label .extension-dashboard-widget-checkbox-toggle-unchecked-content,
input[type="checkbox"]:checked ~ .extension-dashboard-widget-checkbox-toggle-unchecked-content,
input[type="checkbox"]:not(:checked) ~ .extension-dashboard-widget-checkbox-toggle-checked-content{
	display:none!important;
}





/*  CLOCK AND DATE  */

.extension-dashboard-widget-clock{
    display:flex;
    flex-direction:column;
	/*
	animation-name: extension-dashboard-clock-burnin-prevention;
	animation-duration: 3600s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	*/
}
/*
@keyframes extension-dashboard-clock-burnin-prevention {
  0%    {top: 0;right: 0}
  25%   {top: 0; right: .5rem;}
  50%   {top: .5rem; right:.5rem;}
  75%   {top: .5rem; right: 0;}
  100%  {top: 0; right: 0;}
}
*/

.extension-dashboard-widget-clock-time{
	padding:1rem 2rem;
	font-size:4rem;
	font-weight: bold;
	cursor:default;
    text-align:center;
	color:white;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"][gs-h="2"] .extension-dashboard-widget-clock-time{
	font-size:8rem;
}

.extension-dashboard-widget-clock-date-day{
    text-align:center;
    padding: .5rem 2rem 0 2rem;
    font-size:2rem;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"] .extension-dashboard-widget-clock-date-day{
	font-size:1.6rem;

}

.extension-dashboard-widget-clock-date-container{
    display:flex;
    justify-content:center;
    padding: .5rem 2rem;
    font-size: 2.1rem;
    
}

#extension-dashboard-add-dashboard-button{
	width:56px;
	height:56px;
	background-image: url('../images/add_dashboard.svg');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: .5rem;
    border-radius: 50%;
    background-color: #7dafd2;
	flex-shrink:0;
	margin: 2rem 1rem;
	cursor:pointer;
}


/*  EDIT DASHBOARD BUTTON  */

#extension-dashboard-edit-button-container{
    position: fixed;
    top: 0rem;
    right: 0rem;
    width:7.6rem;
    height:7.6rem;
    display: flex;
    align-items: end;
}

body.screensaver #extension-dashboard-content:not(.extension-dashboard-editing) #extension-dashboard-edit-button-container{
	display:none;
}

body#path-extensions-dashboard.screensaver #menu-button{
	opacity:.2!important;
}

#extension-dashboard-edit-button{
    width:5.6rem;
    height:5.6rem;
    background: no-repeat center/100% url(../images/edit.svg);
    cursor:pointer;
	background-color: #7caed1;
}
.extension-dashboard-editing #extension-dashboard-edit-button{
	background: no-repeat center/100% url(/images/done.svg);
}





/*  START SCREENSAVER BUTTON  */

/*
#extension-dashboard-start-screensaver-button-container{
	display:none;
    position: fixed;
    bottom: 17.4rem;
    right: 0rem;
    width:7.6rem;
    height:7.6rem;
}

#extension-dashboard-start-screensaver-button{
    width:5.6rem;
    height:5.6rem;
    background: rgba(255,255,255,.15) no-repeat center/100% url(../images/moon.svg);
	margin-top:2rem;
	cursor:pointer;
}
#extension-dashboard-start-screensaver-button:hover{
	background-color:rgba(255,255,255,.5);
}

#extension-dashboard-start-screensaver-countdown-indicator{
	margin-top:2rem;
	width:5.6rem;
	max-width:5.6rem;
	height:5.6rem;
	border-radius:2.8rem;
	overflow:hidden;
	pointer-events:none;
	position:absolute;
}



.screensaver #extension-dashboard-next-dashboard-button,
.screensaver #extension-dashboard-more-button,
.screensaver #extension-dashboard-start-screensaver-button-container,
.screensaver #extension-dashboard-more-button-container{
    display:none;
}


#extension-dashboard-main-page:not(.extension-dashboard-has-animations) .extension-dashboard-current-picture{
    opacity:1;
}
*/



/*  CUPS PRINTING BUTTON */


/*
#extension-dashboard-print-button-container{
	display:none;
    position: fixed;
	right:2rem;
	bottom:23rem;
    height:7.6rem;
	width:auto;
}

#extension-dashboard-print-button-container:hover #extension-dashboard-print-button{
	background-color:rgba(255,255,255,.4);
}

body.cups-printing:not(.screensaver) #extension-dashboard-print-button-container{
	display:block;
}

#extension-dashboard-print-button-confirm-container{
	display:none;
}
.extension-dashboard-print-button-show-confirmation #extension-dashboard-print-button-confirm-container{
	display:flex;
}
.extension-dashboard-print-button-show-confirmation #extension-dashboard-print-button{
	display:none;
}

#extension-dashboard-print-confirm-button,
#extension-dashboard-print-cancel-button{
	display:inline-block;
	cursor:pointer;
}

#extension-dashboard-print-confirm-button{
	background-color:blue;
	background: rgba(64,64,192,.9) no-repeat center/50% url(../images/printer.svg);
	margin-right:2rem;
}
#extension-dashboard-print-cancel-button{
	background-color:#888;
	background: rgba(128,128,128,.9) no-repeat center/50% url(/images/remove.svg);
}
*/


.extension-dashboard-icon-button{
    width:5.6rem;
    height:5.6rem;
	border-radius:2.8rem;
	user-select: none;
	outline: 0;
	z-index: 100;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
	border:none;
}









/*   VOCO TIMERS LIST   */
/*
#extension-dashboard-voco-container{
	position:fixed;
	top:9.6rem;
	bottom:9.6rem;
	left:0;
	right:0;
	display:none;
	flex-direction:column;
	overflow:auto;
	align-items:center;
	justify-content:center;
	pointer-events:none;
	z-index:10;
}

.screensaver #extension-dashboard-voco-container{
	display:flex;
}

#extension-dashboard-voco-container:empty{
	display:none;
}
*/

.extension-dashboard-widget-voco{
	overflow:hidden;
}

/*#extension-dashboard-content .grid-stack > .grid-stack-item > .grid-stack-item-content > div:not(.extension-dashboard-configure-widget-button)*/

.extension-dashboard-widget-voco:empty:after{
	content:' ';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:.1;
	pointer-events:none;
	background-image: url('/extensions/dashboard/icons/material_light_icons/voice-selection-rounded.svg');
	background-size:contain;
	background-repeat:no-repeat;
}

.extension-dashboard-widget-voco > div{
	width:100%;
	margin-bottom:.1rem;
	overflow:hidden;
	display:flex;
	align-items:center;
	padding: 1rem 1rem 1rem 1.5rem;
	box-sizing: border-box;
	flex-wrap:wrap;
	flex-shrink:0;
}


.extension-dashboard-voco-item img{
	width:3rem;
	max-width:3rem;
	box-sizing:border-box;
	margin:0;
	margin-right:.5rem;
}

.extension-dashboard-voco-item-info,
.extension-dashboard-voco-item-time{
	display:flex;
}
.extension-dashboard-voco-item-time{
	align-items:center;
	margin:0 .5rem 0 0;
	padding:.5rem;
}

.extension-dashboard-voco-item-hours,
.extension-dashboard-voco-item-minutes{
	font-weight:bold;
}

.extension-dashboard-voco-item-minutes,
.extension-dashboard-voco-item-seconds{
	display:inline-block;
}
.extension-dashboard-voco-item-minutes:empty,
.extension-dashboard-voco-item-seconds:empty{
	display:none;
}
.extension-dashboard-voco-item-hours:not(:empty):after{
	content:'h';
	font-weight:100;
	margin-right:.3rem;
	opacity:.5;
}
.extension-dashboard-voco-item-minutes:not(:empty):after{
	content:'m';
	font-weight:100;
	opacity:.5;
	margin-right:.3rem;
}
.extension-dashboard-voco-item-seconds:not(:empty):after{
	content:'s';
	font-weight:100;
	opacity:.5;
}

.extension-dashboard-voco-item-hours:not(:empty) + .extension-dashboard-voco-item-minutes:not(:empty) + .extension-dashboard-voco-item-seconds{
	opacity:.8;
}

.extension-dashboard-voco-item h4{
	font-size:1.6rem;
	font-weight:100;
	margin:0;
	font-style:italic;
}

.extension-dashboard-widget-voco .extension-dashboard-voco-item-countdown{
	border-left:.5rem solid red;
}

.extension-dashboard-widget-voco .extension-dashboard-voco-item-reminder{
	border-left:.5rem solid blue;
}

.extension-dashboard-widget-voco .extension-dashboard-voco-item-alarm{
	border-left:.5rem solid orange;
}

.extension-dashboard-widget-voco .extension-dashboard-voco-item-wake{
	border-left:.5rem solid green;
}




/*  SELECTED DASHBOARD INDICATOR  */

/*
#extension-dashboard-selected-dashboard-indicator-container{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:2rem;
	position:fixed;
	left:10rem;
	right:10rem;
	top:10rem;
	bottom:10rem;
	width:calc(100vw - 20rem);
	height:calc(100vh - 20rem);
	pointer-events:none;
	z-index:1000;
}
body.screensaver #extension-dashboard-selected-dashboard-indicator-container{
	display:none;
}
#extension-dashboard-selected-dashboard-indicator-container:empty{
	display:none;
}

#extension-dashboard-selected-dashboard-indicator-container > div{
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:1rem;
	padding:1rem 2rem;
	background-color:rgba(255,255,255,.1);
	border-radius:1rem;
}
#extension-dashboard-selected-dashboard-indicator-container > div > div{
	flex-grow:1;
	flex-shrink:1;
	max-width:2rem;
	height:2rem;
	width:.5rem;
	background-color:rgba(255,255,255,.7);
	box-shadow: .1rem .1rem .1rem .1rem rgba(0,0,0,.3);
	border-radius:.5rem;
	margin:.1rem;
}
#extension-dashboard-selected-dashboard-indicator-container > div > div.extension-dashboard-selected-dashboard-indicator-current{
	background-color:blue;
	height:4rem;
	width:1rem;
	margin:.5rem;
}
*/



/*  Back button  */


/*
#extension-dashboard-back-button{
    top: 2rem;
    left: 2rem;
    position: fixed;
    top:2rem;
    left:2rem;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 2.8rem;
    padding: 0;
    background-color: #5d9bc7;
    border: none;
    background-size: cover;
    background-repeat: no-repeat;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: 0;
    z-index: 1000;
    cursor: default;
    overflow:hidden;
    opacity:1;
    cursor:pointer;
    background: #5d9bc7 no-repeat center/100% url(/images/back.png);
    box-shadow: 0 1px 3px rgb(0 0 0 / 6%), 0 1px 2px rgb(0 0 0 / 12%);
}
#extension-dashboard-back-button:hover{
    background-color: #6dabd7;
}
*/

/*
.extension-dashboard-greyscale .extension-dashboard-main-page{
	filter: gray;
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
}


body:not(.screensaver) .extension-dashboard-effect{
	opacity:1;
}


.extension-dashboard-thumbnail-highlighter{
	animation: extensionDashboardhighlightthumbnail 2s;
	animation-iteration-count: 1;
}


@keyframes extensionDashboardhighlightthumbnail {
  0% {
    transform: scale3d(1.3, 1.3, 1.3);
    animation-timing-function: ease-in;
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}
*/













/*  GRIDSTACK  */



.container-fluid > .grid-stack { min-height: 250px}

.grid-stack {
	position: relative
}

.grid-stack-rtl {
	direction: ltr
}

.grid-stack-rtl>.grid-stack-item {
	direction: rtl
}

.grid-stack-placeholder>.placeholder-content {
	background-color: rgba(0,0,0,.1);
	margin: 0;
	position: absolute;
	width: auto;
	z-index: 0!important
}

.grid-stack > .grid-stack-item {
	position: absolute;
	padding: 0;
	top: 0;
	left: 0;
	width: var(--gs-column-width);
	height: var(--gs-cell-height);
}

.grid-stack > .grid-stack-item > .grid-stack-item-content {
	margin: 0;
	position: absolute;
	width: auto;
	overflow: visible;
	border-radius:2rem;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content > div:not(.extension-dashboard-configure-widget-button){
	background-color: var(--extension-dashboard-widget-background-color);
	border-radius: 2rem;
}
.grid-stack > .grid-stack-item > .grid-stack-item-content > div:not(.extension-dashboard-configure-widget-button):not(.extension-dashboard-allow-overflow){
	overflow: hidden;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content .extension-dashboard-give-me-box-shadow{
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
/*
.grid-stack > .grid-stack-item > .grid-stack-item-content > div:not(.extension-dashboard-configure-widget-button).extension-dashboard-give-me-box-shadow,
.grid-stack > .grid-stack-item > .grid-stack-item-content > div:not(.extension-dashboard-configure-widget-button):not(.extension-dashboard-give-me-box-shadow) .extension-dashboard-give-me-box-shadow{
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
*/

.grid-stack > .grid-stack-item.size-to-content:not(.size-to-content-max) > .grid-stack-item-content {
	overflow-y: hidden
}

.grid-stack > .grid-stack-item > .grid-stack-item-content,
.grid-stack > .grid-stack-placeholder>.placeholder-content {
	top: var(--gs-item-margin-top);
	right: var(--gs-item-margin-right);
	bottom: var(--gs-item-margin-bottom);
	left: var(--gs-item-margin-left)
}

.grid-stack-item > .ui-resizable-handle {
	position: absolute;
	font-size: .1px;
	display: block;
	-ms-touch-action: none;
	touch-action: none;
	background-color:rgba(255,255,255,.2);
	padding:1rem;
	border-radius:50%;
}
.grid-stack-item > .ui-resizable-handle:hover{
	background-color: #7dafd2;
}

#extension-dashboard-content:not(.extension-dashboard-editing) .grid-stack-item > .ui-resizable-handle{
	display:none;
}
#extension-dashboard-content.extension-dashboard-editing .grid-stack-item > .ui-resizable-handle{
	display:inline-block!important;
}

.grid-stack-item.ui-resizable-autohide > .ui-resizable-handle,
.grid-stack-item.ui-resizable-disabled > .ui-resizable-handle {
	display: none
}

.grid-stack-item > .ui-resizable-ne,
.grid-stack-item > .ui-resizable-nw,
.grid-stack-item > .ui-resizable-se,
.grid-stack-item > .ui-resizable-sw {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');
	background-repeat: no-repeat;
	background-position: center
}

.grid-stack-item > .ui-resizable-ne {
	transform: rotate(45deg)
}

.grid-stack-item > .ui-resizable-sw {
	transform: rotate(45deg)
}

.grid-stack-item > .ui-resizable-nw {
	transform: rotate(-45deg)
}

.grid-stack-item > .ui-resizable-se {
	transform: rotate(-45deg)
}

.grid-stack-item > .ui-resizable-nw {
	cursor: nw-resize;
	width: 20px;
	height: 20px;
	top: var(--gs-item-margin-top);
	left: var(--gs-item-margin-left)
}

.grid-stack-item > .ui-resizable-n {
	cursor: n-resize;
	height: 10px;
	top: var(--gs-item-margin-top);
	left: 25px;
	right: 25px
}

.grid-stack-item > .ui-resizable-ne {
	cursor: ne-resize;
	width: 20px;
	height: 20px;
	top: var(--gs-item-margin-top);
	right: var(--gs-item-margin-right)
}

.grid-stack-item > .ui-resizable-e {
	cursor: e-resize;
	width: 10px;
	top: 15px;
	bottom: 15px;
	right: var(--gs-item-margin-right)
}

.grid-stack-item > .ui-resizable-se {
	cursor: se-resize;
	width: 20px;
	height: 20px;
	bottom: var(--gs-item-margin-bottom);
	right: var(--gs-item-margin-right)
}

.grid-stack-item > .ui-resizable-s {
	cursor: s-resize;
	height: 10px;
	left: 25px;
	bottom: var(--gs-item-margin-bottom);
	right: 25px
}

.grid-stack-item > .ui-resizable-sw {
	cursor: sw-resize;
	width: 20px;
	height: 20px;
	bottom: var(--gs-item-margin-bottom);
	left: var(--gs-item-margin-left)
}

.grid-stack-item > .ui-resizable-w {
	cursor: w-resize;
	width: 10px;
	top: 15px;
	bottom: 15px;
	left: var(--gs-item-margin-left)
}

.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle {
	display: none!important
}

.grid-stack-item.ui-draggable-dragging {
	will-change: left,top
}

.grid-stack-item.ui-resizable-resizing {
	will-change: width,height
}

.ui-draggable-dragging,.ui-resizable-resizing {
	z-index: 10000
}

.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content {
	box-shadow: 1px 4px 6px rgba(0,0,0,.2);
	opacity: .8
}

.grid-stack-animate,.grid-stack-animate .grid-stack-item {
	transition: left .3s,top .3s,height .3s,width .3s
}

.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing {
	transition: left 0s,top 0s,height 0s,width 0s
}

.grid-stack > .grid-stack-item:not(.grid-stack-sub-grid)[gs-y="0"] {
	top: 0
}

.grid-stack > .grid-stack-item:not(.grid-stack-sub-grid)[gs-x="0"] {
	left: 0
}

/*
.extension-dashboard-editing .grid-stack {
	background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 0px), linear-gradient(rgba(255, 255, 255, 0) 5px, transparent 100px), linear-gradient(90deg, rgb(255 255 255 / 0) 5px, transparent 100px);
	background-size: 100px 62px, calc(8.33% + 0px) 100px, 20px 20px, 20px 20px;
	background-position: -2px -2px, -1px -2px, -1px -1px, -1px -1px;
}  
*/







.extension-dashboard-widget-split,
.extension-dashboard-widget-thrit{
	display:flex;
	min-height:100%;
	box-sizing:border-box;
}
.extension-dashboard-widget-split{
	flex-wrap:wrap;
}

.extension-dashboard-widget-split > div,
.extension-dashboard-widget-thrit > div{
	min-width:100px;
	/*min-height:40px;*/
	box-sizing:border-box;
}
/*
.extension-dashboard-widget-split > div{
	flex-grow:1;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="2"] .extension-dashboard-widget-split > div,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="2"] .extension-dashboard-widget-thrit > div{
	flex-grow:1;
}
*/

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"] .extension-dashboard-widget-weather-description-container{
	padding:1.5rem;
	justify-content:center;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"]:not([gs-h]) .extension-dashboard-widget-split > div{
	width:50%;
	/*height:100%;*/
}

/*
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"]:not([gs-h="2"]) .extension-dashboard-widget-thrit{
	
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"]:not([gs-h="2"]) .extension-dashboard-widget-thrit > div,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"]:not([gs-h="3"]) .extension-dashboard-widget-thrit > div{
	width:33.3%;
	height:100%;
}
*/




.extension-dashboard-widget-value-subtext{
	font-size:80%;
	margin-bottom:2rem;
}



.grid-stack-item:not(.grid-stack-sub-grid)[gs-h] .extension-dashboard-widget-thrit{
	height:100%;
	flex-direction:column;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h] .extension-dashboard-widget-thrit > div{
	width:100%;
	flex-basis:15%;
}


.grid-stack-item:not(.grid-stack-sub-grid)[gs-h] .extension-dashboard-widget-split-compact{
	height:100%;
	flex-direction:column;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="2"] .extension-dashboard-widget-split,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"] .extension-dashboard-widget-split,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="4"] .extension-dashboard-widget-split{
	flex-direction:column;
	height:100%;
	flex-wrap:initial;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]) .extension-dashboard-widget-split-compact{
	width:100%;
	height:100%;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h="2"]) .extension-dashboard-widget-split-compact > div{
	/*height:50%;*/
	min-height:1px;
}
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h="2"]):not([gs-w="3"]) .extension-dashboard-widget-split-compact > div{
	width:100%;
}








/*    MORE GRIDSTACK    */


.grid-stack-item-content{
	max-width:100%;
}

.extension-dashboard-editing .grid-stack-item-content{
	background-color: var(--extension-dashboard-widget-background-color);
	border-radius:3rem;
	overflow:hidden;
}


.grid-stack-item-removing {
	opacity: 0.5;
}

.grid-stack > .grid-stack-item.grid-stack-sub-grid > .grid-stack-item-content {
	background: rgba(0,0,0,0.1);
	inset: 0 2px;
}


.grid-stack.grid-stack-nested {
	background: none;
	inset: 0;
}







/*   THUMBNAIL OVERVIEW   */

#extension-dashboard-photos-list{
	background-color:rgba(0,0,0,.2);
	display:flex;
	flex-wrap:wrap;
    padding:2rem;
    border-radius:.5rem;
    box-sizing:border-box;
}

.extension-dashboard-list-thumbnail-container{
	width:15rem;
	height:15rem;
	display:flex;
	align-items: center;
	justify-content: center;
	background-color:black;
	border-radius: .5rem;
}

.extension-dashboard-list-item{
	width:15rem;
	display:inline-block;
	padding:.2rem;
	padding:1rem;
    margin:1rem;
	margin-bottom:1rem;
    position:relative;
}

.extension-dashboard-list-item > span{
	word-wrap: break-word;
}





/*  THUMBNAIL  */

/*
.extension-dashboard-list-thumbnail{
	cursor:pointer;
	max-width: calc(100% - 10px);
	max-height: calc(100% - 10px);
}

.extension-dashboard-list-thumbnail:hover{
	filter: brightness(120%);
}


.extension-dashboard-thumbnail-delete-button{
    position: absolute;
    top: -0.8rem;
    right: -0.8rem;
    background: url(/images/delete-button.png);
    background-size: 3.6rem;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid #979797;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
    cursor: pointer;
    z-index:99;
    opacity:.6;
}
.extension-dashboard-thumbnail-delete-button:hover{
    opacity:1;
}
*/

/*
.extension-dashboard-thumbnail-print-button{
    position: absolute;
    bottom: -0.8rem;
    right: -0.8rem;
    background: url(../images/printer-icon.svg);
    background-size: 3.6rem;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid #979797;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
    cursor: pointer;
    z-index:99;
    background-color:rgba(255,255,255,.7);
}
.extension-dashboard-thumbnail-print-button:hover{
    background-color:rgba(255,255,255,1);
}
*/


/*  DROPZONE */


/*
#extension-dashboard-dropzone {
	display:none;
    height: 10rem;
    border: 2px dashed #ccc;
    color: #ccc;
    text-align: center;
	align-content: center;
	justify-content: center;
	align-items: center;
	margin-bottom:.2rem;
}

#extension-dashboard-dropzone.extension-dashboard-dragover {
    border-color: #000;
    color: #000;
	background-color:white;
}

#extension-dashboard-photos-file-selector-overlay,
#extension-dashboard-photos-file-selector{
    font-size: 0;
    width: 5.6rem;
    height: 5.6rem;
    border: none;
    background-color: #7aadd1;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-image: url(/images/add.svg);
    border-radius: 2.8rem;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.01;
    cursor: pointer;
    user-select: none;
    outline: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgb(0 0 0 / 6%), 0 1px 2px rgb(0 0 0 / 12%);
}

#extension-dashboard-photos-file-selector-overlay{
    z-index:101;
    pointer-events: none;
    opacity:1;
}

.kiosk #extension-dashboard-photos-file-selector,
.kiosk #extension-dashboard-photos-file-selector-overlay{
    display:none;
}
*/


















@media screen and (min-width: 640px) {

	/*
    #extension-dashboard-view li{
        margin:.5rem;
    }
	*/
	#extension-dashboard-tab-buttons-container{
		flex-wrap:wrap;
	}
}


@media screen and (min-width: 801px) {
	/*
	#extension-dashboard-view{
		top:0;
		left:9.6rem;
        width:calc(100% - 9.6rem);
        height:100vh;
        max-height:100%;
        max-width:100%;
	}
	
	#extension-dashboard-content-container{
		height:auto;
		width: calc(100% - 19.8rem);
        margin-left:9.6rem;
	}
	*/
	/*
	.extension-dashboard-tab{
		width: calc(100% - 12rem);
	}
	
	body:not(.kiosk) #extension-dashboard-dropzone {
		display:flex;
	}
	*/
	
	#extension-dashboard-widget-modal,
	#extension-dashboard-settings-modal{
		padding:1rem 2rem;
	}
	
	.extension-dashboard-tab-buttons-container-container{
		margin-left:3rem;
		margin-right:3rem;
	}
	
}


@keyframes extensionDashboardWidgetWeatherBGslide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}


.extension-dashboard-widget-double-property-switch{
	display:flex;
	flex-direction:column;
}
.extension-dashboard-widget-double-property-switch > div{
	position:relative;
	flex-grow:1;
	background-color: var(--extension-dashboard-widget-background-color);
	border-radius:2rem;
}
.extension-dashboard-widget-double-property-switch > div:not(:last-of-type){
	margin-bottom:30px;
}
/*
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h] .extension-dashboard-widget-double-property-switch > div:not(:last-of-type){
	margin-bottom:30px;
}
*/

.extension-dashboard-widget-double-property-switch > div label{
	height:100%;
	display: flex;
	align-items: center;
	padding:1rem;
}



.extension-dashboard-widget-property-switch label,
.extension-dashboard-widget-double-property-switch label,
.extension-dashboard-widget-property-slider label,
.extension-dashboard-widget-property-color  label{
	width:100%;
	padding: 0;
	/*background-color: rgb(151,190,219,0.04);*/
	/*padding-bottom:1rem;*/
	box-sizing:border-box;
}
.extension-dashboard-widget-property-switch label::before,
.extension-dashboard-widget-double-property-switch label::before {
    border-radius: 2rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /*background-color: rgba(255,255,255,.3);
	background-color: #97bedb;*/
    content: "";
}
.extension-dashboard-widget-property-switch label * ,
.extension-dashboard-widget-double-property-switch label * {
    position: relative;
    /*transition: 200ms;*/
}
.extension-dashboard-widget-property-switch label small,
.extension-dashboard-widget-double-property-switch label small,
.extension-dashboard-widget-property-slider label small,
.extension-dashboard-widget-property-color  label small{
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--extension-dashboard-widget-editable-text-color);
    border-radius: 10px;
    top: 2rem;
    right: 2rem;
    transition: 200ms;
}
.extension-dashboard-widget-double-property-switch label small{
	background-color: var(--extension-dashboard-widget-editable-text-color);
    transition: 200ms;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]) .extension-dashboard-widget-double-property-switch label small{
	right:1rem;
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w] .extension-dashboard-widget-double-property-switch label small{
	width: 30px;
    height: 30px;
	border-radius: 20px;
	position:relative;
	top:0;
	right:0;
}

.extension-dashboard-widget-property-switch label small::after, .extension-dashboard-widget-property-switch label small::before,
.extension-dashboard-widget-double-property-switch label small::after, .extension-dashboard-widget-double-property-switch label small::before,
.extension-dashboard-widget-property-slider label small::after, .extension-dashboard-widget-property-slider label small::before,
.extension-dashboard-widget-property-color  label small::after, .extension-dashboard-widget-property-color  label small::before{
    content: "";
}

.extension-dashboard-widget-property-switch input:not(:checked) + label::before,
.extension-dashboard-widget-double-property-switch input:not(:checked) + label::before,
.extension-dashboard-widget-property-slider input:not(:checked) + label::before,
.extension-dashboard-widget-property-color  input:not(:checked) + label::before {
    content: "";
}
/*
.extension-dashboard-widget-property-switch input:checked + label *,
.extension-dashboard-widget-property-slider input:checked + label *,
.extension-dashboard-widget-property-color  input:checked + label *{
    color: white;
}
*/
.extension-dashboard-widget-property-switch input[type="checkbox"].extension-dashboard-widget-switch_state-needs-update:not([data-extension-dashboard-update-property]) + label small,
.extension-dashboard-widget-double-property-switch input[type="checkbox"].extension-dashboard-widget-switch_state-needs-update:not([data-extension-dashboard-update-property]) + label small,
.extension-dashboard-widget-property-slider input[type="checkbox"].extension-dashboard-widget-switch_state-needs-update:not([data-extension-dashboard-update-property]) + label small,
.extension-dashboard-widget-property-color input[type="checkbox"].extension-dashboard-widget-switch_state-needs-update:not([data-extension-dashboard-update-property]) + label small{
	display:none;
}

.extension-dashboard-widget-property-slider input[type="checkbox"].extension-dashboard-widget-switch_state-needs-update:not([data-extension-dashboard-update-property]) + label .extension-dashboard-widget-thing_title-needs-rename:empty{
	display:none;
}


.extension-dashboard-widget-property-switch input:not(:checked) + label small,
.extension-dashboard-widget-double-property-switch input + label small,
.extension-dashboard-widget-property-slider input:not(:checked) + label small,
.extension-dashboard-widget-property-color  input:not(:checked) + label small{
    width: 30px;
    height: 15px;
    background-color: var(--extension-dashboard-widget-editable-text-color); /*#3976f6;*/
}

.extension-dashboard-widget-double-property-switch{
	--editable-text-darker: color-mix(in sRGB, var(--extension-dashboard-widget-editable-text-color) 50%, 0000);
}

.extension-dashboard-widget-double-property-switch input:not(:checked) + label small{
	/*background-color: var(--editable-text-darker);*/
	background-color: color-mix(in oklab, var(--extension-dashboard-widget-editable-text-color), black 30%)
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w] .extension-dashboard-widget-double-property-switch input:not(:checked) + label small,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w] .extension-dashboard-widget-double-property-switch input:checked + label small{
	width: 60px;
    height: 30px;
}

.extension-dashboard-widget-property-switch input:not(:checked) + label small::before,
.extension-dashboard-widget-double-property-switch input + label small::before,
.extension-dashboard-widget-property-slider input:not(:checked) + label small::before,
.extension-dashboard-widget-property-color  input:not(:checked) + label small::before{
    width: 13px;
    height: 13px;
    background-color: white;
    display: block;
    border-radius: 13px;
    top: 1px;
    position: absolute;
}
.extension-dashboard-widget-double-property-switch input:not(:checked) + label small::before{
	left:1px;
}
.extension-dashboard-widget-double-property-switch input:checked + label small::before{
	left:16px;
}
.extension-dashboard-widget-double-property-switch input:not(:checked) + label small::before,
.extension-dashboard-widget-double-property-switch input:checked + label small::before{
	background-color: white;
    display: block;
    position: absolute;
	transition: left .1s ease-out;
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w] .extension-dashboard-widget-double-property-switch input:not(:checked) + label small::before{
	width: 26px;
    height: 26px;
    border-radius: 26px;
	top: 2px;
	left: 2px;
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w] .extension-dashboard-widget-double-property-switch input:checked + label small::before{
	width: 26px;
    height: 26px;
    border-radius: 26px;
	top: 2px;
	left: 27px;
}


.extension-dashboard-widget-property-switch input:checked + label span::before,
.extension-dashboard-widget-double-property-switch input:checked + label span::before,
.extension-dashboard-widget-property-slider input:checked + label span::before,
.extension-dashboard-widget-property-color  input:checked + label span::before{
    opacity: 0;
}
.extension-dashboard-widget-property-switch input:checked + label span::after,
.extension-dashboard-widget-double-property-switch input:checked + label span::after,
.extension-dashboard-widget-property-slider input:checked + label span::after,
.extension-dashboard-widget-property-color  input:checked + label span::after{
    opacity: 1;
}



/*  second icon  */

#extension-dashboard-content .extension-dashboard-widget-property-switch input:checked + label span.extension-dashboard-widget-checkbox-toggle-checked-content[style] + span{
	display:none;
}




/*   ACTION WIDGET   */

div[data-template-name="action-button"]{
	--widget-lighter: color-mix(in sRGB, var(--extension-dashboard-widget-background-color) 50%, #fff);
	cursor: pointer;
}

/*
.grid-stack > .grid-stack-item:not(.grid-stack-sub-grid)[gs-h][gs-w] > .grid-stack-item-content > div[data-template-name="action-button-grid"]:not(.extension-dashboard-configure-widget-button) .extension-dashboard-widget-action_button-button::after,
*/
.grid-stack > .grid-stack-item:not(.grid-stack-sub-grid)[gs-h][gs-w] > .grid-stack-item-content > div[data-template-name="action-button-grid"]:not(.extension-dashboard-configure-widget-button) .extension-dashboard-widget-action_button-button[data-extension-dashboard-action-id]:hover::after,
div[data-template-name="double-action-button"].extension-dashboard-widget-double-property-switch > div::after,
.grid-stack > .grid-stack-item:not(.grid-stack-sub-grid) > .grid-stack-item-content > div[data-template-name="action-button"]:not(.extension-dashboard-configure-widget-button)::after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	width:0;
	width:100%;
	height:100%;
	pointer-events:none;
	border-radius: 2rem;
	border:10px solid rgba(0,0,0,.1);
	box-sizing: border-box;
}

div[data-template-name="double-action-button"].extension-dashboard-widget-double-property-switch > div:hover::after,
.grid-stack > .grid-stack-item > .grid-stack-item-content > div[data-template-name="action-button"]:not(.extension-dashboard-configure-widget-button):hover::after{
	border-color: rgba(0,0,0,.2);
}

.extension-dashboard-widget-action_button-button{
	height:100%;
}
div[data-template-name="action-button"] strong{
	position:absolute;
	top:0;
}

div[data-template-name="double-action-button"] .extension-dashboard-widget-action_button-button{
	height:100%;
	display:flex;
	align-items:center;
	justify-content: center;
}

/*
#extension-dashboard-content .extension-dashboard-widget-action_button-button .extension-dashboard-widget-thing-icon-container{
	background-position:center center;
	border-top-width: 3rem;
}
*/

.grid-stack > .grid-stack-item > .grid-stack-item-content > div[data-template-name="double-action-button"]:not(.extension-dashboard-configure-widget-button) > div.extension-dashboard-action-occured-animation::after,
.grid-stack > .grid-stack-item > .grid-stack-item-content > div.extension-dashboard-action-occured-animation[data-template-name="action-button"]:not(.extension-dashboard-configure-widget-button)::after{
	border-color: rgba(0,186,0,.5);
}



/*  DOUBLE ACTION BUTTON WIDGET */

div[data-template-name="double-action-button"].extension-dashboard-widget-double-property-switch > div{
	display:flex;
	align-items: center;
	justify-content: center;
	cursor:pointer;
	position:relative;
}





/*  ACTION BUTTONS GRID */


div[data-template-name="action-button-grid"]{
	display:flex;
	flex-direction: column;
	width:100%;
	max-height:100%;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h][gs-w] div[data-template-name="action-button-grid"] .extension-dashboard-widget-grid9 > div{
	position: relative;
	padding:2rem;
}

.extension-dashboard-widget-grid9{
	flex-grow: 1;
	border: 20px solid transparent;
	/*
    width: calc(100% - 8rem);
    height: calc(100% - 8rem);
    position: absolute;
    top: 4rem;
    right: 4rem;
    left: 4rem;
    bottom: 4rem;
	*/
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
	align-content: center;
	justify-content: center;
    grid-gap: 10px;
    align-items: stretch;
	
}

.extension-dashboard-widget-grid9 > div{
	width:100%;
	max-width:100%;
	height:100%;
	max-height:100%;
}
.extension-dashboard-widget-action_button-button[data-extension-dashboard-action-id]{
	cursor:pointer;
}
/*
.extension-dashboard-widget-grid9 > div:hover{
	background-color: rgba(0,0,0,.1);
	border-radius: .5rem;
}
*/

.extension-dashboard-widget-grid9 img{
	width:60%;
	height: auto;
}





/*   PROPERTY SLIDER WIDGET   */

.extension-dashboard-widget-property-switch strong,
.extension-dashboard-widget-property-slider strong,
.extension-dashboard-widget-property-color strong{
    font-size: 16px;
    padding-top: 1.5rem;
    padding-left: 1.5rem;
	padding-right: 1rem;
    display: inline-block;
	width:100%;
	font-weight:100;
}
.extension-dashboard-widget-property-switch strong:empty,
.extension-dashboard-widget-property-slider strong:empty,
.extension-dashboard-widget-property-color strong:empty{
	display:none;
}

.extension-dashboard-widget-slider-container{
	padding:1.5rem .5rem;
	width:100%;
	/*max-height:calc(100% - 2rem);*/
}

.extension-dashboard-widget-property-switch input[type="checkbox"][data-extension-dashboard-update-property] + label,
.extension-dashboard-widget-double-property-switch input[type="checkbox"][data-extension-dashboard-update-property] + label,
.extension-dashboard-widget-property-color input[type="checkbox"][data-extension-dashboard-update-property] + label{
	cursor:pointer;
}

.extension-dashboard-widget-property-slider input[type="checkbox"][data-extension-dashboard-update-property] + label{
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    min-height: 37px;
}

.extension-dashboard-widget-property-slider input[type="checkbox"][data-extension-dashboard-update-property] + label:hover,
.extension-dashboard-widget-property-color input[type="checkbox"][data-extension-dashboard-update-property] + label:hover{
	background-color:rgba(0,0,0,.05);
}

.extension-dashboard-widget-property-switch input[type="checkbox"][data-extension-dashboard-update-property] + label strong,
.extension-dashboard-widget-property-slider input[type="checkbox"][data-extension-dashboard-update-property] + label strong,
.extension-dashboard-widget-property-color input[type="checkbox"][data-extension-dashboard-update-property] + label strong{
	width: calc(100% - 55px);
}
.extension-dashboard-widget-double-property-switch input[type="checkbox"][data-extension-dashboard-update-property] + label strong{
	width: calc(100% - 35px);
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-property-switch input[type="checkbox"][data-extension-dashboard-update-property] + label strong,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-property-slider input[type="checkbox"][data-extension-dashboard-update-property] + label strong,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-property-color input[type="checkbox"][data-extension-dashboard-update-property] + label strong{
	font-size:1.3rem;
}
.extension-dashboard-widget-property-slider input[type="checkbox"][data-extension-dashboard-update-property] + label strong:not(:empty){
	padding-bottom:1rem;
}

/*
.extension-dashboard-widget-property-slider label{
	cursor:pointer;
}
.extension-dashboard-widget-property-slider label strong:not(empty){
    display: block;
	width:100%;
	height:100%;
	min-height:37px;
}
*/

/*
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-flex-center{
	flex-direction:column;
}
*/







/*   LIST SELECTOR WIDGET   */

ul.extension-dashboard-widget-enum-list{
	padding: 1.5rem;
	margin: 0;
	max-width:100%;
	display:flex;flex-wrap:wrap;
	overflow:hidden;
}

.extension-dashboard-widget-list-selector .extension-dashboard-widget-block-title-container{
	padding-bottom:0;
}

ul > .extension-dashboard-list-selector-item{
	margin:0;
	padding:.5rem 1.5rem;
}

li.extension-dashboard-list-selector-item{
	background-color:rgba(255,255,255,.4);
	margin:0 1rem 1rem 0;
	padding:0.9rem 1.5rem;
	border-radius:2rem;
	cursor:pointer;
}

li.extension-dashboard-list-selector-item:hover{
	box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.1);
}


li.extension-dashboard-list-selector-item:hover,
li.extension-dashboard-list-selector-item.extension-dashboard-widget-list-selector-highlighted-item{
	background-color:var(--extension-dashboard-widget-editable-text-color);
	/*background-color:rgba(255,255,255,.4);
	box-shadow: inset 0 0 0 1px var(--extension-dashboard-widget-editable-text-color);*/
	color:white;
	
}
/*
li.extension-dashboard-list-selector-item:not(.extension-dashboard-widget-list-selector-highlighted-item){
	 box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
}
*/
   

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="2"]:not([gs-w]) .extension-dashboard-widget-list-selector ul,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"]:not([gs-w]) .extension-dashboard-widget-list-selector ul,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="4"]:not([gs-w]) .extension-dashboard-widget-list-selector ul,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="5"]:not([gs-w]) .extension-dashboard-widget-list-selector ul{
	flex-wrap:nowrap;
	flex-direction:column;
}

/*
.extension-dashboard-widget-name-needs-rename:empty + .extension-dashboard-widget-options_list-needs-update{
	margin-top:1rem;
}
*/





/*   COLOR WIDGET    */


#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"]:not([gs-h]) .extension-dashboard-widget-color-container{
	width:50%; 
	max-width:50%;
	margin: 0 auto;
	flex-grow:1;
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"][gs-h="2"] .extension-dashboard-widget-color-container{
	width:60%; 
	max-width:60%;
	margin: 0 auto;
}


/*
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]) .extension-dashboard-widget-property-color .extension-dashboard-widget-slider-container{
	display:none;
}
*/


.extension-dashboard-widget-color-container canvas{
	width: 100%; 
	height: auto; 
	min-width:80px; 
	min-height:80px;
	border-radius: 50%;
	cursor: crosshair;
}

/*
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"] .extension-dashboard-widget-color-container canvas{
	width: 50%; 
	height: auto;
}
*/

.extension-dashboard-widget-property-color label{
	font-size:1.3rem;
	display:block;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
	min-height: 5rem;
	box-sizing:border-box;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-property-color label{
	height:100%;
	margin-right:1rem;
}

.extension-dashboard-widget-property-color .extension-dashboard-widget-color-needs-update{
	position:absolute;
	pointer-events:none;
    border: none;
    box-sizing: border-box;
    padding: 0;
    background-color: transparent;
    border-radius: 20px;
    height: 40px;
    width: 40px;
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-widget-title-container{
	position:absolute;
}
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-widget-color-container{
	position:absolute;
	top:-15%;
	left:-15%;
	width:130%;
}


#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"]:not([gs-h]) .extension-dashboard-widget-property-color .extension-dashboard-widget-split-compact,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"]:not([gs-h]) .extension-dashboard-widget-property-color .extension-dashboard-widget-split-compact{
	flex-direction:row;
}


/*
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"]:not([gs-h]) .extension-dashboard-widget-title-container{
	
}
*/
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"]:not([gs-h]) .extension-dashboard-widget-color-container{
	margin-right:4rem;
}
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"]:not([gs-h]) .extension-dashboard-widget-color-container{
	margin-right:6rem;
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"]:not([gs-h]) .extension-dashboard-widget-property-color strong,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"]:not([gs-h]) .extension-dashboard-widget-property-color strong{
	height:100%;
	width:100%;
}







/*   MEDIA PLAYER WIDGET   */

.extension-dashboard-widget-media-player {
    position: relative;
    width: 100%;
}
.extension-dashboard-widget-media-player > h2 {
    margin-bottom: 5px;
    margin-top: 10px;
}


.extension-dashboard-widget-block-title-container,
.extension-dashboard-widget-name-needs-rename{
	flex-basis:auto!important;
	flex-grow:0!important;
}

.extension-dashboard-widget-media-player-info-container{
	margin-top:1.5rem;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="2"]:not([gs-h="3"]):not([gs-w]) .extension-dashboard-widget-media-player-info-container,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"]:not([gs-h]) .extension-dashboard-widget-media-player-info-container,
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w="3"]) .extension-dashboard-widget-media-player-info-container{
	display:none;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h] .extension-dashboard-widget-media-player-info-container{
	padding:0 1.5rem;
}



.extension-dashboard-widget-media-player p{
	margin: 0.5rem 0;
	padding-right:1rem;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-widget-media-player .extension-dashboard-widget-icon-disc{
	width:40px;
	height:40px;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]) .extension-dashboard-widget-media-player .extension-dashboard-widget-icon-disc{
	display:none;
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-media-player-info,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-media-player-info{
	padding:1.5rem;
}

.extension-dashboard-widget-media-player-info{
	position:relative;
	border-radius:.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;

}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w] .extension-dashboard-widget-media-player-info{
	padding-right:2rem;
	flex-grow:1;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w] .extension-dashboard-widget-icon-disc{
	margin-left: 1.5rem;
	margin-bottom:1.5rem;
}


.extension-dashboard-widget-media-player .extension-dashboard-player {
    border-radius: 10px;
    padding: 15px;
    background-image: linear-gradient(to right, #59a2fb 0%, #3976f6 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.24);
}
.extension-dashboard-widget-media-player .extension-dashboard-artist {
    margin-right: auto;
    margin-left: 15px;
}
.extension-dashboard-widget-media-player .extension-dashboard-artist p {
    margin: 0;
    font-weight: 600;
}
.extension-dashboard-widget-media-player .extension-dashboard-widget-icon-disc {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-image: linear-gradient(50deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.15) 31%, rgba(255, 255, 255, 0) 72%), linear-gradient(-50deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 60%), repeating-radial-gradient(circle, #444 0, #444 2px, gray 2px, #545454 3px);
    position: relative;
	margin:5px 10px;
	flex-shrink:0;
}
.extension-dashboard-widget-media-player .extension-dashboard-widget-icon-disc::before, .extension-dashboard-widget-media-player .extension-dashboard-widget-icon-disc::after {
    content: "";
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 50%;
}
.extension-dashboard-widget-media-player .extension-dashboard-widget-icon-disc::before {
    width: 20px;
    height: 20px;
    background: black;
    border: 2px solid #5d5d5d;
}
.extension-dashboard-widget-media-player .extension-dashboard-widget-icon-disc::after {
    width: 8px;
    height: 8px;
    background: white;
}

.extension-dashboard-widget-media-player .extension-dashboard-widget-media-player-controls input[type="checkbox"] {
    display: none;
}

.extension-dashboard-widget-media-player-controls{
	width:100%;
	min-height:50px;
    margin: 0 auto;
	box-sizing:border-box;
	display:flex;
	align-items:center;
	justify-content:space-around;
	margin-top:2rem;
	margin-bottom:1rem;
	padding:0 .5rem;
}


.extension-dashboard-widget-media-player-controls > div{
	display:flex;
	justify-content:center;
	align-items:center;
}
.extension-dashboard-widget-media-player-controls label{
	display:flex;
	width:100%;
	height:100%;
}



.extension-dashboard-widget-media-play-button-container{
    width: 50px;
    height: 50px;
	cursor:pointer;
}

.extension-dashboard-widget-media-play-button{
	position:absolute;
    width: 35px;
    height: 35px;
}

.extension-dashboard-widget-media-play-button-icon{
    display: inline-block;
    position: absolute;
    width: 45px;
    height: 45px;
    transition: clip-path .3s ease;
	cursor:pointer;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-media-play-button-container{
    width: 100px;
    height: 100px;
	border-radius: 50%;
	position:relative;
	/*left:-10px;*/
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-media-play-button-container:hover{
	box-shadow: 1px 0 10px 10px rgba(0, 0, 0, 0.1);
	transition: box-shadow .3s ease-out;
	background-color: var(--extension-dashboard-widget-editable-text-color);
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-media-play-button,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-media-play-button-icon{
    width: 55px;
    height: 55px;
}

.extension-dashboard-widget-media-play-button-icon span{
	background-color:white;
}
/*
.extension-dashboard-widget-media-play-button:hover span{
	background-color: var(--extension-dashboard-widget-editable-text-color);
}*/

/*
.extension-dashboard-widget-media-play-button:hover{
	box-shadow: 20px 20px 60px #88949e, -20px -20px 60px #b8c8d6;
    border-radius: 50px;
	transition: box-shadow .3s ease-out;
}
*/

/*
.extension-dashboard-widget-media-play-button:hover span{
	background-color: var(--extension-dashboard-widget-editable-text-color);
	transition: background .3s ease-out;
}
*/

.extension-dashboard-widget-media-play-button-before {
    clip-path: polygon(0 0, 50% 25%, 50% 75%, 0% 100%);
}
.extension-dashboard-widget-media-play-button-after {
    clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%);
}

.extension-dashboard-widget-media-player .extension-dashboard-widget-media-player-controls input:checked + label .extension-dashboard-widget-media-play-button-before{
    clip-path: polygon(0 0, 30% 0, 30% 100%, 0% 100%);
}
.extension-dashboard-widget-media-player .extension-dashboard-widget-media-player-controls input:checked + label .extension-dashboard-widget-media-play-button-after{
    clip-path: polygon(70% 0, 100% 0, 100% 100%, 70% 100%)
}

.extension-dashboard-widget-media-player-control-previous-button,
.extension-dashboard-widget-media-player-control-next-button{
    height: 45px;
    width: 45px;
	cursor:pointer;
	padding:10px;
	transition: box-shadow .3s ease-out;
}


.extension-dashboard-widget-media-player-control-previous-button-icon,
.extension-dashboard-widget-media-player-control-next-button-icon{
    width:100%;
	height:100%;
	background-color: rgba(255,255,255, 1);
	transition: background .3s ease-out;
}
.extension-dashboard-widget-media-player-control-previous-button-icon{
	clip-path: polygon(0 0, 30% 0, 30% 50%, 100% 0, 100% 100%, 30% 50%, 30% 100%, 0 100%);
}
.extension-dashboard-widget-media-player-control-next-button-icon{
	clip-path: polygon(0 0, 0 100%, 70% 50%, 70% 100%, 100% 100%, 100% 0, 70% 0, 70% 50%);
}

.extension-dashboard-widget-media-player-control-previous-button:hover > div,
.extension-dashboard-widget-media-player-control-next-button:hover > div{
	background-color:var(--extension-dashboard-widget-editable-text-color)
}


.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]) .extension-dashboard-widget-media-player-control-previous-button,
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]) .extension-dashboard-widget-media-player-control-next-button{
    height: 30px;
    width: 30px;
	padding:5px;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-media-player-control-previous-button,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-media-player-control-next-button{
    height: 65px;
    width: 65px;
	padding:20px;
	border-radius:50%;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-media-player-control-previous-button:hover,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-media-player-control-next-button:hover{
	box-shadow: 1px 0 10px 10px rgba(0, 0, 0, 0.1);
	transition: box-shadow .3s ease-out;
}

/*
.extension-dashboard-widget-media-player li.extension-dashboard-list-selector-item{
	margin-bottom:0;
}
*/

.extension-dashboard-widget-source-needs-update:empty,
.extension-dashboard-widget-song_title-needs-update:empty,
.extension-dashboard-widget-artist-needs-update:empty{
	display:none;
}

.extension-dashboard-widget-artist-needs-update:not(:empty){
	display: inline-block;
	margin-bottom:2rem;
}

.extension-dashboard-widget-source-needs-update{
	font-style:italic;
	opacity:.8;
}
/*
.extension-dashboard-widget-source-needs-update:not(:empty)::before{
	content:'📻 ';
	font-style:initial;
}
*/






/*   RANGE SLIDER  */

#extension-dashboard-content input[type="range"] {
	appearance: none; 
    -webkit-appearance: none; 
    width: calc(100% - 2rem);
    background: transparent;
    position: relative;
}


#extension-dashboard-content input[type="range"]:focus {
    outline: 0;
}

/*
#extension-dashboard-content input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 3em;
    height: 3em;
    margin: .5em 0;
    background: var(--extension-dashboard-widget-editable-text-color); 
    border-radius: 100%;
    box-shadow: 
                inset .8em .8em 5px -8px rgba(255, 255, 255, .4),
                inset -.4em -.4em 10px -3px rgba(0,0,0,.2),
                0.7em 0.5em 7px -0.5em rgba(0,0,0,.4);;

    cursor: pointer;
}

#extension-dashboard-content input[type=range]::-moz-range-thumb {
    width: 3em;
    height: 3em;
    margin: .5em 0;
    background: var(--extension-dashboard-widget-editable-text-color); 
    border-radius: 100%;
    box-shadow: 
                inset .8em .8em 5px -8px rgba(255, 255, 255, .4),
                inset -.4em -.4em 10px -3px rgba(0,0,0,.2),
                0.7em 0.5em 7px -0.5em rgba(0,0,0,.4);
    cursor: pointer;
    border: 0;
}

#extension-dashboard-content input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
    width: 100%;
    height: 4em;
    padding: 0 1em;
    border-radius: 2em;
    box-shadow: 
                inset .6em 1em 10px rgba(0,0,0,.15),
                inset -.6em -1em 10px rgba(255, 255, 255, .315);
}

#extension-dashboard-content input[type=range]::-moz-range-track {
    background: transparent;
    width: 100%;
    height: 4em;
    padding: 0 1em;
    border-radius: 2em;
    box-shadow: 
                inset .6em 1em 10px rgba(0,0,0,.15),
                inset -.6em -1em 10px rgba(255, 255, 255, .315);
}

#extension-dashboard-content input[type="range"]::before {
    content: "";
    position: absolute;
    text-align: center;
    color: #c4c4c4;
    font-size: 1em;
    top: 0; bottom: 0;
    left: 0; right: 0;
    padding: 1.6em;
    text-shadow: .5px .5px 0.9px rgba(0,0,0, .4);
    z-index: -1;
}
*/



#extension-dashboard-content input[type="range"] {
    --base: var(--extension-dashboard-widget-editable-text-color); 
    --light: color-mix(in sRGB, var(--base) 85%, #fff);
    --lighter: color-mix(in sRGB, var(--base) 30%, #fff);
    --dark: color-mix(in sRGB, var(--base) 95%, #000);
    --widget-lighter: color-mix(in sRGB, var(--extension-dashboard-widget-background-color) 50%, #fff);
    --transparent: color-mix(in sRGB, var(--extension-dashboard-widget-editable-text-color) 0%, #0000);
    appearance: none;
    width: calc(100% - 3rem);
    height: 4rem;
    border-radius: 2rem;
    overflow: hidden;
	/*
	box-shadow: 1px 0 10px 10px rgba(0, 0, 0, 0.04);
	*/
	/*
	box-shadow: 0 0 0px .5px var(--extension-dashboard-widget-editable-text-color);
	
	box-shadow: 1px 0 5px 5px rgba(0, 0, 0, 0.01);
	box-shadow: 1px 0 10px 10px rgba(0, 0, 0, 0.04);
	box-shadow: 1px 0 5px 5px rgba(0, 0, 0, 0.03);
	*/
	
}

#extension-dashboard-content input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;
	background:
		linear-gradient(90deg, var(--lighter), var(--transparent) 1em),
		linear-gradient(#0000 70%, var(--dark) 80%), var(--lighter);
	background: var(--light);
	border-radius: 2rem;
	height: 4rem;
	overflow: hidden;
	cursor:pointer;
}

#extension-dashboard-content input[type="range"]::-moz-range-track{
	width: 100%;
	/*
	background:
		linear-gradient(90deg, var(--lighter), var(--transparent) 1em),
		linear-gradient(#0000 70%, var(--dark) 80%), var(--lighter);
	*/
	background: var(--light);
	border-radius: 2rem;
	height: 4rem;
	overflow: hidden;
	cursor:pointer;
}



#extension-dashboard-content input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 3em;
    height: 3em;
    margin: 0;
    background: var(--extension-dashboard-widget-editable-text-color); 
    border-radius: 100%;
    cursor: pointer;
	/*
    background:
		radial-gradient(circle at 0.75em 0.6em, var(--light) calc(0.2em - 1px), #0000 0.2em),
		linear-gradient(90deg, #0000 0.75em, var(--extension-dashboard-widget-editable-text-color) 0) 0 0 / 100% 50% no-repeat;
	*/
    
	box-shadow: 
	inset .8em .8em 5px -8px rgba(255, 255, 255, .1),
      inset -1.5em 0 0.5em -0.25em var(--extension-dashboard-widget-editable-text-color),
       1em 0 0 0.25em var(--widget-lighter),
       2em 0 0 0.25em var(--widget-lighter),
       3em 0 0 0.25em var(--widget-lighter),
       4em 0 0 0.25em var(--widget-lighter),
       5em 0 0 0.25em var(--widget-lighter),
       6em 0 0 0.25em var(--widget-lighter),
       7em 0 0 0.25em var(--widget-lighter),
       8em 0 0 0.25em var(--widget-lighter),
       9em 0 0 0.25em var(--widget-lighter),
      10em 0 0 0.25em var(--widget-lighter),
      11em 0 0 0.25em var(--widget-lighter),
      12em 0 0 0.25em var(--widget-lighter),
      12em 0 0 0.25em var(--widget-lighter),
      13em 0 0 0.25em var(--widget-lighter),
      14em 0 0 0.25em var(--widget-lighter),
      15em 0 0 0.25em var(--widget-lighter),
      16em 0 0 0.25em var(--widget-lighter),
      17em 0 0 0.25em var(--widget-lighter),
      18em 0 0 0.25em var(--widget-lighter),
      19em 0 0 0.25em var(--widget-lighter),
      20em 0 0 0.25em var(--widget-lighter),
      21em 0 0 0.25em var(--widget-lighter),
      22em 0 0 0.25em var(--widget-lighter),
      23em 0 0 0.25em var(--widget-lighter),
      24em 0 0 0.25em var(--widget-lighter),
      25em 0 0 0.25em var(--widget-lighter),
      26em 0 0 0.25em var(--widget-lighter),
      27em 0 0 0.25em var(--widget-lighter),
      28em 0 0 0.25em var(--widget-lighter),
      29em 0 0 0.25em var(--widget-lighter),
      30em 0 0 0.25em var(--widget-lighter),
      31em 0 0 0.25em var(--widget-lighter),
      32em 0 0 0.25em var(--widget-lighter),
      33em 0 0 0.25em var(--widget-lighter),
      34em 0 0 0.25em var(--widget-lighter),
      35em 0 0 0.25em var(--widget-lighter),
      36em 0 0 0.25em var(--widget-lighter),
      37em 0 0 0.25em var(--widget-lighter),
      38em 0 0 0.25em var(--widget-lighter),
      39em 0 0 0.25em var(--widget-lighter),
      40em 0 0 0.25em var(--widget-lighter),
      41em 0 0 0.25em var(--widget-lighter),
      42em 0 0 0.25em var(--widget-lighter),
      43em 0 0 0.25em var(--widget-lighter),
      44em 0 0 0.25em var(--widget-lighter),
      45em 0 0 0.25em var(--widget-lighter),
      46em 0 0 0.25em var(--widget-lighter),
      47em 0 0 0.25em var(--widget-lighter),
      48em 0 0 0.25em var(--widget-lighter),
      49em 0 0 0.25em var(--widget-lighter),
      50em 0 0 0.25em var(--widget-lighter),
      51em 0 0 0.25em var(--widget-lighter),
      52em 0 0 0.25em var(--widget-lighter),
      53em 0 0 0.25em var(--widget-lighter),
      54em 0 0 0.25em var(--widget-lighter),
      55em 0 0 0.25em var(--widget-lighter),
      56em 0 0 0.25em var(--widget-lighter),
      57em 0 0 0.25em var(--widget-lighter),
      58em 0 0 0.25em var(--widget-lighter),
      59em 0 0 0.25em var(--widget-lighter),
      60em 0 0 0.25em var(--widget-lighter),
      61em 0 0 0.25em var(--widget-lighter),
      62em 0 0 0.25em var(--widget-lighter),
      63em 0 0 0.25em var(--widget-lighter),
      64em 0 0 0.25em var(--widget-lighter),
      65em 0 0 0.25em var(--widget-lighter),
      66em 0 0 0.25em var(--widget-lighter),
      67em 0 0 0.25em var(--widget-lighter),
      68em 0 0 0.25em var(--widget-lighter),
      69em 0 0 0.25em var(--widget-lighter),
      70em 0 0 0.25em var(--widget-lighter),
      71em 0 0 0.25em var(--widget-lighter),
      72em 0 0 0.25em var(--widget-lighter),
      73em 0 0 0.25em var(--widget-lighter),
      74em 0 0 0.25em var(--widget-lighter),
      75em 0 0 0.25em var(--widget-lighter),
      76em 0 0 0.25em var(--widget-lighter);
}

#extension-dashboard-content input[type="range"][disabled]::-webkit-slider-thumb {
	background: var(--light); 
	/*inset .8em .8em 5px -8px rgba(255, 255, 255, .1),*/
	box-shadow: inset -1.5em 0 0.5em -0.25em var(--light),
       1em 0 0 0.25em var(--widget-lighter),
       2em 0 0 0.25em var(--widget-lighter),
       3em 0 0 0.25em var(--widget-lighter),
       4em 0 0 0.25em var(--widget-lighter),
       5em 0 0 0.25em var(--widget-lighter),
       6em 0 0 0.25em var(--widget-lighter),
       7em 0 0 0.25em var(--widget-lighter),
       8em 0 0 0.25em var(--widget-lighter),
       9em 0 0 0.25em var(--widget-lighter),
      10em 0 0 0.25em var(--widget-lighter),
      11em 0 0 0.25em var(--widget-lighter),
      12em 0 0 0.25em var(--widget-lighter),
      12em 0 0 0.25em var(--widget-lighter),
      13em 0 0 0.25em var(--widget-lighter),
      14em 0 0 0.25em var(--widget-lighter),
      15em 0 0 0.25em var(--widget-lighter),
      16em 0 0 0.25em var(--widget-lighter),
      17em 0 0 0.25em var(--widget-lighter),
      18em 0 0 0.25em var(--widget-lighter),
      19em 0 0 0.25em var(--widget-lighter),
      20em 0 0 0.25em var(--widget-lighter),
      21em 0 0 0.25em var(--widget-lighter),
      22em 0 0 0.25em var(--widget-lighter),
      23em 0 0 0.25em var(--widget-lighter),
      24em 0 0 0.25em var(--widget-lighter),
      25em 0 0 0.25em var(--widget-lighter),
      26em 0 0 0.25em var(--widget-lighter),
      27em 0 0 0.25em var(--widget-lighter),
      28em 0 0 0.25em var(--widget-lighter),
      29em 0 0 0.25em var(--widget-lighter),
      30em 0 0 0.25em var(--widget-lighter),
      31em 0 0 0.25em var(--widget-lighter),
      32em 0 0 0.25em var(--widget-lighter),
      33em 0 0 0.25em var(--widget-lighter),
      34em 0 0 0.25em var(--widget-lighter),
      35em 0 0 0.25em var(--widget-lighter),
      36em 0 0 0.25em var(--widget-lighter),
      37em 0 0 0.25em var(--widget-lighter),
      38em 0 0 0.25em var(--widget-lighter),
      39em 0 0 0.25em var(--widget-lighter),
      40em 0 0 0.25em var(--widget-lighter),
      41em 0 0 0.25em var(--widget-lighter),
      42em 0 0 0.25em var(--widget-lighter),
      43em 0 0 0.25em var(--widget-lighter),
      44em 0 0 0.25em var(--widget-lighter),
      45em 0 0 0.25em var(--widget-lighter),
      46em 0 0 0.25em var(--widget-lighter),
      47em 0 0 0.25em var(--widget-lighter),
      48em 0 0 0.25em var(--widget-lighter),
      49em 0 0 0.25em var(--widget-lighter),
      50em 0 0 0.25em var(--widget-lighter),
      51em 0 0 0.25em var(--widget-lighter),
      52em 0 0 0.25em var(--widget-lighter),
      53em 0 0 0.25em var(--widget-lighter),
      54em 0 0 0.25em var(--widget-lighter),
      55em 0 0 0.25em var(--widget-lighter),
      56em 0 0 0.25em var(--widget-lighter),
      57em 0 0 0.25em var(--widget-lighter),
      58em 0 0 0.25em var(--widget-lighter),
      59em 0 0 0.25em var(--widget-lighter),
      60em 0 0 0.25em var(--widget-lighter),
      61em 0 0 0.25em var(--widget-lighter),
      62em 0 0 0.25em var(--widget-lighter),
      63em 0 0 0.25em var(--widget-lighter),
      64em 0 0 0.25em var(--widget-lighter),
      65em 0 0 0.25em var(--widget-lighter),
      66em 0 0 0.25em var(--widget-lighter),
      67em 0 0 0.25em var(--widget-lighter),
      68em 0 0 0.25em var(--widget-lighter),
      69em 0 0 0.25em var(--widget-lighter),
      70em 0 0 0.25em var(--widget-lighter),
      71em 0 0 0.25em var(--widget-lighter),
      72em 0 0 0.25em var(--widget-lighter),
      73em 0 0 0.25em var(--widget-lighter),
      74em 0 0 0.25em var(--widget-lighter),
      75em 0 0 0.25em var(--widget-lighter),
      76em 0 0 0.25em var(--widget-lighter);
}



#extension-dashboard-content input[type="range"]::-moz-range-thumb{
	appearance: none;
    -webkit-appearance: none;
    width: 3em;
    height: 3em;
    margin: 0;
    background: var(--extension-dashboard-widget-editable-text-color); 
    border-radius: 100%;
    cursor: pointer;
	
    background:
		radial-gradient(circle at 0.75em 0.6em, var(--light) calc(0.2em - 1px), #0000 0.2em),
		linear-gradient(90deg, #0000 0.75em, var(--extension-dashboard-widget-editable-text-color) 0) 0 0 / 100% 50% no-repeat;
	
	background:  var(--extension-dashboard-widget-editable-text-color);
    
	box-shadow: 
	inset .8em .8em 5px -8px rgba(255, 255, 255, .1),
      inset -1.5em 0 0.5em -0.25em var(--extension-dashboard-widget-editable-text-color),
       1em 0 0 0.25em var(--widget-lighter),
       2em 0 0 0.25em var(--widget-lighter),
       3em 0 0 0.25em var(--widget-lighter),
       4em 0 0 0.25em var(--widget-lighter),
       5em 0 0 0.25em var(--widget-lighter),
       6em 0 0 0.25em var(--widget-lighter),
       7em 0 0 0.25em var(--widget-lighter),
       8em 0 0 0.25em var(--widget-lighter),
       9em 0 0 0.25em var(--widget-lighter),
      10em 0 0 0.25em var(--widget-lighter),
      11em 0 0 0.25em var(--widget-lighter),
      12em 0 0 0.25em var(--widget-lighter),
      12em 0 0 0.25em var(--widget-lighter),
      13em 0 0 0.25em var(--widget-lighter),
      14em 0 0 0.25em var(--widget-lighter),
      15em 0 0 0.25em var(--widget-lighter),
      16em 0 0 0.25em var(--widget-lighter),
      17em 0 0 0.25em var(--widget-lighter),
      18em 0 0 0.25em var(--widget-lighter),
      19em 0 0 0.25em var(--widget-lighter),
      20em 0 0 0.25em var(--widget-lighter),
      21em 0 0 0.25em var(--widget-lighter),
      22em 0 0 0.25em var(--widget-lighter),
      23em 0 0 0.25em var(--widget-lighter),
      24em 0 0 0.25em var(--widget-lighter),
      25em 0 0 0.25em var(--widget-lighter),
      26em 0 0 0.25em var(--widget-lighter),
      27em 0 0 0.25em var(--widget-lighter),
      28em 0 0 0.25em var(--widget-lighter),
      29em 0 0 0.25em var(--widget-lighter),
      30em 0 0 0.25em var(--widget-lighter),
      31em 0 0 0.25em var(--widget-lighter),
      32em 0 0 0.25em var(--widget-lighter),
      33em 0 0 0.25em var(--widget-lighter),
      34em 0 0 0.25em var(--widget-lighter),
      35em 0 0 0.25em var(--widget-lighter),
      36em 0 0 0.25em var(--widget-lighter),
      37em 0 0 0.25em var(--widget-lighter),
      38em 0 0 0.25em var(--widget-lighter),
      39em 0 0 0.25em var(--widget-lighter),
      40em 0 0 0.25em var(--widget-lighter),
      41em 0 0 0.25em var(--widget-lighter),
      42em 0 0 0.25em var(--widget-lighter),
      43em 0 0 0.25em var(--widget-lighter),
      44em 0 0 0.25em var(--widget-lighter),
      45em 0 0 0.25em var(--widget-lighter),
      46em 0 0 0.25em var(--widget-lighter),
      47em 0 0 0.25em var(--widget-lighter),
      48em 0 0 0.25em var(--widget-lighter),
      49em 0 0 0.25em var(--widget-lighter),
      50em 0 0 0.25em var(--widget-lighter),
      51em 0 0 0.25em var(--widget-lighter),
      52em 0 0 0.25em var(--widget-lighter),
      53em 0 0 0.25em var(--widget-lighter),
      54em 0 0 0.25em var(--widget-lighter),
      55em 0 0 0.25em var(--widget-lighter),
      56em 0 0 0.25em var(--widget-lighter);
}




/*  vertical range slider */

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-property-slider input[type=range],
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-allow-vertical-slider-if-thin input[type=range],
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"]:not([gs-w]) .extension-dashboard-widget-allow-vertical-slider-if-thin-above-h2 input[type=range],
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h="4"]:not([gs-w]) .extension-dashboard-widget-allow-vertical-slider-if-thin-above-h2 input[type=range]{
	width:auto;
	writing-mode: vertical-lr;
	direction: rtl;
	flex-grow:1;
	height:100%;
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-property-slider input[type=range]::-webkit-slider-thumb,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-allow-vertical-slider-if-thin input[type=range]::-webkit-slider-thumb,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"]:not([gs-w]) .extension-dashboard-widget-allow-vertical-slider-if-thin-above-h2 input[type=range]::-webkit-slider-thumb,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h="4"]:not([gs-w]) .extension-dashboard-widget-allow-vertical-slider-if-thin-above-h2 input[type=range]::-webkit-slider-thumb{
	box-shadow: 
	inset .8em .8em 5px -8px rgba(255, 255, 255, .1),
      inset -1.5em 0 0.5em -0.25em var(--extension-dashboard-widget-editable-text-color),
       0 -1em 0 0.25em var(--widget-lighter),
       0 -2em 0 0.25em var(--widget-lighter),
       0 -3em 0 0.25em var(--widget-lighter),
       0 -4em 0 0.25em var(--widget-lighter),
       0 -5em 0 0.25em var(--widget-lighter),
       0 -6em 0 0.25em var(--widget-lighter),
       0 -7em 0 0.25em var(--widget-lighter),
       0 -8em 0 0.25em var(--widget-lighter),
       0 -9em 0 0.25em var(--widget-lighter),
      0 -10em 0 0.25em var(--widget-lighter),
      0 -11em 0 0.25em var(--widget-lighter),
      0 -12em 0 0.25em var(--widget-lighter),
      0 -12em 0 0.25em var(--widget-lighter),
      0 -13em 0 0.25em var(--widget-lighter),
      0 -14em 0 0.25em var(--widget-lighter),
      0 -15em 0 0.25em var(--widget-lighter),
      0 -16em 0 0.25em var(--widget-lighter),
      0 -17em 0 0.25em var(--widget-lighter),
      0 -18em 0 0.25em var(--widget-lighter),
      0 -19em 0 0.25em var(--widget-lighter),
      0 -20em 0 0.25em var(--widget-lighter),
      0 -21em 0 0.25em var(--widget-lighter),
      0 -22em 0 0.25em var(--widget-lighter),
      0 -23em 0 0.25em var(--widget-lighter),
      0 -24em 0 0.25em var(--widget-lighter),
      0 -25em 0 0.25em var(--widget-lighter),
      0 -26em 0 0.25em var(--widget-lighter),
      0 -27em 0 0.25em var(--widget-lighter),
      0 -28em 0 0.25em var(--widget-lighter),
      0 -29em 0 0.25em var(--widget-lighter),
      0 -30em 0 0.25em var(--widget-lighter),
      0 -31em 0 0.25em var(--widget-lighter),
      0 -32em 0 0.25em var(--widget-lighter),
      0 -33em 0 0.25em var(--widget-lighter),
      0 -34em 0 0.25em var(--widget-lighter),
      0 -35em 0 0.25em var(--widget-lighter),
      0 -36em 0 0.25em var(--widget-lighter),
      0 -37em 0 0.25em var(--widget-lighter),
      0 -38em 0 0.25em var(--widget-lighter),
      0 -39em 0 0.25em var(--widget-lighter),
      0 -40em 0 0.25em var(--widget-lighter),
      0 -41em 0 0.25em var(--widget-lighter),
      0 -42em 0 0.25em var(--widget-lighter),
      0 -43em 0 0.25em var(--widget-lighter),
      0 -44em 0 0.25em var(--widget-lighter),
      0 -45em 0 0.25em var(--widget-lighter),
      0 -46em 0 0.25em var(--widget-lighter),
      0 -47em 0 0.25em var(--widget-lighter),
      0 -48em 0 0.25em var(--widget-lighter),
      0 -49em 0 0.25em var(--widget-lighter),
      0 -50em 0 0.25em var(--widget-lighter),
      0 -51em 0 0.25em var(--widget-lighter),
      0 -52em 0 0.25em var(--widget-lighter),
      0 -53em 0 0.25em var(--widget-lighter),
      0 -54em 0 0.25em var(--widget-lighter),
      0 -55em 0 0.25em var(--widget-lighter),
      0 -56em 0 0.25em var(--widget-lighter),
      0 -57em 0 0.25em var(--widget-lighter),
      0 -58em 0 0.25em var(--widget-lighter),
      0 -59em 0 0.25em var(--widget-lighter),
      0 -60em 0 0.25em var(--widget-lighter),
      0 -61em 0 0.25em var(--widget-lighter),
      0 -62em 0 0.25em var(--widget-lighter),
      0 -63em 0 0.25em var(--widget-lighter),
      0 -64em 0 0.25em var(--widget-lighter),
      0 -65em 0 0.25em var(--widget-lighter),
      0 -66em 0 0.25em var(--widget-lighter),
      0 -67em 0 0.25em var(--widget-lighter),
      0 -68em 0 0.25em var(--widget-lighter),
      0 -69em 0 0.25em var(--widget-lighter),
      0 -70em 0 0.25em var(--widget-lighter),
      0 -71em 0 0.25em var(--widget-lighter),
      0 -72em 0 0.25em var(--widget-lighter),
      0 -73em 0 0.25em var(--widget-lighter),
      0 -74em 0 0.25em var(--widget-lighter),
      0 -75em 0 0.25em var(--widget-lighter),
      0 -76em 0 0.25em var(--widget-lighter);
}












/*   TEXT  WIDGET   */

.extension-dashboard-widget-text{
	padding:1.5rem;
	box-sizing:border-box;
	overflow:auto;
}

.extension-dashboard-widget-large_title-needs-rename{
	color:white;
	font-weight:100;
}

.extension-dashboard-widget-additional_text-needs-rename{
	line-height:150%;
	color: #444;
}

.extension-dashboard-widget-large_title-needs-rename:empty,
.extension-dashboard-widget-additional_text-needs-rename:empty{
	display:none;
}

.extension-dashboard-widget-link-needs-rename{
	width:0;
	height:0;
}

.extension-dashboard-is-link{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	box-sizing: border-box;
	cursor:pointer;
	background-image:url('/images/link-icon.svg');
	background-repeat: no-repeat;
	background-position: top right;
	background-size:50px;
}

.extension-dashboard-is-link:hover{
	background-color:rgba(0,0,0,.1);
}

.extension-dashboard-widget-double-property-switch,
.extension-dashboard-widget-transparent-text{
	background:none!important;
	box-shadow:none!important;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="2"] .extension-dashboard-widget-transparent-text,
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="4"] .extension-dashboard-widget-transparent-text,
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="5"] .extension-dashboard-widget-transparent-text{
	padding:0;
	border-radius:0;
	display:flex;
	align-items:end;
}
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="2"] .extension-dashboard-widget-transparent-text > h2,
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="4"] .extension-dashboard-widget-transparent-text > h2,
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="5"] .extension-dashboard-widget-transparent-text > h2{
	margin:0;
}
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="2"] .extension-dashboard-widget-transparent-text > h2 + p:not(:empty),
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="4"] .extension-dashboard-widget-transparent-text > h2 + p:not(:empty),
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="5"] .extension-dashboard-widget-transparent-text > h2 + p:not(:empty){
	margin-top:1rem;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="4"] .extension-dashboard-widget-transparent-text > h2,
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="5"] .extension-dashboard-widget-transparent-text > h2{
	font-size:4rem;
}


.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="6"] .extension-dashboard-widget-transparent-text{
	padding:0;
}
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="6"] .extension-dashboard-widget-transparent-text > h2{
	font-size:6rem;
	padding:0;
	margin:0;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="8"] .extension-dashboard-widget-transparent-text{
	padding:0;
	display:flex;
	align-items:center;
	justify-content:center;
}
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="8"] .extension-dashboard-widget-transparent-text > h2{
	font-size:4rem;
	padding:0;
	margin:0;
}



/*   STICKY NOTE  */

.extension-dashboard-widget-sticky-note{
	border-radius:0!important;
}
.extension-dashboard-widget-sticky-note textarea{
	width:100%;
	height:100%;
	padding:1.5rem;
	outline:none;
	line-height: 150%;
	background-color:#fdfdca;
	resize: none;
}

.extension-dashboard-editing .extension-dashboard-widget-sticky-note textarea{
	pointer-events:none;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h][gs-w] .extension-dashboard-widget-sticky-note textarea{
	font-size:2rem;
	padding:3rem;
}












/*   LOGS   */


.extension-dashboard-widget-log strong{
	padding:1.5rem 1rem 0 1.5rem;
	display:block;
	font-weight:100;
}
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w]) .extension-dashboard-widget-log strong{
	font-size:1.3rem;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h] .extension-dashboard-widget-log strong{
	padding-bottom:1.5rem;
}

.extension-dashboard-widget-log strong:empty{
	display:none;
}

.extension-dashboard-widget-log svg{
    --extension-dashboard-widget-log-base: var(--extension-dashboard-widget-text-color); 
    --extension-dashboard-widget-log-red: color-mix(in sRGB, var(--extension-dashboard-widget-log-base) 50%, #F00);
	--extension-dashboard-widget-log-green: color-mix(in sRGB, var(--extension-dashboard-widget-log-base) 50%, #0F0);
	--extension-dashboard-widget-log-blue: color-mix(in sRGB, var(--extension-dashboard-widget-log-base) 50%, #00F);
	/*width:calc(100% - 3rem);*/
	max-width:100%;
	max-height:100%;
	box-sizing:border-box;
	
}

.developer .extension-dashboard-widget-log svg{
	border:1px solid rgba(0,0,0,.05);
}

.extension-dashboard-widget-log_source-needs-log{
	min-width:100px;
	min-height:100px;
	width:100%;
	height:calc(100% - 40px);
	box-sizing:border-box;
}

.extension-dashboard-widget-log-time-description{
	padding:1rem 1.5rem;
	margin:0;
	font-size: 80%;
	font-style:italic;
	text-align:center;
	display:none;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w="3"]) .extension-dashboard-widget-log-time-description{
	display:none;
}


.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="3"] .extension-dashboard-widget-log-time-description,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h][gs-w="4"] .extension-dashboard-widget-log-time-description,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h][gs-w="5"] .extension-dashboard-widget-log-time-description,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h][gs-w="6"] .extension-dashboard-widget-log-time-description{
	position:absolute;
	top:0;
	right:0;
	padding:1.5rem 2rem;
}

.extension-dashboard-widget-log-viz{
	height:100%;
	flex-grow:1;
	flex-shrink:1;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h][gs-w] .extension-dashboard-widget-log-viz > svg{
	height:100%;
	flex-grow:1;
	padding:1.5rem;
}

.tick{
	stroke:#0c3b5c;
}

.extension-dashboard-x-tick,
.extension-dashboard-y-tick{
	/*font-size:14px;*/
	font-weight: 100;
	color:var(--extension-dashboard-widget-text-color);
	fill:var(--extension-dashboard-widget-text-color);
	stroke:var(--extension-dashboard-widget-text-color);
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h][gs-w] .extension-dashboard-y-tick{
	/*font-size:1.4rem;*/
	font-weight: 100;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="4"] .extension-dashboard-x-tick,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="5"] .extension-dashboard-x-tick,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="6"] .extension-dashboard-x-tick{
	font-size:1.4rem;
	font-weight: 100;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"] .extension-dashboard-y-tick,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="4"] .extension-dashboard-y-tick,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="5"] .extension-dashboard-y-tick,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h][gs-w="5"] .extension-dashboard-x-tick,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="7"] .extension-dashboard-x-tick,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="8"] .extension-dashboard-x-tick{
	font-size:1.6rem;
}


.extension-dashboard-widget-log-bar-bar{
	fill:var(--extension-dashboard-background-color);
}


/* second log comparison */
.extension-dashboard-second-y-tick,
.extension-dashboard-second-y-axis > .domain,
.extension-dashboard-second-y-axis-label,
.extension-dashboard-widget-second-log-line{
	stroke: var(--extension-dashboard-widget-log-blue)!important;
}

.extension-dashboard-y-axis-label{
	font-weight:100;
	font-size:80%;
}



/*
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w]) .tick:nth-child(even){
	display:none;
}


.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w]) .tick:nth-child(even){
	display:none;
}
*/
.extension-dashboard-x-tick{
	font-weight:100;
}


.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]) .extension-dashboard-widget-checkbox-toggle-checked-content .tick:nth-child(even) .extension-dashboard-x-tick{
	display:none;
}


g.extension-dashboard-log-tooltip-data-container{
	opacity:0;
	/*transition-delay: 3s;
	transition: opacity .2s linear;*/
}

.extension-dashboard-log-precision-years g.extension-dashboard-log-tooltip-data-container,
.extension-dashboard-log-precision-two-years g.extension-dashboard-log-tooltip-data-container,
.extension-dashboard-log-precision-year g.extension-dashboard-log-tooltip-data-container,
.extension-dashboard-log-precision-quarter g.extension-dashboard-log-tooltip-data-container,
.extension-dashboard-log-precision-month g.extension-dashboard-log-tooltip-data-container,
.extension-dashboard-log-precision-week g.extension-dashboard-log-tooltip-data-container,
.extension-dashboard-log-precision-day g.extension-dashboard-log-tooltip-data-container,
.extension-dashboard-log-precision-hour g.extension-dashboard-log-tooltip-data-container,
.extension-dashboard-log-precision-hours g.extension-dashboard-log-tooltip-data-container,
.extension-dashboard-log-precision-minute g.extension-dashboard-log-tooltip-data-container{
	opacity:1;
	transition-delay: 3s;
	/*transition: opacity .5s linear;*/
}


g.extension-dashboard-log-tooltip-data-container > rect{
	opacity:0;
}
.extension-dashboard-logging-unblur g.extension-dashboard-log-tooltip-data-container > rect{
	opacity:.2;
}


.extension-dashboard-logging-log-property-container:not(.extension-dashboard-log-precision-minute) .extension-dashboard-widget-log-time-minute-description,
.extension-dashboard-logging-log-property-container:not(.extension-dashboard-log-precision-hour) .extension-dashboard-widget-log-time-hour-description,
.extension-dashboard-log-precision-hour .extension-dashboard-widget-log-time-minute-description,
.extension-dashboard-log-precision-minute .extension-dashboard-widget-log-time-hour-description{
	display:none;
}

.extension-dashboard-widget-log-change-buttons-container{
	height:50px;
	width:100%;
	background-color:transparent;
	cursor:pointer;
	display:flex;
	justify-content: flex-end;
	z-index:2;
	overflow:hidden;
}

.grid-stack-item .extension-dashboard-widget-log-change-buttons-container{
	position:absolute;
	bottom:0;
	left:0;
}

#extension-dashboard-content:not(.extension-dashboard-editing) .grid-stack-item .extension-dashboard-widget-log-change-buttons-container{
	display:none;
}




.extension-dashboard-widget-log-change-button{
	margin: .5rem;
	padding:1rem 1.5rem;
	border-radius:.5rem 1rem;
	border-radius:1rem;
	background-color: rgba(0, 0, 0, .1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.extension-dashboard-widget-log-change-button:hover{
	background-color: rgba(0, 0, 0, .3);
}

.grid-stack-item .extension-dashboard-widget-log-change-button{
	padding:.5rem 1rem;
}

.grid-stack-item .extension-dashboard-widget-log-change-buttons-container{
	padding-right:.5rem;
	height:auto;
	bottom:30px;
}

/*
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h] .extension-dashboard-widget-log-change-buttons-container{
	bottom:30px;
}
*/

#extension-dashboard-content .grid-stack-item .extension-dashboard-logging-privacy-container{
	height:50px;
	padding-right:1rem;
}
#extension-dashboard-content .grid-stack-item .extension-dashboard-logging-property-privacy-button{
	height:25px;
	width:25px;
	display:none;
}
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"] .extension-dashboard-logging-last-viewed-time::before,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="4"] .extension-dashboard-logging-last-viewed-time::before,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="5"] .extension-dashboard-logging-last-viewed-time::before{
	content:"👁️ ";
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="6"] .extension-dashboard-logging-last-viewed-time::before,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="7"] .extension-dashboard-logging-last-viewed-time::before{
	content:"Last viewed: ";
}


.extension-dashboard-widget-log-change-button:hover ~ svg .extension-dashboard-x-tick{
	font-weight:bold;
}

.extension-dashboard-log-precision-years .extension-dashboard-widget-log-change-button-years,
.extension-dashboard-log-precision-two-years .extension-dashboard-widget-log-change-button-two-years,
.extension-dashboard-log-precision-year .extension-dashboard-widget-log-change-button-year,
.extension-dashboard-log-precision-quarter .extension-dashboard-widget-log-change-button-quarter,
.extension-dashboard-log-precision-month .extension-dashboard-widget-log-change-button-month,
.extension-dashboard-log-precision-week .extension-dashboard-widget-log-change-button-week,
.extension-dashboard-log-precision-day .extension-dashboard-widget-log-change-button-day,
.extension-dashboard-log-precision-hour .extension-dashboard-widget-log-change-button-hour,
.extension-dashboard-log-precision-hours .extension-dashboard-widget-log-change-button-hours,
.extension-dashboard-log-precision-minute .extension-dashboard-widget-log-change-button-minute,
.extension-dashboard-log-precision-now .extension-dashboard-widget-log-change-button-now{
	background-color:rgba(0,0,0,.5);
	color:white;
}





/*
.extension-dashboard-log-tooltip-data-container > .extension-dashboard-log-tooltip-data-container{
	opacity:1;
}
*/
/*.extension-dashboard-log-tooltip-data-container > rect:hover,*/
.extension-dashboard-logging-unblur .extension-dashboard-log-tooltip-data:hover{
	opacity:1;
	cursor: crosshair;
}

#extension-dashboard-log-tooltip{
	position:fixed;
	z-index:3;
	background-color:white;
	padding:5px;
	border-radius:5px;
	font-size:80%;
	opacity:0;
	pointer-events:none;
}


.extension-dashboard-widget-log .extension-dashboard-widget-checkbox-toggle-unchecked-content,
.extension-dashboard-widget-log .extension-dashboard-widget-checkbox-toggle-unchecked-content{
	width:100%;
	max-height:100%;
}
.extension-dashboard-widget-log svg{
	width:100%;
	height:100%;
}

.extension-dashboard-widget-log .extension-dashboard-style-invisible-overlay{
	top:0; height:5rem;
}
.extension-dashboard-widget-log .extension-dashboard-style-invisible-overlay:hover{
	background-color:rgba(0,0,0,.1);
}




/*   THERMOSTAT  */

#extension-dashboard-content .extension-dashboard-widget-setpoint-needs-update{
	background-color:transparent;
	width:70px;
    /*color: #ff574e;*/
	color: var(--extension-dashboard-widget-editable-text-color);
    font-weight: bold;
	font-size:3rem;
	padding:1rem 0 1rem .5rem;
}


#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"]:not([gs-h]) .extension-dashboard-widget-setpoint-needs-update{
	font-size:4rem;
	width: 94px;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"][gs-h="2"] .extension-dashboard-widget-thermostat-mode:not(:empty){
	flex-wrap:nowrap;
	position:relative;
	top:-0.5rem;
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"] .extension-dashboard-widget-thermostat-mode:not(:empty) > li,
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]) .extension-dashboard-widget-thermostat-mode:not(:empty) > li{
	margin:0 .5rem 0 0;
	padding:0.5rem 1rem;
	font-size:80%;
	
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"][gs-h="2"] .extension-dashboard-widget-thermostat-mode:not(:empty) + .extension-dashboard-widget-dial-name-container{
	font-size:80%;
	padding-top:.5rem;
}


body.developer .extension-dashboard-widget-thermostat input:invalid{
	border:1px solid red;
}
/*
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"]:not([gs-h]) .extension-dashboard-widget-thermostat{
	padding-bottom:2rem;
}
*/

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w]) .extension-dashboard-widget-thermostat{
	overflow:visible;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w]) .extension-dashboard-widget-thermostat .extension-dashboard-widget-dial-name-container{
	display:none;
}
/*
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w]) .extension-dashboard-widget-thermostat-setpoint-buttons > div{
	background-color:#cad3db;
}
*/

.extension-dashboard-widget-thermostat-setpoint-buttons > div{
	display:flex;
	align-items:center;
	justify-content:center;
}
.extension-dashboard-widget-thermostat-setpoint-buttons{
	font-size:150%;
}
.extension-dashboard-widget-thermostat-setpoint-buttons .extension-dashboard-widget-decrease-last-number-input > div{
	padding-bottom:10%;
}


.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="2"][gs-w="2"] .extension-dashboard-widget-thermostat-setpoint-buttons .extension-dashboard-widget-decrease-last-number-input,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"][gs-w="3"] .extension-dashboard-widget-thermostat-setpoint-buttons .extension-dashboard-widget-decrease-last-number-input{
	padding-left: 20%;
    padding-bottom: 10%;
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="2"][gs-w="2"] .extension-dashboard-widget-thermostat-setpoint-buttons .extension-dashboard-widget-increase-last-number-input,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"][gs-w="3"] .extension-dashboard-widget-thermostat-setpoint-buttons .extension-dashboard-widget-increase-last-number-input{
	padding-right: 20%;
    padding-bottom: 10%;
}

/*
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w]) .extension-dashboard-widget-setpoint-degrees,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="2"][gs-w="2"] .extension-dashboard-widget-setpoint-degrees,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"][gs-w="3"] .extension-dashboard-widget-setpoint-degrees{
	display:none;
}
*/

.extension-dashboard-widget-setpoint-degrees{
	display:none;
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w]) .extension-dashboard-widget-setpoint-needs-update{
	text-align:center;
	margin-left:0;
	padding:.5rem;
	font-size:3rem;
	width:75px;
}



.extension-dashboard-widget-thermostat-setpoint-display{
	flex-grow:1;
	height:100%;
}

.extension-dashboard-widget-setpoint-degrees{
    position: relative;
    left: -2rem;
	top:-1rem;
	color:red;
	pointer-events:none;
}


.grid-stack-item-content .extension-dashboard-widget-thermostat {
	box-sizing:border-box;
}

.extension-dashboard-widget-thermostat strong{
	display:flex;
	align-items:center;
	justify-content:center;
}
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]) .extension-dashboard-widget-thermostat strong{
	flex-direction:column;
}

.extension-dashboard-widget-thermostat strong,
.extension-dashboard-widget-setpoint-container{
	font-size:2rem;
	box-sizing:border-box;
}

.extension-dashboard-widget-setpoint-container{
	white-space:nowrap;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-thermostat-setpoint-display > strong{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content: space-evenly;
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"]:not([gs-w]) .extension-dashboard-widget-thermostat-setpoint-display > strong *{
	font-size:3rem;
}


.extension-dashboard-widget-temperature-value{
	white-space:nowrap;
}

.extension-dashboard-widget-temperature-value,
.extension-dashboard-widget-setpoint-needs-update{
	font-weight:100;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w] .extension-dashboard-widget-temperature-value{
	max-width:83px;
	display:inline-block;
	overflow:hidden;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-temperature-value{
	max-width:90px;
}

.extension-dashboard-widget-setpoint-arrow{
	display:inline-block;
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w] .extension-dashboard-widget-setpoint-arrow{
	padding: 1rem .5rem 1rem 1rem;
}


.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-widget-temperature-needs-update{
	display:inline-block;
	/*font-size:6rem;*/
}



.extension-dashboard-widget-temperature-needs-update::after{
	content:"°";
	opacity:.8;
	font-weight:100;
	position:absolute;
	font-size:70%;
}


.grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-temperature-value,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-setpoint-needs-update{
	font-size:3rem;
	font-weight:100;
	padding: 1rem 0 1rem .5rem;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-temperature-value,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"]:not([gs-w]) .extension-dashboard-widget-thermostat-setpoint-display > strong *,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-setpoint-needs-update,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-setpoint-container,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-temperature-value{
	font-size:4rem;
	font-weight:100;
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h][gs-w] .extension-dashboard-widget-temperature-value,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h][gs-w] .extension-dashboard-widget-setpoint-needs-update,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h][gs-w] .extension-dashboard-widget-setpoint-container{
	font-size:4.5rem;
	font-weight:bold;
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"][gs-w="3"] .extension-dashboard-widget-temperature-value{
	font-size:8rem;
	max-width: 160px;
	font-weight:100;
}
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"][gs-w="3"] .extension-dashboard-widget-setpoint-needs-update{
	font-size:8rem;
	width:175px;
	font-weight:100;
}

/*
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w] .extension-dashboard-widget-setpoint-needs-update,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h] .extension-dashboard-widget-setpoint-needs-update{
	font-size:260%;
	width:100px;
	height:120px;
}
*/

/*
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-temperature-value{
	font-size:250%;
}
*/

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h] .extension-dashboard-widget-setpoint-needs-update{
	width:105px;
	/*height:80px;*/
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-setpoint-needs-update{
	width:100%;
	text-align:center;
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-setpoint-degrees{
	display:none;
}

.extension-dashboard-widget-thermostat-setpoint-buttons{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	width:100%;
	position:absolute;
	bottom:0;
	pointer-events:none;
}

.extension-dashboard-editing .extension-dashboard-widget-thermostat-setpoint-buttons{
	pointer-events:none;
}

.extension-dashboard-widget-thermostat-setpoint-buttons > div{
	padding:10px;
	pointer-events:auto;
	z-index:5;
	cursor:pointer;
}
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w]) .extension-dashboard-widget-thermostat-setpoint-buttons > div{
	padding:1px;
}

.extension-dashboard-widget-thermostat-setpoint-buttons > div > div{
	width:45px;
	height:45px;
	border-radius:20px;
	/*background-color:rgba(255,255,255,.2);*/
	background-color:var(--extension-dashboard-widget-background-color);
	box-shadow: 1px 0 10px 10px rgba(0, 0, 0, 0.04);
	border: 1px solid transparent;
	line-height: 0;
	color:var(--extension-dashboard-widget-editable-text-color);
}
/*
.extension-dashboard-widget-thermostat-setpoint-buttons > div:active{
	border: 1px solid var(--extension-dashboard-widget-editable-text-color);
	transform: scale(1.1);
	transition: scale .1s ease-out;
}
*/

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w] .extension-dashboard-widget-thermostat-setpoint-buttons > div > div{
	width:65px;
	height:65px;
	border-radius:35px;
	user-select: none;
	font-size:4rem;
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"][gs-h="3"] .extension-dashboard-widget-thermostat-setpoint-buttons > div > div{
	width:90px;
	height:90px;
	border-radius:450px;
}

.extension-dashboard-widget-thermostat-setpoint-buttons > div:hover > div{
	background-color: var(--extension-dashboard-widget-editable-text-color)!important;
	color:white;
	font-size:130%;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]) .extension-dashboard-widget-thermostat .extension-dashboard-widget-split{
	flex-direction:column;
}


.extension-dashboard-widget-thermostat ul.extension-dashboard-widget-enum-list{
	padding:0 1.5rem;
}


/*  horizontal 'short' thermostat widgets  */


/* 2x1 */

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-thermostat .extension-dashboard-widget-dial{
	top: 115%;
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-setpoint-needs-update,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"]:not([gs-h]) .extension-dashboard-widget-thermostat .extension-dashboard-widget-temperature-value{
	font-size:3rem;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="4"][gs-h="2"] .extension-dashboard-widget-thermostat .extension-dashboard-widget-thermostat-setpoint-display,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-thermostat .extension-dashboard-widget-thermostat-setpoint-display{
	padding-top:10%;
	padding-left:5%;
}


/* 3x1 */

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"]:not([gs-h]) .extension-dashboard-widget-thermostat .extension-dashboard-widget-dial{
	top: 170%;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"][gs-h="2"] .extension-dashboard-widget-thermostat .extension-dashboard-widget-dial-ticks span.extension-dashboard-widget-dial-tick-even,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="4"][gs-h="2"] .extension-dashboard-widget-thermostat .extension-dashboard-widget-dial-ticks span.extension-dashboard-widget-dial-tick-even,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-thermostat .extension-dashboard-widget-dial-ticks span.extension-dashboard-widget-dial-tick-even{
    border-top:0;
	border-left: 4px solid rgba(255, 255, 255, .9);
    /*color: inherit;*/
    padding-left: 7px;
	font-size:1.2rem;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-thermostat .extension-dashboard-widget-dial-ticks span{
	border-left: 2px solid rgba(255, 255, 255, .9);
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"][gs-h="2"] .extension-dashboard-widget-thermostat .extension-dashboard-widget-thermostat-setpoint-buttons > div > div,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="4"][gs-h="2"] .extension-dashboard-widget-thermostat .extension-dashboard-widget-thermostat-setpoint-buttons > div > div,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-thermostat .extension-dashboard-widget-thermostat-setpoint-buttons > div > div{
	/*background-color: var(--extension-dashboard-widget-background-color);*/
	box-shadow: 1px 0 10px 10px rgba(0, 0, 0, 0.07);
}


/* 3x2 */


.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"][gs-h="2"] .extension-dashboard-widget-thermostat .extension-dashboard-widget-dial{
	top: 88%;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="4"][gs-h="2"] .extension-dashboard-widget-thermostat .extension-dashboard-widget-dial-ticks span,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"][gs-h="2"] .extension-dashboard-widget-thermostat .extension-dashboard-widget-dial-ticks span{
	border-left: 3px solid rgba(255, 255, 255, .9);
}


/* 4x2 */

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="4"][gs-h="2"] .extension-dashboard-widget-thermostat .extension-dashboard-widget-dial{
	top: 120%;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"][gs-h="2"] .extension-dashboard-widget-thermostat .extension-dashboard-widget-dial-ticks span.extension-dashboard-widget-dial-tick-even,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="4"][gs-h="2"] .extension-dashboard-widget-thermostat .extension-dashboard-widget-dial-ticks span.extension-dashboard-widget-dial-tick-even{
	font-size:2rem;
}


/* 5x2 */
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="5"][gs-h="2"] .extension-dashboard-widget-thermostat .extension-dashboard-widget-dial{
	top: 120%;
}

/*   VALUE DIAL   */

/*
.extension-dashboard-widget-dial-container {
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 1;
	pointer-events:none;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-widget-dial-container,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"][gs-h="2"] .extension-dashboard-widget-dial-container,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"][gs-h="3"] .extension-dashboard-widget-dial-container,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="4"][gs-h="4"] .extension-dashboard-widget-dial-container{
	display:initial;
    border-radius: 50%;
}

.extension-dashboard-widget-dial-container *::after,
.extension-dashboard-widget-dial-container *::before {
	box-sizing: border-box;
	transform-style: preserve-3d;
}
*/

.extension-dashboard-widget-dial {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    z-index: 2;
	pointer-events:none;
}

.extension-dashboard-widget-dial::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    /*
    background-image: linear-gradient(
      40deg,
      rgba(255, 255, 255, 0) 42%,
      rgba(255, 255, 255, 0.1) 44%,
      rgba(255, 255, 255, 0.15) 70%,
      rgba(255, 255, 255, 0) 72%
    );
  
  
    box-shadow: inset 0 14px 20px rgba(0, 0, 0, 0.15),
      inset 0 60px 40px 0px rgba(255, 255, 255, 0.25);
    */
    border-radius: 50%;
}

.extension-dashboard-widget-dial-notches {
	display:none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%) rotateZ(315deg);
    border-radius: 50%;
    /*border: 15px solid rgba(25, 125, 225, 0.75);*/
	border: 15px solid #018efd;
    border-bottom-color: transparent;
    /*border-right-color: rgba(225, 25, 25, 0.75);*/
    border-left-width: 0px;
}
.extension-dashboard-widget-dial-needle {
    position: absolute;
    transform-origin: 0% 50%;
    /*background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%, rgba(255,87,78, 1) 81%, rgba(255,87,78, 1) 95%);    rgb(249 113 1) */
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%, var(--extension-dashboard-widget-editable-text-color) 81%, var(--extension-dashboard-widget-editable-text-color) 100%);
    width: 52%;
    height: 10px;
    left: 50%;
    top: 50%;
    border-radius: 5px;
	transition: transform 1s ease-out;
}


/*  DIAL TICKS  */

.extension-dashboard-widget-dial-ticks{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index:3;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w]) .extension-dashboard-widget-dial{
    border-radius: 50%;
	overflow:hidden;
}
/*
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w]) .extension-dashboard-widget-dial-ticks{
	    border-radius: 50%;
		overflow:hidden;
}
*/

.extension-dashboard-widget-dial-ticks span {
    display: inline-block;
    position: absolute;
    top: 50%;
	left: 45%;
    width: 10%;
	height: 20px;
	font-size:1rem;
	font-weight:bold;
	pointer-events:all;
	border-top-right-radius:0px;
	border-bottom-right-radius:0px;
	/*clip-path: polygon(0% 0%, 100% 10%, 100% 90%, 0% 100%);*/
	/*
	clip-path: polygon(0% 0%, 100% 50%, 100% 50%, 0% 100%);
	
	clip-path: polygon(0% 0%, 100% 50%, 100% 50%, 0% 100%);
	
	clip-path: polygon(0% 20%, 100% 0%, 100% 100%, 0% 80%);
	
	overflow:visible;
	*/
}
.extension-dashboard-widget-dial-ticks:not(.extension-dashboard-widget-dial-disabled) span{
	cursor:pointer;
	pointer-events:all;
}

.extension-dashboard-widget-dial-ticks span.extension-dashboard-widget-dial-tick-even{
    border-top: 1px solid rgba(255, 255, 255, .9);
    color: inherit;
    font-size: 1rem;
    font-weight: 100;
}

.extension-dashboard-widget-dial-ticks span:not(.extension-dashboard-widget-dial-tick-even):last-of-type{
	border-bottom: 1px solid rgba(255, 255, 255, .9);
}


.extension-dashboard-widget-dial-ticks:not(.extension-dashboard-widget-dial-disabled) span:hover{
	background-color: var(--extension-dashboard-widget-editable-text-color);
	align-items:center;
	justify-content:center;
}

.extension-dashboard-widget-dial-ticks:not(.extension-dashboard-widget-dial-disabled) span.extension-dashboard-widget-dial-tick-even:hover{
	font-size:130%;
	text-align:center;
	color:white;
	/*height:25px;*/
	transform: scale(1.5);
	font-weight: bold;
}


.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-widget-dial-ticks span{
	font-size:50%;
	/*color:rgba(0,0,0,.4);*/
	top:45%;
}
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-widget-dial-ticks:not(.extension-dashboard-widget-dial-disabled) span:hover{
	font-size:80%;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"][gs-h="3"] .extension-dashboard-widget-dial-ticks span{
	font-size:1.6rem;
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"][gs-h="3"] .extension-dashboard-widget-dial-ticks:not(.extension-dashboard-widget-dial-disabled) span:hover{
	font-size:2.6rem;
}





/*  ROUND DIAL WIDGET  */


.extension-dashboard-widget-dial-name-container{
	position: absolute;
	top:0;
	padding: 1.5rem 1rem 0 1.5rem;
	font-weight:100;
	width:100%;
	max-width: 100%;
    max-height: 40%;
    overflow: hidden;
    box-sizing: border-box;
}
body:not(.developer) .extension-dashboard-widget-dial-name-container{
	pointer-events:none;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w]) .extension-dashboard-widget-dial-name-container{
	padding-top:0;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w]) .extension-dashboard-widget-round,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="2"][gs-w="2"] .extension-dashboard-widget-round,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"][gs-w="3"] .extension-dashboard-widget-round{
	border-radius:50%;
}


.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w]) .extension-dashboard-widget-round .extension-dashboard-widget-dial-name-container,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="2"][gs-w="2"] .extension-dashboard-widget-round .extension-dashboard-widget-dial-name-container,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"][gs-w="3"] .extension-dashboard-widget-round .extension-dashboard-widget-dial-name-container{
	/*
	padding:.5rem 1.5rem 1rem 1.5rem;
	bottom:0;
	text-align: center;
	height: 40%;
	*/
	text-align: center;
	position:initial;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w]) .extension-dashboard-widget-round.extension-dashboard-widget-thermostat .extension-dashboard-widget-dial-name-container,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="2"][gs-w="2"] .extension-dashboard-widget-round.extension-dashboard-widget-thermostat .extension-dashboard-widget-dial-name-container,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"][gs-w="3"] .extension-dashboard-widget-round.extension-dashboard-widget-thermostat .extension-dashboard-widget-dial-name-container{
	/*height: 43%;
	max-height: 43%;
	*/
	text-align: center;
	position:initial;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]):not([gs-w]) .extension-dashboard-widget-round .extension-dashboard-widget-dial-name-container{
	font-size:80%;
}




#extension-dashboard-content .extension-dashboard-widget-round-dial input{
	font-size:3rem;
	text-align:center;
	/*
	width: calc(80% - 4rem);
	max-width: calc(80% - 4rem);
	*/
	width: 100%;
	padding: 1.2rem 1.2rem;
	border-radius:1rem;
	color:inherit;
	z-index:4;
	background-color:transparent;
}

#extension-dashboard-content .extension-dashboard-widget-round-dial input:not([disabled]){
	/*background-color:#ebeff1;*/
	color:var(--extension-dashboard-widget-editable-text-color);
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h] .extension-dashboard-widget-round-dial input:not([disabled]){
	margin-bottom:1rem;
}


#extension-dashboard-content .extension-dashboard-widget-adjust-width-to-input-length{
	box-sizing:content-box;
}


#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w] .extension-dashboard-widget-round-dial input,
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h][gs-w] .extension-dashboard-widget-round-dial input{
	font-size:6rem;
	padding:2.5rem .5rem;
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-round-dial input{
	font-size:4rem;
	padding:1.5rem;
	max-width: calc(100% - 1.5rem);
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"][gs-w="3"] .extension-dashboard-widget-round-dial input{
	font-size:10rem;
	padding: 4rem 1.5rem;
}

.extension-dashboard-widget-round-dial .extension-dashboard-widget-dial-needle {
	/*
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, rgba(0,0,0, .8) 61%, rgba(0,0,0,.8) 95%);
    width: 52%;
    height: 2px;
    left: 50%;
    top: 50%;
    border-radius: 2px;
	*/
	
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, rgb(13 59 92) 61%, rgb(13 59 92) 74%);
    width: 40%;
    height: 5px;
    left: 50%;
    top: 50%;
    border-radius: 50%;
}



/*  DIAL widget's horizontal versions  */

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-round-dial .extension-dashboard-widget-thermostat-setpoint-display{
	position:absolute;
	height:auto;
	justify-content:flex-start;
	max-width:300px;
	top:1.5rem;
}
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-round-dial .extension-dashboard-widget-thermostat-setpoint-display .extension-dashboard-widget-dial-name-container{
	padding-top:0;
}


#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-round-dial .extension-dashboard-widget-dial{
	width:50%;
	top:90%;
	left:60%;
}
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-round-dial .extension-dashboard-widget-dial-ticks{
	border-radius:0;
	overflow:visible;
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-round-dial .extension-dashboard-widget-dial-needle{
	background:linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, rgb(13 59 92) 61%, rgb(13 59 92) 74%);
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}



/*  DIAL widget's vertical versions  */

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-round-dial .extension-dashboard-widget-thermostat-setpoint-display{
	position:initial;
	width:100%;
	height:150px;
	max-height:150px;
	/*
	align-items:flex-end;
	*/
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h="2"]:not([gs-w]) .extension-dashboard-widget-round-dial .extension-dashboard-widget-thermostat-setpoint-display{
	align-items:center;
}


#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-round-dial .extension-dashboard-widget-dial{
	position:initial;
	transform: rotate(270deg);
    /*
	width: 150%;
    height: 45%;
	margin-left: 10%;
	*/
    width: 200%;
    height: 25%;
    margin-left: -5%;
}
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h="2"]:not([gs-w]) .extension-dashboard-widget-round-dial .extension-dashboard-widget-dial{
	width: 140%;
	height: 35%;
	margin-left: 20%;
}
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-round-dial .extension-dashboard-widget-dial-ticks{
	border-radius:0;
	overflow:visible;
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-round-dial .extension-dashboard-widget-dial-needle{
	background:linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, rgb(13 59 92) 61%, rgb(13 59 92) 74%);
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}


#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"]:not([gs-w]) .extension-dashboard-widget-round-dial .extension-dashboard-widget-dial{
	margin-left: -5%;
	margin-top: 80%;
}


#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h="4"]:not([gs-w]) .extension-dashboard-widget-round-dial .extension-dashboard-widget-dial{
    width: 230%;
    margin-left: -15%;
    margin-top: 80%;
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h="4"]:not([gs-w]) .extension-dashboard-widget-round-dial .extension-dashboard-widget-thermostat-setpoint-display{
	height:250px;
	max-height:250px;
}


#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-thermostat .extension-dashboard-widget-dial{
	top:65%;
}
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"]:not([gs-w]) .extension-dashboard-widget-thermostat .extension-dashboard-widget-dial{
	top:60%;
}
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h="4"]:not([gs-w]) .extension-dashboard-widget-thermostat .extension-dashboard-widget-dial{
	top:57%;
}
#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-thermostat .extension-dashboard-widget-setpoint-arrow{
	opacity:0;
}






/*   WEATHER WIDGET    */


.extension-dashboard-widget-weather-description-container{
	padding:1rem 0 0 1rem;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-weather-description-container{
	color:#eee;
	justify-content: center;
}

.extension-dashboard-widget-weather h2{
	margin-bottom:0;
}


.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-widget-weather .extension-dashboard-widget-split{
	width:100%;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-widget-weather .extension-dashboard-widget-split > div{
	flex-grow:1;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-widget-weather .extension-dashboard-widget-split-compact{
	width:100%;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-widget-weather .extension-dashboard-widget-split-compact > div{
	width:50%;
}


#extension-dashboard-templates .extension-dashboard-widget-weather,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h] .extension-dashboard-widget-weather{
	background-image: url('../images/weather_landscape.svg');
	background-repeat:no-repeat;
	background-size:cover;
	background-position: center bottom;
	color:#bbb;
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-weather{
	transition: background 10s ease-in-out;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h="2"] .extension-dashboard-widget-weather{
	background-position: center 85%;
}

.extension-dashboard-night .grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-weather{
	background-position: center 0%;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h] .extension-dashboard-widget-weather .extension-dashboard-widget-split-compact > div{
	flex-direction:column;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"] .extension-dashboard-widget-weather .extension-dashboard-widget-split{
	padding-bottom: 7rem;
	padding-top: 3rem;
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="4"] .extension-dashboard-widget-weather .extension-dashboard-widget-split{
	padding-bottom: 14rem;
	padding-top: 6rem;
}

.extension-dashboard-widget-weather strong{
	margin:0 1rem;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w] .extension-dashboard-widget-weather .extension-dashboard-widget-weather_description-needs-update{
	font-size:3rem;
}


body.developer .extension-dashboard-widget-weather_description-needs-update:empty::after{
	content:'Weather';
}

.extension-dashboard-widget-humidity-needs-update:not(:empty)::after{
	content:'%';
}


.extension-dashboard-widget-temperature-value-container,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h] .extension-dashboard-widget-weather .extension-dashboard-widget-split-compact > div strong{
	font-size:200%;
	color:white;
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"]:not([gs-h="2"]) .extension-dashboard-widget-weather .extension-dashboard-widget-split-compact > div strong.extension-dashboard-widget-temperature-value-container,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h] .extension-dashboard-widget-weather .extension-dashboard-widget-split-compact > div strong.extension-dashboard-widget-temperature-value-container{
	font-size:300%;
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h] .extension-dashboard-widget-weather .extension-dashboard-widget-split-compact > div strong.extension-dashboard-widget-temperature-value-container{
	font-size: 400%;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h] .extension-dashboard-widget-weather .extension-dashboard-widget-split-compact > div p{
	margin-top:.5rem;
}



.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="3"] .extension-dashboard-widget-weather .extension-dashboard-widget-split > div,
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="4"] .extension-dashboard-widget-weather .extension-dashboard-widget-split > div{
	flex-grow:1;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="3"] .extension-dashboard-widget-weather .extension-dashboard-widget-split-compact,
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="4"] .extension-dashboard-widget-weather .extension-dashboard-widget-split-compact{
	flex-direction:row;
	flex-wrap: nowrap;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="3"] .extension-dashboard-widget-weather .extension-dashboard-widget-split-compact > div,
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="4"] .extension-dashboard-widget-weather .extension-dashboard-widget-split-compact > div{
	flex-direction:column;
	justify-content: flex-end;
	height:100%;
	padding-bottom: 1.5rem;
	margin: 0 1rem;
}
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="3"] .extension-dashboard-widget-weather .extension-dashboard-widget-weather-description-container{
	padding-left:2rem;
}
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h])[gs-w="4"] .extension-dashboard-widget-weather .extension-dashboard-widget-weather-description-container{
	padding-left:4.5rem;
}

/*   RAIN    */

.extension-dashboard-widget-weather-rain{
	position:absolute;
	bottom:0;
	width:100%;
	height:100%;
	opacity:.4;
	pointer-events:none;
	transform: translate(0%, -10%) scale(0.6);
	display:none;
}
/*body.developer .extension-dashboard-widget-weather-rain,*/
.extension-dashboard-widget-weather-show-rain .extension-dashboard-widget-weather-rain{
	display:initial;
}

.extension-dashboard-widget-weather-rain:nth-of-type(1){
	--duration: 2.7s;
	--delay: 1s;
	transform: translate(10%, 10%) scale(0.9);
}

.extension-dashboard-widget-weather-rain:nth-of-type(2){
	--duration: 2.1s;
	--delay: 1.2s;
	transform: translate(-20%, 40%) scale(1.3);
}

.extension-dashboard-widget-weather-rain:nth-of-type(3){
	--duration: 2.3s;
	--delay: 2s;
	transform: translate(20%, 50%) scale(1.1);
}

.extension-dashboard-widget-weather-rain:nth-of-type(4){
	--duration: 2s;
	--delay: 4s;
	transform: translate(0%, -10%) scale(1.2);
}

.extension-dashboard-widget-weather-rain:nth-of-type(5){
	--duration: 2.5s;
	--delay: 0s;
	transform: translate(10%, 0%) scale(0.9);
}

.extension-dashboard-widget-weather-rain:nth-of-type(6){
	--duration: 2s;
	--delay: 2.7s;
	transform: translate(-20%, 0%) scale(1);
}

.extension-dashboard-widget-weather-rain:nth-of-type(7){
	--duration: 1.8s;
	--delay: 1.3s;
	transform: translate(20%, -40%) scale(1.2);
}

.extension-dashboard-widget-weather-rain:nth-of-type(8){
	--duration: 2.2s;
	--delay: 0s;
	transform: translate(20%, 0%) scale(1);
}

.extension-dashboard-widget-weather-rain:nth-of-type(9){
	--duration: 2s;
	--delay: 0.5s;
	transform: translate(0%, -10%) scale(1.3);
}

.extension-dashboard-widget-weather-drop{
	background-color: white;
	width: 3px;
	height: 100px;
	position: absolute;
	top: calc(50% - 100px); 
	left: calc(50% - 1.5px);
	animation-name: extensionDashboardWidgetWeatherFall;
	animation-duration: var(--duration);
	animation-delay: var(--delay);
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
	animation-fill-mode: backwards;
}

.extension-dashboard-widget-weather-show-snow .extension-dashboard-widget-weather-drop{
	width: 5px;
	height: 5px;
}
.extension-dashboard-widget-weather-show-snow:not(.extension-dashboard-widget-weather-show-hail) .extension-dashboard-widget-weather-drop{
	--duration: 10s;
}

.extension-dashboard-widget-weather-show-hail .extension-dashboard-widget-weather-drop{
	width: 10px;
	height: 10px;
	border-radius:5px;
}


@keyframes extensionDashboardWidgetWeatherFall{
	0%{
		transform: translateY(-120vh);
	}
	45%{
		transform: translateY(0%);
		opacity: 1;
	}
	46%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}
}

.extension-dashboard-widget-weather-waves > div{
	position: absolute;
	top:0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	border-radius: 50%;
	border: solid white 3px;
	animation-name: extensionDashboardWidgetWeatherSpread;
	animation-duration: var(--duration);
	animation-delay: var(--delay);
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
	animation-fill-mode: backwards;
}

.extension-dashboard-widget-weather-waves > div:nth-child(2){
	animation-delay: calc(var(--delay) + 0.3s);
	animation-timing-function: linear;
}

@keyframes extensionDashboardWidgetWeatherSpread{
	0%{
		transform: scale(0);
		opacity: 1;
	}
	40%{
		transform: scale(0);
		opacity: 1;
	}

	100%{
		transform: scale(1);
		opacity: 0;
	}
}

.extension-dashboard-widget-weather-show-snow .extension-dashboard-widget-weather-waves > div{
	display:none;
}


.extension-dashboard-widget-weather-splash{
	position: absolute;
	top: 10%;
	bottom: 50%;
	left: 35%;
	right: 35%;
	border-radius: 8px;
	clip-path: polygon(7% 100%, 5% 95%, 3% 80%, 11% 50%, 17% 38%, 23% 44%, 30% 53%, 37% 28%, 40% 29%, 45% 43%, 51% 53%, 59% 36%, 64% 22%, 67% 23%, 70% 34%, 72% 46%, 79% 37%, 83% 37%, 93% 61%, 96% 76%, 96% 94%, 94% 100%);
	background-color: white;
	transform-origin: bottom;
	animation-name: extensionDashboardWidgetWeatherSplash;
	animation-duration: var(--duration);
	animation-delay: var(--delay);
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
	animation-fill-mode: backwards;
	display:none;
}

.extension-dashboard-widget-weather-show-rain-impact .extension-dashboard-widget-weather-splash{
	display:initial;
}

@keyframes extensionDashboardWidgetWeatherSplash{
	0%{
		transform: scale(0.3, 0);
	}

	49%{
		transform: scale(0.3, 0);
	}

	50%{
		transform: scale(0.3, 0.3);
	}

	60%{
		transform: scale(0.7, 1);
	}

	90%{
		transform: scale(1, 0);
	}

	100%{
		transform: scale(1, 0);
	}
}

.extension-dashboard-widget-weather-particles > div{
	position: absolute;	
	border-radius: 100%;
	background-color: white;
	animation-duration: var(--duration);
	animation-delay: var(--delay);
	animation-iteration-count: infinite;
	animation-timing-function: ease;
	animation-fill-mode: backwards;
}

.extension-dashboard-widget-weather-show-snow .extension-dashboard-widget-weather-particles > div{
	display:none;
}

.extension-dashboard-widget-weather-particles > div:nth-child(1){
	width: 7px;
	height: 7px;
	top: 50%;
	left: 50%;
	animation-name: extensionDashboardWidgetWeatherjumpLeft;
}

.extension-dashboard-widget-weather-particles > div:nth-child(2){
	width: 5px;
	height: 5px;
	top: 30%;
	left: 50%;
	animation-name: extensionDashboardWidgetWeatherjumpLeft;
	animation-delay: calc(var(--delay) + 0.1s);
}

.extension-dashboard-widget-weather-particles > div:nth-child(3){
	width: 3px;
	height: 3px;
	top: 20%;
	left: 70%;
	animation-name: extensionDashboardWidgetWeatherjumpRight;
	animation-delay: calc(var(--delay) + 0.15s);
}

.extension-dashboard-widget-weather-particles > div:nth-child(4){
	width: 5px;
	height: 5px;
	top: 30%;
	left: 50%;
	animation-name: extensionDashboardWidgetWeatherjumpRight;
	animation-delay: calc(var(--delay) + 0.3s);
}

@keyframes extensionDashboardWidgetWeatherjumpLeft{
	0%{
		transform: translate(0,0) scale(0);
	}

	45%{
		transform: translate(0,0) scale(0);
	}

	60%{
		transform: translate(-50px, -90px) scale(1);
	}

	100%{
		transform: translate(-60px, 0px) scale(0.1);
	}
}

@keyframes extensionDashboardWidgetWeatherjumpRight{
	0%{
		transform: translate(0,0) scale(0);
	}

	45%{
		transform: translate(0,0) scale(0);
	}

	60%{
		transform: translate(30px, -80px) scale(1);
	}

	100%{
		transform: translate(50px, 0px) scale(0.1);
	}
}







/*  CLOUDS   */


.extension-dashboard-widget-weather-clouds{
	position:absolute;
	bottom:0;
	width:100%;
	height:100%;
	opacity:.2;
	display:none;
	pointer-events:none;
}

/*body.developer .extension-dashboard-widget-weather-clouds,*/
.extension-dashboard-widget-weather-show-clouds .extension-dashboard-widget-weather-clouds{
	display:initial;
}

.extension-dashboard-widget-weather-show-dark-clouds .extension-dashboard-widget-weather-clouds{
	display:initial;
	filter: invert(1);
}

.extension-dashboard-widget-weather-show-fog .extension-dashboard-widget-weather-clouds{
	bottom:-30%
}


.extension-dashboard-widget-weather-clouds > div{
	position:absolute;
}

.extension-dashboard-widget-weather-cloud2 {
    opacity: .8;
    top: 40px;
    left: 120%;
    -webkit-transform: scale(.7);
    -moz-transform: scale(.7);
    transform: scale(.7);
    -moz-animation: extensionDashboardWidgetWeatherDrift 50s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -webkit-animation: extensionDashboardWidgetWeatherDrift 50s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation: extensionDashboardWidgetWeatherDrift 50s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index: 1;
}
.extension-dashboard-widget-weather-cloud3 {
    opacity: 0;
    top: 20px;
    left: 50%;
    -webkit-transform: scale(.35);
    -moz-transform: scale(.35);
    transform: scale(.35);
    -moz-animation: extensionDashboardWidgetWeatherDriftBg 70s;
    -moz-animation-timing-function: linear;
    -webkit-animation: extensionDashboardWidgetWeatherDriftBg 70s;
    -webkit-animation-timing-function: linear;
    animation: extensionDashboardWidgetWeatherDriftBg 70s;
    animation-timing-function: linear;
    z-index: 0;
}
.extension-dashboard-widget-weather-cloud4 {
    opacity: 0;
    top: 50px;
    left: 20%;
    -webkit-transform: scale(.40, .45);
    -moz-transform: scale(.40, .45);
    transform: scale(.40, .45);
    -moz-animation: extensionDashboardWidgetWeatherDriftBg2 60s;
    -moz-animation-timing-function: linear;
    -webkit-animation: extensionDashboardWidgetWeatherDriftBg2 60s;
    -webkit-animation-timing-function: linear;
    animation: extensionDashboardWidgetWeatherDriftBg2 60s;
    animation-timing-function: linear;
    z-index: 0;
}
.extension-dashboard-widget-weather-cloud5 {
    opacity: 0;
    top: 80px;
    left: 90%;
    -webkit-transform: scale(.40);
    -moz-transform: scale(.40);
    transform: scale(.40);
    -moz-animation: extensionDashboardWidgetWeatherDriftBg3 90s;
    -moz-animation-timing-function: linear;
    -webkit-animation: extensionDashboardWidgetWeatherDriftBg3 90s;
    -webkit-animation-timing-function: linear;
    animation: extensionDashboardWidgetWeatherDriftBg3 90s;
    animation-timing-function: linear;
    z-index: 0;
}
.extension-dashboard-widget-weather-cloud6 {
    opacity: .7;
    top: 60px;
    left: 120%;
    -webkit-transform: scale(.40);
    -moz-transform: scale(.40);
    transform: scale(.40);
    -moz-animation: extensionDashboardWidgetWeatherDrift 110s;
    -moz-animation-timing-function: linear;
    -mox-animation-iteration-count: infinite;
    -moz-animation-delay: 11s;
    -webkit-animation: extensionDashboardWidgetWeatherDrift 110s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 11;
    animation: extensionDashboardWidgetWeatherDrift 110s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: 11s;
    z-index: 0;
}
.extension-dashboard-widget-weather-cloud7 {
    opacity: .8;
    top: 95px;
    left: 120%;
    -webkit-transform: scale(.7);
    -moz-transform: scale(.7);
    transform: scale(.7);
    -moz-animation: extensionDashboardWidgetWeatherDrift 45s;
    -moz-animation-timing-function: linear;
    -mox-animation-iteration-count: infinite;
    -moz-animation-delay: 35s;
    -webkit-animation: extensionDashboardWidgetWeatherDrift 45s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 35s;
    animation: extensionDashboardWidgetWeatherDrift 45s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: 35s;
    z-index: 1;
}

.extension-dashboard-widget-weather-circ1 {
    z-index: 1;
}
.extension-dashboard-widget-weather-circ2 {
    top: 50px;
    left: -40px;
}
.extension-dashboard-widget-weather-circ3 {
    top: 50px;
    left: -120px;
}
.extension-dashboard-widget-weather-circ4 {
    top: 30px;
    left: -60px;
}
.extension-dashboard-widget-weather-circ5 {
    top: 100px;
    left: -150px;
}
.extension-dashboard-widget-weather-circ6 {
    top: 100px;
    left: 130px;
}

.bigCloud {
    box-shadow: 10px 10px 5px 20px black inset;
    position: absolute;
}

.extension-dashboard-widget-weather-small-circle {
    height: 100px;
    width: 100px;
    background: white;
    border-radius: 100%;
    position: absolute;
}
.extension-dashboard-widget-weather-middle-circle {
    height: 150px;
    width: 150px;
    background: white;
    border-radius: 100%;
    position: absolute;
}
.extension-dashboard-widget-weather-large-circle {
    height: 200px;
    width: 200px;
    background: white;
    border-radius: 100%;
    position: absolute;
}


@-webkit-keyframes extensionDashboardWidgetWeatherDrift {
    from {
        left: 120%;
    }
    to {
        left: -25%;
    }
}
@-moz-keyframes extensionDashboardWidgetWeatherDrift {
    from {
        left: 120%;
    }
    to {
        left: -25%;
    }
}
@keyframes extensionDashboardWidgetWeatherDrift {
    from {
        left: 120%;
    }
    to {
        left: -25%;
    }
}
@-webkit-keyframes extensionDashboardWidgetWeatherDriftBg {
    0% {
        left: 50%;
        opacity: 0
    }
    3% {
        left: 48%;
        opacity: .7
    }
    100% {
        left: -25%;
        opacity: .7;
    }
}
@-moz-keyframes extensionDashboardWidgetWeatherDriftBg {
    0% {
        left: 50%;
        opacity: 0
    }
    3% {
        left: 48%;
        opacity: .7
    }
    100% {
        left: -25%;
        opacity: .7;
    }
}
@keyframes extensionDashboardWidgetWeatherDriftBg {
    0% {
        left: 50%;
        opacity: 0
    }
    3% {
        left: 48%;
        opacity: .7
    }
    100% {
        left: -25%;
        opacity: .7;
    }
}
@-webkit-keyframes extensionDashboardWidgetWeatherDriftBg2 {
    0% {
        left: 20%;
        opacity: 0
    }
    3% {
        left: 19%;
        opacity: .7
    }
    100% {
        left: -25%;
        opacity: .7;
    }
}
@-moz-keyframes extensionDashboardWidgetWeatherDriftBg2 {
    0% {
        left: 20%;
        opacity: 0
    }
    3% {
        left: 19%;
        opacity: .7
    }
    100% {
        left: -25%;
        opacity: .7;
    }
}
@keyframes extensionDashboardWidgetWeatherDriftBg2 {
    0% {
        left: 20%;
        opacity: 0
    }
    3% {
        left: 19%;
        opacity: .7
    }
    100% {
        left: -25%;
        opacity: .7;
    }
}
@-webkit-keyframes extensionDashboardWidgetWeatherDriftBg3 {
    0% {
        left: 90%;
        opacity: 0
    }
    2% {
        left: 88%;
        opacity: .65
    }
    100% {
        left: -25%;
        opacity: .65;
    }
}
@-moz-keyframes extensionDashboardWidgetWeatherDriftBg3 {
    0% {
        left: 90%;
        opacity: 0
    }
    2% {
        left: 88%;
        opacity: .65
    }
    100% {
        left: -25%;
        opacity: .65;
    }
}
@keyframes extensionDashboardWidgetWeatherDriftBg3 {
    0% {
        left: 90%;
        opacity: 0
    }
    2% {
        left: 88%;
        opacity: .65
    }
    100% {
        left: -25%;
        opacity: .65;
    }
}



.extension-dashboard-hide-animations .extension-dashboard-widget-weather-rain,
.extension-dashboard-hide-animations .extension-dashboard-widget-weather-clouds{
	display:none!important;
}




#extension-dashboard-content input[disabled]{
	outline: none;
	background: transparent;
}








/*   BASIC NUMBER WIDGET   */

.extension-dashboard-widget-number{
	width:100%;
	height:100%;
	display:flex;
	justify-content: center;
	flex-direction:column;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-number{
	flex-direction:row;
	align-items: center;
}

.extension-dashboard-widget-absolute-title-container{
	padding:1.5rem;
	position:absolute;
	font-weight:100;
	pointer-events:none;
	top:0;
}
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-widget-absolute-title-container{
	font-size:80%;
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-widget-absolute-title-container:not(:empty) + img{
	display: inline-block;
    margin-top: 3rem;
    position: absolute;
    opacity: .07;
    width: 110%;
	min-width: 110%;
    height: 110%;
    min-height: 110%;
    top: 0;
    left: -130%;
}
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-widget-absolute-title-container:not(:empty) ~ .extension-dashboard-widget-number-display{
	margin-top:3rem;
}

.extension-dashboard-widget-number-display{
	height: 100%;
	box-sizing:border-box;
}

#extension-dashboard-content .extension-dashboard-widget-number input{
	width:100%;
	max-width:calc(100% - 3rem);
	box-sizing:border-box;
	text-align:center;
	font-size:4rem;
	/*height: calc(100% - 3rem);*/
	color:inherit;
	background-color:transparent;
}

#extension-dashboard-content .extension-dashboard-widget-number input:not([disabled]){
	color:var(--extension-dashboard-widget-editable-text-color);
}

#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-number input{
	font-size:6rem;
}


.extension-dashboard-widget-number img{
	width: calc(100% - 3rem);
	margin:1.5rem auto 0 auto;
	max-height: 40%;
	opacity:.65;
}


.extension-dashboard-widget-number img:not([src^="/extensions/dashboard/icons/"]){
	display:none;
}

.extension-dashboard-widget-number img[src^="/extensions/dashboard/icons/"] + .extension-dashboard-widget-number-display{
	height:auto;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-number img[src^="/extensions/dashboard/icons/"]{
	margin:1.5rem;
	max-height:50%;
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"]:not([gs-h]) .extension-dashboard-widget-number img[src^="/extensions/dashboard/icons/"]{
	max-height:60%;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-number img[src^="/extensions/dashboard/icons/"] + .extension-dashboard-widget-number-display,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-number img[src^="/extensions/dashboard/icons/"] + .extension-dashboard-widget-number-display input{
    justify-items: left;
}


#extension-dashboard-content .grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-number img[src^="/extensions/dashboard/icons/"] + .extension-dashboard-widget-number-display{
	margin-bottom:3rem;
}











/*   IFRAME WIDGET   */
.extension-dashboard-widget-frame iframe{
	width:100%;
	height:100%;
}







/*  Make some text unselectable */



/*  TODO: ENABLE ON PRODUCTION: */

#extension-dashboard-view *:not(input):not(select):not(textarea),

.extension-dashboard-widget-setpoint-arrow,
.extension-dashboard-widget-temperature-value,
.extension-dashboard-tab-button,
#extension-dashboard-content strong,
.extension-dashboard-widget-name-needs-rename{
	user-select:none;
}


.extension-dashboard-widget-block-title-container{
	padding:1.5rem 1rem .5rem 1.5rem;
    flex-grow: 0;
    min-height: 40px;
	box-sizing: border-box;
	user-select:none;
	flex-basis:auto;
}

.extension-dashboard-logging-content *,
.extension-dashboard-template *{
	box-sizing: border-box;
}



/*  HIDE IF EMPTY  */

.extension-dashboard-widget-hide-if-empty:empty,
.extension-dashboard-widget-hide-if-empty:empty + .extension-dashboard-widget-hide-if-after-empty{
	display:none!important;
}

.extension-dashboard-widget-weather-moon-container{
	opacity:0;
	position: absolute;
    left: calc(100% - 6rem);
    top: 7rem;
    font-size: 4rem;
    opacity: 0;
	/*filter: saturate(50%);*/
	transition: all 60s ease-in-out;
	pointer-events: none;
}

/*
body.developer .extension-dashboard-widget-weather-moon-container{
	opacity: .4;
}
*/

.extension-dashboard-night .extension-dashboard-widget-weather-moon-container{
	display:block;
    left: calc(0% + 4rem);
    top: 7rem;
    font-size: 6rem;
    opacity: .4;
	transition: all 60s linear;
}












/*   BIG  CLOCK   */


/*
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="2"][gs-w="2"] .extension-dashboard-widget-clock 
*/

/*
.extension-dashboard-widget-clock-braun-date-container-wrapper{
	position:relative;
	height:100%;
}

.extension-dashboard-widget-clock-braun-date-container{
	position:absolute;
	bottom:20%;
	width:100%;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h="3"] .extension-dashboard-widget-clock-braun-date-container{
	bottom:-20%;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"][gs-h="2"] .extension-dashboard-widget-clock-braun-date-container{
	position:absolute;
	bottom:20%;
	width:100%;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="2"][gs-h="2"] .extension-dashboard-widget-clock-braun-date-container .extension-dashboard-widget-clock-date-day{
	font-size: 2rem;
}
*/



.extension-dashboard-widget-clock-analog-second {
	animation: extension-dashboard-clock-seconds-rotation 60s linear infinite;
}

@keyframes extension-dashboard-clock-seconds-rotation {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}





/*   SEIKO CLOCK   */

.extension-dashboard-widget-clock-seiko {
	width: 80%;
	height: 80%;
	border-radius: 50%;
	/*
	box-shadow: 
		inset 40px 40px 90px rgba(0,0,0,.2),
		inset 10px 10px 30px rgba(0,0,0,.5), 
		20px 20px 30px rgba(0,0,0,.4),
		40px 40px 60px rgba(0,0,0,.4);
	*/
	position: relative;
	z-index: 1;
}


.extension-dashboard-widget-clock-seiko-fix{
	width:100%;
	height:100%;
	transform: rotate(-91deg);
}

.extension-dashboard-widget-clock-seiko-date-container{
	position:absolute;
	top:0;
	height: 80%;
	width:100%;
    display: flex;
    justify-content: end;
    align-items: center;
    flex-direction: column;
	pointer-events:none;
}


.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"]:not([gs-h]) .extension-dashboard-widget-clock{
	justify-content:center;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-clock-seiko-date-container{
	right: -150%;
    justify-content: center;
	height:100%;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-clock-seiko-date-container{
	top: auto;
	bottom: -140%;
}


/*
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-clock-seiko-date-container .extension-dashboard-widget-clock-date-day{
	opacity:.9;
}
*/

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-clock-seiko-minute-ticks{
	opacity:.6;
}

.extension-dashboard-widget-clock-seiko-minute-ticks{
	pointer-events:none;
}
.extension-dashboard-widget-clock-seiko-minute-tick{
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 0.3em;
    height: 100%;
    background: transparent;
    box-shadow: 0 -0.6em 0 -0.1em #383838, 0 0.6em 0 -0.1em #383838;
	box-shadow: 0 -0.6em 0 -0.1em #ffffff, 0 0.6em 0 -0.1em #ffffff;
    z-index: -1;
    transform: rotate(6deg);
}


/*
.extension-dashboard-widget-clock-seiko,
*/
.extension-dashboard-widget-clock-seiko-minute-tick:after, 
.extension-dashboard-widget-clock-seiko-minute-tick:before{
	display: block;
	content: "";
	position: absolute;
	height: inherit;
	width: inherit;
	background: inherit;
	box-shadow: inherit;
	backface-visibility: inherit;
	z-index: 0;
}

.extension-dashboard-widget-clock-seiko-minute-tick:before {
	transform: rotate(120deg);
}
.extension-dashboard-widget-clock-seiko-minute-tick:after {
	transform: rotate(240deg);
}
.extension-dashboard-widget-clock-seiko-minute-ticks > span:nth-child(2) {
	transform: rotate(12deg);
}
.extension-dashboard-widget-clock-seiko-minute-ticks > span:nth-child(3) {
	transform: rotate(18deg);
}
.extension-dashboard-widget-clock-seiko-minute-ticks > span:nth-child(4) {
	transform: rotate(24deg);
}

.extension-dashboard-widget-clock-seiko-minute-ticks > span:nth-child(5) {
	transform: rotate(36deg);
}
.extension-dashboard-widget-clock-seiko-minute-ticks > span:nth-child(6) {
	transform: rotate(42deg);
}
.extension-dashboard-widget-clock-seiko-minute-ticks > span:nth-child(7) {
	transform: rotate(48deg);
}
.extension-dashboard-widget-clock-seiko-minute-ticks > span:nth-child(8) {
	transform: rotate(54deg);
}


.extension-dashboard-widget-clock-seiko-minute-ticks > span:nth-child(9) {
	transform: rotate(0deg);
	box-shadow: 0 -0.6em 0 -0.05em #ffffff, 0 0.6em 0 -0.05em #ffffff;
}
.extension-dashboard-widget-clock-seiko-minute-ticks > span:nth-child(10) {
	transform: rotate(30deg);
	box-shadow: 0 -0.6em 0 -0.05em #ffffff, 0 0.6em 0 -0.05em #ffffff;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"][gs-h="3"] .extension-dashboard-widget-clock-seiko-minute-ticks > span:nth-child(9){
	box-shadow: 0 -0.6em 0 -0.05em #0200a4, 0 0.6em 0 -0.05em #0200a4;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w="3"][gs-h="3"] .extension-dashboard-widget-clock-seiko-minute-ticks > span:nth-child(10){
	box-shadow: 0 -0.6em 0 -0.05em #009bff, 0 0.6em 0 -0.05em #009bff;
}



.extension-dashboard-widget-clock-seiko-label {
	position: absolute;
	top: 22%;
    left: calc(50% - 50px);
    font-size: 1rem;
    width: 100px;
    text-align: center;
}

.extension-dashboard-widget-clock-seiko-hourhand,
.extension-dashboard-widget-clock-seiko-secondhand,
.extension-dashboard-widget-clock-seiko-minutehand,
.extension-dashboard-widget-clock-seiko-alarmhand{
	width: 25%;
	height: 2%;
	background: #000;
	position: absolute;
	top: 50%;
	left: calc(50% - 3.5%);
	z-index: 2;
	transform: rotate(0deg); /* -139*/
	transform-origin: 16%;
}

.extension-dashboard-widget-clock-seiko-hourhand:after,
.extension-dashboard-widget-clock-seiko-secondhand:after,
.extension-dashboard-widget-clock-seiko-minutehand:after,
.extension-dashboard-widget-clock-seiko-alarmhand:after {
	content: '';
	background: #000;
	width: 5%;
	height: 5%;
	border-radius: 50%;
	z-index: 3;
	position: absolute;
	top: -1.5%;
	left: 1.5%;
}

.extension-dashboard-widget-clock-seiko-hourhand {
	border-top-right-radius: 20%;
	border-bottom-right-radius: 20%;
	/*background: #009bff;*/
	background:var(--extension-dashboard-widget-text-color);
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-clock-seiko-hourhand{
	box-shadow: -6px 0px 6px rgba(0,0,0,.3);
}

.extension-dashboard-widget-clock-seiko-minutehand {
	width: 40%;
	height: 1%;
	top: 50%;
	transform: rotate(-39deg);
	transform-origin: 10%;
	border-top-right-radius: 30%;
	border-bottom-right-radius: 30%;
	/*background: #0200a4;*/
	background:var(--extension-dashboard-widget-editable-text-color);
}
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-clock-seiko-minutehand {
	box-shadow:-4px 4px 8px rgba(0, 0, 0, .3);
}


.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]) .extension-dashboard-widget-clock-seiko-hourhand,
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]) .extension-dashboard-widget-clock-seiko-hourhand,
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]) .extension-dashboard-widget-clock-seiko-minutehand,
.grid-stack-item:not(.grid-stack-sub-grid):not([gs-h]) .extension-dashboard-widget-clock-seiko-minutehand{
	height: 3%;
}



.extension-dashboard-widget-clock-seiko-minutehand:before {
	content: '';
	width: 4.5%;
	height: 4.5%;
	border-radius: 50%;
	z-index: 99;
	position: absolute;
	top: -1.7%;
	left: 1.7%;
	/*box-shadow: -2px -2px 7px rgba(255,255,255,.6);*/
}

.extension-dashboard-widget-clock-seiko-minutehand:after {
	top: -2%;
}

.extension-dashboard-widget-clock-seiko-secondhand {
	width: 35%;
	height: .5%;
	top: 50%;
	background: #fff;
	transform: rotate(0);
	transform-origin: 11.5%;
	/*box-shadow: -10px -10px 10px rgba(0,0,0,.4);*/
}
.extension-dashboard-widget-clock-seiko-secondhand:after {
	top: -2.25%;
}


.extension-dashboard-widget-clock-seiko ul{
    height: 50%;
    width: 90%;
    position: absolute;
    bottom: 0;
    left: 5%;
    padding: 0;
    margin: 0;
	pointer-events:none;
}


.extension-dashboard-widget-clock-seiko ul li{
	overflow:visible;
}

.extension-dashboard-widget-clock-seiko ul li i {
	position: absolute;
	top: -10px;
	left: 0;
	transform: translateX(-50%);
	text-decoration:none;
	font-style:normal;
	font-size:1.2rem;
}

.grid-stack-item:not(.grid-stack-sub-grid)[gs-w][gs-h] .extension-dashboard-widget-clock-seiko ul li i{
	font-size:1.6rem;
}

.extension-dashboard-widget-clock-seiko ul li:nth-child(1) {
	transform: rotate(90deg);
}
.extension-dashboard-widget-clock-seiko ul li:nth-child(1) i {transform: translateX(-50%) rotate(-90deg)}

.extension-dashboard-widget-clock-seiko ul li:nth-child(2) {
	transform: rotate(120deg);
}
.extension-dashboard-widget-clock-seiko ul li:nth-child(2) i {transform: translateX(-50%) rotate(240deg)}


.extension-dashboard-widget-clock-seiko ul li:nth-child(3) {
	transform: rotate(150deg);
}
.extension-dashboard-widget-clock-seiko ul li:nth-child(3) i {transform: translateX(-50%) rotate(210deg)}


.extension-dashboard-widget-clock-seiko ul li:nth-child(4) {
	transform: rotate(180deg);
}
.extension-dashboard-widget-clock-seiko ul li:nth-child(4) i {transform: translateX(-50%) rotate(180deg)}


.extension-dashboard-widget-clock-seiko ul li:nth-child(5) {
	transform: rotate(210deg);
}
.extension-dashboard-widget-clock-seiko ul li:nth-child(5) i {transform: translateX(-50%) rotate(150deg)}


.extension-dashboard-widget-clock-seiko ul li:nth-child(6) {
	transform: rotate(240deg);
}
.extension-dashboard-widget-clock-seiko ul li:nth-child(6) i {transform: translateX(-50%) rotate(120deg)}


.extension-dashboard-widget-clock-seiko ul li:nth-child(7) {
	transform: rotate(270deg);
}
.extension-dashboard-widget-clock-seiko ul li:nth-child(7) i {transform: translateX(-50%) rotate(90deg)}


.extension-dashboard-widget-clock-seiko ul li:nth-child(8) {
	transform: rotate(300deg);
}
.extension-dashboard-widget-clock-seiko ul li:nth-child(8) i {transform: translateX(-50%) rotate(60deg)}


.extension-dashboard-widget-clock-seiko ul li:nth-child(9) {
	transform: rotate(330deg);
}
.extension-dashboard-widget-clock-seiko ul li:nth-child(9) i {transform: translateX(-50%) rotate(30deg)}


.extension-dashboard-widget-clock-seiko ul li:nth-child(10) {
	transform: rotate(0deg);
}
.extension-dashboard-widget-clock-seiko ul li:nth-child(10) i {transform: translateX(-50%) rotate(0deg)}


.extension-dashboard-widget-clock-seiko ul li:nth-child(11) {
	transform: rotate(30deg);
}
.extension-dashboard-widget-clock-seiko ul li:nth-child(11) i {transform: translateX(-50%) rotate(330deg)}


.extension-dashboard-widget-clock-seiko ul li:last-child  {
	transform: rotate(60deg);
}

.extension-dashboard-widget-clock-seiko ul li:last-child i {transform: translateX(-50%) rotate(300deg)}


/*   CLOCK ALARM TIME INDICATOR   */


.extension-dashboard-widget-clock-seiko-alarmhand{
	display:block;
	width: 25%;
	height: 1.5%;
	top: 50%;
	transform: rotate(0deg);
	border-top-right-radius: 30%;
	border-bottom-right-radius: 30%;
	background-color:green;
	background: linear-gradient(90deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .4) 70%, green 71%, green 100%);
	box-shadow: -1px -2px 5px rgba(0,0,0,.2), inset 0px 0px 0px 1px rgba(255,255,255,.2);
}

.grid-stack-item:not(.grid-stack-sub-grid):not([gs-w]):not([gs-h]) .extension-dashboard-widget-clock-seiko-alarmhand,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-w]:not([gs-h]) .extension-dashboard-widget-clock-seiko-alarmhand,
.grid-stack-item:not(.grid-stack-sub-grid)[gs-h]:not([gs-w]) .extension-dashboard-widget-clock-seiko-alarmhand{
	height: 2.5%;
}

.extension-dashboard-widget-clock-seiko-alarmhand:before {
	content: '';
	width: 4.5%;
	height: 4.5%;
	border-radius: 50%;
	z-index: 99;
	position: absolute;
	top: -1.7%;
	left: 1.7%;
	/*box-shadow: -2px -2px 7px rgba(255,255,255,.6);*/
}

.extension-dashboard-widget-clock-seiko-alarmhand:after {
	top: -2%;
}




/*   DASHBOARD SETTINGS   */

#extension-dashboard-open-settings-button{
	background: no-repeat center / 50% url(/images/settings-icon.png);
	width: 5.6rem;
    height: 5.6rem;
    cursor: pointer;
    border-radius: 50%;
    background-color: #7dafd2;
    flex-shrink: 0;
    margin: 2rem 1rem;
}
#extension-dashboard-open-settings-button:hover{
	background-color: #7caed1;
}

#extension-dashboard-settings-modal{
	z-index:4;
	border-radius:1rem;
	max-height:90vh;
	border:none;
	background-color: #0d3b5c;
	width:25rem;
	max-width:50vw;
	color:#eee;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
#extension-dashboard-settings-modal:-internal-dialog-in-top-layer::backdrop {
    background-color: rgba(0, 0, 0, 0);
}
#extension-dashboard-settings-modal h2{
	margin-right:4rem;
}

.extension-dashboard-setting-container{
	display: flex;
	align-items: center;
	justify-content: space-between;
}


#extension-dashboard-setting-widget-shadow{
	padding:1rem;
	width:100%;
    box-sizing: border-box;
	min-height:8rem;
}




.extension-dashboard-spinner {
    display: block;
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.extension-dashboard-spinner div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.extension-dashboard-spinner div:nth-child(1) {
    left: 8px;
    animation: extension-dashboard-spinner1 0.6s infinite;
}

.extension-dashboard-spinner div:nth-child(2) {
    left: 8px;
    animation: extension-dashboard-spinner2 0.6s infinite;
}

.extension-dashboard-spinner div:nth-child(3) {
    left: 32px;
    animation: extension-dashboard-spinner2 0.6s infinite;
}

.extension-dashboard-spinner div:nth-child(4) {
    left: 56px;
    animation: extension-dashboard-spinner3 0.6s infinite;
}

@keyframes extension-dashboard-spinner1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes extension-dashboard-spinner3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes extension-dashboard-spinner2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}