/*
** These style files were previously in lib/core/addon/styles
** In a V1 addon, .css files in the addon/styles folder are automatically
** included in the final vendor.css file
**
** Commit 40b3d1aa in PR 9193 moved these files to app/styles, but without explicitly
** referencing them here, which led to UI regression
**
** TODO: Migrate the styles in these files to TW
*/
/* TODO: check usefulness when we use the new form-container here. */
.semeia-blood-pressure .session ~ .session {
  margin-top: 3rem;
}
/******* BADGE *******/
.semeia-blood-pressure.measure-badge {
  width: 90px;
  height: 90px;
  border-radius: 100%;
  color: white;
  font-weight: bold;
  font-size: 0.875em;
  line-height: 1;
  /* box-shadow: 0 0 5px 0.1px #4f5d75; */
}
.semeia-blood-pressure.measure-badge .blood-pressure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.6em;
}
.semeia-blood-pressure.measure-badge .content {
  margin-top: 12px;
  margin-left: 2px;
}
.semeia-blood-pressure.measure-badge .unit {
  font-size: 0.875em;
  font-weight: normal;
}
.semeia-blood-pressure.measure-badge.filled {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.semeia-blood-pressure.measure-badge.empty {
  background-color: #fff;
  border: 1px solid;
  box-shadow: 0 0 5px 0.1px #ccc;
}
/******* TIMELINE *******/
.semeia-blood-pressure.timeline {
  margin-top: 1em;
  margin-bottom: 1.5em;
}
.semeia-blood-pressure.timeline-columns {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.semeia-blood-pressure.timeline .circle.ui.icon:after {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: #aaa;
  height: 1px;
  top: 50%;
  left: calc(32px / 2);
  right: calc(32px / 2);
}
.semeia-blood-pressure.timeline .circle.ui.icon {
  width: 24px;
  height: 24px;
  background-color: #777;
  border: 6px solid white;
  border-radius: 50%;
  box-shadow: 0 0 5px 0.1px #bfc0c0;
  content: "";
}
.semeia-blood-pressure.timeline .active.circle.ui.icon {
  width: 32px;
  height: 32px;
  /* background-color: #cd6b0a; */
  border: 8px solid white;
  margin-right: 0;
}
/* sup upbreaks the line-height which breaks the UI. This is a fix from https://stackoverflow.com/a/6594576 */
sup {
  font-size: 0.83em;
  vertical-align: super;
  line-height: 0;
}
.ui.form .field .grey.caption {
  color: grey;
}
.ui.form .semeia-form.warning.message {
  display: block;
}
.semeia.learning.body ul {
  padding-left: 1.6em;
}
.semeia.learning.body ul li {
  margin-bottom: 0.5em;
}
.semeia.learning section .ui.header:first-child {
  margin-top: calc(2rem - 0.14285714em);
}
.alerting-style-class {
  font-weight: bold !important;
}
.alerting-style-class.black {
  color: black;
}
.alerting-style-class.black > span {
  color: black;
}
.semeia.patient-list.table-header {
  height: 4em;
}
/*
  A class for text described a patient.
  This text is greyed when a patient is disenrolled.
*/
.semeia.patient-list.disenrolled-text {
  opacity: 0.5 !important;
}
:root {
  --bad-contribution-color: #e0084b;
  --good-contribution-color: #45b854;
  --axis-color: #000000;
  --link-color: grey;
}
.semeia.prediction-explanation.axis {
  fill: var(--axis-color);
}
.semeia.prediction-explanation.axis.line {
  stroke: var(--axis-color);
}
.semeia.prediction-explanation.bad {
  stroke: var(--bad-contribution-color);
  fill: var(--bad-contribution-color);
  color: var(--bad-contribution-color);
}
.semeia.prediction-explanation.good {
  stroke: var(--good-contribution-color);
  fill: var(--good-contribution-color);
  color: var(--good-contribution-color);
}
text.semeia.prediction-explanation.good > tspan,
text.semeia.prediction-explanation.bad > tspan {
  stroke: none;
}
line.semeia.prediction-explanation.good,
line.semeia.prediction-explanation.bad {
  fill: none;
}
.semeia.prediction-explanation.line {
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.semeia.prediction-explanation.line.arrow-marker {
  stroke-width: 1;
}
.semeia.prediction-explanation.line.dashed {
  stroke-dasharray: 10;
  stroke-width: 2;
}
.semeia.prediction-explanation.line.dashed.link {
  stroke: var(--link-color);
}
label.semeia.prediction-explanation:hover {
  background: #eee;
  cursor: pointer;
}
.ui.divider ~ h4 {
  margin-top: 0;
}
h4 > .semeia-title-details {
  font-weight: 500;
  font-size: 0.9em;
}
/*******************************
         Site Settings
*******************************/
/***********************************************************
  Central element variation compilation enablers
***********************************************************/
/* General */
/*******************************
           Elements
*******************************/
/* Button */
/* Container */
/* Divider */
/* Header */
/* Icon */
/* Image */
/* Input */
/* Label */
/* List */
/* Loader */
/* Placeholder */
/* Rail */
/* Reveal */
/* Segment */
/* Step */
/* Text */
/*******************************
           Collections
*******************************/
/* Breadcrumb */
/* Form */
/* Grid */
/* Menu */
/* Message */
/* Table */
/*******************************
             Views
*******************************/
/* Ad */
/* Card */
/* Comment */
/* Feed */
/* Item */
/* Statistic */
/*******************************
            Modules
*******************************/
/* Accordion */
/* Calendar */
/* Checkbox */
/* Dimmer */
/* Dropdown */
/* Embed */
/* Modal */
/* Nag */
/* Popup */
/* Progress */
/* Rating */
/* Search */
/* Shape */
/* Sidebar */
/* Slider */
/* Tab */
/* Toast */
/* Transition */
/* Emojis */
/*-------------------
       Fonts
--------------------*/
/*-------------------
      Base Sizes
--------------------*/
/* This is the single variable that controls them all */
/* The size of page text  */
/*-------------------
    Border Radius
--------------------*/
/* See Power-user section below
   for explanation of @px variables
*/
/*-------------------
    Brand Colors
--------------------*/
/* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */
/*--------------
  Page Heading
---------------*/
/*--------------
   Form Input
---------------*/
/* This adjusts the default form input across all elements */
/* Input Text Color */
/* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */
/*-------------------
    Focused Input
--------------------*/
/* Used on inputs, textarea etc */
/* Used on dropdowns, other larger blocks */
/*-------------------
        Sizes
--------------------*/
/*
  Sizes are all expressed in terms of 14px/em (default em)
  This ensures these "ratios" remain constant despite changes in EM
*/
/*-------------------
        Page
--------------------*/
/*-------------------
      Paragraph
--------------------*/
/*-------------------
       Links
--------------------*/
/*-------------------
    Scroll Bars
--------------------*/
/* Inverted */
/*-------------------
  Highlighted Text
--------------------*/
/*-------------------
       Loader
--------------------*/
/*-------------------
        Grid
--------------------*/
/*-------------------
     Transitions
--------------------*/
/*-------------------
     Breakpoints
--------------------*/
/*-------------------
      Site Colors
--------------------*/
/*---  Colors  ---*/
/*---  Light Colors  ---*/
/*---   Neutrals  ---*/
/*--- Colored Backgrounds ---*/
/*--- Colored Headers ---*/
/*--- Colored Text ---*/
/*--- Light Colored Text ---*/
/*--- Hovered Colored Text ---*/
/*--- Colored Border ---*/
/*--- Shadows ---*/
/* Inverted */
/* Box Shadows */
/*-------------------
     Alpha Colors
--------------------*/
/*-------------------
       Accents
--------------------*/
/* Differentiating Neutrals */
/* Differentiating Layers */
/*******************************
           Power-User
*******************************/
/*-------------------
    Emotive Colors
--------------------*/
/* Positive */
/* Negative */
/* Info */
/* Warning */
/*-------------------
        Paths
--------------------*/
/* For source only. Modified in gulp for dist */
/*-------------------
       Em Sizes
--------------------*/
/*
  This rounds @size values to the closest pixel then expresses that value in (r)em.
  This ensures all size values round to exact pixels
*/
/* em */
/* rem */
/*-------------------
       Icons
--------------------*/
/* Maximum Glyph Width of Icon */
/*-------------------
     Neutral Text
--------------------*/
/*-------------------
     Brand Colors
--------------------*/
/*-------------------
      Borders
--------------------*/
/*-------------------
    Derived Values
--------------------*/
/* Loaders Position Offset */
/* Rendered Scrollbar Width */
/* Maximum Single Character Glyph Width, aka Capital "W" */
/* Used to match floats with text */
/* Header Spacing */
/* Minimum Mobile Width */
/* Positive / Negative Dupes */
/* Responsive */
/*-------------------
  Exact Pixel Values
--------------------*/
/*
  These are used to specify exact pixel values in em
  for things like borders that remain constantly
  sized as emSize adjusts

  Since there are many more sizes than names for sizes,
  these are named by their original pixel values.

*/
/* Columns */
/*******************************
             States
*******************************/
/*-------------------
      Disabled
--------------------*/
/*-------------------
        Hover
--------------------*/
/*---  Shadows  ---*/
/*---  Colors  ---*/
/*---  Emotive  ---*/
/*---  Brand   ---*/
/*---  Dark Tones  ---*/
/*---  Light Tones  ---*/
/*-------------------
        Focus
--------------------*/
/*---  Colors  ---*/
/*---  Emotive  ---*/
/*---  Brand   ---*/
/*---  Dark Tones  ---*/
/*---  Light Tones  ---*/
/*-------------------
    Down (:active)
--------------------*/
/*---  Colors  ---*/
/*---  Emotive  ---*/
/*---  Brand   ---*/
/*---  Dark Tones  ---*/
/*---  Light Tones  ---*/
/*-------------------
        Active
--------------------*/
/*---  Colors  ---*/
/*---  Emotive  ---*/
/*---  Brand   ---*/
/*---  Dark Tones  ---*/
/*---  Light Tones  ---*/
/*---  Tertiary  ---*/
/*---  Bright  ---*/
/*******************************
 States shared in Form-related components
 *******************************/
/* Form state*/
/* Input state */
/* AutoFill */
/* Dropdown state */
/* Focused state */
/* Placeholder state */
/*******************************
             Popup
*******************************/
/*-------------------
       Element
--------------------*/
/*-------------------
       Parts
--------------------*/
/* Placement */
/* Header */
/* Content Border */
/* Arrow */
/* Arrow color by position */
/*-------------------
       Types
--------------------*/
/* Tooltip */
/* Inverted */
/* Arrow */
/*-------------------
       Coupling
--------------------*/
/* Grid Inside Popup */
/* (padding * @medium) */
/*-------------------
       States
--------------------*/
/*-------------------
       Variations
--------------------*/
/* Wide */
/* Inverted */
/* Arrow color by position */
/*******************************
     User Global Variables
*******************************/
/* TODO: this should probably migrate to a standard FUI size */
/*-------------------
       Fonts
--------------------*/
/*-------------------
    Base Sizes
--------------------*/
/*--------------
   Form Input
---------------*/
/* Input Text Color */
/* default: lighten(@inputColor, 75); */
/* default: lighten(@inputColor, 45);*/
/*-------------------
    Focused Input
--------------------*/
/* Used on inputs, textarea etc */
/*-------------------
    Site Colors
--------------------*/
/*---  Colors  ---*/
/* default: #ffffff */
/*---  Light Colors  ---*/
/*-------------------
    Brand Colors
--------------------*/
/*-------------------
      Borders
--------------------*/
/* default: rgba(34, 36, 38, 0.15); */
/*-------------------
      Page
--------------------*/
/*-------------------
     Breakpoints
--------------------*/
/*
Above 568 we consider the device to be a tablet. Based on:
- 568px iPhone 5 in landscape mode.
- 414px (1242px in Retina 3x) iPhone Xs Max & iPhone Plus.
@mobileBreakpoint            : 320px;
@tabletBreakpoint            : 569px;
@computerBreakpoint          : 992px;
@largeMonitorBreakpoint      : 1200px;
@widescreenMonitorBreakpoint : 1920px;
*/
/*
Above 568 we consider the device to be a tablet, for root font sizes.
 This is based on:
 - 568px iPhone 5 in landscape mode.
 - 414px (1242px in Retina 3x) iPhone Xs Max & iPhone Plus.
*/
/*-------------------
        Paths
--------------------*/
/***********************************************************
  Central Color Mapping Base for all components to iterate
***********************************************************/
/***********************************************************
  Color Mapping Base for form components to iterate
***********************************************************/
/*
** Import custom stylex‹
** Don't put your custom css here !
*/
/*
Used for fixing unconsitency bug in swal popup
*/
body.swal2-shown {
  padding-right: 0px !important;
}
.cursor-pointer {
  cursor: pointer;
}
.dashboard-container {
  margin-top: 20px;
  margin-bottom: 40px;
}
/*
Hide an element until an other element is hover.
Usage:
<div class="show-shyone-on-hover">
  Hello… <span class="shyone">you!</span>
</div>
*/
.shyone {
  -webkit-transition: all 100ms ease-in-out;
  -moz-transition: all 100ms ease-in-out;
  -ms-transition: all 100ms ease-in-out;
  -o-transition: all 100ms ease-in-out;
  transition: all 100ms ease-in-out;
  opacity: 0 !important;
}
.show-shyone-on-hover:hover .shyone {
  opacity: 1 !important;
}
@media only screen and (max-width: 768px) {
  .shyone {
    display: none;
  }
}
.shadow {
  -webkit-box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 16px 0px !important;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 16px 0px !important;
}
/*
Media queries
*/
@media only screen and (max-width: 768px) {
  .hiding.on.mobile {
    display: none;
  }
}
/** Semantic custom options **/
.ui.compact.grid > .column:not(.row) {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.ui.compact.grid > .column:not(.row):first-child {
  padding-top: 1.2rem;
}
.button.ui.fit {
  padding: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.2rem;
}
.no-content {
  padding-top: 7px;
  padding-bottom: 7px;
}
.no-content .icon {
  visibility: hidden;
}
/**
For the <Shimmer /> component
This CSS could not be added with Tailwind without modifying the theme
*/
@-webkit-keyframes placeHolderShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@keyframes placeHolderShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.full-width {
  width: 100%;
}
.mt128 {
  margin-top: 128px !important;
}
.mt92 {
  margin-top: 92px !important;
}
.mt64 {
  margin-top: 64px !important;
}
.mt48 {
  margin-top: 48px !important;
}
.mt32 {
  margin-top: 32px !important;
}
.mt16 {
  margin-top: 16px !important;
}
.mt8 {
  margin-top: 8px !important;
}
.mt4 {
  margin-top: 4px !important;
}
.mt2 {
  margin-top: 2px !important;
}
.mt0 {
  margin-top: 0 !important;
}
.mb128 {
  margin-bottom: 128px !important;
}
.mb92 {
  margin-bottom: 92px !important;
}
.mb64 {
  margin-bottom: 64px !important;
}
.mb48 {
  margin-bottom: 48px !important;
}
.mb32 {
  margin-bottom: 32px !important;
}
.mb16 {
  margin-bottom: 16px !important;
}
.mb8 {
  margin-bottom: 8px !important;
}
.mb4 {
  margin-bottom: 4px !important;
}
.mb2 {
  margin-bottom: 2px !important;
}
.mb0 {
  margin-bottom: 0 !important;
}
.ml32 {
  margin-left: 32px !important;
}
.ml16 {
  margin-left: 16px !important;
}
.ml8 {
  margin-left: 8px !important;
}
.ml4 {
  margin-left: 4px !important;
}
.ml2 {
  margin-left: 2px !important;
}
.ml0 {
  margin-left: 0px !important;
}
.mr32 {
  margin-right: 32px !important;
}
.mr16 {
  margin-right: 16px !important;
}
.mr8 {
  margin-right: 8px !important;
}
.mr4 {
  margin-right: 4px !important;
}
.mr2 {
  margin-right: 2px !important;
}
.mr0 {
  margin-right: 0px !important;
}
.p12 {
  padding: 12px !important;
}
.p0 {
  padding: 0px !important;
}
/* TODO: pt10 is just used for one icon, should be specific. */
.pt10 {
  padding-top: 10px !important;
}
.pt8 {
  padding-top: 8px !important;
}
.pt4 {
  padding-top: 4px !important;
}
.pt2 {
  padding-top: 2px !important;
}
.pt0 {
  padding-top: 0px !important;
}
.pb8 {
  padding-bottom: 8px !important;
}
.pb4 {
  padding-bottom: 4px !important;
}
.pb2 {
  padding-bottom: 2px !important;
}
.pb0 {
  padding-bottom: 0px !important;
}
.pl32 {
  padding-left: 32px !important;
}
.pl16 {
  padding-left: 16px !important;
}
.pl8 {
  padding-left: 8px !important;
}
.pl4 {
  padding-left: 4px !important;
}
.pl2 {
  padding-left: 2px !important;
}
.pl0 {
  padding-left: 0px !important;
}
.pr32 {
  padding-right: 32px !important;
}
.pr16 {
  padding-right: 16px !important;
}
.pr8 {
  padding-right: 8px !important;
}
.pr4 {
  padding-right: 4px !important;
}
.pr2 {
  padding-right: 2px !important;
}
.pr0 {
  padding-right: 0px !important;
}
/*
.field is a class provided by Semantic UI, with a specific behaviour when
found inside a form (.ui.form classes).
For consistency, we use field to group related item (label + a component),
and we the label on top of the component, as in a .ui.form.
*/
.field > label {
  display: block;
}
/** Form Container **/
@media only screen and (max-width: 549px) {
  /* Prevent zoom on iOS. */
  select,
  input,
  textarea,
  .ui.search {
    font-size: 18px !important;
  }
}
@media screen and (min-width: 768px) {
  .ui.two.column .form-basic-radio-group {
    margin-top: 1rem;
  }
}
/* TODO: Move it inside the Semantic UI theme */
.ui.dropdown .menu > .semeia-dropdown.header {
  text-align: center;
  font-size: 0.9rem;
  margin: 0;
}
.form-buttons {
  margin-top: 1.5em;
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  margin-right: -0.25em;
  /* To center the buttons */
}
@font-face {
  font-family: "wise-icons";
  src: url("/assets/fonts/wise-icons.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/wise-icons.woff") format("woff"), url("/assets/fonts/wise-icons.woff2") format("woff2"), url("/assets/fonts/wise-icons.ttf") format("truetype"), url("/assets/fonts/wise-icons.svg#icons") format("svg");
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-decoration: inherit;
  text-transform: none;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter/Inter-Medium.woff2") format("woff2"), url("/assets/fonts/inter/Inter-Medium.woff") format("woff") url("/assets/fonts/inter/Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter/Inter-Bold.woff2") format("woff2"), url("/assets/fonts/inter/Inter-Bold.woff") format("woff"), url("/assets/fonts/inter/Inter-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/assets/fonts/lato/Lato-Regular.woff2") format("woff2"), url("/assets/fonts/lato/Lato-Regular.woff") format("woff") url("/assets/fonts/lato/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/assets/fonts/lato/Lato-Bold.woff2") format("woff2"), url("/assets/fonts/lato/Lato-Bold.woff") format("woff"), url("/assets/fonts/lato/Lato-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("/assets/fonts/quicksand/Quicksand-Regular.woff2") format("woff2"), url("/assets/fonts/quicksand/Quicksand-Regular.woff") format("woff"), url("/assets/fonts/quicksand/Quicksand-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("/assets/fonts/quicksand/Quicksand-Bold.woff2") format("woff2"), url("/assets/fonts/quicksand/Quicksand-Bold.woff") format("woff"), url("/assets/fonts/quicksand/Quicksand-Bold.woff") format("truetype");
  font-weight: bold;
  /* Poids de la police bold */
  font-style: normal;
  font-display: swap;
}
/* Temporary CSS to avoid wiser.css break some legacy FUI styles */
.ui.hidden.divider {
  display: block;
}
i.outline.icon {
  outline-style: none;
}
h3.ui.header {
  padding-top: 10px;
}
@media screen and (max-width: 768px) {
  .ui.wide.left.sidebar {
    width: 80vw;
  }
  .ui.form {
    flex-direction: column;
    align-items: center !important;
  }
  .content {
    max-width: 80% !important;
  }
  .signature {
    max-width: 80% !important;
  }
  .fields {
    justify-content: space-between;
    width: max-content;
  }
}
.ui.accordion .title.active .primary.chevron.down.icon {
  transform: rotate(180deg);
}