:root {
    --color-primary-bg-surface: var(--color-amber-500) !important;
    --color-primary-bg-surface-hover: var(--color-amber-600) !important;
    --color-primary-theme-bg-surface: var(--color-amber-500) !important;
    --color-primary-theme-bg-surface-hover: var(--color-amber-600) !important;
}

html.dark{
    --color-primary-fg-on-surface: var(--color-amber-700) !important;
    --color-primary-bg-surface: var(--color-amber-700) !important;
    --color-primary-bg-surface-hover: var(--color-amber-800) !important;
    --color-primary-theme-bg-surface: var(--color-amber-700) !important;
    --color-primary-theme-bg-surface-hover: var(--color-amber-800) !important;
}

html.dark input {
    color-scheme: dark;
}
/* Map stuff */
#leafletmap{
    border-radius: 10px;
}
html.dark #leafletmap img.leaflet-tile, 
html.dark #leafletmap path.leaflet-interactive,
html.dark #leafletmap .leaflet-control-container > div,
html.dark #leafletmap .ll-marker-cluster{
    filter: brightness(0.9) contrast(1.4) invert(1) saturate(0);
}
html.dark #leafletmap{
    /* Dark mode map */
    //filter: brightness(0.8) contrast(0.8);
}
html.dark #leafletmap .satellite-map img.leaflet-tile {
    filter: invert(0) saturate(0.5) brightness(0.8) contrast(1.3);
}
#leafletmap:before{
    content: "";
    position: absolute;
    display: block;
    left:0; right:0; top: 0; bottom:0;
    pointer-events: none;
    z-index: 1000;
    box-shadow: inset 0 0 30px 3px rgba(0,0,0,0.2);
}

.dashboard #leafletmap{
    //aspect-ratio: 2/1;
    max-height: 800px;
    overflow: hidden;
}

.map-icon{
    background: grey;
    border-radius: 100%;
    display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
    box-shadow: 0 0 6px 2px rgba(0,0,0,0.2);
    transition: width 200ms;
    position: relative;
}

.leaflet-control-layers-toggle{
    width: 30px !important;
    height: 30px !important;
    background-image:none !important;
}
.leaflet-control-layers-toggle:before{
    content: "\eb2d";
    font-size: 1.5rem;
    display: block;
    color: #000;
    height: 30px;
    letter-spacing: 0;
    text-align: center;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: nova-icons!important;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 30px;
    text-transform: none;
}

.leaflet-control [type=checkbox]:checked, 
.leaflet-control [type=radio]:checked,
.leaflet-control [type=checkbox]:checked:focus,
.leaflet-control [type=checkbox]:checked:hover,
.leaflet-control [type=radio]:checked:focus,
.leaflet-control [type=radio]:checked:hover{
    background-color: var(--color-primary-bg-surface);
}

.map-icon.bg-red-100:before{
    content: "";
    position: absolute;
    display: block;
    left:0; right:0;
    top:0; bottom:0;
    border-radius: 100%;
    animation: pulse-animation-red 2s infinite;
}
.line-view-item.bg-red-100{
    animation: pulse-animation-red 2s infinite;
}
.nv-badge.bg-red-400{
    animation: pulse-animation-red-small 2s infinite;
}

@keyframes pulse-animation-red {
  0% {box-shadow: 0 0 0 0px rgba(255, 0, 0, 0.4);}
  100% {box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);}
}
@keyframes pulse-animation-red-small {
  0% {box-shadow: 0 0 0 0px rgba(255, 0, 0, 0.4);}
  100% {box-shadow: 0 0 0 6px rgba(255, 0, 0, 0);}
}

.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

.leaflet-cluster-spider-leg {
	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}

/*  */
.d-none{display: none !important;}
.bg-surface{background-color: var( --color-primary-theme-bg-surface);}
.underline{text-decoration: underline;}
.overflow-hide{overflow:hidden;}
.text-vertical-center{align-self: center;}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.header-title-logo img{
    max-height: 30px;
    width: 100px;
}

tr.interactive:hover{
    cursor: pointer;
    background-color: rgba(0,0,0,0.05);
}

.dark tr.interactive:hover{
    background-color: rgba(255,255,255,0.1);
}

