/* Calendar status circles */
.circle {
    border-radius: 50%;
    width: 12px;
    height: 12px;
    margin: 0px 5px 0px 10px;
    display: inline-block;
}

.max-lines {
    display: inline-block;
    overflow: hidden;
    max-height: 3.55em;
    text-overflow: ellipsis;
}

.circle.event-important, .vis-item.event-important  { background-color: #FF7373; }
.circle.event-info, .vis-item.event-info  { background-color: #A6DEEE; }
.circle.event-warning, .vis-item.event-warning  { background-color: #FFF284; }
.circle.event-success, .vis-item.event-success  { background-color: #7CEB98; }

#cal-slide-content {
    background-image: none;
}
#cal-slide-content a.event-item {
    color: #212529;
};

/* Ensure auto-sizing textareas are not too small */
textarea {
    min-height: 100px;
}

div.product-select {
    display: inline-block;
    margin-left: 40px;
}

.product-select .cr {
    position: relative;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}

.product-select .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 20%;
}

.product-select label input[type="checkbox"]
 {
    display: none;
}

.product-select label input[type="checkbox"] + .cr > .cr-icon {
    opacity: 0;
}

.product-select label input[type="checkbox"]:checked + .cr > .cr-icon {
    opacity: 1;
}

.product-select label input[type="checkbox"]:disabled + .cr {
    opacity: .5;
}

button.buy, a.buy {
    color: white;
    background-color: #f76536;
    border-color: #f76536;
    font-weight: 600;
}

button.buy:focus, button.buy:hover, a.buy:focus, a.buy:hover {
    color: white;
    background-color: #e34616;
    border-color: #e34616;
    font-weight: 600;
}
.circle-large {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0px 5px 0px 10px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    color: white;
}

.red {
    background-color: red;
}

.amber {
    background-color: orange;
}

.yellow {
    color: black; /* normal white is unreadable for yellow */
    background-color: yellow;
}

.green {
    background-color: green;
}
.nowrap {
    white-space: nowrap;
}

/* Ensure side menu drop-down carets do not wrap to following line */
.fa { display:inline; }

/* The following code ensures that the bootstrap-select drop-down options are
 * not too wide. This was reported by a customer, who had controls with very
 * long descriptions and they were disappearing off the page to the left */
.bootstrap-select-wide .dropdown-menu {
    max-width: 100%;
}
.modal-dialog .bootstrap-select-wide .dropdown-menu {
    max-width: 150%;
}
.bootstrap-select-wide .dropdown-menu li a {
    overflow: hidden;
}
.bootstrap-select-wide .dropdown-menu li a span.text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.pricing td, table.pricing thead th {
    text-align: center;
}

.btn-secondary.question {
    width:230px;
    height:100px;
    font-size:1.5rem;
    display:inline-flex;
    align-items:center;
}
.btn-secondary.question:hover {
    background-color:#2245D9;
    border-color:#2245D9;
}
.btn-secondary:not(:disabled):not(.disabled).active.question {
    background-color:#2245D9;
    border-color:#2245D9;
    font-weight:600;
}

.manual-content img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Begin CSS for definition buttons in headings and checkboxes */
a.definition {
    border-bottom:1px dotted;
    padding: 0px 1px 0px 1px;
    cursor: pointer;
    color: inherit;
}
a.definition:hover {
    text-decoration: none;
}
#answer_div .form-check-input {
    height: 1.5rem;
}
#answer_div .form-check-label {
    margin-top: 0.3rem;
}
.jstree-default .unanswered {
    color: red;
}
.jstree-node {
    overflow: hidden;
}
.jstree-default .jstree-themeicon {
    background-size:0px;
    margin-right: -20px;
}

