Angular Material checkbox and weird spacing

I have a panel where I put angular material checkbox. Because the panel is black I set the background color of the checkbox to white to indicate to the user that it's there. However, there is some spacing added to the right of the checkbox which I can't seem to get rid of. Anyone know how to fix this ? Setting Padding to 0 doesn't work

 <div id="chartWrapper-" style="position: relative">
         <div id="chartTopPanel-"
          style="position: absolute; display: none; left:0; top:0; height: 15%; width: 100%; opacity: 1; background-color: darkslategrey; z-index: 100;">
                   <md-checkbox id="chartSelect-" style="
                   position: absolute;  margin:10px; background-color: white; padding-right: 0" >
                   </md-checkbox>
         </div>             
 </div>