@charset "UTF-8";
/* ==========================================================================
   OPINER BESPOKE CSS start
========================================================================== */
.opiner-full-height {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.note {
  background-color: pink;
  padding: 1em;
}

.opiner-text-center {
  text-align: center;
}

.opiner-bg-gradient {
  background: linear-gradient(to bottom right, #F79F03, #F42794);
  color: azure;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2823529412);
}
.opiner-bg-gradient a, .opiner-bg-gradient a:link, .opiner-bg-gradient a:active, .opiner-bg-gradient a:visited {
  color: azure;
}

.opiner-big-dog {
  font-size: 550%;
  line-height: normal;
  font-weight: 700;
  display: block;
}

.opiner-image-shadow {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  border-radius: 5px;
  max-width: 100%;
  height: auto;
}

.opiner-glow {
  box-shadow: 0 0 50px 4px rgba(0, 0, 0, 0.27);
}

#opiner-demo-overlay {
  position: relative;
}

#tileChucker {
  position: relative;
  overflow: hidden; /* prevents images from overflowing */
}

.responseThumb {
  position: absolute;
  transition: transform 0.8s ease-in-out;
  will-change: transform;
  pointer-events: auto;
  max-width: 150px;
  height: auto;
  border-radius: 0.5em;
  filter: saturate(90%) brightness(85%) blur(0px);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

#random {
  position: absolute;
  bottom: 2em;
  right: 2em;
  margin: 0;
}

@media (max-width: 600px) {
  .opiner-hide-on-small {
    display: none;
  }
  .opiner-big-dog {
    font-size: 300%;
  }
  .opiner-bg-gradient {
    color: azure;
    text-shadow: none;
  }
  .responseThumb {
    display: none;
  }
  #random {
    display: none;
  }
}
.nhsuk-panel {
  background-color: green;
  color: azure;
  padding: 3em;
  font-weight: bold;
}
.nhsuk-panel a, .nhsuk-panel a:link, .nhsuk-panel a:hover, .nhsuk-panel a:active, .nhsuk-panel a:visited {
  color: azure;
}

.bg-pink {
  background-color: #ec4899;
}

.nhsuk-main-wrapper {
  padding: 0;
}

.opiner-body {
  position: relative;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, Sans-serif;
  font-weight: 500;
  scroll-behavior: smooth;
  height: -webkit-fill-available;
}

