@charset "UTF-8";
/*!
 * Toggler Switch & Toggle Button Collection
 * Version: 1.0.0
 * Created: 14 Oct 2019
 * Last Update: 14 Oct 2019
 * Author: Web_Trendy
 * Copyright 2019 © Web_Trendy (https://codecanyon.net/user/web_trendy)
 * Licensed under Envato (https://codecanyon.net/licenses/standard)
 *
 * "Wherever you are, and whatever you do, be in love." -Rumi
 *
 */
/*------------------------------------------------------------------
[Table of contents]

1.0 Variables
2.0 General Styles / .toggler-wrapper
3.0 Effects Styles 
-------------------------------------------------------------------*/
/*--------------------------------------------------------------
1.0 Variables
--------------------------------------------------------------*/
/*--------------------------------------------------------------
2.0 General Styles
--------------------------------------------------------------*/
.toggler-wrapper {
  display: block;
  width: 45px;
  height: 25px;
  cursor: pointer;
  position: relative; }
  .toggler-wrapper input[type="checkbox"] {
    display: none; }
    .toggler-wrapper input[type="checkbox"]:checked + .toggler-slider {
      background-color: #44cc66; }
  .toggler-wrapper .toggler-slider {
    background-color: #ccc;
    position: absolute;
    border-radius: 100px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease; }
  .toggler-wrapper .toggler-knob {
    position: absolute;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease; }

/*--------------------------------------------------------------
3.0 Effects Styles 
--------------------------------------------------------------*/
/*Style 1*/
.toggler-wrapper.style-1 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
  left: calc(100% - 19px - 3px); }
.toggler-wrapper.style-1 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  border-radius: 50%;
  left: 3px;
  top: 3px;
  background-color: #fff; }

/*Style 2*/
.toggler-wrapper.style-2 {
  width: 67.5px; }
  .toggler-wrapper.style-2 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:before {
    opacity: 0.4; }
  .toggler-wrapper.style-2 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
    opacity: 1; }
  .toggler-wrapper.style-2 .toggler-knob {
    position: relative;
    height: 100%; }
    .toggler-wrapper.style-2 .toggler-knob:before {
      content: 'Off';
      position: absolute;
      top: 50%;
      left: 5px;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      font-size: 75%;
      text-transform: uppercase;
      font-weight: 500;
      color: white; }
    .toggler-wrapper.style-2 .toggler-knob:after {
      content: 'On';
      position: absolute;
      top: 50%;
      right: 5px;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      font-size: 75%;
      text-transform: uppercase;
      font-weight: 500;
      color: white;
      opacity: 0.4; }

/*Style 3*/
.toggler-wrapper.style-3 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
  left: calc(100% - 19px - 3px); }
.toggler-wrapper.style-3 .toggler-knob {
  width: calc(25px + 6px);
  height: calc(25px + 6px);
  border-radius: 50%;
  left: -3px;
  top: -3px;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 6px rgba(153, 153, 153, 0.75);
          box-shadow: 0 2px 6px rgba(153, 153, 153, 0.75); }

/*Style 4*/
.toggler-wrapper.style-4 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
  left: calc(100% - 19px - 3px); }
.toggler-wrapper.style-4 .toggler-knob {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  left: 0;
  top: 0;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 6px rgba(153, 153, 153, 0.75);
          box-shadow: 0 2px 6px rgba(153, 153, 153, 0.75); }

