﻿/*Create RadSwitch with custom icons*/
.RadButton_DuoSwitch .k-switch-container .k-switch-handle, .RadSwitch:hover .k-switch-container .k-switch-handle {
    font-family: "WebComponentsIcons";
    text-align: center;
    color: inherit;
    background-color: white;
    border-radius: 50%;
    width: 40px !important;
}

.RadSwitch.RadButton.RadButton_DuoSwitch.k-switch {
    border-radius: 30px !important;
    font-size: 8px !important;
    line-height: 1.25 !important;
    width: 40px !important;
}

.RadSwitch.RadButton.RadButton_DuoSwitch .k-switch-handle {
    width: 20px !important;
    height: 20px !important;
}

.RadSwitch.RadButton.RadButton_DuoSwitch .k-switch-container {
    width: 40px !important;
}

.RadSwitch.RadButton.RadButton_DuoSwitch.k-switch-on .k-switch-container .rbHovered,
.RadSwitch.RadButton.RadButton_DuoSwitch.k-switch-on:hover .k-switch-container {
    box-shadow: inset 0 0 0 1px #59B272;
}

.RadSwitch.RadButton.RadButton_DuoSwitch.k-switch-on .k-switch-container,
.RadSwitch.RadButton.RadButton_DuoSwitch.k-switch-on:hover .k-switch-container {
    color: #59B272;
    background-color: #59B272;
    border-radius: 30px !important;
}

.RadSwitch.RadButton.RadButton_DuoSwitch.k-switch-on .k-switch-handle {
    left: calc(100% - 20px) !important;
}

.RadSwitch.RadButton.RadButton_DuoSwitch.k-switch-on .k-switch-container .rbHovered,
.RadSwitch.RadButton.RadButton_DuoSwitch.k-switch-on:hover .k-switch-container {
    background: #4B9661;
}

.RadSwitch.RadButton.rbDisabled.RadButton_DuoSwitch.k-switch-on .k-switch-container .rbHovered,
.RadSwitch.RadButton.rbDisabled.RadButton_DuoSwitch.k-switch-on:hover .k-switch-container {
    background: #59B272;
}

.RadSwitch.RadButton.RadButton_DuoSwitch.k-switch-off .k-switch-container,
.RadSwitch.RadButton.RadButton_DuoSwitch.k-switch-off:hover .k-switch-container {
    color: #DF6161;
    background-color: #DF6161;
    border-radius: 30px !important;
}

    .RadSwitch.RadButton.RadButton_DuoSwitch.k-switch-off .k-switch-container .rbHovered,
    .RadSwitch.RadButton.RadButton_DuoSwitch.k-switch-off:hover .k-switch-container {
        background: #BF5252;
    }

.RadSwitch.RadButton.rbDisabled.RadButton_DuoSwitch.k-switch-off .k-switch-container .rbHovered,
.RadSwitch.RadButton.rbDisabled.RadButton_DuoSwitch.k-switch-off:hover .k-switch-container {
    background: #DF6161;
}

.RadSwitch.RadButton.RadButton_DuoSwitch.k-switch-off:hover .k-switch-handle,
.RadSwitch.RadButton.RadButton_DuoSwitch.k-switch-off.k-state-hover .k-switch-handle {
    border-color: #DF6161;
}

.RadButton_DuoSwitch.k-switch-on .k-switch-handle:before {
    font-size: 2em;
    content: '\e118';
}

.RadButton_DuoSwitch.k-switch-off .k-switch-handle:before {
    font-size: 2em;
    content: '\e11b';
}
