/* ---------------------------------------- MODAL ---------------------------------------- */

.modal__header{
    color: var(--c-primary-400);
    border: var(--border-main);
    border-left: 5px solid var(--c-primary-400);

    padding: .5rem 1rem;
    background-color: var(--c-primary-100);
}

.modal__close:not(.modal__button, .dialog__button, .button){
    top: .25rem;
    color: var(--c-primary-400);
}

.modal__close:not(.modal__button, .dialog__button, .button):hover{
    color: var(--c-primary-400);
}

.main__inline .modal:not([id^='filterset-'], .dialog__body){
    padding-bottom: 2rem;
}

.modal__title{
    text-align: left;
    font-size: 1.1rem;
    font-weight: bold;
}

.modal__body{
    margin-top: 1.25rem;
}


/* ---------------------------------------- GLOBAL ---------------------------------------- */

body{
    color: var(--c-secondary-800);
}

body, span{
    letter-spacing: .3!important;
}

.warning {
    color: var(--c-danger-500);
}

.no-wrap{
    white-space: nowrap;
}

.main__title i{
    font-size: .9em;
    margin-right: .25em;
}

.main__breadcrumbs{
    display: none;
}

.page-loader-cont{
    z-index: 99999;
}

.page-loader{
    border: none;
    box-shadow: none;

    position: relative;
    animation: none;
}

.page-loader__img{
    --pl-img-size: 8rem;
}

.page-loader__img.--interior{
    -webkit-animation: rotate 2s ease-in-out 0s infinite normal both;
    animation: rotate 2s ease-in-out 0s infinite normal both
}

.page-loader__img.--exterior{
    position: absolute;
    inset: 0;
}

.button.principal{
    border: var(--border-main);
    color: var(--c-primary-400);
    background-color: var(--c-primary-050);
}

.button.principal:hover{
    border: var(--border-main);
    color: var(--c-primary-400);
    background-color: var(--c-primary-100);
}

.header-main__tab{
    padding: .45rem calc(1rem - 9px) .4rem 1rem;
    box-shadow: none;
    border: var(--border-main);

    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.header-main__tab.active{
    box-shadow: none;
    border-color: var(--c-border);

    color: var(--c-primary-400);
    background-color: var(--c-primary-050);

    font-weight: 600;
}

.header-main__tab-info{
    margin-top: .25rem;
}

.header-main__tab-delete, .header-main__tab-reload{
    width: 2em;
    height: 1em;
    line-height: 1;
    padding: 1px 6px;
}

.header-main__tab-delete{
    margin-top: 0;
}

.select2-container{
    min-width: auto!important;
}

/* ---------------------------------------- NAV ---------------------------------------- */

.nav__searcher{
    padding: .75rem .75rem .5rem;
}

.nav__ul{
    padding: .75rem;
}

.nav__li > .nav__title .nav__a-title{
    margin-left: .25rem;
}

.nav__a-title{
    font-size: .8rem;
}

.nav__a i{
    font-size: .85em;
    margin: .25rem;
}

.nav__li > .nav__title .nav__a i{
    font-size: 1em;
    margin: 0;
}

.closed-menu .nav__li > .nav__title .nav__a i{
    font-size: 1.25rem;
}


/* ---------------------------------------- SHARED TABS / BUTTONS ---------------------------------------- */

.main__tab-button,
.tabs__button,
.agenda__tab-button,
.measure-filter__button,
.filter-tabs__button {
    font-size: .85rem;
    padding: .5rem 1rem;
}

.monitoring .tabs{
    flex-wrap: wrap;
    gap: .5rem;
}

.main__sticky+div .main__tabs, .main__sticky+.main__tabs, .risks__body .main__tabs{
    top: 25.22px;
}


/* ---------------------------------------- MONITORING LAYOUT ---------------------------------------- */

.monitoring {
    padding: 0 1rem 5rem;
    background-color: var(--c-secondary-bkg);
    color: var(--c-secondary-800);

    height: 100%;
    overflow: auto;
    /* min-height: 100%; */
}

.monitoring, .config-modal{
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

.patient-bottom,
.patient-other,
.monitoring-form{
    margin-top: 1rem;
}

@media screen and (min-width: 1500px) {
    .monitoring, .config-modal{
        grid-template-columns: repeat(3, 1fr);
    }

    .patient-other,
    .patient-bottom,
    .monitoring__tabs,
    .patient-historic,
    .config-modal__header,
    .config-modal__bottom,
    .monitoring-form {
        grid-column: span 3;
    }

    .patient-current, .config-modal__current{
        grid-column: span 2;
    }
}

@media screen and (min-width: 2500px) {
    .monitoring, .config-modal{
        grid-template-columns: repeat(8, 1fr);
    }

    .patient-other,
    .monitoring__tabs,
    .patient-historic,
    .config-modal__header,
    .monitoring-form {
        grid-column: span 8;
    }

    .patient-bottom, 
    .patient-current, 
    .config-modal__current, 
    .config-modal__bottom{
        margin-top: 0;
        grid-column: span 3;
    }

    .patient-important, .config-modal__important{
        grid-column: span 2;
    }
}

/* ---------------------------------------- MONITORING CARDS ---------------------------------------- */

.monitoring__card {
    border: var(--border-main);
    border-radius: var(--br-small);
    background-color: white;
    padding: 1rem .5rem .75rem;
}

.monitoring__card--buttons {
    padding: .5rem;
}

.patient-current .monitoring__card,
.vincat .monitoring__card,
.patient-other,
.patient-bottom .monitoring__card,
.monitoring__card.--accordion,
.monitoring-form {
    padding: 0;
}

.monitoring-form .table-accordion .main__tabs{
    display: none;
}

.monitoring-form .main__tabs{
    padding: 1.5rem .2rem 0;
    margin: 0 .75rem;
}

.monitoring-form legend{
    font-size: .85rem;
}

.monitoring-form #monitorings-fieldset-1 legend{
    display: none;
}

.monitoring-form #monitorings-fieldset-1{
    padding: 0;
    margin: 0;
    border: none;
}

