/*!
 * # Semantic UI 1.12.2 - Checkbox
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2014 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */


/*******************************
           Checkbox
*******************************/


/*--------------
    Content
---------------*/
.se-checkbox { position: relative; display: inline-block; min-height: 17px; font-size: 13px; font-size: 1.3rem; line-height: 15px; min-width: 17px; -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: none; vertical-align: middle; }
.se-checkbox input[type="checkbox"],
.se-checkbox input[type="radio"] { position: absolute; top: 0px; left: 0px; opacity: 0 !important; outline: none; z-index: -1; }

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

.se-checkbox .box,
.se-checkbox label { display: block; cursor: pointer; padding-left: 1.75em; outline: none; }
.se-checkbox label { font-size: 1em; }
.se-checkbox .box:before,
.se-checkbox label:before { position: absolute; line-height: 1; width: 17px; height: 17px; top: 0em; left: 0em; content: ''; background: #ffffff; border-radius: 0.25em; -webkit-transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;         transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; border: 1px solid #d4d4d5; }

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

.se-checkbox .box:after,
.se-checkbox label:after { position: absolute; top: 0px; left: 0px; line-height: 17px; width: 17px; height: 17px; text-align: center; opacity: 0; color: rgba(0, 0, 0, 0.8); -webkit-transition: all 0.1s ease; transition: all 0.1s ease; }

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


/* Inside */
.se-checkbox label,
.se-checkbox + label { cursor: pointer; color: rgba(0, 0, 0, 0.8); -webkit-transition: color 0.2s ease; transition: color 0.2s ease; -webkit-user-select: none;    -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Outside */
.se-checkbox + label { vertical-align: middle; }


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


/*--------------
      Hover
---------------*/
.se-checkbox .box:hover::before,
.se-checkbox label:hover::before { background: #ffffff; border: 1px solid rgba(39, 41, 43, 0.3); }
.se-checkbox label:hover,
.se-checkbox + label:hover { color: rgba(0, 0, 0, 0.8); }

/*--------------
      Down
---------------*/
.se-checkbox .box:active::before,
.se-checkbox label:active::before { background: #f5f5f5; border: 1px solid 1px solid rgba(39, 41, 43, 0.3); }
.se-checkbox input[type="checkbox"]:active ~ label,
.se-checkbox input[type="radio"]:active ~ label { color: rgba(0, 0, 0, 0.8); }

/*--------------
      Focus
---------------*/
.se-checkbox input[type="checkbox"]:focus ~ .box:before,
.se-checkbox input[type="checkbox"]:focus ~ label:before,
.se-checkbox input[type="radio"]:focus ~ .box:before,
.se-checkbox input[type="radio"]:focus ~ label:before { background: #f5f5f5; border: 1px solid 1px solid rgba(39, 41, 43, 0.3); }
.se-checkbox input[type="checkbox"]:focus ~ label,
.se-checkbox input[type="radio"]:focus ~ label { color: rgba(0, 0, 0, 0.8); }

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

.se-checkbox input[type="checkbox"]:checked ~ .box:after,
.se-checkbox input[type="checkbox"]:checked ~ label:after,
.se-checkbox input[type="radio"]:checked ~ .box:after,
.se-checkbox input[type="radio"]:checked ~ label:after { opacity: 1; }

/*--------------
    Read-Only
---------------*/
.read-only.se-checkbox,
.read-only.se-checkbox label { cursor: default; }

/*--------------
     Disabled
---------------*/
.disabled.se-checkbox .box:after,
.disabled.se-checkbox label,
.se-checkbox input[type="checkbox"][disabled] ~ .box:after,
.se-checkbox input[type="checkbox"][disabled] ~ label,
.se-checkbox input[type="radio"][disabled] ~ .box:after,
.se-checkbox input[type="radio"][disabled] ~ label { cursor: default; opacity: 0.5; color: #000000; }


/*******************************
             Types
*******************************/


/*--------------
     Radio
---------------*/

.radio.se-checkbox { min-height: 14px; }

/* Box */
.radio.se-checkbox .box:before,
.radio.se-checkbox label:before { width: 14px; height: 14px; border-radius: 500rem; top: 1px; left: 0px; -webkit-transform: none;     -ms-transform: none;         transform: none; }

/* Circle */
.radio.se-checkbox .box:after,
.radio.se-checkbox label:after { border: none; width: 14px; height: 14px; line-height: 14px; top: 1px; left: 0px; font-size: 9px; }

/* Radio Checkbox */
.radio.se-checkbox .box:after,
.radio.se-checkbox label:after { width: 14px; height: 14px; border-radius: 500rem; -webkit-transform: scale(0.42857143);     -ms-transform: scale(0.42857143);         transform: scale(0.42857143); background-color: rgba(0, 0, 0, 0.8); }

/*--------------
     Slider
---------------*/

.slider.se-checkbox { cursor: pointer; min-height: 1.25rem; }
.slider.se-checkbox .box,
.slider.se-checkbox label { padding-left: 4.5rem; line-height: 1rem; color: rgba(0, 0, 0, 0.4); }

/* Line */
.slider.se-checkbox .box:before,
.slider.se-checkbox label:before { cursor: pointer; display: block; position: absolute; content: ''; top: 0.4rem; left: 0em; z-index: 1; border: none !important; background-color: rgba(0, 0, 0, 0.05); width: 3.5rem; height: 0.25rem; -webkit-transform: none;     -ms-transform: none;         transform: none; border-radius: 500rem; -webkit-transition: background 0.3s ease; transition: background 0.3s ease; }

/* Handle */
.slider.se-checkbox .box:after,
.slider.se-checkbox label:after { 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: ''; opacity: 1; z-index: 2; border: none; box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset; width: 1.5rem; height: 1.5rem; top: -0.25rem; left: 0em; -webkit-transform: none;     -ms-transform: none;         transform: none; border-radius: 500rem; -webkit-transition: left 0.3s ease 0s; transition: left 0.3s ease 0s; }

/* Focus */
.slider.se-checkbox input[type="checkbox"]:focus ~ .box:before,
.slider.se-checkbox input[type="checkbox"]:focus ~ label:before,
.slider.se-checkbox input[type="radio"]:focus ~ .box:before,
.slider.se-checkbox input[type="radio"]:focus ~ label:before { background-color: rgba(0, 0, 0, 0.1); border: none; }

/* Hover */
.slider.se-checkbox .box:hover,
.slider.se-checkbox label:hover { color: rgba(0, 0, 0, 0.8); }
.slider.se-checkbox .box:hover::before,
.slider.se-checkbox label:hover::before { background: rgba(0, 0, 0, 0.1); }

/* Active */
.slider.se-checkbox input[type="checkbox"]:checked ~ .box,
.slider.se-checkbox input[type="checkbox"]:checked ~ label,
.slider.se-checkbox input[type="radio"]:checked ~ .box,
.slider.se-checkbox input[type="radio"]:checked ~ label { color: rgba(0, 0, 0, 0.8); }
.slider.se-checkbox input[type="checkbox"]:checked ~ .box:before,
.slider.se-checkbox input[type="checkbox"]:checked ~ label:before,
.slider.se-checkbox input[type="radio"]:checked ~ .box:before,
.slider.se-checkbox input[type="radio"]:checked ~ label:before { background-color: rgba(0, 0, 0, 0.1); }
.slider.se-checkbox input[type="checkbox"]:checked ~ .box:after,
.slider.se-checkbox input[type="checkbox"]:checked ~ label:after,
.slider.se-checkbox input[type="radio"]:checked ~ .box:after,
.slider.se-checkbox input[type="radio"]:checked ~ label:after { left: 2rem; }

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

.toggle.se-checkbox { cursor: pointer; min-height: 1.5rem; }
.toggle.se-checkbox .box,
.toggle.se-checkbox label { min-height: 1.5rem; padding-left: 4rem; color: rgba(0, 0, 0, 0.8); }
.toggle.se-checkbox label { padding-top: 4px; }

/* Switch */
.toggle.se-checkbox .box:before,
.toggle.se-checkbox label:before { cursor: pointer; display: block; position: absolute; content: ''; top:2px; z-index: 1; border: none; background-color: rgba(0, 0, 0, 0.15); width: 3.5rem; height: 1.5rem; border-radius: 500rem; }
.toggle.se-checkbox input[type="checkbox"],
.toggle.se-checkbox input[type="radio"] { top: 3px; }

/* Handle */
.toggle.se-checkbox .box:after,
.toggle.se-checkbox label:after { 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: ''; opacity: 1; z-index: 2; border: none; box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.5), 0px 0px 0px .5px rgba(39, 41, 43, 0.15) inset; width: 1.5rem; height: 1.5rem; top: 2px; left: 0em; border-radius: 500rem; -webkit-transition: background 0.3s ease 0s, left 0.3s ease 0s; transition: background 0.3s ease 0s, left 0.3s ease 0s; }
.toggle.se-checkbox input[type="checkbox"] ~ .box:after,
.toggle.se-checkbox input[type="checkbox"] ~ label:after,
.toggle.se-checkbox input[type="radio"] ~ .box:after,
.toggle.se-checkbox input[type="radio"] ~ label:after { left: -0.05rem; }

/* Focus */
.toggle.se-checkbox input[type="checkbox"]:focus ~ .box:before,
.toggle.se-checkbox input[type="checkbox"]:focus ~ label:before,
.toggle.se-checkbox input[type="radio"]:focus ~ .box:before,
.toggle.se-checkbox input[type="radio"]:focus ~ label:before { background-color: rgba(0, 0, 0, 0.1); border: none; }

/* Hover */
.toggle.se-checkbox .box:hover::before,
.toggle.se-checkbox label:hover::before { background-color: rgba(0, 0, 0, 0.1); border: none; }

/* Active */
.toggle.se-checkbox input[type="checkbox"]:checked ~ .box,
.toggle.se-checkbox input[type="checkbox"]:checked ~ label,
.toggle.se-checkbox input[type="radio"]:checked ~ .box,
.toggle.se-checkbox input[type="radio"]:checked ~ label { color: #00a0ea; }
.toggle.se-checkbox input[type="checkbox"]:checked ~ .box:before,
.toggle.se-checkbox input[type="checkbox"]:checked ~ label:before,
.toggle.se-checkbox input[type="radio"]:checked ~ .box:before,
.toggle.se-checkbox input[type="radio"]:checked ~ label:before { background-color: #00a0ea; }
.toggle.se-checkbox input[type="checkbox"]:checked ~ .box:after,
.toggle.se-checkbox input[type="checkbox"]:checked ~ label:after,
.toggle.se-checkbox input[type="radio"]:checked ~ .box:after,
.toggle.se-checkbox input[type="radio"]:checked ~ label:after { left: 2.05rem; }


/*******************************
            Variations
*******************************/


/*--------------
     Fitted
---------------*/
.fitted.se-checkbox .box, .fitted.se-checkbox label { padding-left: 0em !important; }
.fitted.toggle.se-checkbox, .fitted.toggle.se-checkbox { width: 3.5rem; }
.fitted.slider.se-checkbox, .fitted.slider.se-checkbox { width: 3.5rem; }