/*
デザインを変更したcheckBox
Author: C-take
License: MIT
*/

input[type="checkbox"].desinedCheck,input[type="check"].desinedCheck,
input[type="CheckBox"].desinedCheck,input[type="Check"].desinedCheck{
    display:none;
}


input[type="checkbox"].switch + label{
    cursor:pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
input[type="checkbox"].switch + label > span.frame,
input[type="check"].switch + label > span.frame,
input[type="CheckBox"].switch + label > span.frame,
input[type="Check"].switch + label > span.frame{
    display:inline-block;
    border-radius:1em;
    width:2.4em;
    height:1.2em;
    position:relative;
    background-color:#DDDDDD;
    border:solid #DFDFDF 1px;
    top:0.2em;
}


input[type="checkbox"].switch + label > span:first-child,
input[type="check"].switch + label > span:first-child,
input[type="CheckBox"].switch + label > span:first-child,
input[type="Check"].switch + label > span:first-child{
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
input.switch + label > span:last-child{
	filter:alpha(opacity=40);
	-moz-opacity: 0.4;
	opacity: 0.4;
}
input.switch + label > span.frame:after{
    content:"";
    display:inline-block;
    position:absolute;
    top:0em;
    left:0em;
    border-radius:100%;
    height:1em;
    width:1em;
    background-color:#FFFFFF;
    box-shadow: -0.1em -0.1em .02em 0em rgba(0,0,0,0.3) inset;
    transition-duration: 0.3s;
}

input.switch:checked + label > span.frame:after{
    content:"";
    left:01.4em;
}



input.switch:checked + label > span:first-child{
	filter:alpha(opacity=40);
	-moz-opacity: 0.4;
	opacity: 0.4;
}
input.switch:checked + label > span:last-child{
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

input[type="checkbox"].onoffswitch + label{
    cursor:pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
input[type="checkbox"].onoffswitch + label > span.frame,
input[type="check"].onoffswitch + label > span.frame,
input[type="CheckBox"].onoffswitch + label > span.frame,
input[type="Check"].onoffswitch + label > span.frame{
    display:inline-block;
    border-radius:1em;
    width:5.4em;
    height:1.6em;
    position:relative;
    border:solid #DFDFDF 1px;
    background-color:red;
    color:#FFFFFF;
    top:0em;
}

input[type="checkbox"].onoffswitch + label > span.frame:before,
input[type="check"].onoffswitch + label > span.frame:before,
input[type="CheckBox"].onoffswitch + label > span.frame:before,
input[type="Check"].onoffswitch + label > span.frame:before{
    content:"OFF";
    display:inline-block;
    width:100%;
    text-align:center;
    color:#FFFFFF;
    font-weight:bold;
}

input[type="checkbox"].onoffswitch:checked + label > span.frame:before,
input[type="check"].onoffswitch:checked + label > span.frame:before,
input[type="CheckBox"].onoffswitch:checked + label > span.frame:before,
input[type="Check"].onoffswitch:checked + label > span.frame:before{
    content:"ON";
    display:inline-block;
    width:100%;
}

input[type="checkbox"].onoffswitch:checked + label > span.frame,
input[type="check"].onoffswitch:checked + label > span.frame,
input[type="CheckBox"].onoffswitch:checked + label > span.frame,
input[type="Check"].onoffswitch:checked + label > span.frame{
    background-color:green;
}

input.onoffswitch + label > span.frame:after{
    content:"";
    display:inline-block;
    position:absolute;
    top:0.1em;
    left:0em;
    border-radius:100%;
    height:1.2em;
    width:1.2em;
    background-color:#FFFFFF;
    box-shadow: 0em -0.1em .02em 0em rgba(0,0,0,0.3);
    transition-duration: 0.3s;
}

input.onoffswitch:checked + label > span.frame:after{
    content:"";
    left:4.2em;
    box-shadow: 0em -0.1em .02em 0em rgba(0,0,0,0.4);
}



input.ORSelected + label{
    display:inline-block;
    cursor:pointer;
    padding:0.3em 0.5em;
    margin-left:0.3em;
    margin-bottom:0.3em;
    border-radius:1em;
    background-color:transparent;
    border:solid #A0A0A0 1px;
    color:#A0A0A0;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}


input.ORSelected:checked + label{
    background-color:green;
    border:solid green 1px;
    font-weight:bold;
    color:#FFFFFF;
}