@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

/*
 ==== HTML and defaults ====
*/

:root {

    /*Controls*/
    /* --label-font: 400 1rem/1rem 'Figtree', sans-serif; */
    --label-font: 400 1rem/1rem 'Figtree', sans-serif;
    --base-colors-dark-grey: #29323f;
    --base-colors-primary-button: #12AFF0;
    --base-colors-primary-text-color: #FFFFFF;
    --base-colors-secondary-text-color: #12AFF0;
    --hover-secondary-button: #12AFF033;
    --active-secondary-button: #12AFF066;
    --input-placeholder-main-color: #9E9DAE;

    /* ================================================================ NEW DESIGN ================================================================ */

    /* Main colors */
    --main-primary-25: #E0EDF9;
    --main-primary-50: #EBF5FF;
    --main-primary-100: #C0E1FF;
    --main-primary-200: #A1D2FF;
    --main-primary-300: #76BDFF;
    --main-primary-400: #5CB1FF;
    --main-primary-500: #339DFF;
    --main-primary-600: #2E8FE8;
    --main-primary-700: #246FB5;
    --main-primary-800: #1C568C;
    --main-primary-900: #15426B;
    --main-secondary-50: #F2F1FF;
    --main-secondary-100: #D8D4FE;
    --main-secondary-200: #C5BFFD;
    --main-secondary-300: #AAA2FC;
    --main-secondary-400: #9990FC;
    --main-secondary-500: #8074FB;
    --main-secondary-600: #746AE4;
    --main-secondary-700: #5B52B2;
    --main-secondary-800: #46408A;
    --main-secondary-900: #363169;
    --main-tertiary-50: #F8FAFB;
    --main-tertiary-100: #EFF3F6;
    --main-tertiary-200: #E0E6EB;
    --main-tertiary-300: #9DB5C8;
    --main-tertiary-400: #748FA4;
    --main-tertiary-500: #29323F;
    --main-tertiary-600: #252E39;
    --main-tertiary-700: #1D242D;
    --main-tertiary-800: #171C23;
    --main-tertiary-900: #11151A;
    --main-neutral-50: #F1F0F3;
    --main-neutral-100: #D2D2D9;
    --main-neutral-200: #BCBCC7;
    --main-neutral-300: #9E9DAE;
    --main-neutral-400: #8B8A9E;
    --main-neutral-500: #6E6D86;
    --main-neutral-600: #64637A;
    --main-neutral-700: #4E4D5F;
    --main-neutral-800: #3D3C4A;
    --main-neutral-900: #2E2E38;

    /* Semantic colors */
    --semantic-correct-50: #E8FBF5;
    --semantic-correct-100: #B8F2DF;
    --semantic-correct-200: #96ECD0;
    --semantic-correct-300: #66E3BA;
    --semantic-correct-400: #48DDAD;
    --semantic-correct-500: #1AD598;
    --semantic-correct-600: #18C28A;
    --semantic-correct-700: #12976C;
    --semantic-correct-800: #0E7554;
    --semantic-correct-900: #0B5940;
    --semantic-error-50: #FDEBEC;
    --semantic-error-100: #F8C2C3;
    --semantic-error-200: #F5A4A6;
    --semantic-error-300: #F17B7D;
    --semantic-error-400: #EE6164;
    --semantic-error-500: #EA3A3D;
    --semantic-error-600: #D53538;
    --semantic-error-700: #A6292B;
    --semantic-error-800: #812022;
    --semantic-error-900: #62181A;
    --semantic-warning-50: #FFFAED;
    --semantic-warning-100: #FDEFC7;
    --semantic-warning-200: #FDE7AC;
    --semantic-warning-300: #FCDB86;
    --semantic-warning-400: #FBD56E;
    --semantic-warning-500: #FACA4A;
    --semantic-warning-600: #E4B843;
    --semantic-warning-700: #B28F35;
    --semantic-warning-800: #8A6F29;
    --semantic-warning-900: #69551F;
    --semantic-info-50: #EEEFFE;
    --semantic-info-100: #CACCFB;
    --semantic-info-200: #B1B4F9;
    --semantic-info-300: #8D92F7;
    --semantic-info-400: #777DF5;
    --semantic-info-500: #555CF3;
    --semantic-info-600: #4D54DD;
    --semantic-info-700: #3C41AD;
    --semantic-info-800: #2F3386;
    --semantic-info-900: #242766;

    /* Complementary colors */
    --complementary-red-50: #FFEFEF;
    --complementary-red-100: #FFCDCE;
    --complementary-red-200: #FFB5B6;
    --complementary-red-300: #FF9395;
    --complementary-red-400: #FF7E81;
    --complementary-red-500: #FF5E61;
    --complementary-red-600: #E85658;
    --complementary-red-700: #B54345;
    --complementary-red-800: #8C3435;
    --complementary-red-900: #6B2729;
    --complementary-orange-50: #FEF0ED;
    --complementary-orange-100: #FBCFC7;
    --complementary-orange-200: #F9B8AC;
    --complementary-orange-300: #F79886;
    --complementary-orange-400: #F5846E;
    --complementary-orange-500: #F3654A;
    --complementary-orange-600: #DD5C43;
    --complementary-orange-700: #AD4835;
    --complementary-orange-800: #863829;
    --complementary-orange-900: #662A1F;
    --complementary-pink-50: #FFF0F8;
    --complementary-pink-100: #FFD1EA;
    --complementary-pink-200: #FFBBDF;
    --complementary-pink-300: #FE9CD1;
    --complementary-pink-400: #FE89C8;
    --complementary-pink-500: #FE6BBA;
    --complementary-pink-600: #E761A9;
    --complementary-pink-700: #B44C84;
    --complementary-pink-800: #8C3B66;
    --complementary-pink-900: #6B2D4E;
    --main-tertiary-500: #29323F;
    --white-pure: #FFFFFF;
    --main-primary-70: #D6ECFF;
    --main-primary-25: #F1F4F9;
    --complementary-red-70: #FFE0E1;

    /* Aliases */
    --alias-main-text: var(--main-tertiary-700);

    /* Text styles */
    --text-style-h1: 400 32px/36px 'Figtree', sans-serif;
    --text-style-h2: 400 26px/28px 'Figtree', sans-serif;
    --text-style-h3: 400 22px/32px 'Figtree', sans-serif;
    /*change to weight 600?*/
    --text-style-b1-bold: 400 18px/24px 'Figtree', sans-serif;
    --text-style-b1: 400 18px/24px 'Figtree', sans-serif;
    /*change to weight 600?*/
    --text-style-b2-bold: 400 16px/22px 'Figtree', sans-serif;
    --text-style-b2: 400 16px/22px 'Figtree', sans-serif;
    --text-style-b2-regular: 200 16px/22px 'Figtree', sans-serif;
    --text-style-b3-bold: 600 14px/18px 'Figtree', sans-serif;
    --text-style-b3: 400 14px/18px 'Figtree', sans-serif;
    --text-style-b3-regular: 200 14px/18px 'Figtree', sans-serif;
    --text-style-caption: 400 12px/16px 'Figtree', sans-serif;
    --text-style-caption-regular: 200 12px/16px 'Figtree', sans-serif;

    /*Separador*/
    --separador-main: 8px;

    /* Text Styles  */
    h1 {
        font: var(--text-style-h1);
    }

    .h2 {
        font-family: Bold;
        font-size: 26px;
        line-height: 28.600000381469727px;
        ;
        letter-spacing: 0%;
    }

    .h3 {
        font-family: Semibold;
        font-size: 22px;
        line-height: 32px;
        ;
        letter-spacing: 0%;
    }

    .b1-bold {
        font-family: Bold;
        font-size: 16px;
        line-height: 22px;
        ;
        letter-spacing: 0%;
    }

    .b1 {
        font-family: Semibold;
        font-size: 18px;
        line-height: 24px;
        ;
        letter-spacing: 0%;
    }

    .b2-bold {
        font-family: Bold;
        font-size: 16px;
        line-height: 22px;
        ;
        letter-spacing: 0%;
    }

    .b2 {
        font-family: Semibold;
        font-size: 16px;
        line-height: 22px;
        ;
        letter-spacing: 0%;
    }

    .b2-regular {
        font-family: Regular;
        font-size: 16px;
        line-height: 22px;
        ;
        letter-spacing: 0%;
    }

    .b3 {
        font-family: Semibold;
        font-size: 14px;
        line-height: 18px;
        ;
        letter-spacing: 0%;
    }

    .b3-regular {
        font-family: Regular;
        font-size: 14px;
        line-height: 18px;
        ;
        letter-spacing: 0%;
    }

    .caption {
        font-family: Semibold;
        font-size: 12px;
        line-height: 16px;
        ;
        letter-spacing: 0%;
    }

    .caption-regular {
        font-family: Regular;
        font-size: 12px;
        line-height: 16px;
        ;
        letter-spacing: 0%;
    }

    .h1-bold {
        font-family: Bold;
        font-size: 32px;
        line-height: 36px;
        ;
        letter-spacing: 0%;
    }

    /* Spacings */
    --xxs: 2px;
    --xs: 4px;
    --s: 8px;
    --s-2: 12px;
    --md: 16px;
    --md-2: 20px;
    --md-3: 24px;
    --md-4: 28px;
    --lg: 32px;
    --lg-2: 36px;
    --lg-3: 40px;
    --lg-4: 44px;
    --xl: 48px;
    --xl-2: 52px;
    --xl-3: 56px;
    --xxl: 60px;
    --xxl-2: 64px;
    --xxl-3: 68px;
    --xxl-4: 72px;
}

* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Figtree';
    src: url("res/ProximaNova/ProximaNova.otf");
}

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
    margin: 0;
    padding: 0 var(--separador-main) var(--separador-main) var(--separador-main);
}

html,
body,
td {
    color: var(--color-main-fg);
    /*TODO: Review*/
}

/*
 ==== COMMON STYLES ====
*/

h2 {
    font-size: 1.5rem;
    line-height: 110%;
    margin: 1rem 0;
}

fieldset {
    border: none;
}

p {
    margin: 0px;
}

i.material-icons {
    user-select: none;
}

.form-group {
    margin-bottom: 1rem;
    margin-left: 2rem;
}

.form-group-submit {
    text-align: right;
    padding: 0 0.5rem;
}

.hidden {
    display: none !important;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.btn-small {
    height: 2rem;
    line-height: 2rem;
    font-size: 1rem;
    padding: 0 0.5rem;
}

.full-width {
    width: 100%;
}

.gray {
    color: #5f5f5f;
}

.inline {
    display: inline-block;
}

.w14 {
    width: 14rem;
}

.no-float {
    float: unset !important;
}

.lowercase {
    text-transform: lowercase;
}

div.search-box {
    display: inline-block;
}

div.vertical-line-separator {
    width: 1px;
    background-color: var(--main-tertiary-100);
}

.stay-hidden {
    visibility: hidden;
}

.active {
    cursor: pointer;
}

.dock-full {
    width: 100%;
    height: 100%;
}

/*
 ==== Validation errors ====
*/

input.validation-error {
    background-color: var(--color-validation-error-bg) !important;
}

textarea.validation-error {
    background-color: var(--color-validation-error-bg) !important;
}

select.validation-error {
    background-color: var(--color-validation-error-bg) !important;
}

/*
 ==== Layout ====
*/

#application-title {
    font-size: 1.75rem;
    white-space: nowrap;
    color: var(--color-title-fg);
    line-height: 3rem;
    text-align: center;
}

#topbar {
    background: var(--white-pure, #ffffff);
    border-radius: 0px 0px 12px 12px;
    padding: 0px 16px 0px 16px;
    justify-content: space-between;
    height: 40px;
}

#topbar .topbar-user {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
}

#topbar .topbar-user:hover {
    cursor: pointer;
}

#sidebar .sidebar-text {
    display: none;
    line-height: 16px !important;
}

#sidebar {
    background: var(--white-pure);
    border-radius: 12px;
    padding: 4px;
    gap: 0rem;
    align-items: flex-start;
    width: 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-icon {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    padding: 4px;
    font-size: 18px;
    align-items: center;
}

.sidebar-bar {
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    gap: 0rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    position: relative;
    color: var(--main-tertiary-300, #9DB5C8);
}

#sidebar .sidebar-bar:hover {
    color: var(--main-primary-500, #339DFF);
    background-color: var(--main-primary-25, #EBF5FF);
    cursor: pointer;
}

#sidebar .sidebar-bar:active {
    color: var(--main-primary-500, #339DFF);
    background-color: var(--main-primary-50, #EBF5FF);
}

#sidebar .sidebar-bar .active {
    color: var(--main-primary-500, #339DFF);
    background-color: var(--main-primary-50, #EBF5FF);
}

#sidebar .sidebar-bar:hover .sidebar-icon {
    font-size: 24px;
    border: 2px;
}

#sidebar.expanded {
    width: 180px;
    display: none;
    padding: 4px;
    gap: 4px;
}

#sidebar.expanded .sidebar-bar {
    padding: 8px 4px 8px 4px;
    color: var(--main-tertiary-300, #9DB5C8);
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 172px;
    position: relative;

}

#sidebar.expanded .sidebar-bar:hover {
    color: var(--main-primary-500, #339DFF);
    background-color: var(--main-primary-25, #EBF5FF);
    cursor: pointer;
}

#sidebar.expanded .sidebar-bar:active {
    color: var(--main-primary-500, #339DFF);
    background-color: var(--main-primary-50, #EBF5FF);
}

#sidebar.expanded .sidebar-bar.active-button {
    color: var(--main-primary-500, #339DFF);
    background-color: var(--main-primary-50, #EBF5FF);
}

#sidebar.expanded .sidebar-bar.active-button .sidebar-icon {
    font-size: 24px;
    border: 2px;
}

#sidebar.expanded .sidebar-bar.active-button .sidebar-text {
    font: var(--text-style-b2, 400 16px/16px 'Figtree', sans-serif);
}

#sidebar.expanded .sidebar-bar .sidebar-text {
    display: block;
    text-align: left;
    font: var(--text-style-b3, 400 0.875rem/0.875rem 'Figtree', sans-serif);
    position: relative;
    align-items: center;
    justify-content: flex-start;
}

#sidebar.expanded .sidebar-bar:hover .sidebar-icon {
    font-size: 24px;
    border: 2px;
}

#sidebar.expanded .sidebar-bar:hover .sidebar-text {
    font: var(--text-style-b2, 400 16px/16px 'Figtree', sans-serif);
}

.button-log {
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    gap: var(--s, 0.5rem);
    align-items: flex-end;
    justify-content: flex-start;
    flex: 1;
    height: 2.5rem;
    position: relative;
}

#sidebar.expanded .button-log {
    width: 172px;
    border-radius: 8px;
    padding-top: 8px;
    display: flex;
    flex-direction: row;
    gap: var(--s, 0.5rem);
    align-items: flex-end;
    justify-content: flex-start;
    flex: 1;
    height: 2.5rem;
    position: relative;
}

#content {
    position: relative;
}

#motd-banner {
    background: var(--color-motd-bg);
    color: var(--color-motd-fg);
    text-align: center;
    line-height: 2rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

