/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}


/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}


/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}


/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}


/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}


/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}


/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}


/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}


/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.clearfix:after {
    clear: both;
}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {

    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " ("attr(href) ")";
    }

    abbr[title]:after {
        content: " ("attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
    thead {
        display: table-header-group;
        position: fixed;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


/* ==========================================================================
   Estilos de Página
   ========================================================================== */

html,
body {
    height: 100%;
    margin: 0;
    background-color: #f5fbff;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-smooth: always;
}


/*Links*/

a:link {
    color: inherit;
}

a:-webkit-any-link {
    text-decoration: none;
}

a,
a:hover,
a:active,
a:focus {
    outline: none;
}


/*Links*/

/*Formas*/

button::-moz-focus-inner {
    border: 0;
}

input::-moz-focus-inner {
    border: 0;
}

textarea::-moz-focus-inner {
    border: 0;
}

input: focus,
input:active {
    border: 0;
    outline: none;
}

textarea: focus,
input:active {
    border: 0;
    outline: none;
}

input[type='range'],
input[type='range']:focus,
input[type='range']:active,
input[type='range']::-moz-focus-inner,
input[type='range']:-moz-focusring {
    border: 0;
    outline: none;
}

input,
textarea {
    border: 0;
}

textarea {
    resize: none;
}

input,
button {
    border-radius: 0;
}

input {
    -webkit-appearance: none;
}


/*Formas*/

/*Sombras para SVG*/

.sombraSVG {
    -webkit-filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
    /* Same syntax as box-shadow */
}


/*Sombras para SVG*/

/* ==========================================================================
   Layout
   ========================================================================== */

/*Esto es para evitar que se quede pegado en Chrome por estar Fixed*/

.fixed {
    position: fixed;
    -webkit-transform: translateZ(0);
}

.noOverflow {
    overflow: hidden;
}


/*Alinear Verticalmente*/

.verticalAlign {
    display: table;
}

.top,
.middle,
.bottom {
    display: table-cell;
}

.top {
    vertical-align: top;
}

.middle {
    vertical-align: middle;
}

.bottom {
    vertical-align: bottom;
}

.fill {
    width: 100%;
    height: 100%;
}

.filler {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.rel {
    position: relative;
}

.width100 {
    width: 100%;
}

.height100 {
    height: 100%;
}


/*Padding y Márgenes*/

.paddingA {
    padding: 7.08vw 8.5vw;
}

.marginA {
    margin: 7.08vw 8.5vw;
}

.paddingB {
    padding: 4.25vw 5.666vw;
}

.marginB {
    margin: 4.25vw 5.666vw;
}

.paddingC {
    padding: 2.125vw;
}

.marginC {
    margin: 2.125vw;
}


/* ========================================
   Animaciones
   ======================================== */

.light {
    font-weight: 300;
}

.mayus {
    text-transform: uppercase;
}


/* ========================================
   Animaciones
   ======================================== */

.transition.all {
    -webkit-transition-property: all;
    transition-property: all;
}

.transition.in {
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
}

.transition.out {
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.transition.inOut {
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.transition.dur150 {
    -webkit-transition-duration: 150ms;
    transition-duration: 150ms;
}

.transition.dur200 {
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
}

.transition.dur250 {
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
}

.transition.dur300 {
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
}

.transition.dur350 {
    -webkit-transition-duration: 350ms;
    transition-duration: 350ms;
}

.transition.dur400 {
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
}

.transition.dur450 {
    -webkit-transition-duration: 450ms;
    transition-duration: 450ms;
}


/*Transiciones*/

.ejemploDeTransformacion {
    -webkit-transform: translateY(6px) rotate(135deg);
    transform: translateY(6px) rotate(135deg);
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms;
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
}

.ejemploDeTransicion {
    -webkit-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
}


/*Transiciones*/

/************ Modales ***************/

/*Modificaciones a los modales de Bootstrap*/

.modal {
    color: #3e3e3e;
}

.modal-content {
    border-radius: 0 !important;
    padding: 16px;
}

.modal-content h6 {
    font-size: 28px;
    line-height: 1;
    margin: 0;
    text-align: left;
    margin-bottom: 16px;
}

.modal-content button.close {
    position: absolute;
    right: 3%;
    top: 15px;
    width: 35px;
    height: 35px;
    z-index: 1000;
}

.modal-content button.close img {
    height: 24px;
    width: 24px !important;
}

.modal-sm {
    width: 540px;
}

.modal-md {
    width: 720px;
}

.modal-lg {
    width: 85%;
}


/*Modificaciones a los modales de Bootstrap*/

/* ==========================================================================
   Los estilos del sitio
   ========================================================================== */

/*************** UI ***************/

.general-content h2 {
    text-transform: uppercase;
    font-size: 32px;
    display: inline-block;
    margin-bottom: 0;
}

.modal .general-content h2 {
    font-size: 21px;
    margin-top: 32px;
}


/*Este link está pensado para utilizarse como un Leer Más*/

.general-content h2 + a {
    font-size: 21px;
    color: #ccc;
    font-weight: 700;
    margin-left: 6px;
}

.modal .general-content h2 + a {
    font-size: 16px;
}

.general-content h2 + a:hover {
    text-decoration: underline;
}

.general-content h2 + a:visited {
    color: #ccc;
}

.general-content h3 {
    font-size: 21px;
    font-weight: 700;
    color: #004b85;
    margin-top: 0;
}

.general-content h3:only-child {
    margin: 0;
}

.general-content + .general-content h2 {
    margin-top: 0;
}

.standard-card {
    background-color: #fff;
    padding: 16px;
}

.height-card {}

.full-card {
    position: relative;
    border-bottom: solid 12px #fff;
}

.standard-card .show-collapse h3,
.product-list-header h3 {
    display: inline-block;
    margin-bottom: 0;
}

.standard-card .show-collapse .caret-button {
    position: relative;
    float: right;
    color: #9a9a9b;
    padding-right: 32px;
    font-size: 0.95em;
    padding-top: 8px;
    cursor: pointer;
}

.standard-card .show-collapse .caret-button:hover {
    text-decoration: underline;
}

.standard-card .show-collapse .caret-button:after {
    position: absolute;
    top: 13px;
    right: 4px;
    width: 16px;
    height: 8px;
    background-image: url(../img/icn_gral_down-arrow-dark.svg);
    background-repeat: no-repeat;
    -webkit-transition: all 290ms ease-in-out;
    transition: all 290ms ease-in-out;
    content: '';
}

.standard-card .show-collapse .caret-button:hover:after {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
}

.standard-card .show-collapse.in .caret-button:after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.standard-card .show-collapse.in .caret-button:hover:after {
    -webkit-transform: rotate(180deg) translateY(3px);
    transform: rotate(180deg) translateY(3px);
}

.product-filter table {
    width: 100%;
    margin-top: 8px;
}

.product-filter thead {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
}

.product-filter table tr {
    table-layout: fixed;
    vertical-align: top;
}

.product-filter ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    margin-top: 4px;
}

.product-filter li {
    padding: 0.3em 0;
}

.product-list-header {
    margin-bottom: 4px;
}

.product-list-header .ui.select {
    float: right;
    width: 180px;
}


/* Labels */

label {
    font-weight: 700;
}

label {
    line-height: 2;
}

label i {
    margin-right: 0.4em;
}


/* Labels */

/* Select */

.ui.select {
    position: relative;
    height: 28px;
    margin-bottom: 8px;
    color: #3e3e3e;
}

.ui.select.normal {
    font-size: 14px;
    height: 28px;
    margin-bottom: 8px;
}

.ui.select.tablet-small,
.ui.select.small,
.ui.select.underline {
    font-size: 12px;
    height: 24px;
}

.ui.select.simple {
    font-size: 14px;
    height: 24px;
    margin-bottom: 6px;
}

.ui.select.simple-small {
    font-size: 12px;
    height: 22px;
    margin-bottom: 6px;
}

.ui.select.underline {
    margin-top: -1px !important;
}

.ui.select .pretty-ui {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 3px;
    padding-right: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transition: all 120ms ease-in;
    transition: all 120ms ease-in;
}

.ui.select.simple .pretty-ui {
    padding-top: 2px;
}

.ui.select.normal .pretty-ui,
.ui.select.small .pretty-ui,
.ui.select.tablet-small .pretty-ui {
    padding-left: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.ui.select.small .pretty-ui,
.ui.select.tablet-small .pretty-ui {
    padding-left: 10px;
    padding-right: 24px;
}

.ui.select.simple-small .pretty-ui {
    padding-left: 4px;
    padding-right: 20px;
}

.ui.select.underline .pretty-ui {
    font-size: 13px;
    font-weight: 700;
    color: #ccc;
}

.ui.select .pretty-ui:after {
    position: absolute;
    top: 12px;
    right: 9px;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(62, 62, 62, 0);
    border-top-color: #3e3e3e;
}

.ui.select.tablet-small .pretty-ui:after,
.ui.select.small .pretty-ui:after,
.ui.select.simple-small .pretty-ui:after {
    top: 10.5px;
}

.ui.select.simple-small .pretty-ui:after {
    top: 9px;
    right: 7px;
}

.ui.select select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
}

.ui.select:hover .pretty-ui:after {
    border-top-color: #f36f27;
}

.ui.select.normal:hover .pretty-ui,
.ui.select.small:hover .pretty-ui,
.ui.select.tablet-small:hover .pretty-ui {
    border: 1px solid #f36f27;
}

.ui.select.simple:hover .pretty-ui {
    color: #f36f27;
}


/* Select */

/* No List Style */

.no-list-style {
    list-style: none;
    padding-left: 0;
}


/* No List Style */

/* Campos de Texto General */

textarea.ui.field,
.ui.field textarea,
input[type="text"].ui.field,
.ui.field input,
button.ui.field,
.ui.field button {
    outline: none;
    letter-spacing: normal;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input::-moz-input-placeholder,
textarea::-moz-input-placeholder,
input:-moz-input-placeholder,
textarea:-moz-input-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #ccc;
    font-weight: 700;
    font-size: 0.92em;
    letter-spacing: -0.03em;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #ccc;
    font-weight: 700;
    font-size: 0.92em;
    letter-spacing: -0.03em;
}


/* Campos de Texto General */

/* Layout de Inputs */

.ui.layout {
    margin-left: -4px;
    margin-right: -4px;
}

.ui.layout:before,
.ui.layout:after {
    content: " ";
    display: table;
}

.ui.layout:after {
    clear: both;
}

.ui.layout .ui.select,
.ui.layout .ui.field {
    width: 100%;
    float: left;
    padding-left: 4px;
    padding-right: 4px;
}

.ui.layout .ui.select.block-4,
.ui.layout .ui.field.block-4 {
    width: 100%;
}

.ui.layout .ui.select.block-3,
.ui.layout .ui.field.block-3 {
    width: 75%;
}

.ui.layout .ui.select.block-2,
.ui.layout .ui.field.block-2 {
    width: 50%;
}

.ui.layout .ui.select.block-1,
.ui.layout .ui.field.block-1 {
    width: 25%;
}

.ui.layout .ui.field:nth-child(n+2) {
    margin-top: 0px !important;
}

.ui.layout .label {
    font-weight: 700;
    padding-left: 4px;
}


/* Layout de Inputs */

/* Input Field Normal */

.ui.field input,
.ui.field textarea,
.ui.field.with-button,
.ui.select.underline .pretty-ui {
    border-bottom: 1px solid #3e3e3e;
}

.ui.field input:hover,
.ui.field textarea:hover,
.ui.field.with-button:hover,
.ui.select.underline .pretty-ui:hover {
    border-bottom: 1px solid #000;
}

.ui.field.normal input,
.ui.field.normal textarea {
    width: 100%;
}

.ui.field.normal + .ui.field.normal {
    margin-top: 1px;
}

.ui input[type="text"] + .description,
.ui textarea + .description,
.ui.field input + .description {
    margin-top: 1px;
    visibility: hidden;
}

.ui.field.show-description input + .description,
.ui.field.show-description textarea + .description {
    visibility: visible;
}

.ui.error input[type="text"] + .description,
.ui.error textarea + .description,
.ui.field.error input + .description {
    visibility: visible;
    color: red;
}

.ui.field.normal label {
    font-weight: 700;
}


/* Input Field Normal */

/* Input Field con Botón */

.ui.field.with-button input {
    border-bottom: none;
}

.ui.field.with-button input:hover {
    border-bottom: none;
}

.ui.field.with-button input {
    display: inline-block;
    margin-right: -3px;
    height: 25px;
    padding-right: 4px;
}

.ui.field.with-button button {
    display: inline-block;
    background: none;
    border: 0;
    font-weight: 700;
    text-transform: uppercase;
    padding-right: 0;
    padding-left: 4px;
    text-align: center;
    font-size: 14px;
    height: 25px;
}

.ui.field.with-button button:hover {
    color: #f36f27;
}


/* Input Field con Botón */

/* Checkboxes y Radio */

.ui.checkbox,
.ui.select {
    position: relative;
}

input[type="checkbox"],
input[type="radio"] {
    display: none;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url(../img/icn_gral_check-option-sprite.svg);
    background-size: 108px 36px;
    cursor: pointer;
}

input[type="checkbox"] + label {
    background-position: 0 0;
}

input[type="checkbox"] + label:hover {
    background-position: -18px 0;
}

input[type="checkbox"]:checked + label {
    background-position: -36px 0;
}

input[type="checkbox"]:checked + label:hover {
    background-position: -54px 0;
}

input[type="checkbox"]:disabled + label {
    background-position: -72px 0;
}

input[type="checkbox"]:checked:disabled + label {
    background-position: -90px 0;
}

input[type="checkbox"]:disabled + label:hover {
    cursor: not-allowed;
}

input[type="radio"] + label {
    background-position: 0 -18px;
}

input[type="radio"] + label:hover {
    background-position: -18px -18px;
}

input[type="radio"]:checked + label {
    background-position: -36px -18px;
}

input[type="radio"]:checked + label:hover {
    background-position: -54px -18px;
}

input[type="radio"]:disabled + label {
    background-position: -72px -18px;
}

input[type="radio"]:checked:disabled + label {
    background-position: -90px -18px;
}

input[type="radio"]:disabled + label:hover {
    cursor: not-allowed;
}

input[type="checkbox"]:checked + label span,
input[type="radio"]:checked + label span {
    font-weight: 700;
}

input[type="checkbox"] + label span,
input[type="radio"] + label span {
    position: absolute;
    left: 26px;
    top: 2px;
    line-height: 1;
    white-space: nowrap;
}

.small input[type="checkbox"] + label span,
.small input[type="radio"] + label span {
    font-size: 13px;
}

input[type="radio"] + label span img {
    display: block;
    height: 24px;
    margin-top: -5px;
}

.ui .description {
    font-size: 12px;
    color: #9a9a9b;
}

.ui input[type="radio"] ~ .description {
    margin-left: 27px;
    margin-top: -4px;
}

.ui.important-description .description {
    font-size: 13px;
}

.ui.important-description input[type="radio"]:checked ~ .description {
    color: #3e3e3e;
}

.ui.important-description .description + .ui.button.minimal {
    margin-left: 27px;
    margin-bottom: 6px;
}

.ui.field + .ui.checkbox,
.ui.field + .ui.select {
    margin-bottom: 10px;
}

.radios-oneline {
    margin: 0 0 12px 0;
    width: 32%;
    display: inline-block;
}

/* Checkboxes y Radio */

/* Botones */

.ui.button {
    height: 40px;
    padding-left: 16px;
    padding-top: 9px;
    padding-right: 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 120ms ease-in;
    transition: all 120ms ease-in;
    cursor: pointer;
    text-align: center;
    border: none;
}

button.ui.button {
    padding-top: 3px;
    width: 100%;
}

.ui.button.primary {
    background-color: #ec008c;
}

.ui.button.primary:hover {
    background-color: #d60061;
}

.ui.button.secondary-blue {
    background-color: #0D4C85;
}

.ui.button.secondary-blue:hover {
    background-color: #256DA3;
}

.ui.button.secondary-oran {
    background-color: #F36F27;
}

.ui.button.secondary-oran:hover {
    background-color: #F68A53;
}

.ui.button.thirdary {
    background-color: #3e3e3e;
}

.ui.button.thirdary:hover {
    background-color: #535353;
}


.ui.button.express,
.ui.button.add-to-cart {
    padding-left: 48px;
    padding-right: 8px;
    text-align: left;
}

.ui.button.add-to-cart:before,
.ui.button.express:before {
    background-position: 0px 0px;
    top: 11px;
    left: 13px;
    content: '';
    background-image: url(../img/icn_ui-button-checkout.svg);
    background-size: 37px 19px;
    background-repeat: no-repeat;
    width: 21px;
    height: 19px;
    position: absolute;
}

.ui.button.express:before {
    background-position: -21px 0px;
    top: 10px;
    left: 15px;
}

.ui.button.add-to-cart:after {
    content: 'Agregar a Carrito';
}

.ui.button.express:after {
    content: 'ExpressPay';
}

.ui.button.minimal {
    width: auto;
    height: auto;
    display: inline-block;
    color: #666;
    padding: 3px 0;
    font-size: 0.9em;
    font-weight: 400;
    cursor: pointer;
    margin-bottom: -5px;
}

.ui.button.minimal:hover {
    text-decoration: underline;
}

.ui.button.minimal:hover a {
    color: #ec008c;
}

.ui.button + .ui.button {
    margin-top: 12px;
}

.ui.button.with-icon {
    color: #3e3e3e;
    text-align: left;
    padding: 0;
    font-weight: 400;
    height: auto;
}

.ui.button.with-icon img,
.ui.button.with-icon .text {
    display: inline-block;
    height: 17px;
    vertical-align: middle;
    margin: 0;
}

.ui.button.with-icon .text {
    margin-left: 4px;
}

/* Botones */

/* Menus */

.ui.menu.minimal {
    margin-bottom: 16px;
}

.ui.menu.minimal a:hover .button {
    text-decoration: underline;
}

.ui.menu.minimal .button {
    display: inline-block;
    padding-left: 8px;
    padding-right: 12px;
    border-right: 1px solid #9a9a9b;
}

.ui.menu.minimal a:first-child .button {
    padding-left: 0;
}

.ui.menu.minimal a:last-child .button {
    border-right: none;
}

.ui.menu.minimal .button.active {
    text-decoration: underline;
}


/* Menus */

/*************** Temina UI ***************/

/*************** UI2 ***************/

/* El ícono */

.ui2.icon i {
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    text-align: center;
    background-color: #0d4c85;
    color: #fff;
    margin: 0;
    font-size: 1.1em;
    padding-top: 0.4em;
}

.ui2.icon .success {
    background-color: #5FEB7A;
}

.ui2.icon .process {
    background-color: #F36F27;
}

.ui2.icon .rejected {
    background-color: #EC008C;
}

.ui2.icon.required i:after {
    content: '';
    position: absolute;
    top: -4px;
    left: 24px;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 100%;
    z-index: 1;
}

/* Input Field de Una Línea */

.ui.field.one-line,
.ui2.field.icon.one-line {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 12px;
}

.ui.field.one-line label,
.ui2.field.icon.one-line label {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 34%;
    font-size: 0.9em;
    letter-spacing: -0.4px;
}


/* label muy largo */

.ui.field.one-line.two label,
.ui2.field.icon.one-line.two label,
.ui2.one-select.two label {
    line-height: 1.2;
}

.ui.field.one-line input,
.ui2.field.icon.one-line > div {
    margin-left: 6px;
    -webkit-box-flex: 99;
    -ms-flex-positive: 99;
    flex-grow: 99;
}

.ui2.field.one-line input:focus {
    outline: none;
}

/*selects one line*/

.ui2.one-select label {
    width: 35% !important;
    font-size: 0.9em;
    letter-spacing: -0.4px;

}


/* Input Field de Una Línea */

/* Input Field con icono */

.ui2.field.icon {
    position: relative;
    height: 28px;
    width: 100%;
    margin-bottom: 12px;
}

.ui2.field.icon input {
    width: 100%;
    height: 28px;
    vertical-align: top;
    padding-top: 0.1em;
    border: 1px solid #ccc;
    padding-left: 36px;
}


/* Input Field con icono */

/* Input Field con icono y de Una Línea */

.ui2.field.icon.one-line > div {
    position: relative;
}


/* Input Field con icono y de Una Línea */

/* Select */

.ui2.select {
    position: relative;
    height: 28px;
    width: 100%;
    margin-bottom: 8px;
    color: #3e3e3e;
    font-size: 14px;
}

.ui2.select .pretty-ui {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 3px;
    padding-left: 36px;
    padding-right: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-transition: all 120ms ease-in;
    transition: all 120ms ease-in;
    border: 1px solid #ccc;
}

.ui2.select .pretty-ui:after {
    position: absolute;
    top: 12px;
    right: 9px;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(62, 62, 62, 0);
    border-top-color: #3e3e3e;
}

.ui2.select select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
}

.ui2.select:hover .pretty-ui:after {
    border-top-color: #f36f27;
}

.ui2.select.icon:hover .pretty-ui {
    border: 1px solid #f36f27;
}

.ui2.one-line-cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.ui2.one-line-cont label {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: auto;
}

.ui2.one-line-cont .select,
.ui2.one-line-cont .field,
.ui2.one-line-cont .range-slide {
    -webkit-box-flex: 99;
    -ms-flex-positive: 99;
    flex-grow: 99;
    width: auto;
}

.ui2.one-line-cont label::after {
    content: '\00a0 '
}

/* Select */

.ui2.field,
.ui2.select,
.ui.range-slider,
.ui.checkbox {
    margin-bottom: 19px;
}

.range-slider {
    position: relative;
}

/* fake search */

.ui2.searching ul {
    position: absolute;
    width: calc(100% - 28px);
    left: 28px;
    list-style: none;
    padding: 5px 0px;
    margin-top: -1px;
    border: 1px solid #ccc;
    background-color: #fff;
    -webkit-transition: all 120ms ease-in;
    transition: all 120ms ease-in;
    font-size: 13px;
    color: #666;
    z-index: 10;
}

.ui2.searching li {
    padding: 1px 10px;
}

.ui2.searching li:hover {
    color: #000;
    background-color: rgba(13, 76, 133, 0.07);
}

/*** ui2 errors ***/

/*Error en formas*/

.ui2.one-line-cont input.error,
.ui2.one-line-cont textarea.error {
    border: 1px solid red !important;
}

.ui2.one-line-cont input.error::-webkit-input-placeholder,
.ui2.one-line-cont textarea.error::-webkit-input-placeholder {
    color: red;
}

.ui2.one-line-cont input.error:-ms-input-placeholder,
.ui2.one-line-cont textarea.error:-ms-input-placeholder {
    color: red;
}

.ui2.one-line-cont input.error::placeholder,
.ui2.one-line-cont textarea.error::placeholder {
    color: red;
}

/*Error en formas*/

/*** ui2 errors ***/

/*************** Temina UI2 ***************/

/*************** Header ***************/

body {}

#header {
    top: 0;
    left: 0;
    position: relative;
    height: 48px;
    width: 100%;
    background-color: #fff;
    color: #004b85;
    z-index: 900;
    position: fixed;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.head-logo {
    position: absolute;
    left: 0;
}

.head-logo img {
    margin: 6px;
    margin-left: 12px;
    height: 35px;
}

.user {
    position: absolute;
    top: 0;
    right: 0;
}

.user .head-profile {
    margin-top: 8px;
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
}

.user .head-profile img {
    border-radius: 50%;
    width: 100%;
}

.user .rel .badge {
    position: absolute;
    z-index: 5;
    bottom: 16px;
    right: 24px;
    padding: 5px;
    border-radius: 50px;
    background-color: #ff34ac;
    font-size: 11px;
    line-height: 1;
    text-align: right !important;
    color: #fff;
}

.user .head-profile:hover .badge {
    background-color: #ec008c;
}

#user-menu {
    height: 48px;
    padding-left: 12px;
    display: inline-block;
    cursor: pointer;
}


#user-menu-name {
    display: inline-block;
    padding: 8px;
    max-width: 200px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    vertical-align: top;
    margin-bottom: 0;
    color: #004b85;
}

#user-menu-name strong {
    font-size: 13px;
}

