﻿@charset "utf-8";


@media screen and (max-width: 680px){


.checkList{
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 15px;
	border-bottom: 1px solid #f0f0f0;
}

.checkbox{
	margin: 0;
	padding: 0;
	text-align: right;
}


.checkList > label {
    display: flex;
    justify-content: space-between;
    clear: both; 
    margin: 0;
    padding: 0;
    font-size: 1rem;
}



.CheckboxInput {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}
.CheckboxInput-Input {
  margin: 0;
  width: 0;
  opacity: 0;
}
.CheckboxInput:hover{
  background: rgba(0,0,0,.05) !important;
}
.CheckboxInput:hover > .CheckboxInput-DummyInput{
  transform: scale(1.1);
}
.CheckboxInput-Input:focus + .CheckboxInput-DummyInput{
  transform: scale(1.1);
}
.CheckboxInput-Input:checked + .CheckboxInput-DummyInput {
  background: rgba(107, 26, 250, 1);
}
.CheckboxInput-Input:checked + .CheckboxInput-DummyInput::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35%;
  height: 4px;
  border-radius: 2px;
  transform: translate(-6px, 5px) rotateZ(-135deg);
  transform-origin: 2px 2px;
  background: #FFFFFF;
}
.CheckboxInput-Input:checked + .CheckboxInput-DummyInput::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 4px;
  border-radius: 2px;
  transform: translate(-6px, 5px) rotateZ(-45deg);
  transform-origin: 2px 2px;
  background: #FFFFFF;
}
.CheckboxInput-DummyInput {
  position: absolute;
  right: 15px;
  display: block;
  width: 34px;
  height: 34px;
  border: solid 2px transparent;
  background: rgba(0, 0, 0, .15);
  border-radius: 50%;
  transition: all .15s linear;
}
.CheckboxInput-LabelText { 
  display: block;
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
}


input[type=range].slider {
  -webkit-appearance: none;
  width: 100%;
  margin: 5px 0;
}
input[type=range].slider:focus {
  outline: none;
}

input[type=range].slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 6.7px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #c0c0c0;
  border-radius: 2.1px;
  border: 0px solid #010101;
}
input[type=range].slider::-webkit-slider-thumb {
  box-shadow: 1.7px 1.7px 1.6px #730000, 0px 0px 1.7px #8d0000;
  border: 0px solid #ff0000;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: rgba(255, 119, 186, 0.89);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}
input[type=range].slider:focus::-webkit-slider-runnable-track {
  background: #c0c0c0;
}



}/*end*/





@media screen and (min-width: 681px){


.checkList{
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 15px;
	border-bottom: 1px solid #f0f0f0;
}

.checkbox{
	margin: 0;
	padding: 0;
	text-align: right;
}


.checkList > label {
    display: flex;
    justify-content: space-between;
    clear: both; 
    margin: 0;
    padding: 0;
    font-size: 1rem;
}



.CheckboxInput {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}
.CheckboxInput-Input {
  margin: 0;
  width: 0;
  opacity: 0;
}
.CheckboxInput:hover{
  background: rgba(0,0,0,.05) !important;
}
.CheckboxInput:hover > .CheckboxInput-DummyInput{
  transform: scale(1.1);
}
.CheckboxInput-Input:focus + .CheckboxInput-DummyInput{
  transform: scale(1.1);
}
.CheckboxInput-Input:checked + .CheckboxInput-DummyInput {
  background: rgba(107, 26, 250, 1);
}
.CheckboxInput-Input:checked + .CheckboxInput-DummyInput::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35%;
  height: 4px;
  border-radius: 2px;
  transform: translate(-6px, 5px) rotateZ(-135deg);
  transform-origin: 2px 2px;
  background: #FFFFFF;
}
.CheckboxInput-Input:checked + .CheckboxInput-DummyInput::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 4px;
  border-radius: 2px;
  transform: translate(-6px, 5px) rotateZ(-45deg);
  transform-origin: 2px 2px;
  background: #FFFFFF;
}
.CheckboxInput-DummyInput {
  position: absolute;
  right: 15px;
  display: block;
  width: 34px;
  height: 34px;
  border: solid 2px transparent;
  background: rgba(0, 0, 0, .15);
  border-radius: 50%;
  transition: all .15s linear;
}
.CheckboxInput-LabelText { 
  display: block;
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
}

}/*end*/