/* Panoramix app elements */

.hidden {
  display: none;
}

.flex {
  display: flex;
}

.w-full {
  width: 100%;
}

.h-full {
  min-height: 100vh;
}

.wrapper {
  overflow: scroll;
  width: 100vw;
  max-width: 1170px;
}

.pagination {
  background-color: #fff;
  border: solid 1px #E5E7EB;
  border-top: none;
  padding: 1rem 0;
  margin: 0;
  text-align: center;
}

.filters {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  gap: 1rem;
  background-color: #fff;
  border: solid 1px #E5E7EB;
  padding: 0.5rem 1rem;
  margin: 0;
}

.filters > li {
  margin: 0;
  padding: 0;
  width: 100%;
  display: inline-block;
}

.filter-boxes {
  justify-content: flex-start;
  gap: 1rem;
}

.filter-boxes > li {
  width: auto;
}

@media screen and (max-width: 1600px) {
  .wrapper {
    width: 100vw;
    max-width: calc(1024px - 2rem);
  }
}

@media screen and (max-width: 1000px) {
  .wrapper {
    width: 100vw;
    max-width: calc(1024px - 5rem);
  }
}

@media (max-width: 840px) {
  /* Hack until Astro is fixed - mobile devices cannot see the menu, instead they see a big gray block. */
  /* class="PanoramixWrapper__Left-a3__sc-1815f8t-5 bjSNxm"*/
  .bjSNxm {
    opacity: 1 !important;
    padding: 1rem !important;
  }
  .wrapper, .filters > li {
    width: 100vw;
    max-width: calc(840px - 2rem);
  }
  .filters {
    flex-direction: column;
  }
  .filters > li {
    padding: 0 1rem !important;
  }
}

@media (max-width: 640px) {
  .wrapper, .filters > li {
    width: 100vw;
    max-width: 560px;
  }
}

/* https://cssloaders.github.io/ */
.button-spinner {
  margin: 0 0.25rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite;
  display: inline-block;
}
.button-spinner::before, .button-spinner::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 2px solid #FFF;
  animation: prixClipFix 2s linear infinite ;
}
.button-spinner::after{
  transform: rotate3d(90, 90, 0, 180deg);
  border-color: transparent;
}

.button-spinner.dark::before, .button-spinner.dark::after {
  border-color: #606060;
}

@keyframes rotate {
  0%   {transform: rotate(0deg)}
  100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
  0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
  50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
  75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
}

span.small {
  font-size: 13px;
}

div.children {
  background-color: #fff;
  padding: 0.5rem !important;
}

div.children ul {
  margin-top: 0px !important;
}


