/**
** Check toggle
**/


.checkbox, .checkbox-bird, .checkbox-detailed, .checkbox-slide,
.checkbox-toggle, .radio {
    position: relative;
    margin-bottom: .25rem
}

.checkbox input, .checkbox-bird input, .checkbox-detailed input, .checkbox-slide input,
.checkbox-toggle input, .radio input {
    position: absolute;
    visibility: hidden
}

.checkbox input + label, .checkbox-bird input + label, .checkbox-detailed input + label,
.checkbox-slide input + label, .checkbox-toggle input + label, .radio input + label {
    position: relative;
    display: inline-block;
    font-size: 1rem;
    min-height: 18px;
    line-height: 18px;
    cursor: pointer
}

.checkbox input:disabled + label, .checkbox-bird input:disabled + label,
.checkbox-detailed input:disabled + label, .checkbox-slide input:disabled + label,
.checkbox-toggle input:disabled + label, .radio input:disabled + label {
    cursor: not-allowed;
    color: #8e9fa7
}

.checkbox, .radio {
    cursor: default
}

.checkbox input + label, .radio input + label {
    z-index: 2;
    padding: 0 0 0 24px
}

.checkbox input + label:after, .checkbox input + label:before, .radio input + label:after,
.radio input + label:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0
}

.checkbox input + label:before, .radio input + label:before {
    width: 16px;
    height: 16px;
    background: #fff;
    border: solid 1px #c5d6de
}

.checkbox input + label:hover:before, .radio input + label:hover:before {
    background-color: #d9f2ff;
    border-color: #00a8ff
}

.checkbox input[type=checkbox] + label:after, .radio input[type=checkbox] + label:after {
    display: inline-block;
    width: 16px;
    height: 16px;
    font-family: startui !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
    position: relative;
    top: -.15em;
    position: absolute;
    text-align: center;
    top: 0;
    font-size: 11px;
    line-height: 16px
}

.checkbox input[type=checkbox] + label:before, .radio input[type=checkbox] + label:before {
    -webkit-border-radius: 2px;
    border-radius: 2px
}

.checkbox input[type=radio] + label:before, .radio input[type=radio] + label:before {
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.checkbox input:checked + label:before, .radio input:checked + label:before {
    border-color: #00a8ff
}

.checkbox input[type=checkbox]:checked + label:after, .radio input[type=checkbox]:checked + label:after {
    content: "\22"
}

.checkbox input[type=radio]:checked + label:after, .radio input[type=radio]:checked + label:after {
    width: 8px;
    height: 8px;
    background: #343434;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    left: 4px;
    top: 4px
}

.checkbox input:disabled + label:before, .radio input:disabled + label:before {
    background-color: #eceff4;
    border-color: #dbe4eb
}

.checkbox input[type=checkbox]:disabled + label:after, .radio input[type=checkbox]:disabled + label:after {
    color: rgba(52, 52, 52, .4)
}

.checkbox input[type=radio]:disabled + label:after, .radio input[type=radio]:disabled + label:after {
    background-color: rgba(52, 52, 52, .4)
}

.checkbox.checkbox-only, .radio.checkbox-only {
    padding: 0;
    width: 16px;
    height: 16px;
    margin: 0
}

.checkbox-slide input + label {
    padding: 0 0 0 52px
}

.checkbox-slide input + label:after, .checkbox-slide input + label:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0
}

.checkbox-slide input + label:before {
    left: 1px;
    top: 7px;
    width: 42px;
    height: 4px;
    -webkit-border-radius: 25rem;
    border-radius: 25rem;
    background: #929faa;
    -webkit-transition: background .4s ease;
    transition: background .4s ease
}