/*Style 5*/
.toggler-wrapper.style-5 input[type="checkbox"]:checked + .toggler-slider {
  background-color: #ccc; }
  .toggler-wrapper.style-5 input[type="checkbox"]:checked + .toggler-slider:before {
    background-color: #e6e6e6; }
  .toggler-wrapper.style-5 input[type="checkbox"]:checked + .toggler-slider:after {
    background-color: #44cc66; }
  .toggler-wrapper.style-5 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left: calc(100% - 19px - 3px); }
.toggler-wrapper.style-5 .toggler-slider:before {
  content: '';
  position: absolute;
  top: 50%;
  left: -12.5px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 8.3333333333px;
  height: 8.3333333333px;
  border-radius: 50%;
  background-color: #b3b3b3; }
.toggler-wrapper.style-5 .toggler-slider:after {
  content: '';
  position: absolute;
  top: 50%;
  right: -17.5px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 12.5px;
  height: 12.5px;
  border-radius: 50%;
  background-color: #e6e6e6; }
.toggler-wrapper.style-5 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  border-radius: 50%;
  left: 3px;
  top: 3px;
  background-color: #fff; }

/*Style 6*/
.toggler-wrapper.style-6 {
  width: 54px;
  -webkit-box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);
          box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.07)), to(rgba(255, 255, 255, 0))), #ddd;
  background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #ddd;
  border-radius: 100px; }
  .toggler-wrapper.style-6 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left: calc(100% - 19px - 3px + 5px); }
  .toggler-wrapper.style-6 .toggler-slider {
    -webkit-box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(68, 204, 102, 0.7) inset;
            box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(68, 204, 102, 0.7) inset;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.07)), to(rgba(255, 255, 255, 0.1))), #d0d0d0;
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #d0d0d0;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px); }
  .toggler-wrapper.style-6 .toggler-knob {
    width: calc(25px - 6px);
    height: calc(25px - 6px);
    border-radius: 50%;
    left: calc(3px - 5px);
    top: calc(3px - 5px);
    -webkit-box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.2em 0.2em -0.12em rgba(0, 0, 0, 0.5);
            box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.2em 0.2em -0.12em rgba(0, 0, 0, 0.5);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #f5f5f5), to(#eeeeee));
    background: linear-gradient(#f5f5f5 10%, #eeeeee); }

/*Style 7*/
.toggler-wrapper.style-7 input[type="checkbox"]:checked + .toggler-slider {
  background-color: white; }
  .toggler-wrapper.style-7 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left: calc(100% - 19px - 3px);
    background-color: #44cc66; }
.toggler-wrapper.style-7 .toggler-slider {
  background-color: white;
  -webkit-box-shadow: 2px 4px 8px rgba(200, 200, 200, 0.5);
          box-shadow: 2px 4px 8px rgba(200, 200, 200, 0.5);
  border-radius: 5px; }
.toggler-wrapper.style-7 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  border-radius: 5px;
  left: 3px;
  top: 3px;
  background-color: #e6e6e6; }

/*Style 8*/
.toggler-wrapper.style-8 input[type="checkbox"]:checked + .toggler-slider {
  background-color: #d9d9d9; }
  .toggler-wrapper.style-8 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left: calc(100% - 19px - 3px);
    background: conic-gradient(#43A047, #255827);
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); }
.toggler-wrapper.style-8 .toggler-slider {
  background-color: #d9d9d9; }
.toggler-wrapper.style-8 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  border-radius: 50%;
  left: 3px;
  top: 3px;
  background: conic-gradient(#E53935, #9f1815); }

/*Style 9*/
.toggler-wrapper.style-9 input[type="checkbox"]:checked + .toggler-slider {
  background-color: transparent; }
  .toggler-wrapper.style-9 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left: calc(100% - 19px - 3px);
    background-color: #44cc66; }
.toggler-wrapper.style-9 .toggler-slider {
  background-color: transparent;
  border: 2px solid #b3b3b3; }
.toggler-wrapper.style-9 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  border-radius: 50%;
  left: 3px;
  top: 3px;
  background-color: #b3b3b3; }

/*Style 10*/
.toggler-wrapper.style-10 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
  left: calc(100% - 19px - 3px); }
.toggler-wrapper.style-10 .toggler-slider {
  background-color: #ccc; }
.toggler-wrapper.style-10 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  border-radius: 50%;
  left: 3px;
  top: 3px;
  border: 2px solid #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

/*Style 11*/
.toggler-wrapper.style-11 input[type="checkbox"]:checked + .toggler-slider:after {
  content: 'On'; }
.toggler-wrapper.style-11 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
  left: calc(100% - 19px - 3px); }
.toggler-wrapper.style-11 .toggler-slider:after {
  content: 'Off';
  position: absolute;
  top: 50%;
  right: -25px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 75%;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.7; }
.toggler-wrapper.style-11 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  border-radius: 50%;
  left: 3px;
  top: 3px;
  background-color: #fff; }

/*Style 12*/
.toggler-wrapper.style-12 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
  left: calc(100% - 19px - 3px);
  background-image: url(../img/lock-fill.svg); }
.toggler-wrapper.style-12 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  border-radius: 50%;
  left: 3px;
  top: 3px;
  background-color: #fff;
  background-image: url(../img/lock-unlock-fill.svg);
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: center; }

/*Style 13*/
.toggler-wrapper.style-13 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
  left: calc(100% - 19px - 3px); }
  .toggler-wrapper.style-13 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
    content: 'On'; }
