/* ---------------------------------------------------

Project : CSS Checkbox Switch
Author : Partha Kar (https://www.facebook.com/partha.creativemind)
Version : 1.0
Release Dtae : 15 November, 2017

Modified by @dronpes - 2024-06-13
---------------------------------------------------- */


.checkbox.checbox-switch {
    padding-left: 0;
}

.checkbox.checbox-switch label,
.checkbox-inline.checbox-switch {
    display: inline-block;
    position: relative;
    padding-left: 0;
}
.checkbox.checbox-switch label input,
.checkbox-inline.checbox-switch input {
    display: none !important;
}
.checkbox.checbox-switch label span,
.checkbox-inline.checbox-switch span {
    width: 30px;
    border-radius: 20px;
    height: 16px;
    border: 1px solid #dbdbdb;
    background-color: #f1f1f1;
    border-color: rgb(223, 223, 223);
    box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;
    display: inline-block;
    vertical-align: middle;
    margin-right:0;
    text-align:left;
}
.checkbox.checbox-switch label span:before,
.checkbox-inline.checbox-switch span:before {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgb(255,255,255);
    content: " ";
    top: 0;
    position: relative;
    left: 0;
    transition: all 0.3s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.checkbox.checbox-switch label > input:checked + span:before,
.checkbox-inline.checbox-switch > input:checked + span:before {
    left: 14px;
}

/* Switch Default */
.checkbox.checbox-switch label > input:checked + span,
.checkbox-inline.checbox-switch > input:checked + span {
    background-color: rgb(76, 195, 151);
    border-color: rgb(76, 195, 151);
    box-shadow: rgb(76, 195, 151) 0px 0px 0px 8px inset;
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch label > input:checked:disabled + span,
.checkbox-inline.checbox-switch > input:checked:disabled + span {
    background-color: rgb(130, 238, 198);
    border-color: rgb(156, 223, 198);
    box-shadow: rgb(178, 225, 208) 0px 0px 0px 8px inset;
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch label > input:disabled + span,
.checkbox-inline.checbox-switch > input:disabled + span {
	background-color: rgb(241 241 241);
	border-color: hsl(0 0% 90% / 1);
}
.checkbox.checbox-switch label > input:disabled + span:before,
.checkbox-inline.checbox-switch > input:disabled + span:before {
	background-color: hsl(0 0% 97% / 1);
	border: 1px solid hsl(0 0% 94% / 1);
	box-shadow: 1px 0px 2px rgb(0 0 0 / 4%);
}


/* Switch Light */
.checkbox.checbox-switch.switch-light label > input:checked + span,
.checkbox-inline.checbox-switch.switch-light > input:checked + span {
    background-color: rgb(248,249,250);
    border-color: rgb(248,249,250);
    box-shadow: rgb(248,249,250) 0px 0px 0px 8px inset;
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}

/* Switch Dark */
.checkbox.checbox-switch.switch-dark label > input:checked + span,
.checkbox-inline.checbox-switch.switch-dark > input:checked + span {
    background-color: var(--GUNMETAL);
    border-color: var(--GUNMETAL);
    box-shadow: var(--GUNMETAL) 0px 0px 0px 8px inset;
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-dark label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-dark > input:checked:disabled + span {
    background-color: var(--STEEL);
    border-color: var(--STEEL);
    box-shadow: var(--STEEL) 0px 0px 0px 8px inset;
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}

/* Switch Danger */
.checkbox.checbox-switch.switch-danger label > input:checked + span,
.checkbox-inline.checbox-switch.switch-danger > input:checked + span {
    background-color: var(--CINNABAR);
    border-color: var(--CINNABAR);
    box-shadow: var(--CINNABAR) 0px 0px 0px 8px inset;
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-danger label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-danger > input:checked:disabled + span {
    background-color: #c09891;
    border-color: #c09891;
    box-shadow: #c09891 0px 0px 0px 8px inset;
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}

/* Switch Primary */
.checkbox.checbox-switch.switch-primary label > input:checked + span,
.checkbox-inline.checbox-switch.switch-primary > input:checked + span {
    background-color: rgb(76, 195, 151);
    border-color: rgb(76, 195, 151);
    box-shadow: rgb(76, 195, 151) 0px 0px 0px 8px inset;
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checbox-switch.switch-primary label > input:checked:disabled + span,
.checkbox-inline.checbox-switch.switch-primary > input:checked:disabled + span {
    background-color: rgb(130, 238, 198);
    border-color: rgb(156, 223, 198);
    box-shadow: rgb(178, 225, 208) 0px 0px 0px 8px inset;
    transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}