/* Minification failed. Returning unminified contents.
(52,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(53,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(54,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(55,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(56,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(384,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-black'
(541,31): run-time error CSS1039: Token not allowed after unary operator: '-acr-orange'
(545,24): run-time error CSS1039: Token not allowed after unary operator: '-acr-orange'
(553,24): run-time error CSS1039: Token not allowed after unary operator: '-acr-orange'
(555,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-orange'
(625,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-dust'
(635,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-orange'
(645,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-grey'
(655,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-green'
(666,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-grey'
(676,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-dust'
(686,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-green'
(696,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-orange'
(715,22): run-time error CSS1039: Token not allowed after unary operator: '-acr-dust'
(750,37): run-time error CSS1039: Token not allowed after unary operator: '-acr-orange'
(846,33): run-time error CSS1039: Token not allowed after unary operator: '-acr-orange'
(948,26): run-time error CSS1039: Token not allowed after unary operator: '-acr-black'
(1206,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-dust'
(1282,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-dust'
(1316,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-dust'
(1343,17): run-time error CSS1039: Token not allowed after unary operator: '-acr-orange'
(1347,17): run-time error CSS1039: Token not allowed after unary operator: '-acr-green'
(1352,24): run-time error CSS1039: Token not allowed after unary operator: '-acr-orange'
(1358,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-orange'
(1398,21): run-time error CSS1039: Token not allowed after unary operator: '-acr-black'
(1405,32): run-time error CSS1039: Token not allowed after unary operator: '-acr-black'
(1438,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-black'
(1439,17): run-time error CSS1039: Token not allowed after unary operator: '-acr-white'
(1452,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-dust'
(1453,17): run-time error CSS1039: Token not allowed after unary operator: '-acr-black'
(1484,20): run-time error CSS1039: Token not allowed after unary operator: '-acr-grey'
(1489,20): run-time error CSS1039: Token not allowed after unary operator: '-acr-orange'
(1507,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-black'
(1513,28): run-time error CSS1039: Token not allowed after unary operator: '-acr-black'
(1522,21): run-time error CSS1039: Token not allowed after unary operator: '-acr-black'
(1527,32): run-time error CSS1039: Token not allowed after unary operator: '-acr-orange'
(1528,32): run-time error CSS1039: Token not allowed after unary operator: '-acr-orange'
(1532,25): run-time error CSS1039: Token not allowed after unary operator: '-acr-orange'
(1537,32): run-time error CSS1039: Token not allowed after unary operator: '-acr-green'
(1538,32): run-time error CSS1039: Token not allowed after unary operator: '-acr-green'
(1542,25): run-time error CSS1039: Token not allowed after unary operator: '-acr-green'
(1547,32): run-time error CSS1039: Token not allowed after unary operator: '-acr-grey'
(1548,32): run-time error CSS1039: Token not allowed after unary operator: '-acr-grey'
(1552,25): run-time error CSS1039: Token not allowed after unary operator: '-acr-grey'
(1557,17): run-time error CSS1039: Token not allowed after unary operator: '-acr-orange'
 */
@font-face {
    font-family: acr-font;
    src: url(fonts/RoobertPRO-Regular.woff) format('woff');
}

@font-face {
    font-family: acr-font;
    src: url(fonts/RoobertPRO-RegularItalic.woff);
    font-style: italic;
}

@font-face {
    font-family: acr-font;
    src: url(fonts/RoobertPRO-Light.woff);
    font-weight: 300;
}

@font-face {
    font-family: acr-font;
    src: url(fonts/RoobertPRO-LightItalic.woff);
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: acr-font;
    src: url(fonts/RoobertPRO-SemiBold.woff);
    font-weight: 500;
}

@font-face {
    font-family: acr-font;
    src: url(fonts/RoobertPRO-SemiBoldItalic.woff);
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: acr-font;
    src: url(fonts/RoobertPRO-Bold.woff);
    font-weight: bold;
}

@font-face {
    font-family: acr-font;
    src: url(fonts/RoobertPRO-BoldItalic.woff);
    font-weight: bold;
    font-style: italic;
}

:root {
    --acr-black: #262622;
    --acr-white: #fff;
    --acr-grey: #a1a1a2;
    --acr-dust: #d8d5ce;
    --acr-orange: #f1843b;
    --acr-green: #a9a726;
}

/*body {
    padding-top: 50px;
    padding-bottom: 20px;
}*/

body {
    min-width: 550px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    /* ACRCSS font-family: 'Open Sans',sans-serif; */
    /*font-family: "Open Sans",Helvetica,Arial,sans-serif;*/
    font-family: acr-font;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select {/*,textarea*/
     max-width: 280px;
}

/*General*/
.marginTop24 {
    margin-top: 24px;
}

.marginTop40 {
    margin-top: 40px;
}

.padding15 {
    padding: 15px;
}

.marginTopBottom3 {
    margin-top: 3px;
    margin-bottom: 3px;
}

.oneLine {
    max-width: 150px;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.inactiveLink {
    pointer-events: none;
    cursor: default;
    opacity: 0.5;
}

/*Estilo botonera*/
.BotoneraSuperior {
    margin: 5px 0px 5px 0px;
    padding: 0px;
    display: block;
    clear: both;
    width: 100%;
    overflow: hidden;
}

/*Separación bloques*/
.leyenda {
    padding: 0 15px;
}

    .leyenda p {
        padding-left: 5px;
        font-variant: small-caps;
        font-size: large;
        border-bottom: 1px solid gray;
    }

/* Estilos para el editor template TextFor renderizado por Kendo 
----------------------------------------------------------------------------*/

.wide-full {
    width: 100% !important;
    max-width: none !important;
}

/* Clase para desactivar TextBox
----------------------------------------------------------------------------*/
.txtDisabled {
    background-color: #eee !important;
    cursor: not-allowed !important;
    opacity: 1;
}

/* Menú de columnas de los Grid
----------------------------------------------------------------------------*/
.menuColumnas {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px !important;

}

    .menuColumnas .k-i-arrow-s {
        display: none;
    }

    .menuColumnas li.k-item span.k-link {
        padding: 5px 5px 5px 5px;
    }

    .menuColumnas ul {
        border: 2px solid black !important;
        background-color: #CDCDCD !important;
    }

        .menuColumnas ul li span {
            display: block;
            padding: 0 !important;
        }

            .menuColumnas ul li span label {
                display: block;
                padding: 6px 28px 8px 14px;
                cursor: pointer;
                margin: 0;
            }

/* Estilos para la plantilla de Login
----------------------------------------------------------------------------*/
.body-login {
    background-color: lightgray;
}

.body-login-contenido {
    background-color: white;
    margin: auto;
    width: 550px;
    padding: 10px;
    /*box-shadow: 10px 10px 10px rgba(0,0,0,.8);*/
    /*box-shadow: 0px 0px 10px rgba(0,0,0,.8);*/
    /*border: 1px black solid;*/
    border-radius: 8px;
}

/* Estilos para mensajes en pantalla
----------------------------------------------------------------------------*/
.mensajeCorrecto {
    color: green;
    font-weight: bold;
}

.mensajeError {
    color: red;
    font-weight: bold;
}

.mensajeInfo {
    color: dodgerblue;
    font-weight: bold;
}

/* CSS-ACR */
.bs-callout {
    padding: 10px;
    margin: 20px 0;
    border-style: solid;
    border-top: 0px;
    border-bottom: 0px;
    border-right: 0px;
    border-left-width: 5px;
    border-radius: 3px;
}

.bs-callout-info {
    border-left-color: #5bc0de;
}

/*-------------------------------------------------------------------------------------------------------------*/

/*Login*/
.acr-proveedores-home {
    background-image: url("/Content/Images/Login/login.JPG");
    min-height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/*Controles de subir ficheros*/
/*.btn-primary {
    color:#ffffff
    border: 1px solid #536b9b;
    background-color: #536b9b;
}*/
input[type="file"] {
    height: 38px;
    width: 40px;
    line-height: 0px;
}

.label-info {
    background-color: #536b9b;
}

/*Pantalla facturas*/
.facturasTextoBienvenida {
    font-size: 20px;
    font-weight: bold;
}

.facturasTextoIntroduccion {
    font-size: 18px;
    font-weight: normal;
}

.panel-primary > .panel-heading {
    color: #000;
    background-color: #e0e0e0;
    border-color: #e0e0e0;
    font-size: 18px;
    padding: 10px 15px;
}

.panel-primary > .panel-body {
    padding: 15px;
}

/*Botones*/
/*button, input[type="submit"] {
    text-transform: uppercase;
    font-weight: bold;
    border: 1px solid #536b9b;
    background-color: #536b9b;
    color: #fff;
    padding: .5em 1em;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,.8);
    margin-right: 1em
}*/

.backgroundRayas {
    background-color: #f3ffff;
    /*repeating-linear-gradient(-45deg,rgba(0,0,0,.01),rgba(255,255,255,.15) 5px,rgba(0,0,0,.075) 7px,rgba(0,0,0,.075) 5px);*/
}

/* Estilos para el panel de carga
 ----------------------------------------------------------------------------*/
.loadingmodal {
    display: none;
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255, 255, 255, .2 ) url('/Content/Images/cargando.gif') 50% 50% no-repeat;
}
/* When the body has the loading class, we turn
       the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;
}
    /* Anytime the body has the loading class, our
    modal element will be visible */
    body.loading .loadingmodal {
        display: block;
    }

/* Tooltips de ayuda
----------------------------------------------------------------------------*/
#tooltip {
    text-align: center;
    color: #fff;
    background: #111;
    position: absolute;
    z-index: 100;
    padding: 15px 15px 15px 0;
}

    #tooltip ul {
        text-align: left;
    }

    #tooltip div.margen {
        padding-left: 15px;
        text-align: left;
    }

    #tooltip.top:after {
        border-top-color: transparent;
        border-bottom: 10px solid #111;
        top: -20px;
        bottom: auto;
    }

    #tooltip.left:after {
        left: 10px;
        margin: 0;
    }

    #tooltip.right:after {
        right: 10px;
        left: auto;
        margin: 0;
    }