#wrapper {
    position: relative;
    height: 100%;
    overflow: auto;
}

/*
 ==== Page definition ====
*/

.page-frame {
    height: 100%;
    width: 100%;
}

.page-frame .page-header {
    background: var(--white-pure);
    border-radius: 0.75rem;
    padding: 0.5rem 1.5rem 0.5rem 1.5rem;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

.page-frame.page-top .page-back {
    display: none;
}

.page-frame .page-breadcrumbs {
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    display: inline-flex;
    gap: 8px;
    padding: 4px;
    color: var(--main-tertiary-400); 
    flex-shrink: 0; 
}

.page-frame .page-titlegroup{
    flex-shrink: 0; 
}

.page-frame .page-title-icon {
    font-size: 22px;
    color: var(--main-primary-400);
}

.page-frame .page-title-title {
    font-size: 16px;
}

.page-frame .page-title-subtitle {
    font-size: 14px;
    color: var(--main-tertiary-500)
}

.page-frame .page-header-actions {
    display: none;
}

.page-frame .page-header-avatar {
    display: none;
}

.page-frame .page-header-avatar-name {
    font: var(--b-2);
}

.page-frame .page-header-avatar img {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.page-frame.locked:not(.do-refresh) .page-header-lock-warning {
    background: var(--semantic-warning-100);
    color: var(--semantic-warning-900);
    border-radius: 4px;

    .user-lock-name {
        color: var(--alias-main-text);
        padding: 0px 0px;
    }
}

.page-frame .page-lock-warning,
.page-frame:not(.locked) .page-header-lock-warning,
.page-frame.do-refresh .page-lock-warning,
.page-frame.do-refresh .page-header-lock-warning {
    display: none;
}

.page-frame.do-refresh .page-header-lock-refresh {
    background: var(--semantic-correct-50);
    color: var(--semantic-correct-900);
    border-radius: 4px;

}

.page-frame .page-lock-refresh,
.page-frame:not(.do-refresh) .page-header-lock-refresh {
    display: none;
}

.page-frame .page-context {
    display: none;
}

.page-frame .page-body {
    position: relative;
}

.page-frame .page-section {
    transition: flex 200ms ease-in-out;
    background: var(--white-pure);
    border-radius: 12px;
    padding: 24px 8px 24px 8px;

}

.page-frame .page-section-main {
    flex: 1;
}

.page-frame .page-section-detail {
    flex: 2;
}

.page-frame .page-section-side {
    flex: 2;
}

.page-frame .page-body-sectiongroup {
    flex: 3;
    position: relative;
    overflow-x: hidden;
    transition: flex 200ms ease-in-out;
}

.page-frame.hidding-detail .page-body-sectiongroup {
    flex: 0;
    overflow: hidden;
}

.page-frame.hidden-detail .page-body-sectiongroup {
    display: none;
}

.page-frame .page-section-side.hidding {
    flex: 0;
    overflow: hidden;
}

.page-frame .page-section-header {
    position: relative;
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    align-items: center;
}

.page-frame .page-section.head-separator .page-section-header::after {
    content: "";
    width: 100%;
    position: absolute;
    bottom: 8px;
    left: 0;
    height: 1px;
    background: var(--main-tertiary-100);
}

.page-frame .page-section .page-section-header.without-header {
    display: none;
}

.page-frame .page-section-back {
    display: none;
}

.page-frame .page-head-section-main-title,
.page-frame .page-head-section-detail-title,
.page-frame .page-head-section-side-title {
    display: none;
}

.page-frame .no-header-spacer .section-header-spacer {
    display: none;
}

.page-frame.details-action-right .page-section-detail .page-section-header {
    justify-content: space-between;
}

.page-button {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin: 16px 0 0 0;
}

.page-button span {
    display: contents;
}

/* Si hay MÁS de 3 botones (4 o más) → vertical */
body.handheld .page-button:has(:nth-child(4)) {
    flex-direction: column; 
    flex-wrap: nowrap;
}

/* Si hay 3 botones o menos → horizontal con wrap */
body.handheld .page-button:not(:has(:nth-child(4))) {
    flex-direction: row;
    flex-wrap: wrap;
}

body.handheld .page-button .button {
    display: flex;
    width: 100%;
    flex: 1 1 auto; 
    max-width: 100%;
}

body.handheld .page-button .button * {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* search */

.mobile .page-frame .page-header.show-ing .page-head-section-main-title,
.mobile .page-frame .page-header.show-ing .page-head-root-title,
.mobile .page-frame .page-header.show-ing .page-header-avatar,
.mobile .page-frame .page-header.show-ing .button-control,
.mobile .page-frame .page-header.show-ing .search-btn-container {
    display: none !important;
}

.mobile .page-frame .page-header.show-search .page-header-actions-frame {
    width: 100%;
}

.mobile .page-frame .page-header.show-search {
    gap: 0;
}

.mobile .page-frame .page-header .search-input-container {
    display: block;
    width: 100%;
    transform: scaleX(0);
    transform-origin: right;
    opacity: 0;
    padding: 0;
    transition:
        transform 0.4s ease,
        opacity 0.4s ease,
        padding 0.4s ease;
}

.mobile .page-frame .page-header.show-search .search-input-container {
    transform: scaleX(1);
    opacity: 1;
    padding: 0;
}



.mobile .page-frame .page-header.show-search .inputSearch {
    width: 100% !important;
    height: auto;
}


.mobile .page-frame .page-header-actions-frame .input-field .input-icon-right {
    display: block !important;
    cursor: pointer;
}


.page-frame:not(.wo-user) .chip-text.wo-user {
    display: none;
}

.page-frame.wo-user .chip-text.w-user {
    display: none;
}


/*
 ==== Old page and section ====
*/

.page {
    height: 100%;
}

.section {
    background: var(--white-pure);
    border-radius: 12px;
    /*(NOT COMPATIBLE WITH LAYOUT CLASSES)*/
    margin-top: var(--separador-main);
    /*(/NOT COMPATIBLE WITH LAYOUT CLASSES)*/
    padding: 1.5rem;
}

.section.topfree {
    padding: 0 1.5rem;
}

.section-header {
    padding: 1rem 0;
    display: inline-flex;
}

.section-content {
    max-width: 95rem;
    margin: 0 auto;
    padding: 8px 0;
}

/*
 ==== Layouting ====
*/

.layout {
    display: flex;
}

.layout.responsive {
    flex-direction: column;
}

.desktop .layout.responsive {
    flex-direction: row;
}

.layout.vertical {
    flex-direction: column;
}

.layout.horizontal {
    flex-direction: row;
}

.layout.gap {
    gap: var(--separador-main);
}

.layout.big-gap {
    gap: 24px;
}

.layout.pad-top {
    padding-top: var(--separador-main);
}

.layout.pad-bottom {
    padding-bottom: var(--separador-main);
}

.layout.pad-left {
    padding-left: var(--separador-main);
}

.layout.pad-right {
    padding-right: var(--separador-main);
}

.layout.pad {
    padding: var(--separador-main);
}

.layout.horizontal.reverse {
    flex-direction: row-reverse;
}

.layout.vertical.reverse {
    flex-direction: column-reverse;
}

.layout>.main {
    flex: 1;
    position: relative;
}

.layout.horizontal>.main {
    min-width: 0;
}

.layout.vertical>.main {
    min-height: 0;
}

.layout>.master {
    flex: 0.25;
}

.layout>.detail {
    flex: 0.75;
}

.layout>.c-panel {
    width: 25rem;
}

.layout>.c-10 {
    flex: 0.1;
}

.layout>.c-20 {
    flex: 0.2;
}

.layout>.c-30 {
    flex: 0.3;
}

.layout>.c-40 {
    flex: 0.4;
}

.layout>.c-50 {
    flex: 0.5;
}

.layout>.c-60 {
    flex: 0.6;
}

.layout>.c-70 {
    flex: 0.7;
}

.layout>.c-80 {
    flex: 0.8;
}

.layout>.c-90 {
    flex: 0.9;
}

.layout>.c-fill {
    flex: auto;
}

.layout.horizontal.left {
    justify-content: flex-start;
}

.layout.horizontal.center {
    justify-content: center;
}

.layout.horizontal.right {
    justify-content: flex-end;
}

.layout.horizontal.top {
    align-items: flex-start;
}

.layout.horizontal.middle {
    align-items: center;
}

.layout.horizontal.bottom {
    align-items: flex-end;
}

.layout.horizontal.between {
    justify-content: space-between;
}

.layout.vertical.left {
    align-items: flex-start;
}

.layout.vertical.center {
    align-items: center;
}

.layout.vertical.right {
    align-items: flex-end;
}

.layout.vertical.top {
    justify-content: flex-start;
}

.layout.vertical.middle {
    justify-content: center;
}

.layout.vertical.bottom {
    justify-content: flex-end;
}

.layout.vertical.between {
    justify-content: space-between;
}

.layout.wrap {
    flex-wrap: wrap;
}

.layout.lined {
    position: relative;
}

.layout.lined::before {
    content: "";
    position: absolute;
    height: 0.5px;
    background: var(--main-tertiary-200);
    left: 0;
    right: 0;
    top: 50%;
}

body:not(.desktop) .layout.responsive>.spacer {
    position: relative;
    height: 1.5rem;
}

.desktop .layout.responsive>.spacer {
    position: relative;
    width: 1.5rem;
}

body:not(.desktop) .layout.responsive>.spacer::before {
    content: "";
    position: absolute;
    height: 2px;
    background: var(--main-tertiary-100);
    left: 0;
    right: 0;
    top: 50%;
}

.desktop .layout.responsive>.spacer::before {
    content: "";
    position: absolute;
    width: 2px;
    background: var(--main-tertiary-100);
    left: 50%;
    top: 0;
    bottom: 0;
}

.layout.vertical>.spacer {
    position: relative;
    height: 1.5rem;
}

.layout.vertical>.spacer::before {
    content: "";
    position: absolute;
    height: 2px;
    background: var(--main-tertiary-100);
    left: 0;
    right: 0;
    top: 50%;
}

.layout.horizontal>.spacer {
    position: relative;
    width: 1.5rem;
}

.layout.horizontal>.spacer::before {
    content: "";
    position: absolute;
    width: 2px;
    background: var(--main-tertiary-100);
    left: 50%;
    top: 0;
    bottom: 0;
}

/*
 ==== Input form ====
*/

.form-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.form-row {
    width: 100%;
    margin-bottom: 20px;
}

.form-label {
    width: fit-content;
    white-space: nowrap;
}

.form-data {
    width: fit-content;
    overflow: hidden;
}

.form-data input {
    width: 100%;
    margin: 0rem;
    padding: 0.5em 1em;
    background-color: var(--color-main-input-bg);
}

.form-data select {
    width: 100%;
    margin: 0rem;
    padding: 0.5em 1em;
    background-color: var(--color-main-input-bg);
}

.edit-body {
    padding-bottom: 1rem;
}

.edit-field {
    display: inline-block;
}

.edit-value {
    margin: 0 0.5rem;
}

/*
 ==== Toast ====
*/
#nextsus-toast-container {
    position: fixed;
    bottom: 5rem;
    width: 100%;
    left: 50%;
    min-height: 40px;
    height: fit-content;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 20000;
    pointer-events: none;
}

.nextsus-toast {
    border-radius: 4px;
    display: flex;
    height: 40px;
    width: fit-content;
    align-items: center;
    gap: 8px;
    padding: 0px 12px 0px 8px;
    z-index: 20000;
    font-size: 1rem;
    opacity: 1;
    transition: opacity 1s, bottom 0.2s;
    font-size: var(--text-style-b3-regular);
}

.nextsus-toast .button-icon {
    font-size: 14px;
}

.nextsus-toast-info {
    color: white;
    background-color: var(--main-tertiary-500);
}

.nextsus-toast-info .button-icon {
    color: var(--main-tertiary-300);
}

.nextsus-toast-success {
    color: var(--semantic-correct-900);
    background-color: var(--semantic-correct-100);
}

.nextsus-toast-error {
    color: var(--semantic-error-900);
    background-color: var(--semantic-error-100);
}

.nextsus-toast-warning {
    color: var(--semantic-warning-900);
    background-color: var(--semantic-warning-100);
}


.col-tiny {
    width: 1rem;
}

.table-actions {
    margin-top: 0.5rem;
    text-align: right;
    margin-right: 1.5rem;
    width: 1rem;
    white-space: nowrap;
}

.table-actions * {
    margin: 0 0 0 0.2rem;
}

table.next.navigation tbody tr {
    cursor: pointer;
}

table.next.navigation tbody tr:hover,
table.next.navigation tbody tr:nth-child(even):hover {
    background: var(--color-table-list-row-hover);
}

table.next img.user-image {
    max-width: 3rem;
    max-height: 3rem;
}

table.scrollable {
    border-collapse: collapse;
    overflow: hidden;
    width: 100%;
    position: relative;
}

table>tbody>tr.redRow {
    background-color: var(--color-main-control-bg-cancl);
}

div.scrollable {
    overflow-y: auto;
}

div.max-error-height {
    max-height: 70vh;
}

/*
 ==== SEMANTIC STYLES ====
*/

.c_urgente {
    color: #ec0e0e;
}

.c_normal {
    color: #0ea9ec;
}

.c_connected {
    color: #64dc76;
    white-space: nowrap;
}

.c_offline {
    color: #dc6464;
    white-space: nowrap;
}

/*
 ==== MISC ====
*/

.al-left {
    text-align: left !important;
}

.al-center {
    text-align: center !important;
}

.al-right {
    text-align: right !important;
}

.al-justify {
    text-align: justify !important;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}

.padding-small {
    padding: 4px;
}

.padding-medium {
    padding: 8px;
}

.padding-large {
    padding: 16px;
}

/* 
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}
*/
/*
 ==== COMMON FOR CHAT AND APP ====
*/

.timeline-details-dialog {
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
}

.timeline-details-dialog embed {
    width: 100%;
    height: 100%;
}

.timeline-details-dialog img {
    width: 45%;
    margin: auto;
}

/*
 ==== MARGIN-PADDIGN SETS ====
*/
/*==== Small ====*/
.ms {
    margin: 0.5rem;
}

.mts {
    margin-top: 0.5rem;
}

.mls {
    margin-left: 0.5rem;
}

.mbs {
    margin-bottom: 0.5rem;
}

.mrs {
    margin-right: 0.5rem;
}

/*==== Medium ====*/

.mm {
    margin: 1rem;
}

.mtm {
    margin-top: 1rem;
}

.mlm {
    margin-left: 1rem;
}

.mbm {
    margin-bottom: 1rem;
}

.mrm {
    margin-right: 1rem;
}

/*==== Large ====*/

.ml {
    margin: 1.5rem;
}

.mtl {
    margin-top: 1.5rem;
}

.mll {
    margin-left: 1.5rem;
}

.mbl {
    margin-bottom: 1.5rem;
}

.mrl {
    margin-right: 1.5rem;
}


/* === DIALOG === */

.nextsus-dialog-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.nextsus-dialog-wall {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1d242d4d;
}

.nextsus-dialog {
    background: var(--white-pure);
    border-radius: 12px;
    position: fixed;
    box-shadow: var(--popup-box-shadow,
            0rem 0rem 0.25rem 0rem rgba(0, 0, 0, 0.04),
            0rem 0.5rem 1rem 0rem rgba(0, 0, 0, 0.08));
    max-height: 95vh;
    max-width: 95vw;
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

.nextsus-dialog.show-dialog {
    transform: scale(1);
    opacity: 1;
}

.nextsus-dialog .nextsus-dialog-body {
    margin: 0 8px;

}

.nextsus-dialog .nextsus-dialog-title {
    padding: 24px 24px 0 24px;
    cursor: grab;
}

.handheld .nextsus-dialog .nextsus-dialog-title {
    padding: 24px 24px 0 24px;
}


.nextsus-dialog-title-text {
    font: var(--text-style-h3);
}

.nextsus-dialog-title-close {
    width: 40px;
    height: 40px;
    border: 1px solid var(--main-tertiary-100);
    background-color: var(--white-pure);
    transition: background-color 0.3s;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.nextsus-dialog-title-close:hover {
    background-color: var(--main-tertiary-50);
}

.nextsus-dialog-title-close:active {
    background-color: var(--main-tertiary-100);
}

.nextsus-dialog-title-close:disabled {
    cursor: not-allowed;
    background-color: var(--main-tertiary-100);
    opacity: 0.3;
}

.nextsus-dialog-error {
    color: var(--semantic-error-500);
    padding: 0 24px;
}

.nextsus-dialog-footer {
    padding: 0 24px 24px 24px;
}

.handheld .nextsus-dialog-footer,
.tablet .nextsus-dialog-footer,
.mobile .nextsus-dialog-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px;
    flex-direction: row !important;
}

#tableStaffsByPatientPopup {
  min-width: 500px;
  
}

/* Auxiliar classes for dialgos */

i.popup-icon {
    color: var(--base-colors-primary-button);
    font-size: 24px;
}

/* === TAG Selected === */

.selected-container {
    display: flex;
    align-items: center;
}

.selected-container {
    display: inline-block;
}

.selected-value {
    display: inline-block;
    margin: none;
}

.selected-value span {
    margin-right: 5px;
}

.selected-value button {
    cursor: pointer;
}

.selected-remove-button {
    background-color: white;
    border: none;
    padding: 0;
    cursor: pointer;
    padding-right: 2px;
    margin: 0;
    cursor: pointer;
    line-height: 2rem;
    font-size: 0.9rem;
    color: black;
    border: 0;
    border-radius: 8px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    vertical-align: middle;
    user-select: none;
}

@font-face {
    font-family: 'Figtree';
    src: url("../res/fnt/ProximaNova/ProximaNova.otf") format("opentype");
}

/*
====================================================
====================================================
====================================================
====================================================
============================================= LOADER
*/

.loader {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 10001;
}

.loader::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80px;
    height: 80px;
    border-style: solid;
    border-color: var(--semantic-correct-500);
    border-top-color: var(--main-tertiary-100);
    border-width: 10px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    animation: spin .6s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}

/*
===== CONTROL: INPUT HELPER =========
*/
.input {
    width: 100%;
    padding: 3px;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: black !important;
}

.input .input-helper {
    font: var(--text-style-b3-regular);
    color: var(--color-main-input-border);
    padding-left: 0.3rem;
    padding-top: 2px;
    align-items: center;
    cursor: not-allowed;
    pointer-events: none;
}

.input .input-helper::before {
    font-size: 1.15em;
    font-family: "lucide";
    cursor: not-allowed;
    pointer-events: none;
    padding-right: 3px;
    vertical-align: bottom;
}

.input.helper-error .input-helper {
    padding-top: 8px;
    color: var(--semantic-error-500);
    font: var(--text-style-b3-regular);
    gap: var(--gutter-s, 4px);
}

.validation-input .input.helper-error .input-helper {
    height: 1.5rem;
    padding-top: 8px;
}

.validation-input .input .input-helper {
    height: 1.5rem;
    padding-top: 8px;
}

.input.helper-error .input-helper::before {
    color: var(--semantic-error-500);
    content: "\e088";
    /* icon-circle-x */
    font-family: "lucide";
}

.input.helper-success .input-helper {
    padding-top: 2px;
    color: var(--semantic-correct-500);
    font: var(--text-style-b3-regular);
    gap: var(--gutter-s, 4px);
}

.input.helper-success .input-helper::before {
    color: var(--semantic-correct-500);
    content: "\e080";
    /* icon-circle-check-big */
    font-family: "lucide";
}

.input.helper-info .input-helper {
    padding-top: 2px;
    color: var(--main-neutral-400);
    font: var(--text-style-b3-regular);
    gap: var(--gutter-s, 4px);
}

.input.helper-info .input-helper::before {
    color: var(--main-neutral-400);
    content: "\e0ff";
    /* icon-info */
}

.input.helper-warning .input-helper {
    padding-top: 2px;
    color: var(--semantic-warning-900);
    font: var(--text-style-b3-regular);
    gap: var(--gutter-s, 4px);
}

.input.helper-warning .input-helper::before {
    color: var(--semantic-warning-900);
    content: "\e07b";
    /* icon-circle-alert */
}

/*
===== CONTROL: INPUT LABEL =========
*/

.input .input-label {
    color: var(--main-tertiary-700, #1D242D);
    text-align: left;
    font: var(--text-style-b2-bold);
    position: relative;
    padding-bottom: 2px;
}

.input.mandatory .input-label::after {
    content: '*';
    color: var(--semantic-error-500, #ea3a3d);
    font: var(--text-style-h2);
    position: absolute;
    padding-left: 2px;
}

.input.mandatory.disabled .input-label::after {
    display: none;
}

/*
===== CONTROL: INPUT TEXT =========
*/

.input-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    font: var(--text-style-b3);
}


.input-field .input-field-default {
    background: var(--white-pure);
    border: 1px solid var(--main-tertiary-300);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: var(--gutter-s, 8px);
    width: 100%;
    height: 40px;
    position: relative;
    padding-right: 10px;
    padding-left: 10px;

}

.input-field .input-field-default .input-icon-left {
    width: 24px;
    height: 24px;
    position: relative;
    color: var(--main-tertiary-400);
    z-index: 10;
    top: 3px;
}

.input-field .input-field-default .input-icon-left::before {
    font-size: 24px;
}

.input.no-icon .input-field .input-field-default .input-icon-left {
    display: none;
}

.input-field .input-field-default .input-icon-right {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 10;
    top: 1px;
}

.input-field .input-field-default .input-icon-right::before {
    font-size: 20px;
}

.input.no-action .input-field .input-field-default .input-icon-right {
    display: none;
}

.input-field .input-field-default ::placeholder {
    color: var(--main-neutral-300);
    font: var(--text-style-b3, 400);
}

.input-field-default input {
    color: var(--alias-main-text);
    text-align: left;
    font: var(--text-style-b3, 400);
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 10px;
    height: 100%;
    border-style: hidden;

}

.input .input-field-default:focus-within {
    outline: 1px solid var(--main-primary-500);
    border-radius: 8px;
    color: var(--alias-main-text);
    outline-offset: 1px;
    outline-color: var(--main-primary-500);
    outline-width: 2px;
}

.input .input-field-default input:focus {
    background: var(--white-pure);
    outline: 0px var(--white-pure);
    border-radius: 8px;
}

.input.error .input-field .input-field-default {
    outline: 2px solid var(--semantic-error-500);
    border-radius: 8px;
    box-shadow: var(--focused-box-shadow, 0rem 0rem 0rem 0.1875rem #ea3a3dba);
}

.input.error .input-field .input-field-default .input,
.input.error .input-field .input-field-default .select {
    background: #faffcb;
}

/* .input.error .input-field .input-field-default::after {
    color: var(--semantic-error-500);
    content: "\e085";
    font-family: "lucide";
    font-weight: 300;
} */

.input.success .input-field .input-field-default {
    outline: 2px solid var(--semantic-correct-500);
    border-radius: 8px;
    box-shadow: var(--focused-box-shadow, 0rem 0rem 0rem 0.1875rem var(--semantic-correct-500));
}

.input.success .input-field .input-field-default::after {
    color: var(--semantic-correct-500);
    content: "\f05d";
    font-family: "Font Awesome 6 Free";
    font-weight: 300;
}

.input.disabled .input-field .input-field-default {
    cursor: not-allowed;
    pointer-events: none;
    color: var(--main-tertiary-300);
    opacity: 30%;
}

/*
===== CONTROL: INPUT NUMBER =========
*/

.input.number .input-helper {
    padding-left: 50px;
}

.input.number input {
    width: 100%;
}

/*
===== CONTROL: INPUT SELECT =========
*/

.select-input {
    position: relative;
    width: 280px;
    height: 40px;
}

.select-input .select-body {
    background: var(--color-main-input-bg);
    position: relative;
}

.select-input .select-body select {
    border: 1px solid var(--color-main-input-border);
    border-radius: 10px;
    background: var(--color-main-input-bg);
    padding: 8px;
    width: 280px;
    height: 40px;
    font: var(--label-font);
    color: var(--input-placeholder-main-color);
}

.select-body .select-body .select-icon-left {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-tertiary-400);
}

.select-body select:focus {
    background: var(--white-pure);
    border-radius: 0.625rem;
    border-style: solid;
    border-color: var(--main-tertiary-300);
    border-width: 0.0625rem;
    display: flex;
    flex-direction: row;
    gap: var(--gutter-s, 0.5rem);
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    box-shadow: var(--focused-box-shadow,
            0rem 0rem 0rem 0.1875rem rgba(51, 157, 255, 1),
        );
    overflow: hidden;
    outline-color: rgba(51, 157, 255, 1);
}

.select-body select.error {
    outline: 2px solid var(--semantic-error-500);
    border-radius: 8px;
    box-shadow: var(--focused-box-shadow, 0rem 0rem 0rem 0.1875rem var(--semantic-error-500));
}

.select-body select.success {
    outline: 2px solid var(--semantic-correct-500);
    border-radius: 8px;
    box-shadow: var(--focused-box-shadow, 0rem 0rem 0rem 0.1875rem var(--semantic-correct-500));
}

/*
===== CONTROL: BUTTON (BASE) =========
*/
.button {
    position: relative;
    display: inline-flex;
    height: 40px;
    padding: 0px 16px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: none;
    outline: none;
}

.button .content {

    font: var(--text-style-b3);
    position: relative;
    z-index: 2;
    display: flex;
    gap: 4px;
}

.button .overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
    z-index: 1;
    aspect-ratio: 1/1;
}

.button:hover .overlay {
    width: 120%;
}

.button:active .overlay {
    display: none;
}

.button:disabled {
    cursor: not-allowed;
    opacity: 0.3;
    pointer-events: none;
}

.button:disabled:hover .overlay {
    width: 0;
}

.handheld .nextsus-dialog-footer .button,
.tablet .nextsus-dialog-footer .button,
.mobile .nextsus-dialog-footer .button {
    flex: 1 1 auto;
    width: auto;
    white-space: normal;
    word-break: break-word;
}

/*
===== CONTROL: PRIMARY BUTTON =========
*/
.button.primary {
    background: var(--main-primary-500);
}

.button.primary .content {
    color: var(--white-pure);
}

.button.primary .overlay {
    background: var(--main-primary-600);
}

.button.primary:active {
    background: var(--main-primary-700);
}

/*
======CONTROL: ROUND BUTTON==============
*/
.button.round {
    border-radius: 50%;
    width: 40px;
}

/*
===== CONTROL: NEW SECONDARY BUTTON =========
*/
.button.secondary {
    background: var(--complementary-red-50);
}

.button.secondary .content {
    color: var(--complementary-red-500);
}

.button.secondary .overlay {
    background: var(--complementary-red-70);
}

.button.secondary:active {
    background: var(--complementary-red-100);
}

/*
===== CONTROL: NEW ALTERNATIVE BUTTON =========
*/

.button.alternative {
    background: var(--main-primary-50);
}

.button.alternative .content {
    color: var(--main-primary-500);
}

.button.alternative .overlay {
    background: var(--main-primary-70);
}

.button.alternative:active {
    background: var(--main-primary-100);
}

/*
===== CONTROL: NEW SECONDARY YELLOW BUTTON =========
*/
.button.secondary-yellow {
    background: var(--semantic-warning-100);
}

.button.secondary-yellow .content {
    color: var(--orange-pure);
}

.button.secondary-yellow .overlay {
    background: var(--semantic-warning-200);
}

.button.secondary-yellow:active {
    background: var(--semantic-warning-700);
}

/*
===== CONTROL: NEW SECONDARY GREEN BUTTON =========
*/
.button.secondary-green {
    background: var(--semantic-correct-100);
}

.button.secondary-green .content {
    color: var(--green-pure);
}

.button.secondary-green .overlay {
    background: var(--semantic-correct-200);
}

.button.secondary-green:active {
    background: var(--semantic-correct-700);
}

/*
===== CONTROL: NEW SECONDARY RED BUTTON =========
*/
.button.secondary-red {
    background: var(--complementary-red-100);
}

.button.secondary-red .content {
    color: var(--red-pure);
}

.button.secondary-red .overlay {
    background: var(--complementary-red-200);
}

.button.secondary-red:active {
    background: var(--complementary-red-700);
}

/*
======= CONTROL: BUTTON CONTROL =================
*/
.button-control {
    display: flex;
    align-items: center;
    border: 1px solid var(--main-tertiary-100);
    background-color: var(--white-pure);
    transition: background-color 0.3s;
    border-radius: 10px;
    height: var(--lg-3);
    /*overflow: hidden; replaced by clip because it is necessary for indicator-dot*/
    overflow: clip;
    overflow-clip-margin: 1em;
    cursor: pointer;
    gap: var(--s);
    position: relative;
    padding-top: 12px;
    padding-bottom: 12px;
    justify-content: center;
    padding-left: 12px;
    padding-right: 12px;
    color: var(--main-tertiary-500);
}



.button-control .button-icon {
    /*16px but set to 18px due Lucide icons font recentering*/
    height: 18px;
    width: 16px;
    font-size: 16px;
}

.button-control .button-text {
    text-align: left;
    font: var(--text-style-b3);
    position: relative;
}

.button-control .indicator-dot {
    position: absolute;
    top: -4px;
    right: -3px;
    width: 12px;
    height: 12px;
    background-color: var(--main-primary-400);
    border-radius: 50%;
    display: none;
}

.indicator-dot.show {
    display: flex;
}

.button-control:hover {
    background-color: var(--main-tertiary-50);
}

.button-control:active {
    background-color: var(--main-tertiary-100);
}

.button-control:disabled {
    cursor: not-allowed;
    border-color: var(--main-tertiary-100);
    opacity: 0.3;
}

.button-control.no-icon {
    padding-left: 16px;
    padding-right: 16px;
}

.button-control.no-text {
    padding-left: 8px;
    padding-right: 8px;
    width: var(--lg-3);
}

#nextsus-help .button-control.no-text {
    padding: 12px;
    width: 40px;
    height: 40px;
    border: 0px;
    left: 6px;
}

