/*
	VALUE CHECKBOX JS PLUGIN
	Datei: valueCheckbox.css
	Autor: Ole Jepsen
	Firma: 2wcom Systems GmbH

	Voraussetzungen:
	- valueCheckbox.js

	Versionshistory:
		v1.02 (16.03.2022 ojepsen)
			- Fix: Padding / Margin rules of the original destroy the layout. (Set padding / margin to 0px)
		v1.01 (13.08.2021 ojepsen)
			- Add rules for disabled checkbox (cursor now default)
		v1.00 (23.06.2021 ojepsen)
		    - Erstellung

*/

input[type="checkbox"].vc-original{
    position: absolute;
	opacity: 0;
	width: 0px;
	height: 0px;
	padding: 0px !important;
	margin: 0px !important;
	/* left: -10px; */
	cursor: pointer;
}

/* Checkbox Container */
.vc-con{
	/* position: relative; */
	display: inline-block;
	-moz-user-select: -moz-none;
	-moz-user-select: none;
	-o-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Checkbox Container -> Background */
.vc-con .vc-bg{
	position: relative;
    border: 2px solid;
	height: 18px;	
	width: 40px;
    margin: 1px 0px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    cursor: pointer;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
.vc-con[vc-disabled="true"] .vc-bg,
.vc-con[vc-disabled="true"] .vc-label,
.vc-con[vc-disabled="true"] .vc-circle
{
	cursor: default !important;
}

.vc-con[vc-checked="false"] .vc-bg{
	background-color: #3c3c3c;
	background-color: var(--black-color);
	border-color: #3c3c3c;
	border-color: var(--black-color);
}
.vc-con[vc-checked="false"][vc-disabled="true"] .vc-bg{
    background-color: #aaaaaa;
    background-color: var(--disabled-grey-color);
    border-color: #aaaaaa;
    border-color: var(--disabled-grey-color);
}
.vc-con[vc-checked="false"][vc-focus="true"]:not([vc-disabled="true"]) .vc-bg{
	box-shadow: 0 0 4px #3c3c3c;
	box-shadow: 0 0 4px var(--black-color);
}

.vc-con[vc-checked="true"] .vc-bg{
	background-color: #23af8c;
    background-color: var(--green-color);
	border-color: #23af8c;
	border-color: var(--green-color);
}
.vc-con[vc-checked="true"][vc-disabled="true"] .vc-bg{
	background-color: #99CCBB;
    background-color: var(--disabled-green-color);
    border-color: #99CCBB;
    border-color: var(--disabled-green-color);
}
.vc-con[vc-checked="true"][vc-focus="true"]:not([vc-disabled="true"]) .vc-bg{
    box-shadow: 0 0 4px #23af8c;
    box-shadow: 0 0 4px var(--green-color);
}


/* Checkbox Container -> Label (On - Off) */
.vc-con .vc-label {
    font-size: 9px;
    cursor: pointer;
	width:100%;
	height: 100%;
	display: flex;
	align-items: center;
	font-weight:normal;
	padding-right:3px;
	padding-left:3px;
	color: white;
}
.vc-con[vc-checked="false"] .vc-label{
	flex-direction: row-reverse;
}
.vc-con[vc-checked="true"] .vc-label{
	flex-direction: row;
}

/* Checkbox Container -> Kreis */
.vc-con .vc-circle{
	position: absolute;
	height: 14px;	
    width: 14px;	
    background: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
	top: 0px;
}
.vc-con[vc-checked="true"] .vc-circle{
	right:0px;
}