/*CSS-ACR-NUEVO-------------------------------------------------------------------------------------*/
body {
    background-color: #fff;
    /* ACRCSS font-family: "Open Sans",sans-serif; */
    /* font-family: "Open Sans",Helvetica,Arial,sans-serif;   */
    /*font-family: ".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande",sans-serif*/
    font-family: acr-font;
}

.acr-bg-dark {
    background-color: var(--acr-black);
}

.acr-logo {
    background-image: url('/Content/Images/Login/logo-acr-grupo.jpg');
    background-repeat: no-repeat;
    margin-left: -6px;
    display: inline-block;
    background-position: center;
    width: 122px;
    height: 57px;
}

.acr-login {
    padding-top: 50px;
}

.acr-border {
    border-left: 1px solid #ccc;
}

.acr-required:after {
    content: " *";
    color: #f00;
}

.acr-row-head {
    align-self: flex-end;
}

.acr-t-head {
    font-size: 13px;
}

.acr-t-label {
    font-weight: bold;
}

.acr-upload-document {
    font-size: 13px;
    color: #fff;
    margin-top: 5px;
    margin-bottom: 5px;
}

.label-info {
    background-color: #fff;
    font-size: 12px;
}

/*-------------------------------------------------------------------------------------------------------------*/

/* ESTILOS FOOTER */
footer {
    margin-top: 0px;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

    footer.navbar {
        margin-bottom: 0;
    }

    footer > div.container {
        color: #333;
        height: 65px;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        padding-top: 1.4rem; /*Aplicamos este atributo como alternativa cuando el atributo "align-content" de flexbox no está soportado*/
    }

@supports (align-content: center) {
    footer > div.container {
        align-content: center;
    }

    footer > div.container {
        padding-top: 0;
    }
}

footer > div.container:after, footer > div.container:before {
    display: none;
}

footer > div.container a {
    color: #333;
    text-decoration: none;
}

    footer > div.container a:hover {
        color: #333;
    }

.navbar.navbar-dark.acr-bg-dark {
    /*border-bottom: 4px solid #09f !important;    */
}

@media only screen and (max-width: 550px) {
    footer span {
        display: block;
        width: 100%;
    }
}

/*Las alturas las aplicamos directamente a las clases por defecto, y si "css grid" está soportado pues lo utilizamos*/
.container-holy-grail .navbar.navbar-dark.acr-bg-dark {
    height: 56px;
}

.container-holy-grail .container.body-content {
    min-height: calc(100vh - 122px);
}

.container-holy-grail footer {
    height: 65px;
}
/*CSS-GRID para la estructura de la página*/
@supports (display: grid) {
    .container-holy-grail {
        display: grid;
        grid-template-rows: 56px minmax(calc(100vh - 122px), auto) 65px;
    }
}

/* Este estilo es para que bootstrap funcione bien en los KendoWindow y KendoTabStrips (si se quiere cambiar el estilo a piñon de las tab del tabstrips descomentar la línea, pero no debería ya que en
    esta aplicación hay diferentes estilos de configuracion). Si alguna no se muestra bien, habrá que modificar algo aquí
 ----------------------------------------------------------------------------*/
.k-tabstrip .row, .k-tabstrip .row div, .k-tabstrip .row div.form-group input, .k-tabstrip .row div textarea {
    box-sizing: border-box;
}

    .k-tabstrip .row, .k-tabstrip .row div, .k-tabstrip .row div.form-group input, .k-tabstrip .row div input {
        box-sizing: border-box;
    }


/*Cambiar los colores de las KendoTabStrips*/
.k-tabstrip .k-tabstrip-items {
    background-image: none !important;
    background-color: white !important;
}
    .k-tabstrip .k-tabstrip-items .k-item.k-state-active {
        background-image: none !important;
    }

    .k-tabstrip .k-tabstrip-items .k-item.k-state-hover {
        background-image: none, linear-gradient(to bottom, #f5f5f5 0, #f5f5f5 100%);
        background-color: white !important;
        border-top-color: white !important;
    }
.k-tabstrip-top > .k-tabstrip-items .k-item.k-state-active {
    background-image: none;
    background-image: none,linear-gradient(to bottom,#202333 0,#081421 100%);
    border-bottom-color: var(--acr-orange) !important;
}

input[type="checkbox"] {
    accent-color: var(--acr-orange) !important;
}
/*input[type="checkbox" i]
{
    color:white;
}*/
/*Cambiar los colores de las Checkbox de kendo*/
.k-checkbox:checked {
    border-color: var(--acr-orange) !important;
    color: #fff;
    background-color: var(--acr-orange) !important;
}

.marginLeftRight10 {
    margin-right: 10px;
    margin-left: 10px;
}

.marginLeftRight5 {
    margin-right: 5px;
    margin-left: 5px;
}

.marginLeft10 {
    margin-left: 10px;
}

.marginRight10 {
    margin-right: 10px;
}

.marginRight5 {
    margin-right: 5px;
}

.textAlignCenter {
    text-align: center;
}

.flexTitleProfile {
    display: flex;
    flex-direction: column;
}

.flexFilterListado {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.flexFilterListadoHijo { /*Dar márgen superior entre cada hijo del flexbox cuando hace wrap*/
    margin-top: 10px;
}

.flexDetalleFila {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.flexDetalleFilaCol1 {
    min-width: 50px;
    text-align: center;
    margin-right: 15px;
}

.pip {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/*Estados facturas*/
.Entregado {
    border-radius: 8px;
    background-color: var(--acr-dust);
    padding: 4px;
    color: white;
    display: inline-block;
    min-width: 70px !important;
    text-align: center;
}

.Rechazado {
    border-radius: 8px;
    background-color: var(--acr-orange);
    padding: 4px;
    color: black;
    display: inline-block;
    min-width: 70px !important;
    text-align: center;
}

.Registrado {
    border-radius: 8px;
    background-color: var(--acr-grey);
    padding: 4px;
    color: white;
    display: inline-block;
    min-width: 70px !important;
    text-align: center;
}

.Pagado {
    border-radius: 8px;
    background-color: var(--acr-green);
    padding: 4px;
    color: white;
    display: inline-block;
    min-width: 70px !important;
    text-align: center;
}

/*Estados contratos*/
.EnPreparacion {
    border-radius: 8px;
    background-color: var(--acr-grey);
    padding: 4px;
    color: black;
    display: inline-block;
    min-width: 70px !important;
    text-align: center;
}

.Enviado {
    border-radius: 8px;
    background-color: var(--acr-dust);
    padding: 4px;
    color: white;
    display: inline-block;
    min-width: 70px !important;
    text-align: center;
}

.Confirmado {
    border-radius: 8px;
    background-color: var(--acr-green);
    padding: 4px;
    color: black;
    display: inline-block;
    min-width: 70px !important;
    text-align: center;
}

.Rechazado {
    border-radius: 8px;
    background-color: var(--acr-orange);
    padding: 4px;
    color: white;
    display: inline-block;
    min-width: 70px !important;
    text-align: center;
}

/*Resaltar títulos columnas grids*/
.k-grid-header .k-header {
    font-weight: bold !important;
    /*font-size: medium*/
    /*font-variant: small-caps;*/
    font-size: 0.9em;
}

/*Centrar títulos headers grids*/
.k-grid-header th.k-header {
    text-align: center !important;
    background: var(--acr-dust);
}

/*Quitar bordes internos grid*/
.k-grid td {
    border-width: 0 !important;
}
/*Quitar bordes externos grid*/
.k-grid,
.k-grid-header-wrap,
.k-grid-header th,
.k-grid-content > table > tbody > tr > td {
    border: 0 !important;
}

/*Aumentar el z-index de los modales para ser superior al control de previsualización de pdfs*/
.modal {
    z-index: 9999;
}

/*Títulos de las páginas*/
.tituloPagina {
    /*ACRCSS text-align: center; */
    display: block;
    /*ACRCSS margin: 20px 0 15px 0;*/
    line-height: 0;
    /*font-family: Helvetica,Arial,sans-serif;*/
    font-family: acr-font;
    font-variant: small-caps;
    /*ACRCSS border-bottom: 1px solid #d33;*/
}

    .tituloPagina span {
        background-color: white;
        padding: 0 15px;
        border-left: 3px solid var(--acr-orange);
    }

/*Tamaño de los botones*/
.botonTamaño {
    font-size: 0.75rem;
}

.btn-primary {
    color: #fff;
    background-color: #3498db;
    border-color: #3498db;
}

/*Estilos iconos fontawesome*/
.colorRed {
    color: red;
}

.iconoTamaño {
    font-size: 0.9rem;
    color: #999;
}

.iconoTamañoDetalle {
    font-size: 1.2rem;
    color: #999;
}

.lineHeightInitial {
    line-height: initial;
}

.iconoTamañoDescargado {
    font-size: 0.9rem;
    color: #3498db;
}

/*
    Menú layout
*/

/*body {
    background: #fafafa;
}

p {
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}
*/
#content .navbar {
    /*padding: 15px 10px;*/
    /*background: #fff;*/
    height: 50px;
    border: none;
    border-radius: 0;
    margin-bottom: 20px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

#content .navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

/*Este estilo provocaba un espacio debajo de las cajas de texto del login, y según veo no afecta a nada*/
/*i,
span {
    display: inline-block;
}*/

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

/*Marcar la pestaña activa del menú*/
#sidebar a.pestañaActiva {
    border-left: 3px solid var(--acr-orange) !important;
    background-color: #fff !important;
    font-weight: 500;
}

/*Alinear los iconos del menú lateral a la izquierda: se les crea un envoltorio de mayor ancho que el propio icono y se alinéan a la izquierda*/
.icon-envelope {
    display: inline-block;
    width: 25px !important;
    text-align: left;
}

.icoSidebar {
    color: #999;
    font-size: 1.2em;
}

.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    /*background: #7386D5;*/
    /*background: #dd3333;*/
    font-size: 0.75em;
    background: #e1e1e1;
    /*color: #fff;*/
    color: #000;
    transition: all 0.3s;
    /*font-variant: all-small-caps;*/
    font-weight: 500;
    letter-spacing: 0.4px;
}

    #sidebar.active {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
    }

        /*Ocultar logo cuando activado botón de reducir menú lateral*/
        #sidebar.active span {
            /*CSS display: none;*/
        }

        /*Ocultar textos de botones del menú lateral cuando activado botón de reducir menú lateral*/
        #sidebar.active ul li a .textos {
            display: none !important;
        }

    /*#sidebar.active .sidebar-header h3,
        #sidebar.active .CTAs {
            display: none;
        }

        #sidebar.active .sidebar-header strong {
            display: block;
        }*/

    #sidebar ul {
        margin-bottom: 0px !important; /*No poner ningún margen inferior*/
    }

        #sidebar ul li a {
            text-align: left;
        }

    #sidebar.active ul li a {
        padding: 20px 10px;
        text-align: center;
        font-size: 0.85em;
    }

        #sidebar.active ul li a i {
            margin-right: 0;
            display: block;
            font-size: 1.8em;
            margin-bottom: 5px;
        }

    #sidebar.active ul ul a {
        padding: 10px !important;
    }

    #sidebar.active .dropdown-toggle::after {
        top: auto;
        bottom: 10px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }

    #sidebar .sidebar-header {
        /*padding-top: 5px;*/
        /*padding-bottom: 4px;*/
        /*background: #6d7fcc;*/
        /*background: #337ab7;*/
        /*background: #eee;*/
        background: var(--acr-black);
        height: 50px;
        /*border-bottom: 4px solid #09f !important;*/
    }



    /*#sidebar .sidebar-header strong {
            display: none;
            font-size: 1.8em;
        }*/

    #sidebar ul.components {
        /*padding: 20px 0;*/ /*Quitado para dejar a la misma distancia de altura cada opción del menú lateral*/
        /*border-bottom: 2px solid #072538; */
    }

    #sidebar ul li a {
        padding: 10px;
        font-size: 1.1em;
        display: block;
    }

        #sidebar ul li a:hover {
            /*color: #7386D5;*/
            /*color: #dd3333;*/
            color: #000;
            background: #fff;
        }

        #sidebar ul li a i {
            margin-right: 10px;
        }

    #sidebar ul li.active > a,
    a[aria-expanded="true"] {
        color: #000;
        /*background: #6d7fcc;*/
        /*background: #337ab7;*/
        background: #eee;
    }

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    /*font-size: 0.9em !important;*/ /*Sirve para que todas las pestañas del menú lateral que son submenú tengan un tamaño más pequeño, tanto icono como letra*/
    padding-left: 30px !important;
    /*background: #6d7fcc;*/
    /*background: #337ab7;*/
    background: #eee;
}

