.checkbutton input[type=radio], .checkbutton input[type=checkbox] {
        display: none;
        margin: 0px;
        padding: 0px;
        color: black;
    }

        .checkbutton input[type=radio] + label, .checkbutton input[type=checkbox] + label {
            border-left: 1px solid #e6e6e6;
            border-right: 1px solid #e6e6e6;
            border-top: 1px solid #e6e6e6;
            border-bottom: 1px solid #b3b3b3;
            display: inline-block;
            font-size: 12px;
            font-weight: lighter;
            line-height: 20px;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            background-color: #f5f5f5;
            background-repeat: repeat-x;
            -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            background-image: linear-gradient(to bottom,#fff,#e6e6e6);
            margin: 0px;
            margin-bottom:3px;
            padding: 0px;
        }

    .checkbutton input[type=radio]:checked + label, .checkbutton input[type=checkbox]:checked + label {
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        background-color: #d0d0d0;
    }


        .checkbutton input[type=radio] + label #preorder {
            border-left: 1px solid #CCCCFF;
            border-right: 1px solid #CCCCFF;
            border-top: 1px solid #CCCCFF;
            border-bottom: 1px solid #CCCCFF;
            display: inline-block;
            font-size: 12px;
            font-weight: lighter;
            line-height: 20px;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            background-color: #CCCCFF;
            background-repeat: repeat-x;
            -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            background-image: linear-gradient(to bottom,#fff,#CCCCFF);
            margin: 0px;
            padding: 0px;
        }

    .checkbutton input[type=radio]:checked + label #preorder {
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        background-color: #BBBBFF;
    }



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

.checkbutton_active input[type=radio], .checkbutton_active input[type=checkbox] {
    display: none;
    margin: 0px;
    padding: 0px;
    color: black;
}

    .checkbutton_active input[type=radio] + label, .checkbutton_active input[type=checkbox] + label {
        margin: 0px;
        display: inline-block;
        cursor: pointer;
        background-color: #4CAF50;
        border-color: #4CAF50;
        --bs-badge-padding-x: 0px;
        --bs-badge-padding-y: 0.55em;
        --bs-badge-font-size: 13px;
        --bs-badge-font-weight: 500;
        --bs-badge-color: #fff;
        --bs-badge-border-radius: 0.45rem;
        padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
        font-size: var(--bs-badge-font-size);
        font-weight: var(--bs-badge-font-weight);
        line-height: 1;
        color: var(--bs-badge-color);
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: var(--bs-badge-border-radius);
        width: 60px;
    }


        .checkbutton_active input[type=radio] + label, .checkbutton_active input[type=checkbox] + label:hover {
            opacity: 0.9;
            box-shadow: 0 14px 26px -12px rgba(76, 175, 80, 0.4), 0 4px 23px 0 rgba(76, 175, 80, 0.15), 0 8px 10px -5px rgba(76, 175, 80, 0.2);
        }

.checkbutton_inactive input[type=radio], .checkbutton_inactive input[type=checkbox] {
    display: none;
    margin: 0px;
    padding: 0px;
    color: black;
}

    .checkbutton_inactive input[type=radio] + label, .checkbutton_inactive input[type=checkbox] + label {
        margin: 0px;
        display: inline-block;
        cursor: pointer;
        background-color: #F44335;
        border-color: #4CAF50;
        --bs-badge-padding-x: 0px;
        --bs-badge-padding-y: 0.55em;
        --bs-badge-font-size: 13px;
        --bs-badge-font-weight: 500;
        --bs-badge-color: #fff;
        --bs-badge-border-radius: 0.45rem;
        padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
        font-size: var(--bs-badge-font-size);
        font-weight: var(--bs-badge-font-weight);
        line-height: 1;
        color: var(--bs-badge-color);
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: var(--bs-badge-border-radius);
        width: 60px;
    }


        .checkbutton_inactive input[type=radio] + label, .checkbutton_inactive input[type=checkbox] + label:hover {
            opacity: 0.9;
            box-shadow: 0 14px 26px -12px rgba(207, 57, 45, 0.4), 0 4px 23px 0 rgba(207, 57, 45, 0.15), 0 8px 10px -5px rgba(207, 57, 45, 0.2);
        }