body {
  touch-action: manipulation;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

.nhsuk-width-container {
  max-width: 1280px;
}

.opiner-text-green {
  color: #007f3b !important;
}

.opiner-link-no-style:link, .opiner-link-no-style:visited, .opiner-link-no-style:hover, .opiner-link-no-style:active {
  text-decoration: none;
  border: none;
  background-color: transparent;
  box-shadow: none;
}

.opiner-heading-xl {
  font-weight: 800;
}

.opiner-img-responsive {
  width: 100%;
  height: auto;
}

.opiner-community-card {
  padding: 2rem;
  background-color: #0b0c0c;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0.3em;
}
.opiner-community-card h3 a {
  color: #fff;
}
.opiner-community-card .opiner-card-logo {
  max-height: 4rem;
}

.opiner-body-l * {
  font-size: 24px;
  line-height: 32px;
}

.opiner-contents-list__link__selected {
  background-color: #ffeb3b;
  box-shadow: 0 -2px #ffeb3b, 0 4px #212b32;
  color: #212b32;
  outline: 4px solid transparent;
  text-decoration: none;
}

.opiner-button-danger {
  background-color: red;
}
.opiner-button-danger:hover {
  background-color: rgb(210, 0, 0) !important;
}

.opiner-button-block {
  display: block;
  width: 100%;
}

.opiner-pink {
  color: #ec4899;
}

.opiner-yellow {
  color: #eab308;
}

.opiner-blue {
  color: #5e57c7;
}

.opiner-text-danger {
  color: #d5281b;
}

.opiner-text-success {
  color: #007f3b;
}

.opiner-bg-brand {
  background: #0f172a !important;
}

.opiner-text-light {
  color: #ffffff !important;
}
.opiner-text-light a {
  color: #ffffff !important;
}

.opiner-text-pink {
  color: #ec4899 !important;
}

.opiner-text-secondary {
  color: #4c6272;
}

.opiner-text-xl {
  font-size: x-large;
}

.opiner-text-lg {
  font-size: large;
}

.opiner-text-sm {
  font-size: small;
}

.opiner-text-xs {
  font-size: x-small;
}

.nhsuk-section:nth-child(odd) {
  background-color: #ffffff;
}

.nhsuk-inset-text {
  border-color: #ec4899;
}

.opiner-hide, .hide {
  display: none;
}

.opiner-spacing-reset {
  padding: 0;
  margin: 0;
}

.opiner-type-mono {
  font-family: monospace;
}

.opiner-list-inline {
  padding: 0;
}

.opiner-list-inline li {
  display: inline-block;
}

.opiner-block {
  display: block;
}

.opiner-tag {
  border-radius: 0.3rem;
}

.opiner-stage {
  width: 100%;
  background-color: #0f172a;
  border-radius: 0.3em;
  overflow: hidden;
  position: relative;
  margin-bottom: 2rem;
  padding: 2rem;
}

.opiner-stage * {
  color: #ffffff;
}

.opiner-panel.opiner-panel-overlay {
  position: relative;
}

.opiner-panel.opiner-panel-overlay .opiner-panel-overlay-content {
  color: #ffffff;
  position: absolute;
  top: 1em;
  left: 1em;
}

.opiner-panel .opiner-tab {
  display: inline-block;
  padding: 0.3em 0.7em;
  margin: 0;
  margin-left: 0.7em;
  background: #ec4899;
  color: #ffffff;
  position: relative;
  z-index: 9999;
}

.opiner-panel .opiner-panel__content {
  border-radius: 0.5em;
  overflow: hidden;
  border: 1px solid #f0f4f5;
  position: relative;
  display: flex;
  flex-direction: column;
}

.opiner-panel .opiner-panel__content #videopPlayheadPosition {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: white;
  border-radius: 0.5rem;
  padding: 0.1rem 0.5em;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 1.4rem;
  font-family: monospace;
}

.opiner-panel .opiner-panel__content #videoResponderName {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: white;
  text-align: left;
}

.opiner-panel .opiner-panel__content .opiner-button-group {
  margin: 0;
  min-height: 4rem;
}

.opiner-panel .opiner-panel__content .opiner-button-group .nhsuk-button:focus {
  background-color: #00662f;
  color: white !important;
}

.opiner-panel .opiner-panel__content .opiner-button-group .nhsuk-button--secondary:focus {
  background-color: #4c6272;
  color: white !important;
}

.opiner-panel .opiner-panel__with-ribbon {
  margin-top: -1.5em;
}

.opiner-rounded {
  border-radius: 0.4em;
  overflow: hidden;
}

.opiner-button-ghost {
  padding: 0 0.5em;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding-bottom: 2px;
}

.opiner-button-ghost:active {
  padding-bottom: 0;
  padding-top: 2px;
}

.opinerButtonKeyboardShortcutClicked {
  background-color: #ffeb3b !important;
}

.opiner-text-align-center {
  text-align: center;
}

.opiner-text-align-right {
  text-align: right;
}

video::cue {
  padding: 1em;
}

.opiner-button--warning {
  background: #d5281b;
  box-shadow: 0 4px 0 #7d1710 !important;
}
.opiner-button--warning:hover {
  background: #aa2016;
}

.opiner-text-success {
  color: #d5281b;
}

.opiner-text-warning {
  color: #ffb81C;
}

.opiner-text-danger {
  color: #d5281b;
}

.opiner-global-alert {
  background-color: #ffeb3b;
  padding: 1.5em 0;
}

.opiner-button-group {
  box-shadow: 0 4px 0 #00401e;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.opiner-button-group .nhsuk-button {
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  margin: 0;
}