/* Calendar */
#main-calendar{
    width: 100%;
    margin: auto;
}
#month-calendar {
    max-width: 1000px;
    margin: auto;
}
:root{
    --fc-today-bg-color: lightblue !important;
    --fc-page-bg-color: transparent !important;
}
.fc{
    --fc-border-color: transparent;
    --fc-bg-event-opacity: 1;
}
.fc .fc-daygrid-day.fc-day-today{
    background-color: var(--color-amber-200);
    font-weight: 800;
}
html.dark .fc .fc-daygrid-day.fc-day-today{
    background-color: var(--color-amber-600);
}
.fc .fc-daygrid-day-bg .fc-bg-event {
    z-index: -1;
}
#main-calendar .fc .fc-daygrid-day-frame{
    display: flex;
    align-items: center;
    justify-content: center;
}
#main-calendar .fc .fc-multimonth-compact .fc-multimonth-daygrid-table{
    height: 150px !important;
}
.fc-multimonth-header th{
    height: auto;
}
#main-calendar .fc .fc-view-harness{
    height: 700px !important;
}

.fc .fc-multimonth-multicol .fc-multimonth-month {
    padding: 0px 1.2em 0.6em 1.2em !important;
}

.fc .fc-multimonth-title {
    padding: 0 0 6px 0;
    font-size: 14px;
    font-weight: 500;
}
.fc .fc-daygrid-day-number {
    font-size: 12px;
    padding: 4px 8px 0px 0px;
}
.fc .fc-col-header-cell-cushion {
    font-size: 12px;
    font-weight: 700;
}
.fc .fc-daygrid-day-frame {
    line-height: 14px;
    height: 14px;
    padding-top: 2px;
}
#main-calendar.fc .fc-view-harness {
    height: 61vh !important;
}
#main-calendar .fc-multimonth-daygrid .fc-daygrid .fc-daygrid-body .fc-daygrid-body-balanced {
    margin-top: -24px !important;
}
#main-calendar .fc-past-month,
#main-calendar:not(.fc-past-month) .fc-day-past {
    opacity: 0.3;
}
.fc-theme-standard td, .fc-theme-standard th{
    border: none !important;
}
.fc-theme-standard .fc-timeGridWeek-view td, 
.fc-theme-standard .fc-timeGridWeek-view th {
    border-top: solid rgb(0 0 0 / 11%) 1px !important;
}
.fc{
    font-size: 12px;
}
#main-calendar .fc .fc-daygrid-day-top{
    justify-content: center;
}
.fc .fc-daygrid-bg-harness{
    margin: 2px 0;
}
.fc-event-draft{
    position: relative;
}
.fc-event-draft:before{
    content: '';
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: repeating-linear-gradient(
        -15deg,
        transparent,
        transparent 5px,
        rgba(255,255,255,0.9) 5px,
        rgba(255,255,255,0.9) 10px
    );
}
.fc .fc-day-disabled{
    opacity: 0;
}
.fc .nv-field-select select{cursor: pointer;}
#month-calendar .fc-event{
    border: none;
}
#month-calendar .fc-daygrid-day-frame{
    padding-bottom: 2rem;
}
/* Tower control */
.tower {
    position: relative;
    aspect-ratio: 3/4;
    background-image: url(/assets/img/tower.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 30%;
    position: relative;
    //border: solid red 1px;
    margin-bottom: 5vw;
    margin-top: 2vw;
}
.tower.type-1 {background-image: url(/assets/img/tower-type-1.svg);}
html.dark .tower {background-image: url(/assets/img/tower-white.svg);}
html.dark .tower.type-1 {background-image: url(/assets/img/tower-type-1-white.svg);}
.light, .module{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 18%;
    aspect-ratio: 1/1;
    border-radius: 100%;
    font-size: 2.5vw;
    transform: translateY(-50%);
    box-shadow: inset 0 0 0.7vw rgba(0,0,0,0.1);
    transition: all 0.15s ease;
    cursor: pointer;
}
.light:not(.n-a):hover, .module:not(.n-a):hover{
    transform: translateY(-50%) scale(1.1);
    box-shadow: inset 0 0 0.4vw rgba(255,255,255,0.3), 0 0 0.6vw rgba(0,0,0,0.15);
}
.light.n-a, .module.n-a{
    cursor: not-allowed !important;
    color: rgba(0,0,0,1);
    opacity: 0.4;
    font-size: 2vw;
    background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 0.4vw,
    rgba(0,0,0,0.3) 0.4vw,
    rgba(0,0,0,0.3) 0.8vw
);
}
html.dark .light.n-a, html.dark .module.n-a{
    color: rgba(255,255,255,1);
    background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 0.4vw,
    rgba(255,255,255,0.3) 0.4vw,
    rgba(255,255,255,0.3) 0.8vw
);
}
.light.top-middle{top: 3%; left: 41%;}
.light.top-left{top: 33%; left: 9%;}
.light.top-right{top: 33%; right: 9%;}
.light.middle-left{top: 57%; left: 9%;}
.light.middle-right{top: 57%; right: 9%;}
.light.bottom-left{top: 80%; left: 9%;}
.light.bottom-right{top: 80%; right: 9%;}
.module.battery{bottom: -15%; left: 18%}
.module.solar{ bottom: -15%; left: 41%}
.module.control{bottom: -15%; right: 18%}
.light[data-popover]:after, .module[data-popover]:after{
    content: attr(data-popover);
    position: absolute;
    bottom:-1.5vw;
    opacity: 0;
    font-size: 0.8vw;
    font-weight: bold;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    padding: 1vw;
    white-space: nowrap;
    transition: all 150ms ease-in-out;
}
.light[data-popover]:hover:after, .module[data-popover]:hover:after{
    bottom: -2.5vw;
    opacity: 1;
}

