.widget.schedule{
	grid-column: auto /span 5;
	grid-row: auto /span 3;
	display : flex;
	flex-direction: column;
	align-items: flex-start;
	-
	overflow: hidden;
}

.widget.schedule header > button{
	display:block;
	background-color: var(--dominant-color);
	color:var(--dominant-contrast);
	border-radius:50%;
	width :2rem;
	height:2rem;
	aspect-ratio:1/1;
	font-size: 1.5rem;
	padding     :0;
	border:none;
	position: absolute;
	right: 0.5rem;
}
.widget.schedule header > button::before{
	line-height: 1em;
	margin: 0;
	padding: 0;
	width: auto;
}

.widget.schedule main.disabled :where(h1,h2,h3){
	color: var(--primary-shade);
	filter: none;
}
.widget.schedule main h3:not(.selected){
	color: black;
}

.widget.schedule footer.disabled{
	color: var(--primary-shade);	
}

.widget.schedule > :where(header, footer, main){
	font-size:1rem;
	display:flex;
	justify-content: space-between;
	width: 100%;
	align-items: center;
	/* line-height: 1.2rem; */
}
.widget.schedule > footer{
	position:relative;
	/* bottom:0.4rem; */
}

.modal-dialog-container:where(.schedule-dialog,.schedule-actions) .modal-dialog > header{
	--dialog-header-color: var(--primary-shade);
	--dominant-contrast: white;
	display: flex;
	justify-content: space-between;
	padding: 0;
	align-items: center;
	flex-direction:row-reverse;
	padding: 0 1rem;
}
.modal-dialog-container:where(.schedule-dialog,.schedule-actions) .modal-dialog {
	border: none;
	aspect-ratio: var(--view-aspect-ratio);
}

.modal-dialog-container:where(.schedule-dialog,.schedule-actions) .modal-dialog > header > button{
	width: max-content;
	display: flex;
	align-items: center;
	padding-right: 1rem;
	border: none;
	color: inherit;
	border-left: 1px solid rgba(0, 0, 0, 0.1);
	margin: 2pt;
	border:none;
	flex-direction: row;
	padding: 0;
} 
.modal-dialog-container:where(.schedule-dialog,.schedule-actions) .modal-dialog > header > button::before{
	margin:0;
	padding-right:1rem;
	width:auto;
	height:auto;
}
.modal-dialog-container:where(.schedule-dialog,.schedule-actions) .modal-dialog > header::after{
	display:none;
}
.modal-dialog-container:where(.schedule-dialog,.schedule-actions) .modal-dialog > header button:first-of-type{
	flex-basis:max-content;
} 

.modal-dialog-container:where(.schedule-dialog,.schedule-actions) .modal-dialog > main{
	position:relative;
	/* min-height:100vw; */
	padding: 0;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	/* flex-grow: 2; */
}
.modal-dialog-container:where(.schedule-dialog,.schedule-actions) .modal-dialog h2{
	font-size: 1.2rem;
	/* padding-left :1rem; */
	/* margin-top   :2rem; */
	font-weight: 200;
	margin-bottom: 0.5rem;
}
.modal-dialog-container:where(.schedule-dialog,.schedule-actions) .modal-dialog > :where( main, footer){
	background: var(--primary-shade);
	color : var(--main-foreground);	
	border:none;
}
.modal-dialog-container:where(.schedule-dialog,.schedule-actions) .modal-dialog > footer{
	display: none;
}
.schedule-actions .modal-dialog main > aside{
	display:flex;
	position: absolute;
	bottom: 0;
	right: 0;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
}
.schedule-actions .modal-dialog > main > section{
    overflow-y:scroll;
    height:100%;
    touch-action: pan-y;
}

.schedule-actions .modal-dialog main > aside > button{
	border-radius:50%;
	aspect-ratio:1/1;
	font-size: 2.5rem;
	padding     :0;
	margin: 0 1rem 1rem 0;
	min-width: 1lh;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	background-color: var(--dialog-header-color);
	color:var(--dominant-contrast);
	flex-basis: fit-content;
}

.schedule-actions .modal-dialog > main{
	justify-content: flex-start;
	position:relative;
	/* overflow-y: scroll; */
}

.schedule-actions .modal-dialog > main .schedule-summary{
	display: inline-flex;
	flex-direction: column;
	margin: 1rem 0rem 0 0rem;
	padding:1rem;
	font-size: 1.1rem;
	width: 100%;
	overflow:visible;
	--swipe-factor:0;
	transform: translateX( calc( var(--swipe-factor) * 100% ));
}

.schedule-actions .modal-dialog > main .schedule-summary.swiped{
	transform:translateX(-110%);
	transition: transform 1s;	
}

.schedule-actions .modal-dialog > main .schedule-summary.swiped::after{
	content:'';
	display:none;/*who knows, maybe we will want to keep it*/
	position:absolute;
	left  :100%;
	width :100%;
	height:100%;
	background:var(--dominant-color);
	color:var(--dominant-contrast);
	overflow:visible;
}

.schedule-actions .modal-dialog > main .schedule-summary > header{
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	font-size: 1rem;
}
.schedule-actions .modal-dialog > main .schedule-summary .switch{
	font-size: 1.6em;
}

.schedule-actions .modal-dialog > main .schedule-summary.disabled .switch .toggle{
	/* border:1px solid white; */
	/* box-sizing:border-box; */
}

