.ui.checkbox {
    position: relative;
    display: inline-block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    outline: none;
    vertical-align: baseline;
    font-style: normal;
    min-height: 17px;
    font-size: 1rem;
    line-height: 17px;
    min-width: 17px;
}

    /* HTML Checkbox */

    .ui.checkbox input[type="checkbox"],
    .ui.checkbox input[type="radio"] {
        cursor: pointer;
        position: absolute;
        top: 0px;
        left: 5px;
        opacity: 0 !important;
        outline: none;
        z-index: 3;
        width: 17px;
        height: 17px;
    }

    /*--------------
      Box
---------------*/

    .ui.checkbox .box,
    .ui.checkbox label {
        cursor: auto;
        position: relative;
        display: block;
        padding-left: 1.85714em;
        outline: none;
        font-size: 12px;
    }

        .ui.checkbox .box:before,
        .ui.checkbox label:before {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 17px;
            height: 17px;
            content: '';
            background: #FFFFFF;
            border-radius: 0.21428571rem;
            -webkit-transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
            transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
            transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
            transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
            border: 1px solid #D4D4D5;
        }

        /*--------------
    Checkmark
---------------*/

        .ui.checkbox .box:after,
        .ui.checkbox label:after {
            position: absolute;
            font-size: 14px;
            top: 0px;
            left: 0px;
            width: 17px;
            height: 17px;
            text-align: center;
            opacity: 0;
            color: rgba(0, 0, 0, 0.87);
            -webkit-transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
            transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
            transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
            transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
        }

    /*--------------
      Label
---------------*/

    /* Inside */

    .ui.checkbox label,
    .ui.checkbox + label {
        color: rgba(0, 0, 0, 0.87);
        -webkit-transition: color 0.1s ease;
        transition: color 0.1s ease;
    }

    /* Outside */

    .ui.checkbox + label {
        vertical-align: middle;
    }

    /*******************************
           States
*******************************/

    /*--------------
      Hover
---------------*/

    .ui.checkbox .box:hover::before,
    .ui.checkbox label:hover::before {
        background: #FFFFFF;
        border-color: rgba(34, 36, 38, 0.35);
    }

    .ui.checkbox label:hover,
    .ui.checkbox + label:hover {
        color: rgba(0, 0, 0, 0.8);
    }

    /*--------------
      Down
---------------*/

    .ui.checkbox .box:active::before,
    .ui.checkbox label:active::before {
        background: #F9FAFB;
        border-color: rgba(34, 36, 38, 0.35);
    }

    .ui.checkbox .box:active::after,
    .ui.checkbox label:active::after {
        color: rgba(0, 0, 0, 0.95);
    }

    .ui.checkbox input:active ~ label {
        color: rgba(0, 0, 0, 0.95);
    }

    /*--------------
     Focus
---------------*/

    .ui.checkbox input:focus ~ .box:before,
    .ui.checkbox input:focus ~ label:before {
        background: #FFFFFF;
        border-color: #96C8DA;
    }

    .ui.checkbox input:focus ~ .box:after,
    .ui.checkbox input:focus ~ label:after {
        color: rgba(0, 0, 0, 0.37);
    }

    .ui.checkbox input:focus ~ label {
        color: rgba(0, 0, 0, 0.95);
    }

    /*--------------
     Active
---------------*/

    .ui.checkbox input:checked ~ .box:before,
    .ui.checkbox input:checked ~ label:before {
        background: #FFFFFF;
        border-color: rgba(34, 36, 38, 0.35);
    }

    .ui.checkbox input:checked ~ .box:after,
    .ui.checkbox input:checked ~ label:after {
        opacity: 1;
        color: rgba(0, 0, 0, 0.95);
    }

    /*--------------
  Indeterminate
---------------*/

    .ui.checkbox input:not([type=radio]):indeterminate ~ .box:before,
    .ui.checkbox input:not([type=radio]):indeterminate ~ label:before {
        background: #FFFFFF;
        border-color: rgba(34, 36, 38, 0.35);
    }

    .ui.checkbox input:not([type=radio]):indeterminate ~ .box:after,
    .ui.checkbox input:not([type=radio]):indeterminate ~ label:after {
        opacity: 1;
        color: rgba(0, 0, 0, 0.95);
    }

    /*--------------
  Active Focus
---------------*/

    .ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:before,
    .ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before,
    .ui.checkbox input:checked:focus ~ .box:before,
    .ui.checkbox input:checked:focus ~ label:before {
        background: #FFFFFF;
        border-color: #96C8DA;
    }

    .ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:after,
    .ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after,
    .ui.checkbox input:checked:focus ~ .box:after,
    .ui.checkbox input:checked:focus ~ label:after {
        color: rgba(0, 0, 0, 0.95);
    }

/*--------------
    Read-Only
---------------*/

.ui.read-only.checkbox,
.ui.read-only.checkbox label {
    cursor: default;
}

/*--------------
     Disabled
---------------*/

.ui.disabled.checkbox .box:after,
.ui.disabled.checkbox label,
.ui.checkbox input[disabled] ~ .box:after,
.ui.checkbox input[disabled] ~ label {
    cursor: default !important;
    opacity: 0.5;
    color: #000000;
}

/*--------------
     Hidden
---------------*/