#user-menu .caret-button,
.tools .caret-button {
    display: inline-block;
    width: 12px;
    height: 48px;
    background-repeat: no-repeat;
    background-image: url(../img/icn_gral_down-arrow-purple.svg);
    background-position: center center;
    margin-right: 12px;
}

#header .dropdown-parent {
    height: 48px;
}

#header .dropdown-parent:hover + .dropdown-child,
#header .sub-menu:hover .dropdown-child,
#user-menu:hover .dropdown-child,
.dropdown-child:hover {
    display: block;
}

#header .dropdown-child {
    position: absolute;
    top: 100%;
    left: 0;
    width: 160px;
    list-style: none;
    padding-left: 0;
    background-color: #fff;
    margin: 0;
    display: none;
}

#header .right .dropdown-child {
    left: auto;
    right: 2px;
}

#header .dropdown-child li {
    margin: 0;
    padding: 8px;
    font-size: 0.8em;
    text-align: center;
    border-top: 1px solid #ededed;
}

#header .dropdown-child a:first-child li {
    border-top: none;
}

#header .dropdown-child li:hover {
    background-color: #e6f6ff;
    color: #ec008c;
    text-decoration: underline;
}

#header .tools {
    position: absolute;
    left: 200px;
    height: 48px;
}

#header .tools .tools-filter {
    display: inline-block;
    vertical-align: top;
    width: 17px;
    cursor: pointer;
    width: 48px;
    height: 48px;
    padding: 13px;
}