.toggler-wrapper.style-13 .toggler-knob {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  left: 0;
  top: 0;
  background-color: #fff;
  -webkit-box-shadow: 0 2px 6px rgba(153, 153, 153, 0.75);
          box-shadow: 0 2px 6px rgba(153, 153, 153, 0.75); }
  .toggler-wrapper.style-13 .toggler-knob:after {
    content: 'Off';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    font-size: 65%;
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0.7; }

/*Style 14*/
.toggler-wrapper.style-14 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
  left: calc(100% - 18.75px); }
.toggler-wrapper.style-14 .toggler-knob {
  width: 12.5px;
  height: 12.5px;
  top: 50%;
  left: 6.25px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 50%;
  background-color: #fff; }

/*Style 15*/
.toggler-wrapper.style-15 {
  left: 30px; }
  .toggler-wrapper.style-15 input[type="checkbox"]:checked + .toggler-slider:before {
    opacity: 0.5; }
  .toggler-wrapper.style-15 input[type="checkbox"]:checked + .toggler-slider:after {
    opacity: 1; }
  .toggler-wrapper.style-15 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left: calc(100% - 19px - 3px); }
  .toggler-wrapper.style-15 .toggler-slider:before {
    content: 'Off';
    position: absolute;
    top: 50%;
    left: -30px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    font-size: 75%;
    text-transform: uppercase;
    font-weight: 500; }
  .toggler-wrapper.style-15 .toggler-slider:after {
    content: 'On';
    position: absolute;
    top: 50%;
    right: -25px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    font-size: 75%;
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0.5; }
  .toggler-wrapper.style-15 .toggler-knob {
    width: calc(25px - 6px);
    height: calc(25px - 6px);
    border-radius: 50%;
    left: 3px;
    top: 3px;
    background-color: #fff; }

/*Style 16*/
.toggler-wrapper.style-16 input[type="checkbox"]:checked + .toggler-slider {
  background-color: white; }
  .toggler-wrapper.style-16 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left: calc(100% - 19px - 3px);
    background-color: #44cc66; }
.toggler-wrapper.style-16 .toggler-slider {
  background-color: white;
  -webkit-box-shadow: 2px 4px 8px rgba(200, 200, 200, 0.5);
          box-shadow: 2px 4px 8px rgba(200, 200, 200, 0.5);
  border-radius: 0; }
.toggler-wrapper.style-16 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  left: 3px;
  top: 3px;
  background-color: #e6e6e6; }

/*Style 17*/
.toggler-wrapper.style-17 input[type="checkbox"]:checked + .toggler-slider {
  background-color: white; }
  .toggler-wrapper.style-17 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left: calc(100% - 19px - 3px);
    background-color: #44cc66; }
.toggler-wrapper.style-17 .toggler-slider {
  background-color: transparent;
  border-radius: 0;
  border: 2px solid #b3b3b3; }
.toggler-wrapper.style-17 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  left: 3px;
  top: 3px;
  background-color: #b3b3b3; }

/*Style 18*/
.toggler-wrapper.style-18 input[type="checkbox"]:checked + .toggler-slider {
  background-color: #44cc66; }
  .toggler-wrapper.style-18 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left: calc(100% - 19px - 3px); }
.toggler-wrapper.style-18 .toggler-slider {
  -webkit-box-shadow: 2px 4px 8px rgba(200, 200, 200, 0.5);
          box-shadow: 2px 4px 8px rgba(200, 200, 200, 0.5);
  border-radius: 0; }
.toggler-wrapper.style-18 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  left: 3px;
  top: 3px;
  background-color: white; }

/*Style 19*/
.toggler-wrapper.style-19 input[type="checkbox"]:checked + .toggler-slider {
  background-color: white;
  border-color: #44cc66; }
  .toggler-wrapper.style-19 input[type="checkbox"]:checked + .toggler-slider:after {
    content: 'Yes'; }
  .toggler-wrapper.style-19 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left: calc(100% - 19px - 3px);
    background-color: #44cc66; }
.toggler-wrapper.style-19 .toggler-slider {
  background-color: transparent;
  border-radius: 0;
  border: 2px solid #b3b3b3; }
  .toggler-wrapper.style-19 .toggler-slider:after {
    content: 'No';
    position: absolute;
    top: 50%;
    right: -30px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    font-size: 75%;
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0.7; }
.toggler-wrapper.style-19 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  left: 3px;
  top: 3px;
  background-color: #b3b3b3; }

/*Style 20*/
.toggler-wrapper.style-20 {
  width: 81px;
  text-align: center; }
  .toggler-wrapper.style-20 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    background-image: url(../img/check-fill.svg); }
    .toggler-wrapper.style-20 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:before {
      opacity: 0.4; }
    .toggler-wrapper.style-20 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
      opacity: 1; }
  .toggler-wrapper.style-20 .toggler-slider {
    background-color: #eb4f37; }
  .toggler-wrapper.style-20 .toggler-knob {
    position: relative;
    height: 100%;
    background-image: url(../img/close-fill.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    display: inline-block;
    left: -2px; }
    .toggler-wrapper.style-20 .toggler-knob:before {
      content: 'No';
      position: absolute;
      top: 50%;
      left: -20px;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      font-size: 75%;
      text-transform: uppercase;
      font-weight: 500;
      color: white; }
    .toggler-wrapper.style-20 .toggler-knob:after {
      content: 'Yes';
      position: absolute;
      top: 50%;
      right: -23px;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      font-size: 75%;
      text-transform: uppercase;
      font-weight: 500;
      color: white;
      opacity: 0.4; }

/*Style 21*/
.toggler-wrapper.style-21 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
  left: calc(100% - 19px - 3px);
  background-image: url(../img/shut-down-line-on.svg); }
.toggler-wrapper.style-21 .toggler-slider {
  background-color: #eb4f37; }
.toggler-wrapper.style-21 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  border-radius: 50%;
  left: 3px;
  top: 3px;
  background-color: #fff;
  background-image: url(../img/shut-down-line-off.svg);
  background-repeat: no-repeat;
  background-position: center; }

/*Style 22*/
.toggler-wrapper.style-22 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
  left: calc(100% - 19px - 3px);
  -webkit-transform: scale(1);
          transform: scale(1); }
.toggler-wrapper.style-22 .toggler-slider {
  background-color: #eb4f37; }
.toggler-wrapper.style-22 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  border-radius: 50%;
  left: 3px;
  top: 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: white;
  -webkit-transform: scale(0.5);
          transform: scale(0.5); }

/*Style 23*/
.toggler-wrapper.style-23 input[type="checkbox"]:checked + .toggler-slider {
  background-color: transparent;
  border-color: #44cc66; }
  .toggler-wrapper.style-23 input[type="checkbox"]:checked + .toggler-slider:before {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 0.7; }
  .toggler-wrapper.style-23 input[type="checkbox"]:checked + .toggler-slider:after {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px); }
  .toggler-wrapper.style-23 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left: calc(100% - 19px - 3px);
    background-color: #44cc66; }
.toggler-wrapper.style-23 .toggler-slider {
  background-color: transparent;
  border: 2px solid #eb4f37; }
  .toggler-wrapper.style-23 .toggler-slider:before {
    content: 'Accept';
    position: absolute;
    top: 8px;
    right: -60px;
    font-size: 75%;
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px); }
  .toggler-wrapper.style-23 .toggler-slider:after {
    content: 'Decline';
    position: absolute;
    top: 8px;
    right: -60px;
    font-size: 75%;
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0.7;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease; }
.toggler-wrapper.style-23 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  border-radius: 50%;
  left: 3px;
  top: 3px;
  background-color: #eb4f37; }

/*Style 24*/
.toggler-wrapper.style-24 {
  width: 90px; }
  .toggler-wrapper.style-24 input[type="checkbox"]:checked + .toggler-slider {
    border-color: #44cc66; }
    .toggler-wrapper.style-24 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
      left: calc(100% - 37.5px); }
      .toggler-wrapper.style-24 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
        content: 'On'; }
  .toggler-wrapper.style-24 .toggler-slider {
    border-radius: 0;
    background-color: #eb4f37;
    border: 2px solid #eb4f37; }
  .toggler-wrapper.style-24 .toggler-knob {
    width: 37.5px;
    height: 25px;
    border-radius: 0;
    left: 0;
    top: 0;
    background-color: #fff; }
    .toggler-wrapper.style-24 .toggler-knob:after {
      content: 'Off';
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      font-size: 75%;
      text-transform: uppercase;
      font-weight: 500;
      opacity: 0.7;
      -webkit-transition: all 300ms ease;
      transition: all 300ms ease; }

/*Style 25*/
.toggler-wrapper.style-25 input[type="checkbox"]:checked + .toggler-slider {
  background-color: white; }
  .toggler-wrapper.style-25 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left: calc(100% - 19px - 3px);
    background-color: #44cc66;
    background-image: url(../img/check-fill.svg); }
.toggler-wrapper.style-25 .toggler-slider {
  background-color: white;
  -webkit-box-shadow: 2px 4px 8px rgba(200, 200, 200, 0.5);
          box-shadow: 2px 4px 8px rgba(200, 200, 200, 0.5);
  border-radius: 5px; }
.toggler-wrapper.style-25 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  border-radius: 5px;
  left: 3px;
  top: 3px;
  background-color: #ccc;
  background-image: url(../img/close-fill.svg);
  background-repeat: no-repeat;
  background-position: center; }

