Changing colour of current tab in form tab widget

Hi, I can't seem to change the colour of the corner triangles (through the form tab widget) of the 'current tab' through CSS. I can change the colour of the main part of the tab but not the corners. I've tried to follow some of the other suggestions on other threads but I'm not sure why isn't working. My CSS is as follows:

.tabs-list .liContent { font-size: 9px; }
.tabs-list.tabs-list li { padding: 3px 17px; }

#tabs-list .current {
    color : #ffffff !important;
    background : #008a78 !important;
}
.current div.liBefore {
    border-bottom-color: #008a78 !important;
}
.current div.liAfter {
    border-bottom-color: #008a78 !important;
}

You can try this one instead:

.tabs-list .liContent {

font-size: 9px;

}

.tabs-list.tabs-list li {

padding: 3px 17px;

}

#tabs-list .current {

    color : #ffffff !important;

    background : #008a78 !important;

}

#tabs-list > li.current > div.liAfter, #tabs-list > li.current > div.liBefore {

border-bottom: 28px solid #008A78 !important;

}

Paste that code in your widget's settings. This is how it looks like in my cloned form: https://form.jotform.com/60314337019953 

Make sure that there's no other CSS code that might conflict with it. Let us know if that works.