.checkbox-slide input + label:after {
    width: 20px;
    height: 20px;
    top: -1px;
    border: solid 1px #c5d6de;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: left .4s ease;
    transition: left .4s ease;
    background: #fff;
    background: -webkit-linear-gradient(top, #fff 0, #e4f6ff 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e4f6ff));
    background: linear-gradient(to bottom, #fff 0, #e4f6ff 100%)
}

.checkbox-slide input + label:hover:after {
    border-color: #00a8ff
}

.checkbox-slide input:checked + label:before {
    background-color: #343434
}

.checkbox-slide input:checked + label:after {
    left: 24px
}

.checkbox-slide input:disabled + label:before {
    background-color: #c6d6df
}

.checkbox-slide input:disabled + label:after {
    background: #fcfefe;
    border-color: #c5d6de;
    background: -webkit-linear-gradient(top, #fcfefe 0, #edf2f5 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#fcfefe), to(#edf2f5));
    background: linear-gradient(to bottom, #fcfefe 0, #edf2f5 100%)
}

.checkbox-toggle input + label {
    padding: 0 0 0 52px
}

.checkbox-toggle input + label:after, .checkbox-toggle input + label:before {
    content: '';
    display: block;
    -webkit-border-radius: 25rem;
    border-radius: 25rem;
    position: absolute;
    left: 0;
    top: -1px;
    height: 20px
}

.checkbox-toggle input + label:before {
    width: 43px;
    background: #929faa;
    -webkit-transition: background .4s ease;
    transition: background .4s ease
}

.checkbox-toggle input + label:after {
    width: 20px;
    border: solid 1px #929faa;
    -webkit-transition: left .4s ease;
    transition: left .4s ease;
    background: #fff;
    background: -webkit-linear-gradient(top, #fff 0, #eef4f7 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eef4f7));
    background: linear-gradient(to bottom, #fff 0, #eef4f7 100%)
}

/**
** Hover
**/
.checkbox-toggle input + label:hover:after {
    border-color: #00a8ff;
    background: #fff;
    background: -webkit-linear-gradient(top, #fff 0, #e9f8ff 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e9f8ff));
    background: linear-gradient(to bottom, #fff 0, #e9f8ff 100%)
}

.checkbox-toggle.toggle-primary input + label:hover:after {
    border-color: $color-primary;
} 

.checkbox-toggle.toggle-success input + label:hover:after {
    border-color: $color-success;
} 

.checkbox-toggle.toggle-info input + label:hover:after {
    border-color: $color-info;  
} 

.checkbox-toggle.toggle-warning input + label:hover:after {
    border-color: $color-warning;
} 

.checkbox-toggle.toggle-danger input + label:hover:after {
    border-color: $color-danger; 
} 



.checkbox-toggle input:checked + label:before {
    background-color: #00a8ff
} 

.checkbox-toggle.toggle-primary input:checked + label:before {
    background-color:$color-primary;
}

.checkbox-toggle.toggle-success input:checked + label:before {
    background-color:$color-success;
}

.checkbox-toggle.toggle-info input:checked + label:before {
    background-color:$color-info;
}

.checkbox-toggle.toggle-warning input:checked + label:before {
    background-color:$color-warning;
}

.checkbox-toggle.toggle-danger input:checked + label:before {
    background-color:$color-danger;
}



.checkbox-toggle input:checked + label:after {
    left: 23px;
    border-color: #00a8ff;
    background: #fff;
    background: -webkit-linear-gradient(top, #fff 0, #e9f8ff 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e9f8ff));
    background: linear-gradient(to bottom, #fff 0, #e9f8ff 100%)
}

/**
** Enabled e checked
**/
.checkbox-toggle.toggle-primary input:checked + label:after {
    border-color: $color-primary;
}

.checkbox-toggle.toggle-success input:checked + label:after {
    border-color: $color-success;
}

.checkbox-toggle.toggle-info input:checked + label:after {
    border-color: $color-info;
}

.checkbox-toggle.toggle-warning input:checked + label:after {
    border-color: $color-warning;
}

.checkbox-toggle.toggle-danger input:checked + label:after {
    border-color: $color-danger;
}




/**
** Disabled
**/
.checkbox-toggle input:disabled + label:before {
    background-color: #dbe4eb
}

.checkbox-toggle.toggle-primary input:disabled + label:before {
    background-color: #dbe4eb
}

.checkbox-toggle.toggle-success input:disabled + label:before {
    background-color: #dbe4eb
}

.checkbox-toggle.toggle-info input:disabled + label:before {
    background-color: #dbe4eb
}

.checkbox-toggle.toggle-warning input:disabled + label:before {
    background-color: #dbe4eb
}

.checkbox-toggle.toggle-danger input:disabled + label:before {
    background-color: #dbe4eb
}


.checkbox-toggle input:disabled + label:after {
    border-color: #dbe4eb;
    background: #fff;
    background: -webkit-linear-gradient(top, #fff 0, #eef4f7 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eef4f7));
    background: linear-gradient(to bottom, #fff 0, #eef4f7 100%)
}

.checkbox-toggle.-large {
    margin-top: 15px
}

.checkbox-toggle.-large input + label {
    padding: 0 0 0 69px;
    position: relative
}

.checkbox-toggle.-large input + label:after, .checkbox-toggle.-large input + label:before {
    -webkit-border-radius: 35rem;
    border-radius: 35rem;
    height: 30px;
    position: absolute;
    top: -6px
}

.checkbox-toggle.-large input + label:before {
    width: 60px
}

.checkbox-toggle.-large input + label:after {
    width: 30px
}

.checkbox-toggle.-large input:checked + label:after {
    left: 30px
}

.checkbox-toggle.-extra-large {
    margin-top: 27px
}

.checkbox-toggle.-extra-large input + label {
    padding: 0 0 0 89px;
    position: relative
}

.checkbox-toggle.-extra-large input + label:after, .checkbox-toggle.-extra-large input + label:before {
    -webkit-border-radius: 45rem;
    border-radius: 45rem;
    height: 40px;
    position: absolute;
    top: -12px
}

.checkbox-toggle.-extra-large input + label:before {
    width: 80px
}

.checkbox-toggle.-extra-large input + label:after {
    width: 40px
}

.checkbox-toggle.-extra-large input:checked + label:after {
    left: 40px
}