/* Minification failed. Returning unminified contents.
(3,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(36,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(39,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(42,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(46,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(47,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(48,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(49,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(51,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(54,1): run-time error CSS1019: Unexpected token, found '}'
(60,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(61,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(62,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(63,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(64,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(65,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(66,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(67,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(68,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(69,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(73,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-body'
(76,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-panel'
(79,17): run-time error CSS1039: Token not allowed after unary operator: '-letter'
(82,17): run-time error CSS1039: Token not allowed after unary operator: '-letter'
(86,17): run-time error CSS1039: Token not allowed after unary operator: '-letter'
(90,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-panel'
(91,17): run-time error CSS1039: Token not allowed after unary operator: '-letter'
(95,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-body'
(96,17): run-time error CSS1039: Token not allowed after unary operator: '-letter'
(100,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-panel'
(104,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-label'
(108,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-nav'
(112,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-nav-dropdown'
(117,35): run-time error CSS1039: Token not allowed after unary operator: '-bg-border'
(256,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-btn'
(323,35): run-time error CSS1039: Token not allowed after unary operator: '-bg-panel'
(324,17): run-time error CSS1039: Token not allowed after unary operator: '-letter'
(329,32): run-time error CSS1039: Token not allowed after unary operator: '-bg-panel'
(330,21): run-time error CSS1039: Token not allowed after unary operator: '-letter'
(401,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-panel'
(405,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-panel'
(406,17): run-time error CSS1039: Token not allowed after unary operator: '-letter'
(412,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-panel'
(417,23): run-time error CSS1046: Expect comma, found '0'
(417,27): run-time error CSS1046: Expect comma, found '/'
(422,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-title'
 */
/*MODO CLARO*/
:root {
    --bg-body: #F4F5FA;
    --bg-panel: #fff;
    --bg-btn: #0F6CBD;
    --bg-border: #dee2e6;
    --bg-hr: #18A597;
    --bg-nav: #212529;
    --panel-title: #344767;
    --bg-label: #221f1f;
    --letter: #000000;
    --bg-nav-dropdown: #25292D;
    --font-family-Font-1: 'Segoe UI Symbol';
    /* Tipograf�as */
    --font-family-Font-1: 'Segoe UI Symbol';
    --filter-builder-label-typography-medium-font-family: "Segoe UI";
    --button-typography-default-medium-font-family: "Segoe UI";
    /* Tama�os de texto */
    --font-size-24: 24px;
    --item-spacing-s: 16px;
    --filter-builder-label-typography-small-font-size: 12px;
    --button-typography-default-medium-font-size: 14px;
    /* Line-height */
    --line-height-28_8: 28.8px;
    --accordion-collapse-button-icon-size-medium: 20px;
    --filter-builder-label-typography-medium-line-height: 20px;
    --button-typography-default-medium-line-height: 20px;
    --accordion-collapse-button-icon-size-small: 16px; /* a�adida por border-radius */
    /* Colores */
    --color-black-solid: #000;
    --button-color-contained-primary-normal-text: #FFFFFE;
    --button-color-contained-primary-normal-bg: #0F6CBD;
    --button-color-contained-primary-normal-border: rgba(255, 255, 254, 0.00);
    --color-white-solid: #FFF;
    --color-cyan-56: #6FA5B1;
    --color-azure-34: #0260A9;
    --filter-builder-label-color-text: #161616;
    /* Button Layout */
    --button-layout-inner-box-medium-vertical: 5px;
    --button-layout-inner-box-medium-horizontal: 12px;
    --button-layout-inner-box-medium-gap: 4px;
    --button-layout-inner-box-large-vertical: 4.321px;
    --button-layout-inner-box-large-horizontal: 9.878px;
    --button-layout-inner-box-large-gap: 1.235px;
    /* Border & Radius */
    --button-border-radius-medium: 4px;
    --button-border-width-medium: 1px;
    --button-border-radius-large: 2.469px;
    --button-border-width-large: 0.617px;
    /* Gradientes */
    --Degradado-2: linear-gradient(180deg, #FFF 31.25%, #6FA5B1 100%);
}

}
/*MODO OSCURO*/
[tema="light"] {
    /*    --bg-body: #1e1e2f;
    --bg-nav: #1e1e2f;
    --bg-panel: #27293d;*/
    --bg-body: #181818;
    --bg-nav: #181818;
    --bg-panel: #212121FA;
    --bg-btn: #781DC9;
    --bg-border: #781DC9;
    --bg-hr: #781DC9;
    --panel-title: #fff;
    --bg-label: #781DC9;
    --letter: #fff;
    --bg-nav-dropdown: #1C1C1C;
}
/*-------------------------------*/
body {
    background-color: var(--bg-body) !important;
}
.bg-light{
    background-color: var(--bg-panel) !important;
}
h5, h4, h3, h1 {
    color: var(--letter) !important;
}
li {
    color: var(--letter) !important;
}