div.children ul li:not(:empty) {
  padding-left: 0px;
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

span.tooltiptext ul {
  margin-bottom: 0;
}

span.tooltiptext li {
  color: #fff;
  font-size: 14px;
}

div.children ul li:not(:empty):last-of-type {
  margin-bottom: 0.25rem;
}

div.children ul li:empty {
  display: none !important;
  margin-top: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

div.children * + * {
  margin-top: 0;
}


.truncate {
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
  }
}

button {
  min-width: 0 !important;
}

button div {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

button.hidden {
  display: none;
}

.space-between {
  width: 100%;
  display: flex;
  flex: 1 0;
  align-items: center;
  justify-content: space-between;
}

.space-between-p0 {
  width: 100%;
  display: flex;
  flex: 1 0;
  align-items: center;
  justify-content: space-between;
}

.space-between {
  padding-bottom: 1rem;
}

.space-between-p0 h4.page-heading, .space-between h4.page-heading {
  margin-top: 0 !important;
  margin-bottom: 0;
}

.space-between button:last-of-type {
  margin-right: 0px;
}

.full-center {
  min-height: calc(100vh - 253px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

.loader {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column-reverse;
  background-color: #fff;
}

.loader p {
  margin-top: 3rem;
  font-family: Arial, Helvetica, sans-serif;
}

.spinner {
  width: 32px;
  height: 32px;
  animation: spinner-y0fdc1 2s infinite ease;
  transform-style: preserve-3d;
}

.spinner > div {
  background-color: #30303030;
  height: 100%;
  position: absolute;
  width: 100%;
  border: 1.6px solid #999999;
}

.spinner div:nth-of-type(1) {
  transform: translateZ(-16px) rotateY(180deg);
}

.spinner div:nth-of-type(2) {
  transform: rotateY(-270deg) translateX(50%);
  transform-origin: top right;
}

.spinner div:nth-of-type(3) {
  transform: rotateY(270deg) translateX(-50%);
  transform-origin: center left;
}

.spinner div:nth-of-type(4) {
  transform: rotateX(90deg) translateY(-50%);
  transform-origin: top center;
}

.spinner div:nth-of-type(5) {
  transform: rotateX(-90deg) translateY(50%);
  transform-origin: bottom center;
}

.spinner div:nth-of-type(6) {
  transform: translateZ(16px);
}

@keyframes spinner-y0fdc1 {
  0% {
     transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
  }

  50% {
     transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
  }

  100% {
     transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
  }
}

h4.page-heading {
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -.02em;
  color: #0f0f0f;
  margin-top: 2.5rem !important;
  text-align: left;
}

#authentication-app {
  background-image: url('/bg.webp');
  background-size: 60vw;
  background-position: top 20% center;
  background-repeat: no-repeat;
}

.bubble {
  margin-top: 2rem;
  background-color: #FFFFFF60;
  border-radius: 0.5rem;
  padding: 0.25rem 0.75rem;
  font-size: 12px;
}

.bubble a {
  filter: brightness(35%);
}

.login {
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-inner {
  max-width: 500px;
  background-color: #fff;
  padding: 3rem;
  border-radius: 1rem;
  box-shadow:
  2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
  6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
  12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
  22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
  41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
  100px 100px 80px rgba(0, 0, 0, 0.07);
}

.login-inner .row .a-field-container {
  width: 100%;
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

.loading-indicator{
  width: 80px;
  margin-left: 5px;
  margin-right: 5px;
}

.quote-answers-list > .row {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: solid 1px #EDEDED;
}


.quote-questions-container{
  border-top: solid 1px #DDD;
  padding-bottom: 20px;
}

.question-container{
  border-bottom: solid 1px #EDEDED;
}

pre {
  overflow-x: auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  text-align: left;
}

div.grid {
  margin-bottom: 4rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}

div.grid:last-of-type {
  margin-bottom: 1.5rem;
}

@media screen and (max-width: 1024px) {
  div.grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

div.card {
  border: 1px solid #D9D9D9;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  padding: 0 1rem 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}

div.marketing-list h4 {
  margin-bottom: 0;
}

div.grid-container {
  margin-top: 2.5rem;
}

div.grid-container h4 {
  margin-bottom: 0.5rem;
  font-size: 16px;
  text-transform: capitalize;
}

div.marketing-list p.intro {
  max-width: 700px;
}

div.card p {
  margin-bottom: 0;
  font-size: 14px;
}

div.card p span {
  text-transform: uppercase;
}

div.card-image-container {
  background-color: transparent;
  width: 84px;
  min-width: 84px;
  height: 84px;
  margin-right: 1rem;
  overflow: hidden;
}

div.card img {
  object-fit: cover;
  width: 84px !important;
  height: 84px;
  border-right: 1px solid #D9D9D9;
  box-shadow: 2px 0 10px 0 rgba(0, 0, 0, 0.05);
}

div.card-left {
  display: flex;
  flex: 1 0;
  align-items: center;
}

div.card-right p {
  white-space: nowrap;
}

div.card h5 {
  margin-bottom: 0;
  font-size: 14px;
  padding-right: 2rem;
}

.left-text{
  text-align: left;
}

.wide-table {
  width: 100%;
  overflow-x: auto;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  border-top: 1px solid rgb(229, 231, 235);
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072)
}

.wide-table > table {
  width: 100%;
}

.wide-table table th,
.wide-table table td {
  white-space: nowrap;
  vertical-align: middle;
  letter-spacing: normal;
}

.error > td,
.inactive > td {
  background-color: pink;
  color: #cc0000;
}

.seperator > td {
  border-bottom: solid 1px #EDEDED;
}

.thick-seperator > td {
  border-bottom: solid 2px #EDEDED;
}


/* Panoramix HTML element overrides */

strong, .slighly-bold {
  font-weight: 500;
}

hr {
  margin-top: 10px;
  margin-bottom: 10px;
  display: none;
}

table {
  border-collapse: collapse;
  border-left: 1px solid #D1D5DB;
  border-right: 1px solid #D1D5DB;
  margin-bottom: 0 !important;
  max-height: 100vh;
}

label {
  color: rgb(17, 24, 39) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  opacity: 1 !important;
}

thead {
  font-size: 14px;
  font-weight: normal;
}

tr {
  transition: all 0.25s ease-in-out;
}

.nowrap {
  white-space: nowrap;
}

/* The paragraphs in the tooltip astro component are the same color as the tooltip so you can't see the text. This fixes that issue. */
.tooltiptext .debicheck-mandate-info p {
  color: white;
}

.actions span {
  font-size: 14px;
}

.popover {
  z-index: 1;
  border: 1px solid #E5E7EB;
  box-shadow: #ffffff 0px 0px 0px 0px, rgba(0,0,0,0.05) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px;
  background-color: #fff;
  padding: 0 1rem 1rem 1rem;
  width: 100vw;
  max-width: 400px;
  white-space: wrap;
  display: none;
  position: absolute;
}

.popover ul, .popover li {
  list-style: none;
  margin-left: 0;
  margin-bottom: 0;
}

.popover button, .popover.text {
  margin: 1rem 0;
  width: 100%;
}

.popover .close-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 2rem;
  cursor: pointer;
}

tbody tr:hover {
  background-color: rgba(200,200,200,0.05);
}

span.pill {
  font-size: 0.8rem;
  background-color: rgb(243,244,246);
  color: rgb(31,41,55);
  border-radius: 0.4rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

span.pill.completed, span.pill.active, span.pill.green {
  background-color: rgb(220,252,231);
  color: rgb(22,101,52);
}

span.pill.pending-underwiting, span.pill.quote-in-qa, span.pill.quote-in-progress, span.pill.pending-underwriting, span.pill.in-review, span.pill.in-progress, span.pill.blue {
  background-color: rgb(219,234, 254);
  color: rgb(30,64,175);
}

span.pill.rejected, span.pill.requires-corrections, span.pill.cancelled, span.pill.lapsed, span.pill.red {
  background-color: rgb(254,226, 226);
  color: rgb(153,27,27);
}

details.down {
  display: inline;
  position: relative;
}

details.down > summary:focus {
  outline: none;
}

details.down > summary {
  list-style: none;
  text-decoration: none;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  padding-left: 1rem;
  padding-right: 1rem;
}

details.down > * + * {
  /* hide detail elements that would ruin the popover */
  display: none;
}

details.down > summary + * {
  top: calc(0.1rem);
  right: 7rem;
  transition: all 0.25s ease-in-out;
  transform: translateX(50%);
  min-width: 240px;
}

details.down ul {
  list-style: none;
  margin-left: 0;
  margin-bottom: 0;
}

details.down p, details.down li {
  text-align: left;
  margin-bottom: 0.5rem !important;
  margin-left: 0;
  padding-left: 0;
}

details.down li.cancel {
  text-align: center;
  margin-top: 0.75rem;
}

details.down li > button, details.down li div > button {
  width: 100% !important;
  max-width: 205px !important;
  margin-bottom: 0.25rem;
}

details.down li div div {
  padding-top: 0.25rem;
}

details.down li > button:last-of-type, details.down li div > button:last-of-type {
  margin-bottom: 0;
}

details.down> summary + * {
  position: absolute;
  display: block;
  z-index: 1;
  border: 1px solid #E5E7EB;
  box-shadow: #ffffff 0px 0px 0px 0px, rgba(0,0,0,0.05) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  background: #fff;
  z-index: 10000;
  right: 165px;
}

details.down > summary::-webkit-details-marker {
  display: none;
}

.a-field-container {
  margin-top: 0 !important;
}

.fixed-table-head {
  overflow: scroll;
  max-height: 700px;
  z-index: 0;
  position: relative;
  border: solid 1px #e5e7eb;
  border-top: none;
  border-bottom: none;
}

.fixed-table-head tbody {
  padding-bottom: 4rem;
}

.fixed-table-head thead {
  position: relative;
}

.fixed-table-head thead th {
  position: sticky;
  top: 0;
}

.fixed-table-head table {
  border-left: none;
  border-right: none;
}

th {
  padding: 1rem 1.5rem 1rem 1.5rem;
  color: rgb(17, 24, 39);
  font-weight: 600;
  font-size: 14px;
  background: rgb(249,250,251);
  background: linear-gradient(180deg, rgba(249,250,251,1) 98%, rgba(209,213,219,1) 100%);
  white-space: nowrap;
}

tbody {
  background-color: #fff;
}

tr {
  background-color: #fff;
}

td {
  padding: 1rem 1.5rem 1rem 1.5rem;
  vertical-align: top;
  border-bottom: 1px solid rgb(229, 231, 235);
  background-color: #fff;
  font-size: 14px;
  color: rgb(17,24, 39);
}

tr td:first-of-type {
  font-weight: 500;
}

span.contact-details {
  display: inline-block;
  color: rgb(91, 97, 108);
  font-size: 12px;
  font-weight: 400;
  padding-top: 6px;

}

tr td:not(:first-of-type) {
  color: rgb(91, 97, 108);
}

td.v-middle {
  vertical-align: middle;
}

td button {
  margin-bottom: 0 !important;
}

th.right-text, td.right-text, th.text-right, td.text-right {
  text-align: right;
}

/* Temporary hack to v-align astro buttons inside a table cell */
td > .sc-bwzfXH {
  margin-top: 0px;
}

ul{
  margin-left: 20px;
}

ul.no-style {
  list-style: none;
  margin-left: 0;
}

/* TODO - Add this to Astro with proper brand aligned colours */
.danger-alert {
  padding: 10px;
  border-radius: 10px;
  border: solid 2px red;
  color: red;
  border-radius: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
}

.warning {
  padding: 10px;
  border-radius: 10px;
  border: solid 2px orange;
  color: orange;
  margin-bottom: 5px;
  margin-top: 5px;
}

/* TODO - Add this to Astro with proper brand aligned colours */
.success {
  padding: 10px;
  border-radius: 10px;
  border: solid 2px green;
  color: green;
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 5px;
}

.mangle-astro-components-for-admin-broker-users {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 1px #dddddd;
  margin-bottom: 1rem;
}

.mangle-astro-components-for-admin-broker-users > div:first-child div {
  display: inline-block;
  padding-right: 1rem;
  padding-top: 1.25rem;
}

.error-message {
  color: #cc0000;
}

.text-left {
  text-align: left !important;
}


.alternate-row > td {
  background-color: #F5F5F5
}

/* audio components */
/* figure out why these are not being applied */
.audio-recordings-table {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
}

.audio-recordings-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px 10px;
  align-items: center;
}

.search-filters {
  position: relative;
  z-index: 2;
}

.results-header {
  position: relative;
  z-index: 1;
}

.relative {
  position: relative;
}

/* sds chrome (wave 2 — ux/wave2/portal-chrome-plan.md): inside the app
   shell the astro PanoramixWrapper keeps the sidebar and workflows but
   loses its page-level styling — the gradient background and viewport
   min-height belong to the sds shell now, and its own copyright fineprint
   is replaced by the sds footer's compliance block. Outer is the LAST
   direct div of .sds-content-grow (when the wrapper's red demo ribbon
   renders — logged in, testing envs — it is a sibling BEFORE Outer and
   must keep its own styling). */
.sds-app-shell .sds-content-grow > div:last-of-type {
  background: none;
  min-height: 0;
}

.sds-app-shell .sds-content-grow > div:last-of-type > *:last-child {
  display: none;
}

/* sds chrome: the flat design drops the layered card shadows — the login
   card and the wrapper's Inner card (direct child of Outer; the mobile
   sidebar overlay deeper down keeps its shadow for layering). */
.sds-app-shell .login-inner {
  box-shadow: none;
}

.sds-app-shell .sds-content-grow > div:last-of-type > div {
  box-shadow: none;
}