#header .tools .tools-filter img {
    width: 100%;
}

#header .sub-menu {
    position: relative;
    display: inline-block;
    margin-left: 48px;
    height: 48px;
    padding-left: 12px;
    cursor: pointer;
}

#header .tools-filter:hover,
#header .sub-menu:hover,
#user-menu:hover {
    background-color: #c4e1e8;
}

#header .sub-menu .sub {
    display: inline-block;
    vertical-align: top;
    padding-top: 12px;
    padding-right: 8px;
    font-weight: 600;
    font-size: 15px;
    color: #004b85;
}


/*************** Termina Header ***************/

/*************** Sidebar ***************/

#sidebar {
    width: 248px;
    height: calc(100% - 48px);
    background-color: #fff;
    z-index: 100;
    color: #fff;
    padding: 12px;
    -webkit-transform: translateX(-248px);
    transform: translateX(-248px);
}

#sidebar,
.main-info {
    -webkit-transition: all 190ms ease-in-out;
    transition: all 190ms ease-in-out;
}


/*Mediante jQuery le agregamos la clase expanded para abrir el sidebar*/

#sidebar.expanded {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

#sidebar h3 {
    color: #9a9a9b;
    font-size: 16px;
}

.calendario {
    width: 224px;
    color: #004b85;
    font-size: 12px;
}

