How to change :root rule?

Flow
1

Hello!

I want change checkbox style and create new style for checkbox. Default rules has many shadows and I need to remove it. But my rules can’t overwrite rules marked as :root in style.css

My rules:

.mycheckbox input[type="checkbox"]
+label::before
    {
    	content: "";
    	display: inline-block;
        width: 24px;
        height: 24px;
    	border-radius: 3px;
        background-color: #ffffff;
        background-image: none !important;
        webkit-box-shadow: none !important;
        box-shadow: none !important;
        border: 1px solid #e8ebef;
    	vertical-align: middle;
    	border-top-color: none !important;
    	border-bottom-color: none !important;
    }
2

Work with this code:

    .mycheckbox > input ~ label:before {
        box-shadow: none !important;
        background: transparent !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 3px !important;
        border: solid 1px #e8ebef !important;
    }

Sorry for question

3

Hello,

Using important is usually considered bad practice. Which Vaadin version are you using?