/* ==========================================================================
   OPINER BESPOKE CSS start
========================================================================== */
.alert {
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding: 2rem;
  color: #ffffff;
  background-color: #4c6272;
}
.alert a {
  color: #fff;
}

.alert.alert-info {
  background-color: #005eb8;
}

.alert.alert-warning {
  background-color: #ffb81C;
  color: #0b0c0c;
}
.alert.alert-warning a {
  color: #005eb8;
}

.alert.alert-danger {
  background-color: #d5281b;
}

.alert.alert-success {
  background-color: #007f3b;
}

.alert p {
  margin: 0;
  padding: 0;
}

.opiner-clear {
  clear: both;
}

.opiner-client-logo {
  margin-bottom: 1em;
}

.opiner-client-logo__l {
  max-width: 260px;
  max-height: 120px;
  height: auto;
}

.opiner-client-logo__s {
  max-width: 50px;
  height: auto;
}

.opiner-client-logo__m {
  max-width: 100px;
  height: auto;
}

.opiner-float-left {
  float: left;
  margin-right: 1em;
  margin-bottom: 1em;
}

.opiner-float-right {
  float: right;
  margin-left: 1em;
  margin-bottom: 1em;
}

.opiner-list-inline li {
  display: inline-block;
  margin-right: 0.5em;
}

.opiner-list-inline--commas {
  margin: 0;
  padding: 0;
}
.opiner-list-inline--commas li {
  display: inline-block;
}
.opiner-list-inline--commas li:not(:last-child)::after {
  content: ", ";
}
.opiner-list-inline--commas li:last-child::after {
  content: ".";
}

.opiner-grid--home {
  justify-content: end;
}

.opiner-community-code {
  font-weight: bold;
  text-transform: uppercase;
  background-color: #fff;
  color: #000;
  padding: 0 0.6rem;
  font-size: 95%;
}

.opiner-thumb {
  max-width: 8rem;
  border-radius: 0.4em;
}

.opiner-community-gallery {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  gap: 1em;
}

.opiner-text-shadow {
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}

.opiner-header-home {
  color: azure;
  min-height: 100vh;
  text-align: center;
  background-color: #000;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/assets/gfx/5slides-bg001.jpg") no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
}
.opiner-header-home .opiner-nav-home {
  position: absolute;
  top: 2em;
  right: 2em;
}
.opiner-header-home .opiner-nav-home ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 1em;
}
.opiner-header-home .opiner-nav-home ul li {
  list-style-type: none;
}
.opiner-header-home .opiner-nav-home a, .opiner-header-home .opiner-nav-home a:link, .opiner-header-home .opiner-nav-home a:hover, .opiner-header-home .opiner-nav-home a:active, .opiner-header-home .opiner-nav-home a:visited {
  color: azure;
}

.opiner-logo-link {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  outline: none !important;
}

.opiner-header {
  background: #0f172a;
  padding: 0.6em 0;
  color: #ffffff;
}

.opiner-reading-width {
  max-width: 60ch;
}

.opiner-header .nhsuk-breadcrumb__back::before {
  color: #ffffff !important;
}

.opiner-header .nhsuk-breadcrumb__back a {
  color: #ffffff !important;
}

.opiner-header .nhsuk-section-break {
  border-color: rgba(255, 255, 255, 0.2862745098);
}

.opiner-header .opiner-logo-header {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.opiner-header .opiner-logo-header--link {
  width: auto;
}

.opiner-header-link {
  color: #ffffff;
  text-decoration: none;
}

.opiner-header-link:hover, .opiner-header-link:visited {
  color: #ffffff;
  text-decoration: underline;
}

.opiner-responsive {
  width: 100%;
  height: auto;
}

.opiner-nav-selected {
  text-decoration: none;
}

/* ==========================================================================
   VIDEO CROPPER
========================================================================== */
.opiner-cropper {
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center; /* centers content horizontally */
  align-items: center; /* centers content vertically */
  height: 75%; /* ensure the div has a height, adjust as needed */
  width: 75%;
  overflow: hidden;
  position: relative;
  background: rgb(134, 134, 134);
  border-radius: 0.3rem;
}
.opiner-cropper .recording-stats {
  position: absolute;
  top: 3rem;
  left: 3rem;
  font-family: "Courier New", Courier, monospace;
  font-size: 200%;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.5254901961);
  padding: 0.5rem 1.2rem;
  border-radius: 0.3rem;
  line-height: normal;
}
.opiner-cropper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ==========================================================================
   OPINER CAROUSEL