.loader {
    margin: auto;
    border: 5px solid #f3f3f3;
    position: absolute;
    bottom: 50%;
    left: 0;
    right: 0;
    height: 50px;
    border-top: 5px solid #555;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

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

.centered-overlay {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    /*dim the background*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: black;
    text-align: center;
    z-index: 1050;
    display: none;
}

ol.breadcrumb {
    background-color: inherit;
    padding-left: 5px;
}

/* Prevent sorting icon wrapping in datatables */
.data-table th {
    white-space: nowrap;
}

.popover{
    max-width:400px;
}

/* Remove spacing between options in questionnaire rendering */
p.hft-paras:last-of-type {
    margin-bottom:0;
}
/* And also for paras in alerts */
.alert p:last-of-type {
    margin-bottom:0;
}
/* End definition CSS */

.large-badge {
    font-size: 1em;
}

.edit-button {
    display: none;
}

.drop-area {
  border: 2px dashed #ccc;
  border-radius: 20px;
  font-family: sans-serif;
  padding: 20px;
}
.drop-area.highlight {
  border-color: purple;
}
#upload-progress-bar {
    width: 100%;
    margin-top: 10px;
}
.drop-area input[type="file"] {
  /* display: none; */
}

.error-text {
    display:none;
}

.tasks-table td:first-child { padding-right: 200px }

.tasks-table tr td {
    vertical-align:middle;
    font-size: 1rem;
}

.btn-next {
    padding-right: 35px;
    text-align: left;
    font-weight: 600;
    position: relative;
}

.btn-next:after {
    content: '\f178';
    font-family: FontAwesome;
    font-weight: normal;
    position: absolute;
    right: 10px;
}

.btn-download:after {
    content: '\f019';
    font-family: FontAwesome;
}

.btn {
    font-weight: 600;
}
.btn-primary, .btn-primary:disabled {
    color: #44425D;
    background-color: #57D5C8;
    border-color: #57D5C8;
}
.btn-secondary, .btn-secondary:disabled {
    color: #fff;
    background-color: #0098c8;
    border-color: #0098c8;
}
.btn-danger, .btn-danger:disabled {
    background-color: #a72000;
    border-color: #a72000;
}

.table-status .status {
    position: relative;
}
/* See https://stackoverflow.com/questions/16818792/center-a-pseudo-element */
.table-status .status:after {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    display:inline-block;
    position: absolute;
    left: -15px;
    margin-top: -5px;
    top: 50%;
    content: '';
}
.document-status .status:after {
    left: -20px;
}
.document-status .status {
    margin-left: 50px;
}
.document-status .status:first-child {
    margin-left: 20px;
}
.table-status .task-details {
    padding-right: 30px; /* To account for status indicator to the right which is floated left */
    border-left: 8px solid #f0f0f7;
}
.table-status td {
    vertical-align: middle;
}

.task-details.task-details--danger {
  border-left-color: #d50000;
}
.task-details.task-details--warning {
  border-left-color: #ff9f06;
}
.task-details.task-details--success {
  border-left-color: #97bf00;
}

.status-success:after {
    background-color: #97bf00;
}
.status-warning:after {
    background-color: #ff9f06;
}
.status-danger:after {
    background-color: #d50000;
}

.badge {
    border-radius: 15px;
}
.badge-pill {
    position:relative;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.7em;
    padding-right: 0.7em;
}
a.badge-pill.active:before, a.badge-pill:hover::before {
    content: "";
    position: absolute;
    top: 120%;
    width: calc(100% - 0.7em - 0.7em); /* take away padding-left and padding-right */
    height: 0.15rem;
    background-color: #5cd6ca;
}
.badge-standard {
    border-radius: 5px;
    background-color: #dfdfdf;
    color: #40415d;
    width: 80px;
}
.badge-audit {
    width: 140px;
}
.secure, .secure:hover {
    color: #ffffff;
    background-color: #0098c8;
}
.comply, .comply:hover {
    color: #40415b;
    background-color: #5cd6ca;
}
.certify, .certify:hover {
    color: #ffffff;
    background-color: #40415d;
}

/* Used as general info, similar to alerts but more generic */
.info-box {
    padding: 25px;
    background-color: #646274;
    color: #fff;
}
.info-box label {
    color: #fff;
}

.badge-status {
    font-size: 0.9rem;
    vertical-align: middle;
    font-weight: 600;
    position: relative;
    padding-left: 20px;
}

.badge-status:after {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display:inline-block;
    position: absolute;
    left: 5px;
    margin-top: -5px;
    top: 50%;
    content: '';
}

.hidden {
    display:none;
}

.compliance-manuals tbody tr {
    height: 5rem;
}
.compliance-manuals tbody td {
    vertical-align: middle;
}


/**
 * Base progress bar
 */

 .mbp-progress-bar {
  --progress-bar-track: #E6E5EC;
  --progress-bar-bar: #3F83BA;
  --progress-bar-marker: #59D5C9;
  --progress-bar-text-color: #44425D;
  --progress-bar-margin-bottom: 0px;
  --progress-bar-margin-top: 0px;

  background-color: var(--progress-bar-track);
  background-image: linear-gradient(to right, var(--progress-bar-bar) 0%, var(--progress-bar-bar) 100%);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: var(--progress) 100%;
  border-radius: 4px;
  height: 8px;
  margin-bottom: calc(16px + var(--progress-bar-margin-bottom) + 2.5ch);
  margin-top: calc(16px + var(--progress-bar-margin-top));
  position: relative;
}

.mbp-progress-bar[aria-valuenow="0"] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.mbp-progress-bar[aria-valuenow="100"] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.mbp-progress-bar[aria-label]:after {
  content: attr(aria-label);
}

/* Marker */
.mbp-progress-bar:before {
  border-left: 3px solid var(--progress-bar-marker);
  box-sizing: border-box;
  content: '';
  height: 40px;
  left: var(--progress);
  position: absolute;
  top: 50%;
  transform: translate(-1px, -50%);
}

/* Value */
.mbp-progress-bar:after {
  color: var(--progress-bar-text-color);
  content: attr(aria-valuenow) '%';
  left: var(--progress);
  position: absolute;
  top: calc(100% + 16px + 0.5ch);
  transform: translate(-50%, 0%);
}



/**
 * Progress bar - value right
 */

.mbp-progress-bar.mbp-progress-bar--value-right {
  --progress-bar-right-column: 5.5ch;

  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  margin-bottom: calc(16px + var(--progress-bar-margin-bottom));
  margin-right: var(--progress-bar-right-column);
}

/* Marker */
.mbp-progress-bar.mbp-progress-bar--value-right:before {
  border-right: 3px solid var(--progress-bar-track);
  content: '';
  height: 40px;
  left: var(--progress);
  position: absolute;
  top: 50%;
  transform: translate(-1px, -50%);
  width: calc(100% - var(--progress) + 1px);
}

.mbp-progress-bar.mbp-progress-bar--value-right[aria-valuenow="100"]:before {
  border-right: 0;
}

/* Value */
.mbp-progress-bar.mbp-progress-bar--value-right:after {
  left: unset;
  right: calc(0px - var(--progress-bar-right-column));
  top: 50%;
  transform: translate(0%, -50%);
}

/* End progress bars */

/* Start onboarding modal */

/**
 * Modal resets
 */
.modal-content {
  border-radius: 0;
  border: 0;
  box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.5);
}