.calendario * {
    float: left;
}

.calendario .title .prev,
.calendario .title .next {
    width: 28px;
    height: 28px;
    cursor: pointer;
    background-size: 6px 12px;
    background-position: center center;
    background-repeat: no-repeat;
}

.calendario .title .prev:hover,
.calendario .title .next:hover {
    opacity: 0.6;
}

.calendario .title .prev {
    background-image: url(../img/icn_gral_left-arrow-purple.svg);
}

.calendario .title .next {
    background-image: url(../img/icn_gral_right-arrow-purple.svg);
}

.calendario .title .month {
    padding-top: 3px;
    width: 168px;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
}

.calendario .day-names {
    padding-left: 28px;
    font-weight: 700;
}

.calendario .weeks {
    width: 28px;
    color: #9a9a9b;
}

.calendario .day-names div,
.calendario .weeks div,
.calendario .days div {
    position: relative;
    width: 28px;
    height: 28px;
    padding-top: 6px;
    text-align: center;
    text-transform: uppercase;
    background-size: 26px;
    background-position: center center;
    background-repeat: no-repeat;
}

.calendario .weeks div:hover {
    color: #222;
    cursor: pointer;
}

.calendario .weeks div:hover:after,
.calendario .weeks div.active:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 224px;
    height: 28px;
    border-radius: 4px;
    background-color: hsl(279, 11%, 85%);
    z-index: -1;
}

.calendario .weeks div.active {
    color: #fff;
}

.calendario .weeks div.active:after {
    background-color: hsl(279, 11%, 65%);
}

.calendario .days {
    width: 196px;
}

.calendario .days div {
    cursor: pointer;
}

.calendario .days .active {
    color: #fff;
    background-image: url(../img/icn_sidebar_calendar-active.svg);
}

.calendario .days .secondary {
    color: #6f6f70;
}

.calendario .days div:not(.active):hover {
    background-image: url(../img/icn_sidebar_calendar-hover.svg);
}

.quick-calendar {
    margin-top: 12px;
}

.quick-calendar .title {
    color: #004b85;
    font-weight: 700;
    margin-bottom: 6px;
}

.quick-calendar .select {
    display: inline-block;
    vertical-align: top;
}

#qc-day.ui.select {
    width: 38px;
    margin-top: 0 !important;
}

#qc-month {
    width: 86px;
}

#qc-year {
    width: 52px;
}

.quick-calendar button {
    outline: none;
    letter-spacing: normal;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    background-color: #f36f27;
    border-radius: 50%;
    border: none;
    font-size: 12px;
    font-weight: 400;
    line-height: 0;
    margin-top: 0;
    display: inline-block;
    vertical-align: top;
    color: #fff;
}

.quick-calendar button:hover {
    background-color: #004b85;
}

#sidebar .ui.select {
    color: #004b85;
}

#sidebar .ui.select:first-child {
    margin-top: 12px;
}