@media all and (max-width: 900px) {
    .tower {width: 50%;}
    .light, .module{font-size: 4vw;}
}
@media all and (max-width: 640px) {
    .tower {width: 100%; margin-bottom: 10vw;}
    .light, .module{font-size: 7vw;}
}

// Map marker clusters
.ll-marker-cluster {
    border: none !important;
}
.marker-cluster:before {
    background-color: rgba(231, 84, 32, 0.6);
}
.marker-cluster:after{
    background-color: rgba(255, 255, 255, 0.8);
}

.marker-cluster:before, .marker-cluster:after {
    content: '';
    position: absolute;
    display: block;
    pointer-events:none;
}
.marker-cluster:before{
    z-index: -1;
    left: -4px;
    right: -4px;
    top: -4px;
    bottom: -4px;
    border-radius: 10px;
    backdrop-filter: blur(3px);
} 
.marker-cluster:after {
    content: attr(data-count);
    color: #0d0d0d;
    z-index: 1;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    border-radius: 8px;
    display: flex !important;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
/* Line view */
.line-view{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	z-index: 20;
	position: relative;
	padding: 0 15px;
	margin-bottom: 35px;
}

.line-view.last{
	 justify-content: flex-start;
}
.line-view-item{
	width: 70px;
	height: 70px;
	border-radius: 100%;
	padding: 10px;
	background: #D3D3D3;
	z-index: 30;
	margin-right: calc((100vw - 110px - 700px) /9 );
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.line-view-item .popup{
	position: absolute;
	z-index: -1;
	top: 65px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	pointer-events: none;
	opacity:0;
	transition: opacity 0.4s ease-out, top 0.3s ease-out;
}

.line-view-item:hover .popup{
	opacity:1;
	top: 70px;
}

.line-view-item:after, 
.line-view .line-view-item:first-child:before{
	content: "";
	height: 0px;
	top: 50%;
	left: 100%; 
	width: calc((100vw - 110px - 700px) /9 );
	margin-top: -1px;
	position: absolute;
	display: block;
	border: solid rgba(0,0,0,0.4) 2px;
	border-width: 0 0 1px 0;
}
.dark .line-view-item:after, 
.dark .line-view .line-view-item:first-child:before{
	border-color: rgba(255,255,255,0.5);
}

.line-view .line-view-item:first-child:before{
	border-style: dashed;
	width: 20px;
	left: initial;
	right: 100%; 
}

.line-view.last .line-view-item:last-child:after,
.line-view.first .line-view-item:first-child:before,
.line-view.single .line-view-item:first-child:before,
.line-view.single .line-view-item:last-child:after{
	display: none;
}

.line-view .line-view-item:last-child:after{
	border-style: dashed;
	width: 20px;
}
.line-view-item:last-child{
	margin-right: 0;
}

/* Alarms (Alerts) */
.dynamic-filter .nv-btn.nv-btn-level-1 {
    width: 90%;
}

.dynamic-filter .nv-btn.nv-btn-level-1 span{
    width: 100%;
}

/* responsive */
@media all and (max-width: 1024px) {
    #main-calendar.fc .fc-view-harness {
        height: 660px !important;
    }
    .fc .fc-daygrid-day-frame {
        height: 22px;
    }
}

@media all and (max-width: 900px) {
    .line-view-item{
        width: 35px;
        height: 35px;
        margin-right: calc((100vw - 110px - 380px) /9 );
    }
    .line-view-item .popup{top : 15px;}
    .line-view-item:hover .popup{top : 35px;}
    .line-view-item:after{width: calc((100vw - 110px - 380px) /9 );}
    .line-view-item .nv-icon{font-size: 25px !important;}
}

@media all and (max-width: 520px) {
    .line-view-item{
        width: 25px;
        height: 25px;
        margin-right: calc((100vw - 110px - 280px) /9 );
    }
    .line-view-item .popup{top : 5px;}
    .line-view-item:hover .popup{top : 25px;}
    .line-view-item:after{width: calc((100vw - 110px - 280px) /9 );}
    .line-view-item .nv-icon{font-size: 20px !important;}
}


@media all and (max-width: 420px) {
    .line-view-item{
        width: 20px;
        height: 20px;
        margin-right: calc((100vw - 110px - 230px) /9 );
    }
    .line-view-item .popup{top : 15px;}
    .line-view-item:hover .popup{top : 20px;}
    .line-view-item:after{width: calc((100vw - 110px - 230px) /9 );}
    .line-view-item .nv-icon{font-size: 18px !important;}
}

/* Nova fixes */
.dark .nv-panel{
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: solid rgba(255, 255, 255, 0.1) 1px;
}

.dark .nv-dropdown-wrapper[data-show]{
    background-color: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(5px);
}
.align-stretch{
    align-items: stretch;
}
.nv-overlay{
    z-index: 1000 !important;
}
.nv-overlay-bkg{
    backdrop-filter: blur(2px) saturate(0.6) contrast(0.8);
}
.nv-badge{
    height: 22px;
    border-radius: 999px !important;
}
@media screen and (max-width: 640px){
    .nv-table tbody tr:last-child td{
        border-bottom-width: 1px !important;
    }
}
/* responsive */
@media all and (max-width: 900px) {
    .nv-stack.collapse-lg{
        flex-direction: column !important;
        display: flex !important;
        align-items: stretch !important;
    }
    .nv-stack.uncollapse-lg{
        flex-direction: row !important;
        justify-content: space-around;
    }
}
@media all and (max-width: 640px) {
    .nv-nav.collapse-md, .nv-stack.collapse-md{
        flex-direction: column !important;
        display: flex !important;
        align-items: stretch !important;
    }
    .nv-nav.collapse-md > a{margin:0.25rem 0.75rem !important;}
    .tower-select .nv-stack.collapse-md .nv-dropdown, .dashboard .nv-stack.collapse-md .nv-btn{margin: 0.3rem 0;}
    .tower-select .nv-stack.collapse-md .nv-dropdown .nv-btn, .dashboard .nv-stack.collapse-md .nv-btn{width: 100%; display: flex; justify-content: space-between;}
    .nv-stack.uncollapse-md{
        flex-direction: row !important;
        justify-content: space-around;
    }
}
.language-buttons{
    border: solid rgba(255,255,255,0.3) 1px !important;
}
.language-buttons button.nv-btn{
    background-color: inherit !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: var(--color-neutral-bg-surface-hover)!important;
}
html.dark .language-buttons button.nv-btn{
    color: var(--color-neutral-fg)!important;
}
.language-buttons button.nv-btn.active{
    font-weight: 800;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
}
html.dark .language-buttons button.nv-btn.active{
    box-shadow: inset 0 0 5px rgba(255,255,255,0.15);
}
.language-buttons button.nv-btn:hover{
    background-color: var(--color-primary-bg-surface-hover) !important;
}

.text-italic{
    font-style: italic;
}

.nowrap{
    white-space: nowrap;
}

.pull-right{float: right;}

nav.scheduling-menu{
    position: relative;
    margin-bottom: 10px;
}

.fix-right{
    position: absolute;
    right: 1.5rem;
}

.nv-field.regular,
.nv-field.regular .nv-field-input,
.nv-field.regular input{
    width: auto !important;
}
.nv-field.regular{
    overflow: visible;
}
.nv-field.regular .nv-field-input{
    border-radius: .5rem !important;
    border-width: 1px !important;
    background-color: var(--color-neutral-bg-canvas) !important;
    border-color: var(--color-neutral-border) !important;
    height: 25px;
}
.nv-field.regular input{
    padding: 5px 0 0 9px !important;
    font-size: .875rem !important;
    border-width: 0 !important;
    min-width: 55px;
    height: 25px;
}
.flex-center{
    display: flex !important;
    align-items: center !important;
}
.flex-end{
    display: flex !important;
    justify-content: flex-end !important;
}
.flex-start{
    display: flex !important;
    justify-content: flex-end !important;
}
.width-auto{
    width: auto !important;
}
.nv-dropdown.height-small button{
    height: 27px;
}

.event-form-modal{
    max-width: 90vw !important;
}

.button-modal{
    min-width: 70px;
}

.validation-message{
    color: var(--color-error-fg);
}

.icon-btn-container{
    white-space: nowrap;
}
.icon-btn{
    cursor: pointer;
    display: inline-block;
}
.notification-alert .nv-icon-sm{
    width: 1rem !important;
}
.notification-alert{
    position: absolute;
    width: auto !important;
    right: 2rem;
    white-space: nowrap;
    overflow: hidden !important;
}
.notification-alert .nv-alert-content{
    margin-right: 3rem;
}

.alertbox + .no-alerts{display: none;}
.alertbox:empty + .no-alerts{display: initial;}
.alert-box + .alert-box{margin-top:-1rem;}

.nv-table.nv-table-sm td{
    padding-top: 6px;
    padding-bottom: 6px;
}

.nv-table.nv-table-sm td, .nv-table td:before, .nv-table th {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.tmp-disabled{
    cursor: no-allowed;
    opacity: 0.4;
    filter: saturate(0.6);
}

.nv-alert.clickable{
    cursor: pointer;
}

.form-group{
    background-color: var(--color-primary-bg-subtle);
    border-radius: 5px;
}

.map-icon[data-alertcount]:after, .marker-cluster > span.alertcount{
    content: attr(data-alertcount);
    display:block;
    position: absolute;
    right:-9px;
    top:-9px;
    width: 20px;
    height: 20px;
    font-size:12px;
    border-radius: 10px;
    line-height: 20px;
    text-align:center;
    background: var(--color-error-bg-surface);
    color: var(--color-error-fg-on-surface);
    box-shadow: 0 0 3px 3px rgba(0,0,0,0.2);
    z-index: 2;
}
.marker-cluster > span.alertcount{
    transform: scale(0.75);
}

.map-icon[data-alertcount=0]:after{display:none !important;}

.relative{
    position: relative;
}
.toggle-control{
    position: absolute !important;
    right: 10px;
    top: 5px;
}

.collapse-panel{
    min-height: 55px;
}

.inline-input + .inline-input{
    margin-left: .5rem;
}
.inline-input{
    display: inline-block !important;
    min-width: 75px;
}
.inline-input-wide{
    min-width:120px;
}

.nv-btn.nv-link{
    text-decoration:none;
}

i.nv-icon-pylon{
    background-image: url(/assets/img/pylon.svg);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    background-size: 80% auto;
    background-position: center center;
}

i.nv-icon-pylon.text-red-500{
    background-image: url(/assets/img/pylon-green.svg);
}
i.nv-icon-pylon.text-green-500{
    background-image: url(/assets/img/pylon-red.svg);
}

.map-icon .tower-name{
    position: absolute;
    top: 75%;
    margin-top: 10px;
    font-weight: bold;
    opacity:0;
    transition: top 200ms, opacity 100ms;
    transition-timing-function: ease-in-out;
    pointer-events: none;
    box-shadow: 0 0 5px rgb(0 0 0 / 26%);
    backdrop-filter: blur(10px);
    padding: 2px 12px;
    border-radius: 10px;
}

.map-icon:hover .tower-name{
    top:100%;
    opacity: 0.95;
}

.fc-event-schedule-light{
    padding-left: 6px;
    padding-right: 6px;
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

footer.main-footer{
    position: fixed;
    right: 0;
    bottom:0;
    padding: 5px 3px;
    text-align: right;
    font-size: 10px;
    opacity: 0.33;
    pointer-events: none;
}

header.main-header > div{
    background-color: inherit !important;
}

.btn-download-excel + .btn-download-extended-excel{
    display:none;
}
.btn-download-excel:hover + .btn-download-extended-excel{
    display:block;
}
.btn-download-excel + .btn-download-extended-excel:hover{
    display:block;
}
.btn-download-extended-excel{
    position: absolute !important;
    right:0;
    top: 40px;
    z-index: 5;
}
.btn-download-extended-excel:before{
    position:absolute;
    content:'';
    display: block;
    right:0; width: 100%;
    height: 8px;
    top: -8px;
}
button[title="clear selection"]{
    background: transparent;
    position: absolute;
    right: 0;
}
button[title="clear selection"]:before{
    content: "×";
    width: 100%;
    text-align: center;
}

button.dark-mode-toggle span{
    pointer-events: none;
}

html button.dark-mode-toggle .dark-mode{display: block;}
html button.dark-mode-toggle .light-mode{display: none;}
html.dark button.dark-mode-toggle .dark-mode{display: none;}
html.dark button.dark-mode-toggle .light-mode{display: block;}