replacing global css with local css - css

Question

I am trying to edit the style of a popover. In this case I want to edit the width of the display. However, I have a global popover style sheet that applies to all popovers in the application.
/* ========================================================================
Component: popovers
========================================================================== */
.popover {
border-radius: 0;
border: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
.arrow {
margin-left: -7px !important;
}
.popover-header {
padding: 1rem 0.75rem 0.5rem;
display: block;
background-color: $secondary;
border-bottom: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.popover-body {
padding: 0.5rem 1rem;
color: $body-color;
}
.popover-close {
position: absolute;
top: -2px;
right: 0;
padding: 0 0.5rem;
color: $gray-lighter;
font-size: 2rem;
font-weight: 400;
line-height: 1;
text-shadow: 0 1px 0 #fff;
&:hover {
cursor: pointer;
color: $body-color;
}
}
I would like to know how in my local css file I can overwrite/add to these inherited styles.
Local Style Sheet:
.team-activity-container {
.icon {
background-image:
background-repeat: no-repeat;
display: inline-block
}
.icon .icon-team {
background-position: -5px -5px;
width: 25px;
height: 25px
}
}
.popover {
background-color: aqua !important;
width: 500px;
}
Edit: The local stylesheet is in the container that displays the popover, and the classes in the html are all related to the contents that fill the popover. While the popover and it's stylesheets are at the global level. how can I edit the popover at the local level without having to touch the global style sheet.
Also, The popover is from ng-bootstrap and I believe the problem is I can't overwrite the default width that bootstrap sets

Answer 1

I don't know all the context you are in, but there are 3 main ways to overwrite existing CSS rules:
add a new stylesheet with the new rules after the existing ones;
if you have control over the new popover HTML, adding a class (for instance version2 so you can edit your variant in a meaningful way as .popover.version2 inheriting what is already sets and changing just what you need);
add "!important" to the rules you add and are intended to overwrite the others, but notice that if the existing rules have already that, it's not going to work.
Depends on the context there could be other solutions like leverage on HTML tags or HTML tags properties if your new popover has some difference with the previous for examples.
I hope this helps.
EDIT: I saw you have edited your question adding stuff.
Looking at the global CSS, if your popover is in a particular container just bind the new rules to the container like this:
.team-activity-container .popover {...rules};