#sidebar .ui.select.normal .pretty-ui,
#sidebar .ui.select.small .pretty-ui,
#sidebar .ui.select.tablet-small .pretty-ui {
    border: 1px solid #b3b3b3;
}

#sidebar .ui.select .pretty-ui:after {
    border-color: rgba(62, 62, 62, 0);
    border-top-color: #004b85;
}

#sidebar .footer {
    position: absolute;
    bottom: 4px;
    width: 224px;
    color: #004b85;
    font-size: 12px;
}

#sidebar .footer div {
    border-top: 1px solid #004b85;
    padding: 7px 2px;
}

#sidebar .footer .info2 {
    font-size: 9.5px;
}


/*************** Termina Sidebar ***************/

/*************** Main Login ***************/

#main-login {
    height: 100%;
    width: 100%;
}

#main-login .logo {
    text-align: center;
    margin-bottom: 16px;
}

#main-login .logo img {
    width: 130px;
}

#main-login .minimal {
    display: block;
}


/*************** Termina Main Login ***************/

/*************** Dashboard ***************/

#dashboard {
    margin-top: 56px;
}

.dashboard-icon {
    display: inline-block;
    width: 192px;
    height: 192px;
    margin-right: 6.7%;
    margin-bottom: 80px;
    background-color: #004b85;
}

.dashboard-icon:hover {
    background-color: #01406b;
}

.dashboard-icon:nth-child(4) {
    margin-right: inherit;
}

.dashboard-icon img {
    width: 100%;
}

.dashboard-icon .icon-name {
    padding: 10px 0;
    font-weight: 600;
    text-align: center;
}


/*************** Termina Dashboard ***************/

/*********** Contenido Central ********+*/

.new-container {
    width: auto;
    overflow-x: scroll;
    overflow-y: visible;
    position: relative;
}

/*Mediante jQuery agregamos la clase expanded para que se recorra junto con la sidebar*/

.main-info.expanded {
    margin-left: 248px;
}

.main-info {
    padding: 12px;
}

.main-info.big-table {
    padding: 0;
}

.main-info h1 {
    margin-top: 0;
    margin-bottom: 0.15em;
}

.big-table h1 {
    margin-top: 12px;
    margin-left: 12px;
    color: #0d4c85;
}

.main-info table {
    background-color: #fff;
}


/*Tablas*/

.main-info table {
    width: 100%;
}

th,
td {
    padding: 0.5em 0.75em;
}

tbody td {
    color: #6f6f70;
}

tbody tr {
    border-bottom: 1px solid #9a9a9b;
}

tbody tr:nth-child(even) {
    background-color: hsl(278, 22%, 96%);
}

tbody tr:hover {
    background-color: hsl(278, 22%, 91%);
}

tbody td {
    text-align: center;
}

tbody td:first-child {
    text-align: left;
}

.main-info table .up {
    color: green;
}

.main-info table .down {
    color: red;
}

.main-info table .up span,
.main-info table .down span {
    position: relative;
    margin-left: 12px;
}

.main-info table .up span:after,
.main-info table .down span:after {
    content: '';
    position: absolute;
    top: 0.45em;
    right: 4px;
    width: 0;
    height: 0;
}

.main-info table .up span:after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid green;
}

.main-info table .down span:after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid red;
}

.main-info table a,
.main-info table a:visited {
    text-decoration: underline;
    color: #f36f27;
}



/*Tablas*/

/*Tabla Grande de Encabezado Fijo que utilizamos en Open To Buy*/

.big-table {
    position: relative;
}

.big-table table {
    border-collapse: collapse;
}


/*Este estilo es fundamental para que funcione el encabezado fijo*/

.big-table table.fixed {
    top: 45px;
    position: fixed;
    width: auto;
    display: none;
    border: none;
    z-index: 10;
    table-layout: fixed;
    -webkit-transition: -webkit-transform 190ms ease-in-out;
    transition: -webkit-transform 190ms ease-in-out;
    transition: transform 190ms ease-in-out;
    transition: transform 190ms ease-in-out, -webkit-transform 190ms ease-in-out;
}


/*Esto hace que cuando abramos el filtro el header también recorra*/

.main-info.expanded.big-table table.fixed {
    -webkit-transform: translateX(248px);
    transform: translateX(248px);
    left: 0;
}

.big-table tr {
    position: relative;
}

.big-table td {
    white-space: nowrap;
}


#modal-table-edit .modal-content {
    background-color: #fff;
    border-radius: 0 !important;
    padding: 16px;
}

#modal-table-edit .modal-sm {
    width: 370px;
}

#modal-table-edit form {
    line-height: 1.1;
}

#modal-table-edit input,
#modal-table-edit input::-webkit-input-placeholder {
    font-weight: 300;
    text-align: center;
}

#modal-table-edit input,
#modal-table-edit input:-ms-input-placeholder {
    font-weight: 300;
    text-align: center;
}

#modal-table-edit input,
#modal-table-edit input::placeholder {
    font-weight: 300;
    text-align: center;
}

#modal-table-edit input:disabled {
    font-weight: 600;
    background-color: #efefef;
    padding: 3px;
}

.edit-disable {
    border-bottom: none !important;
    cursor: not-allowed !important;
}

.modal-table-week {
    font-weight: 600;
    text-align: center;
}

.modal-table-week span {
    color: #999;
    font-weight: 300;
}


/*Termina Tabla Grande de Encabezado Fijo*/

/*Reportes*/

#chart {
    margin-top: 12px;
}

#chart .ui.select {
    width: 200px;
    float: right;
}


/*Termina Reportes*/

/*Many Fields Form*/

#manyFieldsform-area {
    padding: 0;
}

.mff-button {
    padding: 0;
    padding-bottom: 24px;
}

.mff-button:nth-child(1) {
    padding-right: 5px;
}

.mff-button:nth-child(2) {
    padding-left: 5px;
}

.mff-form {
    padding: 0;
    padding-right: 16px;
    border-right: 1px solid #999;
}

.mff-form:nth-child(2) {
    padding-left: 16px;
    padding-right: 0;
    border: 0;
}

.mff-form h3 {
    margin: 0;
    padding-bottom: 16px;
    text-transform: uppercase;
}

.mff-spacer {
    padding-top: 32px;
}


/*Many Fields Form*/

/**** Drop Element ****/

/*aquí definimos el color de fondo, la sombra y cositas para que haga trancsión animada*/

.drop-element {
    opacity: 0;
    background-color: #fff;
    padding: 12px;
    padding-bottom: 6px;
    -webkit-box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.25);
    -webkit-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

.drop-element.drop-open-transitionend {
    display: block;
}

.drop-element.drop-after-open {
    opacity: 1;
}


/**** Drop Element ****/

/**** 4 cuadrantes ****/

.cuadrante #c2,
.cuadrante #c4 {
    background-color: rgba(13, 76, 133, 0.03)
}

.cuadrante-title {
    color: #0d4c85;
    font-size: 1.8em;
    font-weight: 700;
    height: 36px;
    padding-top: 12px;
    padding-left: 16px;
    line-height: 1;
    text-transform: uppercase;
}

.cuadrante-card {
    position: relative;
    padding: 16px;
}

.cuadrante-big-card {
    position: relative;
    padding: 16px;
    margin-left: auto;
    margin-right: auto;
    max-width: 650px;
}

.cuadrante-S-card {
    position: relative;
    padding: 16px;
}

.cuadrante-height {
    height: 20vh;
}

#cuadrante-icon {
    margin-left: auto;
    margin-right: auto;
    width: 80%;

}