.monitoring-form .main__section-wrapper{
    padding: 1rem 1.25rem;
}

.monitoring-form .main__section-wrapper form{
    margin: 0;
    padding: 0;
}

.monitoring__header {
    display: flex;
    gap: .5rem;
    justify-content: space-between;
}

.monitoring__header .button-section-base {
    margin-top: -.5rem;
}

.monitoring__title {
    font-size: .95rem;
    font-weight: bold;
    text-transform: uppercase;

    margin: 0 0 .5rem;
    padding: 0 .5rem;

    display: flex;
    align-items: center;
    gap: .5rem;
}

.monitoring__title i {
    margin-bottom: .25rem;
}

.vincat .monitoring__title{
    /* margin-top: 1rem; */
    margin-bottom: .75rem;
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.vincat section:nth-child(1n+2) .monitoring__title{
    margin-top: 1.5rem;
}

.monitoring__subtitle {
    font-size: .9rem;
    margin: 0 0 .5rem 0;
}

/* @media screen and (max-width: 900px) {
    .monitoring__card:not(.monitoring-form){
        padding: .75rem .5rem .5rem;
    }
} */


/* ---------------------------------------- MONITORING MODAL LIST ---------------------------------------- */

.monitoring__modal-list{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    
    gap: .5rem;
    min-width: 500px;
    width: 100%;

    padding: 1rem;
    border: var(--border-main);
    border-radius: 0 0 var(--br-main) var(--br-main);
}

@media screen and ( max-width: 700px ){
    .monitoring__modal-list{
        min-width: auto;
    }
}

.monitoring__modal-list input{
    display: none;
}

.monitoring__modal-item{
    display: block;

    padding: .6rem 1rem;
    color: var(--c-primary-400);
    background-color: var(--c-primary-bkg);

    line-height: 1;

    border: var(--border-main);
    border-radius: 20rem;

    cursor: pointer;
    white-space: nowrap;

}

.monitoring__modal-list input:checked + .monitoring__modal-item{
    color: white;
    background-color: var(--c-primary-400);
    border-color: var(--c-primary-400);
}

.monitoring__modal-item i{
    font-size: 1.1em;
    margin-right: .25rem;
    vertical-align: top;
}


/* ---------------------------------------- PATIENT HEADER ---------------------------------------- */

.patient-header {
    position: sticky;
    top: -1px;
    z-index: 10;
    margin: 0 -.25rem;
}

.patient-header.--change{
    padding-bottom: 1rem;
}

.patient-header.--monitorings, .patient-header.--patients, .patient-header.--episodes, .patient-header.--admissions, .patient-header.--isolations{
    margin: 0;
    padding: 1rem 1rem .5rem;
    background-color: var(--c-secondary-bkg);
}

.patient-header__general {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;

    border-bottom: var(--border-main);
    padding: 0 .5rem .5rem;
}

.patient-header__name {
    font-size: 1.25rem;
    margin: 0;
    line-height: 1;
    color: var(--c-primary-400);

    display: grid;
}

.patient-header__name a{
    display: flex;
}

.patient-header__name a i{
    font-size: .9em;
    margin-right: .5em;
}

.patient-header__tags {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: .5rem;
}

.patient-header__tag {
    flex-shrink: 0;
    color: var(--c-tag, var(--c-primary-400));
    white-space: nowrap;

    margin: 0;
    padding: .1rem .5rem 0;
    border-radius: var(--br-small);
    background-color: var(--c-bkg-tag, var(--c-primary-100));

    display: flex;
    align-items: center;
    gap: .5rem;
}

.patient-header__tag i {
    font-size: .8em;
}

.patient-header__tag.danger {
    --c-tag: var(--c-danger-500);
    --c-bkg-tag: var(--c-danger-o-075);

    border: var(--border-main);
    border-color: var(--c-danger-o-25);
}

.patient-header__tag.careful {
    --c-tag: var(--c-warning-500);
    --c-bkg-tag: var(--c-warning-o-075);

    border: var(--border-main);
    border-color: var(--c-warning-o-25);
}

.patient-header__other {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1rem;

    padding: .75rem .5rem 0;
}

.patient-header__data i {
    font-size: .9em;
    margin-right: .25rem;
}

.patient-header__data-value {
    font-weight: bold;
}

.patient-header__data-value span {
    font-weight: normal;
}

@media screen and (max-width: 900px){
    .patient-header__general{
        align-items: flex-end;
    }
    
    .patient-header__name{
        font-size: 1rem;
    }

    .patient-header__other{
        font-size: .85rem;
    }

    .patient-header__tag{
        padding: 0;

        width: 1.75rem;
        height: 1.75rem;

        align-items: center;
        justify-content: center;
    }

    .patient-header__tag i{
        font-size: 1em;
    }

    .patient-header__tag span{
        display: none;
    }
}


/* ---------------------------------------- RISK FACTORS ---------------------------------------- */

.patient-risks {
    grid-column: span 3;
    margin-bottom: .5rem;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.patient-risks .button{
    padding: .25rem .75rem;
    white-space: nowrap;
}

.patient-risks .button i{
    font-size: .9em;
}

.patient-risks__factors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    padding: 0 .5rem;
    gap: 1rem;
}


/* ---------------------------------------- TAGS ---------------------------------------- */

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.tags + .monitoring__title {
    margin-top: 1rem;
}

.tag {
    display: block;
    font-size: .85rem;
    text-align: center;

    color: var(--c-tag, var(--c-primary-400));
    padding: .1rem .75rem;

    border: var(--border-main);
    border-color: var(--c-b-tag, var(--c-border));
    border-radius: 20rem;
    background-color: var(--c-bkg-tag, var(--c-primary-bkg));

    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

label > .tag{
    cursor: pointer;
}

input:checked + .tag, .tag.active, label > .tag:hover{
    color: var(--c-active-tag);
    border-color: var(--c-b-active-tag);
    background-color: var(--c-bkg-active-tag);
}

.tags.small .tag,
.tag.small {
    font-size: .65rem;
    padding: 0 .5rem;
}

.tags.big .tag,
.tag.big{
    font-size: .9rem;
    padding: .4rem 1rem;
    line-height: 1;
}

.tags.f-grow .tag,
.tag.f-grow {
    flex-grow: 1;
}

.tags.upper .tag,
.tag.upper {
    text-transform: uppercase;
}

.tag i {
    font-size: .9em;
    margin-right: .5rem;
}

@media screen and (max-width: 700px) {
    .tags{ gap: .35rem; }
    .tag{ padding: .1rem .5rem 0 }
}

/* ---------------------------------------- TAG COLORS ---------------------------------------- */

.aixa-turquoise {
    --c-bkg-tag: var(--c-aixa-turquoise-bkg);
    --c-b-tag: var(--c-aixa-turquoise-l);
    --c-tag: var(--c-aixa-turquoise-d);
}

.--active-aixa-turquoise {
    --c-bkg-active-tag: var(--c-aixa-turquoise-bkg);
    --c-b-active-tag: var(--c-aixa-turquoise-l);
    --c-active-tag: var(--c-aixa-turquoise-d);
}

.aixa-blue {
    --c-bkg-tag: var(--c-aixa-blue-bkg);
    --c-b-tag: var(--c-aixa-blue-l);
    --c-tag: var(--c-aixa-blue-d);
}

.--active-aixa-blue {
    --c-bkg-active-tag: var(--c-aixa-blue-bkg);
    --c-b-active-tag: var(--c-aixa-blue-l);
    --c-active-tag: var(--c-aixa-blue-d);
}

.aixa-yellow {
    --c-bkg-tag: var(--c-aixa-yellow-bkg);
    --c-b-tag: var(--c-aixa-yellow-l);
    --c-tag: var(--c-aixa-yellow-d);
}

.--active-aixa-yellow {
    --c-bkg-active-tag: var(--c-aixa-yellow-bkg);
    --c-b-active-tag: var(--c-aixa-yellow-l);
    --c-active-tag: var(--c-aixa-yellow-d);
}

.green {
    --c-bkg-tag: var(--c-success-100);
    --c-b-tag: var(--c-success-o-25);
    --c-tag: var(--c-success-500);
}

.--active-green {
    --c-bkg-active-tag: var(--c-success-100);
    --c-b-active-tag: var(--c-success-o-25);
    --c-active-tag: var(--c-success-500);
}

.gray {
    --c-bkg-tag: var(--c-secondary-bkg);
    --c-b-tag: var(--c-secondary-100);
    --c-tag: var(--c-secondary-500);
}

.orange {
    --c-bkg-tag: var(--c-warning-100);
    --c-b-tag: var(--c-warning-o-5);
    --c-tag: var(--c-warning-500);
}

.--active-orange {
    --c-bkg-active-tag: var(--c-warning-100);
    --c-b-active-tag: var(--c-warning-o-5);
    --c-active-tag: var(--c-warning-500);
}


/* ---------------------------------------- TAG BUTTON ---------------------------------------- */

.tag-button {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.tag-button button {
    font-size: .8em;
    color: var(--c-secondary);
    background-color: var(--c-secondary-bkg);

    aspect-ratio: 1 / 1;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;

    border: var(--border-main);
    border-radius: 20rem;
}

.tag-button button:hover {
    background-color: var(--c-secondary-050);
}

.tag-button .fa-plus {
    margin-top: 1px;
}


/* ---------------------------------------- IMPORTANT COLUMN ---------------------------------------- */

.patient-important{
    display: grid;
    grid-template-columns: 50% 50%;
    gap: .5rem;

    min-width: 0;
}

.monitoring__card--buttons{
    grid-column: span 2;
}

.patient-important__buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);    
}

.patient-important__buttons .button {
    background: var(--c-primary-050);
    border-color: var(--c-primary-200);
    color: var(--c-primary-400);

    white-space: nowrap;
}

.patient-important__buttons .button:hover {
    background-color: var(--c-primary-200);
}

@media screen and (min-width: 1500px),
       screen and (max-width: 900px){
    .patient-important{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
}


/* ---------------------------------------- ALERTS ---------------------------------------- */

.patient-alert__list {
    display: grid;
    gap: .5rem;
}

.patient-alert__item {
    padding: .5rem .75rem;
    border-radius: var(--br-med);
    background-color: var(--c-bkg-alert, var(--c-primary-bkg));
}

.patient-alert__item:not(.placeholder) {
    padding: .5rem;
    border: var(--border-main);
    border-color: var(--c-b-alert, var(--c-border));
}

.patient-alert__item.confirmed-iras {
    --c-alert: var(--c-danger-500);
    --c-b-alert: var(--c-danger-o-25);
    --c-bkg-alert: var(--c-danger-o-075);
}

.patient-alert__item.precaution {
    --c-alert: var(--c-warning-500);
    --c-b-alert: var(--c-warning-o-25);
    --c-bkg-alert: var(--c-warning-o-075);
}

.patient-alert__item-info {
    flex-grow: 1;
}

.patient-alert__item-info p {
    font-size: .85rem;
}

p.patient-alert__item-info-title {
    font-size: .9rem;
    color: var(--c-alert, var(--c-primary-400));
    font-weight: bold;

    display: flex;
    align-items: center;
    gap: .5rem;

    text-transform: uppercase;
}


/* ---------------------------------------- EPISODES TIMELINE ---------------------------------------- */

.patient-episode p {
    margin: 0 .5rem;
}

.patient-episodes__ul {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0 .5rem;
}

.patient-episodes__li {
    position: relative;

    display: flex;
    align-items: center;
    gap: .5rem;
}

.patient-episodes__li::before {
    content: '';
    width: .85rem;
    height: .85rem;

    border-radius: 50%;
    background-color: var(--c-primary-400);

    flex-shrink: 0;
    margin-right: .5rem;
    vertical-align: middle;

    z-index: 1;
}

.inside-monitoring::before {
    box-shadow: inset 0 0 0 2px var(--c-primary-400);
    background-color: white;
}

.patient-episodes__li:first-child::before {
    box-shadow: inset 0 0 0 2px var(--c-warning);
    background-color: white;
}

.patient-episodes__li:nth-child(1n+2)::after {
    content: '';
    width: 0;
    height: 100%;
    border: 1px solid var(--c-primary-400);

    display: block;
    position: absolute;
    top: -1em;
    left: calc(.9rem / 2 - 1px);
    z-index: 0;

    background-color: var(--c-primary-400);
}

.patient-episodes__li p {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.monitoring__see-all {
    font-size: .75rem;
    text-transform: uppercase;

    display: block;
    width: calc(100% - 1rem);
    padding: .5rem .5rem;
    margin: 1rem .5rem 0;

    color: var(--c-primary-400);
    border: var(--border-main);
    background-color: transparent;

    transition: background-color .3s ease;
}

.monitoring__see-all:hover {
    background-color: var(--c-primary-bkg);
}


/* ---------------------------------------- CURRENT STATUS ---------------------------------------- */

.patient-current__list {
    display: grid;
    gap: 1rem;
}

.patient-current__item:last-child .responsive-table {
    margin-bottom: 1rem;
}

/* .vincat .patient-current__item:last-child .responsive-table{
    margin: 0;
} */


/* ---------------------------------------- TABLE ACCORDION ---------------------------------------- */

.table-accordion__header, .config-modal__draggable {
    margin: 0;
    text-transform: uppercase;

    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: .5rem;

    color: var(--c-primary-400);
    background: var(--c-primary-050);
    border-block: var(--border-main);
    border-left: 3px solid var(--c-primary-400);

    transition: background-color .3s ease;
}

.table-accordion__header:hover{
    cursor: pointer;
    background-color: var(--c-primary-100);
}

.patient-current__item:first-child > .table-accordion > .table-accordion__header, .monitoring__card.--accordion .table-accordion:first-child > .table-accordion__header, .monitoring-form .table-accordion__header{
    border-top: 0;
}

.patient-current__item:last-child > .table-accordion > .table-accordion__header {
    border-bottom: 0;
}

.table-accordion__header > i, .config-modal__draggable > i {
    font-size: .9em;
}

.table-accordion__title, .config-modal__draggable {
    font-size: .85rem;
    font-weight: bold;
}

.table-accordion__title {
    margin: 0;
    padding: .25rem 0;
}

.table-accordion__buttons {
    margin-left: auto;
    margin-right: .25rem;

    display: flex;
    justify-content: flex-end;
    align-self: stretch;
    flex-shrink: 0;

    border-radius: 0 var(--br-small) 0 0;
    overflow: hidden;
}

.table-accordion__button {
    font-size: .8rem;

    color: var(--c-primary-400);
    border: none;
    background-color: transparent;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    padding: 0 .5rem;
    transition: transform .3s ease;
}

.table-accordion .toggle-table-accordion{
    transform-origin: center;
    width: 1.5rem;
    display: flex;
    transform: rotate(0deg);
    justify-content: center;
    align-items: center;
    padding: 0;
}

.table-accordion.open>.table-accordion__header .toggle-table-accordion{
    transform: rotate(90deg);
}

.table-accordion__button.open-in-popup i{
    margin-top: 3px;
}

.table-accordion,
.table-accordion__body,
.table-accordion__row,
.table-scroll__wrapper {
    min-width: 0;
    max-width: 100%;
}

.table-accordion__body{
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;

    transition: grid-template-rows .3s ease;
}

.table-accordion.open>.table-accordion__body{
    grid-template-rows: 1fr;
}

.table-accordion__row{
    min-height: 0;
}

.table-accordion__row .gen-alert{
    margin: .5rem;
}

#config-unsaved-alert{
    overflow: hidden;

    max-height: 100px;

    margin-top: 1rem;
    padding: .5rem 1rem;

    border: var(--border-main);
    border-color: var(--c-warning-o-25);
    border-radius: var(--br-small);

    color: var(--c-warning-550);
    background-color: var(--c-warning-100);

    opacity: 1;
    transform: translateY(0);

    transition:
        max-height .3s ease,
        opacity .3s ease,
        transform .3s ease,
        margin .3s ease,
        padding .3s ease,
        border-width .3s ease;
}

#config-unsaved-alert.hidden{
    max-height: 0;

    opacity: 0;

    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;

    border-width: 0;

    transform: translateY(.5rem);

    pointer-events: none;
}

#config-unsaved-alert i{
    margin-right: .5rem;
}