.text-dark {
    color: var(--letter) !important;
}

.accordion {
    background-color: var(--bg-panel);
    color: var(--letter) !important;
}

.accordion-item {
    background-color: var(--bg-body);
    color: var(--letter) !important;
}

.modal-content {
    background-color: var(--bg-panel);
}

#lblEdad {
    color: var(--bg-label);
}

.bg-dark {
    background-color: var(--bg-nav) !important;
}

.bg-dark-dropdown {
    background-color: var(--bg-nav-dropdown) !important;
}

nav {
    background-color: #E7E7E7 !important;
    border-bottom: solid 1px var(--bg-border) !important;
}

.border-bottom {
    border-bottom: 0.5px solid #000 !important;
}

a.nav-link {
    color: #A5A5A5 !important;
}

    a.nav-link:hover {
        color: #004870 !important;
        background:white;
    }

.dropdown-item {
    font-family: 'Segoe UI Symbol' !important;
}

.dropdown-item:hover {
    height: 100%;
    display: block;
    font-weight:bold;
    background:none;
}

.rojo {
    color: #d71920 !important;
}

.blanco {
    color: #ffffff !important;
}

.bg_rojo {
    background: #d71920 !important;
}

.bg_turquesa {
    background: #0260a9 !important;
}

.dx-checkbox-icon {
    color: #18A597 !important;
}

.dx-checkbox-indeterminate .dx-checkbox-icon::before {
    background-color: #18A597 !important;
}

.dx-radiobutton-icon-dot {
    background: #d71920 !important;
}

.dx-fileuploader-wrapper {
    border: 1px solid #ddd;
    border-radius: 4px;
}

.dx-fileuploader-files-container {
    padding: 0px 3px !important;
}

.fa-check-circle {
    color: #212529 !important;
}

.fa-exclamation-circle {
    color: #212529 !important;
}

.fa-window-close {
    color: #212529 !important;
}

.Nom_form {
    /*background-color: var(--bg-label);*/
    background-color: #0260a9;
    color: #ffffff;
    text-align: center;
    line-height: 36px;
    border-radius: 4px;
}

.Nom_form_border {
    color: #773E90;
    text-align: center;
    line-height: 36px;
    border-radius: 4px;
    border-style: solid;
    border-width: 0.11rem;
    border-color: #00e7b2;
}

.input_fill {
    border-style: solid;
    border-width: 0.076rem;
    border-color: #6FA5B1;
    background-color: #f5f5f5;
}

.Bloque_Gris {
    background-color: #ebeaea;
    text-align: center;
}

.text-Aqua {
    color: #fff;
}

.Input_Button:hover {
    background-color: #00E7B2 !important;
    color: #ffffff !important;
}

body button {
    /*    background-color: var(--bg-btn) !important;
    color: #ffffff !important;*/
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    border: 2px solid #221f1f;
    color: #221f1f;
}

    body button:hover {
        background-color: #ffffff !important;
        color:  #003b80 !important;
        
    }

    body button:active {
        background-color: #ffffff !important;
        color: #ffffff !important;
    }

