/*********************************************/
/*  .projects-tooltip-span-style         */
/*********************************************/

.projects-tooltip-span-style {
  cursor: pointer;
  font-size: 1.15rem;
}


@media screen and (max-width: 600px) { /* this is the dynamic settings for the html.P block that holds the title banner */
  .projects-tooltip-span-style {
    cursor: pointer;
    font-size: calc(1.1rem - 0.3vw);
  }
}

@media screen and (857px <= width <= 1275px) { /* this is the dynamic settings for the html.P block that holds the title banner */
  .projects-tooltip-span-style {
    cursor: pointer;
    font-size: 1.15rem;
  }
}

/*********************************************/
/*  .projects-tooltip-style         */
/*********************************************/

.projects-tooltip-style {
  white-space: pre-wrap;
}


.tooltip-inner {
  text-align: left;
  background-color: rgb(0, 0, 0);
  border: 1px solid rgba(233,195,30,1);
}

/* I got the code below from this site: https://community.plotly.com/t/dash-bootstrap-components-tooltip-color/60989/3 */

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: rgba(233,195,30,1);
}
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    border-right-color: rgba(233,195,30,1);
}
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    border-bottom-color: rgba(233,195,30,1);
}
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    border-left-color: rgba(233,195,30,1);
}



/*************************************************/
/*  accordion button arrow color styling         */
/*************************************************/

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
 }