login box background color customization does not work

1. install nuxeo
2. in Studio project add the following in XML extensions:

     <extension target="org.nuxeo.ecm.platform.ui.web.auth.service.PluggableAuthenticationService" point="loginScreen">
       <loginScreenConfig>
         <bodyBackgroundStyle>url("${org.nuxeo.ecm.contextPath}/img/login_bg.jpg") no-repeat center center fixed #333</bodyBackgroundStyle>
         <disableBackgroundSizeCover>false</disableBackgroundSizeCover>
         <removeNews>true</removeNews>
         <footerStyle>display: none;</footerStyle>
         <loginBoxBackgroundStyle>none transparent</loginBoxBackgroundStyle>
         <loginBoxWidth>300px</loginBoxWidth>
         <loginButtonBackgroundColor>#dd0f0f</loginButtonBackgroundColor>
       </loginScreenConfig>
     </extension>
   

3. synchronize the project
4. observe the login button being red. This confirms the contribution has been loaded correctly
5. observe the login box background color is white although set as transparent in the contribution (see redBtWhiteBg.png)
6. in Chrome inspector we can see the property background-color is set to transparent but is overriden (struck through, see overridenProperty.png)
7. this is due to the following block:

   @media all and (min-width: 500px) {
     form {
       background-color: #fff;
       padding: 2.5em;
       width: 20em;
     }
   
   }

   being after the one using the contribution:

   form {
     display: flex;
     flex-direction: column;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     width: 20em;
     margin: 0;
     padding: 1em;
     background: <%=loginBoxBackgroundStyle%>;
   }
   

Moving the block before makes it work (see redBtTransparentBg.png)