.customSlider{
    margin-top: 4%;
    & .wrapper{
        position:relative;
        display:flex;
        align-items: center;
        flex-wrap: wrap;
        width:100%;
        overflow:hidden;
        justify-content:space-around;
        min-height: 50px;
        margin:0 0 10px 0;

        & i{
            &.f22{
                font-size:23px;
            }

            font-size: 23px;
            &:not([style*="color: lightgray"], [style*="color:lightgray"], [style*="color: rgb(229 207 144)"], [style*="color: rgb(169 150 154)"]) {
                filter: drop-shadow(0px 1px 1px rgba(90, 90, 90, .2));

                &[style="color: rgb(30, 144, 255);"]{
                    filter: drop-shadow(0px 1px 1px rgba(14, 70, 126, 0.2));
                }
                /* wifi */
                &[style="color: rgb(33, 150, 243);"]{
                    filter: drop-shadow(0px 1px 1px rgba(54, 68, 155, .4));

                    & ~ i:is([style*="color: lightgray"], [style*="color:lightgray"]){
                      color:rgb(166, 170, 202) !important;
                    }
                }
                /* outlets */
                &[style="color: rgb(153, 82, 19);"]{
                    filter: drop-shadow(0px 1px 1px rgba(77, 44, 32, 0.4));

                    & ~ i:is([style*="color: lightgray"], [style*="color:lightgray"]){
                      color:rgb(146, 131, 125) !important;
                    }
                }
                /* chair dark brown */
                &[style="color: rgb(193, 123, 104);"]{
                  filter: none;

                  & ~ i:is([style*="color: lightgray"], [style*="color:lightgray"]){
                    color:rgb(208, 184, 177) !important;
                  }
                }
                &:is([style="color: gold"],[style="color: gold;"]){
                    filter: drop-shadow(0px 1px 1px rgba(177, 150, 0, .9));

                    & ~ i:is([style*="color: lightgray"], [style*="color:lightgray"]){
                      color:rgb(235, 209, 137)!important;
                    }
                }
                &[style="color: rgb(108 74 129);"]{
                  filter: drop-shadow(0px 1px 1px rgba(110, 54, 155, 0.4));
                }
                /* &:is([style="color: #367e8a;"],[style="color: rgb(54, 126, 138);"]){
                  filter: drop-shadow(0px 1px 1px rgba(177, 150, 0, .9));
                } */
                /* attempt at brightening icon while increasing in slider value: NEEDS IMPROVEMENT */
                /* &:first-of-type{
                  filter:brightness(.9);
                }
                &:nth-of-type(2){
                  filter:brightness(.97);
                }
                &:nth-of-type(3){
                  filter:brightness(1.04) saturate(1.04);
                }
                &:nth-of-type(4){
                  filter:brightness(1.09) saturate(1.09);
                }
                &:nth-of-type(5){
                  filter:brightness(1.15) saturate(1.15);
                } */
            }
            &.f24{
                font-size:24px;
            }
            &.f25{
                font-size:25px;
            }
            &.f26{
                font-size:26px;
            }
            width:20%;
            text-align: center;

            &.gold:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(255, 215, 0, 0.5);
                mix-blend-mode: lighten;
                pointer-events: none;
            }
        }

        & img{
            font-size: 20px;
            width:17%;
            position: relative;
            user-select: none;

            &.sm{
              width: 8%;

              &[alt="Wifi symbol"] {
                width: 10%;
              }
            }
        }
    }
}

.cafe-tag {
  cursor: pointer;
  user-select: none;
  padding: 10px 15px;
  display: inline-block;
  margin: 5px;
  border-radius: 5px;
  opacity:.5;
  border:3px solid transparent;
  background: var(--white-bg-body);
}

.cafe-tag:hover {
  border-color: rgba(74, 149, 255, 0.445);

  &.drink-item{
    border-color:rgba(109, 118, 216, 0.445);
  }

  &.food-item{
    border-color:rgba(55, 203, 211, 0.445);
  }

  &.time{
    border-color:rgba(216, 176, 45, 0.445);
  }
}

