#page-body.opacity-25 input {
  
  pointer-events: none;
  
} 

img.bg {
	opacity: 0.2;
  max-height:40%;
}

img.business-logo {
  
  display: none;
  
}

img.business-logo.isin {
  
  display: inline-block;
  max-width: 90%;
  
}

textarea {
  
  border: none;
  height: 8em;
  
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 12em;
  height: 5em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.bsm-slider:before {
  
  background-image: url(../../bsm.png);
  background-size: 75%;
  background-position: center center;
  background-repeat: no-repeat;
  
}

.tdm-slider:before {
  
  background-image: url(../../tdm-logo.png);
  background-size: 75%;
  background-position: center center;
  background-repeat: no-repeat;
  
}

.ldg-slider:before {
  
  background-image: url(../../ldg.png);
  background-size: 75%;
  background-position: center center;
  background-repeat: no-repeat;
  
}

.slider:before {
  position: absolute;
  content: "";
  height: 4em;
  width: 4em;
  left: 0.5em;
  bottom: 0.5em;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider-label-out:before {
  position: absolute;
  content: "GONE";
  font-weight: bold;
  right: 1.25em;
  bottom: 0.85em;
  font-size: 1.5em;
  visibility: visible;
  opacity: 1;
}

.slider-label-in:before {
  position: absolute;
  content: "HERE";
  font-weight: bold;
  left: 1.25em;
  bottom: 0.85em;
  font-size: 1.5em;
  visibility: visible;
  opacity: 1;
}

input.inout:checked + span > .slider-label-out {
	visibility:hidden;
	opacity: 0;
	transition: visibility 0s, opacity 0.1s linear;
}

input.inout:not(:checked) + span > .slider-label-in {
	visibility:hidden;
	opacity: 0;
	transition: visibility 0s, opacity 0.1s linear;
}

div.bsm {
	transition: background-color 0.5s ease;
}

div.bsm input:checked + .slider {
  background-color: #a6ce89;
}

div.bsm input:focus + .slider {
  box-shadow: 0 0 1px #a6ce89;
}

div.bsm.isin {
	background-color: rgba(166, 206, 137, 0.35);
	transition: background-color 0.5s ease;
}

div.tdm {
	transition: background-color 0.5s ease;
}

div.tdm input#tdm:checked + .slider {
  background-color: #cc9e60;
}

div.tdm input#tdm:focus + .slider {
  box-shadow: 0 0 1px #cc9e60;
}

div.tdm.isin {
	background-color: rgba(204, 158, 96, 0.35);
}

div.tdm.ldg-isin {
  background-color: rgba(0, 0, 0, 0.15);
}

div.tdm input#ldg:checked + .slider {
  background-color: #d42;
}

div.tdm input#ldg:focus + .slider {
  box-shadow: 0 0 1px #d42;
}

input:checked + .slider:before {
  -webkit-transform: translateX(7em);
  -ms-transform: translateX(7em);
  transform: translateX(7em);
}

/* Rounded sliders */
.slider.round {
  border-radius: 5em;
}

.slider.round:before {
  border-radius: 50%;
}

div.form-checking {
	font-size: 2.5em;
}

label.form-checking-label{
	font-size: 0.5em;
	padding-top: 0.75em !important;
}

.pie {
  --b:22px;
  --w:6em;

  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  /* margin: 5px; */
  place-content: center;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
  
}

.pie:before,
.pie:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.pie:before {
  inset: 0;
  background:
	radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
	conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(99% - var(--b)));
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(99% - var(--b)));
  transition: conic-gradient 1s ease;
}

.pie:after {
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}

.no-round:before {
  background-size: 0 0, auto;
}

.no-round:after {
  content: none;
}

span.done-stuff {
  display: none;
}

span.done-date, span.done-stuff {
  font-size: 0.5em !important;
}

table tr {
  
  padding: 0;
  
}

tr.row_hour {
  
  background-color: #33333311
  
}

.tdm-spinner {
  
  width: 10em;
  height: 10em;
  
}

div#message-alert {
 
  cursor: pointer;
  
}

.table-container table td.time {
  
  font-size: 0.75em;
    
}

#week-upcoming .day-tablediv tbody {
  
  cursor: pointer;
  
}

div.week table td, div#today table td, div#tomorrow table td  {
  
  padding: 0 3px 0 3px;
  font-weight: bold;
   
}

td.room_1 {
   
  text-align: left;
  color: black;
  text-shadow: 2px 2px 1px #c6c6c6;
    
}

td.room_2 {
   
  text-align: right;
  color: white;
  text-shadow: 2px 2px 1px #000000;
    
}

div.week .row_hour {
    
    font-size: 0.5em
    
}

tr.row_hour_marker {
  
  border-bottom: 1px black solid;
  
}

tr.row_q_hour_marker {
  
  border-bottom: 1px #c6c6c6 dotted;
  
}

td {
  
  border: none;
  
}

td.time {
  
  font-size: 0.5em;
  height: 0.5em;
    
}

.app-time, .time, .calendar-label {
  
  background-image: linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.75));
  
}

td.app {
  
  border-right: 3px solid #999;
  border-left: 3px solid #999;
  background-image: linear-gradient(90deg,rgba(255,255,255,.15) 0%,rgba(0,0,0,0.25) 60%, rgba(0,0,0,.35) 100%);
  
}

.bg-free, .t_0, .t_49 {
  
  background-color: white !important;
  
}

.app-start, .app-end {
  
  height: 1em;
  
}

.app-body {
  
  height: 100%;
  
}

div.tomorrow {
  
  background-color: #ffffff;
  background-image: radial-gradient(circle at top center, #eeeeee44, #ffffff), repeating-radial-gradient(circle at top center, #eeeeee44, #ffffff, 10em, transparent 5em, transparent 10em);
  background-blend-mode: multiply;
  
}

.past {
  
  opacity: 0.35;
  background-image: linear-gradient(135deg,hsla(0,0%,100%,.2) 25%,rgba(17,17,17,.2) 0,rgba(17,17,17,.2) 50%,hsla(0,0%,100%,.2) 0,hsla(0,0%,100%,.2) 75%,rgba(17,17,17,.2) 0);
  background-size: 0.5em 0.5em;
  
}

.transfer-link {
  
  cursor: pointer;
  
}

#request-progress-container {
  
  overflow: hidden;
  transition: height 0.1s ease-out;
  
}

#request-progress-container.hide {
  
  visibility: hidden;
  overflow: hidden;
  transition: height 0.5s 1s ease-out;
  
}

#request-progress.hide {
  
  width: 0;
  transition: width 0s 0s !important;
  
}

@media only screen and (max-width: 768px) {
  
  label.switch {
	font-size: 12px;
  }
  
  div.form-checking {
	  font-size: 2em;
  }
  
  div.form-checking label{
    font-size: 0.5em;
  }
  
  span.done-date, span.done-stuff {
	  display: block;
    font-size: 0.45em!important;
  }
  
}