@media screen and (max-width: 500px){
    .table-accordion .toggle-table-accordion, .table-accordion__header > i, .patient-important__buttons .button > i{
        display: none;
    }
}

/* ---------------------------------------- GENERIC LIST CARDS ---------------------------------------- */

.monitoring__ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: .5rem;
}

.monitoring__ul.full {
    grid-template-columns: 1fr;
}

.patient-current .monitoring__ul {
    margin: 0 .5rem .5rem;
}

.monitoring__li {
    border: var(--border-main);
    border-radius: var(--br-main);

    padding: .5rem 0;
    margin: 0;

    background-color: white;
}

.monitoring__li.finished {
    background: var(--c-secondary-bkg);
}

.monitoring__li.create-on-popup {
    cursor: pointer;
}

.monitoring__li-date {
    color: var(--c-primary-400);
    margin: 0 .78rem;
    font-size: .75rem;
    white-space: nowrap;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.monitoring__li-title {
    font-size: .85rem;
    font-weight: bold;
    line-height: 1.2;

    color: var(--c-primary-700);
    margin: 0;
    padding: .35rem .75rem;
}

.monitoring__li-title span {
    font-weight: normal;
    font-size: .8rem;
    line-height: 1.7;

    color: var(--c-primary-400);
    margin-left: 1rem;
    white-space: nowrap;
}

.monitoring__li-data {
    font-size: .8rem;
    padding: 0 .78rem;
    margin: 0;
    white-space: initial;
}

.monitoring__li-data span {
    color: var(--c-primary-700);
    font-weight: bold;
}


/* ---------------------------------------- TABS / SECONDARY INFORMATION ---------------------------------------- */

.monitoring__tabs {
    margin: .5rem .5rem 0;
}

.monitoring__tabs .tabs__button {
    background-color: var(--c-secondary-050);
    border: var(--border-main);
    border-color: transparent;
}

.monitoring__tabs .tabs__button:hover{
    background-color: var(--c-primary-050);
}

.main__tab.active .main__tab-button, .tabs__tab.active .tabs__button, .agenda__tab.active .agenda__tab-button, .measure-filter__input:checked+.measure-filter__button, .filter-tabs__tab.active .filter-tabs__button{
    color: var(--c-primary-400);
    background-color: var(--c-primary-050);
    border-color: var(--c-border);
}

/* .monitoring .tabs ~ .tabs__section-wrapper {
    margin-top: .5rem;
} */

.tabs__section-wrapper .responsive-table {
    padding-bottom: .75rem;
}

.tabs__section-wrapper[data-name="monitoring-other"]{
    margin-top: 0;
}


/* ---------------------------------------- HISTORIC TIMELINE ---------------------------------------- */

.patient-historic__ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    padding: .75rem;
    max-height: 280px;
    overflow-y: auto;
/* 
    background: var(--c-secondary-bkg);
    border: var(--border-main); */
}