.checkbutton_primary input[type=radio], .checkbutton_primary input[type=checkbox] {
    display: none;
    margin: 0px;
    padding: 0px;
    color: black;
}

    .checkbutton_primary input[type=radio] + label, .checkbutton_primary input[type=checkbox] + label {
        margin: 0px;
        display: inline-block;
        cursor: pointer;
        /*background-color: #e91e63;
        background-repeat: repeat-x;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        background-image: linear-gradient(to bottom,#e91e63,#e91e63);*/
        border-left: 1px solid #e6e6e6;
        border-right: 1px solid #e6e6e6;
        border-top: 1px solid #e6e6e6;
        border-bottom: 1px solid #b3b3b3;
        background-color: #f5f5f5;
        background-repeat: repeat-x;
        /*-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);*/
        background-image: linear-gradient(to bottom,#fff,#e6e6e6);
        /*border-radius: 10px;*/
        --bs-badge-padding-x: 9px;
        --bs-badge-padding-y: 5px;
        --bs-badge-font-size: 12px;
        --bs-badge-font-weight: 500;
        --bs-badge-border-radius: 0.45rem;
        padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
        font-size: var(--bs-badge-font-size);
        /*font-weight: var(--bs-badge-font-weight);*/
        /*line-height: 1;*/
        /*width: 100px;*/
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        margin: 0px auto;
    }

        .checkbutton_primary input[type=radio] + label:hover, .checkbutton_primary input[type=checkbox] + label:hover {
            /*opacity: 0.9;
            box-shadow: 0 3px 3px 0 rgba(233, 30, 99, 0.15), 0 3px 1px -2px rgba(233, 30, 99, 0.2), 0 1px 5px 0 rgba(233, 30, 99, 0.15);*/
        }

    .checkbutton_primary input[type=radio]:checked + label, .checkbutton_primary input[type=checkbox]:checked + label {
        background-image: none;
        outline: 0;
        /*-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);*/
        background-color: #d0d0d0;
    }


.checkbutton_onoff input[type=radio], .checkbutton_onoff input[type=checkbox] {
    display: none;
    margin: 0px;
    padding: 0px;
    color: black;
}

    .checkbutton_onoff input[type=radio] + label, .checkbutton_onoff input[type=checkbox] + label {
        border-left: 1px solid #e6e6e6;
        border-right: 1px solid #e6e6e6;
        border-top: 1px solid #e6e6e6;
        border-bottom: 1px solid #b3b3b3;
        display: inline-block;
        font-size: 12px;
        font-weight: lighter;
        line-height: 20px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-color: #f5f5f5;
        background-repeat: repeat-x;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        background-image: linear-gradient(to bottom,#fff,#e6e6e6);
        margin: 0px;
        margin-bottom: 3px;
        padding: 0px;
        border-radius: 5px;
        color: #333333;
    }

    .checkbutton_onoff input[type=radio]:checked + label, .checkbutton_onoff input[type=checkbox]:checked + label {
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        background-color: #4CAF50;
        color:white;
        /*margin: 0px;
        display: inline-block;
        cursor: pointer;
        background-color: #4CAF50;
        border-color: #4CAF50;
        --bs-badge-padding-x: 1.5em;
        --bs-badge-padding-y: 0.55em;
        --bs-badge-font-size: 0.8em;
        --bs-badge-font-weight: 500;
        --bs-badge-color: #fff;
        --bs-badge-border-radius: 0.45rem;
        padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
        font-size: var(--bs-badge-font-size);
        font-weight: var(--bs-badge-font-weight);
        line-height: 1;
        color: var(--bs-badge-color);
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: var(--bs-badge-border-radius);*/
    }



    .checkbutton_date input[type=radio] + label, .checkbutton_date input[type=checkbox] + label {
        border: 1px solid #CCCCCC;
    }