body.smart-style-3 {
    background: linear-gradient(#f8fafc 210px, #fff 200px) !important; /* #eee !important;*/
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    color: #333;
    font-size: .875rem;
}

    .smart-style-3 #ribbon {
        background: transparent;
    }

    .smart-style-3 #header {
        background: #0369a1;
    }

    .smart-style-3 .header-search > input[type=text] {
        border-color: #4b7dbc;
        background: #4b7dbc;
        color: white;
        box-shadow: none;
        height: 33px;
    }

        .smart-style-3 .header-search > input[type=text]::placeholder {
            color: white;
        }

    .smart-style-3 .header-search > button {
        color: white;
    }

    /* footer */
    .smart-style-3 .page-footer {
        background: url(../images/bg-blobs.svg) center center/cover no-repeat, linear-gradient(-303deg, #0369a1, #0284c7);
        border-top: 2px solid #f9ce61;
        color: #fff;
        height: 35px;
        padding-top: 10px;
        font-size: 11px;
    }

    .smart-style-3 nav > ul > li {
        border-bottom: none;
    }

    .smart-style-3.menu-on-top aside#left-panel {
        background-color: #f2f2f2;
        background-image: -moz-linear-gradient(top, #f9f9f9, #f2f2f2);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f2f2f2));
        background-image: -webkit-linear-gradient(top, #f9f9f9, #f2f2f2);
        background-image: -o-linear-gradient(top, #f9f9f9, #f2f2f2);
        background-image: linear-gradient(to bottom, #f9f9f9, #f2f2f2);
        -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07);
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07);
        border: none;
        border-bottom: 1px solid #e2e2e2;
        border-top: 1px solid #fff;
    }

    .smart-style-3.menu-on-top .menu-item-parent {
        font-size: 11px;
        font-weight: 600;
    }

    .smart-style-3.menu-on-top nav ul ul li a {
        font-size: 12px;
    }

    /*
    Breadcrumbs
*/
    .smart-style-3 #ribbon {
        padding-top: 0px;
        min-height: 30px;
    }

        .smart-style-3 #ribbon .container {
        }

        .smart-style-3 #ribbon .breadcrumb {
            padding-bottom: 0 !important;
        }

            .smart-style-3 #ribbon .breadcrumb li,
            .smart-style-3 #ribbon .breadcrumb li:last-child {
                color: #a9a9a9;
                font-size: 11px;
            }

    .smart-style-3 #content {
        padding-top: 0;
    }

        .smart-style-3 #content .container:first-child {
            min-height: 600px;
            padding: 0 13px !important;
            padding: 30px;
        }

    .smart-style-3 input:not([type]),
    .smart-style-3 input[type=color],
    .smart-style-3 input[type=email],
    .smart-style-3 input[type=number],
    .smart-style-3 input[type=password],
    .smart-style-3 input[type=tel],
    .smart-style-3 input[type=text],
    .smart-style-3 input[type=url],
    .smart-style-3 textarea {
        /*border-color: #bfbfbf;*/
        border-color: #d1d5db;
        border-radius: 0px !important;
    }

        .smart-style-3 input:not([type]):focus,
        .smart-style-3 input[type=color]:focus,
        .smart-style-3 input[type=email]:focus,
        .smart-style-3 input[type=number]:focus,
        .smart-style-3 input[type=password]:focus,
        .smart-style-3 input[type=tel]:focus,
        .smart-style-3 input[type=text]:focus,
        .smart-style-3 input[type=url]:focus,
        .smart-style-3 textarea:focus:not(.form-comentario) {
            border-color: #0284c7;
            background: #f1f5f9;
            box-shadow: 0 0 0 1px #0078d4 !important;
        }

    .form-control {
        padding: 6px 8px;
    }
    /**
        select
    */
    select.form-control {
        background: #eff1f3;
        background: -webkit-linear-gradient(top,#f7f8fa,#e7e9ec);
        background: linear-gradient(to bottom,#f7f8fa,#e7e9ec);
        box-shadow: 0 1px 0 rgba(255,255,255,.6) inset !important;
        border-radius: 0px !important;
        border: 1px solid #bfbfbf;
    }

    /** select2 */
    .select2-container .select2-choice, .select2-selection {
        border: 1px solid #bfbfbf;
        background: #eff1f3;
        background: -webkit-linear-gradient(top,#f7f8fa,#e7e9ec);
        background: linear-gradient(to bottom,#f7f8fa,#e7e9ec);
        box-shadow: 0 1px 0 rgba(255,255,255,.6) inset !important;
        border-radius: 0px !important;
    }

        .select2-container .select2-choice .select2-arrow, .select2-selection__arrow {
            background: #eff1f3;
            background: -webkit-linear-gradient(top,#f7f8fa,#e7e9ec);
            background: linear-gradient(to bottom,#f7f8fa,#e7e9ec);
            box-shadow: 0 1px 0 rgba(255,255,255,.6) inset !important;
            border-radius: 0px !important;
            border-left: none;
        }

    .select2-search {
        padding-top: 3px;
    }

    /* dropdown menu */
    .smart-style-3 .dropdown-menu {
        margin: 0;
        padding: 0;
        background: white;
        font-size: 12px;
        border-bottom: none;
    }
        /* Elimina efecto de dropdowns */
        /*.open > .dropdown-menu {
    -webkit-animation-duration: 0s !important;
    -moz-animation-duration: 0s !important;
    -o-animation-duration: 0s !important;
    animation-duration: 0s !important;
}*/
        .smart-style-3 .dropdown-menu > li > a {
            color: #333;
            line-height: 30px;
            padding: 3px 15px !important;
        }

        .smart-style-3 .dropdown-menu .divider {
            background-color: #ececec;
            margin: 0;
        }

        .smart-style-3 .dropdown-menu > .active > a, .smart-style-3 .dropdown-menu > .active > a:hover, .smart-style-3 .dropdown-menu > li > a:focus, .smart-style-3 .dropdown-menu > li > a:hover, .smart-style-3 .tt-suggestion.tt-is-under-cursor {
            background-color: #3175b0;
            color: #fff;
        }

    .form-actions {
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
    }

    .inbox-menu-lg li a {
        border-radius: 4px;
        margin-bottom: 4px;
        display: block;
        color: #1d1c1d;
        text-decoration: none;
        padding: 5px 10px 6px;
        line-height: 18px;
        border: 1px solid transparent;
    }

    .inbox-menu-lg li.active a {
        /*
        background-color: #1675bf;
        color: #fff;
        text-shadow: 0 1px 0 rgb(0 0 0 / 10%);
    */
        background-color: #ebf6fd;
        border: 1px solid #dcf0fb;
        color: #1675bf;
        padding: 3px 10px 4px;
        line-height: 22px;
        border: 1px solid transparent;
        font-weight: 700;
    }

    .inbox-menu-lg li:not(.active) a:hover {
        background-color: #ebf6fd;
        border: 1px solid #dcf0fb;
    }

    /*
    Alerts
*/
    .alert-success {
        border: 1px solid #8ac38b;
        border-left: 5px solid #8ac38b;
        background: #f8fff4;
    }

        .alert-success i {
            color: #8ac38b;
            font-size: 17px;
        }

    .alert-warning {
        border: 1px solid #f5d6a2;
        border-left: 5px solid #dfb56c;
        background: #fff8df;
    }

        .alert-warning i {
            color: #f5d6a2;
            font-size: 17px;
        }

    .alert-info {
        background: #dff2ff;
        border: 1px solid #bcdaea;
        border-left: 5px solid #51a0cc;
    }

    /*
    Tables
*/

    .table-striped > tbody > tr:nth-of-type(odd) {
        background-color: #f8f9fb;
    }



    /*
    Form Comentario
*/
    .form-comentario, .form-comentario:focus {
        background-color: #fdfdfd;
        border-radius: 3px !important;
        border: none;
        box-shadow: 0 1px 3px rgba(0,0,0,.33) !important;
        font-family: Helvetica Neue,Arial,Helvetica,sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        color: #333;
        display: block;
        width: 100%;
        padding: 6px 12px;
    }



    /* Evita que el calendario se oculte debajo de otros elementos */
    /* - modal popups tienen z-index 1050 asi que valor debe ser mayor cuando se usa en modal */
    .ui-datepicker {
        z-index: 2000 !important;
    }


    .fixed-header #main {
        margin-bottom: 70px !important;
    }

    /* Ajusta el alto de la barra navegacion */
    .menu-on-top aside#left-panel nav > ul > li > a {
        height: 65px;
    }

    /* Fix para mostrar caret en barra de navegacion (Font Awesome Pro 5) */
    .menu-on-top nav ul ul li:hover > a:after,
    .menu-on-top nav > ul ul > li a:after,
    .menu-on-top nav > ul ul > li a:hover:after,
    .menu-on-top nav > ul > li > a:after {
        font-family: "Font Awesome 5 Pro";
        font-weight: 600;
    }


    .select2-container .select2-choice .select2-arrow b,
    .select2-selection__arrow b,
    .select2-search:before {
        font-family: "Font Awesome 5 Pro";
    }

    label input[type=checkbox].checkbox + span:before, label input[type=radio].radiobox + span:before {
        font-family: "Font Awesome 5 Pro";
    }

    /* Botones con dropdown */
    .smart-style-3 .dropdown-menu > li > a {
        line-height: 23px;
        padding: 3px 15px !important;
    }

    /* Spinner */
    .ui-spinner-down:before, .ui-spinner-up:before {
        font-family: "Font Awesome 5 Pro";
    }

    /* Navigation */
    @media (max-width: 979px) {
        .menu-on-top aside#left-panel nav > ul > li > a > i {
            display: inline-block !important;
            width: 45px;
        }

        .smart-style-3.menu-on-top aside#left-panel nav > ul > li > a {
            border: unset !important;
            border-bottom: 1px dashed #ddd !important;
        }
    }

    /* Progress bar */
    .progress.progress-sm {
        height: 10px;
    }

    .progress .progress-bar {
        background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);
    }

        .progress .progress-bar.progress-success {
            background-color: #52a74d;
        }

        .progress .progress-bar.progress-info {
            background-color: #0e7e84;
        }

        .progress .progress-bar.progress-primary {
            background-color: #1a7abd;
        }

        .progress .progress-bar.progress-warning {
            background-color: #eeb933;
        }

        .progress .progress-bar.progress-danger {
            background-color: #af2c2c;
        }


    /* Autocomplete dropdown */
    .ui-autocomplete {
        z-index: 9999 !important;
    }

    /*
    Step by step
*/
    .bootstrapWizard li.active .step,
    .bootstrapWizard li.active.complete .step {
        background: #4eab33;
        background: -moz-linear-gradient(top, #4eab33 0%, #3a921c 100%);
        background: -webkit-linear-gradient(top, #4eab33 0%,#3a921c 100%);
        background: linear-gradient(to bottom, #4eab33 0%,#3a921c 100%);
        box-shadow: 0 0 0px 3px #ccc;
        border: 0px solid #eaeaea;
        padding: 5px 11px;
    }

    .bootstrapWizard li:before {
        border-top: 5px solid #eaeaea;
        top: 12px;
    }

    .bootstrapWizard li .step {
        color: #949494;
        border: 3px solid #eaeaea;
        background: #d6d6d6;
    }

    .bootstrapWizard li.current .step {
        padding: 10px 16px;
        color: #fff;
        border: 3px solid #eaeaea;
        background: #1d83c5;
        background: -moz-linear-gradient(top, #1d83c5 0%, #0e70b1 100%);
        background: -webkit-linear-gradient(top, #1d83c5 0%,#0e70b1 100%);
        background: linear-gradient(to bottom, #1d83c5 0%,#0e70b1 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d83c5', endColorstr='#0e70b1',GradientType=0 );
    }

    .bootstrapWizard li.step-danger .step {
        color: #fff;
        background: #dc6650;
        background: -moz-linear-gradient(top, #dc6650 0%, #c9543d 100%);
        background: -webkit-linear-gradient(top, #dc6650 0%,#c9543d 100%);
        background: linear-gradient(to bottom, #dc6650 0%,#c9543d 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dc6650', endColorstr='#c9543d',GradientType=0 );
    }

    .bootstrapWizard li.no-line:before {
        border-top: none;
    }

    /* header button */
    .smart-style-3 #logo-group span.btn-nav-top,
    .smart-style-3 .btn-header > :first-child > a {
        background-color: #DD7C37;
        background-image: -moz-linear-gradient(top,#dd7c37,#b9662b);
        background-image: -webkit-gradient(linear,0 0,0 100%,from(#b9662b),to(#b9662b));
        background-image: -webkit-linear-gradient(top,#dd7c37,#b9662b);
        background-image: -o-linear-gradient(top,#dd7c37,#b9662b);
        background-image: linear-gradient(to bottom,#dd7c37,#b9662b);
        color: #fff !important;
        border: 1px solid #f09d61 !important;
        text-shadow: #985813 0 -1px;
    }

    #logo-group span.btn-nav-top {
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        cursor: default !important;
        display: inline-block;
        font-weight: 700;
        height: 24px;
        width: 24px;
        padding: 2px;
        text-align: center;
        text-decoration: none !important;
        -moz-user-select: none;
        -webkit-user-select: none;
        border: 1px solid #bfbfbf;
        color: #c4bab6;
        font-size: 19px;
        margin: 10px 0 0;
        position: relative;
    }

    .smart-style-3 #logo-group span.btn-nav-top:active,
    .smart-style-3 #logo-group span.btn-nav-top:hover {
        -webkit-box-shadow: inset 1px 1px 0 #985813, inset -1px -1px 0 #985813;
        -moz-box-shadow: inset 1px 1px 0 #985813,inset -1px -1px 0 #985813;
        box-shadow: inset 1px 1px 0 #985813, inset -1px -1px 0 #985813;
        background-color: #dd7a35;
        background-image: -moz-linear-gradient(top,#dd7a35,#984a13);
        background-image: -webkit-gradient(linear,0 0,0 100%,from(#dd7a35),to(#984a13));
        background-image: -webkit-linear-gradient(top,#dd7a35,#984a13);
        background-image: -o-linear-gradient(top,#dd7a35,#984a13);
        background-image: linear-gradient(to bottom,#dd7a35,#984a13);
        cursor: pointer !important;
    }


    /* fecha de calendario icono */
    time.icon {
        width: 40px;
    }

        time.icon strong {
            background: #b12610;
        }



    /*
    Syncfusion Toasts
*/

    .e-toast-container .e-toast .e-toast-icon {
        color: white !important;
    }

    .e-toast-container .lgs-toast-success.e-toast {
        /*border-top: 4px solid #1b841d !important;*/
        border-radius: 7px !important;
        background: #539553 !important;
    }

    .e-toast-container .lgs-toast-error.e-toast {
        border-radius: 7px !important;
        background: #ba3333 !important;
    }

    .e-toast-container .lgs-toast-warning.e-toast {
        border-radius: 7px !important;
        background: #d9941b !important;
    }

        .e-toast-container .lgs-toast-success.e-toast .e-toast-message .e-toast-title,
        .e-toast-container .lgs-toast-error.e-toast .e-toast-message .e-toast-title,
        .e-toast-container .lgs-toast-warning.e-toast .e-toast-message .e-toast-title {
            color: white !important;
        }

        .e-toast-container .lgs-toast-success.e-toast .e-toast-message .e-toast-content,
        .e-toast-container .lgs-toast-error.e-toast .e-toast-message .e-toast-content,
        .e-toast-container .lgs-toast-warning.e-toast .e-toast-message .e-toast-content {
            color: white !important;
        }

        .e-toast-container .lgs-toast-success.e-toast .e-toast-message .e-toast-acctions .e-btn,
        .e-toast-container .lgs-toast-error.e-toast .e-toast-message .e-toast-acctions .e-btn,
        .e-toast-container .lgs-toast-warning.e-toast .e-toast-message .e-toast-acctions .e-btn {
        }

        .e-toast-container .lgs-toast-success.e-toast .e-toast-close-icon,
        .e-toast-container .lgs-toast-warning.e-toast .e-toast-close-icon,
        .e-toast-container .lgs-toast-error.e-toast .e-toast-close-icon {
            color: white;
        }


    /* Syncfusion sidebar*/
    .e-sidebar {
        background: white !important;
    }

    /* Ensure original select is visually hidden when Select2 is applied */
    .select2-hidden-accessible {
        border: 0 !important;
        clip: rect(0 0 0 0) !important;
        height: 1px !important;
        margin: -1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
        white-space: nowrap !important;
    }