.patient-historic__date {
    position: relative;

    display: grid;
    gap: .35rem;

    padding-left: 1.75rem;
}

.patient-historic__date::before {
    content: '';
    width: .85rem;
    height: .85rem;

    border-radius: 50%;
    background-color: var(--c-primary-400);

    position: absolute;
    left: 0;
    top: .15rem;

    z-index: 1;
}

.patient-historic__date::after {
    content: '';
    width: 0;
    height: calc(100% + 1rem);

    border-left: 2px solid var(--c-primary-400);

    position: absolute;
    left: calc(.85rem / 2 - 1px);
    top: .5rem;

    z-index: 0;
}

.patient-historic__date:last-child::after {
    display: none;
}

.patient-historic__date.inside-monitoring::before {
    box-shadow: inset 0 0 0 2px var(--c-primary-400);
    background-color: white;
}

.patient-historic__date:first-child::before {
    /* box-shadow: inset 0 0 0 2px var(--c-warning); */
    box-shadow: inset 0 0 0 2px var(--c-primary-400);
    background-color: white;
}

.patient-historic__day {
    /* font-size: .8rem; */
    font-weight: bold;
    color: var(--c-primary-400);
    margin: 0;
}

.patient-historic__today {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;

    color: var(--c-primary-400);
    background: var(--c-primary-100);

    padding: .15rem .5rem;
    border-radius: 20rem;

    margin-left: .5rem;
    vertical-align: middle;
}

