input[type=radio],
input[type=checkbox] {
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0;
    z-index: 0;
}

input[type=radio] + label,
input[type=checkbox] + label {
    color: #717777;
    cursor: pointer;
    height: 24px;
    padding: 0;
    z-index: 1;
}

input[type=radio] + label.white,
input[type=checkbox] + label.white { color: #ffffff; }

input[type=checkbox] + label > span,
input[type=radio] + label > span {
    background-color: #272728;
    border-bottom: 1px solid #5A5A5A;
    border-radius: 7px;
    display: inline-block;
    height: 14px;
    margin-bottom: -2px;
    margin-right: 5px;
    width: 14px;
}

input[type=checkbox] + label > span {
    border-radius: 2px;
    height: 24px;
    margin-bottom: -7px;
    padding: 4px;
    width: 24px;
}

input[type=radio]:focus + label > span,
input[type=radio]:focus + label:hover > span,
input[type=checkbox]:focus + label > span,
input[type=checkbox]:focus + label:hover > span { border-bottom: 1px solid #969C6C; }

input[type=radio] + label:hover > span,
input[type=checkbox] + label:hover > span { border-bottom: 1px solid #7B7B7B; }

input[type=radio]:checked + label > span:after {
    background-color: #9CA270;
    border-radius: 5px;
    content: " ";
    display: block;
    height: 8px;
    margin: 3px;
    width: 8px;
}

input[type=radio]:disabled:checked + label > span:after { background-color: #717777; }

input[type=checkbox] + label > span:after {
    -moz-transform: rotate(-45deg);
    -moz-transition: all 0.2s ease-out;
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -o-transition: all 0.2s ease-out;
    -webkit-transform: rotate(-45deg);
    -webkit-transition: all 0.2s ease-out;
    border-bottom: 3px solid #9CA270;
    border-left: 3px solid #9CA270;
    content: " ";
    display: block;
    height: 10px;
    margin-top: -10px;
    opacity: 0;
    transform: rotate(-45deg);
    transition: all 0.2s ease-out;
    width: 16px;
}

input[type=checkbox]:checked + label > span:after {
    margin-top: 0;
    opacity: 1;
}

input[type=checkbox].part-selection + label > span:after {
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    -webkit-transform: none;
    border-bottom: 3px solid #9CA270;
    border-left: none;
    content: " ";
    display: block;
    transform: none;
    width: 16px;
}

input[type=checkbox]:checked:disabled + label > span:after { border-color: #717777; }

input[type=radio]:disabled + label > span,
input[type=checkbox]:disabled + label > span {
    background-color: #2E2E2F;
    border-bottom: 1px solid #414141;
}

input[type=checkbox].toggled + label {
    background-color: #252526;
    border: none;
    border-radius: 15px;
    height: 25px;
    overflow: hidden;
    width: 65px;
}

input[type=checkbox].toggled + label:after {
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out;
    background-color: #BC5454;
    border-radius: 15px;
    content: " ";
    display: block;
    height: 19px;
/*    margin: -20px 3px 3px;*/
    top: 3px;
    position: absolute;
    transition: all 0.25s ease-out;
    width: 20px;
    z-index: 2;
}

input[type=checkbox].toggled:checked + label:after {
    background-color: #9CA270;
    margin-left: 42px;
}

input[type=checkbox].toggled + label > span {
    background: none;
    border: none;
    color: #ffffff;
    margin: -1px 0 0 4px;
    /*width: 10px;*/
    z-index: 1;
}

.toggled.ng-not-empty + label {
    position: relative;
}

.toggled + label:after {
    margin: 0 !important;
}
.toggled + label {
    position: relative;
}

input[type=checkbox].toggled:checked + label:after {
    left: calc(100% - 22px);
}

input[type=checkbox].toggled + label:after {
    left: 2px;
}

input[type=checkbox].toggled + label > span:first-child {
    float: left;
}

input[type=checkbox].toggled + label > span:last-child {
    float: right;
    margin: -1px 4px 0 0;
    width: auto;
}

input[type=checkbox].toggled + label > span:after,
input[type=checkbox].toggled:checked + label > span:after { display: none; }

input[type=checkbox].toggled:focus + label > span,
input[type=checkbox].toggled:focus + label:hover > span { border-bottom: none; }

input[type=checkbox].toggled:checked + label > span.on,
input[type=checkbox].toggled + label > span.off {
    -moz-transition: all 0.15s ease-out;
    -o-transition: all 0.15s ease-out;
    -webkit-transition: all 0.15s ease-out;
    opacity: 1;
    transition: all 0.15s ease-out;
}

input[type=checkbox] + label > span {
    -moz-transition: all 0.15s ease-out;
    -o-transition: all 0.15s ease-out;
    -webkit-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

input[type=checkbox].toggled:checked + label > span.off,
input[type=checkbox].toggled + label > span.on {
    opacity: 0;
}
input[type=checkbox].toggled.medium + label {
    border-radius: 20px;
    font-size: 19px;
    height: 28px;
    width: 80px;
}
input[type=checkbox].toggled.medium:checked + label:after {
    left: calc(100% - 24px);
}

input[type=checkbox].toggled.medium + label:after {
    border-radius: 20px;
    height: 22px;
    margin-top: -31px;
    width: 22px;
}

input[type=checkbox].toggled.medium:checked + label:after { 
    margin-left: 63px;
}

input[type=checkbox].toggled.medium + label > span:last-child,
input[type=checkbox].toggled.medium + label > span {
    margin-top: -4px;
}

input[type=checkbox].toggled.medium + label > span:first-child {
    margin-left: 6px;
}
input[type=checkbox].toggled.big + label {
    border-radius: 20px;
    font-size: 24px;
    height: 35px;
    width: 95px;
}
input[type=checkbox].toggled.big:checked + label:after {
    left: calc(100% - 32px);
}

input[type=checkbox].toggled.big + label:after {
    border-radius: 20px;
    height: 29px;
    margin-top: -31px;
    width: 29px;
}

input[type=checkbox].toggled.big:checked + label:after { 
    margin-left: 63px;
}

input[type=checkbox].toggled.big + label > span:last-child,
input[type=checkbox].toggled.big + label > span {
    margin-top: -4px;
}

input[type=checkbox].toggled.big + label > span:first-child {
    margin-left: 6px;
}