/* 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: 1rem;
  margin: 0;
}

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

@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;
}

@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;
}

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 {
  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 {
  background-color: rgb(219,234, 254);
  color: rgb(30,64,175);
}

span.pill.rejected, span.pill.requires-corrections, span.pill.cancelled, span.pill.lapsed {
  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-y: auto;
  max-height: calc(100vh - 100px);
  z-index: 0;
  position: relative;
}

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

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

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

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;
}