#nextsus-help .page-header .layout.horizontal.right {
    padding: 0px;
}


.button-control.no-icon .button-icon {
    display: none;
}

.button-control.no-text .button-text {
    display: none;
}

/*
======= CONTROL: BUTTON AUXILIAR =================
*/
.button-auxiliar {
    display: flex;
    align-items: center;
    border: 1px solid var(--main-tertiary-100);
    background-color: var(--white-pure);
    transition: background-color 0.3s;
    border-radius: 6px;
    height: var(--md-3);
    overflow: visible;
    cursor: pointer;
    gap: var(--s);
    position: relative;
    justify-content: center;
    padding-left: 8px;
    padding-right: 16px;
}

.button-auxiliar .button-icon {
    height: 16px;
    width: 16px;
}


.button-auxiliar .button-text {
    text-align: left;
    color: var(--main-tertiary-500);
    font: var(--text-style-b3);
    position: relative;
    white-space: nowrap;
}

.button-auxiliar.no-icon {
    padding-left: 16px;
    padding-right: 16px;
}

.button-auxiliar.no-icon .button-icon {
    display: none;
}

.button-auxiliar.no-text {
    padding-left: 4px;
    padding-right: 4px;
}

.button-auxiliar.no-text .button-text {
    display: none;
}

.button-auxiliar:hover {
    background-color: var(--main-tertiary-50);
}