/*Style 26*/
.toggler-wrapper.style-26 input[type="checkbox"]:checked + .toggler-slider {
  background-color: #d9d9d9; }
  .toggler-wrapper.style-26 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
    left: calc(100% - 19px - 3px);
    background-color: #44cc66; }
    .toggler-wrapper.style-26 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
      content: '1'; }
.toggler-wrapper.style-26 .toggler-slider {
  background-color: #d9d9d9; }
.toggler-wrapper.style-26 .toggler-knob {
  width: calc(25px - 6px);
  height: calc(25px - 6px);
  border-radius: 50%;
  left: 3px;
  top: 3px;
  background-color: #eb4f37; }
  .toggler-wrapper.style-26 .toggler-knob:after {
    content: '0';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    font-size: 75%;
    text-transform: uppercase;
    font-weight: 500;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    color: white; }

/*Style 27*/
.toggler-wrapper.style-27 {
  width: 54px;
  height: 30px; }
  .toggler-wrapper.style-27 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:before {
    left: -100%; }
  .toggler-wrapper.style-27 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
    right: 3px; }
  .toggler-wrapper.style-27 .toggler-knob {
    width: 100%;
    height: 100%;
    overflow: hidden; }
    .toggler-wrapper.style-27 .toggler-knob:before {
      content: 'No';
      position: absolute;
      width: calc(30px - 6px);
      height: calc(30px - 6px);
      border-radius: 50%;
      left: 3px;
      top: 3px;
      background-color: #fff;
      -webkit-transition: all 300ms ease;
      transition: all 300ms ease;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      font-size: 75%;
      font-weight: 500; }
    .toggler-wrapper.style-27 .toggler-knob:after {
      content: 'Yes';
      position: absolute;
      width: calc(30px - 6px);
      height: calc(30px - 6px);
      border-radius: 50%;
      right: -100%;
      top: 3px;
      background-color: #fff;
      -webkit-transition: all 300ms ease;
      transition: all 300ms ease;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      font-size: 75%;
      font-weight: 500; }

/*Style 28*/
.toggler-wrapper.style-28 {
  width: 54px;
  height: 30px; }
  .toggler-wrapper.style-28 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:before {
    top: -100%; }
  .toggler-wrapper.style-28 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
    top: 3px; }
  .toggler-wrapper.style-28 .toggler-knob {
    width: 100%;
    height: 100%;
    overflow: hidden; }
    .toggler-wrapper.style-28 .toggler-knob:before {
      content: 'No';
      position: absolute;
      width: calc(30px - 6px);
      height: calc(30px - 6px);
      border-radius: 50%;
      left: 3px;
      top: 3px;
      background-color: #fff;
      -webkit-transition: all 300ms ease;
      transition: all 300ms ease;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      font-size: 75%;
      font-weight: 500; }
    .toggler-wrapper.style-28 .toggler-knob:after {
      content: 'Yes';
      position: absolute;
      width: calc(30px - 6px);
      height: calc(30px - 6px);
      border-radius: 50%;
      right: 3px;
      top: -100%;
      background-color: #fff;
      -webkit-transition: all 300ms ease;
      transition: all 300ms ease;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      font-size: 75%;
      font-weight: 500; }