#cuadrante-icon i {
    color: #0d4c85;
    padding-top: 5px;
    font-size: 2.2em;
}

#cuadrante-icon h1 {
    font-size: 22px;
    padding: 0 10px;
    display: inline;
}

#cuadrante-icon p {
    margin: 0;
    padding: 10px 0;
}

.cuadrante-card .standard-card {
    padding: 0 12px;
    border: 12px solid #fff none;
}

.cuadrante-S-card .standard-card h1,
.cuadrante-big-card .standard-card h1 {
    color: #0d4c85;
    font-size: 2.2em;
    margin: 12px 0;
}

.cuadrante-card .standard-card h1 {
    color: #0d4c85;
    font-size: 2.2em;
    margin: 12px 0;
    padding-top: 12px;
}

.cuadrante-card .search {
    position: absolute;
    right: 28px;
    top: 27px;
    width: 50%;
    border-bottom: solid 1px #666;
}

.cuadrante-card .search input {
    background: transparent;
    width: 55%;
}

.cuadrante-card .search input:focus {
    outline: none;
}

.cuadrante-card .search button {
    float: right;
    background-color: transparent;
    border: none;
    text-transform: uppercase;
    font-weight: 700;
    text-align: right;
    font-size: 16px;
    line-height: 1;
    width: 78px;
    -webkit-transition: all 190ms ease-in-out;
    transition: all 190ms ease-in-out;
    color: #999;
}

.cuadrante-card .search button:hover {
    color: #000;
}

.cuadrante-full {
    position: absolute;
    width: 100%;
    height: calc(100% - 84px);
}

.cuadrante-full .quarter {
    position: relative;
    width: 100%;
    height: 25%;
}

.cuadrante-full .single {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
    cursor: pointer;
}

.cuadrante-full .single:hover {
    background: rgba(13, 76, 133, 0.07);
}

/**tabla**/

.cuadrante-cliente {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
    margin-bottom: 8px;
}

.cuadrante-cliente th {
    font-size: 1.05em;
}

.cuadrante-cliente tr:first-child {
    border-bottom: solid 3px #000;
}

.cuadrante-cliente tr:first-child:hover {
    background-color: inherit;
}

.cuadrante-cliente tr {
    border-bottom: solid 1px #000;
}

.cuadrante-cliente tr:hover,
.cuadrante-cliente tr:nth-child(even):hover {
    background-color: rgba(13, 76, 133, 0.07);
}

.cuadrante-cliente tr:nth-child(even) {
    background-color: #F8FDFF;
}

.cuadrante-cliente td {
    text-align: left;
    font-size: 0.9em;
}

.cuadrante-cliente .long {
    max-width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cuadrante-cliente .profile {
    padding: 0;
    margin: 4px;
    width: 28px;
    height: 28px;
    display: inline-block;
    vertical-align: top;
}

.cuadrante-cliente .profile img {
    border-radius: 50%;
    width: 100%;
}

.cuad-pag {
    color: #0d4c85;
}

.cuad-pag .pag-back:hover {
    color: #ec008c;
}

.cuad-pag .pag-num {
    text-align: center;
}

.cuad-pag .pag-num span:after {
    content: 'de'
}

.cuad-pag .pag-next {
    text-align: right;
}

.cuad-pag .pag-next:hover {
    color: #ec008c;
}

.cliente-interior table {
    width: 100%;
    border-bottom: solid 1px #000;
}

.cliente-interior tr:hover {
    background-color: inherit;
}

.cliente-interior td {
    padding-bottom: 8px;
    padding-top: 8px;
    text-align: left;
}

.cliente-interior td span {
    font-weight: 600;
    font-size: 1.2em;
    color: #000;
}

.cliente-interior td span a:hover {
    text-decoration: underline;
}

.cliente-interior td:last-child {
    text-align: right;
}

.cliente-interior .profileG {
    width: 72px;
    height: 72px;
    display: inline-block;
    vertical-align: top;
}

.cliente-interior .profileG img {
    border-radius: 50%;
    width: 100%;
}

.cliente-datos {
    margin-top: 8px;
    width: 100%;
    display: inline-block;
}

.cliente-datos a {
    color: #ec008c;
}

.cliente-datos a:hover {
    text-decoration: underline;
}

.datos-bottom {
    padding: 30px 0;
    border-bottom: solid 1px #000;
}

.datos-top {
    padding-top: 20px;
}

.cliente-credit table {
    text-align: left;
    width: 100%;
    margin-bottom: 5px
}

.cliente-credit th {
    text-align: center;
}

.cliente-credit th:first-child {
    text-align: left;
}


.cliente-credit th:last-child,
.cliente-credit td:last-child {
    text-align: right;
}

.cliente-credit thead {
    background-color: #fff;
}

.cliente-credit thead tr:first-child {
    color: #0d4c85;
    font-size: 1.35em;
    font-weight: 700;
    padding-bottom: 8px;
    line-height: 1.2;
    border-bottom: none;
}

.cliente-credit thead tr:first-child td {
    text-align: left;
}

.cliente-credit thead tr:last-child {
    border-bottom: solid 3px #000;
}

.cliente-credit table tr:first-child:hover {
    background-color: inherit;
}

.cliente-credit tbody tr {
    border-bottom: solid 1px #000;
}

.cliente-credit tbody tr:hover,
.cliente-credit tbody tr:nth-child(even):hover {
    background-color: rgba(13, 76, 133, 0.07);
}

.cliente-credit tbody tr:nth-child(even) {
    background-color: #F8FDFF;
}

.cliente-credit tbody tr i:after {
    content: '-';
}

.cliente-credit tbody tr a {
    padding: 5px;
}

.cliente-credit tr a:hover {
    text-decoration: underline;
}

/**tabla**/

/*** investigaciones ***/

.investi-schedule {
    display: inline-block;
}


/*** investigaciones ***/

/***mapa**/

#map-canvas {
    width: 100%;
    min-height: 200px;
    height: 28vh;
    margin-top: 8px;
    background-color: #d1d1d1;
}

#map-canvas2 {
    width: 90%;
    margin-left: 10%;
    min-height: 165px;
    height: 22vh;
    margin-top: 8px;
    background-color: #d1d1d1;
}

#map-canvasFull {
    width: 100%;
    height: 500px;
    height: 60vh;
    margin-top: 20px;
    background-color: #d1d1d1;
}


/** select & fields **/

.cuadrante-card .selector {
    position: absolute;
    right: 28px;
    top: 16px;
    width: 50%;
}

.cuadrante-card .select .pretty-ui {
    float: right;
    width: 180px;
}

.cuadrante-card .selector .status {
    float: right;
    text-align: right;
    width: 200px;
}

/* CUADROS DE ESTATUS DE COLORES */

.cuadrante-card .selector .status span,
.cliente-card .cliente-credit td span {
    padding: 5px 10px;
    color: #fff;
    font-weight: 600;
}


.cuadrante-card .selector .status .success,
.cliente-card .cliente-credit .success {
    background: #5FEB7A;
}

.cuadrante-card .selector .status .success:after {
    content: 'Exitosa';
}

.cliente-card .cliente-credit .success:after {
    display: inline-block;
    width: 70px;
    content: 'Pagado';
}

.cuadrante-card .selector .status .process,
.cliente-card .cliente-credit .process {
    background: #F36F27;
}

.cuadrante-card .selector .status .process:after {
    content: 'En Proceso';
}

.cliente-card .cliente-credit .process:after {
    display: inline-block;
    width: 70px;
    content: 'Pendiente';
}

.cuadrante-card .selector .status .rejected,
.cliente-card .cliente-credit .rejected {
    background: #EC008C;
}