a.btn {
    background-color: var(--bg-btn) !important;
    color: #fff;
    border: 1px solid;
    border-color: #00e7b2;
}

    a.btn:hover {
        background-color: #0c5ca1 !important;
        color: #ffffff !important;
    }

    a.btn:active {
        background-color: #0a4362 !important;
        color: #ffffff !important;
    }

.btn:focus, .btn-toggle:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

.accordion-button:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

.AcordionOffcanvas {
    width: 100%;
    background-color: #ffffff !important;
    color: #33454a !important;
    text-align: center;
    border-bottom: 0.11rem solid #00e7b2;
    border-radius: 0px;
    font-size: 1.05rem;
    font-weight: 300;
}

li {
    font-size: 17px;
    font-weight: 300;
    color: #393564;
    padding-top: 1.54rem;
}

#TabManteCuestionarios {
    border: none !important;
}

    #TabManteCuestionarios .dx-item {
        border: none !important;
        background-color: white !important;
        color: black;
    }

    #TabManteCuestionarios .dx-tab-selected::after {
        border: none !important;
        border-bottom: 2px solid #773E90 !important;
    }

    #TabManteCuestionarios div[aria-selected="true"] {
        color: #773E90 !important;
        border-left-color: none !important;
        font-weight: bolder;
    }
/*Tabs*/
.dx-tabs {
    border: none !important;
    border-bottom: 1px solid var(--bg-panel) !important;
    color: var(--letter);
}

    .dx-tabs .dx-item {
        border: none !important;
        background-color: var(--bg-panel) !important;
        color: var(--letter);
    }

        .dx-tabs .dx-item:hover {
            background: #773E9010 !important;
        }

    .dx-tabs .dx-tab-selected::after {
        border: none !important;
        border-bottom: 2px solid #773E90 !important;
    }

    .dx-tabs div[aria-selected="true"] {
        color: #773E90 !important;
        border-left-color: none !important;
        font-weight: bolder;
    }
/*------------------------------------------------------------------*/
footer {
    height: 95px;
}

/*Sidebar Datos del paciente*/
@media screen and (min-width: 1024px) {
    .offCanvas_Tam {
        width: 40% !important;
    }
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .offCanvas_Tam {
        width: 70% !important;
    }
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
    .offCanvas_Tam {
        width: 100% !important;
    }
}

@media screen and (max-device-width: 640px) and (orientation: landscape) {
    .offCanvas_Tam {
        width: 100% !important;
    }
}

@media screen and (max-device-width: 640px) {
    .offCanvas_Tam {
        width: 100% !important;
    }
}

@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
    .offCanvas_Tam {
        width: 100% !important;
    }
}

@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
    .offCanvas_Tam {
        width: 100% !important;
    }
}

@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3) {
    .offCanvas_Tam {
        width: 100% !important;
    }
}
.offcanvas {
    background-color: var(--bg-panel);
}

.AcordionOffcanvas {
    background-color: var(--bg-panel) !important;
    color: var(--letter) !important;
}
/*-----------------------------------------------------------------------------------------------------------*/

/*Panel*/
.container-panel {
    background-color: var(--bg-panel) !important;
    padding: 18px 45px 9px 25px ;
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    border-radius: 5px 5px;
    box-shadow: rgb(0 0 0 / 10%) 0px 3.5px 5.5px;
    border-radius: 15px;
}

.container-title {
    color: var(--panel-title) !important;
}

.title-panel {
    width: 50%;
}

.btn-chat {
    background-color: #e5e5e5;
    padding: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.icon {
    color: #737373;
    font-size: 18px;
}

.img-chat {
    width: 50px;
    height: 50px;
    border-radius: 99px;
}

.name-chat {
    font-weight: bold;
}

.number-chat {
    font-weight: bold;
    color: darkgrey;
}

.conversation {
    height: 70vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
}

.header-conversation {
    width: 100%;
    background-color: #f5f5f5;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.messages-containter {
    height: 70vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    overflow-y: auto;
}

.message {
    max-width: 70%;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
    background-color: #f5f5f5;
}

    .message.left {
        align-self: flex-start;
        background-color: #f5f5f5;
    }

    .message.right {
        align-self: flex-end;
        background-color: #f5f5f5;
    }

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

.conversation::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    border-radius: 10px;
}

    .conversation::-webkit-scrollbar-thumb:hover {
        background-color: #aaaaaa;
    }

