/*
Custom style for the jMeeoSwitch plugin
default class assigned to the container is:
.jmeeo-switch
*/

.jmeeo-switch {
  position: relative;
  outline: 0;
  display: inline-block;
  height: 1.5rem;
  cursor: pointer;
  user-select: none;
  margin: 0;
  opacity: 1;
}

.jmeeo-switch,
.jmeeo-switch:after,
.jmeeo-switch:before,
.jmeeo-switch *,
.jmeeo-switch *:after,
.jmeeo-switch *:before,
.jmeeo-switch + .jmeeo-switch-btn {
  box-sizing: border-box;
}

.jmeeo-switch::selection,
.jmeeo-switch:after::selection,
.jmeeo-switch:before::selection,
.jmeeo-switch *::selection,
.jmeeo-switch *:after::selection,
.jmeeo-switch *:before::selection,
.jmeeo-switch + .jmeeo-switch-btn::selection {
  background: none;
}

.jmeeo-switch-label {
  display: inline-block;
  margin-top: .2rem;
  margin: 0 !important;
  padding: 0 .4rem;
  line-height: 1rem;
  vertical-align: top;
}

.jmeeo-switch span {
  position: relative;
  display: inline-block;
  height: 1.36rem;
  line-height: 1;
  overflow: hidden;
  font-weight: normal;
  text-align: center;
  border-radius: 1rem;
  padding: 0.15rem;
  transition: color 0.3s ease, padding 0.3s ease-in-out, background 0.3s ease-in-out;
}

.jmeeo-switch span:before {
  position: relative;
  display: block;
  line-height: 1.4;
  padding: 0 0.15rem;
  font-size: .8rem;
}

.jmeeo-switch span:after {
  position: absolute;
  display: block;
  content: "";
  border-radius: 2rem;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: -1.25rem;
  top: 0.15rem;
  background: var(--main-text-color);
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 0.97), background 0.3s ease-in-out;
}

.jmeeo-switch input[type="checkbox"] {
  display: none !important;
}

.jmeeo-switch input[type="checkbox"]:not(:checked) + span {
  background: var(--bg-color-4);
  padding-left: 1.45rem;
  padding-right: 0.35rem;
}

.jmeeo-switch input[type="checkbox"]:not(:checked) + span:before {
  content: attr(data-off-content);
}

.jmeeo-switch input[type="checkbox"]:not(:checked) + span:after {
  background: var(--bg-color-2);
  left: 1.4rem;
}

.jmeeo-switch input[type="checkbox"]:checked + span {
  background: var(--portal-accent-color);
  color: var(--portal-accent-text-color);
  padding-left: 0.3rem;
  padding-right: 1.5rem;
}

.jmeeo-switch input[type="checkbox"]:checked + span:before {
  content: attr(data-on-content);
}

.jmeeo-switch input[type="checkbox"]:checked + span:after {
  background: var(--portal-accent-text-color);
  left: 100%;
}

.jmeeo-switch input[type="checkbox"]:disabled,
.jmeeo-switch input[type="checkbox"]:disabled + span{
  cursor: not-allowed;
}

.jmeeo-switch-big .jmeeo-switch-label {
  vertical-align: top !important;
  margin-top: .7rem !important;
}

.jmeeo-switch-big span {
  height: 2.35rem !important;
  padding-top: .55rem !important;
  border-radius: .5rem !important;
}

.jmeeo-switch-big span::before {
  padding: 0 .55rem !important;
  font-size: 1rem !important;
}

.jmeeo-switch-big span::after {
  height: 2.1rem !important;
  border-radius: .4rem !important;
}

.jmeeo-switch-nolabel .jmeeo-switch-label {
  display: none;
}