@npo/player 1.9.0

package/src/scss/components/_nicam.scss

@@ -0,0 +1,61 @@
+.bmpui-nicam {
+    display: flex;
+    width: 100%;
+    padding-left: 1px; // offset the negative padding on the nicam icon
+    .nicam-icon{
+        display: block;
+        height: 25px;
+        width: 25px;
+        margin-left: -1px; //according to the design spec icons must overlap by 1px
+        margin-top: 3px;
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
+
+        &.nicam-icon-angst{
+            background-image: url("data:image/svg+xml,%3Csvg id='angst' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Ctitle%3Eangst%3C/title%3E%3Cpath d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/%3E%3Cpath d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM40.7,75.5c0-1.6-.1-5.4.4-7,.6-1.8,5.3-7.3,6.2-6.8.4.2-.5,5.4,1,5.4,1.3,0,.9-5.5,2.3-5.5s1,5.5,2.3,5.5c1.6,0,.6-5.2,1-5.4.9-.5,5.6,5,6.2,6.8.5,1.6.4,5.4.4,7,0,1-4.7,10.4-3.4,11.1,3.5,1.8,8.8-8.3,8.8-10.4.1-2-1-8.3-2.6-10.3-2-2.4-9.4-6.4-9.2-7.3.1-.6,9.5,2.5,10.8,3.2,1.3.6,6.6,4.3,7,5.2.8,1.5,1.4,12.3,3.4,12.2,4.6-.1,3-11.6,1.1-14.4-1.5-2.1-7.4-5.3-9.3-6s-12.3-2-12.3-3c0-.9,12-.4,14.7-.9,2.1-.4,10.8-4.1,12.5-5.9,2.6-2.7,5-14.4.2-19.4C81,28.3,79,43.7,77.9,45.2c-1.2,1.5-7.7,6.1-9.5,6.4-1.2.2-13.9,2.1-14.2,1.1-.3-.9,11.3-3.7,14-5.2,3.6-2,5.3-13.7,4.7-16.9-.6-4.2-8.7-17.7-14.5-15.6-1.6.5,8.5,14.5,8.9,17,.3,1.4-.1,11.4-1.6,12.4-.6.4-12.4,6.3-12.8,5.7-.5-.9,7.7-6.7,7.7-10,0-6.7-7.1-16.3-10-16.3-2.8,0-10,9.6-10,16.3,0,3.3,8.2,9.1,7.7,10-.4.6-12.2-5.3-12.7-5.7-1.6-1-2-11-1.7-12.4.4-2.5,10.5-16.5,9-17-5.9-2.1-14,11.4-14.6,15.6-.6,3.2,1.1,14.9,4.7,16.9,2.7,1.5,14.2,4.3,14,5.2-.3,1-13-.9-14.1-1.1-1.9-.3-8.4-4.9-9.5-6.4-1.2-1.5-3.1-16.9-4.3-15.6-4.7,5.1-2.5,16.7.1,19.4,1.7,1.8,10.4,5.5,12.5,5.9,2.8.5,14.6,0,14.6.9.1,1-10.2,2.3-12.2,3-1.9.7-7.8,3.9-9.3,6-1.9,2.8-3.5,14.3,1.1,14.4,2.1.1,2.6-10.7,3.4-12.2.4-.9,5.7-4.6,7-5.2,1.3-.7,10.7-3.8,10.8-3.2.1.9-7.2,4.9-9.2,7.3-1.6,2-2.6,8.3-2.6,10.3.1,2.1,5.3,12.2,8.8,10.4C45.5,85.9,40.6,76.5,40.7,75.5Z'/%3E%3C/svg%3E");
+        }
+        &.nicam-icon-discriminatie{
+            background-image: url("data:image/svg+xml,%3Csvg id='discriminatie' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Ctitle%3Ediscriminatie%3C/title%3E%3Cg%3E%3Cpath d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/%3E%3Cpath d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM48.3,65.6c-3.6-6.7,1.5-8.3,1.2-10.4-.1-.9-4.9-1.1-8.3-3.1-3.5-2-3.6-8.8.7-11.4,5.8-3.5,8.9,6.1,10.4,11.3.6,2.3,3.2-2,7.3,1,7.5,5.3,5.7,24.1,2.8,31.5,11.8-3.2,21.9-15.6,22.5-24.7.8-9.3-5.6-6.8-5.2-10.1s10.2-17.9-.5-17.6c-10.2.2-3.9,12.3-3.8,16.5,0,2-2.9,2.2-4.9,2.8a18.669,18.669,0,0,0-.3-7.3c-1-3.6-7.1-2.5-6.7-6.9.4-4.2,10-17.1-1.2-18.2-12.7-1.3-2.6,14-3.5,18.5-.3,1.6-2.4,1.4-4.5,2.6-2.2-7.4-9.3-3.7-9.5-7.7-.2-4.1,6.6-17.1-4.2-16.6-11.7.6-1.2,14.3-.7,17.4s-5.8,1.4-7.3,8.4a45.09,45.09,0,0,0,.2,6.2c-1.7.4-4.9,3.3-5.3,1.5-1-4.4,5-19.4-5.7-17.4C11,34,22.8,45.8,23.4,50.5c.5,3.5-7.2.4-5.3,12.8,1.7,10.8,16.1,21.6,29.1,22.5C48.6,81.8,53,74.2,48.3,65.6Zm10,19.8c.3-3.7.5-10.1-1-9.9-1.3.1-4,6.8-6,10.3A53.742,53.742,0,0,0,58.3,85.4Z'/%3E%3C/g%3E%3C/svg%3E");
+        }
+        &.nicam-icon-geweld{
+            background-image: url("data:image/svg+xml,%3Csvg id='geweld' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Ctitle%3Egeweld%3C/title%3E%3Cg%3E%3Cpath d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/%3E%3Cpath d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM51,78.4c-2.4.2-6.1-2.5-6.1-5.9a11.179,11.179,0,0,1,1.3-4.8,8.02,8.02,0,0,1-9.1-2.8,8.677,8.677,0,0,1-1.4-5,17.414,17.414,0,0,1-8.8-5.5c-2.7-3.1,1-6.1,1.8-4.9,3.9,5.7,14,9.5,17.9,8.4A3.641,3.641,0,0,0,49,55.8c.9-3-2.6-7.1-10.9-12.7a14.971,14.971,0,0,0-8.6-2.8c-7.9,0-13.2,6.9-13.2,15,0,10.8,10,14.3,15.3,12.5-2.1,3.4-.5,9.7,3.3,12.4C38.4,82.7,47.2,83.8,51,78.4Zm21.7,2.7s-1-8.9-1.4-11.6c6.4-3.4,12.1-6.7,12.1-6.7a3.191,3.191,0,0,0-.3-5.5s-6.5-3.4-13.5-6.8A170.571,170.571,0,0,0,80.7,36.1c1.9-2.6.9-7.1-4.1-6.4L59.8,32.2c-.1-5.8-.7-15-.7-15-.1-1.6-2.4-2.2-3.6-1-2,1.7-7.2,6.4-11.5,10.6-2.4-2.2-9.9-8.9-9.9-8.9a1.893,1.893,0,0,0-2.9,1.7l.1,13.7c0,1.8,2.3,1.2,2.5,0L35,24l7.1,5.8c1.4.8,2.4.7,3.9-.3l8.3-5.9L56,34.4a2.038,2.038,0,0,0,1.9,1.9l15.7-.1L65,49.8a1.829,1.829,0,0,0,.1,2.4l11.7,8.7-7.9,5.5a3.318,3.318,0,0,0-1.6,3l1.6,9.3-8.5-1a.741.741,0,0,0-1,.6c-.2.6,0,1.2.4,1.3l11,3.9C71.7,83.7,73,83,72.7,81.1ZM47.2,36.5c-3.7-4.3-9.2-1.2-13,1.7a27.2,27.2,0,0,1,7,3.1,40.207,40.207,0,0,1,5,4.2C48.8,43,50,39.8,47.2,36.5Zm6.7,23.6c3.9-2.9,8.8-7.7,5.3-12.6-2.7-3.8-6.9-3.8-11-.6,3,3,5,6.7,3.9,9.9A6.22,6.22,0,0,1,48,60.6a16.181,16.181,0,0,1-8.7-.2,4.448,4.448,0,0,0,.9,2C42.3,65.1,46.1,66.1,53.9,60.1Zm6.2,12.2c3-2.3,6.5-5.7,3.8-9.5s-6.4-1.5-9.4.8c-5.5,4.1-6.2,7.5-4.6,9.7C51.1,74.8,55.2,76.3,60.1,72.3Z'/%3E%3C/g%3E%3C/svg%3E");
+        }
+        &.nicam-icon-drugs_en_alcohol{
+            background-image: url("data:image/svg+xml,%3Csvg id='drugs_en_alcohol' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Ctitle%3Edrugs & alchohol%3C/title%3E%3Cg%3E%3Cpath d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/%3E%3Cpath d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51Zm28,21.3a4.516,4.516,0,0,0,5.8-.5c1.3-1.3,3.5,2,7.5-1.3C53,66.8,63.5,52.6,66.4,50.4c3-2.4,11.1,5.8,13.1,3C82,50,67.8,39.2,67.8,37.1c0-1.8,2-3.8,3.1-3.8,2,.1,9.3,4.3,11.2,2.1,3-3.4-16.4-19.1-19.6-16.3-2.3,1.9,3.6,9.4,3.1,10.8a3.92,3.92,0,0,1-3.5,2.7c-1.9,0-15.1-8.8-17.3-7.2-2.4,1.7,5,9.7,4.1,12.1-1,2.6-14.7,16.1-16.4,19.4-2,3.8.2,5.2-1,7.1a5.128,5.128,0,0,0,.3,6.2c-4.1,4.9-6.4,9.7-5.8,10.3C26.4,81,30.8,77.9,35.4,72.3ZM37,58.2c-2-.6-.6-2.1,1.7-2.2,2.9-.2,6.7,1.6,7.6,4.1.7,1.6.1,3.8-1.5,2.5A19.477,19.477,0,0,0,37,58.2Zm7.4-7.5c-4.3-1.2-3.4-3,.8-2.9,7.1.4,10.2,5.2,8.7,7.4C52.5,57.3,49,52.1,44.4,50.7Zm7-7.8c-3.5-1.4-2.4-2.7,1.1-2.4,6.4.5,8,4.2,6.8,6C58.2,48.2,54.6,44.4,51.4,42.9Z'/%3E%3C/g%3E%3C/svg%3E");
+        }
+        &.nicam-icon-grof_taalgebruik{
+            background-image: url("data:image/svg+xml,%3Csvg id='grof_taalgebruik' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Ctitle%3EKijkw-2020-RGB-%3C/title%3E%3Cg%3E%3Cpath d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/%3E%3Cpath d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51Zm23.1-.3c1.3-.2,9.1,7.4,11.6,6.3,2.6-1.3,3-12.7,4-13.8.6-.8,7.8-2.9,10.5-4.2,1-.6.8-1.8-.4-1.8-3,.4-11,2.1-12.2,3-1.5,1.1-2.4,9.8-3.7,10.7-1.1.6-10.1-8.8-12.8-7.5-3.4,1.6-3.3,15.1-6.8,16.2-6.8,2-3.5,12.1,3.3,8.2C28.7,65.2,28.9,51.1,30.5,50.7ZM46.7,30.1c.9-.1,4.3,1.8,5.7,2.7.7.5,1.5-.2.8-1.1-1.2-1.7-4.6-5-6.2-5-1.7,0-4.6,3.5-6,3.2-1-.2-2.5-6.7-4.3-7.5-2.6-1.1-12.4.4-10.8,6s6.1-1.8,8.9-1.3c1.6.3,2.8,7.4,4.8,8C41.7,35.6,45.6,30.2,46.7,30.1ZM59.3,72.9c2.7-.3,6.1,12.3,8.7,11.5,2-.7-1-9-.8-13.8.3-5.7,2.7-6.8,3.2-10.6.5-4.6-4-3.3-3.1-6.8.5-1.8,3.7-1.7,8.4-7.9,4-5.4,7-16.1,1.5-20.4-5.2-4-12.5-2.7-14.8,3.4,12.7,1.8,11.8,13.6,8.1,17.8-2.9,3.4-7.4,2.2-11.5-3.9-2.4,7.4,4.3,7,2.4,10.1-1.4,2.2-4-.1-7.2,3.2-6.1,6.5-2.3,31.4,2.3,32.6C59.1,88.7,56.5,73.3,59.3,72.9Z'/%3E%3C/g%3E%3C/svg%3E");
+        }
+        &.nicam-icon_seks{
+            background-image: url("data:image/svg+xml,%3Csvg id='seks' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Ctitle%3EKijkw-2020-RGB-%3C/title%3E%3Cg%3E%3Cpath d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/%3E%3Cpath d='M7.4,51a43.6,43.6,0,0,1,87.2,0C94.4,75.1,74.8,94.6,51,94.6A43.832,43.832,0,0,1,7.4,51Zm8.7-2.6a1.223,1.223,0,0,0,1.8.3c.4-.2.6-1.2.3-2,.4.4,1.3.8,1.8.3.7-.5.8-3.2.2-4.8-1-2.1-3.5-1.3-3.3,1.3-1.2-.9-3,1.2-2,3.1-1.2-.9-2.7,1.5-1.2,3.4.9,1.1,2.1,1,2.5.5A2,2,0,0,0,16.1,48.4ZM34.7,75c-2.6-4-6,.6-10.5-6.4C20,62.4,28.8,56.4,28,51.9c-.5-3.9-3.9-4.2-7-3-2.8,1.2-5.3,4.2-5.1,7.5.3,3.6,1.3,7.1,6.3,14.8,5.1,8.1,8.4,10.4,10.7,9.8C35.6,80.4,36,76.9,34.7,75ZM26.9,38.4a2.68,2.68,0,0,0-5.2.7c-.3,2.4,1,7.1,2.3,7.3C25.6,46.6,28,41.2,26.9,38.4ZM39.1,59.9c-.7-.4-1.6.2-2,1a2.84,2.84,0,0,0-.6-2.6,1.515,1.515,0,0,0-2,.7,2.552,2.552,0,0,0-.3-2.6c-.5-.3-1.9-.2-2.7,1.4-1.4,2.7.4,5.4,1.9,4.1-.8,2.4,1.5,4.7,2.7,3.3.1,3.2,3,3.7,3.8.8C40.4,63.9,40.1,60.4,39.1,59.9Zm8.3-7.8c-.4-5.1-9-8.2-7-16.4,2.8-10.7,6.8-6.4,8.4-11.6.8-2.5-.1-5.9-3.7-6.4-2.6-.4-5.8,5.1-8.8,15.5-3,10.1-3.5,13.9-2.7,17.7.7,3.6,5.1,6.8,8.3,7.1C45.3,58.3,47.9,56.5,47.4,52.1Zm-3.7,8.1c-1.4.2-2.5,6.3-2.1,9,.6,3.4,4.7,4.1,5.9.9C48.7,66.7,45.5,60,43.7,60.2Zm24.8-9.3c.8-3.8.2-7.6-2.7-17.7-3-10.4-6.2-15.9-8.8-15.5-3.7.5-4.4,3.9-3.7,6.4,1.6,5.2,5.5.9,8.3,11.6,2.1,8.2-6.5,11.3-7,16.4-.4,4.4,2.2,6.2,5.6,5.9C63.4,57.7,67.8,54.5,68.5,50.9ZM60.4,69.2c.5-2.7-.6-8.8-2.1-9-1.8-.2-4.9,6.5-3.7,9.9C55.8,73.3,59.8,72.6,60.4,69.2Zm5.5-4c1.2,1.4,3.6-.9,2.7-3.3,1.5,1.3,3.3-1.4,1.9-4.1-.8-1.6-2.2-1.7-2.6-1.4a2.8,2.8,0,0,0-.4,2.6,1.469,1.469,0,0,0-2-.7,3.155,3.155,0,0,0-.6,2.6c-.4-.8-1.3-1.4-1.9-1-1,.5-1.4,4-.9,6.1C62.9,68.9,65.9,68.4,65.9,65.2Zm14,6c4.9-7.7,6-11.2,6.3-14.8.2-3.3-2.4-6.3-5.2-7.5-3.1-1.2-6.3-.9-6.9,3-.8,4.5,7.9,10.5,3.8,16.7-4.6,7-8,2.4-10.6,6.4-1.3,1.9-.8,5.4,1.8,6C71.4,81.6,74.7,79.3,79.9,71.2Zm.4-32.1a2.622,2.622,0,0,0-5.1-.7c-1.2,2.8,1.2,8.2,2.9,8C79.3,46.2,80.6,41.5,80.3,39.1Zm8,10.9c1.5-1.9.1-4.3-1.2-3.4,1.1-1.9-.8-4-2-3.1.3-2.6-2.3-3.4-3.2-1.3-.7,1.6-.6,4.3.2,4.8.5.5,1.3.1,1.7-.3a2.367,2.367,0,0,0,.3,2,1.223,1.223,0,0,0,1.8-.3,1.775,1.775,0,0,0,0,2.1A1.586,1.586,0,0,0,88.3,50Z'/%3E%3C/g%3E%3C/svg%3E");
+        }
+        &.nicam-icon-6{
+            background-image: url("data:image/svg+xml,%3Csvg id='6' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Ctitle%3E6 jaar en ouder%3C/title%3E%3Cpath d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/%3E%3Cpath d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM43.3,78H58.7a2.568,2.568,0,0,0,2-.8l4-4a2.568,2.568,0,0,0,.8-2V52.4a2.438,2.438,0,0,0-.8-2l-4.1-3.9a2.732,2.732,0,0,0-1.9-.8H51.5a2.364,2.364,0,0,0-1.9.8l-2.5,2.2V33.2h7.8v6.9H65.5V30.9a2.973,2.973,0,0,0-.8-2l-4-4.1a2.438,2.438,0,0,0-2-.8H43.2a2.438,2.438,0,0,0-2,.8l-3.9,4.1a2.732,2.732,0,0,0-.8,1.9V71.1a2.973,2.973,0,0,0,.8,2l4,4.1A2.438,2.438,0,0,0,43.3,78Zm3.8-23.3H55V68.9H47.1Z'/%3E%3C/svg%3E");
+        }
+        &.nicam-icon-9{
+            background-image: url("data:image/svg+xml,%3Csvg id='9' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Ctitle%3E9 jaar en ouder%3C/title%3E%3Cg%3E%3Cpath d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/%3E%3Cpath d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.638,43.638,0,0,1,7.4,51ZM43.3,78H58.8a2.438,2.438,0,0,0,2-.8l3.9-4.1a2.732,2.732,0,0,0,.8-1.9V30.9a2.973,2.973,0,0,0-.8-2l-4-4.1a2.438,2.438,0,0,0-2-.8H43.3a2.568,2.568,0,0,0-2,.8l-4,4a2.568,2.568,0,0,0-.8,2V49.6a2.438,2.438,0,0,0,.8,2l4.1,3.9a2.732,2.732,0,0,0,1.9.8h7.2a2.364,2.364,0,0,0,1.9-.8l2.5-2.2V68.8H47.1V61.9H36.5v9.2a2.973,2.973,0,0,0,.8,2l4,4.1A2.438,2.438,0,0,0,43.3,78ZM47,33.1h7.9V47.3H47Z'/%3E%3C/g%3E%3C/svg%3E");
+        }
+        &.nicam-icon-12{
+            background-image: url("data:image/svg+xml,%3Csvg id='12' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Ctitle%3E12 jaar en ouder%3C/title%3E%3Cpath d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/%3E%3Cpath d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.447,43.447,0,0,1,7.4,51ZM39.8,78V24H32.6a4.216,4.216,0,0,0-1.9.3l-8.3,2.9v5.3h6.8V78Zm37.1,0V68.5H58.5v-5L76.1,49.3a2.358,2.358,0,0,0,.9-2V30.9a2.973,2.973,0,0,0-.8-2l-4-4.1a2.438,2.438,0,0,0-2-.8H54.6a2.438,2.438,0,0,0-2,.8l-4,4.1a2.973,2.973,0,0,0-.8,2v9.5H58.6V33.3h7.8V43.7L48.7,57.8a2.358,2.358,0,0,0-.9,2V78Z'/%3E%3C/svg%3E");
+        }
+        &.nicam-icon-16{
+            background-image: url("data:image/svg+xml,%3Csvg id='16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Ctitle%3E16 jaar en ouder%3C/title%3E%3Cg%3E%3Cpath d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/%3E%3Cpath d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM39.8,78V24H32.6a4.216,4.216,0,0,0-1.9.3l-8.3,2.9v5.3h6.8V78Zm14.6,0H69.8a2.568,2.568,0,0,0,2-.8l4-4a2.568,2.568,0,0,0,.8-2V52.4a2.438,2.438,0,0,0-.8-2l-4-3.9a2.973,2.973,0,0,0-2-.8H62.6a2.732,2.732,0,0,0-1.9.8l-2.5,2.3V33.2H66v6.9H76.6V30.9a2.973,2.973,0,0,0-.8-2l-4-4.1a2.438,2.438,0,0,0-2-.8H54.3a2.438,2.438,0,0,0-2,.8L48.4,29a2.732,2.732,0,0,0-.8,1.9V71.1a2.973,2.973,0,0,0,.8,2l4,4.1A2.438,2.438,0,0,0,54.4,78Zm3.8-23.3h7.9V68.9H58.2Z'/%3E%3C/g%3E%3C/svg%3E");
+        }
+        &.nicam-icon-18{
+            background-image: url("data:image/svg+xml,%3Csvg id='18' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Ctitle%3E18 jaar en ouder%3C/title%3E%3Cpath d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/%3E%3Cpath d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM39.8,78V24H32.6a4.216,4.216,0,0,0-1.9.3l-8.3,2.9v5.3h6.8V78Zm14.6,0H69.8a2.568,2.568,0,0,0,2-.8l4-4a2.568,2.568,0,0,0,.8-2V55.8a2.438,2.438,0,0,0-.8-2L72,50.1l3.8-3.7a2.438,2.438,0,0,0,.8-2V30.9a2.973,2.973,0,0,0-.8-2l-4-4.1a2.438,2.438,0,0,0-2-.8H54.3a2.438,2.438,0,0,0-2,.8L48.4,29a2.732,2.732,0,0,0-.8,1.9V44.5a2.438,2.438,0,0,0,.8,2l3.8,3.7-3.8,3.7a2.438,2.438,0,0,0-.8,2V71.3a2.438,2.438,0,0,0,.8,2l4,3.9A2.973,2.973,0,0,0,54.4,78Zm3.8-44.8H66V45.7H58.2Zm0,21.5h7.9V68.9H58.2Z'/%3E%3C/svg%3E");
+        }
+        &.nicam-icon-all{
+            background-image: url("data:image/svg+xml,%3Csvg id='all' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Ctitle%3Ealle leeftijden%3C/title%3E%3Cg%3E%3Cpath d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/%3E%3Cpath d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM35.5,78V63.5h6.8V78H52.4V30.8a2.731,2.731,0,0,0-.8-1.9l-4-4.2a2.439,2.439,0,0,0-2-.8H32.3a2.438,2.438,0,0,0-2,.8l-4,4.1a2.973,2.973,0,0,0-.8,2V78Zm0-45h6.8V54.4H35.5ZM77.9,78V69.5h-9V23.9H58.8V78Z'/%3E%3C/g%3E%3C/svg%3E");
+        }
+        &.nicam-icon-all_tous{
+            background-image: url("data:image/svg+xml,%3Csvg id='all-tous' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Ctitle%3EKijkw-2020-RGB-%3C/title%3E%3Cg%3E%3Cpath d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/%3E%3Cpath d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM30,78V59.4h3.2V55.1H22.3v4.3h3.4V78Zm1.8-29.1V43.6H43.4v5.3h7.9V28.3a2.035,2.035,0,0,0-.6-1.5l-3.2-3.4a1.717,1.717,0,0,0-1.5-.6H29.1a2.035,2.035,0,0,0-1.5.6l-3.1,3.3a2.2,2.2,0,0,0-.6,1.5V48.9Zm0-18.9H43.4v6.5H31.8Zm6.9,48h4.7a2.035,2.035,0,0,0,1.5-.6l1.8-1.6a2.035,2.035,0,0,0,.6-1.5V58.8a1.826,1.826,0,0,0-.6-1.5l-1.8-1.6a2.035,2.035,0,0,0-1.5-.6H38.7a2.035,2.035,0,0,0-1.5.6l-1.6,1.6a2.035,2.035,0,0,0-.6,1.5V74.3a2.035,2.035,0,0,0,.6,1.5l1.6,1.6A1.826,1.826,0,0,0,38.7,78Zm.6-18.6H43V73.7H39.3ZM54.2,78H59a1.826,1.826,0,0,0,1.5-.6l1.6-1.6a2.035,2.035,0,0,0,.6-1.5V55.1H58.5V73.7H54.9V55.1H50.5V74.3a2.035,2.035,0,0,0,.6,1.5l1.6,1.6A1.826,1.826,0,0,0,54.2,78ZM78,48.9V42.3H65.8V22.8H57.9V48.9ZM69.4,78h4.8a1.826,1.826,0,0,0,1.5-.6l1.7-1.6a1.826,1.826,0,0,0,.6-1.5V68.2a1.826,1.826,0,0,0-.6-1.5L75.6,65a1.826,1.826,0,0,0-1.5-.6h-4v-5h3.6v2.1H78V58.8a1.826,1.826,0,0,0-.6-1.5l-1.7-1.6a1.826,1.826,0,0,0-1.5-.6H69.4a2.035,2.035,0,0,0-1.5.6l-1.6,1.6a2.035,2.035,0,0,0-.6,1.5v6a2.035,2.035,0,0,0,.6,1.5L67.9,68a2.035,2.035,0,0,0,1.5.6h4.3v5.1H70.1V71.4H65.7v2.9a2.035,2.035,0,0,0,.6,1.5l1.6,1.6A1.826,1.826,0,0,0,69.4,78Z'/%3E%3C/g%3E%3C/svg%3E");
+        }
+        &.nicam-icon-tous{
+            background-image: url("data:image/svg+xml,%3Csvg id='tous' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Ctitle%3EKijkw-2020-RGB-%3C/title%3E%3Cg%3E%3Cpath d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/%3E%3Cpath d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.489,43.489,0,0,1,7.4,51ZM26.1,67.8V39.3h4V33.9H16.5v5.4h4.1V67.8Zm10.7,0h6.3a2.035,2.035,0,0,0,1.5-.6l2.5-2.5a2.035,2.035,0,0,0,.6-1.5V38.4a1.826,1.826,0,0,0-.6-1.5l-2.5-2.4a1.826,1.826,0,0,0-1.5-.6H36.8a2.035,2.035,0,0,0-1.5.6l-2.4,2.4a2.035,2.035,0,0,0-.6,1.5V63.2a2.035,2.035,0,0,0,.6,1.5l2.4,2.5A2.035,2.035,0,0,0,36.8,67.8Zm.9-28.5h4.5v23H37.7ZM56.2,67.8h6.4a2.035,2.035,0,0,0,1.5-.6l2.4-2.5a2.035,2.035,0,0,0,.6-1.5V33.9H61.7V62.3H57.1V33.9H51.7V63.2a2.035,2.035,0,0,0,.6,1.5l2.4,2.5A2.035,2.035,0,0,0,56.2,67.8Zm19.1,0h6.3a2.035,2.035,0,0,0,1.5-.6l2.5-2.5a2.035,2.035,0,0,0,.6-1.5V52.6a1.826,1.826,0,0,0-.6-1.5L83,48.7a2.035,2.035,0,0,0-1.5-.6H76.2V39.3h4.4v4.3h5.6V38.4a1.826,1.826,0,0,0-.6-1.5l-2.5-2.4a1.826,1.826,0,0,0-1.5-.6H75.3a2.035,2.035,0,0,0-1.5.6l-2.4,2.4a2.035,2.035,0,0,0-.6,1.5V49.8l3.6,3.7h6.2v8.8H76.1V57.9H70.8v5.3a2.035,2.035,0,0,0,.6,1.5l2.4,2.5A2.035,2.035,0,0,0,75.3,67.8Z'/%3E%3C/g%3E%3C/svg%3E");
+        }
+        &.nicam-icon-not_yet_rated{
+            background-image: url("data:image/svg+xml,%3Csvg id='not_yet_rated' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Ctitle%3EKijkw-2020-RGB-%3C/title%3E%3Cg%3E%3Cpath d='M1,51a50,50,0,1,1,50,50A50.018,50.018,0,0,1,1,51Z' fill='%23fff'/%3E%3Cpath d='M7.4,51A43.6,43.6,0,1,1,51,94.6,43.51,43.51,0,0,1,7.4,51ZM82.2,66.9,35.1,19.7A35.793,35.793,0,0,0,19.7,35.1L66.8,82.2A35.552,35.552,0,0,0,82.2,66.9Z'/%3E%3C/g%3E%3C/svg%3E");
+        }
+    }
+}