.button-auxiliar:active {
    background-color: var(--main-tertiary-100);
}

.button-auxiliar:disabled {
    cursor: not-allowed;
    background-color: var(--main-tertiary-100);
    opacity: 0.3;
}

.button-auxiliar .tooltip {
    display: block;
}

.global-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center !important;
    margin-top: 6px;
    z-index: 99;
    pointer-events: none;

    .tooltip-background {
        background-color: var(--main-tertiary-500);
        max-width: 200px;
        width: max-content;
        color: white;
        padding: 12px 16px;
        border-radius: 10px;
        word-break: normal;
        overflow-wrap: break-word;
        overflow: visible;
    }

    .icon-triangle-top-dark {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 0 7.5px 13px 7.5px;
        border-color: transparent transparent var(--main-tertiary-500) transparent;
        transform: rotate(0deg);
        margin-top: -3px;
    }
}


/*
===== CONTROL: TEXT LINK =========
*/
.text-link {
    color: var(--main-tertiary-300);
    text-decoration: none;
    font: var(--text-style-b3);
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
}

.text-link:hover {
    color: var(--main-tertiary-400);
    text-decoration: none;
    font: var(--text-style-b3);
}

.text-link:active {
    color: var(--main-tertiary-500);
    text-decoration: none;
    font: var(--text-style-b3);
}

/*
===== CONTROL: CHECKBOX =========
*/

.input .input-checkbox input[type="checkbox"] {
    appearance: none;
    width: 24px;
    height: 24px;
    background-color: var(--white-pure);
    border: 1px solid var(--main-tertiary-300);
    border-radius: 8px;
    margin: 0;
    vertical-align: middle;
    display: inline-flex;
}

.input .input-checkbox input[type="checkbox"]:checked {
    background-color: var(--white-pure);
}

.input .input-checkbox input[type="checkbox"]:checked::after {
    content: "\e070";
    /* icon-check */
    font-family: 'lucide';
    font-weight: 900;
    color: var(--main-tertiary-500);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 24px;
    width: 22px;
    height: 24px;
    font-size: 14px;
    position: absolute;
}

.input .input-checkbox input[type="checkbox"]:hover {
    border-color: var(--main-primary-500);
    cursor: pointer;
}

.input .input-checkbox input[type="checkbox"]:hover:after {
    color: var(--white-pure);
}

.input .input-checkbox input[type="checkbox"]:disabled {
    background-color: var(--main-tertiary-200);
    border-color: var(--main-tertiary-300);
    cursor: not-allowed;
    pointer-events: none;
}

.input .input-checkbox input[type="checkbox"]:disabled::after {
    color: var(--main-tertiary-200);
    opacity: 0.3;
    pointer-events: none;

}

.input .input-checkbox input[type="checkbox"]:checked:hover {
    border-color: var(--main-tertiary-200);
    background-color: var(--main-primary-500);
    color: var(--white-pure);
}

.input .input-checkbox input[type="checkbox"]:checked:disabled {
    border-color: var(--main-tertiary-200);
    border-width: 1px;
    background-color: var(--main-tertiary-200);
}

.input .input-checkbox input[type="checkbox"]:checked:disabled::after {
    color: var(--main-tertiary-500);
    opacity: 0.3;
    pointer-events: none;
}

.input .input-checkbox input[type="checkbox"]:disabled:hover {
    color: var(--main-tertiary-200);
}

/* Indeterminate */
.input.indeterminate .input-checkbox input[type="checkbox"] {
    background-color: var(--main-tertiary-200);
    appearance: none;
    width: 24px;
    height: 24px;
    border: 1px solid var(--main-tertiary-300);
    border-radius: 8px;
    cursor: not-allowed;
    pointer-events: none;
}

.input.indeterminate .input-checkbox input[type="checkbox"]::after {
    content: '\f068';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--main-tertiary-400);
    display: block;
    text-align: center;
    line-height: 24px;
    cursor: not-allowed;
}

.input .input-checkbox span {
    display: inline-block;
    vertical-align: middle;
    padding-left: 5px;
    color: var(--main-tertiary-700);
    font: var(--text-style-b2-bold);
}

.input .input-checkbox {
    cursor: pointer;
    display: inline-flex;
    margin-top: 2px;
    position: relative;

}


.input .input-checkbox input[type="checkbox"]:not(:disabled):active {
    background-color: var(--main-tertiary-500) !important;
}

.input .input-checkbox input[type="checkbox"]:not(:disabled):active::after {
    color: white !important;
}

/*
===== CONTROL: ACTION ICONS =========
*/

.action-icon i {
    height: 24px;
    width: 24px;
    border: 2px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--main-tertiary-300);
    cursor: pointer;
    font-family: "lucide";
}

.action-icon i:hover {
    color: var(--main-tertiary-400);
}

.action-icon i:active {
    color: var(--main-tertiary-500);
}

.action-icon i.pressed {
    color: var(--main-tertiary-500);
}

.action-icon.pressed i {
    color: var(--main-tertiary-500);
}

/*
===== CONTROL: SCROLLBAR =========
*/

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--main-primary-300);
    border-radius: 14px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--main-primary-500);
}

::-webkit-scrollbar-track {
    background-color: var(--main-tertiary-50);
}

::scrollbar {
    width: 8px;

}

::scrollbar-thumb {
    background-color: var(--main-primary-500);
    border-radius: 14px;
}

::scrollbar-track {
    background-color: var(--main-tertiary-50);
}

/* Estilo del scrollbar del iframe */
iframe::-webkit-scrollbar {
    width: 8px;
}

iframe::-webkit-scrollbar-thumb {
    background-color: #339DFF;
    border-radius: 14px;
}

iframe::-webkit-scrollbar-track {
    background-color: #F8FAFB;
}


/*
===== CONTROL: Logo=========
*/
.logo,
.logo * {
    box-sizing: border-box;
}

.logo {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}


/*
===== CONTROL: SearchBar=========
*/
.input-searchbar,
.input-searchbar * {
    box-sizing: border-box;
}

.input-searchbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}


.input-searchbar-default {
    background: var(--main-tertiary-50);
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: var(--gutter-s, 8px);
    width: 280px;
    height: 40px;
    position: relative;
    padding: 0px;
}