/* Initialized checkbox moves input below element
 to prevent manually triggering */

.ui.checkbox input.hidden {
    z-index: -1;
}

    /* Selectable Label */

    .ui.checkbox input.hidden + label {
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

@font-face {
    font-family: 'Checkbox';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype');
}

.ui.checkbox label:after,
.ui.checkbox .box:after {
    font-family: 'Checkbox';
}

/* Checked */

.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ label:after {
    content: '\e800';
}

/* Indeterminate */

.ui.checkbox input:indeterminate ~ .box:after,
.ui.checkbox input:indeterminate ~ label:after {
    font-size: 12px;
    content: '\e801';
}



/*--------------
     Toggle
---------------*/

/*.ui.toggle.checkbox {
    min-height: 1.5rem;
}*/

    /* Input */

    .ui.toggle.checkbox input {
        width: 3.4rem;
        height: 1.5rem;
      }

    /* Label */

    .ui.toggle.checkbox .box,
    .ui.toggle.checkbox label {
        min-height: 1.5rem;
        padding-left: 4.5rem;
        color: rgba(0, 0, 0, 0.87);
    }

    .ui.toggle.checkbox label {
        padding-top: 0.15em;
    }

        /* Switch */

        .ui.toggle.checkbox .box:before,
        .ui.toggle.checkbox label:before {
            display: block;
            position: absolute;
            content: '';
            z-index: 1;
            -webkit-transform: none;
            transform: none;
            border: none;
            top: 0rem;
            background: rgba(0, 0, 0, 0.37);
            -webkit-box-shadow: none;
            box-shadow: none;
            width: 3.5rem;
            height: 1.5rem;
            border-radius: 500rem;
        }

        /* Handle */

        .ui.toggle.checkbox .box:after,
        .ui.toggle.checkbox label:after {
            background: #FFFFFF -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
            background: #FFFFFF -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
            background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05));
            position: absolute;
            content: '' !important;
            opacity: 1;
            z-index: 2;
            border: none;
            -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
            box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
            width: 1.5rem;
            height: 1.5rem;
            top: 0rem;
            left: 0em;
            border-radius: 500rem;
            -webkit-transition: background 0.3s ease, left 0.3s ease;
            transition: background 0.3s ease, left 0.3s ease;
        }

    .ui.toggle.checkbox input ~ .box:after,
    .ui.toggle.checkbox input ~ label:after {
        left: -0.05rem;
        -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
        box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
    }

    /* Focus */

    .ui.toggle.checkbox input:focus ~ .box:before,
    .ui.toggle.checkbox input:focus ~ label:before {
        background-color: rgba(0, 0, 0, 0.15);
        border: none;
    }

    /* Hover */

    .ui.toggle.checkbox .box:hover::before,
    .ui.toggle.checkbox label:hover::before {
        background-color: rgba(0, 0, 0, 0.15);
        border: none;
    }

    /* Active */

    .ui.toggle.checkbox input:checked ~ .box,
    .ui.toggle.checkbox input:checked ~ label {
        color: rgba(0, 0, 0, 0.95) !important;
    }

        .ui.toggle.checkbox input:checked ~ .box:before,
        .ui.toggle.checkbox input:checked ~ label:before {
            background-color: #2185D0 !important;
        }

        .ui.toggle.checkbox input:checked ~ .box:after,
        .ui.toggle.checkbox input:checked ~ label:after {
            left: 2.15rem;
            -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
            box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
        }

    /* Active Focus */

    .ui.toggle.checkbox input:focus:checked ~ .box,
    .ui.toggle.checkbox input:focus:checked ~ label {
        color: rgba(0, 0, 0, 0.95) !important;
    }

        .ui.toggle.checkbox input:focus:checked ~ .box:before,
        .ui.toggle.checkbox input:focus:checked ~ label:before {
            background-color: #0d71bb !important;
        }



.ui.toggle.checkbox .box:before, .ui.toggle.checkbox label:before {
    display: block;
    position: absolute;
    content: '';
    z-index: 1;
    -webkit-transform: none;
    transform: none;
    border: none;
    top: 0rem;
    background: rgba(0, 0, 0, 0.37);
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 3.3rem;
    height: 1.4rem;
    border-radius: 500rem;
}

.ui.toggle.checkbox .box:after, .ui.toggle.checkbox label:after {
    background: #FFFFFF -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
    background: #FFFFFF -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    position: absolute;
    content: '' !important;
    opacity: 1;
    z-index: 2;
    border: none;
    -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
    box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
    width: 1.3rem;
    height: 1.3rem;
    top: 0rem;
    left: 0em;
    border-radius: 500rem;
    -webkit-transition: background 0.3s ease, left 0.3s ease;
    transition: background 0.3s ease, left 0.3s ease;
}

.ui.toggle.checkbox .box, .ui.toggle.checkbox label {
    min-height: 0.7rem;
    padding-left: 3.4rem;
    color: rgba(0, 0, 0, 0.87);
}

.ui.toggle.checkbox {
    min-height: 1rem;
    margin-top: -7px;
    margin-bottom: 7px;
}
.ui.toggle.checkbox.group {
    min-height: 1rem;
    margin-top: -7px;
margin-left: -13px;
margin-right: -9px;
margin-bottom: -4px;
}