.patient-historic__data {
    display: flex;
    flex-direction: column;
    gap: .35rem;

    margin-left: 0;
}

.patient-historic__item {
    font-size: .9rem;
}

.patient-historic__item span {
    font-style: italic;
    color: var(--c-type);
}

.patient-historic__item a {
    color: inherit;
    text-decoration: underline;
}


/* ---------------------------------------- HISTORIC TYPE COLORS ---------------------------------------- */

.c--episodes {
    --c-type: var(--c-primary-400);
}

.c--treatment, .c--prescriptions {
    --c-type: var(--c-success-500);
}

.c--symptom, .c--isolations {
    --c-type: var(--c-warning-500);
}

.c--microbiology, .c--screens {
    --c-type: var(--c-aixa-turquoise);
}

.c--procedure {
    --c-type: var(--c-primary-275);
}

.c--monitor {
    --c-type: inherit;
}

.c--clinic {
    --c-type: var(--c-primary-400);
}

.c--admissions {
    --c-type: var(--c-secondary);
}


/* ---------------------------------------- SMALL STATUS DOT ---------------------------------------- */

.monitoring__status {
    display: inline-block;
    width: .75rem;
    height: .75rem;

    border: var(--border-main);
    border-color: var(--c-success);
    border-radius: 50%;

    background-color: var(--c-success-o-5);
}