ul.CTAs {
    padding: 20px;
}

    ul.CTAs a {
        text-align: center;
        font-size: 0.9em !important;
        display: block;
        border-radius: 5px;
        margin-bottom: 5px;
    }

a.download {
    background: #fff;
    /*color: #7386D5;*/
    /*color: #dd3333;*/
    color: #dc3545;
}

a.article,
a.article:hover {
    /*background: #6d7fcc !important;*/
    /*background: #337ab7 !important;*/
    background: #eee;
    color: #fff !important;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 0px;
    min-height: 100vh;
    transition: all 0.3s;
    display: flex;
    flex-flow: column nowrap;
    font-size: 0.85rem; /*Reducir el tamaño de la letra de la aplicación, sólo en la zona del render*/
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 1000px) {
    #sidebar {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
        margin-left: -80px !important;
    }

    .dropdown-toggle::after {
        top: auto;
        bottom: 10px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }

    #sidebar.active {
        margin-left: 0 !important;
    }

    /*#sidebar .sidebar-header h3,
    #sidebar .CTAs {
        display: none;
    }

    #sidebar .sidebar-header strong {
        display: block;
    }*/

    #sidebar ul li a {
        padding: 20px 10px;
    }

        #sidebar ul li a span {
            font-size: 0.85em;
        }

        #sidebar ul li a i {
            margin-right: 0;
            display: block;
        }

    #sidebar ul ul a {
        padding: 10px !important;
    }

    #sidebar ul li a i {
        font-size: 1.3em;
    }

    #sidebar {
        margin-left: 0;
    }

    #sidebarCollapse span {
        display: none;
    }
}