.chat {
    padding: 3px;
    border-radius: 10px;
    cursor: pointer;
}

    .chat:hover {
        background-color: #f5f5f5;
    }

.active-chat {
    background-color: #e5e5e5;
}
    /*Responsive celultar*/
    @media only screen and (min-width: 320px) and (max-width:480px) {
        .title-panel {
            position: relative !important;
            width: 100%;
        }

        .image-panel {
            justify-content: center !important;
        }
    }
    /*------------------------------------------------------------------------------*/
    /*switch-dark*/
    .switch-dark {
    margin: 0 10px 0 10px;
    width: 75px;
    height: 30px;
    position: relative;
    display: block;
    background: #ebebeb;
    border-radius: 200px;
    box-shadow: inset 0px 5px 15px rgba(0,0,0,0.4), inset 0px -5px 15px rgba(255,255,255,0.4);
    cursor: pointer;
}

    .switch-dark:after {
        content: "";
        width: 26px;
        height: 26px;
        position: absolute;
        top: 2px;
        left: 2px;
        background: linear-gradient(180deg,#ffcc89,#d8860b);
        border-radius: 180px;
        box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
    }

.chk-dark {
    width: 0;
    height: 0;
    visibility: hidden;
}

    .chk-dark:checked + .switch-dark {
        background: #242424;
    }

        .chk-dark:checked + .switch-dark:after {
            left: 72px;
            transform: translateX(-100%);
            background: linear-gradient(180deg,#777,#3a3a3a);
        }

.switch-dark, .switch-dark:after {
    transition: 0.9s
}

    .switch-dark:active:after {
        width: 52px;
    }

    .switch-dark i {
        position: absolute;
        width: 120px;
        top: 40px;
        z-index: 100;
    }

        .switch-dark i.sun {
            left: 40px;
            fill: #fff;
            transition: 0.3s;
        }

        .switch-dark i.moon {
            left: 340px;
            fill: #7e7e7e;
            transition: 0.3s;
        }

.chk-dark:checked + .switch-dark i.sun {
    fill: #7e7e7e;
}

chk-dark:checked + .switch-dark i.moon {
    fill: #fff;
}
/*--------------cambiar contra temporal---------------------------------*/

/* wrapper general para inputs con icono */
.input-wrapper {
    position: relative;
}

    /* espacio al input para que no tape el icono (ajustar si el input es DX) */
    .input-wrapper .dx-textbox input,
    .input-wrapper input {
        padding-right: 44px !important; /* espacio para icono a la derecha */
    }

    /* icono dentro del input (derecha, centrado vertical) */
    .input-wrapper .input-icon {
        position: absolute;
        right: 12px;
        top: 26%;
        transform: translateY(-50%);
        pointer-events: none; /* evitar que el icono interfiera en el click del input */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        opacity: 0.8;
    }

    /* si quer�s que el icono sea clickable (ej. ojo para mostrar contrase�a) */
    .input-wrapper .toggle-pass {
        pointer-events: auto; /* habilita click */
        cursor: pointer;
    }

    /* estilos para el ojo cuando se usa dentro del dxTextBox (peque�os ajustes visuales) */
    .input-wrapper .input-icon svg {
        width: 20px;
        height: 20px;
        display: block;
    }

/* opcional: que los DX textbox no sobresalgan */
.dx-textbox {
    width: 100%;
}


#popupNotificaciones .dx-popup-title .dx-toolbar-label {
    width: 100%;
    text-align: center !important;
}

svg.check {
    margin-top: -25%;
}