/* ---------------------------------------- COMPATIBILITY / STICKY FALLBACK ---------------------------------------- */

@supports not (position: sticky) {
    .patient-header {
        position: static;
    }
}


/* ---------------------------------------- COMPATIBILITY / GAP FALLBACK ---------------------------------------- */

@supports not (gap: 1rem) {
    .monitoring,
    .patient-important,
    .patient-alert__list,
    .patient-current__list,
    .patient-episodes__ul,
    .tags,
    .patient-header__tags,
    .patient-header__other,
    .monitoring__header,
    .table-accordion__header,
    .patient-alert__item-info-title {
        gap: 0;
    }

    .monitoring > * {
        margin: .25rem;
    }

    .patient-important > *,
    .patient-alert__list > *,
    .patient-current__list > *,
    .patient-episodes__ul > * {
        margin-bottom: .5rem;
    }

    .tags > *,
    .patient-header__tags > * {
        margin-right: .5rem;
        margin-bottom: .5rem;
    }

    .patient-header__other > * {
        margin-right: 1rem;
    }

    .monitoring__header > *,
    .table-accordion__header > *,
    .patient-alert__item-info-title > * {
        margin-right: .5rem;
    }
}


/* ---------------------------------------- COMPATIBILITY / ASPECT RATIO FALLBACK ---------------------------------------- */

