Custom CSS not working on Quick View lightbox

Hi, we are using 7.1 to run an art gallery website, we have just added an online shop and having trouble with the Quick view Lightbox.

The images are badly cropped, but also the styling is awful, full screen lots of white space etc. Hoped I could add some custom css like the the styles below, but this is not working at all?. we have now had to turn off quick view until we can find a fix.

Assuming the lightbox code has changed since the CSS was written, does anyone have an update?

.sqs-product-quick-view img {
    width: 100% !important;
    height: auto !important;
       top: 0 !important;
}

  // change overlay behind lightbox //

.sqs-product-quick-view-lightbox.sqs-modal-lightbox .sqs-modal-lightbox-content .lightbox-background {
    background: #000000 !important; opacity:.5
    }

// lightbox background color //

.sqs-product-quick-view-content {background: #319aab;}

// add a border //

.sqs-product-quick-view-content {border: 5px solid #7cccbd; }

// change close x color //

.sqs-product-quick-view-lightbox-close-button line{stroke: #ffffff !important}

// add a drop shadow //

.sqs-product-quick-view-content {box-shadow: -5px 5px 5px rgba(0,0,0,0.2)}

// button color //

.sqs-product-quick-view-content .sqs-add-to-cart-button {background-color: #dd5241 !important}

// title color //

.sqs-product-quick-view-content .ProductItem-details-title {color: #ffffff !important}

// price color //

.sqs-product-quick-view-content .product-price {color: #ffffff !important}

// excerpt color //

.sqs-product-quick-view-content .ProductItem-details-excerpt {color: #ffffff !important}

// view full item link color //

.sqs-product-quick-view-content .ProductItem-details-quickViewFullItemLink {color: #ffffff !important}

// move photo(s) down //

@media screen and (min-width: 740px) { figure.ProductItem-gallery { margin-top: 100px; }}
  

Ok, found the cause of this issue and is now rectified.

 The CSS is good, just a schoolboy error missed by myself