﻿
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;
}
