/*
* # Semantic UI
* Version: 0.19.0
* http://github.com/jlukic/semantic-ui
*
*
* Copyright 2014 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
* Released: 07/03/2014
*/

.ui.checkbox {
    position: relative;
    display: inline-block;
    min-width: 1em;
    min-height: 1.25em;
    line-height: 1em;
    outline: 0;
    vertical-align: middle;
}

    .ui.checkbox input {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        outline: 0;
    }

    .ui.checkbox .box, .ui.checkbox label {
        cursor: pointer;
        outline: 0;
    }

        .ui.checkbox .box:before, .ui.checkbox label:before {
            position: absolute;
            top: 0;
            line-height: 1;
            width: 1em;
            height: 1em;
            left: 0;
            content: '';
            border-radius: 4px;
            background: #FFF;
            -webkit-transition: background-color .3s ease,-webkit-box-shadow .3s ease;
            -moz-transition: background-color .3s ease,box-shadow .3s ease;
            transition: background-color .3s ease,box-shadow .3s ease;
            -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.2);
            box-shadow: 0 0 0 1px rgba(0,0,0,.2);
        }

        .ui.checkbox .box:after, .ui.checkbox label:after {
            -ms-filter: "alpha(Opacity=0)";
            filter: alpha(opacity=0);
            opacity: 0;
            content: '';
            position: absolute;
            background: 0 0;
            border: .2em solid #333;
            border-top: none;
            border-right: none;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: .275em;
            left: .2em;
            width: .45em;
            height: .15em;
        }

    .ui.checkbox label {
        display: block;
        color: rgba(0,0,0,1);
        -webkit-transition: color .2s ease;
        -moz-transition: color .2s ease;
        transition: color .2s ease;
    }

        .ui.checkbox input:focus ~ label, .ui.checkbox label:hover {
            color: rgba(0,0,0,.8);
        }

    .ui.checkbox ~ label {
        cursor: pointer;
        opacity: .85;
        vertical-align: middle;
    }

        .ui.checkbox ~ label:hover {
            opacity: 1;
        }

    .ui.checkbox .box:hover::before, .ui.checkbox label:hover::before {
        -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3);
        box-shadow: 0 0 0 1px rgba(0,0,0,.3);
    }

    .ui.checkbox .box:active::before, .ui.checkbox label:active::before {
        background-color: #F5F5F5;
    }

    .ui.checkbox input:focus ~ .box:before, .ui.checkbox input:focus ~ label:before {
        -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3);
        box-shadow: 0 0 0 1px rgba(0,0,0,.3);
    }

    .ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after {
        -ms-filter: "alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
    }

    .ui.checkbox input[disabled] ~ .box:after, .ui.checkbox input[disabled] ~ label, .ui.disabled.checkbox label, .ui.disabled.checkbox ~ .box:after {
        opacity: .4;
        color: rgba(0,0,0,.3);
    }

.ui.radio.checkbox .box:before, .ui.radio.checkbox label:before {
    min-width: 1em;
    height: 1em;
    border-radius: 500px;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
}

.ui.radio.checkbox .box:after, .ui.radio.checkbox label:after {
    border: none;
    top: .2em;
    left: .2em;
    width: .6em;
    height: .6em;
    background-color: #555;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
    border-radius: 500px;
}

.ui.slider.checkbox {
    cursor: pointer;
    min-width: 3em;
}

    .ui.slider.checkbox:after {
        position: absolute;
        top: .5em;
        left: 0;
        content: '';
        width: 3em;
        height: 2px;
        background-color: rgba(0,0,0,.1);
    }

    .ui.slider.checkbox .box, .ui.slider.checkbox label {
        padding-left: 4em;
    }

        .ui.slider.checkbox .box:before, .ui.slider.checkbox label:before {
            cursor: pointer;
            display: block;
            position: absolute;
            top: -.25em;
            left: 0;
            z-index: 1;
            width: 1.5em;
            height: 1.5em;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            transform: none;
            -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
            box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
            border-radius: 50rem;
            -webkit-transition: left .3s ease 0s;
            -moz-transition: left .3s ease 0s;
            transition: left .3s ease 0s;
        }

        .ui.slider.checkbox .box:after, .ui.slider.checkbox label:after {
            opacity: 1;
            position: absolute;
            content: '';
            top: .15em;
            left: 0;
            z-index: 2;
            margin-left: .375em;
            border: none;
            width: .75em;
            height: .75em;
            border-radius: 50rem;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            transform: none;
            -webkit-transition: background .3s ease 0s,left .3s ease 0s;
            -moz-transition: background .3s ease 0s,left .3s ease 0s;
            transition: background .3s ease 0s,left .3s ease 0s;
        }

    .ui.slider.checkbox input:checked ~ .box:after, .ui.slider.checkbox input:checked ~ .box:before, .ui.slider.checkbox input:checked ~ label:after, .ui.slider.checkbox input:checked ~ label:before {
        left: 1.75em;
    }

    .ui.slider.checkbox .box:after, .ui.slider.checkbox label:after {
        background-color: #D95C5C;
    }

    .ui.slider.checkbox input:checked ~ .box:after, .ui.slider.checkbox input:checked ~ label:after {
        background-color: #89B84C;
    }

.ui.toggle.checkbox {
    cursor: pointer;
}

    .ui.toggle.checkbox .box, .ui.toggle.checkbox label {
        padding-left: 4em;
    }

        .ui.toggle.checkbox .box:before, .ui.toggle.checkbox label:before {
            cursor: pointer;
            display: block;
            position: absolute;
            content: '';
            top: -.25em;
            left: 0;
            z-index: 1;
            background-color: #FFF;
            width: 3em;
            height: 1.5em;
            -webkit-transform: none;
            -moz-transform: none;
            -ms-transform: none;
            transform: none;
            -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
            box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
            border-radius: 50rem;
        }

        .ui.toggle.checkbox .box:after, .ui.toggle.checkbox label:after {
            opacity: 1;
            -webkit-box-shadow: none;
            box-shadow: none;
            content: '';
            position: absolute;
            top: .15em;
            left: .5em;
            z-index: 2;
            border: none;
            width: .75em;
            height: .75em;
            background-color: #D95C5C;
            border-radius: 50rem;
            -webkit-transition: background .3s ease 0s,left .3s ease 0s;
            -moz-transition: background .3s ease 0s,left .3s ease 0s;
            transition: background .3s ease 0s,left .3s ease 0s;
        }

    .ui.toggle.checkbox:active .box:before, .ui.toggle.checkbox:active label:before {
        background-color: #F5F5F5;
    }

    .ui.toggle.checkbox input:checked ~ .box:after, .ui.toggle.checkbox input:checked ~ label:after {
        left: 1.75em;
        background-color: #89B84C;
    }

.ui.checkbox {
    font-size: 1em;
}

.ui.large.checkbox {
    font-size: 1.25em;
}

.ui.huge.checkbox {
    font-size: 1.5em;
}