/*Style 29*/
.toggler-wrapper.style-29 {
  width: 54px;
  height: 30px; }
  .toggler-wrapper.style-29 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:before {
    top: 100%; }
  .toggler-wrapper.style-29 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
    top: 3px; }
  .toggler-wrapper.style-29 .toggler-knob {
    width: 100%;
    height: 100%;
    overflow: hidden; }
    .toggler-wrapper.style-29 .toggler-knob:before {
      content: 'No';
      position: absolute;
      width: calc(30px - 6px);
      height: calc(30px - 6px);
      border-radius: 50%;
      left: 3px;
      top: 3px;
      background-color: #fff;
      -webkit-transition: all 300ms ease;
      transition: all 300ms ease;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      font-size: 75%;
      font-weight: 500; }
    .toggler-wrapper.style-29 .toggler-knob:after {
      content: 'Yes';
      position: absolute;
      width: calc(30px - 6px);
      height: calc(30px - 6px);
      border-radius: 50%;
      right: 3px;
      top: 100%;
      background-color: #fff;
      -webkit-transition: all 300ms ease;
      transition: all 300ms ease;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      font-size: 75%;
      font-weight: 500; }

/*Style 30*/
.toggler-wrapper.style-30 {
  width: 54px;
  height: 30px;
  -webkit-perspective: 100px;
          perspective: 100px; }
  .toggler-wrapper.style-30 input[type="checkbox"]:checked + .toggler-slider {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transition-delay: 300ms;
            transition-delay: 300ms; }
    .toggler-wrapper.style-30 input[type="checkbox"]:checked + .toggler-slider .toggler-knob {
      -webkit-transform: rotateY(180deg);
              transform: rotateY(180deg);
      -webkit-transition-delay: 300ms;
              transition-delay: 300ms; }
      .toggler-wrapper.style-30 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:before {
        left: -100%; }
      .toggler-wrapper.style-30 input[type="checkbox"]:checked + .toggler-slider .toggler-knob:after {
        right: 3px; }
  .toggler-wrapper.style-30 .toggler-knob {
    width: 100%;
    height: 100%;
    overflow: hidden; }
    .toggler-wrapper.style-30 .toggler-knob:before {
      content: 'No';
      position: absolute;
      width: calc(30px - 6px);
      height: calc(30px - 6px);
      border-radius: 50%;
      left: 3px;
      top: 3px;
      background-color: #fff;
      -webkit-transition: all 300ms ease;
      transition: all 300ms ease;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      font-size: 75%;
      font-weight: 500; }
    .toggler-wrapper.style-30 .toggler-knob:after {
      content: 'Yes';
      position: absolute;
      width: calc(30px - 6px);
      height: calc(30px - 6px);
      border-radius: 50%;
      right: -100%;
      top: 3px;
      background-color: #fff;
      -webkit-transition: all 300ms ease;
      transition: all 300ms ease;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      font-size: 75%;
      font-weight: 500; }

/* :) Let's meke internet BEAUTIFUL*/
/*
 _       __     __       ______                    __
| |     / /__  / /_     /_  __/_______  ____  ____/ /_  __
| | /| / / _ \/ __ \     / / / ___/ _ \/ __ \/ __  / / / /
| |/ |/ /  __/ /_/ /    / / / /  /  __/ / / / /_/ / /_/ /
|__/|__/\___/_.___/    /_/ /_/   \___/_/ /_/\__,_/\__, /
                                                 /____/
*/

/*# sourceMappingURL=toggler.css.map */