.cuadrante-card .selector .status .rejected:after {
    content: 'Rechazada';
}

.cliente-card .cliente-credit .rejected:after {
    display: inline-block;
    width: 70px;
    content: 'Vencido';
}


.cliente-datos ul {
    list-style: none;
    padding-left: 0px;
    line-height: 1.6;
}

.cliente-datos .success,
.cliente-datos .process,
.cliente-datos .rejected {
    position: absolute;
    width: 16px;
}

.cliente-datos .success:before {
    content: url(../img/icn_docu_sucess.svg);
}

.cliente-datos .process:before {
    content: url(../img/icn_docu_process.svg);
}

.cliente-datos .rejected:before {
    content: url(../img/icn_docu_rejected.svg);
}

.fake {
    margin-top: 10px;
    background-image: url(../img/img_fake_graph);
    background-position: center;
    background-size: cover;
    min-height: 200px;
    height: 28vh;
}

.cliente-datos .list {
    padding-left: 22px;
}

.cuad-link:hover {
    color: #ec008c;
    text-decoration: underline;
}

/** creditos **/

.cuadrante-card .creditos {
    margin-top: 10px;
}

.cuadrante-S-card .creditos-S {
    margin-top: -30px;
}

.cuadrante-card .creditos .cred-line,
.cuadrante-card .creditos-S .cred-line {
    border-bottom: solid 1px #333;
    padding: 10px 0px;
}

.cuadrante-S-card .creditos-S .cred-line:first-child {
    text-align: right;
}

.cuadrante-card .creditos .cred-line:last-child,
.cuadrante-card .creditos-S .cred-line:last-child {
    border-bottom: none;
}

.cuadrante-card .creditos .cred-big,
.cuadrante-S-card .creditos-S .cred-big {
    text-align: right;
    font-size: 28px;
    font-weight: 600;
    color: #ec008c;
    line-height: 1;
}

.cuadrante-back {
    padding: 10px 16px;
}

.cuadrante-back i:after {
    content: '\00a0';
}

.cuadrante-back:hover {
    text-decoration: underline;
    color: #ec008c;
}

#c-botos {
    position: absolute;
    z-index: 1000;
    right: 0;
    bottom: 10px;
    margin: 4px;
    background-color: #0D4C85;
    color: #fff;
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 20px;
    border-radius: 50%;
}

#c-botos:hover {
    background-color: #5FEB7A;
}

#controls {
    margin-top: 20px;
}

.controls .controls-b {
    display: block;
    float: left;
    width: 50%;
    margin-top: 10px;
    text-decoration: none;
}

.controls .controls-b:first-child {
    padding-right: 5px
}

.controls .controls-b:nth-of-type(2) {
    padding-left: 5px
}

/*** modales bonitos ***/

.ex-modal {
    float: right;
}

#modalEx .modal-content,
#modalPerfil .modal-content {
    width: 80vw;
    left: 8vw;
    background-color: #fff;
}

#modalEx .modal-content h3,
#modalPerfil .modal-content h3 {
    margin: 0;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid #0D4C85;
    color: #0D4C85;
    font-size: 1.2em;
    text-transform: uppercase;
}

#modalEx .modal-content .liner,
#modalPerfil .modal-content .liner {
    border-bottom: 1px dashed #3e3e3e;
    margin-bottom: 16px;
}

#modalEx .modal-content h2 {
    font-size: 1.75em;
    margin-bottom: 15px;
}


#modalEx .modal-profile {
    padding-right: 3%;
    padding-bottom: 3%;

}

#modalEx .modal-profile img {
    width: 100%;
    border-radius: 50%;
}

#modalEx .modal-sub {
    font-weight: 600;
    color: #000;
    font-size: 1.1em;
}

#modalEx .modal-sub i::after {
    content: '\00a0\00a0';
}

#modalEx .modal-text {
    color: #0D4C85;
    line-height: 2;
}

#modalEx .modal-img {
    border-right: 1px dashed #3e3e3e;
}

#modalEx .modal-img:last-of-type {
    border-right: 0;
}

#modalEx .modal-img .modal-sub {
    text-align: center;
}

#modalEx .modal-img img {
    width: 100%;
    padding: 5% 10% 10% 10%;
}

#modalEx .modal-button {}

#modalPerfil .modal-button {
    display: inline-block;
    width: 48.5%;
}

/*** modales ***/

/*** estado de cuenta ***/

#estado .edo-div {
    border-bottom: 1px solid #0d4c85;
    width: 155px;
}

#estado h3 {
    margin: 0;
    padding-bottom: 8px;
    color: #0D4C85;
    font-size: 1.2em;
}

#estado h3 span {
    color: #333;
    font-size: 0.9em;
}

#estado .edo-profile {
    width: 60px;
    padding: 10px 0;
    float: left;
}

#estado .edo-profile img {
    width: 100%;
    border-radius: 50%;
}

#estado .edo-head {
    width: calc (100% - 60px);
    float: left;
    padding: 10px;
}

#estado .edo-socio {
    margin: 0;
    padding-bottom: 5px;
    font-size: 1.5em;
}

.socio-credit table {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    margin-bottom: 5px;
    font-size: 0.85em;
    background: #fff;
}

.socio-credit th,
.socio-credit td {
    min-width: 83px;
}

.socio-credit th {
    padding: 15px 4px;
}

.socio-credit tr:last-child {
    padding-right: 16px;
}

.socio-credit th {
    text-align: center;
}

.socio-credit th:first-child {
    text-align: left;
}

.socio-credit thead tr:last-child {
    border-bottom: solid 3px #000;
}

.socio-credit table tr:first-child:hover {
    background-color: inherit;
}

.socio-credit tbody tr {
    border-bottom: solid 1px #999;
}

.socio-credit tbody tr:last-child {
    border-bottom: solid 12px #fff;
}

.socio-credit tbody tr:hover,
.socio-credit tbody tr:nth-child(even):hover {
    background-color: #f5f5f5;
}

.socio-credit tbody tr:hover td.resal,
.socio-credit tbody tr:nth-child(even):hover td.resal {
    background-color: #f1f1f1 !important;
}

.socio-credit tbody tr:nth-child(even) {
    background-color: #fffaf7;
}

.socio-credit tbody tr a {
    padding: 5px;
}

.socio-credit tr a:hover {
    text-decoration: underline;
}

.socio-credit .credit-num {
    background-color: #999;
    letter-spacing: 0.05em;
    font-weight: 400;
}

.socio-credit .credit-num :last-child {
    text-align: right;
}

.socio-credit .credit-num:hover {
    background-color: #999 !important;
}

.socio-credit .credit-num td {
    padding: 9px 8px;
    color: #fff;
}

.socio-credit .credit-num td span {
    font-weight: 600;
    font-size: 1.2em;
}

.socio-credit .resah {
    color: #000;
    background: #f7f7f7;
    font-weight: 600;
}

.socio-credit .resal {
    color: #000;
    background: #fde2d4;
    font-weight: 600;
    text-decoration: underline;
}

.socio-credit .activo,
.socio-state .activo {
    color: #000;
}

.socio-credit .activo::after,
.socio-state .activo::after {
    font-weight: 600;
    text-transform: uppercase;
    content: 'Activo'
}

.socio-credit .cancelado,
.socio-state .cancelado {
    color: red;
}

.socio-credit .cancelado::after,
.socio-state .cancelado::after {
    font-weight: 600;
    text-transform: uppercase;
    content: 'Cancelado'
}

.socio-credit .devolucion,
.socio-state .devolucion {
    color: #666;
}

