#block-tooltips {display: none; background: #F4F4F4; border: 2px solid #DDD; padding: 10px}
#block-tooltips h3 {margin: 0}
.popup-gloss, .popup-img, .popup-ref, .popup-team {color: var(--primary-colour); cursor: pointer; font-weight: bold}
.popup-gloss::after {display: inline-flex; align-items: baseline; content: url(../images/glossary.svg); padding: 0 2px; height: 18px; width: 18px}
.popup-img::after {display: inline-flex; align-items: baseline; content: url(../images/camera.svg); padding: 0 2px; height: 18px; width: 18px}
.popup-ref::after {display: inline-flex; align-items: baseline; content: url(../images/reference.svg); padding: 0 2px; height: 18px; width: 18px}
.popup-team::after {display: inline-flex; align-items: baseline; content: url(../images/person.svg); padding: 0 2px; height: 18px; width: 18px}
#tooltip-body p {font-size: 16px; margin: 5px 0}
#tooltip-buttons {display: flex; border-top: 1px solid #DDD; margin-top: 8px; padding-top: 12px}
#tooltip-buttons .theme-button a {font-size: 16px; cursor: pointer}
#tooltip-content {display: flex; flex-wrap: wrap}
#tooltip-details {display: flex; flex-direction: column; flex-grow: 1}
#tooltip-image {margin-right: 15px; max-width: 100px}
#tooltip-title {color: var(--primary-colour)}


/* MOBILE AND TABLET STYLES */
/* ------------------------ */

/* NARROW */
@media only screen and (max-width: 599px) {
	[id^="overlay-"] #boss-image {width: 100%}
}

/* NARROW TO LARGE */
@media only screen and (max-width: 1300px) {
	[id^="overlay-"] {padding: 20px}
	[id^="overlay-"] .button {margin-top: 10px}
}

/* MEDIUM TO EXTRA LARGE */
@media only screen and (min-width: 600px) {	
	#block-tooltips {width: 400px}
}

/* EXTRA-LARGE */
@media only screen and (min-width: 1300px) {
	[id^="overlay-"] {padding: 50px}
}

html[data-useragent='ccagent'] #bossplan {display: block !important; background: #CCC !important; padding: 20px; max-height: 440px !important}
html[data-useragent='ccagent'] #bossplan svg {display: block !important; margin: 0 auto; height: 400px !important; width: 600px !important; max-height: 400px !important}
html[data-useragent='ccagent'] [id^="overlay-"] {height: 400px !important}