.navbar > .container, .navbar > .container-fluid {
    justify-content: space-between;
}

footer {
    display: flex;
    justify-content: space-between;
    height: 50px;
    margin: auto 0 0 0;
    flex-flow: row wrap;
    -ms-flex-align: center; /*Fix align-content no funciona en I.E.*/
    align-content: center;
    text-align: center;
}

.disabledIconFontAwesome {
    opacity: 0.5;
    pointer-events: none;
    /*cursor: not-allowed;*/
}

.enlace {
    color: black;
}

    .enlace:hover {
        color: blue;
    }

/*Inputs tipo file con estilos de bootstrap 4, en este caso se configura el texto del botón de Browse*/
/*https://getbootstrap.com/docs/4.0/components/forms/*/
.custom-file-input:lang(es) ~ .custom-file-label::after {
    content: "Elegir";
}

.file-label {
    height: auto !important;
}

.k-tabstrip .k-content.k-state-active {
    overflow: visible !important;
}
/*En los grid con poca altura el desplegable del botón para mostrar las columnas ocultas no está visible por encima de la altura del grid, se oculta por debajo*/

/*Ocultar información usuario cuando la pantalla es pequeña*/
@media (max-width: 1000px) {
    #sidebar span {
        display: none;
    }
}

/*Ocultar título layout superior cuando la pantalla es pequeña*/
@media (max-width: 1000px) {
    #titulo {
        display: none;
    }
}

/*Ocultar botón de gráficos de facturas cuando la pantalla es pequeña*/
@media (max-width: 1000px) {
    #btnGraficos {
        display: none;
    }
}

/*Estilos de enlaces dentro de la aplicación y sin la clase btn (color negro, y hover subrayar), sin afectar al login*/
#content a:not(.btn), #sidebar a:not(.btn) {
    color: #000;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

#content a span:hover, #sidebar a span:hover { /*Añadidos los span para quitar los subrayados sobrantes del principio*/
    color: #000;
    text-decoration: underline;
}

/*Estilos para cambiar el color de los paginadores de los grids*/
.k-state-selected {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: black;
}

.k-list > .k-state-focused.k-state-selected {
    box-shadow: inset 0 0 10px 3px #6c757d !important;
}

/* kendo ui */
.k-grid-pager {
    background-color: var(--acr-dust) !important;
    color: #333 !important;
    font-size: 0.9em !important;
}

/*Gif de cargar grid*/
.k-loading-image {
    background-image: url('Images/cargando.gif') !important
}

/*Back to top*/
#back2Top {
    width: 60px;
    line-height: 40px;
    overflow: hidden;
    z-index: 999;
    display: none;
    cursor: pointer;
    position: fixed;
    bottom: 94px;
    right: 0;
    background-color: black !important;
    color: white !important;
    text-align: center;
    font-size: 50px;
    text-decoration: none;
    padding: 5px;
    border-radius: 100%;
}

    #back2Top:hover {
        color: grey;
    }

/*Tamaño del los spans de los controles tipo fecha*/
span.k-widget.k-dateinput {
    width: 100px;
}

/*Ocultar flecha para desplegar detalle de facturas y contratos (en databound se incluye la clase .hide-toogle-arrow cuando se cumplen las condiciones)*/
.hide-toggle-arrow .k-hierarchy-cell .k-icon {
    display: none;
}

legend {
    font-variant: small-caps;
    font-size: 0.85em;
}

#collapseFiltros {
    border-bottom: #eee solid 1px;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/*Hacer más amplios los filtros de los combos de kendo*/
.k-list-filter > .k-textbox {
    max-width: none !important;
}



/* REDISEÑO ACR
----------------------------------------------------------------------------*/
.acr-login-header, .utexior-login-header, .utecasais-login-header {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    max-width: 100%;
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: var(--acr-dust);
}

.acr-login-header .acr-header-branding, .utexior-login-header .acr-header-branding, .utecasais-login-header .acr-header-branding {
    margin: 0 !important;
    position: relative;
    z-index: 9999;
}

.acr-login-header .acr-header-branding .acr-header-logo, .utexior-login-header .acr-header-branding .acr-header-logo, .utecasais-login-header .acr-header-branding .acr-header-logo {
    margin-left: 3.75rem;
    margin-bottom: 0;
}

.acr-login-header .acr-header-branding .acr-header-logo svg {
    width: 150px;
    height: auto;
}

.utexior-login-header .acr-header-branding .acr-header-logo svg {
    width: 365px;
    height: auto;
}