.schedule-actions .modal-dialog > main .schedule-summary > header button{
	aspect-ratio:1/1;
	padding:0;
	overflow:hidden;
	flex-basis:1lh;
	margin: 0;
}
.schedule-actions .modal-dialog > main .schedule-summary > header button::before{
	padding:0;
	margin:0;
	/* line-height: normal; */
	/* font-size: 1em; */
}

.schedule-actions .modal-dialog :where(h1,h2,h3){
	font-weight:400;
}
.schedule-actions .modal-dialog .disabled :where(h1,h2,h3,footer){
	color: silver;	
	filter: none;
}
.schedule-actions .modal-dialog section h3:not(.selected){
	color: var(--main-background);
	font-weight:300;
}

.schedule-actions .modal-dialog section.selected{
	border: 1px solid var(--dominant-color);
}
.schedule-actions .modal-dialog section.disabled{
	color: var(--primary-shade);	
}

.schedule-actions .modal-dialog section.disabled .switch .toggle{
	border: 1px solid  var(--main-background);
}    

/* scheduled preset dialog*/
.schedule-dialog .modal-dialog section{
	margin:1rem;
}

.schedule-dialog .modal-dialog .config{
	position:relative;
	/* display: flex; */
	flex-direction: row;
	overflow: hidden;
}

.schedule-dialog .modal-dialog .config .mode{
	/* padding:0 1rem; */
	list-style-type: :none;
}
.schedule-dialog .modal-dialog .config .mode li{
	list-style-type: none;
	padding: 1rem 0;
	font-size: 1.2rem;
	position:relative;
	color: black;
	-font-weight:400;
	/* display: flex; */
	/* justify-content: space-between; */
	/* flex-direction: row; */
}
.schedule-dialog .modal-dialog .config .mode li:last-child{
	/* margin-left:-1rem; */
}
.schedule-dialog .modal-dialog .config .mode li.selected{
	color:inherit;
	-font-weight:600;
}
.schedule-dialog .modal-dialog .config .mode li::after{
	content:' ';
	position:absolute;
	right: 0rem;
	top  : 25%;
	font-family: 'Material Symbols Outlined';
	aspect-ratio:1/1;
	display:block;
	border-radius:50%;
	height:50%;
	text-align:center;
	font-size  :1.5em;
	line-height:1em;
	background:  var(--main-background);
}
.schedule-dialog .modal-dialog .config .mode li.selected::after{
	content:'check';
	background: white;
	color:var(--primary-shade);
}


.schedule-dialog .modal-dialog .config .options{
	width: 200%;
	display:flex;
	flex-direction: row;
	position: relative;
	left: 0%;
	margin:1rem;
	list-style:none;
}
.schedule-dialog .modal-dialog figure{
	width: 100%;
	aspect-ratio: 3/2;
	overflow: hidden;
	position: relative;
	opacity: 0.9;
	flex-shrink: 2;
	pointer-events: none;
	background: var(--primary-shade);
	/* left: 0%; */
}
.schedule-dialog .modal-dialog figure.turnoff{
	/* left:100%; */
}
.schedule-dialog .modal-dialog .props{
	display:flex;
	flex-direction: column;
}
.schedule-dialog .modal-dialog .props li{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 1rem;
	font-size: 1.2rem;
	text-transform: capitalize;
}

.schedule-dialog .modal-dialog .props li .switch{
	font-size: 1.5rem;
	border-color: var(--dominant-color);
}

.schedule-dialog .modal-dialog .time-edit{
	font-size: 6rem;
	display: flex;
	justify-content: center;
	/* flex-shrink: 0; */
	/* flex-basis: 7rem; */
	font-weight: 100;
	position:relative;
}

.schedule-dialog .modal-dialog .time-edit > *{
	height: 1lh;
    line-height: 1em;
    text-align : center;    
}
.schedule-dialog .time-edit .jsl-vert-swipe-container {
    width : 2em;
    overflow: visible;
    /* background: red; */
}

.schedule-dialog .time-edit .jsl-vert-swipe-container li{
	list-style-type:none;
	/* background: red; */
}

.schedule-dialog .day-list{
	display:flex;
	flex-direction: row;
	justify-content: space-evenly;
	position:relative;
}
.schedule-dialog .day-list::before{
	content: attr(title);
	position:absolute;
	top: -1rem;
	left:1rem;
}

.schedule-dialog .day-list li{
	list-style-type:none;
	border-left:1px solid var(--dialog-header-color);
	flex-grow:1;
	text-align:center;
	font-size:1.5rem;
	flex-basis:calc(100% / 7);
}
.schedule-dialog .day-list li:first-child{
	border-left:none;
}
.schedule-dialog .day-list li.selected{
	font-weight: 400;
}
.schedule-dialog .day-list li:not(.selected){
	color: var(--main-background);
	font-weight:100;
}
.schedule-dialog .day-list:not(:has(li.selected)) li{
	font-weight:600;
	color:inherit;
}

.schedule-dialog .modal-dialog section.name{
	font-size: 1.6rem;
	display: flex;
	justify-content: center;
	flex-shrink: 0;
	flex-basis: 2lh;
	background:inherit;
	position:relative;
	flex-direction: column;
}

.schedule-dialog .modal-dialog section.name input{
	font-size:100%;
	padding:0;
	background:inherit;
	border:none;
	outline:none;
	color:inherit;
	margin:0 1rem;
	display:block;
	padding:0;
	/* border:1px solid red; */
	max-width:calc(100% - 2rem);
}
.schedule-dialog .modal-dialog section.name:has(input:valid:focus-visible)::before{
	content:'description';
	position:absolute;
	left: 0rem;
	top :-0.5rem;
	/* bottom: 0em; */
	font-size:80%;
	display: none;
}