/**
 * Steps
 */

.onboarding-modal__steps {
  align-items: flex-start;
  counter-reset: onboarding-modal-steps;
  display: flex;
  gap: 5px;
  list-style: none;
  padding: 0;
}

.onboarding-modal__steps__step {
  border-top: 10px solid #e2e2e2;
  color: rgba(68, 66, 93, 0.5);
  counter-increment: onboarding-modal-steps;
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  padding-top: .2em;
  text-align: center;
}

.onboarding-modal__steps__step:after {
  content: counter(onboarding-modal-steps);
}

.onboarding-modal__steps__step.onboarding-modal__steps__step--complete:after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTEyIDJhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTIgMlptLTIgMTUtNS01IDEuNDEtMS40MUwxMCAxNC4xN2w3LjU5LTcuNTlMMTkgOFoiIGZpbGw9IiM0NDQyNWQiLz48L3N2Zz4=);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
}

.onboarding-modal__steps__step.onboarding-modal__steps__step--complete,
.onboarding-modal__steps__step.onboarding-modal__steps__step--active {
  border-top-color: #92E6D7;
  color: rgba(68, 66, 93, 1);
}



/**
 * Stage
 */

.onboarding-modal__stage {
  padding: 1.5rem;
}


@media (min-width: 600px) {

  .onboarding-modal__stage {
    padding: 2rem 4rem;
  }
}