.utecasais-login-header .acr-header-branding .acr-header-logo svg {
    width: 365px;
    height: auto;
}

.acr-site-content {
    padding-top: 183px;
}

.acr-header-title {
    background-color: var(--acr-dust);
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
}

    .acr-header-title h3 {
        font-size: 50px;
        line-height: 1;
        font-weight: 300;
        margin: 0 auto;
        max-width: 850px;
    }

.acr-header-subtitle {
    font-size: 1.5rem;
    position: absolute;
    width: 60%;
    text-align: center;
    z-index: 101;
    font-weight: bold;
    margin: 10px 0 0 20%;
}

.text-acr-naranja,
.acr-terminos-condiciones a > span {
    color: var(--acr-orange) !important;
}

.text-acr-verde {
    color: var(--acr-green) !important;
}

#body-login input.form-control {
    border-radius: 0;
    border-color: var(--acr-orange);
    -webkit-box-shadow: none;
    box-shadow: none;
}

    #body-login input.form-control:focus {
        border-color: var(--acr-orange);
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

input.form-control,
.k-dropdown,
.k-dropdown-wrap,
.k-textbox,
.custom-file-label,
.btn,
.k-datepicker,
.k-picker-wrap,
textarea.form-control {
    border-radius: 0 !important;
}

a:not(.btn), a:not(.btn):focus, a:not(.btn):active, a:not(.btn):visited, a:not(.btn):hover {
    color: #F1843B;
    font-weight: 700;
}

.btn-acr {
    position: relative;
    cursor: pointer;
    display: inline-block;
}

    .btn-acr .btn-acr-action:disabled {
        cursor: not-allowed;
    }

    .btn-acr .btn-acr-action {
        font-size: 14px;
        font-weight: 700;
        box-shadow: none !important;
        outline: 0 !important;
        text-transform: uppercase;
        transition: all 0.2s ease-out 0.2s;
        color: var(--acr-black) !important;
        background-color: transparent !important;
    }

    .btn-acr::before {
        content: '';
        position: absolute;
        background-color: var(--acr-black);
        height: 1px;
        width: 60px;
        top: 50%;
        left: -60px;
        transition: all 0.5s;
    }

    .btn-acr:hover .btn-acr-action:not(:disabled) {
        transition: all 0.2s;
        transform: translateY(-15px);
    }

    .btn-acr:hover::before {
        width: 80%;
        left: 10%;
    }

.hidden-label {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    word-wrap: normal !important;
}

.login-description {
    background-color: var(--acr-black);
    color: var(--acr-white);
    padding: 56px 20px 56px 52px;
}

.acr-login-sm {
    padding-top: 25px;
}


/* REDISEÑO ACR - Parte interna aplicación
----------------------------------------------------------------------------*/
#sidebar {
    overflow-x: hidden;
    background-color: var(--acr-dust);
    color: var(--acr-black);
}

    #sidebar a span:hover {
        text-decoration: none;
    }

    #sidebar ul li a {
        display: flex;
        gap: 4px;
    }

        #sidebar ul li a span::after {
            content: '';
            width: 0px;
            height: 1px;
            display: block;
            background: black;
            transition: 300ms;
        }

        #sidebar ul li a:hover span::after {
            width: 100%;
        }

    #sidebar.active ul li a .icon-envelope {
        flex: 1;
        text-align: center;
    }

    #sidebar ul li a .icon-envelope svg path {
        fill: var(--acr-grey);
    }

    #sidebar ul li a.pestañaActiva .icon-envelope svg path,
    #sidebar ul li a:hover .icon-envelope svg path {
        fill: var(--acr-orange);
    }

    #sidebar .acr-header-logo svg {
        height: auto;
        width: 75px;
    }

        #sidebar .acr-header-logo svg path {
            fill: white;
        }

    #sidebar .flexTitleProfile {
        height: 100%;
        justify-content: flex-end;
    }

.btn-acr-clasic {
    background-color: var(--acr-black);
    color: white;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    padding: 10px 22px;
    border: 2px solid var(--acr-black);
}

    .btn-acr-clasic.clasic-sm {
        padding: 5px 15px;
    }

    .btn-acr-clasic:hover {
        background-color: white;
        color: var(--acr-black);
        font-weight: normal;
    }

    .btn-acr-clasic.clasic-info {
        background-color: var(--acr-orange);
        border: 2px solid var(--acr-orange);
    }

        .btn-acr-clasic.clasic-info:hover {
            color: var(--acr-orange);
            background-color: white;
        }

    .btn-acr-clasic.clasic-success {
        background-color: var(--acr-green);
        border: 2px solid var(--acr-green);
    }

        .btn-acr-clasic.clasic-success:hover {
            color: var(--acr-green);
            background-color: white;
        }

    .btn-acr-clasic.clasic-secondary {
        background-color: var(--acr-grey);
        border: 2px solid var(--acr-grey);
    }

        .btn-acr-clasic.clasic-secondary:hover {
            color: var(--acr-grey);
            background-color: white;
        }

.k-grid-header .k-i-sort-asc-sm, .k-grid-header .k-i-sort-desc-sm, .k-grid-header .k-sort-order {
    color: var(--acr-orange) !important;
}