.cafe-tag.active {
  opacity: 1;
  border: 3px solid rgb(74 150 255);
  background-color: var(--white-bg);
  box-shadow: var(--gray-box-shadow);

  &.drink-item{
    border-color:rgb(109 118 216);
    box-shadow: 0 1px 5px -2px rgb(44, 45, 126);
  }

  &.food-item{
    border-color:rgb(55 203 211);
    box-shadow: 0 1px 5px -2px rgb(51 104 24);
  }

  &.time{
    border-color:rgba(216, 176, 45);
    box-shadow: 0 1px 5px -2px rgb(117, 96, 25);
  }
}

.food-details {
  /* display: none; */
  opacity:.5;
  border:3px solid transparent;
  padding: 10px;
  margin: 5px;
  /* border: 1px solid #ccc; */
  border-radius: 14px;
  background-color: rgb(249, 249, 249);
  cursor: pointer;
}

.food-details.semiActive {
  opacity:1;
  background-color: rgb(245,245,245);
  border: 3px solid rgba(30,125,255,.6);
}

.food-details.active {
  /* display: block; */
  opacity: 1;
  border: 3px solid rgb(30,125,255);
  background-color: var(--white-bg);
  box-shadow: 0 1px 2px rgb(18, 56, 109);
}

.slidecontainer {
    width: 90%;
    margin:0 0 0 5%;
    cursor: pointer;
    position: absolute;
    top:-3px;
    right: 0;
    width: 100%;
    user-select: none;
  }