.socio-credit .devolucion::after,
.socio-state .devolucion::after {
    font-weight: 600;
    text-transform: uppercase;
    content: 'Devolución'
}

.whole-card {
    padding: 12px;
    background: #fff;
    border: 12px solid #fff none;
    margin-bottom: 16px;
}

.whole-card h3 {
    margin: 0;
    padding-bottom: 6px;
    color: #0d4c85;
    font-size: 18px;
}

.whole-card .stats {}

.whole-card table {
    width: calc(100% - 6px);
    margin: 3px 3px;
    margin-bottom: 4px;
    font-size: 0.85em;
}

.whole-card .whole-plazo table,
.whole-card .whole-plazo table tbody {
    background: #fff;
}

.whole-card .black,
.whole-card .black td {
    background: #f7f7f7;
    font-weight: 600;
    color: #000 !important;
}

.whole-card .whole-credit thead tr {
    background: #000;
    color: #fff;
    font-size: 1.1em;
}

.whole-card .whole-plazo thead tr {
    background: #999;
    color: #fff;
    font-size: 1.1em;
    text-transform: uppercase;
    text-align: center;
}

.whole-card .whole-plazo thead td:first-of-type {
    text-align: left;
}

.whole-card tr.white {
    height: 2.45em;
}

.whole-card thead td {
    padding: 6px 8px;
}

.whole-card thead td:last-child,
.whole-card tbody td:last-child {
    text-align: right;
}

.whole-card .row {
    border-bottom: solid 3px #000;
    margin-bottom: 12px;
}

.whole-card .row:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.whole-card .resal {
    color: #000;
    background: #fde2d4;
    font-weight: 600;
    text-decoration: underline;
}

.whole-card tbody tr:hover td.resal,
.whole-card tbody tr:nth-child(even):hover td.resal {
    background-color: #f1f1f1 !important;
}

.whole-card tfoot tr {
    background: #f1f1f1;
    text-align: right;
    text-transform: uppercase;
    font-weight: 600;
}

.whole-card tfoot .debt {
    padding-right: 15px;
}

.whole-card tfoot td:last-child {
    font-size: 1.3em;
    text-align: right;
    background: #e2e2e2;
}

.whole-card .show-collapse .caret-button {
    position: relative;
    float: right;
    color: #9a9a9b;
    padding-right: 32px;
    font-size: 0.95em;
    padding-top: 8px;
    cursor: pointer;
}

.whole-card .show-collapse .caret-button:hover {
    text-decoration: underline;
}

.whole-card .show-collapse .caret-button:after {
    position: absolute;
    top: 3px;
    right: 2px;
    width: 16px;
    height: 8px;
    background-image: url(../img/icn_gral_up-arrow.svg);
    background-repeat: no-repeat;
    -webkit-transition: all 290ms ease-in-out;
    transition: all 290ms ease-in-out;
    content: '';
}

.whole-card .show-collapse .caret-button:hover:after {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
}

.whole-card .show-collapse.in .caret-button:after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.whole-card .show-collapse.in .caret-button:hover:after {
    -webkit-transform: rotate(180deg) translateY(3px);
    transform: rotate(180deg) translateY(3px);
}

/*** termina estado de cuenta ***/

/**** Termina 4 cuadrantes ****/

/* blur cosas */

#main-container {
    margin: 0;
    padding-top: 48px;
}

.blurred {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

#modal-custom {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000 !important;
    -webkit-transition: all 190ms ease-in-out;
    transition: all 190ms ease-in-out;
    -webkit-transform: translateY(-120%);
    transform: translateY(-120%);
}

#modal-custom.animado {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

#modal-custom .standard-card {
    width: 80%;
    margin-left: 10%;
}

#modal-custom .logo {
    margin-bottom: 30px;
}

#modal-custom .logo img {
    width: 30%;
    margin-left: 35%;
}

/*********** Termina Contenido Central ********+*/

/* ==========================================================================
   Los Media Queries
   ========================================================================== */

/********** Tablet Vertical **********/

@media (min-width:768px) {
    #cuadrante-icon {
        width: 400px;
    }

    #cuadrante-icon i {
        padding-top: 0;
        font-size: 4em;
    }

    .cuadrante-back {
        padding: 12px 16px 0px 16px;
        text-align: right;
    }

    #modalEx .modal-content,
    #modalPerfil .modal-content {
        width: inherit;
        left: inherit;
    }

    #modalEx .modal-button {
        left: calc(100% - 30%);
        width: 30%;
    }

    #modalPerfil .modal-button {
        display: inline-block;
        left: calc(100% - 50%);
        width: 25%;
    }

    .ui.field.one-line label,
    .ui2.field.icon.one-line label {
        width: 18%;
        font-size: inherit;
        letter-spacing: inherit;
    }

    .ui2.one-select label {
        width: 18.85% !important;
        font-size: inherit;
        letter-spacing: inherit;

    }

    .whole-card h3 {
        font-size: 24px;
    }

    .whole-card .stats {
        padding-top: 5px;
    }
}




/********** Tablet Horizontal **********/

@media (min-width: 992px) {
    .cuadrante-height {
        height: 36.5vh;
    }

    .cuadrante #c1 {
        position: absolute;
        width: 50%;
        left: 0;
        height: 50%;
        border-right: solid 1px rgba(0, 0, 0, 0.1);
    }

    .cuadrante #c2 {
        position: absolute;
        width: 50%;
        right: 0;
        height: 50%;
        background-color: inherit;
    }

    .cuadrante #c3 {
        position: absolute;
        width: 50%;
        top: 50%;
        height: 50%;
        border-top: solid 1px rgba(0, 0, 0, 0.1);
        border-right: solid 1px rgba(0, 0, 0, 0.1);
    }

    .cuadrante #c4 {
        position: absolute;
        width: 50%;
        right: 0;
        top: 50%;
        height: 50%;
        border-top: solid 1px rgba(0, 0, 0, 0.1);
        background-color: inherit;
    }

    #cuadrante-icon {
        width: 416px;
        height: 100px;
    }

    #cuadrante-icon i {
        padding-top: 0;
        font-size: 6em;
    }

    #cuadrante-icon h1 {
        font-size: 35px;
        padding-top: 5px;
    }

    .height-card {
        position: relative;
        height: calc(50vh - 74px);
        border-bottom: solid 12px #fff;
        overflow-y: scroll;
    }

    .big-height {
        position: relative;
        border-bottom: solid 12px #fff;
        overflow-y: scroll;
    }

    .big-table thead {
        background: red;
    }

    .cuadrante-card .standard-card h1 {
        padding-top: 0px;
    }

    #modal-custom .standard-card {
        width: 40%;
        margin-left: 30%;
    }
}


/********** Escritorio 0 **********/

@media (min-width: 1025px) {
    .full-card h1 {
        padding-top: 12px !important;
    }
}


/********** Escritorio 1 **********/

@media (min-width: 1200px) {}


/********** Escritorio 2 **********/

@media (min-width: 1380px) {
    #modal-custom .standard-card {
        width: 30%;
        margin-left: 35%;
    }
}


/********** Escritorio 3 **********/

@media (min-width: 1540px) {}


/********** Escritorio 4 **********/

@media (min-width: 1850px) {}


/********** Escritorio 5 **********/

@media (min-width: 2000px) {}


/************** Portrait **************/

@media (orientation: portrait) {}

/************** iPhone x *************/

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .padding-x {
        padding-right: constant(safe-area-inset-right);
        padding-left: constant(safe-area-inset-left);
        padding-bottom: constant(safe-area-inset-bottom);
    }
}