========================================================================== */
.opiner-carousel {
  position: relative; /* Already set in JS – good! */
  overflow: hidden; /* This ensures content stays within bounds */
  width: 100%; /* Or set a fixed width, e.g. 400px */
  height: 300px; /* Set to match your image height or desired */
}

.opiner-carousel li {
  list-style: none;
}

.opiner-img-responsive {
  display: block;
  width: 100%;
  height: auto;
}

.opiner-playlist-clips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.opiner-nav {
  padding: 0.5em 1em;
  background-color: #0f172a;
}

.opiner-nav-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.opiner-nav-sharing {
  background-color: transparent;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.opiner-nav-sharing .opiner-nav-content {
  justify-content: end;
}
.opiner-nav-sharing li a {
  color: #005eb8 !important;
}

.opiner-nav-items ul {
  margin: 0;
  padding: 0;
}
.opiner-nav-items ul li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: smaller;
}

.opiner-nav-items li a {
  display: inline-block;
  padding: 0.3em;
}

.opiner-filter-white {
  filter: invert(56%) sepia(59%) saturate(856%) hue-rotate(3deg) brightness(103%) contrast(98%) !important;
}

.opiner-link-dark {
  color: #fff;
}
.opiner-link-dark:hover {
  color: rgb(180, 180, 180);
}
.opiner-link-dark:visited {
  color: #fff;
}

.opiner-header__slides {
  background-color: #0f172a;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  min-height: 40vh;
  padding: 7em 0 5em 0;
}

.opiner-hero {
  background-color: #0f172a;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 7em 0 5em 0;
}

.opiner-hero-wrap {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1rem;
}

.opiner-hero-col1 {
  padding-right: 5rem;
}

.opiner-ww-header {
  display: grid;
  grid-template-columns: auto 33.3%;
  gap: 1.5em;
}

.opiner-ww-header-meta {
  display: flex;
  gap: 1.5em;
  flex-direction: row;
  justify-content: space-between;
}

.opiner-header__masthead .nhsuk-breadcrumb {
  background-color: transparent;
}

.opiner-header__masthead .nhsuk-breadcrumb .nhsuk-breadcrumb__link,
.opiner-header__masthead .nhsuk-breadcrumb .nhsuk-breadcrumb__back,
.opiner-header__masthead .nhsuk-breadcrumb .nhsuk-breadcrumb__backlink {
  color: #ffffff;
}

.opiner-header__masthead .nhsuk-caption-l {
  color: #ffffff;
}

.opiner-bg-brand {
  background: #0f172a;
  color: #ffffff;
}

.opiner-bg-brand .opiner-panel__content {
  border: transparent;
}

.opiner-block-center {
  margin-left: auto;
  margin-right: auto;
}

.opiner-inline-group {
  display: flex;
  white-space: nowrap;
}

.opiner-align-right {
  text-align: right;
}

.opiner-align-bottom {
  display: flex;
  flex-direction: row;
  align-items: end;
}

.opiner-align-middle {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 1em;
}

.opiner-align-middle-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  column-gap: 1em;
}

.opiner-align-top {
  display: flex;
  flex-direction: row;
  align-items: start;
  column-gap: 1em;
}

.opiner-flex-right {
  display: flex;
  justify-content: end;
  background-color: yellow;
}