.slidecontainer + .label{
  width: 100%;
  text-align: center;
  margin-top: calc(1vh + 5px);
  font-size: var(--font-size-small);
  color:#555;
  height: 20px;
}
  
  .slidecontainer input{
    background:none;
    box-shadow:none;
    outline:none!important;
    user-select: none;
  }
  .slidecontainer input[type='range']::-webkit-slider-thumb{
    -webkit-appearance: none;
  }
  .slidecontainer input[type='range']::-moz-slider-thumb{
    -moz-appearance: none;
  }
  .slidecontainer input[type='range']::slider-thumb{
    appearance:none;
    outline:none;
    width:0;
    height:0;
  }
  .slidecontainer .slider {
    -webkit-appearance: none;
    height: 35px;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    margin-left: -10%;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    width: 110%;
  }
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    border:none;
    background: transparent;
    background-color:transparent;
    box-sizing: border-box;
    vertical-align: top;
    color: transparent;
    cursor: pointer;
    outline:none!important;
  }
  
  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: transparent;
    box-sizing: border-box;
    vertical-align: top;
    -webkit-appearance: none;
    color: transparent;
    cursor: pointer;
    outline:none;
  }
  .range-labels {
    margin: 18px 0 0 0;
    padding: 0;
    list-style: none;
  }
  .range-labels li{
      position: relative;
      float: left;
      width: 25%;
      text-align: center;
      background: transparent;
    box-sizing: border-box;
    vertical-align: top;
    -webkit-appearance: none;
    color: transparent;
      font-size: 14px;
      cursor: pointer;
  }
    .range-labels:before {
        position: absolute;
        top: -25px;
        right: 0;
        left: 0;
        content: "";
        margin: 0 auto;
        width: 9px;
        height: 9px;
        background: transparent;
      box-sizing: border-box;
      vertical-align: top;
      -webkit-appearance: none;
      color: transparent;
      border-radius: 50%;
      }
    .range-labels.activeSlide {
      background: transparent;
    box-sizing: border-box;
    vertical-align: top;
    -webkit-appearance: none;
    color: transparent;
    }
    
    .range-labels.selected:before {
      background: transparent;
    box-sizing: border-box;
    vertical-align: top;
    -webkit-appearance: none;
    color: transparent;
      background: #37adbf;
    }
    
    .range-labels.activeSlide.selected:before {
      background: transparent;
    box-sizing: border-box;
    vertical-align: top;
    -webkit-appearance: none;
    color: transparent;
      display: none;
    }
    .lightningsliders {
      min-width:18%!important;
      color:lightgray!important;
      cursor:pointer!important;
    }
  
    /*switch slider*/
    .checkBox{
        position: relative;
      width: 60px;
      height: 35px;
      background: #ccc;
      display: flex;
      align-items: center;
      cursor: pointer;
      border-radius: 8px;
    }
    .checkBox.lights.active ~ span{
      display: none;
    }
    .checkBox input{
        opacity: 0;
      width: 0;
      height: 0;
    }
    .checkBox .marker{
    }
    .checkBox .marker:before{
        content: 'auto';
      padding: 0;
      left: 13px;
      position: absolute;
      top: 3px;
      color: #777777;
    }
  
    .checkBox input:checked ~ .marker:before{
      position: absolute;
      top: 2.5px;
      height: 30px;
      width: 54px;
      left: 3px;
      background-color: white;
      -webkit-transition: .3s;
      transition: background .3s;
      z-index: 0;
      color:#00ac00;
      border-radius: 6px;
      box-shadow: 1px 1px 2px 1px rgba(73,72,70,.1), -1px -1px 2px 1px rgba(253,253,255,.1);
    }
    .switch {
      position: relative;
      display: inline-block;
      width: 90px;
      height: 38px;
    }
  
    .switch.sub {
      width: 82px;
    }
  
    .switch.xlg {
      width: 160px;
    }
    .switch.lg {
      width: 150px;
    }
    .switch.lg.status {
      width: 100px;
    }
    .switch.md {
      width: 100px;
    }
  
    .switch.md2{
      width: 110px;
    height: 30px;
    margin-left:1em;
    font-weight: normal;
    }
  
    /* Hide default HTML checkbox */
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
  
    /* The slider */
    .switch .slider {
      position: absolute;
      cursor: pointer;
      text-align:center;
      color:rgb(200,200,202);
      padding-bottom:3px;
      font-size:16px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }
  
    .switch.alwayson .slider {
      background-color: #2196F3;
      color:rgb(140,140,142);
      box-shadow: inset 1px 1px 2px 1px rgba(0,0,0,.1), inset -1px -1px 2px 1px rgba(253,253,255,.1);
    }
  
    .switch .slider.localglobal{
      font-size:14px;
      padding-bottom:1px;
      background: linear-gradient(320deg, rgb(255 201 147),rgb(255 211 131));
      box-shadow: inset .75px .3px 3px 1px rgba(80,50,0,.12), inset -1px -1px 2px 1px rgba(253,253,255,.1);
    }
  
    .switch.alwayson .slider.green {
      background-color: rgba(0, 172, 0,.8);
    }
  
    .switch .slider:before {
        position: absolute;
        height: 26px;
        width: 42px;
        padding-top: 1px;
        left: 5px;
        bottom: 5px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
        box-shadow: 1px 1px 2px 1px rgba(73, 72, 70, .1), -1px -1px 2px 1px rgba(253, 253, 255, .1);
    }

    .switch.xlg .slider:before {
      left: 6px;
    }
  
    .switch .slider.sub:before {
      width: 36px;
    }
  
    .switch.lg .slider:before {
      position: absolute;
      height: 26px;
      width: 90px;
      left: 7px;
      bottom: 4px;
    }
    .switch.lg .slider.contactsPublic:before{
      width: 115px;
    }
    .switch.xlg .slider.anyToday:before{
      width: 110px;
      bottom: 5px;
    }
    .switch.lg.status .slider:before {
      width: 75px;
    }
    .switch .slider.liveoffline:before {
      content: "offline";
    }
    .switch input:not(:checked) + .slider.liveoffline:after {
      content: '';
      top: -2px;
      margin-left: 22px;
      height: 13px;
      position: absolute;
      width: 13px;
      background: #fe8f34eb;
      border-radius: 50px;
      opacity: 0;
      animation: fadein ease .5s forwards;
    }
    .switch .slider.onoff:before {
      content: "off";
    }
    .switch .slider.yesno:before {
      content: "no";
    }
    .switch .slider.yesonly:before {
      content: "";
    }
    .switch .slider.privatepublic:before {
      content: "private";
    }
    .switch .slider.contactsPublic:before {
      content: "contacts only";
    }
    .switch .slider.anyToday:before {
      content: "Any day";
    }
    .switch .slider.localglobal:before {
      background-color: #fff9ed;
      content: "local";
      width:auto;
      height:22px;
      left:5px;
      padding:0 1em;
    }
    .switch .slider.specificrecurring:before, .switch .slider.specificradius:before {
      content: "specific";
    }
  
    .switch input:checked + .slider {
      background-color: #2196F3;
      box-shadow: inset 1px 1px 2px 1px rgba(0,0,0,.1), inset -1px -1px 2px 1px rgba(253,253,255,.1);
    }
  
    .switch input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }
  
    .switch input:checked + .slider.green {
      background-color: rgba(0, 172, 0,.8);
    }
  
    .switch input:focus + .slider.green {
      box-shadow: 0 0 1px rgba(0, 172, 0,.8);
    }
  
    .switch input:checked + .slider.localglobal {
      background-color: #f5ddb3;
      box-shadow: inset -.5px .3px 3px 1px rgba(80,50,0,.1), inset 1px -1px 2px 1px rgba(253,253,255,.1);
    }
  
    .switch input:checked + .slider:before {
      -webkit-transform: translateX(40px);
      -ms-transform: translateX(40px);
      transform: translateX(38px);
      color:rgb(140,140,142);
      box-shadow: -1px 1px 2px 1px rgba(0,0,0,.1), 1px -1px 2px 1px rgba(253,253,255,.1);
    }
  
    .switch input:checked + .slider:before {
      -webkit-transform: translateX(38px);
      -ms-transform: translateX(38px);
      transform: translateX(38px);
    }
  
    .switch.md2 input:checked + .slider:before {
      -webkit-transform: translateX(31px);
      -ms-transform: translateX(31px);
      transform: translateX(31px);
    }
  
    .switch.lg input:checked + .slider:before {
      -webkit-transform: translateX(47px);
      -ms-transform: translateX(47px);
      transform: translateX(47px);
      color:rgb(140,140,142);
    }
    .switch.lg input:checked + .slider.contactsPublic:before{
      -webkit-transform: translateX(21px);
      -ms-transform: translateX(21px);
      transform: translateX(21px);
    }
    .switch.xlg input:checked + .slider.anyToday:before{
      -webkit-transform: translateX(39px);
      -ms-transform: translateX(39px);
      transform: translateX(39px);
    }
    .switch.lg.status input:checked + .slider:before {
      -webkit-transform: translateX(12px);
      -ms-transform: translateX(12px);
      transform: translateX(12px);
      color:rgb(140,140,142);
    }
    .switch input:checked + .slider.onoff:before {
      content: "on";
    }
    .switch input:checked + .slider.liveoffline:before {
      content: "online";
    }
    .switch input:checked + .slider:is(.yesno, .yesonly):before {
      content: "yes";
    }
    .switch input:checked + .slider.privatepublic:before, .switch input:checked + .slider.contactsPublic:before {
      content: "public";
    }

    .switch input:checked + .slider.anyToday:before {
      content: "Today";
    }
    
    .switch input:checked + .slider.localglobal:before {
      content: "global";
    }
    .switch input:checked + .slider.specificrecurring:before {
      content: "recurring";
    }
    .switch input:checked + .slider.specificradius:before {
      content: "radius";
    }
  
    /* Rounded sliders */
    .switch .slider.round {
      border-radius: 10px;
    }
  
    .switch .slider.round:before {
      border-radius: 7px;
    }

    .range-slider {
        position: relative;
        width: 90%;
        margin:0 5%;
        text-align: center;
        display:flex;
        justify-content: space-between;
        overflow-x:hidden;
        overflow-y: hidden;
        background: transparent;
        flex-wrap:wrap;

        & .RangeInputs{
            width: 100%;
            position:relative;
            text-align:inherit;   
        }
    }
    .double-range-slider {
        position: relative;
        width: 90%;
        margin:0 5%;
        text-align: center;
        display:flex;
        justify-content: space-between;
        overflow-x:hidden;
        flex-wrap:wrap;
        height: 80px;

        & .doubleRangeInputs {
            width:100%;
            position:relative;
            text-align:inherit;
        }
    }
    .double-range-slider .rangeValues, .range-slider .rangeValues {
      justify-content: center;
      display:flex;
      overflow:hidden;
      width:100%;
      height:33px;
      padding: 5px 0 0 0;
    }
    .double-range-slider .rangeValues span, .range-slider .rangeValues span {
      width:33.33%;
    }
    .double-range-slider .rangeValues .label2, .range-slider .rangeValues .label2 {
      flex-grow:1;
      text-align:center;
    }

    .range-slider .rangeInputs {
      background:transparent;
      width:100%;
      position:relative;
      text-align:inherit;
      height:25px;
    }

    .double-range-slider input, .range-slider input {
        pointer-events: none;
        position: relative;
        overflow: hidden;
        left: 0;
        top: 0px;
        outline: none;
        margin: 0;
        padding: 0;
        height: 26px;
        -webkit-appearance: none;
        margin:0 0 10px 0;
        padding-right:5px;
        background:transparent;
        width: 100%;
        box-shadow: none;
    }
    .double-range-slider input{
      position: absolute;
      bottom: 5px;
      top: auto;
    }
    .double-range-slider input::-webkit-slider-thumb, .range-slider input::-webkit-slider-thumb {
        pointer-events: all;
        position: relative;
        z-index: 1;
        outline: none;
        border: 0px solid #000000;
        box-shadow: none;
        height: 20px;
        width: 40px;
        border-radius: 8px;
        background:rgb(30,125,255);
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -2px;
    }
    .double-range-slider input::-moz-range-thumb, .range-slider input::-moz-range-thumb {
        /*box-shadow: 0px 0px 0px #000;*/
        border: 0px solid #000000;
        height: 20px;
        width: 40px;
        border-radius: 12px;
        background: rgb(30,125,255);
        cursor: pointer;
    }
    .double-range-slider input::-webkit-slider-runnable-track, .range-slider input::-webkit-slider-runnable-track {
/*      width: 99.8%;*/
      height: 14px;
      cursor: pointer;
      transition: 0.2s ease;
      box-shadow: 1px 1px 1px #50555C;
      background: #50555C;
      border-radius: 6px;
      border: 0px solid #000000;
    }
    .double-range-slider input:focus::-webkit-slider-runnable-track, .range-slider input:focus::-webkit-slider-runnable-track {
      background: #50555C;
    }
    .double-range-slider input::-moz-range-track, .range-slider input::-moz-range-track {
        position: relative;
        z-index: -1;
        background-color: rgba(0, 0, 0, 1);
        border: 0;
    }
    .double-range-slider input:last-of-type::-moz-range-track {
        -moz-appearance: none;
        background: none transparent;
        border: 0;

        width: 100%;
        height: 14px;
        cursor: pointer;
        transition: 0.2s ease;
        box-shadow: 1px 1px 1px #50555C;
        background: #50555C;
        border-radius: 14px;
        border: 0px solid #000000;
    }
    .double-range-slider input[type=range]::-moz-focus-outer, .range-slider input[type=range]::-moz-focus-outer {
      border: 0;
    }

    .double-range-slider input[type=range]::-ms-track, .range-slider input[type=range]::-ms-track {
      width: 100%;
      height: 14px;
      cursor: pointer;
      transition: 0.2s ease;
      background: transparent;
      border-color: transparent;
      color: transparent;
    }
    .double-range-slider input[type=range]::-ms-fill-lower, .range-slider input[type=range]::-ms-fill-lower {
      background: #50555C;
      border: 0px solid #000000;
      border-radius: 28px;
      box-shadow: 1px 1px 1px #50555C;
    }
    .double-range-slider input[type=range]::-ms-fill-upper, .range-slider input[type=range]::-ms-fill-upper {
      background: #50555C;
      border: 0px solid #000000;
      border-radius: 28px;
      box-shadow: 1px 1px 1px #50555C;
    }
    .double-range-slider input[type=range]::-ms-thumb, .range-slider input[type=range]::-ms-thumb {
      margin-top: 1px;
      box-shadow: 0px 0px 0px #000000;
      border: 0px solid #000000;
      height: 20px;
      width: 40px;
      border-radius: 12px;
      background: #529DE1;
      cursor: pointer;
    }

    #timeRangePicker {
      width: 100%;
      position: relative;
      display: flex;
      padding: 2vh 3vw;
      justify-content: center;

      & .allSameTimeCheckBox{
        position: absolute;
        left: calc(30px + 1vw);
        height: 35px;
        display: flex;
        align-items: center;
        font-size: var(--font-size-small);
        bottom: max(calc(95px + 7vh), calc(125px + 4vh));

        & input{
          height: 20px;
          width: 20px;
          outline:none;
          border-radius: 6px;
        }

        &:after{
          content: 'all days same';
          margin-left: 2px;
        }
      }

      & .row{
        width: 50%;
        display: flex;
        justify-content: center;

        & .inputLabel{
          height: 45px;
          width: 90%;
          display: block;
          
          & div{
            width: 100%;
            margin-bottom: 2vh;
          }
          & input[type='time']{
            /* -webkit-appearance: none;
            appearance: none;
            outline: none;
            border: none; */
            width: 100%;
            height: 40px;
            border-radius: 6px;
            border: none;
            padding: 0 10px;
            box-shadow: var(--gray-light-box-shadow);
          }
        }
      }
  }
    
    .browser .confirmAvailability{
      bottom:65px;
    }
    .confirmAvailability{
      width: 93%;
      margin: 0 auto;
      height: 60px;
      padding: 0;
      position: absolute;
      right: 3.5%;
      z-index: 2;
      bottom: calc(35px + 3vh);
      max-width: none;

      & button{
        background:#ff916e;
        box-shadow: 0.5rem 0.75rem 0.25rem rgb(253 253 255 / 6%) inset, 0 -1.25rem 1.25rem rgb(0 0 3 / 2%) inset, 0 1.25rem 1.25rem rgb(254 254 255 / 3%) inset, inset 0.5px 1px 6px rgba(240, 240, 240, .3), inset 0px 0 10px rgb(0 0 2 / 3%), 0 1px 3px 0px rgb(0 0 0 / 10%);
        transition: transformease .2s;
        cursor: pointer;
        justify-content: center;
        border: none;
        outline: none;
        display: flex;
        align-items: center;
        width: auto;
        width: -webkit-fill-available;
        height: calc(3vh + 10px);
        min-height: 40px;
        border-radius: 8px;
        min-width: 60px;
        margin: 0 auto;
        max-width: 80%;
        padding: calc(1vh + 5px) 0;
        font-size: var(--font-size-h3);

        &:before{
          content:'Set';
        }
      }

    }
  
@media only screen and (min-width: 1030px) {

    .switch .slider {
        -webkit-transition: .2s;
        transition: .2s;
      }
      .switch.lg.status{
          width: 130px;
      }
      .switch .slider:before {
        -webkit-transition: .2s;
        transition: .2s;
      }
      .switch.lg.status input:checked + .slider:before {
        -webkit-transform: translateX(41px);
        -ms-transform: translateX(41px);
        transform: translateX(41px);
      }
      .checkBox input:checked ~ .marker:before{
        padding-top: 1px;
      }

      .switch input:not(:checked) + .slider.liveoffline:after {
        margin-left: 7px;
      }

}