/*MODO CLARO*/
:root {
    --bg-body: #F4F5FA;
    --bg-panel: #fff;
    --bg-btn: #33454A;
    --bg-border: #dee2e6;
    --bg-hr: #18A597;
    --bg-nav: #06465d;
    --panel-title: #344767;
    --bg-label: #221f1f;
    --letter: #000000;
    --bg-nav-dropdown: #06465d;
    
}
/*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: 1px solid #0260a9 !important;
}

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

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

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

    .dropdown-item:hover {
        height: 100%;
        display: block;
        background: #085f7e;
    }

.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: #06465d;
    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: #06465d !important;
        color: #ffffff !important;
    }

    body button:active {
        background-color: #221f1f !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: #00E7B2 !important;
        color: #ffffff !important;
    }

    a.btn:active {
        background-color: #18A597 !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: 22px !important;
    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%;
}
/*Responsive celultar*/
@media only screen and (min-width: 320px) and (max-width:480px) {
    .title-panel {
        justify-content: center !important;
        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;
}
/*-----------------------------------------------*/