package/src/scss/components/_playnext.scss

@@ -0,0 +1,52 @@
+.bmpui-overlay-playnext {
+    display: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.07);
+    svg {
+        .ui-circle {
+            animation: progress 15s ease-out forwards;
+        }
+    }
+    &.show {
+        display: block;
+    }
+    .bmpui-container-wrapper {
+        position: relative;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .bmpui-ui-hugeplaynextbacktogglebutton {
+            position: relative;
+            height: 7.3em;
+            width: 7.3em;
+            cursor: pointer;
+            transition: background-size linear 0.2s !important;
+            background-image: url($icon_bigplay) !important;
+            background-size: 60%;
+            &:hover {
+                background-size: 70%;
+            }
+            .bmpui-label {
+                display: none;
+                position: absolute;
+                bottom: -2em;
+                width: 100em;
+                text-align: center;
+                font-weight: 700;
+                left: calc(-50em + 3.5em);
+                font-size: 22px;
+            }
+        }
+    }
+}
+
+@keyframes progress {
+    0% {
+        stroke-dasharray: 0 100;
+    }
+}

package/src/scss/components/_seekbar.scss

@@ -0,0 +1,116 @@
+.bmpui-ui-seekbar {
+    .bmpui-seekbar {
+        .bmpui-seekbar-marker {
+            background-color: var(--npo-player-primarycolor);
+        }
+
+        .bmpui-seekbar-backdrop {
+            background-color: var(--npo-player-white);
+            opacity: 0.75;
+        }
+
+        .bmpui-seekbar-playbackposition {
+            background: linear-gradient(90deg, var(--npo-player-primarycolor) 0%, var(--npo-player-primarycolor-light) 100%);
+            backdrop-filter: blur(50px);
+            border-radius: 5px;
+        }
+
+        .bmpui-seekbar-bufferlevel,
+        .bmpui-seekbar-playbackposition {
+            border-top-left-radius: 5px;
+            border-bottom-left-radius: 5px;
+        }
+
+        .bmpui-seekbar-label,
+        .bmpui-seekbar-backdrop,
+        .bmpui-seekbar-markers,
+        .bmpui-ui-seekbar {
+            border-radius: 5px;
+        }
+
+        .bmpui-seekbar-playbackposition-marker {
+            background-color: var(--npo-player-textcolor);
+            border-color: var(--npo-player-textcolor);
+            width: 16px;
+            height: 16px;
+
+            &:after {
+                border-radius: 50%;
+                width: 0;
+                height: 0;
+                position: absolute;
+                left: -14px;
+                top: -14px;
+                content: '';
+                opacity: 0.3;
+                background-color: var(--npo-player-white);
+            }
+
+            &:hover:after {
+                width: 38px;
+                height: 38px;
+            }
+        }
+
+        .bmpui-seekbar-markers>.bmpui-seekbar-marker-unplayable {
+            background: var(--npo-player-unavailable);
+            backdrop-filter: blur(25px);
+            height: 0.3125em;
+        }
+    }
+}
+
+//Thumbnail
+.bmpui-ui-seekbar-label {
+    .bmpui-seekbar-label-inner {
+        border-bottom: 0px none;
+
+        &::after {
+            display: none;
+        }
+
+        >.bmpui-container-wrapper {
+            .bmpui-seekbar-thumbnail {
+                width: 148px;
+                border-radius: 12px;
+                border: 2px solid var(--npo-player-white);
+                border-radius: 12px;
+                box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.35);
+                margin-bottom: 4px;
+
+                &[style*=background] {
+                    display: none;
+                }
+            }
+
+            .bmpui-seekbar-label-metadata {
+                background: none;
+                padding: 0;
+                position: relative;
+
+                .bmpui-seekbar-label-title,
+                .bmpui-seekbar-label-time {
+                    font-size: 13px;
+                    line-height: 1;
+                    font-weight: 700;
+                    margin: 4px auto;
+                }
+
+                .bmpui-seekbar-label-title {
+                    opacity: 0.8;
+                    width: 120px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    display: block;
+                    font-family: var(--fontRegular);
+                }
+
+                .bmpui-seekbar-label-time {
+                    font-family: var(--fontBold);
+                    font-weight: 700;
+                }
+            }
+        }
+    }
+}

