@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

body{
	font-family: "Roboto Condensed", sans-serif;
  font-size: 12px;
}

.onoffswitch {
    position: relative; width: 90px; height:36px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ВКЛ";
    padding-left: 10px;
    background-color: #91DB7F; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "ИЗКЛ";
    padding-right: 10px;
    background-color: #FFE8E8; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 56px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}

.plus {
  --b: 3px; /* the thickness */
  width: 10px; /* the size */
  aspect-ratio: 1;
  border: 5px solid #538dd5; /* the outer space */
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#538dd5 90deg,#fff 0) 
    calc(100% + var(--b)/2) calc(100% + var(--b)/2)/
    calc(50%  + var(--b))   calc(50%  + var(--b));
  display: inline-block;
  cursor: pointer;
}

.alt {
  border: none;
  margin: 10px;
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#fff 90deg,#000 0) 
    calc(100% + var(--b)/2) calc(100% + var(--b)/2)/
    calc(50%  + var(--b))   calc(50%  + var(--b));
}
.radius {
  border-radius: 15%;
}

.valve-container {
	float:left;
	width:450px;	
}

.schedule-container {
  float: left;
  width: 420px;
  padding-top: 10px;
}

.plus-container {
  float: left;
  width: 100%;
  padding-top: 10px;
}

.schedule-container-active {
	float: left;
	width:100%;
}

.schedule-container-start {
	float: left;
	width:100%;
}

.schedule-container-end {
	float: left;
	width:100%;
}

.schedule-container-weekdays {
	float: left;
	width:100%;
}

.weekday {
	float: left;
  width: 35px;
  height: 40px;
  padding-top: 10px;
  font-family: verdana;
  font-size: 12px;
}

.rubber-indicator {
  width: 100%;
}

.weekdays-list {
		float: left;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
}

.weekdays-list .weekdays-day {
   position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
    cursor: pointer;
}

.weekdays-day:hover {
    background-color: #eee;
    font-weight: bold;
    border: 1px solid white;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

.weekdays-list .weekday-selected {
    background-color: #eee;
    font-weight: bold;
    border: 1px solid white;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

.weekdays-list :first-child{
    border-left: 1px solid #dee2e6;
}

.weekdays-list :last-child{
    border-right: 1px solid #dee2e6;
}


.schedule-label {
	float: left;
	width:70px;	
}

.plusSchedule {
	padding-top: 30px;
}

.listSchedule {
	padding-top: 0px;
}


.plusButton {
  background-color: #538dd5;
  border: none;
  border-radius:10px;
  color: white;
  padding: 6px 12px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}