dsi-icl/optimise

.ariane {
    position: absolute;
    grid-area: ariane;
    display: block;
    width: 100%;
    height: 100%;
    padding: 1.2em;
    border-bottom: 0.1em solid hsl(var(--color-background-h), var(--color-background-s), 90%);
}

.ariane > a {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.2em;
    font-size: 1.1em;
}

.ariane .profileActions {
    height: 100%;
    position: absolute;
    padding: 1.4em;
    top: 0;
    right: 0;
    display: inline-block;
}

.profileActions a {
    line-height: 1.1em;
    display: inline-block;
}

.profileActions a span {
    padding: 0 0.5em;
}

.profileActions a:hover span {
    color: hsl(var(--color-background-h), var(--color-background-s), 20%);
}

.profileActions > a > svg {
    width: 1.2em;
    margin-left: 1.2em;
    margin-right: 0.3em;
    display: inline-block;
    fill: hsl(var(--color-background-h), var(--color-background-s), 50%);
}

.profileActions a:hover svg {
    fill: hsl(var(--color-background-h), var(--color-background-s), 20%);
}

@media (max-width: 85em) {
    .profileActions a span {
        display: none;
    }
}

.panel {
    grid-area: panel;
    display: block;
    width: 100%;
    height: 100%;
    padding: 1.2em;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.panel.patientInfo {    
    padding-top: 0;
}

.noConsentAlert {
    padding: 0.4em;
    width: 100%;
    display: inline-block;
    color: var(--color-font-active);
    background-color: var(--color-shade-one);
}

.visitWrapper {
    overflow-y: hidden;
    overflow-x: auto;
}

.visitEditButton {
    position: absolute;
    right: 1.6em;
    top: 1em;
    font-size: 1.3em
}

.visitAnchors {
    display: inline-block;
    position: absolute;
    top: -7em;
    visibility: hidden;
}

.editorSneak {
    border: 0.1em solid hsl(var(--color-background-h), var(--color-background-s), 92%);
    background-color: hsl(var(--color-background-h), var(--color-background-s), calc(var(--color-background-l) * 7.5));
    padding: 1em;
    font-size: 0.8em;
}

.performanceHighlight {
    color: var(--color-shade-one);
    font-weight: bold;
}

.immunisationItem:hover {
    background-color: hsl(var(--color-background-h), var(--color-background-s), 92%);
}

.profileSectionActive .immunisationItem:hover {
    background-color: hsl(var(--color-background-h), var(--color-background-s), 85%);
}

.immunisationItem td:first-child,
.immunisationNewItem td:first-child {
    width: 45%;
    padding-left: 0;
    transition: padding 100ms;
}

.immunisationItem:hover td:first-child {
    padding-left: 0.7em;
}

.immunisationItem td:last-child {
    text-align: right;
    padding-right: 0;
    transition: padding 100ms;
}

.immunisationItem:hover td:last-child {
    padding-right: 0.7em;
}

.timelineBox {
    border: 0.1em solid hsl(var(--color-background-h), var(--color-background-s), 90%);
    background-color: hsl(var(--color-background-h), var(--color-background-s), 98%);
    width: 100%;
    display: grid;
    overflow: hidden;
    padding: 1em;
    line-height: 1em;
}

.timelineBox table {
    font-size: 0.7em;
}

div.timelineVisit {
    background-color: rgb(133, 150, 176);
    color: rgb(133, 150, 176);
}

.timelineVisit {
    fill: rgb(133, 150, 176);
}

div.timelineMed {
    background-color: rgb(255, 202, 27);
    color: rgb(255, 202, 27);
}

.timelineMed {
    fill: rgb(255, 202, 27);
}

div.timelineTest {
    background-color: rgb(153, 202, 120);
    color: rgb(153, 202, 120);
}

.timelineTest {
    fill: rgb(153, 202, 120);
}

div.timelineCE {
    background-color: rgb(255, 102, 102);
    color: rgb(255, 102, 102);
}

.timelineCE * {
    fill: rgb(255, 102, 102);
}

div.timelineCEBlack {
    background-color: rgb(0, 0, 0);
    color: rgb(0, 0, 0);
}

.timelineCEBlack {
    color: rgb(0, 0, 0);
}

.history {
    font-size: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.history td,
.history th {
    height: 1.3em;
    line-height: 1.3em;
}

.history > div:first-child {
    margin-top: 0.5em;
    padding-bottom: -5em;
    z-index: 1;
}

.history > div:not(:first-child) {
    padding-top: 0.5em;
}

.history > div:not(:first-child) > div:first-child {
    margin-top: 0.5em;
    z-index: 2;
}

.historyVisit > div:nth-child(2) {
    margin-top: -0.8em;
    margin-left: -4.7em;
    padding: 0.8em 0;
    padding-left: 4.7em !important;
    width: calc(100% + 5.9em);
    border-top: 0.1em solid hsl(var(--color-background-h), var(--color-background-s), 90%);
    background-color: hsl(var(--color-background-h), var(--color-background-s), 96%);
    z-index: 100;
}

.historyVisit:hover > div:nth-child(2) {
    background-color: hsl(var(--color-shade-two-h), var(--color-shade-two-s), 90%) !important;
}

.historyVisit > div:nth-child(3) {
    width: calc(100% + 5.9em) !important;
    margin-top: 0em !important;
    margin-bottom: 0 !important;
    margin-left: -4.7em;
    padding-left: 4.7em !important;
    padding-right: 3em !important;
    padding-bottom: 2.5em !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transition: background-color 500ms;
}

.historyVisit:hover > div:nth-child(3) {
    background-color: hsl(var(--color-shade-two-h), var(--color-shade-two-s), 97%) !important;
}

.historyVisit > div:nth-child(3):hover th,
.historyVisit > div:nth-child(3):hover td,
.historyVisit > div:nth-child(3):hover .editorSneak {
    background-color: white;
}

.editableTable td:nth-child(1){
    width: 1.3em;
}
.editableTable th:nth-child(1){
    width: 1.3em;
}

.history h4 {
    margin-top: 0.9em;
    margin-bottom: 0.7em;
}

.history h4 > svg {
    width: 1em;
    height: 1em;
    padding: 0;
}

.history span > svg {
    padding: 0em 0.5em 0.7em 0.5em;
}

.history a > span > svg {
    padding: 0
}

.history button {
    height: 1.8em;
    line-height: 1.8em;
    background-color: hsl(var(--color-background-h), var(--color-background-s), calc(var(--color-background-l) * 6));
}

.history button:hover {
    background-color: hsl(var(--color-background-h), var(--color-background-s), calc(var(--color-background-l) * 6.5));
}

.history td,
.history th {
    display: table-cell;
    padding: 0.4em;
    column-gap: 0;
    background-color: hsl(var(--color-background-h), var(--color-background-s), calc(var(--color-background-l) * 7.5));
    border: 0.1em solid hsl(var(--color-background-h), var(--color-background-s), calc(var(--color-background-l) * 7));
}

.visitSelectorButton {
    font-size: 1em;
    display: inline-block;
    height: 2.7em;
    line-height: 1.9em;
    width: 100%;
    padding: 0.3em 0.8em;
    color: var(--color-background);
    background-color: hsl(var(--color-background-h), var(--color-background-s), calc(var(--color-background-l) * 7));
}

.visitSelectorButton:hover {
    background-color: hsl(var(--color-background-h), var(--color-background-s), calc(var(--color-background-l) * 6.8));
}

.activeNavLink button {
    background-color: var(--color-active-nav);
}

.activeNavLink button:hover {
    background-color: var(--color-active-nav);
}

.pregnancy {
    border-bottom: 0.08em solid hsl(var(--color-background-h), var(--color-background-s), 90%);
    padding-top: 0.9em;
    padding-bottom: 0.9em;
    transition: padding 100ms;
    word-wrap: break-word;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.pregnancy:hover {
    background-color: hsl(var(--color-background-h), var(--color-background-s), 93%);
    padding-left: 1em;
    padding-right: 1em;
}

.profileSection .pregnancy:last-of-type {
    border: none;
}

.pregnancy > span {
    text-decoration: underline;
    cursor: pointer;
}

.newPregnancy {
    padding-top: 0.9em;
    padding-bottom: 0.9em;
}

.cancelButton > svg {
    width: 1em;
    fill: hsl(var(--color-background-h), var(--color-background-s), 70%);
}

.cancelButton:hover > svg {
    fill: var(--color-error);
    cursor: pointer;
}

.editButton > div {
    width: 1.2em;
    height: 1.2em;
    fill: hsl(var(--color-background-h), var(--color-background-s), 50%);
}

.editButton > div:hover {
    fill: hsl(var(--color-background-h), var(--color-background-s), 70%);
}

.activeEdit > div {
    fill: var(--color-button-red);
}

.activeEdit > div:hover {
    fill: var(--color-button-red);
}

.error {
    display: block;
    width: 100%;
    line-height: 2em;
    background-color: var(--color-error);
    color: var(--color-font-active);
    padding: 0.5em;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.profileSection {
    width: calc(100% + 2.4em);
    margin-left: -1.2em;
    padding: 0 1.2em;
    transition: background-color 500ms;
    background-color: transparent;
}

.profileSection > .flyover {
    position: sticky;
    top: -0.1em;
    z-index: 3;
    padding: 1.2em;
    margin: 0 -1.2em;
}

.patientInfo .flyover {
    background-color: hsl(var(--color-background-h), var(--color-background-s), 97%);
}

.patientHistory {
    padding-top: 0;
}

.patientHistory .flyover {
    background-color: white;
}

.profileSectionActive {
    width: calc(100% + 2.4em);
    background-color: hsl(var(--color-background-h), var(--color-background-s), 90%);
}

.profileSectionActive input,
.profileSectionActive select {
    background-color: hsl(var(--color-background-h), var(--color-background-s), 97%);
}

.profileSectionActive input:hover,
.profileSectionActive select:hover {
    background-color: hsl(var(--color-background-h), var(--color-background-s), 100%);
}

.panelByPass {
    position: absolute;
    grid-area: content / content / auto / annexe;
    display: block;
    width: 100%;
    height: 100%;
    padding: 1.2em;
    border-bottom: 0.1em solid hsl(var(--color-background-h), var(--color-background-s), 90%);
}

.expandTimeline, .dataEdit {
    display: inline-block;
    margin-left: 0.3em;
    width: 1em;
    height: 1em;
}

.expandTimeline path,
.dataEdit path {
    fill: hsl(var(--color-background-h), var(--color-background-s), 70%);
}

.expandTimeline:hover path,
.dataEdit:hover path {
    fill: hsl(var(--color-background-h), var(--color-background-s), 40%);
}

.timelineItemConainter {
    position: sticky;
    display: inline-block;
    left: 0;
    height: 100%;
    max-width: 100%;
}

.timelineBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.timelineTextContent {
    color: #fff;position: sticky;
    position: -webkit-sticky;
    left: 0px;
    overflow: hidden;
    display: inline-block;
    border-radius: 2px;
    left: 0;
    padding: 0 6px;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}

.timelineVisitItem {
    background-color: rgb(133, 150, 176);
}

.timelineVisitItem:hover {
    background-color: rgb(149, 163, 184);
}

.timelineTreatementItem {
    overflow: visible;
    background-color: rgb(255, 202, 27);
}

.timelineTreatementItem line {
    stroke: rgb(179, 111, 22);
}

.timelineTreatementItem:hover line {
    stroke: rgb(238, 189, 125);
}

.timelineTreatementItem:hover {
    background-color: rgb(255, 223, 118);
}

.timelineTestItem {
    background-color: rgb(153, 202, 120);
}

.timelineTestItem:hover {
    background-color: rgb(186, 209, 170);
}

.timelineCEItem {
    background-color: rgb(255, 102, 102);
}

.timelineCEItem:hover {
    background-color: rgb(255, 139, 139);
}

.timelineImmunisationItem {
    background-color: rgb(79, 20, 97);
}

.timelineImmunisationItem:hover {
    background-color: rgb(90, 51, 102);
}

.timelineEDSSPlotter {
    height: calc(80px * 0.85);
    position: relative;
    background-color: transparent;
}

.timelineEDSSPlotter line {
    stroke: var(--color-background);
}

.timelineTreatementItem svg,
.timelineEDSSPlotter svg,
.timelineRelapseItem svg {
    overflow: visible !important;
}

.timelineRelapseItem circle {
    fill: rgb(255, 102, 102);
}

.timelineRelapseItem line {
    stroke: var(--color-background);
}

.timelineRelapseItem line.dashed {
    stroke-dasharray: 0.2em;
}

.timelineRelapseItem line.cross {
    stroke: rgb(255, 102, 102);
}

.timelineEDSSPlotterPad {
    display: none;
}

.keyboardGroup {
    line-height: 1.4em;
    padding-left: 2em;
}

.keyboardGroup pre {
    background: hsl(var(--color-background-h), var(--color-background-s), 90%);
}

.keyboardKey {
    margin-top: -0.2em;
    margin-bottom: 0.5em;
    font-size: 1.2em;
    display: inline-block;
    padding: 0.2em 0.5em;
    word-wrap: none;
}

.filterBox {
    font-size: 0.8em;
    margin-top: 0.4em;
}

.filterBox svg {
    height: 1em;
    width: 0.8em;
    margin-right: 0.5em;
}

.filterBox span {
    padding: 0.4em 0.7em;
    margin-left: 1em;
    border: 0.1em solid hsl(var(--color-background-h), var(--color-background-s), 80%);
}

.filterBox span:hover {
    cursor: pointer;
    border: 0.1em solid hsl(var(--color-background-h), var(--color-background-s), 50%);
}

.filterBox span.selected {
    background-color: hsl(var(--color-background-h), var(--color-background-s), 93%);
}

.filterBox span.selected:hover {
    background-color: hsl(var(--color-background-h), var(--color-background-s), 80%);
}

.deleteButton {
    background-color: var(--color-button-red)
}

.deleteButton:hover {
    background-color: var(--color-button-red-lighter)
}

.piiUncover {
    text-decoration: underline;
    display: block;
    height: 1.5em;
}

.piiUncover:hover {
    color: hsl(var(--color-background-h), var(--color-background-s), 70%);
    cursor: pointer;
}

.closePii {
    display: block;
    transition: max-height 300ms ease-out;
    max-height: 1.5em;
    overflow: hidden;
}

.openPii {
    max-height: 15em;
}

.miniTimelineDateLine {
    border-top: 0.09em solid hsl(var(--color-background-h), var(--color-background-s), 80%);
}
.miniTimelineEDSS {
    color: #000;
    font-size: 0.9em;
    text-align: right;
    text-orientation: sideways-right;
    margin-left: -1em;
    font-weight: bold;
}

.editPatientIdDiv {
    padding: 0.5rem;
    background-color: #e4e4e4;
}