/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */


 /* radio e switch */
  .custom-control-input:checked ~ .custom-control-label::before {
     color: #2196F3;
     border-color: #2196F3;
     background-color: #2196F3;
 }
 input[type=checkbox], input[type=radio] {
     margin-right: 5px;
     vertical-align: middle;
 }
 .radio-inputs {
     zoom: 1;
     font-size: 9px;
     line-height: 25px;
     display: flex;
     justify-content: center;
 }
 @media only screen and (max-width: 500px){
   .radio-inputs {
         display: flex-start !important;
       justify-content: left;
   }

 }
 .radio-gallery {
     background-color: #eee;
     border-radius: 50%;
     border-color: -internal-light-dark(rgb(20,20,20), rgb(195, 195, 195));
 }
 .radio-inputs span {
     font-size: 9px;
     line-height: 25px;
 }
 input:checked ~ .radio-gallery {
     background-color: #2196F3;
 }
 .custom-control-label {
     zoom: 1.6;
     font-size: 9px;
     line-height: 25px;
 }
 .custom-switch .custom-control-label::after {
     background-color: #765256;
 }
 .custom-control-label::before {
     border: #765256 solid 1px;
 }
 .custom-control-input:checked~.custom-control-label::before {
     color: #fff;
     border-color: #765256;
     background-color: #765256;
 }
 label {
     font-weight: 700;
     text-transform: uppercase;
     font-size: 8px;
     margin-top: -10px;
     margin-right: 5px;
 }

 /* end */

 .switch {
  position: relative;
  display: flex;
  width: 45px;
  height: 16px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0px;
  left: 0;
  right: -4px;
  bottom: -10px;
  background-color: #FFF;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 1px;
  bottom: 2px;
  background-color: #765256;
  border: 0px solid #765256;
  -webkit-transition: .4s;
  transition: .4s;
}
input + .slider {
  background-color: #FFF;
  border: 1px solid #E8E8E8
}

input:checked + .slider {
  background-color: #765256 !important;
  border: 2px solid #765256
}

input:focus + .slider {
  box-shadow: 0 0 1px #765256;
  border: 1px solid #EAEAEA
}

input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
  background-color: #FFFFFF !important
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

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

.switch-testo {
  color: #121212;
  text-transform: uppercase;
  padding-left: 50px;
  font-size: 12px;
}
.radio-inputs span {
    font-size: 7px;
    line-height: 25px;
    text-transform: uppercase
}
.switch-testo {
  font-size: 12px !important
}
/*input[type='radio']:after {
        width: 11px;
        height: 11px;
        border-radius: 15px;
        top: -1px;
        left: -1px;
        position: relative;
        background-color: transparent;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid #765256;
    }

input[type="radio"]:checked:after {
  width: 11px;
        height: 11px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #765256;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid #765256;
} */


.radio-container {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 12px;
  padding-right: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-right: 20px;
}

.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 26px;
  width: 26px;
  background-color: #FFF;
  border-radius: 50%;
  border: 1px solid #EAEAEA
}

.radio-container:hover input ~ .checkmark {
  background-color: #765256;
}

.radio-container input:checked ~ .checkmark {
  background-color: none;
  border: 2px solid #EAEAEA
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.radio-container input:checked ~ .checkmark:after {
  display: block;
  background: #765256!important;
    width: 20px;
    height: 20px;
    border-radius: 200px;
    margin-top: 1px;
    margin-left: 1px
}

.radio-container.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2196F3;
}