.course-link-popup-container { position: relative; display: inline-block; }
.course-link-popup-container .button { background-color: transparent; background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); border: 1px solid rgba(0, 0, 0, 0.8); border-radius: 2px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); color: #000; cursor: pointer; display: inline-block; font-weight: bold; line-height: 1; text-decoration: none; white-space: nowrap; font-size: 1rem; padding: 0; }
.course-link-popup { background-color: #fff; border: 1px solid #111; border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); color: #111; display: inline-block; font-size: 0.8rem; font-weight: normal; left: 100%; margin-left: 4px; max-width: 50vw; padding: 0.5rem; position: absolute; top: 0; width: 20rem; z-index: 10; }
.course-link-popup h1 { font-size: 1rem; font-weight: bold; margin: 0; text-align: left; }
.course-link-popup.shift { left: auto; right: 100%; }
.course-link-popup p { margin: 0; }
.course-link-popup img { margin-left: 0.5rem; }
button[data-course-link-popup] * { pointer-events: none; }
button[data-course-link-popup] svg { margin-bottom: -0.1em; }

.course-link-lookup, .course-link-title { color: #225; }
.course-link-lookup-loader { -webkit-animation: course-link-lookup-spin 2s infinite linear; animation: course-link-lookup-spin 2s infinite linear; }
@-webkit-keyframes course-link-lookup-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes course-link-lookup-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}