.input-searchbar .input-searchbar-default .input-icon-left {
    width: 24px;
    height: 24px;
    color: var(--main-tertiary-400, #748FA4);
}

.input-searchbar .input-searchbar-default ::placeholder {
    color: var(--main-neutral-300, #9E9DAE);
    font: 400 0.875rem/1.125rem 'Figtree', sans-serif;
}

.input-searchbar-default input {
    color: var(--alias-main-text, #1D242D);
    text-align: left;
    font: 400 0.875rem/1.125rem 'Figtree', sans-serif;
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 10px;
    height: 100%;
    border-style: hidden;
    background-color: var(--main-tertiary-50);

}

.input .input-searchbar-default:focus-within {
    outline: 1px solid var(--main-primary-500, #339DFF);
    border-radius: 8px;
    color: var(--alias-main-text, #1D242D);
    box-shadow: var(--focused-box-shadow, 0rem 0rem 0rem 0.1875rem var(--main-primary-500, #339DFF));
}

.input .input-searchbar-default input:focus {
    background: var(--main-tertiary-50);
    ;
    outline: 0px var(--main-tertiary-50);
    ;
}

.input.error .input-searchbar .input-field-default {
    outline: 2px solid var(--semantic-error-500, #ea3a3d);
    border-radius: 8px;
    box-shadow: var(--focused-box-shadow, 0rem 0rem 0rem 0.1875rem #ea3a3dba);
}

.input.error .input-searchbar .input-field-default::after {
    color: var(--semantic-error-500, #ea3a3d);
    content: "\f06a";
    font-family: "Font Awesome 6 Free";
    font-weight: 300;
}

.input.success .input-searchbar .input-searchbar-default {
    outline: 2px solid var(--semantic-correct-500, #1ad598);
    border-radius: 8px;
    box-shadow: var(--focused-box-shadow, 0rem 0rem 0rem 0.1875rem var(--semantic-correct-500, #1ad598));
}

.input.success .input-searchbar .input-searchbar-default::after {
    color: var(--semantic-correct-500, #1ad598);
    content: "\f05d";
    font-family: "Font Awesome 6 Free";
    font-weight: 300;
}

.input.disabled .input-searchbar .input-searchbar-default {
    cursor: not-allowed;
    pointer-events: none;
    color: var(--main-tertiary-300, #9DB5C8);
    opacity: 30%;
}

.input.disabled .buttonsearchbar-control {
    display: none;
}

.buttonsearchbar-control {
    background: var(--main-tertiary-50);
    ;
    background-color: var(--white-pure);
    transition: background-color 0.3s;
    border-radius: 8px;
    border-style: solid;
    border-color: #eff3f6;
    border-width: 0.0625rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    gap: var(--s);
    padding: 0px 16px;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: var(--lg-3);
    position: relative;
    margin-left: 2.8rem;

}

.buttonsearchbar-icon {
    height: 16px;
    width: 16px;
}

.buttonsearchbar-text {
    text-align: left;
    font: var(--main-tertiary-500);
    font-style: var(--text-style-b3);
    position: relative;
}

.buttonsearchbar-control:hover {
    background-color: var(--main-tertiary-50);
}

.buttonsearchbar-control:active {
    background-color: var(--main-tertiary-100);
}

.buttonsearchbar-control:disabled {
    cursor: not-allowed;
    background-color: var(--main-tertiary-100);
    opacity: 0.3;
}

.buttonsearchbar-control.with-icon-and-text {
    padding-left: 12px;
    padding-right: 16px;
}

.buttonsearchbar-control.with-text {
    padding-left: 16px;
    padding-right: 16px;
}

.buttonsearchbar-control.with-icon {
    padding-left: 8px;
    padding-right: 8px;
    width: var(--lg-3);
}

/*
===== CONTROL: Head Section=========
*/
.head-section,
.head-section * {
    box-sizing: border-box;
}

.head-section {
    background: var(--white-pure, #ffffff);
    border-radius: 12px;
    padding: 0.5rem 1.5rem 0.5rem 1.5rem;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.icon {
    /* WARNING: GENERIC DEFINITION */
    display: flex;
    flex-direction: row;
    gap: 0rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.arrow-arrow-undo-down-left {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    position: relative;
    overflow: hidden;
}

.back-section {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.lucideicons-file-cog {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    position: relative;
    overflow: hidden;
}

.title-back-section {
    color: var(--main-tertiary-300, #9db5c8);
    text-align: left;
    font: 600 1rem/1.1875rem 'Figtree', sans-serif;
    position: relative;
}

.arrow-chevron-right-md {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    overflow: hidden;
}

.title-section {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
    /* flex: 1; */
    position: relative;
}

.file-file-check {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    overflow: hidden;
}

/*
===== CONTROL: List Base=========
*/
.list-base {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;

}

.headlist-list-base {
    background: var(--main-tertiary-100, #eff3f6);
    border-radius: var(--s, 0.5rem);
    padding: 0rem 2rem 0rem var(--md, 1rem);
    display: flex;
    flex-direction: row;
    gap: 0rem;
    align-items: flex-end;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    height: 2.5rem;
    position: relative;
}

.head-content-list-base {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: flex-end;
    justify-content: flex-start;
    align-self: stretch;
    flex: 1;
    position: relative;
}

.cell-list-base {
    padding: 0rem var(--md, 1rem) 0rem var(--md, 1rem);
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex: 1;
    min-width: 25rem;
    position: relative;
}

.cell2-list-base {
    padding: 0rem var(--md, 1rem) 0rem var(--md, 1rem);
    display: flex;
    flex-direction: row;
    gap: 0rem;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex: 1;
    min-width: 22.5rem;
    position: relative;
}

.cell3-list-base {
    padding: 0rem var(--md, 1rem) 0rem var(--md, 1rem);
    display: flex;
    flex-direction: row;
    gap: 0rem;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 1;
    position: relative;
}

.wrapper-list-scroll-list-base {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.list2-list-base {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    position: relative;
}

.row-list-base {
    background: var(--white-pure, #ffffff);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    display: flex;
    flex-direction: row;
    gap: 0rem;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.row-content-list-base {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    position: relative;
}

.cell4-list-base {
    padding: 0rem 1rem 0rem 1rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex: 1;
    min-width: 25rem;
    position: relative;
}

.cell5-list-base {
    padding: 0rem 1rem 0rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    height: 3.5rem;
    min-width: 22.5rem;
    position: relative;
}

.cell6-list-base {
    padding: 0rem 1rem 0rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 3.5rem;
    position: relative;
}

.cell7-list-base {
    padding: 0rem var(--md, 1rem) 0rem var(--md, 1rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 1;
    position: relative;
}

.scrollbar-list-base {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.track-list-base {
    background: var(--main-tertiary-50, #f8fafb);
    border-radius: 0.875rem;
    align-self: stretch;
    flex-shrink: 0;
    width: 0.5rem;
    position: relative;
}

.thumb-list-base {
    background: var(--main-primary-500, #339dff);
    border-radius: 0.875rem;
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.76375rem;
    position: absolute;
    left: 0rem;
    top: 1.414375rem;
}

/*
===== CONTROL: Accordion=========
*/

.accordion {
    background: var(--main-tertiary-100, #eff3f6);
    border-radius: 1rem;
    padding: var(--s);
    min-width: 14rem;
}

.accordion>div>.subtitle {
    padding-bottom: var(--s);
    transition: padding-bottom 0.2s ease-out;
}

.accordion>div>.header>i.icon,
.accordion>div>.header>.icon {
    width: 24px;
    height: 24px;
    font-size: 24px;
    font-weight: lighter;
}

.accordion>div>.header>.actions>i {
    width: 18px;
    height: 18px;
    font-size: 18px;
    font-weight: lighter;
}

.accordion>div>.header>.title {
    font: var(--text-style-b1);
    color: var(--alias-main-text);
}

.accordion>div>.subtitle {
    font: var(--text-style-b3);
    margin-left: 28px;
}

.accordion>div>.header>.actions>.icon-toggle {
    display: none;
    color: var(--main-tertiary-300);
    font-size: 24px;
    cursor: pointer;
}

.accordion>.body {
    transition: height 0.2s ease-in-out;
    overflow: hidden;
}

.accordion>.body>.body-wrapper {
    background-color: var(--white-pure);
    padding: 1rem;
    border-radius: 1rem;
}

.accordion>div>.header>.actions>.icon-toggle {
    transition: transform 0.2s ease-out;
    transform-origin: center;
}

/* Variants */
.accordion.no-icon>div>.header>.icon {
    display: none;
}

.accordion.no-icon>div>.header>.title {
    padding-left: 4px;
}

.accordion.no-iconclose>div>.header>.actions>.icon-action {
    display: none;
}

.accordion.collapsed>.body {
    height: 0px;
}

.accordion.collapsed>div>.header {
    padding-bottom: 0;
}

.accordion.collapsed>div>.header>.actions>.icon-toggle {
    transform: rotate(180deg);
}

.accordion.expandable>div>.header>.actions>.icon-toggle {
    display: initial;
}

.accordion.no-subtitle>div>.subtitle {
    display: none;
}

.accordion.no-subtitle.expanded>div>.header {
    padding-bottom: var(--s);
}

/*
===== CONTROL: Dropdown =========
*/

.input.dropdown select {
    border: 0;
    outline: 0;
    font: var(--text-style-b3);
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.input.dropdown.error .input-field .input-field-default::after {
    display: none;
}

/*
===== CONTROL: SWITCH =========
*/

.input-switch {
    position: relative;
    height: 26px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 26px;
}

.switch .input-text {
    font: var(--text-style-b2-regular);
    padding-left: 5px;
}

.switch .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 26px;
    background-color: var(--white-pure);
    border: 1px solid var(--main-tertiary-300);
    cursor: pointer;
    border-radius: 13px;
    transition: .4s;
}

.switch .slider::before {
    content: "";
    position: absolute;
    height: 17px;
    width: 17px;
    left: 4px;
    bottom: 4px;
    background-color: var(--main-tertiary-300);
    border-radius: 50%;
    transition: .4s;
}

.switch input:checked+.slider {
    background-color: var(--main-primary-500);
}

.switch input:checked+.slider::before {
    transform: translateX(24px);
    background-color: var(--white-pure);
}

.switch:hover .slider {
    border-color: var(--main-primary-500);
}

.switch input:disabled+.slider {
    background-color: var(--main-tertiary-100);
    cursor: not-allowed;
    border-color: var(--main-tertiary-300);

}

.switch input:disabled+.slider::before {
    background-color: var(--main-tertiary-300);
}

.switch .slider:active {
    background-color: var(--main-tertiary-500);
}

.switch .slider:active::before {
    background-color: var(--white-pure);
}

.switch input:checked+.slider:active {
    background-color: var(--main-tertiary-500);
}

.switch input:checked:disabled+.slider {
    cursor: not-allowed;
    pointer-events: none;
}

/*
===== CONTROL: RADIO BUTTON =========
*/

.input.radiobutton {
    width: initial;
}

.input-radiobutton {
    position: relative;
    display: flex;
    margin-top: 2px;
    align-items: center;
}

.input-radiobutton .input-label {
    padding: 0 0 0 4px;
    line-height: 24px;
}

.radiobutton-container {
    display: inline-block;
    width: 24px;
    height: 24px;
}

.radiobutton-container input[type="radio"] {
    display: none;
}

.radiobutton-container .custom-radio {
    position: relative;
    display: inline-block;
    height: 24px;
    width: 24px;
    background-color: var(--white-pure);
    border: 1px solid var(--main-tertiary-300);
    border-radius: 50%;
    cursor: pointer;
}

.radiobutton-container .custom-radio::after {
    content: "";
    position: absolute;
    height: 8px;
    width: 8px;
    background-color: var(--main-tertiary-500);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.radiobutton-container input[type="radio"]:checked+.custom-radio::after {
    display: block;
}

.radiobutton-container:hover .custom-radio {
    border-color: var(--main-primary-500);
}

.radiobutton-container input[type="radio"]:disabled+.custom-radio {
    background-color: var(--main-tertiary-100);
    cursor: not-allowed;
    border-color: var(--main-tertiary-300);
}

.radiobutton-container input[type="radio"]:active+.custom-radio {
    background-color: var(--main-tertiary-500);
}

.radiobutton-container input[type="radio"]:active:checked+.custom-radio {
    background-color: var(--main-tertiary-500);
}

.radiobutton-container input[type="radio"]:active+.custom-radio::after {
    background-color: var(--white-pure);
}

.radiobutton-container input[type="radio"]:active:not(:checked)+.custom-radio::after {
    display: block;
    background-color: var(--white-pure);
}

.radiobutton-container input[type="radio"]:disabled+.custom-radio,
.radiobutton-container input[type="radio"]:disabled:active+.custom-radio {
    background-color: var(--main-tertiary-100);
    border-color: var(--main-tertiary-300);
}

.radiobutton-container input[type="radio"]:disabled+.custom-radio::after {
    display: none;
}

/*===== CONTROL: badge-notification=========
*/
.badge-notification,
.badge-notification * {
    box-sizing: border-box;
}

.badge-notification .elipseCount {
    background: var(--Main-primary-500, #339DFF);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 4px;
    top: 4px;
    cursor: pointer;
}

#sidebar.expanded .sidebar-bar:hover .badge-notification .elipseCount {
    width: 18px;
    height: 18px;
    right: 2px;
    top: 1px;
}

.badge-notification .elipseCount.active-button {
    width: 18px;
    height: 18px;
    right: 2px;
    top: 1px;
}

.badge-notification__number {
    color: var(--white-pure);
    text-align: left;
    font: var(--b-2, 400 10px/10px 'Figtree', sans-serif);
    position: relative;
}

/*
===== CONTROL: Chip=========
*/
.chip {
    background: var(--main-tertiary-100, #EFF3F6);
    border-radius: 10px;
    padding: 2px 8px 2px 8px;
    display: inline-flex;
    mix-blend-mode: multiply;
    color: var(--alias-main-text, #1D242D);
    position: relative;
    margin-bottom: 4px;
    word-break: normal;
    gap: 4px;
}


.chip-icon {
    stroke-width: 1.33px;
}

.chip-icon.close {
    cursor: pointer;
}

.chip-text {
    text-align: left;
    font: var(--text-style-b3, 600 0.875rem/1.125rem 'Proxima Nova', sans-serif);
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.chip.no-iconclose .chip-icon.close {
    display: none;
}



.chip.flat {
    background: transparent;
    color: var(--main-neutral-400);
}

#file-upload {
    background: var(--main-tertiary-100, #EFF3F6);
    border-radius: 4px;
    padding: 2px 8px 2px 8px;
    display: inline-flex;
    mix-blend-mode: multiply;
    color: var(--alias-main-text, #1D242D);
    position: relative;
    word-break: normal;
    gap: 4px;
}

/*
===== CONTROL: badge-status=========
*/
.badge-status,
.badge-status * {
    box-sizing: border-box;
}

.badge-text {
    white-space: nowrap;
    /* Adjust the value as needed */
}

.badge-status {
    display: inline-flex;
    border-radius: 4px;
    padding: 0px 4px 0px 4px;
    height: 20px;
    text-align: left;
    font: var(--text-style-b3, 400 0.875rem/1.125rem 'Figtree', sans-serif);
    position: relative;
    mix-blend-mode: multiply;
}

/* variant styles */

.badge-status.finished {
    border: 1.5px solid var(--main-primary-50);
    background: var(--main-primary-50);
    color: var(--main-primary-700);
}

.badge-status.cancelled {
    border: 1.5px solid var(--semantic-error-50);
    background: var(--semantic-error-50);
    color: var(--semantic-error-700);
}

.badge-status.paused {
    border: 1.5px solid var(--semantic-warning-50);
    background: var(--semantic-warning-50);
    color: var(--semantic-warning-900);
}

.badge-status.inprogress {
    border: 1.5px solid var(--semantic-correct-50);
    background: var(--semantic-correct-50);
    color: var(--semantic-correct-700);
}

.badge-status.new {
    border: 1.5px solid var(--main-secondary-50);
    background: var(--main-secondary-50);
    color: var(--main-secondary-700);
}

.badge-status.draft {
    border: 1.5px solid var(--main-tertiary-50);
    background: var(--main-tertiary-50);
    color: var(--main-tertiary-500);
}

.badge-status.not-assigned {
    border: 1.5px solid var(--main-tertiary-50);
    background: var(--main-tertiary-50);
    border-width: 1.5px;
    color: var(--main-tertiary-400);
}

.badge-status.not-assigned::before {
    font-size: 16px;
    font-family: 'lucide';
    content: "\e05a";
    /* icon-battery-low */
    color: var(--semantic-error-500);
    padding-right: 4px;
    display: inline-flex;
    align-items: flex-end;
}

/*
===== CONTROL: badge-jobtitle=========
*/
.badge-jobtitle,
.badge-jobtitle * {
    box-sizing: border-box;
}

.badge-jobtitle {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.text {
    color: var(--main-neutral-500, #6e6d86);
    text-align: left;
    font: var(--b-3, 400 0.875rem/1.125rem 'Figtree', sans-serif);
    position: relative;
}

/*
    ==================================
    ==================================
    ========================= CALENDAR
*/

.calendar {
    width: 100%;
    height: 100%;
    z-index: 2;
}


.calendar .scroll {
    overflow-y: scroll;
}

.calendar table {
    width: 100%;
    padding: 0;
    border: 0;
    empty-cells: show;
    border-collapse: collapse;
}

.calendar #nav-header .button-auxiliar {
    height: var(--lg-3);
}

.calendar table.grid td.day,
.calendar table.grid td.hour {
    border: 1px solid var(--main-tertiary-200);
}

.calendar table.grid td.hour {
    text-align: center;
    font: var(--text-style-b2-regular);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    width: 52px;
    height: 46px;
    color: var(--alias-main-text);
}

.calendar table.grid td.hour.partial {
    opacity: 0.5;
    font-size: 0.9em;
}

.calendar table.grid td.separator {
    width: 4px;
}

.calendar table.grid td.day.today {
    background-color: #3f4d4815;
}

.calendar .headers {
    padding-right: 8px
}

.calendar.week .headers {
    padding-left: 56px;
}

.calendar .headers .header {
    background: var(--main-tertiary-100);
    border-top: 1px solid var(--main-tertiary-200);
    border-right: 1px solid var(--main-tertiary-200);
    border-bottom: 1px solid var(--main-tertiary-200);
    text-align: center;
    color: var(--alias-main-text);
    font: var(--text-style-b2-bold);
    display: inline-block;
    position: relative;
    padding: 0.5rem 0;
}

.calendar .headers .header .hline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background-color: #0ea9ec;
}

.calendar .headers .header .day {
    font: var(--text-style-b1);
    line-height: 40px;
}

.calendar .headers .header:first-child {
    border-top-left-radius: 8px;
    border-left: 1px solid var(--main-tertiary-200);
}

.calendar .headers .header:first-child .hline {
    border-top-left-radius: 8px;
}

.calendar .headers .header:last-child {
    border-top-right-radius: 8px;
}

.calendar.week .headers .header.main .paused {
    display: none;
}

.calendar.week .headers .header.main.pause .paused {
    display: inline-block;
    align-items: center;
}

.calendar.week .headers .header.main.pause {
    background-color: var(--main-tertiary-400);
    color: white;
    font-weight: normal;
}

.calendar.week .headers .header.main.pause .paused i {
    position: relative;
    top: 2px;
}

.calendar.month .day-cell-title {
    color: var(--main-tertiary-400, #748fa4);
}

.calendar.month .day-cell.pause {
    background-color: var(--main-tertiary-100);
}

.calendar.month .day-cell .paused {
    display: none;
}

.calendar.month .day-cell.pause .paused {
    display: flex;
    justify-content: center;
    align-items: center;
}

.calendar.month .day-cell .paused i {
    font: var(--text-style-h3);
    color: var(--main-neutral-100);
}

.calendar.month .icon-triangle-top-dark {
    display: none;
}

.calendar .body .month-title {
    padding-top: 1rem;
    padding-bottom: 0.5rem;

}

.calendar .month-title-line {
    height: 2px;
    background-color: var(--main-neutral-50);
}

.calendar .day-cell {
    min-height: 128px;
    height: auto;
    border-left: 1px solid var(--main-tertiary-200);
    border-top: 1px solid var(--main-tertiary-200);
    padding: 4px;
}


.calendar .day-cell-off-end {
    min-height: 128px;
    height: auto;
    border-left: 1px solid transparent;
    border-top: 1px solid var(--main-tertiary-200);
    padding: 4px;
}

.calendar .day-cell-off-start {
    min-height: 128px;
    height: auto;
    border-left: 1px solid transparent;
    border-top: 1px solid transparent;
    padding: 4px;
}

.calendar .week-row {
    border-right: 0px solid transparent;
}

.calendar .week-row.full-set {
    border-right: 1px solid var(--main-tertiary-200);
}

.calendar .week-row:last-child .day-cell {
    border-bottom: 1px solid var(--main-tertiary-200);
}

.calendar .week-row:last-child .day-cell.last-day-in-month {
    border-right: 1px solid var(--main-tertiary-200);
}

.calendar .hour {
    width: 50px;
    margin-right: 6px;
    border-top: 1px solid var(--main-tertiary-200);
    border-right: 1px solid var(--main-tertiary-200);
    border-left: 1px solid var(--main-tertiary-200);
    padding: 6px;
}

.calendar.week .week-row:first-child .hour-cell {
    border-top: 1px solid var(--main-tertiary-200);

}

.calendar .week-row:first-child .hour {
    border-top-left-radius: 8px;
}

.calendar .week-row:last-child .hour {
    border-bottom: 1px solid var(--main-tertiary-200);
    border-bottom-left-radius: 8px;
}

.calendar .hour-cell {
    border-left: 1px solid var(--main-tertiary-200);
    border-bottom: 1px solid var(--main-tertiary-200);
    height: 3rem;
    z-index: 1;
    cursor: pointer;
}

.calendar.week .week-row {
    border-right: 1px solid var(--main-tertiary-200);
}

.calendar .calendar-wrapper {
    position: relative;
}

/*calendar time periods*/
.calendar .time-period {
    z-index: 0;
    position: absolute;
}

.calendar .time-period.visit {
    background-color: var(--main-primary-50, #EBF5FF);
}

.calendar .time-period.televisit {
    background-color: var(--semantic-info-50);
}

.calendar .time-period.any {
    background-image: repeating-linear-gradient(45deg,
            /* Ángulo de las rayas */
            #EFEFFF,
            /* Color de las rayas */
            #EFEFFF 15px,
            /* Ancho de las rayas */
            #EBF5FF 15px,
            /* Inicio del espacio entre rayas (color de fondo) */
            #EBF5FF 30px
            /* Ancho del espacio entre rayas */
        );
}

.calendar .time-period.blocked {
    background-color: var(--main-tertiary-200);
    z-index: 1;
    pointer-events: none;
    opacity: 0.7;
}

/*calendar events card*/
.calendar .event-card {
    position: absolute;
    border-radius: 8px;
    display: flex;
    pointer-events: all;
    z-index: 3;
    padding: 4px;
    overflow: hidden;
    color: white;
    border-left: 8px solid;
    height: fit-content;
}

.calendar .tooltip.align-top {
    position: absolute;
    z-index: 5;
    box-shadow: none;
    max-width: 15rem;
}

.calendar .tooltip .title {
    flex-shrink: 1;
}

.calendar .tooltip .heading {
    color: white;
    flex-shrink: 1;
}

.calendar .tooltip .tooltip-text {
    text-align: left;
    padding-top: 8px;
    color: white;
}

.calendar .tooltip .chip-appointment {
    padding: 0px;
}

.calendar .tooltip .chip-appointment .chip-visits {
    width: 100%;
    height: fit-content;
}

.calendar .tooltip .chip {
    text-align: left;
    color: white;
    mix-blend-mode: normal;
    background: var(--main-tertiary-500);
}

.calendar .confirmed-televisit {
    font-size: inherit;
}

.calendar .between {
    height: fit-content;
    padding-left: 56px;
    padding-right: 8px;
}

.calendar .between .event-card {
    z-index: 1;
    position: inherit;
    width: 100%;
}

.calendar .current-hour-line {
    position: relative;
    width: calc(100% - 56px);
    margin-left: 56px;
    height: 1px;
    border: 1px dashed red;
    z-index: 5;
}

.calendar .hour-selector {
    position: absolute;
    border: 2px dashed var(--semantic-warning-400);
    border-radius: 8px;
    background-color: var(--semantic-warning-200);
    opacity: 60%;
    z-index: 4;
}

.calendar.week .month-selector {
    min-width: 200px;
}

.calendar.week .month-selector .button-text {
    text-align: center;
}

.calendar.month .chip {
    max-width: -webkit-fill-available;
    white-space: nowrap;
    width: fit-content;
}

.calendar.month .chip .chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

#abscence-management .calendar .event-card[type="Holiday"] {
    background-color: var(--semantic-correct-50);
    border: 2px solid var(--semantic-correct-800);
    color: var(--semantic-correct-800);
}

#abscence-management .calendar .event-card[type="Sick"] {
    background-color: var(--main-primary-50);
    border: 2px solid var(--main-primary-700);
    color: var(--main-primary-700);
}

#abscence-management .calendar .event-card[type="Personal"] {
    background-color: var(--complementary-orange-50);
    border: 2px solid var(--complementary-orange-700);
    color: var(--complementary-orange-700);
}

#abscence-management .calendar .event-card[type="Training"] {
    background-color: var(--main-secondary-50);
    border: 2px solid var(--main-secondary-700);
    color: var(--main-secondary-700);
}

#abscence-management .calendar .event-card[type="Other"] {
    background-color: var(--semantic-warning-100);
    border: 2px solid var(--semantic-warning-800);
    color: var(--semantic-warning-800);
}

/*calendar mobile navigation*/
.calendar .mobile-nav {
    gap: 4px;
}

.calendar .mobile-nav div {
    justify-content: space-between;
}

.calendar .mobile-nav .week-nav {
    font: var(--text-style-b2);
}

.calendar .mobile-nav .nav-info {
    font: var(--text-style-b3-regular);
    color: var(--main-tertiary-400);
}

#popup-calendar-legend {
    display: block;
    column-count: 2;
}

#popup-calendar-legend div:not(.calendar-legend-control) {
    display: block;
}

/*
===== CONTROL: CARD APPOINTMENT LIST=========
*/

.card-appointment-list-televisit {
    height: 84px;
    width: 406px;
    min-width: 224px;
    background-color: var(--main-tertiary-50);
    border: 1px solid var(--main-tertiary-200);
    border-radius: 12px;
    box-shadow: var(--focused-shadow);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 16px;
}

.card-appointment-list-physicalvisit {
    /*ONLY USED ON TEST PAGE*/
    height: 84px;
    width: 406px;
    min-width: 224px;
    background-color: var(--main-tertiary-50);
    border: 1px solid var(--main-tertiary-200);
    border-radius: 12px;
    box-shadow: var(--physical-shadow);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 16px;
}

.label {
    color: var(--alias-main-text);
    font: var(--text-style-b3-regular);
}

.info {
    color: var(--alias-main-text);
    font: var(--text-style-caption-regular);
}

.btn {
    display: flex;
    flex-direction: horizontal;
    align-items: left;
    justify-content: flex-start;
    gap: 4px;
    padding: 4px 8px;
}

.chip-visits {
    display: flex;
    height: 18px;
    border-radius: 24px;
    font-size: 14px;
    height: auto;
}

.chip-visits .date-info {
    line-height: 14px;
}


.chip-visits .btn {
    gap: 0px 4px;
    flex-wrap: wrap;
}

.chip-visits .confirmed-visit {
    padding-left: 0px;
    padding-right: 4px;
}

.chip-visits .confirmed-televisit {
    padding-left: 0px;
    padding-right: 4px;
}


.chip-visits[type="visit"] {
    color: var(--main-primary-500);
    background-color: var(--main-primary-50);
    /*background-color: var(--complementary-orange-50);*/
}

.chip-visits[type="televisit"] {
    color: var(--semantic-info-500);
    background-color: var(--semantic-info-50);
}

#visit-list .icon-video {
    width: 18px;
    height: 18px;
    color: var(--semantic-info-500);
}

#visit-list .icon-house {
    width: 18px;
    height: 18px;
    color: var(--main-primary-500);
    position: relative;
    bottom: 2px;
}

.date-info {
    font-size: 12px;
    font-weight: 200;
}

.btn {
    display: flex;
    flex-direction: horizontal;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 4px 8px;
}

.chip-appointment {
    border-radius: 12px;
    box-shadow: var(--physical-shadow);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

/*
===== CONTROL: CARD PATIENT HEAD =========
*/

.card-patient-head {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    position: relative;

}

.card-patient-head .avatar {
    flex-shrink: 0;
    width: 3.75rem;
    height: 3.75rem;
    position: relative;
}

.card-patient-head .avatar .elipse {
    background: var(--main-primary-100);
    border-radius: 50%;
    width: 3.75rem;
    height: 3.75rem;
    position: absolute;
    left: 0rem;
    top: 0rem;
    overflow: hidden;
}

.card-patient-head .avatar .elipse img {
    width: 100%;
}

.avatar .chatbot {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;
    margin: 0 auto;
    margin-top: 10px;
}

.card-patient-head .elipseAI {
    background: var(--main-primary-100, #c0e1ff);
    border: 4px solid white;
    border-radius: 50%;
    width: 1.8rem;
    height: 1.8rem;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: -0.3rem;
    bottom: -0.2rem;
    cursor: pointer;
}

.mobile .card-patient-head .elipseAI {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid white;
    left: 1.5rem;

}

.card-patient-head .elipseAI-icon {
    width: 0.75rem;
    height: 0.75rem;
}

.card-patient-head .elipseCount {
    background: var(--Main-primary-500, #339DFF);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: -7px;
    top: -1px;
    cursor: pointer;
}

.mobile .card-patient-head .elipseCount {
    width: 18px;
    height: 18px;
}

.mobile .card-patient-head .count {
    font: var(--text-style-caption) !important;
}

.card-patient-head .count {
    color: var(--white-pure, #FFFFFF);
    font: var(--text-style-b3, 600 14px/16px 'Proxima Nova', sans-serif);
    text-align: center;
}

.card-patient-head .wrapper-info {
    display: flex;
    flex-direction: column;
    gap: 0rem;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.card-patient-head .name {
    color: var(--alias-main-text);
    text-align: left;
    font: var(--text-style-b3);
    position: relative;
    line-height: 16px;
}

.card-patient-head .sex-age {
    text-align: left;
    color: var(--main-tertiary-400);
    mix-blend-mode: multiply;
    font: var(--text-style-b3-regular);
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    line-height: 16px;
}

.card-patient-head .diagnosis {
    color: var(--main-tertiary-400);
    mix-blend-mode: multiply;
    text-align: left;
    font: var(--text-style-b3-regular);
    position: relative;
    line-height: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
}

.card-patient-head .additional-info {
    color: var(--main-tertiary-500);
    text-align: left;
    font: var(--text-style-b3-regular, 400 14px/16px 'Figtree', sans-serif);
    position: relative;
    line-height: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 280px;
}


/*
===== CONTROL: CARD PATIENT HEAD =========
*/
.bubble-message,
.bubble-message * {
    box-sizing: border-box;
}

.bubble-message {
    gap: 8px;
    padding: 4px;
}

.bubble-message-box .button.secondary-yellow {
    border: 1px solid var(--semantic-warning-400);
}

.bubble-message-box {
    padding: 12px 24px 12px 24px;
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.bubble-message-box .reserv-image {
    min-width: 280px;
    min-height: 220px;
}

.bubble-message .displayname {
    color: var(--Alias-main-text, #1D242D);
    text-align: left;
    font: var(--text-style-b2, 600 16px/18px 'Proxima Nova', sans-serif);
    position: relative;
}

.bubble-message .displaytype {
    color: var(--main-tertiary-400);
    font: var(--text-style-caption);
}

.bubble-message .sendertype {
    gap: 4px;
}

.bubble-message .sendertype .typeicon {
    font-size: 14px;
}

.bubble-message .text {
    color: var(--main-tertiary-500, #29323f);
    text-align: left;
    font: var(--text-style-b2, 600 16px/18px 'Proxima Nova', sans-serif);
    position: relative;
    padding-right: 8px;
    cursor: default;
}

.bubble-message .entry-wrapper-icon {
    color: var(--main-tertiary-500, #29323f);
    text-align: left;
    width: 24px;
    height: 24px;
    padding: 4px 1.33px 4px 1.33px;
    font-size: 24px;
    gap: 8px;
}

.bubble-message .hidden {
    visibility: hidden;
}

.bubble-message .hour {
    color: var(--Main-tertiary-400, #748FA4);
    text-align: left;
    font: var(--text-style-caption, 600 12px/16px 'Proxima Nova', sans-serif);
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;
}

.bubble-message .cursor-pointer {
    cursor: pointer;
}

.bubble-message .icon {
    color: var(--main-neutral-500);
    font-size: 24px;
}

.bubble-message .attached-image {
    max-width: 200px;
    max-height: 200px;
    cursor: pointer;
}

.bubble-message .id-chat-msgtype-image {
    width: 200px;
    height: 200px;
}

.bubble-message .doc-title {
    font: var(--text-style-b2-bold);
    font-weight: 600;
    line-height: 18px;
    color: black;
}

.bubble-message .doc-name {
    font: var(--text-style-b3-regular);
}

.bubble-message .card-patient-head {
    order: 1;
    margin-left: auto;
    display: flex;
    align-items: flex-start;
}

.bubble-message .bubble-message-content {
    order: 2;
    display: flex;
    align-items: flex-start;
}

/* variant styles */
.bubble-message.interlocutor {
    display: flex;
    align-items: flex-start;
}

.bubble-message.myself {
    display: flex;
    align-items: flex-end;
}

.bubble-message.myself .card-patient-head {
    order: 2;
    margin-left: auto;
    display: flex;
    align-items: flex-start;
}

.bubble-message.myself .bubble-message-content {
    order: 1;
    margin-left: auto;
    display: flex;
    align-items: flex-end;
}

.bubble-message .avatar-hidden {
    visibility: hidden;
    flex-shrink: 0;
    width: 3.75rem;
    height: 0px;
    position: relative;
}

.bubble-message-box.interlocutor {
    border-radius: 0px 24px 24px 24px;
}

.bubble-message-box.myself {
    border-radius: 24px 0px 24px 24px;
}

.bubble-message-box.patient {
    background: var(--main-primary-50);
}

.bubble-message-box.staff {
    background: var(--main-tertiary-50);
}

.bubble-message-box.caregiver {
    background: var(--main-primary-50);
}

.bubble-message-box.paused {
    background: var(--Semantic-warning-50, #FFFAED);
}

.bubble-message-box.cancelled {
    background: var(--Semantic-error-50, #FDEBEC);
}

.bubble-message-box.inprogress {
    background: var(--Semantic-correct-50, #E8FBF5);
}

.bubble-message-box.unauthorized {
    background: var(--main-tertiary-50, #E8FBF5);
}

.bubble-message-box.paused .text {
    color: var(--main-tertiary-500, #29323f);
}

.bubble-message-box.cancelled .text {
    color: var(--main-tertiary-500, #29323f);
}

.bubble-message-box.inprogress .text {
    color: var(--main-tertiary-500, #29323f);
}

.bubble-message.notif-nwetlv .bubble-message-box {
    border-radius: 24px;
}

/*
===== CONTROL: CARD PATIENT HEAD =========
*/
.chat-writtebar {
    border-radius: 0.75rem;
    padding-top: 8px;
}

/*
===== CONTROL: TOOLTIP =========
*/
.tooltip .tooltip-container {
    background: #d6dad6;
}

.tooltip.align-right {
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    box-shadow: var(--shadow-a-box-shadow, 0px 4px 8px 0px rgba(0, 0, 0, 0.1));
}

.tooltip.align-left {
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.tooltip.align-bottom {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    box-shadow: var(--shadow-a-box-shadow, 0px 4px 8px 0px rgba(0, 0, 0, 0.1));
}

.tooltip.align-top {
    display: flex;
    flex-direction: column-reverse;
    gap: 0px;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    box-shadow: var(--shadow-a-box-shadow, 0px 4px 8px 0px rgba(0, 0, 0, 0.1));
}

.tooltip .tooltip-triangle {
    border-radius: 0px;
    flex-shrink: 0;
    position: relative;
    transform: translate(3px, -14px);
    overflow: visible;
}

.tooltip .tooltip-background {
    background: var(--main-tertiary-500);
    border-radius: 10px;
    padding: var(--s-2, 12px) var(--md, 16px) var(--s-2, 12px) var(--md, 16px);
    display: flex;
    flex-direction: row;
    gap: var(--s, 8px);
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    word-wrap: break-word;
    /* For older browsers */
    overflow-wrap: break-word;
    /* For newer browsers */
}

.tooltip .title {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.tooltip .heading {
    display: flex;
    flex-direction: row;
    gap: var(--xs, 4px);
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.tooltip .warning-circle-warning {
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}

.tooltip .tooltip-title {
    color: var(--white-pure);
    text-align: center;
    font: var(--text-style-b3);
    position: relative;
}

.tooltip .text {
    padding: 0px 0px 0px 20px;
    display: flex;
    flex-direction: row;
    gap: var(--s, 8px);
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex: 1;
    position: relative;
}

.tooltip .tooltip-text {
    color: var(--main-tertiary-300);
    text-align: center;
    font: var(--text-style-b3);
    position: relative;
}

.tooltip .tooltip-background.light {
    background: var(--white-pure);
    border-radius: 10px;
    padding: var(--s-2, 12px) var(--md, 16px) var(--s-2, 12px) var(--md, 16px);
    display: flex;
    flex-direction: row;
    gap: var(--s, 8px);
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.tooltip .tooltip-background.light .tooltip-title {
    color: var(--main-tertiary-500);
}

.tooltip .tooltip-background.light .tooltip-text {
    color: var(--main-tertiary-400);
}

.tooltip .icon-alert-circle {
    color: #fff;
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -3px;
}

.tooltip .tooltip-background.light .icon-alert-circle {
    color: #29323F;
}

.tooltip .tri1 {
    display: none;
}

.tooltip .icon-triangle-right-dark {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 7.5px 13px 7.5px;
    border-color: transparent transparent var(--main-tertiary-500) transparent;
    transform: rotate(90deg);
    margin-left: -3px;
}

.tooltip .icon-triangle-right-light {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 7.5px 13px 7.5px;
    border-color: transparent transparent var(--white-pure) transparent;
    transform: rotate(90deg);
    margin-left: -3px;
}

.tooltip .icon-triangle-left-dark {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 7.5px 13px 7.5px;
    border-color: transparent transparent var(--main-tertiary-500) transparent;
    transform: rotate(270deg);
    margin-right: -3px;
}

.tooltip .icon-triangle-left-light {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 7.5px 13px 7.5px;
    border-color: transparent transparent var(--white-pure) transparent;
    transform: rotate(270deg);
    margin-right: -3px;
}

.tooltip .icon-triangle-bottom-dark {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 7.5px 13px 7.5px;
    border-color: transparent transparent var(--main-tertiary-500) transparent;
    transform: rotate(180deg);
    margin-bottom: -3px;
}

.tooltip .icon-triangle-bottom-light {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 7.5px 13px 7.5px;
    border-color: transparent transparent var(--white-pure) transparent;
    transform: rotate(180deg);
    margin-bottom: -3px;
}

.tooltip .icon-triangle-top-dark {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 7.5px 13px 7.5px;
    border-color: transparent transparent var(--main-tertiary-500) transparent;
    transform: rotate(0deg);
    margin-top: -3px;
}

.tooltip .icon-triangle-top-light {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 7.5px 13px 7.5px;
    border-color: transparent transparent var(--white-pure) transparent;
    transform: rotate(0deg);
    margin-top: -3px;
}

/*
===== CONTROL: INPUT TIME PICKER =========
*/

.input-time-picker,
.input-time-picker * {
    box-sizing: border-box;
}

.input-time-picker {
    background: var(--white-pure, #ffffff);
    border-radius: 0.25rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    box-shadow: var(--dropdown-box-shadow,
            -0.625rem 0rem 0.625rem 0rem rgba(0, 0, 0, 0.04),
            0.625rem 0rem 0.625rem 0rem rgba(0, 0, 0, 0.04),
            0rem 1.625rem 1.875rem 0rem rgba(0, 0, 0, 0.08));
}

.input-time-picker .heading {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.icon-clock-3 {
    flex-shrink: 0;
    position: relative;
    overflow: visible;
    color: var(--main-tertiary-400, #748fa4);
}

.input-time-picker .title {
    color: var(--main-tertiary-400, #748fa4);
    text-align: left;
    font: var(--caption, 400 0.75rem/1rem 'Figtree', sans-serif);
    position: relative;
}

.input-time-picker .wrapper-inputs {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.input-time-picker .wrapper-input-hour {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.input-time-picker .input-field {
    background: var(--main-tertiary-50, #f8fafb);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: row;
    gap: 0rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 5.5rem;
    height: 5rem;
    position: relative;
}

.input-time-picker .input-field:disabled {
    background-color: #EFF3F6;
}

.input-time-picker .input-field:disabled .hour-hint-text {
    color: #9DB5C8;
}

.input-time-picker .input-field:hover {
    background-color: #EBF5FF;
}

.input-time-picker .input-field:hover .hour-hint-text {
    color: #339DFF;
}

.input-time-picker .input-field:active,
.input-time-picker .input-field:focus {
    border-color: #339DFF;
    border-width: 2px;
    border-style: solid;
}

.input-time-picker .hour-hint {
    text-align: center;
    font-size: 24px;
    color: #1D242D;
    font-family: 'Helvetica', 'Arial', sans-serif;
}

.input-time-picker .hour-hint-text {
    color: var(--alias-main-text, #1d242d);
    text-align: center;
    font: var(--h-1, 400 2rem/2.25rem 'Figtree', sans-serif);
    position: relative;
    align-self: stretch;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-time-picker .label {
    color: var(--alias-main-text, #1d242d);
    text-align: left;
    font: var(--caption, 400 0.75rem/1rem 'Figtree', sans-serif);
    position: relative;
}

.input-time-picker .hour-hint-text2 {
    color: var(--alias-main-text, #1d242d);
    text-align: center;
    font: var(--h-1, 400 2rem/2.25rem 'Figtree', sans-serif);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-time-picker .wrapper-input-minute {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.input-time-picker .wrapper-icon {
    display: flex;
    flex-direction: row;
    gap: 0rem;
    align-items: center;
    justify-content: flex-end;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.input-time-picker .right-side {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.input-time-picker .button-secondary {
    background: var(--complementary-red-50, #ffefef);
    border-radius: 0.5rem;
    padding: 0rem var(--md, 1rem) 0rem var(--md, 1rem);
    display: flex;
    flex-direction: row;
    gap: 0rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: var(--lg-3, 2.5rem);
    position: relative;
    overflow: hidden;
}

.ellipse-3 {
    flex-shrink: 0;
    position: absolute;
    left: calc(50% - 0rem);
    top: calc(50% - 0rem);
    overflow: visible;
}

.input-time-picker .label2 {
    color: var(--complementary-red-500, #ff5e61);
    text-align: left;
    font: var(--b-3, 400 0.875rem/1.125rem 'Figtree', sans-serif);
    position: relative;
}

.input-time-picker .button-primary {
    background: var(--main-primary-500, #339dff);
    border-radius: 0.5rem;
    padding: 0rem var(--md, 1rem) 0rem var(--md, 1rem);
    display: flex;
    flex-direction: row;
    gap: 0rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: var(--lg-3, 2.5rem);
    position: relative;
    overflow: hidden;
}

.ellipse-32 {
    flex-shrink: 0;
    position: absolute;
    left: calc(50% - 0rem);
    top: calc(50% - 0rem);
    overflow: visible;
}

.input-time-picker .label3 {
    color: var(--white-pure, #ffffff);
    text-align: left;
    font: var(--b-3, 400 0.875rem/1.125rem 'Figtree', sans-serif);
    position: relative;
}



/*
===== CONTROL: badge-usercount=========
*/
.badge-usercount,
.badge-usercount * {
    box-sizing: border-box;
}

.badge-usercount {
    display: flex;
    flex-direction: column;
    gap: 0rem;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 30px;
}

.badge-usercount-number-count {
    color: var(--main-tertiary-400, #748fa4);
    font: var(--b-3, 400 0.875rem/1rem 'Figtree', sans-serif);
    position: relative;
    align-self: stretch;
    text-align: center;
}

/* variant styles */
.badge-usercount-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    position: relative;
    overflow: hidden;
}

/*
===== CONTROL: INPUT MULTILINE =========
*/
.input.multiline .input-field .input-field-default {
    height: initial;
    padding-left: 0;
    padding-right: 0;
}

.input.multiline textarea {
    border: 0;
    min-height: 40px;
    min-width: 100%;
    outline: 0;
}

.page.activity .input.multiline textarea {
    height: 15vh;
    width: 25vw;

}

/*
===== CONTROL: REPETITION DEFINITION =========
*/

.repetition-definition {
    gap: 1rem;
}

.repetition-definition .repetition-section {
    padding: 1rem;
    border: 1px solid var(--main-tertiary-200);
    border-radius: 1rem;
    gap: 0.5rem;
}

.repetition-definition .repetition-section .repetition-section-title {
    font: var(--text-style-b2);
    color: var(--alias-main-text);
    height: 2.5rem;
    width: 80%;
    gap: 1rem;
}

.repetition-definition .repetition-section .repetition-section-title .horizontal-bar {
    width: 100%;
    height: 2px;
    background-color: var(--main-neutral-50);
}

.repetition-definition .repetition-common-quantity input {
    width: 2rem;
    text-align: center;
}

.repetition-definition .repetition-time-quantity input {
    width: 6rem;
    text-align: center;
}

.repetition-definition .error {
    color: var(--semantic-error-500);
    font: var(--text-style-b3-regular);
}

/* ============= CALENDAR LEGEND */

.nav-header.layout.horizontal.gap>.main.layout.horizontal.gap {
    flex: 1 1 auto;
    min-width: 0;
}


.calLegend {
    display: flex;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
}

.calLegend .legend.color {
    width: 12px;
    height: 12px;
}

.calLegend .legend.text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}




.calLegend>.calendar-legend-control {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}


.calLegend .legend.color.zone-visit {
    background: var(--main-primary-50);
    border: 1px solid var(--main-primary-200);
}

.calLegend .legend.color.zone-televisit {
    background: var(--main-secondary-50);
    border: 1px solid var(--main-secondary-200);
}

.calLegend .legend.color.zone-blocked {
    background: var(--main-tertiary-200);
}

.calLegend .legend.color.zone-both,
.calLegend .legend.color.zone-both2 {
    background: var(--main-secondary-50);
    background: linear-gradient(45deg, var(--main-secondary-50) 50%, var(--main-primary-50) 50%);
    border: 1px solid var(--main-secondary-200);
}


.calLegend .legend.color.zone-forbidden {
    border: 1px solid var(--main-tertiary-300);
}

.calLegend .legend.color.zone-televisit {
    background: var(--main-secondary-50);
    border: 1px solid var(--main-secondary-200);
}

.calLegend .legend.color.appoint-visit {
    background: #339DFF;
}

.calLegend .legend.color.appoint-televisit {
    background: #8074FB;
}

.calLegend .legend.color.appoint-other {
    background: var(--main-tertiary-400);
}

.calLegend .legend.abs-holiday {
    background: var(--semantic-correct-600);
    border-radius: 50%;
}

.calLegend .legend.abs-sick {
    background: var(--main-primary-500);
    border-radius: 50%;
}

.calLegend .legend.abs-personal {
    background: var(--complementary-orange-700);
    border-radius: 50%;
}

.calLegend .legend.abs-training {
    background: var(--main-secondary-500);
    border-radius: 50%;
}

.calLegend .legend.abs-other {
    background: var(--semantic-warning-500);
    border-radius: 50%;
}

/* ============= BOTTON SCREEN HELP */
#screen-help {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 1s ease-out;
    padding-top: 0;
    padding-bottom: 0;

}

#screen-help.show {
    max-width: 100vw;
    /* Adjust this according to the maximum width you need */
    transition: max-width 1s ease-in;
}

/*========/ Caregiver /========*/
.caregiver-box {
    position: fixed;
    right: 1%;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 740px;
    display: none;
    z-index: 9999;
}

/*========/ Notification /========*/
.notification-box {
    position: fixed;
    right: 8px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid var(--main-tertiary-200);
    border-radius: 12px;
    width: 740px;
    display: none;
    z-index: 9999;
    box-shadow: 0px 0px 2px 0px rgba(145, 158, 171, 0.24), 0px 16px 32px -4px rgba(145, 158, 171, 0.24);
}

.notification-box.page-header.layout.horizontal.right {
    padding: 0px;
}

.notification-container {
    width: 100%;
    margin: 2px;
}

.notification-head {
    padding: 5px 10px 5px 10px;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.notification-text-title {
    font-size: 14px;
    font-weight: 500;
}

.notification-icon-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    color: var(--main-primary-400);
}

.notification-icon-title.red {
    color: var(--complementary-red-400);
}

.notification-container.icon-red {
    color: var(--complementary-red-400);
}

.notification-item {
    width: 100%;
    padding: 12px 16px 12px 12px;
    gap: 8px;
    border-radius: 12px;
    opacity: 0px;
    cursor: pointer !important;
}

.notification-item.no-read {
    background-color: var(--main-primary-50);
}

.notification-item.read {
    background-color: var(--white-pure);
}

.notification-container:hover .notification-item {
    width: 95%;
    background: var(--main-tertiary-50, #F8FAFB);
}

.notification-container.no-hover:hover .notification-item {
    width: 100%;
}

.notification-trash {
    display: none;
}

.notification-scaling {
    color: var(--main-tertiary-300);
    border: none;
}

.notification-container.no-hover:hover .notification-trash {
    display: none;
}

.notification-container:hover .notification-trash {
    width: 5%;
    display: flex;
    align-items: center;
}

.notification-icon-read-unread {
    display: none;
}

.notification-container:hover .notification-icon-read-unread {
    display: flex;
}

.notification-item.no-read .notification-icon-read-unread {
    color: var(--Main-primary-500, #339DFF);
}

.notification-item.read .notification-icon-read-unread {
    color: var(--main-tertiary-300);
}

.notification-item.no-read .notification-icon-read-unread {
    color: var(--Main-primary-500, #339DFF);
}

.notification-view {
    text-wrap: nowrap;
    padding-bottom: 16px;

}

#popup-notification-show .notification-view {
    width: 700px;
}

.notification-view .input {
    max-width: 230px;
}

.notification-view .text-link {
    text-wrap: wrap;
}

.notification-detail {
    width: 670px;
    padding: 0px 10px 0px 30px;
    gap: 0px;
    border-radius: 12px 0px 0px 0px;
    opacity: 0px;
    text-wrap: nowrap;

}

.notification-detail .chip-appointment {
    gap: 0;
    padding: 0;
    text-wrap: nowrap;
    mix-blend-mode: multiply;
}

.notification-page .notification-detail {
    width: 100%;
}

.notification-detail :first-child {
    flex-wrap: wrap;
}

.notification-detail :first-child:first-child {
    text-wrap: wrap;
}

.notification-detail .chip-visits {
    height: fit-content;
}

.notification-detail .badge-jobtitle.text {
    margin-right: 8px;
}

.bubble-notify {
    width: 8px;
    height: 8px;
    top: -6px;
    left: -10px;
    background: var(--Main-primary-500, #339DFF);
    display: flex;
    position: relative;
    border-radius: 50%;
    margin-right: -8px;
}

.notification-count-display-0 {
    display: none;
}

.notification-page {
    min-width: 40vw;
}

.notification-no-data-0 {
    padding-top: 50px;
    display: flex;
}


/* ============= AUDIO PLAYER */

.audio-player {
    border: 1px solid var(--main-tertiary-300, #9db5c8);
    border-radius: 50px;
    padding: 12px 16px 12px 12px;
    width: 100%;
}

.audio-player #play-pause {
    background-color: var(--main-primary-500);
    padding: 12px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: var(--white-pure);
    font-size: 16px;
    cursor: pointer;
}

.audio-player input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    cursor: pointer;
    outline: none;
    border-radius: 4px;
    overflow: hidden;
    height: 4px;
    background: var(--main-primary-100);
}

/* Thumb: webkit */
.audio-player input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    width: 1px;
    background-color: var(--main-primary-500);
    border: none;

    box-shadow: -4000px 0 0 4000px var(--main-primary-500);
}

/* Thumb: Firefox */
.audio-player input[type="range"]::-moz-range-thumb {
    height: 4px;
    width: 1px;
    background-color: var(--main-primary-500);
    border: none;

    box-shadow: -4000px 0 0 4000px var(--main-primary-500);
}

.audio-player .time-stamps {
    font: var(--text-style-b3-regular) 400 14px;
}

.slim-checkbox .input.checkbox {
    width: 40px;
}

/*==== NEXTSUS CONTEXT MENU ====*/
/*==============================*/
/*==============================*/
.nextsus-context-menu-wall {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 20000;
}

.nextsus-context-menu {
    position: fixed;
    padding: var(--separador-main);
    background: var(--white-pure);
    opacity: 1;
    transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
    transform: scaleY(1);
    border: 1px solid var(--main-tertiary-200);
    border-radius: 12px;
    z-index: 20001;
}

.nextsus-context-menu.from-top {
    transform-origin: top;
}

.nextsus-context-menu.from-bottom {
    transform-origin: bottom;
}

.nextsus-context-menu button {
    border: 0;
    width: 32px;
    padding: 0px 5px;
    width: 100%;
    justify-content: flex-start;
}

.nextsus-context-menu.hidding {
    opacity: 0.2;
    transform: scaleY(0.7);
}

#nodata-notification {
    padding: 24px;
}

#nodata,
.nodata {
    height: 100%;
}

.nodata-title {
    line-height: 20px;
    font-size: 18px;
    font-weight: 500;
    color: var(--alias-main-text);
}

.nodata-description {
    font: var(--text-style-b2-regular);
}



/*======== NEXTSUS HELP ========*/
/*==============================*/
/*==============================*/
.nextsus-help-content {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 20000;
}

.nextsus-help {
    padding: 16px 24px 24px;
    background: var(--white-pure);
    opacity: 1;
    transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
    transform: scaleY(1);
    min-width: 25%;
    border-radius: 12px;
}

.nextsus-help .helpinfo {
    border: 1px solid transparent;
    overflow: hidden;
    border-radius: 0px;
}

.nextsus-help.hidding {
    opacity: 0.2;
    transform: scaleY(0.7);
}

.nextsus-dialog .helpinfo {
    border: 1px solid transparent;
    overflow: hidden;
    border-radius: 12px;
    height: 100%;
}

.nextsus-dialog.popup-help {
    height: 100%;
    max-height: 90% !important;
}


/*======== LIST ========*/
/*==============================*/
/*==============================*/


.list .list-row {
    padding: 8px 8px 0px 8px;
    position: relative;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.list .list-full-row:not([ischild="true"]) {
    border-top: 1px solid var(--main-tertiary-200);

}

.list .list-full-row:first-child {
    border-top: 0;
}

.list .list-full-row[isparent="true"] .action-icon i {
    color: var(--main-tertiary-400);
    border-radius: 50%;
    background-color: var(--main-tertiary-100);
    transition: transform 0.2s ease-out;
    font-size: 16px;
    margin-top: 8px;
    position: relative;
    z-index: 5;
}



.list .list-full-row:not([isparent="true"]) {
    
    
    
    
    
    
    

    .action-icon {
        display: none;
    }

    .main-info .main-info-block {
        width: 90%;
        gap: 0px;
    }

    .data-wrapper {
        margin-left: 0px;
    }
}

.list .list-full-row.expanded .list-row::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 60%;
    width: 1px;
    height: calc(var(--child-height, 0px));
    background-color: var(--main-primary-200);
    z-index: 1;
}

.list .list-full-row.show[ischild="true"] {
    border-top: 1px dashed var(--main-tertiary-200);
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    margin-left: 32px;

    .main-info,
    .data-wrapper,
    .main-status {
        opacity: 50%;
    }
}

.list .list-full-row[ischild="true"]:not(.show) {
    max-height: 0;
    opacity: 0;
    display: none;
}

.list .list-row .status-and-actions {
    flex-direction: row;
    justify-content: flex-end;
    gap: 8px;

    .actions-ellipsis {
        display: none;
    }
}

.list .list-full-row.expanded {
    .action-icon>i {
        transform: rotate(-90deg);
    }

    .custom-child {
        opacity: 100;
        padding: 16px;
        border-top: 1px dashed var(--main-tertiary-200);
    }
}

.list .list-full-row.collapsed[withcustomchild="true"] .custom-child {
    opacity: 0;
    height: 0;
    max-height: 0;
}

.list .list-full-row[withcustomchild="false"] .custom-child {
    display: none;
}

.list .list-full-row[withcustomchild="true"] .custom-child {
    margin-left: 32px;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.list .list-row .main-info {
    padding: 4px 0;

    .label {
        font: var(--text-style-b3-bold);
        text-wrap: wrap;
    }
}

.list .list-row .data-wrapper {
    flex-wrap: wrap;
}

.list .list-row .data-wrapper div {
    display: flex;
}

.list .list-row .data-block {
    flex-wrap: wrap;
    border-radius: 12px;
    background-color: var(--main-tertiary-50);
    padding: 8px;
    gap: 4px;
    height: fit-content;

    span {
        justify-content: space-between;
    }

    .label {
        font: var(--text-style-b3-bold);
        line-height: 18px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .data-block-content {
        font: var(--text-style-b3);
        line-height: 20px;
    }

    .data-block-content>div {
        flex-wrap: wrap;
    }

}

.list .list-row .data-block.full-width-data-block {
    min-width: 100%;
}

.list .list-row .data-block.no-content {
    max-width: 100%;
}

.list .list-row .data-block.no-content {
    min-width: 60px;
}

.list .list-row .data-block.no-status .badge-status {
    display: none;
}

.list .list-row .data-block.no-status .data-block-content .badge-status {
    display: flex;
}

.template-cell {
    padding-bottom: 2%;
}

/*======== TABS ========*/
/*==============================*/
/*==============================*/

.tabs-header {
    display: flex;
    padding: 4px;
    gap: 4px;
    background-color: var(--main-tertiary-100);
    border-radius: 12px;
    margin-bottom: 8px;
}

.tabs-header-tab {
    display: flex;
    flex: 1;
    height: 32px;
    justify-content: center;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    border-radius: 8px;
    cursor: pointer;
    font-style: var(--text-style-b3-regular);
    color: var(--main-tertiary-400);
    line-height: 14px;
}

.tabs-header-tab>div {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selected.tabs-header-tab {
    background-color: var(--white-pure);
    font-style: var(--b-3);
    color: var(--Alias-main-text);
}

.selected.tabs-header-tab icon {
    color: var(--main-primary-500);
}

.tabs-header-tab:hover {
    background-color: var(--white-pure);
    font-style: var(--text-style-b3-bold);
    color: var(--Alias-main-text);
}

.tabs-header-tab:hover icon {
    color: var(--main-primary-500);
}

.tabs-content-tab {
    display: none;
}

.selected.tabs-content-tab {
    display: inline;
}

.tabs-header-tab-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.desktop .tabs-header-tab-selector {
    display: none;
}

.tablet .tabs.no-collapse .tabs-header-tab-selector {
    display: none;
}

.tablet .tabs.collapse-on-mobile .tabs-header-tab-selector {
    display: none;
}

.tablet .tabs.collapse-on-handheld .tabs-header-tab.not-selected {
    display: none;
}

.mobile .tabs.no-collapse .tabs-header-tab-selector {
    display: none;
}

.mobile .tabs:not(.no-collapse) .tabs-header-tab.not-selected {
    display: none;
}

/*
===== CONTROL: CHIP ABSENCE =========
*/
.chip.chip-absence {
    border-radius: 24px;
    font: var(--text-style-b3-regular);
    min-height: 24px;
    background-color: var(--white-pure);

    .chip-absence-text,
    i {
        font: var(--text-style-b3);
    }

}

.day-cell .chip.chip-absence {
    background-color: var(--white-pure);
}

.chip.chip-absence.entire-day .hour-range {
    display: none;
}

.chip.chip-absence.same-day .endDate {
    display: none;
}

.chip.chip-absence[type="Holiday"] {
    color: var(--semantic-correct-800);
}

.chip.chip-absence.entire-day[type="Holiday"] {
    background-color: var(--semantic-correct-50);
}

.chip.chip-absence:not(.entire-day)[type="Holiday"] {
    border: 1px solid var(--semantic-correct-800);
    background-color: var(--white-pure);
}

.chip.chip-absence[type="Sick"] {
    color: var(--main-primary-700);
}

.chip.chip-absence.entire-day[type="Sick"] {
    background-color: var(--main-primary-50);
}

.chip.chip-absence:not(.entire-day)[type="Sick"] {
    border: 1px solid var(--main-primary-700);
    background-color: var(--white-pure);
}

.chip.chip-absence[type="Personal"] {
    color: var(--complementary-orange-700);
}

.chip.chip-absence.entire-day[type="Personal"] {
    background-color: var(--complementary-orange-50);
}

.chip.chip-absence:not(.entire-day)[type="Personal"] {
    border: 1px solid var(--complementary-orange-700);
    background-color: var(--white-pure);
}

.chip.chip-absence[type="Training"] {
    color: var(--main-secondary-700);
}

.chip.chip-absence.entire-day[type="Training"] {
    background-color: var(--main-secondary-50);
}

.chip.chip-absence:not(.entire-day)[type="Training"] {
    border: 1px solid var(--main-secondary-700);
    background-color: var(--white-pure);
}

.chip.chip-absence[type="Other"] {
    color: var(--semantic-warning-900);
}

.chip.chip-absence.entire-day[type="Other"] {
    background-color: var(--semantic-warning-100);
}

.chip.chip-absence:not(.entire-day)[type="Other"] {
    border: 1px solid var(--semantic-warning-900);
    background-color: var(--white-pure);
}

/*===== CONTROL: VIDEOCALL =========*/
.videocall {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0px 24px 48px 0px #919EAB3D;
    position: absolute;
    z-index: 999;
}

.videocall.no-fullscreen {
    width: min(50vh, 50vw);
    height: auto;
    min-width: 80px;
    aspect-ratio: 1/1;
}

.videocall video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.videocall .participants {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 4px;
    background-color: var(--main-tertiary-500);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.videocall .participants .participant {
    cursor: pointer;
}

.videocall .participants .full-participants {
    gap: 4px;
}

.videocall .participants .full-participants .participant {
    width: var(--participant-width);
    height: var(--participant-height);
    position: relative;
    border-radius: 8px;
    background: rgba(248, 250, 251, 0.1);
}

.videocall .participants .chip {
    position: absolute;
    left: 0;
    top: calc(100% - 25px);
    color: white;
    background: rgba(37, 46, 57, 0.6);
    mix-blend-mode: normal;
    margin-left: 4px;
    margin-right: 4px;
    border-radius: 8px;
    max-width: -webkit-fill-available;
}

.videocall .chip#videocall-timer {
    position: absolute;
    right: 10px;
    top: 8px;
    z-index: 99;
    color: white;
    border-radius: 8px;
    mix-blend-mode: normal;
    background-color: rgba(37, 46, 57, 0.6);
    width: fit-content;
}

.videocall .participant:not(.no-video) img {
    display: none;
}

.videocall .participant.no-video {
    img {
        width: auto;
        height: auto;
        aspect-ratio: 1/1;
        border-radius: 50%;
        max-height: 50%;
        max-width: 50%;
    }

    video {
        display: none;
    }

}

.videocall .participants .chip .chip-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.videocall .participants .collapsed-participants {
    padding: 4px;
    background-color: var(--main-tertiary-900);
    border-radius: 8px;
}

.videocall .participants .collapsed-participants .participant {
    position: relative;
    border-radius: 8px;
    background: #414448;
    aspect-ratio: 1/1;
}

.videocall .participants .own-video {
    width: 15%;
    height: auto;
    max-width: 200px;
    max-height: 200px;
    aspect-ratio: 1/1;
    border-radius: 8px;
    background: #545b65;
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 3;
}

.videocall .buttons-footer {
    width: 100%;
    padding: 4px 8px 8px 8px;
    background-color: var(--main-tertiary-500);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    position: relative;
}

.videocall .buttons-footer .resize-handle {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 10;
    cursor: nwse-resize;
}

.videocall .button {
    color: var(--white-pure);
    background-color: var(--main-neutral-700);
}

.videocall .button.end-call {
    background-color: var(--complementary-red-500);
}

.videocall.muted .button.mute,
.videocall.no-video .button.video-off {
    background-color: var(--main-neutral-500);
}

.videocall .ellipse {
    width: auto;
    height: min(50%, 50vw);
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--main-primary-100, #c0e1ff);
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.videocall .layout.min-gap {
    gap: 4px;
}

.videocall ::-webkit-scrollbar {
    width: 4px;
    background: var(--main-tertiary-500);
    border-radius: 8px;
}

.videocall ::-webkit-scrollbar-thumb {
    background-color: var(--main-primary-500);
    border-radius: 8px;
}

.videocall ::-webkit-scrollbar-track {
    background: var(--main-tertiary-500);
}

.videocall .layout.horizontal ::-webkit-scrollbar,
.videocall .layout.horizontal ::-webkit-scrollbar-track,
.videocall .layout.horizontal ::-webkit-scrollbar-thumb {
    height: 4px;
    border-radius: 8px;
}

.videocall .collapsed-participants.vertical {
    width: 15%;
    max-width: 200px;
    max-height: var(--videocall-thumbnail);
}

.videocall .collapsed-participants.horizontal {
    height: 15%;
    max-height: 200px;
    max-width: var(--videocall-thumbnail);
}

.videocall .participants .collapsed-participants .layout.vertical.participants-list {
    height: 100%;
}

.videocall .participants .collapsed-participants .layout.vertical.participants-list .participant {
    width: 100%;
    max-width: 200px;
    height: auto;
}

.videocall .participants .collapsed-participants .layout.vertical.participants-list:has(::-webkit-scrollbar) {
    padding-right: 4px;
}

.videocall .participants .collapsed-participants .layout.horizontal.participants-list {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.videocall .participants .collapsed-participants .layout.horizontal.participants-list .participant {
    height: 100%;
    max-height: 200px;
    width: auto;
}

.videocall .participants .collapsed-participants .layout.horizontal.participants-list:has(::-webkit-scrollbar) {
    padding-bottom: 4px;
}

.videocall.no-collapsed .collapsed-participants {
    display: none;
}

.videocall:not(.alone) .card-user-videocall {
    display: none;
}

.videocall.alone .participant {
    display: none;
}

.videocall.small .participants .collapsed-participants {
    display: none;
}

.videocall.small .buttons-footer .button {
    display: none;
}

.videocall.no-video .own-video,
.videocall.small .own-video {
    display: none;
}

.videocall.no-video .collapsed-participants.vertical {
    max-height: 100%;
}

.videocall.no-video .collapsed-participants.horizontal {
    max-width: 100%;
}

.videocall #idwaitsta {
    color: var(--white-pure);
}