@media (min-width: 992px) {

  .onboarding-modal__stage {
    padding: 3rem 8rem;
  }
}



/**
 * Heading
 */

.onboarding-modal__heading {
  margin-bottom: 0.6em;
}

.onboarding-modal__heading:after {
  background-image: linear-gradient(to right, #8AEBDC 0%, #48A1CE 100%);
  content: '';
  display: block;
  height: 6px;
  margin-top: 0.6em;
}

/* End onboarding modal */

/* Begin icon buttons */

.btn.btn-icon {
  align-items: center;
  display: inline-grid;
  gap: 1em;
  grid-template-columns: 1fr auto;
}

.btn.btn-icon svg,
.btn.btn-icon img {
  height: auto;
  width: 2em;
}

/**
 * Variant - icon left
 */

.btn.btn-icon.btn-icon--icon-left {
  grid-template-columns: auto 1fr;
}

.btn.btn-icon.btn-icon--icon-left svg,
.btn.btn-icon.btn-icon--icon-left img {
  order: -1;
}

/* End icon buttons */

/**
 * lozenge list
 */
/**
 * Base lozenge list
 */
.lozenge-list {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 1em;
  list-style: none;
  padding-left: 0;
}

.lozenge-list__item {
  background-color: #0294C4;
  border-radius: 1em;
  color: #fff;
  display: inline-block;
  font-weight: 300;
  padding: .2em .8em;
  transition: background-color 200ms ease-in-out;
}

a.lozenge-list__item:hover,
a.lozenge-list__item:focus-visible {
  background-color: #44425D;
  color: #fff;
  text-decoration: none;
}


/**
 * Icon item
 */

.lozenge-list__item.lozenge-list__item--icon {
  align-items: center;
  display: inline-grid;
  gap: 0.75em;
  grid-template-columns: 1fr auto;
}

.lozenge-list__item.lozenge-list__item--icon svg,
.lozenge-list__item.lozenge-list__item--icon img {
  height: auto;
  width: 1.5em;
}


/**
 * Nowrap
 */

.lozenge-list__item.lozenge-list__item--nowrap {
  display: inline-grid;
}

.lozenge-list__item.lozenge-list__item--nowrap span {
  display: block;
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/**
 * Variant - Small
 */
.lozenge-list.lozenge-list--small {
  font-size: 11px;
}

/* End lozenge list */

/* Embed video */
.video-wrap {
  aspect-ratio: var(--aspect-ratio, 16 / 9);
  background-color: #000;
  display: block;
  position: relative;
}

.video-wrap video,
.video-wrap iframe {
  bottom: 0;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}
.video-text-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* End embed video */

.certify-manual-document {
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}
/* show hand when hovering over table rows that have links */
tr[data-href] { cursor: pointer }

.btn-wide {
    width: 120px;
    text-align: left;
}

.modal-max {
  width: calc(100% - 40px);
  max-width: none;
}

table.doctemplate td {
    vertical-align: middle;
    /* Ensure consistent row heights even if no edit button */
    height: 55px;
}