.opiner-flex-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.opiner-flex-vertical {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.opiner-flex-horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.opiner-flex-column {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.opiner-footer {
  border-top: 4px solid #d8dde0;
}

.opiner-footer-logo--link :hover,
.opiner-footer-logo--link :focus {
  text-decoration: none !important;
  border: none !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.opiner-thumb-s {
  width: auto;
  max-width: 3em;
  padding: 4px;
  background-color: #ffffff;
  border-radius: 0.4em;
}

.opiner-thumb-m {
  width: auto;
  max-width: 8em;
  padding: 4px;
  background-color: #ffffff;
  border-radius: 0.5rem;
}

.opiner-thumb-l {
  width: auto;
  max-width: 12em;
  padding: 4px;
  background-color: #ffffff;
  border-radius: 0.4em;
}

.opiner-thumb-xl {
  width: auto;
  max-width: 20em;
  padding: 4px;
  background-color: #ffffff;
  border-radius: 0.4em;
}

.opiner-beta-panel {
  padding: 1em;
  background-color: #ffffff;
  border-radius: 0.4em;
  margin-bottom: 1em;
}

.opiner-opacity-none {
  opacity: 0;
}

.opiner-fade-in {
  animation: fadeIn;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-direction: forwards;
}

.opiner-fade-in-out {
  animation: fadeInOut;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-direction: forwards;
}

.opiner-fade-out {
  animation: fadeOut;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-direction: forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slideUp {
  0% {
    transform: translate(-100px);
  }
  100% {
    transform: translate(0px);
  }
}
.opiner-modal {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  padding: 1rem;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: auto;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.opiner-modal .opiner-modal-content {
  padding: 2rem;
  background-color: #ffffff;
  width: 90%;
  max-width: 30em;
  border-radius: 0.4em;
}

.opiner-modal .opiner-modal-content--wide {
  max-width: 50em;
}

.opiner-modal-close {
  background-color: transparent;
  font-size: x-large;
  padding: 0.3rem;
  border: none;
  cursor: pointer;
  color: #768692;
}

.opiner-hidden {
  display: none !important;
}

.keyboard {
  display: inline-block;
  background-color: #e9e9e9;
  border: 1px solid rgb(195, 195, 195);
  border-bottom-width: 3px;
  border-radius: 5px;
  padding: 2px 8px;
  font-family: monospace;
}

.opiner-instruction-button {
  display: inline-block;
  transform: translate(0, -3px);
  background-color: #007f3b;
  border: 0px solid #0f401d;
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 6px;
  color: #ffffff;
  font-size: small;
}

.opiner-instruction-button--secondary {
  background-color: #4c6272;
  border: 0px solid #253139;
  border-bottom-width: 2px;
}

.opiner-video-wrapper {
  border-radius: 1em;
  border: 10px solid red;
  max-width: 60%;
  margin: 0 auto;
  background-color: green;
  overflow: hidden;
}

.opiner-video-player {
  width: 100%;
  border-radius: 0.5em;
  overflow: hidden;
}

.highlight-item {
  transition: all 0.1s ease;
  cursor: pointer;
  background-color: #fff;
  border-radius: 0.5rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  overflow: hidden;
  border-left: 0.5rem solid transparent;
}

.highlight-item:hover {
  border-color: #eab308;
}

.highlight-item.active {
  border-color: #ec4899;
}

.draggable-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2em;
  margin-bottom: 3rem;
}
.draggable-tiles .tile-drag {
  display: grid;
  grid-template-columns: auto 1fr;
  border: none !important;
  border-radius: 0.3rem;
  overflow: hidden;
}
.draggable-tiles .tile-drag--drag {
  background-color: #d8dde0;
}
.draggable-tiles .tile-drag--main {
  display: block;
}
.draggable-tiles .tile-drag--main button {
  float: right;
}
.draggable-tiles .tile-drag--main .tile-drag--thumbnail {
  max-width: 50%;
  height: auto;
  padding: 4px;
  background-color: #ffffff;
  border-radius: 0.5em;
  float: left;
}
.draggable-tiles .tile-drag--main ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  clear: both;
}

.opiner-grid-home {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em;
}
.opiner-grid-home .nhsuk-card {
  margin-bottom: 0;
}

.opiner-tile {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.opiner-bookmarker-row {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 1em;
  margin-bottom: 0.5rem;
}

.opiner-bookmarker-row-controls {
  padding-top: 0.3rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
}

.opiner-bookmarker-row-controls .nhsuk-button {
  margin-bottom: 0;
  width: 100%;
}

.bookmarkerForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bookmarkerOverlay {
  background-color: #f0f4f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 0.5rem 0;
}

#bookmarkSavedAlert span {
  color: #005eb8;
  font-size: xx-large;
}

.opiner-bookmarker-timeline {
  background-color: #f0f4f5;
  margin-bottom: 1rem;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  min-height: 8px;
}

.opiner-bookmarker-timeline-bookmark {
  background-color: #ec4899;
  height: 0.5em;
  position: absolute;
}

.opiner-bookmarker-timeline-bookmark a {
  overflow: hidden;
  text-indent: -999px;
  display: block;
}

.opiner-bookmarker-timeline--stacked .opiner-bookmarker-timeline-bookmark {
  position: relative;
}

.opiner-bookmark-card {
  position: relative;
}

.opiner-bookmark-card .nhsuk-card__content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.opiner-bookmark-card .nhsuk-button {
  margin-bottom: 0;
}

.opiner-bookmark-card .bookmarkCardFave {
  position: absolute;
  top: 0.3em;
  right: 0.5em;
  z-index: 999;
}

.opiner-bookmark-card .opiner-bookmark-card-thumb {
  max-width: 33%;
  padding: 4px;
  background-color: #ffffff;
  border-radius: 0.5em;
  float: right;
  margin-left: 1rem;
}

.bookmarkTags {
  margin: 0;
}

.opiner-bookmark-card--hide-extra .opiner-bookmark-card--extra {
  display: none;
}

.bookmarkCardActionButtons {
  clear: both;
}

.bookmark-tag {
  background-color: #ec4899;
  color: white;
  padding: 0 0.5rem;
  border-radius: 100px;
  display: inline-block;
  word-break: break-all;
  font-size: small;
}

.opiner-bookmark-wide {
  transition: all 0.3s ease-out;
  max-height: 200px;
  overflow: hidden;
}

.opiner-bookmark-wide .bookmark-wrap {
  display: flex;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid #d8dde0;
  background-color: #ffffff;
  margin-bottom: 1rem;
}

.opiner-bookmark-wide .bookmark-wrap .nhsuk-button {
  margin: 0;
}

.opiner-bookmark-wide .bookmark-wrap .bookmark-content {
  width: 100%;
}

.opiner-bookmark-wide .opiner-bookmark-wide--notesActions {
  display: grid;
  row-gap: 1em;
}

.opiner-bookmark-wide .opiner-bookmark-wide--notes {
  padding-right: 1rem;
}

.opiner-bookmark-wide .opiner-bookmark-wide--notes * {
  margin-top: 0;
  margin-bottom: 0;
}

.opiner-bookmark-wide .opiner-bookmark-wide--notes .opiner-bookmark-wide--text p {
  width: 30ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opiner-bookmark-wide .opiner-bookmark-wide--overview {
  display: flex;
  align-items: top;
  gap: 1rem;
}

.opiner-bookmark-wide .opiner-bookmark-wide--photo {
  position: relative;
}

.opiner-bookmark-wide .opiner-bookmark-wide--photo .opiner-bookmark-wide--position {
  position: absolute;
  top: 0;
  left: 0.3rem;
  font-weight: bold;
  font-size: medium;
  color: #ffffff;
}

.opiner-bookmark-wide .opiner-bookmark-wide--photo .opiner-bookmark-wide--position span {
  display: none;
}

.opiner-bookmark-wide .opiner-bookmark-wide--actions {
  width: 100%;
  display: flex;
  justify-content: end;
  gap: 0.5rem;
}

.opiner-bookmark-wide .opiner-bookmark-wide--actions .nhsuk-button {
  width: 25%;
}

.removeItemRight {
  transform: translateX(200px);
  z-index: -999;
  opacity: 0.2;
  max-height: 0px;
}

.removeItemLeft {
  transform: translateX(-200px);
  z-index: -999;
  opacity: 0.2;
  max-height: 0px;
}

.removeItemUp {
  transform: translateY(-200px);
  z-index: -999;
  opacity: 0.2;
  max-height: 0px;
}

.removeItemDown {
  transform: translateY(200px);
  z-index: -999;
  opacity: 0.2;
  max-height: 0px;
}

.test-items-wrapper {
  background-color: #717171;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  transition: all 1s;
}

.test-items-wrapper .test-item {
  background-color: #d8dde0;
  padding: 2rem;
  border-radius: 0.5em;
}

.test-items-wrapper .test-item * {
  margin: 0;
}

.opiner-response-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1.5em;
}

.opiner-section-full-width {
  padding: 1rem;
}

.opiner-section-full-height {
  min-height: 100vh;
  position: relative;
}

.opiner-response-grid-round {
  text-align: center;
}

.opiner-wonderwall-grid--details .opiner-card-item .opiner-wonderwall-thumb {
  float: right;
  margin: 2rem 2rem 1rem 1rem;
  border-radius: 0.3rem;
  max-width: 30%;
}
.opiner-wonderwall-grid--details .opiner-card-item #responder-name {
  display: none;
}

.opiner-wonderwall-grid--individuals {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.opiner-wonderwall-grid--individuals .nhsuk-card {
  margin-bottom: 0;
}
.opiner-wonderwall-grid--individuals .opiner-card-item {
  text-align: center;
}
.opiner-wonderwall-grid--individuals .opiner-card-item .classificationOrName {
  display: none;
}
.opiner-wonderwall-grid--individuals .opiner-card-item #response-summary {
  display: none;
}
.opiner-wonderwall-grid--individuals .opiner-card-item #response-links {
  display: none;
}

.opiner-wonderwall-grid--details {
  display: grid;
  gap: 2rem;
}
.opiner-wonderwall-grid--details .nhsuk-card {
  margin-bottom: 0;
}

.opiner-footer-response {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.opiner-pagination {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.opiner-pagination-item a {
  text-decoration: none;
}

.opiner-pagination-item-content {
  font-size: large;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
}
.opiner-pagination-item-content .opiner-thumb-s {
  width: 2.5rem;
  height: auto;
  margin: 0.5rem;
}

.opiner-pagination-item-center {
  text-align: center;
}

.opiner-pagination-item-right .opiner-pagination-item-content {
  flex-direction: row-reverse;
}

.opiner-gradient {
  background: linear-gradient(126deg, rgb(247, 161, 1) 0%, rgb(244, 35, 152) 100%);
}

.opiner-qrcode {
  position: absolute;
  top: 2rem;
  right: 2rem;
  float: right;
  z-index: 999;
}
.opiner-qrcode span {
  display: block;
  color: white;
  text-align: center;
  margin-bottom: 0.5rem;
}
.opiner-qrcode img {
  background: #FFF;
  padding: 1rem;
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: 1em;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
}

.ccsu-phone-wrap {
  padding: 0 50px;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5137254902);
}

.ccsu-phone {
  text-align: center;
  background-image: url(../gfx/ccsu-phone-frame.png);
  background-size: cover;
  padding-top: 110px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 140px;
  transform: rotate(3deg);
  margin-bottom: -3rem;
}
.ccsu-phone h3 {
  font-weight: 700;
  margin-bottom: 5em;
  font-size: 1.9em;
}
.ccsu-phone h4 {
  font-weight: 700;
  text-align: left;
  font-size: 1.2em;
  margin-bottom: 0.5em;
}
.ccsu-phone .ccsu-community-ID {
  border: 2px solid rgb(174, 174, 174);
  padding: 5px 10px;
  text-align: left;
  margin-bottom: 2.2rem;
  animation: colorChange 3s infinite;
}
.ccsu-phone .ccsu-community-code {
  font-size: 1.4em;
  text-transform: uppercase;
  font-weight: 700;
}
.ccsu-phone .ccsu-btn {
  margin-bottom: 1rem;
}
@keyframes colorChange {
  0% {
    background-color: white;
  }
  50% {
    background-color: rgb(255, 255, 127);
  }
  100% {
    background-color: white;
  }
}

@media screen and (max-width: 641px) {
  .opiner-keyboard-shortcuts, #qrcode {
    display: none;
  }
  .opiner-hero-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .opiner-hero-col1 {
    padding-right: 0rem;
  }
  .opiner-hero-col2 {
    display: none;
  }
  .opiner-card-sharing {
    width: 150px;
    height: 150px;
    margin: 2px;
  }
  .opiner-card-sharing h3 {
    font-size: smaller;
  }
  .opiner-card-sharing.opiner-card-sharing-sm {
    width: 70px;
    height: 70px;
  }
  .opiner-video-player {
    width: 100%;
    border: 20px solid white;
    box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.2);
  }
  .opiner-card-icon-link {
    display: block;
    padding-top: 5px;
  }
  .opiner-tile {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .opiner-bg-video {
    display: none;
  }
  .opiner-client-logo__m {
    max-width: 66px;
    height: auto;
  }
  .opiner-client-logo__l {
    max-width: 160px;
    max-height: 1000px;
    height: auto;
  }
  .opiner-hide-tablet {
    display: none;
  }
  .opiner-response-grid {
    grid-template-columns: auto auto;
    gap: 1em;
  }
  .opiner-card .nhsuk-card__content {
    padding: 0.5em;
  }
  .opiner-card .nhsuk-card__content .nhsuk-heading-s {
    font-size: small !important;
  }
  .opiner-card .opiner-card-meta {
    padding: 0.5em 1.5em;
  }
  .opiner-ww-header {
    display: block;
  }
  .draggable-tiles {
    display: grid;
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 640px) {
  .hide-on-small-screen {
    display: none;
  }
  .opiner-home-header-tile {
    display: block;
    border-left: none;
    padding: 0em;
    margin-bottom: 2em;
  }
  .opiner-wonderwall-grid--details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .opiner-card--content, .opiner-card-overlay {
    padding: 1em 1.3em !important;
  }
  .bookmark-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1;
  }
  .draggable-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2em;
    margin-bottom: 3rem;
  }
  .draggable-tiles .tile-drag {
    display: grid;
    grid-template-columns: auto 1fr;
    box-shadow: 0.5rem 0.7rem 1rem rgba(0, 0, 0, 0.05);
    border-radius: 0.3rem;
    overflow: hidden;
  }
  .draggable-tiles .tile-drag--drag {
    background-color: #d8dde0;
    display: grid;
    place-items: center;
    padding: 0 0.5rem;
  }
}
@media screen and (min-width: 641px) {
  .opiner-wonderwall-grid--details {
    grid-template-columns: auto auto;
  }
  .opiner-max-width-one-third {
    max-width: 66.66%;
  }
  .opiner-card--content,
  .opiner-card-overlay {
    padding: 1em 1.3em !important;
  }
  .opiner-grid-two-columns {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
  }
  .bookmark-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
  .stickyElement {
    position: sticky;
    inset-block-start: 0; /* "top" */
    z-index: 99;
  }
  .sticky thead {
    position: sticky;
  }
  .sticky thead {
    inset-block-start: 0; /* "top" */
    background-color: #f0f4f5;
    z-index: 99;
  }
}
@media screen and (min-width: 969px) {
  .opiner-bookmark-wide--notesActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .opiner-sticky-top {
    position: sticky;
    top: 0;
  }
  .opiner-sticky-bottom {
    position: sticky;
    bottom: 0;
  }
}
@media screen and (min-width: 1400px) {
  .opiner-wonderwall-grid--details {
    grid-template-columns: auto auto auto auto;
  }
}


/*# sourceMappingURL=opiner.css.map */