Featherlight CSS not working except in editor

Fellow SQSPers, I've got Featherlight configured for a text popup on this page (site pw: teacup), and I've added some styling to the popup close button (below, top). Screenshot attached for what it should looks like. I can only see the CSS working when I'm logged into the. site and viewing the page in the editor. It is not working when logged out, on any type of window, incognito/private or otherwise. Meanwhile, the styling for the popup window itself (below, bottom) is working just fine. Anyone know why this might be happening in spite of the !important tags included? TIA!

.featherlight .featherlight-close-icon {
  line-height: 50px!important;
  width: 50px!important;
  color: #941114!important;
  font-size: 1.5rem!important;
}

.featherlight .featherlight-content {
  padding: 10px 42px 10px 35px!important;
}

Add this code to Bottom of CSS box

.featherlight .featherlight-close-icon {
    line-height: 50px !important;
    width: 50px !important;
    color: #941114 !important;
    font-size: 1.5rem !important;
}

.featherlight .featherlight-content {
    padding: 10px 42px 10px 35px !important;
}