package/src/scss/components/_settingspanel.scss

@@ -0,0 +1,196 @@
+.bmpui-ui-settings-panel {
+    display: block;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 24px;
+    gap: 18px;
+    height: auto !important;
+    min-width: 230px; //Hotfix for select capping of text with only 'Snelheid'
+    z-index: 100;
+    filter: drop-shadow(0px 6px 16px rgba(0, 0, 0, 0.35));
+    border-radius: 12px;
+    background-color: var(--npo-player-secondarycolor);
+
+    //&.bmpui-hidden{
+    //     display:block;
+    //     opacity:1;
+    //     visibility:visible;
+    // }
+
+    > .bmpui-container-wrapper {
+        margin: 0;
+    }
+
+    .bmpui-setting-header {
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 19px;
+    }
+
+    .bmpui-listbox-pager-button {
+        max-width: 100%;
+        overflow: hidden;
+    }
+
+    .bmpui-ui-settings-panel-page.bmpui-main-panel {
+        margin: 0;
+        > .bmpui-container-wrapper {
+            display: flex;
+            flex-direction: column;
+
+            padding: 0px;
+            gap: 16px;
+            label {
+                font-family: var(--fontRegular) !important;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 16px;
+                line-height: 19px;
+                color: #ffffff;
+                opacity: 0.75;
+            }
+            *.bmpui-ui-selectbox {
+                margin-left: 0;
+                font-family: var(--fontRegular) !important;
+                font-style: normal;
+                font-weight: 700;
+                font-size: 16px;
+                line-height: 19px;
+                text-align: right;
+            }
+
+            .bmpui-listbox-pager-button {
+                background: none;
+                max-height: unset;
+                padding: unset;
+                vertical-align: unset;
+                width: 45%;
+                margin-left: 0;
+                font-family: var(--fontRegular) !important;
+                font-style: normal;
+                font-weight: 700;
+                font-size: 16px;
+                line-height: 19px;
+                text-align: right;
+                padding-right: 15px;
+                span {
+                    display: block !important;
+                }
+                ::after {
+                    content: '';
+                    width: 8px;
+                    height: 8px;
+                    border: solid 0.17em white;
+                    border-width: 0 0.17em 0.17em 0;
+                    display: inline-block;
+                    padding: 0px;
+                    margin-left: 8px;
+                    transform: rotate(-45deg);
+                    -webkit-transform: rotate(-45deg);
+                }
+            }
+        }
+        .bmpui-ui-settings-panel-item {
+            border-bottom: 0;
+            padding: 0;
+            > .bmpui-container-wrapper {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                padding: 0px;
+                gap: 8px;
+            }
+        }
+    }
+
+    .bmpui-ui-settings-panel-page.bmpui-listbox-panel {
+        margin: 0;
+        > .bmpui-container-wrapper {
+            display: flex;
+            flex-direction: column;
+
+            padding: 0px;
+            gap: 16px;
+
+            .bmpui-ui-settingspanelpagebackbutton {
+                width: 9em;
+                float: left;
+            }
+
+            label {
+                font-family: var(--fontRegular) !important;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 16px;
+                line-height: 19px;
+                color: #ffffff;
+                opacity: 0.75;
+            }
+
+            .bmpui-ui-listbox-button span {
+                font-family: var(--fontRegular) !important;
+                text-align: left;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 16px;
+                line-height: 19px;
+                color: #ffffff;
+                opacity: 0.75;
+            }
+
+            .bmpui-ui-listbox .bmpui-ui-listbox-button.bmpui-selected {
+                background: unset;
+
+                span {
+                    color: var(--npo-player-primarycolor);
+                    font-weight: 700 !important;
+                    opacity: 1;
+                    width: 100%;
+                    &::after {
+                        position: relative;
+                        float: right;
+                        width: 24px;
+                        content: '✔';
+                    }
+                }
+            }
+            .bmpui-ui-settings-panel-item {
+                order: 2;
+                padding: 0;
+                > .bmpui-container-wrapper {
+                    > label {
+                        display: none;
+                    }
+                    > .bmpui-ui-listbox {
+                        display: flex;
+                        flex-direction: column;
+                        padding: 0px;
+                        gap: 8px;
+                    }
+                }
+            }
+
+            .bmpui-settings-back-button {
+                display: table-header-group;
+                font-family: var(--fontBold) !important;
+                order: 1;
+                font-style: normal;
+                font-weight: 700;
+                font-size: 16px;
+                line-height: 19px;
+                color: #ffffff;
+                opacity: 1;
+                span {
+                    padding-left: 35px;
+                    &::before {
+                        border-bottom: 0.17em solid #fff;
+                        border-left: 0.17em solid #fff;
+                        width: 0.5em;
+                        height: 0.5em;
+                        margin-left: -25px;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/scss/components/_subtitles.scss

@@ -0,0 +1,32 @@
+/* Subtitles */
+.bmpui-subtitle-region-container {
+    font-size: 15.22px !important;
+    position: static !important;
+    .bmpui-ui-subtitle-label {
+        /*Scale to container size*/
+        position: absolute;
+        overflow-wrap: break-word;
+        overflow: hidden;
+        flex-flow: column nowrap;
+        display: inline-flex;
+        writing-mode: horizontal-tb;
+        text-align: center;
+        width: 100%;
+        justify-content: center;
+        font-size: 1em !important;
+        font-weight: 400 !important;
+        inset: 78% auto 0px 0% !important;
+        @container (min-width: 600px) {
+            font-size: 1.593em !important;
+        }
+        @container (min-width: 700px) {
+            font-size: 1.867em !important;
+        }
+        @container (min-width: 1200px) {
+            font-size: 3.2em !important;
+        }
+        @container (min-width: 1440px) {
+            font-size: 3.84em !important;
+        }
+    }
+}

package/src/scss/components/_textbuttons.scss

@@ -0,0 +1,42 @@
+.bmpui-controlbar-textbuttons {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0px 40px 13% 0px;
+    gap: 24px;
+
+    position: absolute;
+    width: auto;
+    height: auto;
+    right: 0px;
+    bottom: 0px;
+    pointer-events: none;
+
+    // strange fix for firefox bug caused by the absence of
+    // an element containing the backdrop-filter property when
+    // set to display: none after initially being shown on first pageload
+    @-moz-document url-prefix() {
+        backdrop-filter: brightness(1);
+    }
+
+    .bmpui-ui-textbutton {
+        padding: 12px 20px;
+        background: rgba(3, 14, 30, 0.6);
+        border: 1px solid #ffffff;
+        backdrop-filter: blur(10px);
+        border-radius: 10px;
+        height: 48px;
+        box-sizing: border-box;
+        font-weight: 700;
+
+        .bmpui-label {
+            display: block;
+            font-family: var(--fontBold) !important;
+            font-size: 16px;
+            line-height: 19px;
+            align-items: center;
+            text-align: center;
+            color: #ffffff;
+        }
+    }
+}

package/src/scss/components/_volumeslider.scss

@@ -0,0 +1,23 @@
+.bmpui-ui-volumeslider {
+    box-sizing: border-box;
+    width: 100px !important;
+    .bmpui-seekbar-backdrop, .bmpui-seekbar-seekposition, .bmpui-seekbar-playbackposition{
+        border-radius: 5px;
+    }
+    .bmpui-seekbar-playbackposition {
+        background-color: var(--npo-player-white) !important ;
+        backdrop-filter: blur(50px);
+    }
+    .bmpui-seekbar-playbackposition-marker{
+        display: none !important;
+    }
+    &:hover{
+        .bmpui-seekbar-playbackposition-marker {
+            display: block !important;
+            background-color: var(--npo-player-textcolor) !important;
+            border-color: var(--npo-player-textcolor) !important;
+            width: 16px !important;
+            height: 16px !important;
+        }
+    }
+}