/*----switch ----*/





.has-switch {

    border-radius: 30px;

    -webkit-border-radius: 30px;

    display: inline-block;

    cursor: pointer;

    line-height: 1.231;

    overflow: hidden;

    position: relative;

    text-align: left;

    width: 80px;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    -o-user-select: none;

    user-select: none;

}

.has-switch.deactivate {

    opacity: 0.5;

    filter: alpha(opacity=50);

    cursor: default !important;

}

.has-switch.deactivate label,

.has-switch.deactivate span {

    cursor: default !important;

}

.has-switch > div {

    width: 162%;

    position: relative;

    top: 0;

}

.has-switch > div.switch-animate {

    -webkit-transition: left 0.25s ease-out;

    -moz-transition: left 0.25s ease-out;

    -o-transition: left 0.25s ease-out;

    transition: left 0.25s ease-out;

    -webkit-backface-visibility: hidden;

}

.has-switch > div.switch-off {

    left: -63%;

}

.has-switch > div.switch-off label {

    background-color: #7f8c9a;

    border-color: #bdc3c7;

    -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5);

    -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5);

    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5);

}

.has-switch > div.switch-on {

    left: 0%;

}

.has-switch > div.switch-on label {

    background-color: #41cac0;

}

.has-switch input[type=checkbox] {

    display: none;

}

.has-switch span {

    cursor: pointer;

    font-size: 14.994px;

    font-weight: 700;

    float: left;

    height: 29px;

    line-height: 19px;

    margin: 0;

    padding-bottom: 6px;

    padding-top: 5px;

    position: relative;

    text-align: center;

    width: 50%;

    z-index: 1;

    /*-webkit-box-sizing: border-box;*/

    /*-moz-box-sizing: border-box;*/

    box-sizing: border-box;

    -webkit-transition: 0.25s ease-out;

    -moz-transition: 0.25s ease-out;

    -o-transition: 0.25s ease-out;

    transition: 0.25s ease-out;

    -webkit-backface-visibility: hidden;

}

.has-switch span.switch-left {

    border-radius: 30px 0 0 30px;

    background-color: #2A3542;

    color: #41cac0;

    border-left: 1px solid transparent;

}

.has-switch span.switch-right {

    border-radius: 0 30px 30px 0;

    background-color: #bdc3c7;

    color: #ffffff;

    text-indent: 7px;

}

.has-switch span.switch-right [class*="fui-"] {

    text-indent: 0;

}

.has-switch label {

    border: 4px solid #2A3542;

    border-radius: 50%;

    -webkit-border-radius: 50%;

    float: left;

    height: 29px;

    margin: 0 -21px 0 -14px;

    padding: 0;

    position: relative;

    vertical-align: middle;

    width: 29px;

    z-index: 100;

    -webkit-transition: 0.25s ease-out;

    -moz-transition: 0.25s ease-out;

    -o-transition: 0.25s ease-out;

    transition: 0.25s ease-out;

    -webkit-backface-visibility: hidden;

}

.switch-square {

    border-radius: 6px;

    -webkit-border-radius: 6px;

    -webkit-mask: url('../img/mask.png') 0 0 no-repeat;

    mask: url('../img/mask.png') 0 0 no-repeat;

}

.switch-square > div.switch-off label {

    border-color: #7f8c9a;

    border-radius: 6px 0 0 6px;

}

.switch-square span.switch-left {

    border-radius: 6px 0 0 6px;

}

.switch-square span.switch-left [class*="fui-"] {

    text-indent: -10px;

}

.switch-square span.switch-right {

    border-radius: 0 6px 6px 0;

}

.switch-square span.switch-right [class*="fui-"] {

    text-indent: 5px;

}

.switch-square label {

    border-radius: 0 6px 6px 0;

    border-color: #41cac0;

}