.popover{
    border: 0.125rem solid $secondary;
    min-width: 13.125rem;
    box-shadow: 0 0 1.875rem 0 rgba(0,0,0,0.1);
	@at-root [data-theme-version="dark"] & {
        background-color: $d-bg;
    }
    &-header{
        background: $secondary;
        color: $white;
        font-weight: 300;

        &::before{
            border-bottom: 0 !important;
        }
    }

    &-body{
        font-size: 0.75rem;
        color:var(--text);
    }
	.popover-header{
		@at-root [data-theme-version="dark"] & {
			border-color: $dark-card;
		}
    }
	@include respond ('phone-land'){
		z-index:1;
	}
}

.bootstrap-popover-wrapper{
    .bootstrap-popover:not(:last-child){
        margin-#{$dz-pos-right}: 0.5rem;
    }

    .bootstrap-popover{
        margin-bottom: .5rem;

        button:hover,button:focus{
            background: var(--primary);
            color: $white;
            box-shadow: none;
        }
    }
}


.bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after {
    bottom: 0rem;
    border-top-color: $secondary;
}

.bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after {
    #{$dz-pos-right}: 0rem;
    border-#{$dz-pos-left}-color: $secondary;
}

.bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after {
    #{$dz-pos-left}: 0rem;
    border-#{$dz-pos-right}-color: $secondary;
}

.bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after {
    top: 0rem;
    border-bottom-color: $secondary;
}

.note-popover{
    display: none;
}


.tooltip-inner {
	background-color:var(--rgba-primary-1);
	box-shadow: rgba(149, 157, 165, 0.2) 0rem .5rem 1.5rem;
	color: var(--primary);
	font-weight:400;
	width:auto;
	border-radius:$radius;
	&:before{
	  background-color:$white!important;
	}
	  
  }
.tooltip .arrow{
    border-top-color: #008ec3!important;
    background-color:$white!important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color:var(--primary); /* Set arrow color to red */
    box-shadow: rgba(149, 157, 165, 0.2) 0rem .5rem 1.5rem;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--primary); /* Set arrow color to red */
    box-shadow: rgba(149, 157, 165, 0.2) 0rem .5rem 1.5rem;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-#{$dz-pos-left}-color:var(--primary); /* Set arrow color to red */
    box-shadow: rgba(149, 157, 165, 0.2) 0rem .5rem 1.5rem;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-#{$dz-pos-right}-color:var(--primary); /* Set arrow color to red */
    box-shadow: rgba(149, 157, 165, 0.2) 0rem .5rem 1.5rem;
}