/* REDISEÑO ACR MEDIA QUERYS
----------------------------------------------------------------------------*/
@media only screen and (max-width: 1120px) {
    .acr-login-header, .utexior-login-header, .utecasais-login-header {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .acr-login-header .acr-header-branding .acr-header-logo svg {
        width: 120px;
    }
    .utexior-login-header .acr-header-branding .acr-header-logo svg {
        width: 292px;
    }
    .utecasais-login-header .acr-header-branding .acr-header-logo svg {
        width: 292px;
    }

    .acr-site-content {
        padding-top: 83.5px;
    }
}

@media only screen and (max-width: 900px) {
    .acr-login-header .acr-header-branding .acr-header-logo svg {
        width: 100px;
    }
    .utexior-login-header .acr-header-branding .acr-header-logo svg {
        width: 243px;
    }
    .utecasais-login-header .acr-header-branding .acr-header-logo svg {
        width: 243px;
    }

    .acr-header-subtitle {
        display: none;
    }

    .acr-site-content {
        padding-top: 76px;
    }
}

@media only screen and (max-width: 765px) {
    .acr-header-title {
        padding-bottom: 30px;
    }

        .acr-header-title h3 {
            font-size: 22px;
            max-width: 610px;
            font-weight: 500;
        }

    .login-description {
        padding: 26px 20px 20px 52px;
        margin-bottom: 20px;
    }

        .login-description.confirmation {
            margin-left: 50px;
            margin-right: 50px;
        }
}

@media only screen and (max-width: 600px) {
    .acr-login-header, .utexior-login-header, .utecasais-login-header {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .acr-login-header .acr-header-branding .acr-header-logo, .utexior-login-header .acr-header-branding .acr-header-logo, .utecasais-login-header .acr-header-branding .acr-header-logo {
        margin-left: 1rem !important;
    }

    .acr-login-header .acr-header-branding .acr-header-logo svg {
        width: 78px;
    }
    .utexior-login-header .acr-header-branding .acr-header-logo svg {
        width: 190px;
    }
    .utecasais-login-header .acr-header-branding .acr-header-logo svg {
        width: 190px;
    }

    .acr-site-content {
        padding-top: 60px;
    }
}

/* REDISEÑO ACR ANIMATIONS
----------------------------------------------------------------------------*/
@keyframes entrada {
    0% {
        opacity: 0;
        transform: translateY(50px)
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.animacion-entrada {
    opacity: 0;
    animation-name: entrada;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}


.labelBlock div div {
    margin-left: 10px;
}

    .labelBlock div div.first {
        margin-left: 0px;
    }

.labelBlock div label {
    display: block;
}

/* New font */
@font-face {
    font-family: 'demos';
    src: url('../Content/Fonts/demos.woff?9wdv67') format('woff'), url('../Content/Fonts/demos.ttf?9wdv67') format('truetype'), url('../Content/Fonts/demos.svg?9wdv67#demos') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Necesario para que el icono aparezca con la imagen correcta*/
[class^="k-uni"],
.collap-activator:after,
.back-nav:before,
.forward-nav:before {
    font-family: 'demos';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/*Estilos para el boton que abre el panel (color de fondo, cursor, etc)*/
.collapsiblePanel .collap-activator {
    padding: 5px;
    text-align: center;
    background-color: #f1843b;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    border-color: grey;
    /*border-style: solid;
    border-width: 1px 0px 1px 0px;*/
    cursor: pointer;
    color: white;
    display: block;
}

    .collapsiblePanel .collap-activator:hover {
        background-color: #f1843b;
        border: solid 1px black;
    }

    /*Para mostrar el icono*/
    .collapsiblePanel .collap-activator:after {
        content: "\e604";
        display: inline-block;
        margin-left: .5em;
        font-size: .8em;
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        transition-property: transform;
        transition-duration: 0.2s;
        transition-timing-function: ease;
    }

/*Para mostrar la animación*/
.collapsiblePanel .collap-active:after {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

/*Para que se muestre como el original*/
.collapsiblePanel .k-animation-container div,
.collapsiblePanel .k-animation-container input,
.collapsiblePanel .k-animation-container textarea,
.collapsiblePanel .k-animation-container button {
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}
/* Estilos para subida de documentos con el control KendoUpload
---------------------------------------------------------------------------------------------------------------*/
.img-file {
    background-image: url('Images/Extension/jpg.png');
    background-size: contain;
    height: 35px;
    width: 35px;
}

.doc-file {
    background-image: url('Images/Extension/doc.png');
    background-size: contain;
    height: 35px;
    width: 35px;
}

.pdf-file {
    background-image: url('Images/Extension/pdf.png');
    background-size: contain;
    height: 35px;
    width: 35px;
}

.xls-file {
    background-image: url('Images/Extension/xls.png');
    background-size: contain;
    height: 35px;
    width: 35px;
}

.zip-file {
    background-image: url('Images/Extension/zip.png');
    background-size: contain;
    height: 35px;
    width: 35px;
}

.dwg-file {
    background-repeat: no-repeat;
    background-image: url('Images/Extension/dwg.jpg');
    background-size: contain;
    height: 35px;
    width: 35px;
}

.pzh-file {
    background-repeat: no-repeat;
    background-image: url('Images/Extension/pzh.jpg');
    background-size: contain;
    height: 35px;
    width: 35px;
}

.default-file {
    background-image: url('Images/Extension/default.png');
    background-size: contain;
    height: 35px;
    width: 35px;
}

/* Necesario para los documentos porque si no no se muestra el tooltip completo */
.tooltip-inner {
    max-width: none !important;
}

ul.k-upload-files {
    line-height: 100%;
}

    /* Cada uno de los elementos que representan un documento
----------------------------------------------------------------------------*/
    ul.k-upload-files li {
        display: inline-block;
        width: 50%;
        /*width: 100%;*/
        margin: 0;
        padding: 0;
    }
/* El contenido del documento sin contar con su estado (guardado, pendiente, error...)
----------------------------------------------------------------------------*/
.file-wrapper {
    /*display: inline-block;*/
    position: relative;
    padding-top: 4px;
    padding-bottom: 4px;
    /*height: 55px;*/
    /*width: 50%;*/
    /* CSS-ACR
    border-bottom:1px solid lightgrey;
    border-right:1px solid lightgrey;
    */
}
/* Parte del icono. Anchura fija
----------------------------------------------------------------------------*/
.docIcono {
    float: left;
    width: 50px;
    height: 100%;
    text-align: center;
}

.file-icon {
    display: inline-block;
    /*width:48px;
    height:48px;*/
    vertical-align: middle;
    margin-top: 3px;
}

/* Parte del nombre y tamaño. Anchura variable
----------------------------------------------------------------------------*/
.docDatos {
    margin: 0 25px 0 50px;
    height: 100%;
}

.docDatosInterior {
    padding: 5px 10px;
    /*height:50px;*/
    line-height: 1.6em;
}

.nombre, .size {
    height: 50%;
    white-space: normal;
    /*white-space: nowrap !important;*/
    /*overflow: hidden !important;
    text-overflow: ellipsis !important;*/
}

/* Parte del boton para eliminar el documento. Anchura fija
----------------------------------------------------------------------------*/
.docAccion {
    float: right;
    width: 25px;
    height: 100%;
}
body.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

.sweet-overlay {
    background-color: black;
    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    /* IE8 */
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    z-index: 1000000;
}

.sweet-alert {
    background-color: white;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    width: 478px;
    padding: 17px;
    border-radius: 5px;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -256px;
    margin-top: -200px;
    overflow: hidden;
    display: none;
    z-index: 9999999;
}

@media all and (max-width: 540px) {
    .sweet-alert {
        width: auto;
        margin-left: 0;
        margin-right: 0;
        left: 15px;
        right: 15px;
    }
}

.sweet-alert h2 {
    color: #575757;
    font-size: 30px;
    text-align: center;
    font-weight: 600;
    text-transform: none;
    position: relative;
    margin: 25px 0;
    padding: 0;
    line-height: 40px;
    display: block;
}

.sweet-alert p {
    color: #797979;
    font-size: 16px;
    text-align: center;
    font-weight: 300;
    position: relative;
    text-align: inherit;
    float: none;
    margin: 0;
    padding: 0;
    line-height: normal;
}

.sweet-alert fieldset {
    border: none;
    position: relative;
}

.sweet-alert .sa-error-container {
    background-color: #f1f1f1;
    margin-left: -17px;
    margin-right: -17px;
    overflow: hidden;
    padding: 0 10px;
    max-height: 0;
    webkit-transition: padding 0.15s, max-height 0.15s;
    transition: padding 0.15s, max-height 0.15s;
}

    .sweet-alert .sa-error-container.show {
        padding: 10px 0;
        max-height: 100px;
        webkit-transition: padding 0.2s, max-height 0.2s;
        transition: padding 0.25s, max-height 0.25s;
    }

    .sweet-alert .sa-error-container .icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #ea7d7d;
        color: white;
        line-height: 24px;
        text-align: center;
        margin-right: 3px;
    }

    .sweet-alert .sa-error-container p {
        display: inline-block;
    }

.sweet-alert .sa-input-error {
    position: absolute;
    top: 29px;
    right: 26px;
    width: 20px;
    height: 20px;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
}

    .sweet-alert .sa-input-error::before, .sweet-alert .sa-input-error::after {
        content: "";
        width: 20px;
        height: 6px;
        background-color: #f06e57;
        border-radius: 3px;
        position: absolute;
        top: 50%;
        margin-top: -4px;
        left: 50%;
        margin-left: -9px;
    }

    .sweet-alert .sa-input-error::before {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .sweet-alert .sa-input-error::after {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .sweet-alert .sa-input-error.show {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

.sweet-alert input {
    width: 100%;
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid #d7d7d7;
    height: 43px;
    margin-top: 10px;
    margin-bottom: 17px;
    font-size: 18px;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06);
    padding: 0 12px;
    display: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

    .sweet-alert input:focus {
        outline: none;
        box-shadow: 0px 0px 3px #c4e6f5;
        border: 1px solid #b4dbed;
    }

        .sweet-alert input:focus::-moz-placeholder {
            transition: opacity 0.3s 0.03s ease;
            opacity: 0.5;
        }

        .sweet-alert input:focus:-ms-input-placeholder {
            transition: opacity 0.3s 0.03s ease;
            opacity: 0.5;
        }

        .sweet-alert input:focus::-webkit-input-placeholder {
            transition: opacity 0.3s 0.03s ease;
            opacity: 0.5;
        }

    .sweet-alert input::-moz-placeholder {
        color: #bdbdbd;
    }

    .sweet-alert input:-ms-input-placeholder {
        color: #bdbdbd;
    }

    .sweet-alert input::-webkit-input-placeholder {
        color: #bdbdbd;
    }

.sweet-alert.show-input input {
    display: block;
}

.sweet-alert button {
    background-color: #AEDEF4;
    color: white;
    border: none;
    box-shadow: none;
    font-size: 17px;
    font-weight: 500;
    -webkit-border-radius: 4px;
    border-radius: 5px;
    padding: 10px 32px;
    margin: 26px 5px 0 5px;
    cursor: pointer;
}

    .sweet-alert button:focus {
        outline: none;
        box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    }

    .sweet-alert button:hover {
        background-color: #a1d9f2;
    }

    .sweet-alert button:active {
        background-color: #81ccee;
    }

    .sweet-alert button.cancel {
        background-color: #B0B0B0;
    }

        .sweet-alert button.cancel:hover {
            background-color: #c8c8c8;
        }

        .sweet-alert button.cancel:active {
            background-color: #b6b6b6;
        }

        .sweet-alert button.cancel:focus {
            box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important;
        }

    .sweet-alert button::-moz-focus-inner {
        border: 0;
    }

.sweet-alert[data-has-cancel-button=false] button {
    box-shadow: none !important;
}

.sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] {
    padding-bottom: 40px;
}

.sweet-alert .sa-icon {
    width: 80px;
    height: 80px;
    border: 4px solid gray;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    border-radius: 50%;
    margin: 20px auto;
    padding: 0;
    position: relative;
    box-sizing: content-box;
}

    .sweet-alert .sa-icon.sa-error {
        border-color: #F27474;
    }

        .sweet-alert .sa-icon.sa-error .sa-x-mark {
            position: relative;
            display: block;
        }

        .sweet-alert .sa-icon.sa-error .sa-line {
            position: absolute;
            height: 5px;
            width: 47px;
            background-color: #F27474;
            display: block;
            top: 37px;
            border-radius: 2px;
        }

            .sweet-alert .sa-icon.sa-error .sa-line.sa-left {
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                left: 17px;
            }

            .sweet-alert .sa-icon.sa-error .sa-line.sa-right {
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
                right: 16px;
            }

    .sweet-alert .sa-icon.sa-warning {
        border-color: #F8BB86;
    }

        .sweet-alert .sa-icon.sa-warning .sa-body {
            position: absolute;
            width: 5px;
            height: 47px;
            left: 50%;
            top: 10px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
            margin-left: -2px;
            background-color: #F8BB86;
        }

        .sweet-alert .sa-icon.sa-warning .sa-dot {
            position: absolute;
            width: 7px;
            height: 7px;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            margin-left: -3px;
            left: 50%;
            bottom: 10px;
            background-color: #F8BB86;
        }

    .sweet-alert .sa-icon.sa-info {
        border-color: #C9DAE1;
    }

        .sweet-alert .sa-icon.sa-info::before {
            content: "";
            position: absolute;
            width: 5px;
            height: 29px;
            left: 50%;
            bottom: 17px;
            border-radius: 2px;
            margin-left: -2px;
            background-color: #C9DAE1;
        }

        .sweet-alert .sa-icon.sa-info::after {
            content: "";
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            margin-left: -3px;
            top: 19px;
            background-color: #C9DAE1;
        }

    .sweet-alert .sa-icon.sa-success {
        border-color: #A5DC86;
    }

        .sweet-alert .sa-icon.sa-success::before, .sweet-alert .sa-icon.sa-success::after {
            content: '';
            -webkit-border-radius: 40px;
            border-radius: 40px;
            border-radius: 50%;
            position: absolute;
            width: 60px;
            height: 120px;
            background: white;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .sweet-alert .sa-icon.sa-success::before {
            -webkit-border-radius: 120px 0 0 120px;
            border-radius: 120px 0 0 120px;
            top: -7px;
            left: -33px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-transform-origin: 60px 60px;
            transform-origin: 60px 60px;
        }

        .sweet-alert .sa-icon.sa-success::after {
            -webkit-border-radius: 0 120px 120px 0;
            border-radius: 0 120px 120px 0;
            top: -11px;
            left: 30px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-transform-origin: 0px 60px;
            transform-origin: 0px 60px;
        }

        .sweet-alert .sa-icon.sa-success .sa-placeholder {
            width: 80px;
            height: 80px;
            border: 4px solid rgba(165, 220, 134, 0.2);
            -webkit-border-radius: 40px;
            border-radius: 40px;
            border-radius: 50%;
            box-sizing: content-box;
            position: absolute;
            left: -4px;
            top: -4px;
            z-index: 2;
        }

        .sweet-alert .sa-icon.sa-success .sa-fix {
            width: 5px;
            height: 90px;
            background-color: white;
            position: absolute;
            left: 28px;
            top: 8px;
            z-index: 1;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .sweet-alert .sa-icon.sa-success .sa-line {
            height: 5px;
            background-color: #A5DC86;
            display: block;
            border-radius: 2px;
            position: absolute;
            z-index: 2;
        }

            .sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
                width: 25px;
                left: 14px;
                top: 46px;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            }

            .sweet-alert .sa-icon.sa-success .sa-line.sa-long {
                width: 47px;
                right: 8px;
                top: 38px;
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }

    .sweet-alert .sa-icon.sa-custom {
        background-size: contain;
        border-radius: 0;
        border: none;
        background-position: center center;
        background-repeat: no-repeat;
    }

/*
 * Animations
 */
@-webkit-keyframes showSweetAlert {
    0% {
        transform: scale(0.7);
        -webkit-transform: scale(0.7);
    }

    45% {
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
    }

    80% {
        transform: scale(0.95);
        -webkit-transform: scale(0.95);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

@keyframes showSweetAlert {
    0% {
        transform: scale(0.7);
        -webkit-transform: scale(0.7);
    }

    45% {
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
    }

    80% {
        transform: scale(0.95);
        -webkit-transform: scale(0.95);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

@-webkit-keyframes hideSweetAlert {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    100% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
    }
}

@keyframes hideSweetAlert {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    100% {
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
    }
}

@-webkit-keyframes slideFromTop {
    0% {
        top: 0%;
    }

    100% {
        top: 50%;
    }
}

@keyframes slideFromTop {
    0% {
        top: 0%;
    }

    100% {
        top: 50%;
    }
}

@-webkit-keyframes slideToTop {
    0% {
        top: 50%;
    }

    100% {
        top: 0%;
    }
}

@keyframes slideToTop {
    0% {
        top: 50%;
    }

    100% {
        top: 0%;
    }
}

@-webkit-keyframes slideFromBottom {
    0% {
        top: 70%;
    }

    100% {
        top: 50%;
    }
}

@keyframes slideFromBottom {
    0% {
        top: 70%;
    }

    100% {
        top: 50%;
    }
}

@-webkit-keyframes slideToBottom {
    0% {
        top: 50%;
    }

    100% {
        top: 70%;
    }
}

@keyframes slideToBottom {
    0% {
        top: 50%;
    }

    100% {
        top: 70%;
    }
}

.showSweetAlert[data-animation=pop] {
    -webkit-animation: showSweetAlert 0.3s;
    animation: showSweetAlert 0.3s;
}

.showSweetAlert[data-animation=none] {
    -webkit-animation: none;
    animation: none;
}

.showSweetAlert[data-animation=slide-from-top] {
    -webkit-animation: slideFromTop 0.3s;
    animation: slideFromTop 0.3s;
}

.showSweetAlert[data-animation=slide-from-bottom] {
    -webkit-animation: slideFromBottom 0.3s;
    animation: slideFromBottom 0.3s;
}

.hideSweetAlert[data-animation=pop] {
    -webkit-animation: hideSweetAlert 0.2s;
    animation: hideSweetAlert 0.2s;
}

.hideSweetAlert[data-animation=none] {
    -webkit-animation: none;
    animation: none;
}

.hideSweetAlert[data-animation=slide-from-top] {
    -webkit-animation: slideToTop 0.4s;
    animation: slideToTop 0.4s;
}

.hideSweetAlert[data-animation=slide-from-bottom] {
    -webkit-animation: slideToBottom 0.3s;
    animation: slideToBottom 0.3s;
}

@-webkit-keyframes animateSuccessTip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }

    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }

    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}

@keyframes animateSuccessTip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }

    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }

    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}

@-webkit-keyframes animateSuccessLong {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    84% {
        width: 55px;
        right: 0px;
        top: 35px;
    }

    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}

@keyframes animateSuccessLong {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    84% {
        width: 55px;
        right: 0px;
        top: 35px;
    }

    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}

@-webkit-keyframes rotatePlaceholder {
    0% {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }

    5% {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }

    12% {
        transform: rotate(-405deg);
        -webkit-transform: rotate(-405deg);
    }

    100% {
        transform: rotate(-405deg);
        -webkit-transform: rotate(-405deg);
    }
}

@keyframes rotatePlaceholder {
    0% {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }

    5% {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }

    12% {
        transform: rotate(-405deg);
        -webkit-transform: rotate(-405deg);
    }

    100% {
        transform: rotate(-405deg);
        -webkit-transform: rotate(-405deg);
    }
}

.animateSuccessTip {
    -webkit-animation: animateSuccessTip 0.75s;
    animation: animateSuccessTip 0.75s;
}

.animateSuccessLong {
    -webkit-animation: animateSuccessLong 0.75s;
    animation: animateSuccessLong 0.75s;
}

.sa-icon.sa-success.animate::after {
    -webkit-animation: rotatePlaceholder 4.25s ease-in;
    animation: rotatePlaceholder 4.25s ease-in;
}

@-webkit-keyframes animateErrorIcon {
    0% {
        transform: rotateX(100deg);
        -webkit-transform: rotateX(100deg);
        opacity: 0;
    }

    100% {
        transform: rotateX(0deg);
        -webkit-transform: rotateX(0deg);
        opacity: 1;
    }
}

@keyframes animateErrorIcon {
    0% {
        transform: rotateX(100deg);
        -webkit-transform: rotateX(100deg);
        opacity: 0;
    }

    100% {
        transform: rotateX(0deg);
        -webkit-transform: rotateX(0deg);
        opacity: 1;
    }
}

.animateErrorIcon {
    -webkit-animation: animateErrorIcon 0.5s;
    animation: animateErrorIcon 0.5s;
}

@-webkit-keyframes animateXMark {
    0% {
        transform: scale(0.4);
        -webkit-transform: scale(0.4);
        margin-top: 26px;
        opacity: 0;
    }

    50% {
        transform: scale(0.4);
        -webkit-transform: scale(0.4);
        margin-top: 26px;
        opacity: 0;
    }

    80% {
        transform: scale(1.15);
        -webkit-transform: scale(1.15);
        margin-top: -6px;
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        margin-top: 0;
        opacity: 1;
    }
}

@keyframes animateXMark {
    0% {
        transform: scale(0.4);
        -webkit-transform: scale(0.4);
        margin-top: 26px;
        opacity: 0;
    }

    50% {
        transform: scale(0.4);
        -webkit-transform: scale(0.4);
        margin-top: 26px;
        opacity: 0;
    }

    80% {
        transform: scale(1.15);
        -webkit-transform: scale(1.15);
        margin-top: -6px;
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        margin-top: 0;
        opacity: 1;
    }
}

.animateXMark {
    -webkit-animation: animateXMark 0.5s;
    animation: animateXMark 0.5s;
}

@-webkit-keyframes pulseWarning {
    0% {
        border-color: #F8D486;
    }

    100% {
        border-color: #F8BB86;
    }
}

@keyframes pulseWarning {
    0% {
        border-color: #F8D486;
    }

    100% {
        border-color: #F8BB86;
    }
}

.pulseWarning {
    -webkit-animation: pulseWarning 0.75s infinite alternate;
    animation: pulseWarning 0.75s infinite alternate;
}

@-webkit-keyframes pulseWarningIns {
    0% {
        background-color: #F8D486;
    }

    100% {
        background-color: #F8BB86;
    }
}

@keyframes pulseWarningIns {
    0% {
        background-color: #F8D486;
    }

    100% {
        background-color: #F8BB86;
    }
}

.pulseWarningIns {
    -webkit-animation: pulseWarningIns 0.75s infinite alternate;
    animation: pulseWarningIns 0.75s infinite alternate;
}

/* Internet Explorer 9 has some special quirks that are fixed here */
/* The icons are not animated. */
/* This file is automatically merged into sweet-alert.min.js through Gulp */
/* Error icon */
.sweet-alert .sa-icon.sa-error .sa-line.sa-left {
    -ms-transform: rotate(45deg) \9;
}

.sweet-alert .sa-icon.sa-error .sa-line.sa-right {
    -ms-transform: rotate(-45deg) \9;
}

/* Success icon */
.sweet-alert .sa-icon.sa-success {
    border-color: transparent\9;
}

.sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
    -ms-transform: rotate(45deg) \9;
}

.sweet-alert .sa-icon.sa-success .sa-line.sa-long {
    -ms-transform: rotate(-45deg) \9;
}