@supports not (aspect-ratio: 1 / 1) {
    .tag-button button {
        width: 1.8rem;
        height: 1.8rem;
    }
}


/* ---------------------------------------- COMPATIBILITY / BORDER BLOCK FALLBACK ---------------------------------------- */

@supports not (border-block: 1px solid #000) {
    .table-accordion__header {
        border-top: var(--border-main);
        border-bottom: var(--border-main);
    }
}


/* ---------------------------------------- COMPATIBILITY / MIN FALLBACK ---------------------------------------- */

@supports not (width: min(200px, 100%)) {
    .monitoring__ul,
    .patient-risks__factors {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}


/* ---------------------------------------- RESPONSIVE TABLE FALLBACKS ---------------------------------------- */

.responsive-table {
    width: 100%;
    border-collapse: collapse;
}

.responsive-table td,
.responsive-table th,
.patient-alert__item-info p,
.patient-episodes__li p {
    overflow-wrap: anywhere;
    word-break: normal;
}

@supports not (overflow-wrap: anywhere) {
    .responsive-table td,
    .responsive-table th,
    .patient-alert__item-info p,
    .patient-episodes__li p {
        word-break: break-word;
    }
}

.patient-current__item,
.tabs__section-wrapper {
    min-width: 0;
    overflow-x: auto;
}

.table-status,
.table-date {
    white-space: nowrap;
}


/* ---------------------------------------- COLOR FALLBACKS ---------------------------------------- */

.patient-header__name {
    color: var(--c-primary-400, #07344F);
}

.monitoring {
    background-color: var(--c-secondary-bkg, #f9f9f9);
    color: var(--c-secondary-800, #37393a);
}

.monitoring__card {
    border: var(--border-main, 1px solid #cad4d5);
    border-radius: var(--br-small, 4px);
}

.monitoring__title{
    color: var(--c-primary-400, #07344F);
}

/* ---------------------------------------- TAG FALLBACKS ---------------------------------------- */

.tag,
.patient-header__tag {
    color: var(--c-tag, var(--c-primary-400, #07344F));
    background-color: var(--c-bkg-tag, var(--c-primary-bkg, #f3f7f9));
    border-color: var(--c-b-tag, var(--c-border, #cad4d5));
}


/* ---------------------------------------- ALERT FALLBACKS ---------------------------------------- */

.patient-alert__item {
    background-color: var(--c-bkg-alert, var(--c-primary-bkg, #f3f7f9));
}

.patient-alert__item:not(.placeholder) {
    border-color: var(--c-b-alert, var(--c-border, #cad4d5));
}

p.patient-alert__item-info-title {
    color: var(--c-alert, var(--c-primary-400, #07344F));
}


/* ---------------------------------------- HISTORIC FALLBACKS ---------------------------------------- */

.patient-historic__item span {
    color: var(--c-type, currentColor);
}


/* ---------------------------------------- VINCAt / INDEX ---------------------------------------- */

.vincat, .index {
    padding: 1rem;
    background-color: var(--c-secondary-bkg);
    color: var(--c-secondary-800);
    min-height: 100%;
}

.index{
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

.index-monitoring{
    grid-row: span 2;
}

.tabs__section-wrapper[data-name="total-iras"]{
    margin: 1rem .5rem 0;
}

.index-iras{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: .5rem;
}

@media screen and (min-width: 1400px) {
    .index{
        grid-template-columns: 66% 33%;
    }
}

.blank{
    min-height: 3rem;
    background-color: var(--c-secondary-050);
    border-radius: var(--br-small);

    text-transform: uppercase;

    display: flex;
    justify-content: center;
    align-items: center;
}

.config-modal__header{
    margin-bottom: .5rem;
}

.config-modal__current, .config-modal__bottom{
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.config-modal__bottom{
    margin-top: .5rem;
}

.config-modal__draggable{
    padding: .25rem .5rem;
}

.config-modal__draggable:hover{
    cursor: grab;
    background-color: var(--c-primary-100);
}

.config-modal__drop-indicator {
    height: 2px;
    border-radius: 20rem;
    background-color: var(--c-primary-400);

    pointer-events: none;
    flex-shrink: 0;
}

.config-modal__draggable.is-dragging {
    opacity: .35;
}

.config-modal__draggable.is-swap-target {
    border-color: var(--c-primary-400);
    background-color: var(--c-primary-100);
}

.config-modal__current.is-reorder-section,
.config-modal__bottom.is-reorder-section {
    background-color: var(--c-primary-o-075);
}

.config-modal__current.is-invalid-drop:hover,
.config-modal__bottom.is-invalid-drop:hover {
    cursor: not-allowed;
}

@media (hover: none) and (pointer: coarse) {
    .toggle-config-monitoring-screen-modal {
        display: none;
    }
}

/* ---------------------------------------- ICD ---------------------------------------- */
.modal__body.--modal-icd{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.modal__icd-select{
    flex-shrink: 0;
    margin-bottom: 1rem;
}

.--modal-icd .modal-scroll{
    flex-shrink: 1;
    flex-grow: 1;
    overflow: auto;
}

.modal__icd-apply{
    flex-shrink: 0;

    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.25rem;
}

.modal__body [class$="-modal-icd-10-list"]{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.modal__body [class$="-icd-10-elem"]{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary-400);
    background: var(--c-primary-050);
    border: var(--border-main);
    padding: .25rem .5rem;
    border-radius: var(--br-small);
}

.modal__icd-apply .btn{
    margin: 0;
    text-transform: uppercase;
}

[class$="-remove-icd-10"]{
    pointer-events: auto;
}

[id$="-cie10-tree"] .jstree-anchor > .jstree-themeicon {
    background-image: none !important;
    margin-right: .35rem;
}

[id$="-cie10-tree"] .jstree-closed > .jstree-anchor > .jstree-themeicon::before,
[id$="-cie10-tree"] .jstree-open > .jstree-anchor > .jstree-themeicon::before,
[id$="-cie10-tree"] .jstree-leaf > .jstree-anchor > .jstree-themeicon::before{
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    color: var(--c-primary-275);
}

[id$="-cie10-tree"] .jstree-closed > .jstree-anchor > .jstree-themeicon::before {
    content: "\f07b"; /* folder */
}

[id$="-cie10-tree"] .jstree-open > .jstree-anchor > .jstree-themeicon::before {
    content: "\f07c"; /* folder-open */
    font-weight: 400;
}

[id$="-cie10-tree"] .jstree-leaf > .jstree-anchor > .jstree-themeicon::before{
    content: "\f481"; /* fa-notes-medical */
}

[id$="-cie10-tree"] .jstree-anchor.jstree-clicked{
    color: var(--c-primary-400);
    background-color: var(--c-primary-050);
}