@charset "UTF-8";

body, html {
    font-family: 'Arial';
    font-size: 14px;
    background-color: #efefef;
    height: 100%;
}

[class^="lnr-"], [class*=" lnr-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'Linearicons' !important;
    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;
}

i.lnr.ast {
    font-size: 58px;
    top: -5px;
    left: 16px;
    font-style: normal;
}

button, input, select {
    outline: none;
}

/*.btn:hover, .btn:focus, btn:active {
  @include transitions(2s);
  color: $colgraylight;
}*/
/*img {
  width:100%;
}*/
.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.text-bold {
    font-weight: 600;
}

.bg-warning, .bg-authorized, .bg-autorizada, .bg-porliquidar {
    background-color: #ffa000;
}

.bg-sucess, .bg-liquidated, .bg-liquidada {
    background-color: #54b748;
}

.col-sucess {
    color: #54b748;
}

.bg-review, .bg-abandonada {
    background-color: #8f8f8f;
}

.bg-danger, .bg-expired, .bg-vencida, .bg-cancel, .bg-anulada, .bg-voided, .bg-denegada, .bg-reject, .bg-rejected, .bg-notauthorized {
    background-color: #f5426c;
}

.bs-gray {
    -webkit-box-shadow: 0px 0px 44px 6px #e8e8e8;
    -moz-box-shadow: 0px 0px 44px 6px #e8e8e8;
    box-shadow: 0px 0px 44px 6px #e8e8e8;
}

.no-flex {
    display: block !important;
}

input, select {
    border-radius: 3px;
    border: 1px solid #ebebeb;
    padding: 4px 6px;
}

    input::-webkit-input-placeholder, select::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: #c0c0c0;
        font-weight: 400;
    }

    input::-moz-placeholder, select::-moz-placeholder {
        /* Firefox 19+ */
        color: #c0c0c0;
        font-weight: 400;
    }

    input:-ms-input-placeholder, select:-ms-input-placeholder {
        /* IE 10+ */
        color: #c0c0c0;
        font-weight: 400;
    }

    input:-moz-placeholder, select:-moz-placeholder {
        /* Firefox 18- */
        color: #c0c0c0;
        font-weight: 400;
    }

.modal {
    color: #475C78;
    background: rgba(0, 90, 212, 0.95);
    /*Modal iniciar sesión*/
}

    .modal .modal-dialog {
        margin-top: 70px;
    }

        .modal .modal-dialog .modal-header {
            border: 0;
            padding-bottom: 0;
        }

            .modal .modal-dialog .modal-header button.close {
                margin-top: -50px;
                color: #fff;
                text-shadow: 0 0 0 #fff;
                opacity: 1;
                margin-right: -50px;
            }

                .modal .modal-dialog .modal-header button.close i {
                    color: #fff;
                    font-size: 20px;
                }

            .modal .modal-dialog .modal-header i {
                font-size: 60px;
                color: #54b748;
            }

            .modal .modal-dialog .modal-header h2 {
                font-size: 30px;
                font-family: 'Bariol';
                margin-top: 20px;
            }

        .modal .modal-dialog .modal-body {
            margin-left: 30px;
            margin-right: 30px;
        }

        .modal .modal-dialog .modal-footer {
            border: 0;
            text-align: center;
        }

            .modal .modal-dialog .modal-footer button {
                margin: 0 10px;
                width: 80px;
                display: inline-block;
            }

            .modal .modal-dialog .modal-footer i {
                font-size: 60px;
                color: #54b748;
            }

    .modal button.btn-green {
        border-radius: 2px;
    }

    .modal .modal-ini .input-pssw {
        width: 290px;
        margin: 0 auto;
    }

    .modal .modal-ini .show-pssw {
        width: 100%;
        position: relative;
        font-size: 12px;
    }

        .modal .modal-ini .show-pssw span {
            padding-right: 15px;
            position: relative;
            font-size: 16px;
            color: #475C78;
            top: 3px;
        }

    .modal .modal-ini .pssword {
        position: relative;
    }

    .modal .modal-header.icon-ast .lnr {
        font-size: 115px;
    }

    .modal .modal-header.icon-ast h2 {
        margin-top: -35px;
    }

    .modal.password-change .button-send-login a {
        position: relative;
    }

        .modal.password-change .button-send-login a input {
            padding-left: 20px;
        }

    .modal #counter {
        top: -6px;
        background-color: white;
        color: #0054cb;
        /* padding: 5px; */
        font-size: 14px;
        border-radius: 15px;
        width: 25px;
        height: 25px;
        padding: 3px;
        font-weight: 600;
    }

    .modal .mdini {
        width: 100%;
    }

    .modal .table-modal-border thead th {
        padding: 10px 5px;
    }

.dn {
    display: none !important;
    transition: .2s;
}

.db {
    display: block !important;
    transition: .2s;
}

.rcaptcha {
    font-family: Arial;
    font-size: 14px;
    color: #475C78;
    padding-bottom: 20px;
}

    .rcaptcha p {
        margin-top: 10px;
        margin-bottom: 10px;
    }

.mdini .question-input input[type='text'] {
    padding-left: 5%;
}

/*J*/
.contebien {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -246px;
    margin-top: -301px;
}

    .contebien h1 {
        color: #0054cb;
        font-family: 'Bariol';
        font-size: 32px;
        margin: 0;
        margin-bottom: 20px;
    }

    .contebien h2 {
        color: #475C78;
        font-family: 'Bariol';
        font-size: 20px;
        margin: 0;
        margin-bottom: 35px;
    }

    .contebien > img {
        margin-bottom: 70px;
    }

.selecomercio {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 355px;
}

    .selecomercio li {
        margin-bottom: 12px;
    }

    .selecomercio a {
        background: #fff;
        display: block;
        padding: 18px;
        text-decoration: none;
    }

        .selecomercio a span {
            display: inline-block;
            vertical-align: middle;
        }

            .selecomercio a span:first-child {
                background: #0054cb;
                color: #fff;
                width: 65px;
                height: 65px;
                line-height: 65px;
                text-align: center;
                font-size: 32px;
                border-radius: 100%;
                margin-right: 23px;
            }

        .selecomercio a .text {
            color: #475C78;
            font-family: 'Bariol';
            font-size: 18px;
            width: 205px;
            text-align: left;
        }

        .selecomercio a .icon-chevron-right {
            color: #475C78;
            font-size: 18px;
        }

        .selecomercio a:hover {
            text-decoration: none;
        }

/**/
.ctdescpago {
    min-height: 710px !important; /*dcc*/
    background: #fff;
    border-radius: 5px;
    font-family: 'Arial';
    padding: 30px 25px; /*dcc*/
    position: relative;
    top: 1%;
}

.cab {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
}

    .cab li {
        display: inline-block;
        vertical-align: middle;
    }

    .cab h2 {
        /*color: #475C78;*/ /*dcc*/
        font-size: 16px;
        margin: 0 0 10px;
    }

    .cab h3 {
        color: #0054cb;
        font-size: 25px;
        margin: 0 0 10px;
    }

        .cab h3 a {
            color: #0054cb;
        }

            .cab h3 a:hover {
                text-decoration: none;
            }

    .cab h4 {
        /*color: #475C78;*/ /*dcc*/
        font-size: 36px;
        font-weight: bold;
        margin: 0;
    }

.ctform .clinput {
    position: relative;
    margin-bottom: 10px; /*dcc*/
    width: 100%;
}

    .ctform .clinput input[type="text"] {
        background: #fff;
        font-size: 14px;
        height: 34px;
        width: 100%;
        padding-left: 44px;
        padding-right: 34px;
        border-radius: 5px;
    }

    .ctform .clinput input[type="email"] {
        background: #fff;
        font-size: 14px;
        height: 34px;
        width: 100%;
        padding-left: 44px;
        padding-right: 34px;
        border-radius: 5px;
    }

    .ctform .clinput select {
        background: #fff;
        font-size: 14px;
        height: 34px;
        width: 100%;
        padding-left: 44px;
        padding-right: 34px;
        border-radius: 5px;
    }

    .ctform .clinput span {
        position: absolute;
    }

        .ctform .clinput span:nth-child(2) {
            /*background: #0054cb;*/ /*dcc*/
            color: #fff;
            top: 0;
            left: 0;
            height: 34px;
            width: 34px;
            font-size: 18px;
            text-align: center;
            line-height: 34px;
            border-radius: 5px 0 0 5px;
        }

        .ctform .clinput span:nth-child(3) {
            color: #54b748;
            top: 0;
            right: 0;
            font-size: 16px;
            height: 34px;
            width: 34px;
            text-align: center;
            line-height: 34px;
        }

    .ctform .clinput .cleft {
        float: left;
        position: relative;
        width: 48%;
    }

    .ctform .clinput .cright {
        float: right;
        position: relative;
        width: 48%;
    }

    .ctform .clinput:first-child {
        margin-bottom: 20px;
    }

.ctform .clques {
    color: #bababa;
    font-size: 12px;
    width: 100%;
    text-align: right;
}

.ctform .listaopc {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

    .ctform .listaopc li {
        margin-bottom: 10px;
    }

    .ctform .listaopc label {
        font-weight: normal;
        font-size: 12px;
        color: #475C78;
        margin: 0;
    }

.ctform .texter {
    background: #f0f0f0;
    color: #475C78;
    font-size: 12px;
    padding: 20px;
    height: 170px;
    overflow-y: scroll;
    margin-bottom: 20px;
}

.ctform .btnpagar {
    display: block;
    /*background: #0054cb;*/ /*dcc*/
    border-radius: 5px;
    width: 100%;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0 !important; /*dcc*/
}

/*Ini Dcc*/
.ctform .btncontinue {
    display: block;
    border-radius: 5px;
    width: 100%;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0 !important;
}
/*Fin Dcc*/

.clear {
    clear: both;
}

.listrans {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #475C78;
    font-size: 12px;
    display: block;
    float: right;
}

    .listrans li {
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
    }

.closedes {
    font-size: 26px;
    color: #0054cb;
    position: absolute;
    right: 5px;
    top: 10px;
    text-decoration: none;
}

    .closedes:hover {
        text-decoration: none;
    }

.clcomen {
    color: #475C78;
    font-size: 12px;
    margin: 0 0 30px;
    width: 100%;
}

/**/
.containt-small {
    width: 290px;
}

.scroll-table-x {
    overflow-x: scroll;
}

.navbar-nav {
    margin: 0;
}

.dashboard, .page-wrapper {
    position: relative;
    height: 100%;
}

.navbar-toggle {
    display: block;
    margin-top: 0;
    padding-top: 6px;
    margin-left: 0;
    margin-right: 0;
}

.navbar-top-home {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #fff;
    min-height: 8%;
    margin: 0;
}

    .navbar-top-home a.navbar-brand .logo-left {
        display: inline-block;
        width: auto;
    }

    .navbar-top-home a.navbar-brand span {
        font-size: 13px;
        font-weight: 600;
    }

    .navbar-top-home a.navbar-brand > span {
        color: #0054cb;
        padding-right: 0px;
        padding-left: 0px;
    }

    .navbar-top-home .navbar-fixed ul.navbar-nav li a {
        font-size: 14px;
        color: #475C78;
    }

        .navbar-top-home .navbar-fixed ul.navbar-nav li a:hover {
            background-color: transparent;
        }

    .navbar-top-home .navbar-fixed ul.navbar-right li a span {
        margin-right: 10px;
    }

    .navbar-top-home .navbar-fixed ul.navbar-right li a:focus {
        background-color: transparent;
    }

    .navbar-top-home button.count {
        border: none;
        color: #fff;
        border-radius: 20px;
        padding-left: 9px;
        padding-right: 9px;
    }

    .navbar-top-home .navbar-toggle .icon-bar {
        background: #a5a5a5;
    }

.page-sidebar ul.navbar-left li {
    float: none;
    min-width: 196px;
}

    .page-sidebar ul.navbar-left li.active {
        background: #005ad4;
    }

    .page-sidebar ul.navbar-left li.user-child {
        /*display: none;*/
    }

        .page-sidebar ul.navbar-left li.user-child a {
            padding-left: 60px;
            padding-right: 10px;
            padding-top: 20px;
        }

    .page-sidebar ul.navbar-left li a {
        padding-right: 20px;
        padding-left: 20px;
        color: #fff;
        border-bottom: 1px solid #2a7ded;
        font-size: 14px;
        /*transition: all 0.4s linear; -webkit-transition: all 0.4s linear;*/
        height: 56px;
        overflow: hidden;
    }

        .page-sidebar ul.navbar-left li a span {
            font-size: 25px;
            margin-right: 15px;
            color: #ffad23;
        }

            .page-sidebar ul.navbar-left li a span:last-child {
                color: #fff;
                font-size: 14px;
                margin-right: 0;
                transition: 0.2s;
                -webkit-transition: 0.2s;
                position: relative;
                top: -5px;
                opacity: 1;
            }

        .page-sidebar ul.navbar-left li a:hover, .page-sidebar ul.navbar-left li a.active, .page-sidebar ul.navbar-left li a:hover, .page-sidebar ul.navbar-left li a:focus {
            background-color: #005ad4;
        }

    .page-sidebar ul.navbar-left li:nth-child(1) a {
        padding-top: 24px;
        padding-bottom: 24px;
        padding-left: 20px;
        padding-right: 20px;
        background-color: #005ad4;
        height: 79px;
    }

        .page-sidebar ul.navbar-left li:nth-child(1) a span {
            top: 0px;
        }

    .page-sidebar ul.navbar-left li:last-child {
        min-width: 0;
        left: 0;
        position: fixed;
        bottom: 0;
        width: 196px;
        /*transition: 0.2s; -webkit-transition: 0.2s;*/
    }

        .page-sidebar ul.navbar-left li:last-child a {
            border: none;
            background-color: #005ad4;
        }

    .page-sidebar ul.navbar-left li .logo-user {
        width: 30px;
        display: inline-block;
        margin-right: 5%;
    }

.page-toolbar nav.nav-report-v {
    margin: 0;
    margin-bottom: 25px;
    background-color: #fff;
    /*margin-top: 12px;*/
}

    .page-toolbar nav.nav-report-v .container-fluid {
        padding-right: 0px !important;
    }

    .page-toolbar nav.nav-report-v .navbar-left a {
        padding-top: 10px;
        padding-bottom: 10px;
        border: 1px solid #e6e6e6;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #475C78;
        transition: all 0.4s linear;
        -webkit-transition: all 0.4s linear;
    }

        .page-toolbar nav.nav-report-v .navbar-left a:hover {
            background-color: #d4d4d4;
            color: #fff;
        }

    .page-toolbar nav.nav-report-v .navbar-left li.active a {
        background-color: #0054cb;
        color: #fff;
    }

    .page-toolbar nav.nav-report-v .navbar-right {
        padding-top: 13px;
        color: #475C78;
        margin-right: 0;
    }

        .page-toolbar nav.nav-report-v .navbar-right .btn-group .dropdown-menu {
            min-width: auto;
        }

        .page-toolbar nav.nav-report-v .navbar-right .btn-group .btn {
            padding: 8px 20px;
        }

            .page-toolbar nav.nav-report-v .navbar-right .btn-group .btn:last-child {
                padding: 8px 10px;
                margin-left: 8px;
            }

        .page-toolbar nav.nav-report-v .navbar-right span span {
            font-weight: 400;
        }

            .page-toolbar nav.nav-report-v .navbar-right span span:last-child {
                color: #c0c0c0;
            }

    .page-toolbar nav.nav-report-v .navbar-right-label {
        padding-top: 22px;
        color: #475C78;
        margin-right: 0;
        float: right;
    }

        .page-toolbar nav.nav-report-v .navbar-right-label span span {
            font-weight: 400;
        }

            .page-toolbar nav.nav-report-v .navbar-right-label span span:last-child {
                color: #c0c0c0;
            }

    .page-toolbar nav.nav-report-v .navbar-date-filter {
        padding-top: 16px;
        margin-left: 10%;
        color: #475C78;
        margin-right: 0;
    }

        .page-toolbar nav.nav-report-v .navbar-date-filter input {
            padding-bottom: 2px;
        }

        .page-toolbar nav.nav-report-v .navbar-date-filter span span {
            font-weight: 400;
        }

            .page-toolbar nav.nav-report-v .navbar-date-filter span span:last-child {
                color: #c0c0c0;
            }

.vn-container {
    box-sizing: border-box;
    max-width: 75rem;
    margin: 0 auto;
}

.vn-container--fluid {
    max-width: 100%;
    padding: 0 2rem;
}

.vn-flex {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

.vn-flex--row {
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -moz-box-flex: 0;
    -moz-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.vn-flex--column {
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -moz-box-flex: 0;
    -moz-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.vn-flex--row-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row-reverse;
    -moz-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.vn-flex--column-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column-reverse;
    -moz-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.vn-flex-box {
    -webkit-flex-basis: 0;
    -moz-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-flex-shrink: 1;
    -moz-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

.vn-flex-box-1 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -webkit-flex-basis: 8.33333%;
    -moz-flex-basis: 8.33333%;
    -ms-flex-preferred-size: 8.33333%;
    flex-basis: 8.33333%;
    max-width: 8.33333%;
}

.vn-flex-box-2 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -webkit-flex-basis: 16.66667%;
    -moz-flex-basis: 16.66667%;
    -ms-flex-preferred-size: 16.66667%;
    flex-basis: 16.66667%;
    max-width: 16.66667%;
}

.vn-flex-box-3 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -webkit-flex-basis: 25%;
    -moz-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
}

.vn-flex-box-4 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -webkit-flex-basis: 33.33333%;
    -moz-flex-basis: 33.33333%;
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%;
    max-width: 33.33333%;
}

.vn-flex-box-5 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -webkit-flex-basis: 41.66667%;
    -moz-flex-basis: 41.66667%;
    -ms-flex-preferred-size: 41.66667%;
    flex-basis: 41.66667%;
    max-width: 41.66667%;
}

.vn-flex-box-6 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -webkit-flex-basis: 50%;
    -moz-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
}

.vn-flex-box-7 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -webkit-flex-basis: 58.33333%;
    -moz-flex-basis: 58.33333%;
    -ms-flex-preferred-size: 58.33333%;
    flex-basis: 58.33333%;
    max-width: 58.33333%;
}

.vn-flex-box-8 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -webkit-flex-basis: 66.66667%;
    -moz-flex-basis: 66.66667%;
    -ms-flex-preferred-size: 66.66667%;
    flex-basis: 66.66667%;
    max-width: 66.66667%;
}

.vn-flex-box-9 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -webkit-flex-basis: 75%;
    -moz-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
}

.vn-flex-box-10 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -webkit-flex-basis: 83.33333%;
    -moz-flex-basis: 83.33333%;
    -ms-flex-preferred-size: 83.33333%;
    flex-basis: 83.33333%;
    max-width: 83.33333%;
}

.vn-flex-box-11 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -webkit-flex-basis: 91.66667%;
    -moz-flex-basis: 91.66667%;
    -ms-flex-preferred-size: 91.66667%;
    flex-basis: 91.66667%;
    max-width: 91.66667%;
}

.vn-flex-box-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    -webkit-flex-basis: 100%;
    -moz-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
}

.vn-flex-box-0--offset {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-left: 0;
}

.vn-flex-box-1--offset {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-left: 8.33333%;
}

.vn-flex-box-2--offset {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-left: 16.66667%;
}

.vn-flex-box-3--offset {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-left: 25%;
}

.vn-flex-box-4--offset {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-left: 33.33333%;
}

.vn-flex-box-5--offset {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-left: 41.66667%;
}

.vn-flex-box-6--offset {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-left: 50%;
}

.vn-flex-box-7--offset {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-left: 58.33333%;
}

.vn-flex-box-8--offset {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-left: 66.66667%;
}

.vn-flex-box-9--offset {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-left: 75%;
}

.vn-flex-box-10--offset {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-left: 83.33333%;
}

.vn-flex-box-11--offset {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-left: 91.66667%;
}

.vn-flex-box-12--offset {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-left: 100%;
}

.vn-flex-align-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
}

.vn-flex-align-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
}

.vn-flex-align-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end;
}

.vn-flex-align-top {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    align-items: flex-start;
}

.vn-flex-align-middle {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}

.vn-flex-align-bottom {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end;
}

.vn-flex-align-around {
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around;
}

.vn-flex-align-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
}

.vn-flex-first {
    order: -1;
}

.vn-flex-last {
    order: 1;
}

@media only screen and (min-width: 30em) {
    .vn-container {
        width: 30em;
    }

    .vn-flex--row-xs {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 auto;
        -moz-box-flex: 0;
        -moz-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .vn-flex--column-xs {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 auto;
        -moz-box-flex: 0;
        -moz-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .vn-flex-box--xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: auto;
        -moz-flex-basis: auto;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }

    .vn-flex-box-1--xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 8.33333%;
        -moz-flex-basis: 8.33333%;
        -ms-flex-preferred-size: 8.33333%;
        flex-basis: 8.33333%;
        max-width: 8.33333%;
    }

    .vn-flex-box-2--xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 16.66667%;
        -moz-flex-basis: 16.66667%;
        -ms-flex-preferred-size: 16.66667%;
        flex-basis: 16.66667%;
        max-width: 16.66667%;
    }

    .vn-flex-box-3--xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 25%;
        -moz-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }

    .vn-flex-box-4--xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 33.33333%;
        -moz-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }

    .vn-flex-box-5--xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 41.66667%;
        -moz-flex-basis: 41.66667%;
        -ms-flex-preferred-size: 41.66667%;
        flex-basis: 41.66667%;
        max-width: 41.66667%;
    }

    .vn-flex-box-6--xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 50%;
        -moz-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

    .vn-flex-box-7--xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 58.33333%;
        -moz-flex-basis: 58.33333%;
        -ms-flex-preferred-size: 58.33333%;
        flex-basis: 58.33333%;
        max-width: 58.33333%;
    }

    .vn-flex-box-8--xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 66.66667%;
        -moz-flex-basis: 66.66667%;
        -ms-flex-preferred-size: 66.66667%;
        flex-basis: 66.66667%;
        max-width: 66.66667%;
    }

    .vn-flex-box-9--xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 75%;
        -moz-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
        max-width: 75%;
    }

    .vn-flex-box-10--xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 83.33333%;
        -moz-flex-basis: 83.33333%;
        -ms-flex-preferred-size: 83.33333%;
        flex-basis: 83.33333%;
        max-width: 83.33333%;
    }

    .vn-flex-box-11--xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 91.66667%;
        -moz-flex-basis: 91.66667%;
        -ms-flex-preferred-size: 91.66667%;
        flex-basis: 91.66667%;
        max-width: 91.66667%;
    }

    .vn-flex-box-12--xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 100%;
        -moz-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    .vn-flex-box-0--offset-xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 0;
    }

    .vn-flex-box-1--offset-xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 8.33333%;
    }

    .vn-flex-box-2--offset-xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 16.66667%;
    }

    .vn-flex-box-3--offset-xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 25%;
    }

    .vn-flex-box-4--offset-xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 33.33333%;
    }

    .vn-flex-box-5--offset-xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 41.66667%;
    }

    .vn-flex-box-6--offset-xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 50%;
    }

    .vn-flex-box-7--offset-xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 58.33333%;
    }

    .vn-flex-box-8--offset-xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 66.66667%;
    }

    .vn-flex-box-9--offset-xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 75%;
    }

    .vn-flex-box-10--offset-xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 83.33333%;
    }

    .vn-flex-box-11--offset-xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 91.66667%;
    }

    .vn-flex-box-12--offset-xs {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 100%;
    }

    .vn-flex-box--xs {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -moz-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -webkit-flex-basis: 0;
        -moz-flex-basis: 0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
    }

    .vn-flex-align-start--xs {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        -moz-justify-content: flex-start;
        justify-content: flex-start;
        text-align: left;
    }

    .vn-flex-align-center--xs {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        text-align: center;
    }

    .vn-flex-align-end--xs {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        -moz-justify-content: flex-end;
        justify-content: flex-end;
        text-align: right;
    }

    .vn-flex-align-top--xs {
        -webkit-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        -moz-align-items: flex-start;
        align-items: flex-start;
    }

    .vn-flex-align-middle--xs {
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
    }

    .vn-flex-align-bottom--xs {
        -webkit-box-align: end;
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        -moz-align-items: flex-end;
        align-items: flex-end;
    }

    .vn-flex-align-around--xs {
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        -moz-justify-content: space-around;
        justify-content: space-around;
    }

    .vn-flex-align-between--xs {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        justify-content: space-between;
    }

    .vn-flex-first--xs {
        order: -1;
    }

    .vn-flex-last--xs {
        order: 1;
    }
}

@media only screen and (min-width: 48em) {
    .vn-container {
        width: 46em;
    }

    .vn-flex--row-sm {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 auto;
        -moz-box-flex: 0;
        -moz-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .vn-flex--column-sm {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 auto;
        -moz-box-flex: 0;
        -moz-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .vn-flex-box--sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: auto;
        -moz-flex-basis: auto;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }

    .vn-flex-box-1--sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 8.33333%;
        -moz-flex-basis: 8.33333%;
        -ms-flex-preferred-size: 8.33333%;
        flex-basis: 8.33333%;
        max-width: 8.33333%;
    }

    .vn-flex-box-2--sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 16.66667%;
        -moz-flex-basis: 16.66667%;
        -ms-flex-preferred-size: 16.66667%;
        flex-basis: 16.66667%;
        max-width: 16.66667%;
    }

    .vn-flex-box-3--sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 25%;
        -moz-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }

    .vn-flex-box-4--sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 33.33333%;
        -moz-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }

    .vn-flex-box-5--sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 41.66667%;
        -moz-flex-basis: 41.66667%;
        -ms-flex-preferred-size: 41.66667%;
        flex-basis: 41.66667%;
        max-width: 41.66667%;
    }

    .vn-flex-box-6--sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 50%;
        -moz-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

    .vn-flex-box-7--sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 58.33333%;
        -moz-flex-basis: 58.33333%;
        -ms-flex-preferred-size: 58.33333%;
        flex-basis: 58.33333%;
        max-width: 58.33333%;
    }

    .vn-flex-box-8--sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 66.66667%;
        -moz-flex-basis: 66.66667%;
        -ms-flex-preferred-size: 66.66667%;
        flex-basis: 66.66667%;
        max-width: 66.66667%;
    }

    .vn-flex-box-9--sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 75%;
        -moz-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
        max-width: 75%;
    }

    .vn-flex-box-10--sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 83.33333%;
        -moz-flex-basis: 83.33333%;
        -ms-flex-preferred-size: 83.33333%;
        flex-basis: 83.33333%;
        max-width: 83.33333%;
    }

    .vn-flex-box-11--sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 91.66667%;
        -moz-flex-basis: 91.66667%;
        -ms-flex-preferred-size: 91.66667%;
        flex-basis: 91.66667%;
        max-width: 91.66667%;
    }

    .vn-flex-box-12--sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 100%;
        -moz-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    .vn-flex-box-0--offset-sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 0;
    }

    .vn-flex-box-1--offset-sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 8.33333%;
    }

    .vn-flex-box-2--offset-sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 16.66667%;
    }

    .vn-flex-box-3--offset-sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 25%;
    }

    .vn-flex-box-4--offset-sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 33.33333%;
    }

    .vn-flex-box-5--offset-sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 41.66667%;
    }

    .vn-flex-box-6--offset-sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 50%;
    }

    .vn-flex-box-7--offset-sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 58.33333%;
    }

    .vn-flex-box-8--offset-sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 66.66667%;
    }

    .vn-flex-box-9--offset-sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 75%;
    }

    .vn-flex-box-10--offset-sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 83.33333%;
    }

    .vn-flex-box-11--offset-sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 91.66667%;
    }

    .vn-flex-box-12--offset-sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 100%;
    }

    .vn-flex-box--sm {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -moz-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -webkit-flex-basis: 0;
        -moz-flex-basis: 0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
    }

    .vn-flex-align-start--sm {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        -moz-justify-content: flex-start;
        justify-content: flex-start;
        text-align: left;
    }

    .vn-flex-align-center--sm {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        text-align: center;
    }

    .vn-flex-align-end--sm {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        -moz-justify-content: flex-end;
        justify-content: flex-end;
        text-align: right;
    }

    .vn-flex-align-top--sm {
        -webkit-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        -moz-align-items: flex-start;
        align-items: flex-start;
    }

    .vn-flex-align-middle--sm {
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
    }

    .vn-flex-align-bottom--sm {
        -webkit-box-align: end;
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        -moz-align-items: flex-end;
        align-items: flex-end;
    }

    .vn-flex-align-around--sm {
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        -moz-justify-content: space-around;
        justify-content: space-around;
    }

    .vn-flex-align-between--sm {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        justify-content: space-between;
    }

    .vn-flex-first--sm {
        order: -1;
    }

    .vn-flex-last--sm {
        order: 1;
    }
}

@media only screen and (min-width: 65em) {
    .vn-container {
        width: 63em;
    }

    .vn-flex--row-md {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 auto;
        -moz-box-flex: 0;
        -moz-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .vn-flex--column-md {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 auto;
        -moz-box-flex: 0;
        -moz-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .vn-flex-box--md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: auto;
        -moz-flex-basis: auto;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }

    .vn-flex-box-1--md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 8.33333%;
        -moz-flex-basis: 8.33333%;
        -ms-flex-preferred-size: 8.33333%;
        flex-basis: 8.33333%;
        max-width: 8.33333%;
    }

    .vn-flex-box-2--md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 16.66667%;
        -moz-flex-basis: 16.66667%;
        -ms-flex-preferred-size: 16.66667%;
        flex-basis: 16.66667%;
        max-width: 16.66667%;
    }

    .vn-flex-box-3--md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 25%;
        -moz-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }

    .vn-flex-box-4--md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 33.33333%;
        -moz-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }

    .vn-flex-box-5--md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 41.66667%;
        -moz-flex-basis: 41.66667%;
        -ms-flex-preferred-size: 41.66667%;
        flex-basis: 41.66667%;
        max-width: 41.66667%;
    }

    .vn-flex-box-6--md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 50%;
        -moz-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

    .vn-flex-box-7--md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 58.33333%;
        -moz-flex-basis: 58.33333%;
        -ms-flex-preferred-size: 58.33333%;
        flex-basis: 58.33333%;
        max-width: 58.33333%;
    }

    .vn-flex-box-8--md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 66.66667%;
        -moz-flex-basis: 66.66667%;
        -ms-flex-preferred-size: 66.66667%;
        flex-basis: 66.66667%;
        max-width: 66.66667%;
    }

    .vn-flex-box-9--md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 75%;
        -moz-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
        max-width: 75%;
    }

    .vn-flex-box-10--md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 83.33333%;
        -moz-flex-basis: 83.33333%;
        -ms-flex-preferred-size: 83.33333%;
        flex-basis: 83.33333%;
        max-width: 83.33333%;
    }

    .vn-flex-box-11--md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 91.66667%;
        -moz-flex-basis: 91.66667%;
        -ms-flex-preferred-size: 91.66667%;
        flex-basis: 91.66667%;
        max-width: 91.66667%;
    }

    .vn-flex-box-12--md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 100%;
        -moz-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    .vn-flex-box-0--offset-md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 0;
    }

    .vn-flex-box-1--offset-md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 8.33333%;
    }

    .vn-flex-box-2--offset-md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 16.66667%;
    }

    .vn-flex-box-3--offset-md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 25%;
    }

    .vn-flex-box-4--offset-md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 33.33333%;
    }

    .vn-flex-box-5--offset-md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 41.66667%;
    }

    .vn-flex-box-6--offset-md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 50%;
    }

    .vn-flex-box-7--offset-md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 58.33333%;
    }

    .vn-flex-box-8--offset-md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 66.66667%;
    }

    .vn-flex-box-9--offset-md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 75%;
    }

    .vn-flex-box-10--offset-md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 83.33333%;
    }

    .vn-flex-box-11--offset-md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 91.66667%;
    }

    .vn-flex-box-12--offset-md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 100%;
    }

    .vn-flex-box--md {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -moz-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -webkit-flex-basis: 0;
        -moz-flex-basis: 0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
    }

    .vn-flex-align-start--md {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        -moz-justify-content: flex-start;
        justify-content: flex-start;
        text-align: left;
    }

    .vn-flex-align-center--md {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        text-align: center;
    }

    .vn-flex-align-end--md {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        -moz-justify-content: flex-end;
        justify-content: flex-end;
        text-align: right;
    }

    .vn-flex-align-top--md {
        -webkit-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        -moz-align-items: flex-start;
        align-items: flex-start;
    }

    .vn-flex-align-middle--md {
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
    }

    .vn-flex-align-bottom--md {
        -webkit-box-align: end;
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        -moz-align-items: flex-end;
        align-items: flex-end;
    }

    .vn-flex-align-around--md {
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        -moz-justify-content: space-around;
        justify-content: space-around;
    }

    .vn-flex-align-between--md {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        justify-content: space-between;
    }

    .vn-flex-first--md {
        order: -1;
    }

    .vn-flex-last--md {
        order: 1;
    }
}

@media only screen and (min-width: 75em) {
    .vn-container {
        width: 71em;
    }

    .vn-flex--row-lg {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 auto;
        -moz-box-flex: 0;
        -moz-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .vn-flex--column-lg {
        -webkit-box-flex: 0;
        -webkit-flex: 0 1 auto;
        -moz-box-flex: 0;
        -moz-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .vn-flex-box--lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: auto;
        -moz-flex-basis: auto;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }

    .vn-flex-box-1--lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 8.33333%;
        -moz-flex-basis: 8.33333%;
        -ms-flex-preferred-size: 8.33333%;
        flex-basis: 8.33333%;
        max-width: 8.33333%;
    }

    .vn-flex-box-2--lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 16.66667%;
        -moz-flex-basis: 16.66667%;
        -ms-flex-preferred-size: 16.66667%;
        flex-basis: 16.66667%;
        max-width: 16.66667%;
    }

    .vn-flex-box-3--lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 25%;
        -moz-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }

    .vn-flex-box-4--lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 33.33333%;
        -moz-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }

    .vn-flex-box-5--lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 41.66667%;
        -moz-flex-basis: 41.66667%;
        -ms-flex-preferred-size: 41.66667%;
        flex-basis: 41.66667%;
        max-width: 41.66667%;
    }

    .vn-flex-box-6--lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 50%;
        -moz-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

    .vn-flex-box-7--lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 58.33333%;
        -moz-flex-basis: 58.33333%;
        -ms-flex-preferred-size: 58.33333%;
        flex-basis: 58.33333%;
        max-width: 58.33333%;
    }

    .vn-flex-box-8--lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 66.66667%;
        -moz-flex-basis: 66.66667%;
        -ms-flex-preferred-size: 66.66667%;
        flex-basis: 66.66667%;
        max-width: 66.66667%;
    }

    .vn-flex-box-9--lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 75%;
        -moz-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
        max-width: 75%;
    }

    .vn-flex-box-10--lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 83.33333%;
        -moz-flex-basis: 83.33333%;
        -ms-flex-preferred-size: 83.33333%;
        flex-basis: 83.33333%;
        max-width: 83.33333%;
    }

    .vn-flex-box-11--lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 91.66667%;
        -moz-flex-basis: 91.66667%;
        -ms-flex-preferred-size: 91.66667%;
        flex-basis: 91.66667%;
        max-width: 91.66667%;
    }

    .vn-flex-box-12--lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex-basis: 100%;
        -moz-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    .vn-flex-box-0--offset-lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 0;
    }

    .vn-flex-box-1--offset-lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 8.33333%;
    }

    .vn-flex-box-2--offset-lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 16.66667%;
    }

    .vn-flex-box-3--offset-lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 25%;
    }

    .vn-flex-box-4--offset-lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 33.33333%;
    }

    .vn-flex-box-5--offset-lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 41.66667%;
    }

    .vn-flex-box-6--offset-lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 50%;
    }

    .vn-flex-box-7--offset-lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 58.33333%;
    }

    .vn-flex-box-8--offset-lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 66.66667%;
    }

    .vn-flex-box-9--offset-lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 75%;
    }

    .vn-flex-box-10--offset-lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 83.33333%;
    }

    .vn-flex-box-11--offset-lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 91.66667%;
    }

    .vn-flex-box-12--offset-lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -webkit-flex-grow: 0;
        -moz-flex-grow: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding-right: 1rem;
        padding-left: 1rem;
        margin-left: 100%;
    }

    .vn-flex-box--lg {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -moz-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -webkit-flex-basis: 0;
        -moz-flex-basis: 0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
    }

    .vn-flex-align-start--lg {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        -moz-justify-content: flex-start;
        justify-content: flex-start;
        text-align: left;
    }

    .vn-flex-align-center--lg {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        text-align: center;
    }

    .vn-flex-align-end--lg {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        -moz-justify-content: flex-end;
        justify-content: flex-end;
        text-align: right;
    }

    .vn-flex-align-top--lg {
        -webkit-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        -moz-align-items: flex-start;
        align-items: flex-start;
    }

    .vn-flex-align-middle--lg {
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
    }

    .vn-flex-align-bottom--lg {
        -webkit-box-align: end;
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        -moz-align-items: flex-end;
        align-items: flex-end;
    }

    .vn-flex-align-around--lg {
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        -moz-justify-content: space-around;
        justify-content: space-around;
    }

    .vn-flex-align-between--lg {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        justify-content: space-between;
    }

    .vn-flex-first--lg {
        order: -1;
    }

    .vn-flex-last--lg {
        order: 1;
    }
}

.vn-flex-box--no-padding {
    padding: 0;
}

.btn-table-blue-gray, .btn-table-blue-gray:hover {
    border: 2px solid #ebebeb;
    background: #f2f2f2;
    padding: 4px 10px;
    border-radius: 3px;
    color: #475C78;
}

    .btn-table-blue-gray span, .btn-table-blue-gray:hover span {
        margin-right: 10px;
    }

button {
    color: #fff;
    border: none;
    padding: 7px 15px;
    margin: 0 10px;
    border-radius: 4px;
}

.btn-gray-blue, .btn-gray-blue:hover {
    border: 1px solid #0054cb;
    background-color: #f2f2f2;
    color: #0054cb;
}

.btn-blue-white, .btn-blue-white:hover {
    background-color: #fff;
    color: #0054cb;
    border-color: #0054cb;
}

    .btn-blue-white span, .btn-blue-white:hover span {
        margin-right: 10px;
        font-size: 18px;
    }

.btn-white-blue, .btn-white-blue:hover {
    background-color: #0054cb;
    color: #fff;
    border-color: #0054cb;
}

    .btn-white-blue span, .btn-white-blue:hover span {
        margin-right: 10px;
        font-size: 18px;
    }

button.btn-green {
    border: none;
    background-color: #54b748;
    color: #fff;
    font-size: 0.9em;
    border-radius: 5px;
}

    button.btn-green span {
        margin-right: 10px;
        font-size: 20px;
    }

.multiselect-native-select button, .multiselect-native-select button.btn:hover {
    color: #c0c0c0;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid #ebebeb;
    background-color: #fff;
}

.btn-tooltip {
    border-radius: 3px;
    border: none;
    color: #fff;
    padding: 1% 5%;
}

    .btn-tooltip.tooltips-tr {
        position: relative;
        display: inline;
    }

        .btn-tooltip.tooltips-tr span {
            position: absolute;
            width: 420px;
            color: #FFFFFF;
            background: #000000;
            height: auto;
            text-align: left;
            visibility: hidden;
            border-radius: 3px;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 10px;
            padding-right: 10px;
            right: 0;
        }

            .btn-tooltip.tooltips-tr span:after {
                content: '';
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -8px;
                width: 0;
                height: 0;
                border-top: 8px solid #000000;
                border-right: 8px solid transparent;
                border-left: 8px solid transparent;
            }

    .btn-tooltip:hover.tooltips-tr span {
        visibility: visible;
        opacity: 0.8;
        bottom: 30px;
        left: -100%;
        margin-left: -76px;
        z-index: 999;
        font-size: 12px;
    }

button.btn-see {
    background-color: #fff;
    color: #475C78;
    border: 2px solid #f5f5f5;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
}

    button.btn-see span {
        margin-right: 8px;
        font-size: 20px;
        color: #475C78;
    }

    button.btn-see:hover, button.btn-see:hover span {
        background-color: #d4d4d4;
        color: #fff;
        -o-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

.group-btn-visa {
    border-radius: 6px;
    padding: 10px;
    background-color: whitesmoke;
    margin-top: 30px;
    padding-top: 20px;
}

    .group-btn-visa p {
        padding-left: 40px;
        padding-top: 10px;
    }

    .group-btn-visa h4 {
        font-size: 14px;
    }

    .group-btn-visa li {
        padding-right: 10px;
    }

.vn-button {
    display: inline-block;
    padding: 0 16px;
    line-height: 44px;
    background: #0054cb;
    color: #fff;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 14px;
    text-align: center;
    min-width: 88px;
}

.vn-button--green {
    background-color: #54b748;
    color: #fff;
}

.vn-button--block {
    display: block;
    margin-bottom: 16px;
}

.vn-button-dropdown {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vn-button__caret {
    display: block;
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.vn-list {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.00937em;
    text-decoration: inherit;
    text-transform: inherit;
    color: rgba(0, 0, 0, 0.87);
    margin: 0;
    padding: 8px 0;
    list-style-type: none;
}

.vn-list--dark-theme {
    color: #ffffff;
}

.vn-list-item {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    height: 48px;
    padding: 0 16px;
    overflow: hidden;
}

.vn-list-item--two-lines {
    height: 72px;
}

.vn-list-item--no-padding {
    padding: 0;
}

.vn-list-item__icon {
    color: #76c3ff;
    margin-left: 0;
    margin-right: 32px;
    width: 24px;
    height: 24px;
    font-size: 24px;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.vn-list-item__icon--large {
    width: 32px;
    height: 32px;
    font-size: 32px;
}

@font-face {
    font-family: 'Bariol';
    font-style: normal;
    font-weight: normal;
    src: local("☺"), url("../fonts/Bariol_Bold.eot"), url("../fonts/Bariol_Bold.woff") format("woff"), url("../fonts/Bariol_Bold.ttf") format("truetype"), url("../fonts/Bariol_Bold.svg") format("svg");
}

/*@font-face {
  	font-family: 'Linearicons';
  	font-style: normal;
  	font-weight: normal;
  	src: local('☺'), url('../../fonts/Linearicons.eot'), url('../../fonts/Linearicons.woff') format('woff'), url('../../fonts/Linearicons.ttf') format('truetype'), url('../../fonts/Linearicons.svg') format('svg');
}*/
/*login*/
.login {
    font-family: 'Bariol';
}

    .login input[type='text'] {
        border: none;
    }

    .login input[type='password'] {
        border: none;
    }

.alerterror {
    background: #f5426c;
    color: #fff;
    font-family: 'Arial';
    font-size: 14px;
    display: none;
}

.cablog {
    position: absolute;
    top: 100px;
    padding: 0;
}

    .cablog li {
        display: inline-block;
        vertical-align: middle;
    }

        .cablog li:first-child {
            border-right: 2px solid #fff;
            padding-right: 18px;
        }

        .cablog li:last-child {
            color: #fff;
            font-size: 28px;
            margin-left: 15px;
        }

.listlog {
    color: #fff;
    font-size: 16px;
    list-style: none;
    padding: 0;
}

    .listlog span {
        color: #76c3ff;
        font-size: 30px;
        margin-right: 16px;
    }

    .listlog li {
        display: block;
        margin-bottom: 4%;
        font-size: 16px;
    }

.mdini {
    /*list-style-type: none;*/
}

    .mdini input[type='text'] {
        background: #fff;
        border-radius: 4px;
        color: #000;
        font-family: 'Arial';
        font-size: 18px;
        height: 50px;
        padding-left: 60px;
        width: 290px;
    }

    .mdini input[type='password'] {
        background: #fff;
        border-radius: 4px;
        color: #000;
        font-family: 'Arial';
        font-size: 18px;
        height: 50px;
        padding-left: 60px;
        width: 290px;
    }

    .mdini input[type='submit'] {
        background: #0054cb;
        border: 0;
        border-radius: 4px;
        color: #fff;
        font-family: 'Arial';
        font-size: 18px;
        height: 50px;
        width: 290px;
        margin-bottom: 30px;
    }

    .mdini span, .mdini .lnr {
        color: #ffad23;
        font-size: 30px;
        left: 13px;
        position: absolute;
        top: 10px;
        font-style: initial;
    }

.input-login, .input-pssw {
    margin-bottom: 10px;
    position: relative;
}

    .input-login span, .input-pssw span {
        position: absolute;
        top: 10px;
        left: 10px;
    }

.forget-pssw {
    margin-top: 30px;
    font-size: 14px;
    font-family: Arial;
    color: #0054cb;
}

    .forget-pssw:hover {
        text-decoration: none;
        color: #0054cb;
    }

.containt-login {
    display: flex;
    align-items: center;
    width: 100%;
    background: url(../images/bg-intro.jpg) 0 0 no-repeat;
    background-size: cover;
    padding-left: 15%;
    height: 100vh;
}

/*.mdlogin {
  background: url('../images/bg-intro.jpg') 0 0 no-repeat;
  background-size: cover;
  height: 100vh;
  padding-left: 12%;
  padding-top: 10%;
}*/
.mdsesion {
    background: #f5f5f5;
    height: 100vh;
    padding-left: 10%;
    width: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
}

.nopadding {
    margin: 0;
    padding: 0;
}

.texhelp {
    color: #fff;
    font-size: 16px;
}

    .texhelp .lnr {
        font-size: 20px;
        margin-right: 5px;
    }

    .texhelp a {
        color: #ffa000;
    }

.mdcontrasena {
    background: url(../images/bg-intro.jpg);
    background-size: cover;
    height: 100vh;
    padding-left: 12%;
    text-align: right;
    padding-top: 46px;
    padding-right: 7%;
}

    .mdcontrasena h1 {
        color: #005ad4;
        text-transform: uppercase;
        font-size: 30px;
        font-family: 'Bariol';
        margin: 0px;
    }

        .mdcontrasena h1 figure {
            display: inline-block;
            padding-right: 20px;
            margin-right: 17px;
            border-right: solid 2px #005ad4;
        }

            .mdcontrasena h1 figure img {
                width: auto;
            }

.mdini {
    top: 0%;
    margin-top: 0;
    position: relative;
    width: 70%;
    /*li:first-child { 
    color: #005ad4; 
    text-transform: uppercase; 
    font-size: 30px; 
    font-family: 'Bariol'; 
    padding-top: 50px;
  }*/
    /*li:nth-child(2) {
    font-size: 18px;
    p { width: auto;}
  }*/
}

    .mdini p {
        width: 290px;
    }

        .mdini p span {
            display: inline-block;
            float: right;
            font-size: 14px;
            position: relative;
            width: auto;
            top: initial;
            left: 0;
            top: 2px;
            padding-right: 6px;
        }

            .mdini p span span {
                display: inline;
                font-size: 14px;
                float: initial;
                width: auto;
                left: initial;
                top: 2px;
                padding-right: 6px;
            }

    .mdini ul.carac-pass {
        margin-left: 0px;
        padding-left: 18px;
    }

        .mdini ul.carac-pass li {
            font-size: 14px !important;
            list-style: disc;
            margin-bottom: 5px;
            color: #b2b9c3;
        }

            .mdini ul.carac-pass li:first-child {
                padding-top: 10px;
                margin-bottom: 5px;
                line-height: inherit;
                color: #b2b9c3;
                text-transform: none;
                font-weight: normal;
                font-family: Arial, Serif;
            }

            .mdini ul.carac-pass li:last-child {
                color: #b2b9c3;
            }

            .mdini ul.carac-pass li.passgood {
                color: #b2b9c3;
            }

                .mdini ul.carac-pass li.passgood i {
                    color: #54b748;
                    font-weight: bolder;
                    margin-left: 10px;
                }

            .mdini ul.carac-pass li.passwrong {
                color: #475c78;
            }

                .mdini ul.carac-pass li.passwrong i {
                    color: #f5426c;
                    font-weight: bolder;
                    margin-left: 10px;
                }

    .mdini input[type="submit"] {
        margin: 5px 0;
    }

    .mdini h5 {
        font-size: 18px;
        font-family: Arial;
    }

    .mdini .input-group span {
        font-size: initial;
        position: inherit;
        color: #475C78;
        left: initial;
        top: initial;
    }

    .mdini .input-group input {
        padding-left: 15px;
    }

.recpass {
    background: #f5f5f5;
    color: #475c78;
    font-family: Arial, Serif;
    font-size: 14px;
}

    .recpass .mdsesion .texhelp {
        color: #475c78;
        font-size: 16px;
        bottom: 80px;
    }

        .recpass .mdsesion .texhelp a {
            font-weight: bold;
        }

    .recpass .mdsesion.no-flex {
        padding-top: 5%;
    }

.icon-large {
    font-size: 60px;
}

.login-back {
    position: relative;
}

    .login-back a:hover, .login-back a {
        text-decoration: none;
        color: #0054cb;
    }

    .login-back span {
        font-size: 20px;
        position: relative;
        padding-right: 20px;
        top: 5px;
    }

.new-pass p span {
    color: #005ad4;
}

.repeat-new-pass p span {
    color: #54b748;
}

.select-login-question {
    position: relative;
}

    .select-login-question select {
        width: 290px;
        height: 50px;
        border: 0;
    }

    .select-login-question span {
        position: absolute;
        top: 7px;
        left: 15px;
    }

body {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%;
}

input:-webkit-autofill {
    box-shadow: 0 0 0 30px white inset;
}

.vn-login-page__first-section {
    background: url(../images/bg-intro.jpg) 0 0 no-repeat;
    background-size: cover;
    height: 100%;
    padding: 0 2rem;
}

.vn-login-page__last-section {
    background-color: #f5f5f5;
    height: 100%;
    align-items: center;
    padding: 0 2rem;
}

.vn-login-page__logo {
    padding: 4rem 0 0;
}

.vn-login-page__feature-list {
    padding: 0;
}

.vn-login-page__info-text {
    padding: 0 0 4rem;
    margin: 0;
    color: #fff;
}

.vn-login-page__title {
    font-family: 'Bariol';
    color: #0054cb;
    margin: 0;
    margin-bottom: 16px;
}

.vn-login-page__form {
    width: 100%;
}

@media screen and (min-width: 75em) {
    .vn-login-page__form {
        width: 65%;
    }
}

.vn-login-page__forget-password-text {
    font-size: 14px;
    font-family: Arial;
    color: #0054cb;
}

    .vn-login-page__forget-password-text:hover {
        text-decoration: none;
        color: #0054cb;
    }

.vn-link {
    color: #ffad23;
}

.vn-input-container {
    margin-bottom: 16px;
}

.vn-input-with-icon {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    padding: 0 16px;
    border: 1px solid #ebebeb;
    border-radius: 4px;
}

.vn-icon-container {
    display: block;
    width: 24px;
    height: 24px;
    padding: 2px;
}

    .vn-icon-container a {
        text-decoration: none;
        text-transform: none;
    }

.vn-icon {
    font-size: 20px;
}

.vn-icon--input {
    color: #ffad23;
}

.vn-input {
    border: none;
    height: 44px;
    font-size: 16px;
    padding: 0;
    padding-left: 16px;
    background: transparent;
    flex: 1;
}

.vn-input-helper {
    display: block;
    font-size: 12px;
    padding-top: 8px;
}

.vn-input-helper--error-message {
    color: red;
}

.page-sidebar.navbar-collapse {
    max-height: none !important;
}

.page-sidebar-wrapper.min-width-sidebar {
    width: 75px;
    transition: .3s;
    overflow: hidden;
    transition-property: opacity, left;
}

    .page-sidebar-wrapper.min-width-sidebar span:last-child {
        display: none;
        transition: 0.2s;
        -webkit-transition: 0.2s;
    }

    .page-sidebar-wrapper.min-width-sidebar span:first-child {
        display: block;
    }

    .page-sidebar-wrapper.min-width-sidebar li:last-child {
        width: 75px !important;
    }

        .page-sidebar-wrapper.min-width-sidebar li:last-child a span:first-child {
            -ms-transform: rotate(-180deg);
            -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
            transition: 0.2s;
            -webkit-transition: 0.2s;
            width: 25px;
        }

    .page-sidebar-wrapper.min-width-sidebar li.user-child {
        display: none;
    }

    .page-sidebar-wrapper.min-width-sidebar ul li a span:last-child {
        opacity: 1;
    }

.page-sidebar {
    transition: .2s;
    background: #2379ee;
    background: -moz-linear-gradient(top, #2379ee 0%, #156ee5 23%, #0d66df 46%, #0059d2 71%, #0053c9 92%, #0051c5 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #2379ee), color-stop(23%, #156ee5), color-stop(46%, #0d66df), color-stop(71%, #0059d2), color-stop(92%, #0053c9), color-stop(100%, #0051c5));
    background: -webkit-linear-gradient(top, #2379ee 0%, #156ee5 23%, #0d66df 46%, #0059d2 71%, #0053c9 92%, #0051c5 100%);
    background: -o-linear-gradient(top, #2379ee 0%, #156ee5 23%, #0d66df 46%, #0059d2 71%, #0053c9 92%, #0051c5 100%);
    background: -ms-linear-gradient(top, #2379ee 0%, #156ee5 23%, #0d66df 46%, #0059d2 71%, #0053c9 92%, #0051c5 100%);
    background: linear-gradient(to bottom, #2379ee 0%, #156ee5 23%, #0d66df 46%, #0059d2 71%, #0053c9 92%, #0051c5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2379ee', endColorstr='#0051c5', GradientType=0 );
}

.page-sidebar-wrapper {
    position: absolute;
    height: 100%;
    background: #0054cb;
    width: 196px;
    transition-property: opacity, left;
    transition: .3s;
}

.page-content-wrapper .page-content.min-width-content-wrapper {
    border-left: 75px solid #0054cb;
}

.page-header {
    margin-bottom: 0;
    margin-top: 20px;
    padding-bottom: 0;
    border-bottom: 0;
}

    .page-header .page-title {
        position: relative;
    }

        .page-header .page-title h1 {
            text-transform: uppercase;
            font-size: 30px;
            color: #0054cb;
            font-family: 'Bariol';
        }

        .page-header .page-title p {
            color: #475C78;
            margin: 0;
            margin-bottom: 20px;
            font-size: 14px;
        }

        .page-header .page-title a {
            color: #0054cb;
            text-decoration: none;
            padding-bottom: 2px;
        }

            .page-header .page-title a span {
                margin-right: 5px;
                font-size: 15px;
            }

.portlet-body {
    background-color: #fff;
    padding: 20px;
}

.page-link {
    position: absolute;
    right: 0;
    top: 0;
}

.page-alert {
    background-color: #f5426c;
    position: relative;
    padding: 10px;
    padding-right: 30px;
    color: #fff;
    margin-bottom: 25px;
    /*margin-top: 20px;*/
}

    .page-alert span:nth-child(2) {
        font-size: 20px;
        position: absolute;
        right: 7px;
        top: 10px;
    }

.page-body {
    background-color: #fff;
    margin-top: 25px;
    margin-bottom: 25px;
}

    .page-body .portlet-head {
        padding-left: 2%;
        padding-right: 2%;
        color: #475C78;
    }

        .page-body .portlet-head .title-left {
            display: inline-block;
        }

            .page-body .portlet-head .title-left h2 {
                font-family: 'Bariol';
                display: inline-block;
                font-size: 35px;
            }

        .page-body .portlet-head .title-right {
            padding-top: 25px;
            display: inline-block;
        }

            .page-body .portlet-head .title-right button {
                padding-top: 7px;
                padding-bottom: 7px;
                border-radius: 2.5px;
            }

                .page-body .portlet-head .title-right button span {
                    margin-right: 10px;
                    font-size: 20px;
                }

    .page-body .portlet-body .box-report-v {
        padding-top: 5%;
        padding-bottom: 6%;
    }

        .page-body .portlet-body .box-report-v .icon {
            display: inline-block;
        }

            .page-body .portlet-body .box-report-v .icon span {
                font-size: 40px;
            }

        .page-body .portlet-body .box-report-v .text-icon {
            display: inline-block;
        }

            .page-body .portlet-body .box-report-v .text-icon p {
                padding: 0;
                margin: 0;
            }

            .page-body .portlet-body .box-report-v .text-icon h3 {
                margin: 0;
                font-size: 18px;
            }

.box-report-v {
    font-family: 'Bariol';
    background-color: #fff;
    padding-top: 2%;
    padding-left: 8%;
    padding-bottom: 2%;
    color: #0054cb;
}

    .box-report-v icon span {
        margin-right: 10px;
    }

    .box-report-v p {
        padding-left: 40px;
        font-size: 18px;
    }

    .box-report-v h1 {
        font-size: 24px;
    }

        .box-report-v h1 span {
            font-size: 30px;
            margin-right: 10px;
        }

.portlet {
    margin-top: 25px;
    color: #475C78;
}

    .portlet .enc-gray {
        background-color: #f5f5f5;
        padding: 15px 25px;
        font-weight: 600;
    }

    .portlet .portlet-title {
        font-size: 14px;
        padding: 18px 20px;
        padding-left: 25px;
        background-color: #f5f5f5;
        color: #475C78;
    }

        .portlet .portlet-title h4 {
            font-size: 14px;
            margin: 0;
        }

    .portlet .portlet-footer {
        padding-top: 15px;
        padding-bottom: 15px;
        background-color: #fff;
    }

        .portlet .portlet-footer a {
            color: #0054cb;
        }

.page-content-wrapper .page-content {
    background-color: #f0f0f0;
    border-left: 196px solid #0054cb;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 45px;
}

.chart-home {
    width: 70%;
    margin: 0 auto;
}

    .chart-home img {
        width: 100%;
    }

/*Table*/
.table-list {
    background-color: #fff;
}

    .table-list p {
        background-color: #fff;
        padding-top: 18px;
        padding-bottom: 18px;
        padding-left: 20px;
        margin-bottom: 0;
        color: #475C78;
    }

.ui-datepicker-calendar span {
    position: relative !important;
    right: initial !important;
}

table {
    width: 100%;
    height: 100%;
    background-color: #fff;
    color: #475C78;
}

    table thead, table tfoot {
        background-color: #f5f5f5;
    }

    table thead {
        /*th:nth-child(5), th:nth-child(6) {
			position: relative;
			span {
				position: absolute;
		    right: 20px;
		    padding-top: 9px;
			}
		}*/
    }

        table thead tr, table thead th {
            border-bottom: 0 !important;
            border-top: 0 !important;
        }

            table thead tr select, table thead th select {
                font-weight: 400;
            }

            table thead th button.btn {
                border: none;
                padding: 4px 25px;
            }

                table thead th button.btn span {
                    margin-right: 10px;
                }

                table thead th button.btn.btn-search-table {
                    background: #0054cb;
                    color: #fff;
                }

                table thead th button.btn.btn-search-delete-filter {
                    background: #fff;
                    color: #0054cb;
                    border: 1px solid #0054cb !important;
                }

    table tbody {
        height: 100%;
        /*td:nth-child(8) span {
			font-size: 30px;
		}*/
    }

        table tbody td:nth-child(1) {
            padding-left: 0px;
            padding-right: 0px;
        }

        table tbody td:nth-child(2) {
            color: #0054cb;
        }

        table tbody td:nth-child(5) span {
            color: #c0c0c0;
        }

        table tbody td {
            padding-top: 15px !important;
            border-bottom: 1px solid #f5f5f5;
            padding-bottom: 5px !important;
        }

        table tbody input, table tbody select {
            width: 100%;
        }

        table tbody button {
            margin: 0;
        }

    table tfoot select {
        color: #c0c0c0;
        font-weight: 400;
    }

    table th[data-type='datetime'], table th[data-type='datetimevenc'] {
        position: relative;
    }

        table th[data-type='datetime'] i, table th[data-type='datetimevenc'] i {
            position: absolute;
            right: 25px;
            top: 19px;
        }

    table button {
        margin-left: 0;
    }

.report-resumen-detail .portlet-body {
    padding: 0;
}

.report-resumen-detail thead {
    background-color: transparent;
    border-bottom: 1px solid #f5f5f5;
}

    .report-resumen-detail thead tr th {
        padding-top: 15px;
        padding-bottom: 15px;
    }

.table-report-resumen tbody tr td:nth-child(1) {
    color: #0054cb;
}

.table-report-resumen tbody tr td:nth-child(2) {
    color: #475C78;
}

#transactions_report_filter {
    display: none;
}

/*Botón collapse table*/
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before {
    position: absolute;
    font-family: 'Linearicons' !important;
    line-height: 0 !important;
    font-size: 20px;
    content: "\e95b" !important;
    color: #54b748 !important;
    border: 0 !important;
    box-shadow: 0 0 0 transparent !important;
    background-color: #fff !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
    position: absolute;
    font-family: 'Linearicons' !important;
    line-height: 0 !important;
    font-size: 20px;
    content: "\e95c" !important;
    color: #f5426c !important;
    border: 0 !important;
    box-shadow: 0 0 0 transparent !important;
    background-color: #fff !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:after, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:after {
    display: none;
}

/**/
/*Nav buttons table*/
table.dataTable.nowrap thead tr:first-child th:after {
    content: '';
    background-image: url(../images/sort_both.png);
    background-repeat: no-repeat;
    display: inline-block;
    width: 19px;
    height: 19px;
}

.dataTables_scrollBody table thead tr th {
    background-image: none;
    /*display: none;*/
}

    .dataTables_scrollBody table thead tr th:after {
        display: none !important;
    }

.dataTables_scrollHeadInner table thead tr th {
    background-image: none !important;
}

    .dataTables_scrollHeadInner table thead tr th:nth-child(1):after, .dataTables_scrollHeadInner table thead tr th:last-child:after, .dataTables_scrollHeadInner table thead tr th:nth-last-child(2):after {
        background-image: none;
        display: none !important;
    }

.dataTables_scrollBody tbody tr td:last-child, .dataTables_scrollBody tbody tr td:nth-last-child(2) {
    text-align: right;
}

table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before {
    left: 20px !important;
}

table.dataTable thead th {
    padding: 10px 10px 6px 0px !important;
}

table.dataTable tfoot th {
    padding: 10px 10px 6px 0px !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before {
    top: 25px !important;
    position: absolute !important;
    margin-left: -10px !important;
    float: left !important;
}

.dataTables_processing {
    top: 10px !important;
}

.table-filters-modal {
    font-size: 13px;
}

    .table-filters-modal th {
        float: left;
        width: 100%;
        margin-bottom: 3px;
        font-size: 13px;
    }

        .table-filters-modal th a {
            width: 100%;
            margin-bottom: 5px;
        }

        .table-filters-modal th .btn-group {
            padding: 0 0 0 5%;
        }

.dataTables_wrapper tfoot {
    display: table-header-group;
}

.dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody {
    position: relative;
}

.dataTables_wrapper table.dataTable.dtr-inline.collapsed > thead > tr:nth-child(1) a {
    display: block !important;
}

.dataTables_wrapper table.dataTable.dtr-inline.collapsed tfoot {
    display: none;
}

.dataTables_wrapper .dt-buttons {
    padding-top: 12px;
}

    .dataTables_wrapper .dt-buttons button:last-child {
        margin-right: 10px;
    }

.dashboard .page-content-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover, .dashboard .page-content-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #fff !important;
    border: 1px solid #0054cb;
    background-color: #0054cb;
    border-radius: 0;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0054cb), color-stop(100%, #0054cb));
    background: -webkit-linear-gradient(top, #0054cb 0%, #0054cb 100%);
    background: -moz-linear-gradient(top, #0054cb 0%, #0054cb 100%);
    background: -ms-linear-gradient(top, #0054cb 0%, #0054cb 100%);
    background: -o-linear-gradient(top, #0054cb 0%, #0054cb 100%);
    background: linear-gradient(to bottom, #0054cb 0%, #0054cb 100%);
}

.dashboard .page-content-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button, .dashboard .page-content-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border-left: 0;
    border-right: 1px solid #ebebeb;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    border-radius: 0px;
    color: #475C78 !important;
    margin: 0;
    background-color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #fff));
    background: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
    background: -moz-linear-gradient(top, #fff 0%, #fff 100%);
    background: -ms-linear-gradient(top, #fff 0%, #fff 100%);
    background: -o-linear-gradient(top, #fff 0%, #fff 100%);
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
}

.dashboard .page-content-wrapper .dataTables_wrapper .dataTables_paginate .ellipsis {
    padding: 9px 10px;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
}

.dataTables_scrollHeadInner table thead tr th:first-child, .dataTables_scrollHeadInner table thead tr th:last-child, .dataTables_scrollHeadInner table thead tr th:nth-last-child(2) {
    background: none;
}

.bottom .dataTables_paginate.paging_simple_numbers a.paginate_button.previous, .bottom .dataTables_paginate.paging_simple_numbers a.paginate_button.previous:hover {
    border-left: 1px solid #ebebeb;
}

.btn-toggle {
    /*Radio Specific styles*/
    /*Checkbox Specific styles*/
    /*Toggle Specific styles*/
}

    .btn-toggle span {
        position: relative;
        bottom: 13px;
        left: 10px;
    }

    .btn-toggle input[type='checkbox'] {
        display: none;
        cursor: pointer;
    }

        .btn-toggle input[type='checkbox']:focus, .btn-toggle input[type='checkbox']:active {
            outline: none;
        }

        .btn-toggle input[type='checkbox'] + label {
            cursor: pointer;
            display: inline-block;
            position: relative;
            padding-left: 25px;
            margin-right: 10px;
        }

            .btn-toggle input[type='checkbox'] + label:before, .btn-toggle input[type='checkbox'] + label:after {
                content: '';
                font-family: helvetica;
                display: inline-block;
                width: 18px;
                height: 18px;
                left: 0;
                bottom: 0;
                text-align: center;
                position: absolute;
            }

            .btn-toggle input[type='checkbox'] + label:before {
                background-color: #54b748;
                -o-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
                -webkit-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }

            .btn-toggle input[type='checkbox'] + label:after {
                color: #fff;
            }

        .btn-toggle input[type='checkbox']:checked + label:before {
            -webkit-box-shadow: inset 0 0 0 10px blue;
            -moz-box-shadow: inset 0 0 0 10px blue;
            box-shadow: inset 0 0 0 10px blue;
        }

    .btn-toggle input[type='radio'] + label:before {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }

    .btn-toggle input[type='radio'] + label:hover:after,
    .btn-toggle input[type='radio']:checked + label:after {
        content: '\2022';
        position: absolute;
        top: 0px;
        font-size: 19px;
        line-height: 15px;
    }

    .btn-toggle input[type='radio'] + label:hover:after {
        color: blue;
    }

    .btn-toggle input[type='radio']:checked + label:after,
    .btn-toggle input[type='radio']:checked + label:hover:after {
        color: #fff;
    }

    .btn-toggle input[type='checkbox'] + label:before {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    .btn-toggle input[type='checkbox'] + label:hover:after,
    .btn-toggle input[type='checkbox']:checked + label:after {
        content: "\2713";
        line-height: 18px;
        font-size: 14px;
    }

    .btn-toggle input[type='checkbox'] + label:hover:after {
        color: blue;
    }

    .btn-toggle input[type='checkbox']:checked + label:after,
    .btn-toggle input[type='checkbox']:checked + label:hover:after {
        color: #fff;
    }

    .btn-toggle input[type='checkbox'] {
        width: 50px !important;
    }

        .btn-toggle input[type='checkbox'].toggle {
            border: 2px solid #c0c0c0;
            display: inline-block;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 50px;
            height: 32px;
            background-color: white;
            position: relative;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            -o-transition: all 0.2s ease;
            -moz-transition: all 0.2s ease;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

            .btn-toggle input[type='checkbox'].toggle:hover:after {
                background-color: white;
            }

            .btn-toggle input[type='checkbox'].toggle:after {
                content: '';
                display: inline-block;
                position: absolute;
                width: 24px;
                height: 24px;
                background-color: white;
                border: 2px solid #c0c0c0;
                top: 2px;
                left: 4px;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                -o-transition: all 0.2s ease;
                -moz-transition: all 0.2s ease;
                -webkit-transition: all 0.2s ease;
                transition: all 0.2s ease;
            }

        .btn-toggle input[type='checkbox']:checked.toggle {
            border: 1px solid #54b748;
            -webkit-box-shadow: inset 0 0 0 15px #54b748;
            -moz-box-shadow: inset 0 0 0 15px #54b748;
            box-shadow: inset 0 0 0 15px #54b748;
        }

            .btn-toggle input[type='checkbox']:checked.toggle:after {
                left: 21px;
                background-color: #fff;
                border: 1px solid #54b748;
            }

/**/
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: #475C78 !important;
    padding-top: 20px !important;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

    .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_info label, .dataTables_wrapper .dataTables_processing label, .dataTables_wrapper .dataTables_paginate label {
        font-weight: 400;
    }

.bottom .dataTables_wrapper .dataTables_paginate {
    padding-top: 20px;
    padding-bottom: 20px;
}

.dataTables_scrollBody {
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
}

    .dataTables_scrollBody tfoot i {
        display: none;
    }

    .dataTables_scrollBody table.dataTable tbody > tr.selected, .dataTables_scrollBody table.dataTable tbody > tr > .selected {
        background-color: #fff;
    }

    .dataTables_scrollBody .action-table-ddwn i {
        font-size: 20px;
        margin-right: 5px;
    }

    .dataTables_scrollBody table.dataTable > tbody > tr.child ul.dtr-details > li {
        border-bottom: 0;
        padding: 10px;
    }

        .dataTables_scrollBody table.dataTable > tbody > tr.child ul.dtr-details > li:first-child {
            padding-top: 0;
        }

.dataTables_scrollFoot {
    overflow: visible !important;
}

.check-general {
    margin: 0 auto;
    background: white;
    border: 1px solid #c0c0c0;
    width: 17px;
    height: 17px;
    border-radius: 3px;
}

    .check-general input {
        opacity: 0;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .check-general.checked:after {
        content: '\2714';
        margin-left: -13px;
        text-align: center;
        text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;
    }

table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd, table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1, table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1, table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover, .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fff !important;
}

.page-content-body.table-list table.dataTable tfoot th, table.dataTable tfoot td {
    border-top: none;
}

.dataTables_info {
    color: #475C78;
}

.dataTables_paginate .pagination {
    margin: 0;
}

    .dataTables_paginate .pagination a {
        color: #475C78;
    }

.top .dataTables_info#transactions_report_info {
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #475C78;
}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #0054cb;
    border-color: none;
}

.detail-icon-text {
    padding-left: 25px;
    padding-right: 25px;
}

    .detail-icon-text h3 {
        font-weight: 600;
        font-size: 14px;
    }

    .detail-icon-text p {
        padding-left: 10px;
    }

.detail-report-trans .portlet-body {
    padding: 20px 0;
}

    .detail-report-trans .portlet-body button {
        margin: 0;
    }

table.table-detail-trans.table span {
    color: #c9c9c9;
}

table.table-detail-trans.table thead tr th, table.table-detail-trans.table tbody tr td {
    padding-bottom: 17px !important;
    padding-top: 17px !important;
}

table.table-detail-trans.table tr td {
    border-top: 0;
    border-bottom: 0;
}

table.table-detail-trans.table td:nth-child(2) {
    color: #475C78;
}

.report-trans-recently .header-detail-report-trans p {
    font-weight: 600;
}

.report-trans-recently button {
    margin: 0;
}

.report-trans-recently p span {
    color: #c9c9c9;
}

.report-trans-recently .portlet-body {
    padding: 10px;
}

.report-trans-recently .btn-see {
    padding: 2px 5px;
}

    .report-trans-recently .btn-see span {
        margin-right: 5px;
    }

.report-trans-recently .row > div > .row {
    padding: 10px;
    border-bottom: 1px solid #ebebeb;
    margin-left: -10px;
    margin-right: -10px;
}

/*.evolucion-ventas {
	background-color: $colwhite;
}*/
/*.detail-trans-table .portlet-body {
	padding-left: 0 !important;
	padding-right: 0 !important;
	table tbody tr td, table thead tr th {
		padding-left: 20px;
		padding-top: 13px;
		padding-bottom: 13px;
		span {
			color: $colsmoke;
		}
	}
}*/
.ant-trans, .next-trans {
    margin-top: 30px;
    margin-bottom: 10px;
    color: #0054cb;
}

    .ant-trans span, .next-trans span {
        font-size: 20px;
    }

    .ant-trans span {
        margin-right: 10px;
    }

    .next-trans span {
        margin-left: 10px;
    }

.status {
    position: relative;
    top: 2px;
    left: 0;
}

/*input[type=checkbox] {
  display: none;
}*/
table.dataTable tbody td.select-checkbox:before, table.dataTable tbody th.select-checkbox:before {
    border: 1px solid #c0c0c0 !important;
}

table.dataTable tbody td.select-checkbox:before, table.dataTable tbody td.select-checkbox:after, table.dataTable tbody th.select-checkbox:before, table.dataTable tbody th.select-checkbox:after {
    top: 1.7em !important;
    width: 17px !important;
    height: 17px !important;
}

table tbody td {
    text-align: center !important;
}

label {
    cursor: pointer;
}

    label span {
        display: block;
        position: absolute;
        left: 0;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        transition-duration: 0.3s;
    }

    label .box {
        border: 1px solid #c0c0c0;
        border-radius: 2px;
        height: 15px;
        width: 15px;
        z-index: 888;
        -webkit-transition-delay: 0.2s;
        -moz-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

    label .check {
        top: -7px;
        left: 6px;
        width: 12px;
        height: 24px;
        border: 1px solid #c0c0c0;
        border-radius: 2px;
        border-top: none;
        border-left: none;
        opacity: 0;
        z-index: 888;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        transform: rotate(180deg);
        -webkit-transition-delay: 0.3s;
        -moz-transition-delay: 0.3s;
        transition-delay: 0.3s;
    }

@-moz-document url-prefix() {
    label .check {
        top: -2px;
    }
}

input[type=checkbox]:checked ~ label .box {
    opacity: 0;
    -webkit-transform: scale(0) rotate(-180deg);
    -moz-transform: scale(0) rotate(-180deg);
    transform: scale(0) rotate(-180deg);
}

input[type=checkbox]:checked ~ label .check {
    opacity: 1;
    -webkit-transform: scale(1) rotate(45deg);
    -moz-transform: scale(1) rotate(45deg);
    transform: scale(1) rotate(45deg);
}

.visaLogo {
    background-position: 0px 0px !important;
    background-repeat: no-repeat !important;
    background-size: 42px !important;
    background-image: url("https://s3.amazonaws.com/logos-multimarca/logocampocard/LogoVisa.jpeg") !important;
}

.amexLogo {
    background-position: 0px 0px !important;
    background-repeat: no-repeat !important;
    background-size: 42px !important;
    background-image: url("https://s3.amazonaws.com/logos-multimarca/logocampocard/LogoAmex.jpeg") !important;
}

.dinersclubLogo {
    background-position: 0px 0px !important;
    background-repeat: no-repeat !important;
    background-size: 42px !important;
    background-image: url("https://s3.amazonaws.com/logos-multimarca/logocampocard/logoDiner.jpeg") !important;
}

.mastercardLogo {
    background-position: 0px 0px !important;
    background-repeat: no-repeat !important;
    background-size: 42px !important;
    background-image: url("https://s3.amazonaws.com/logos-multimarca/logocampocard/logoMC.jpeg") !important;
}

.evaleLogo {
    background-position: 0px 0px !important;
    background-repeat: no-repeat !important;
    background-size: 42px !important;
    background-image: url("https://s3.amazonaws.com/logos-multimarca/logocampocard/LogoSodexo.jpg") !important;
}

.ripleyLogo {
    background-position: 0px 0px !important;
    background-repeat: no-repeat !important;
    background-size: 42px !important;
    background-image: url("https://s3.amazonaws.com/logos-multimarca/logocampocard/LogoRipley.png") !important;
}

/*TOUR*/
.tour {
    height: 100vh;
    background: rgba(0, 90, 212, 0.95);
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 14px;
    transition: 0.2s;
    -webkit-transition: 0.2s;
}

    .tour a.closetour-icon-salir {
        color: #ffb400;
        text-decoration: none;
        position: absolute;
        top: 20px;
        right: 30px;
        font-weight: bold;
    }

        .tour a.closetour-icon-salir i {
            color: #fff;
            font-size: 30px;
            position: relative;
            top: 8px;
            left: 10px;
        }

    .tour .pasotour {
        position: absolute;
        width: 100%;
    }

        .tour .pasotour a.prevtour {
            color: #ffb400;
            font-weight: bold;
            text-align: right;
            text-decoration: none;
        }

            .tour .pasotour a.prevtour i {
                font-size: 40px;
                position: relative;
                top: 8px;
                margin-right: 10px;
            }

        .tour .pasotour a.nexttour {
            color: #ffb400;
            font-weight: bold;
            text-align: right;
            float: right;
            text-decoration: none;
        }

            .tour .pasotour a.nexttour i {
                font-size: 40px;
                position: relative;
                top: 8px;
                margin-left: 10px;
            }

        .tour .pasotour h2 {
            font-family: 'Bariol';
            font-size: 30px;
            font-weight: normal;
            margin-top: 5px;
        }

        .tour .pasotour p {
            font-size: 14px;
        }

        .tour .pasotour .detpaso-wl {
            width: 40%;
            margin: 0 auto;
        }

            .tour .pasotour .detpaso-wl i {
                font-size: 60px;
            }

            .tour .pasotour .detpaso-wl h2 {
                margin-top: 20px;
                margin-bottom: 30px;
            }

            .tour .pasotour .detpaso-wl a.nexttour {
                float: initial;
                text-align: center;
            }

        .tour .pasotour .detpaso-ws {
            padding-top: 3%;
            width: 390px;
        }

    .tour .paso1 {
        top: 100px;
    }

    .tour .paso2 {
        opacity: 0;
        display: none;
        left: 25px;
        top: 100px;
        width: 390px;
    }

    .tour .paso3 {
        opacity: 0;
        display: none;
        /* left: 25px; */
        top: 261px;
        width: 100%;
    }

        .tour .paso3 .box-report-v {
            -webkit-box-shadow: 0 0 0 0;
            -moz-box-shadow: 0 0 0 0;
            box-shadow: 0 0 0 0;
        }

/*Pago link nuevo*/
.pgl-new .portlet-body .portlet-box {
    padding-top: 10px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 30px;
    padding-left: 7%;
}

    .pgl-new .portlet-body .portlet-box h3 {
        padding-top: 20px;
        font-size: 24px;
        font-family: 'Bariol';
        color: #54b748;
    }

        .pgl-new .portlet-body .portlet-box h3 span {
            margin-right: 10px;
        }

    .pgl-new .portlet-body .portlet-box p:nth-child(2) {
        margin-bottom: 15px;
    }

    .pgl-new .portlet-body .portlet-box select {
        width: 240px;
        color: #c0c0c0;
        padding: 7px 5px;
    }

    .pgl-new .portlet-body .portlet-box > div > div select, .pgl-new .portlet-body .portlet-box > div > div input {
        width: 100%;
    }

    .pgl-new .portlet-body .portlet-box li:nth-child(2) {
        margin-left: 35px;
    }

    .pgl-new .portlet-body .portlet-box .icon-in-text {
        font-size: 30px;
        position: relative;
        bottom: -8px;
        margin-left: 7px;
        margin-right: 7px;
    }

    .pgl-new .portlet-body .portlet-box .txt-small {
        font-size: 14px;
        color: #475C78;
        font-family: Arial;
        margin-left: 5px;
    }

    .pgl-new .portlet-body .portlet-box input[type='text'] {
        width: 100%;
        padding: 7px;
        margin-bottom: 30px;
    }

    .pgl-new .portlet-body .portlet-box ul li {
        display: inline-block;
    }

.pgl-new .portlet-body ol li {
    margin-left: 0 !important;
    margin-bottom: 10px;
}

.pgl-new .portlet-body .portlet-footer-box {
    padding-top: 2%;
    padding-bottom: 0%;
}

    .pgl-new .portlet-body .portlet-footer-box li {
        display: inline-block;
    }

.pgl-new .portlet-body .modal ul li {
    display: list-item;
}

    .pgl-new .portlet-body .modal ul li p:nth-child(1) {
        font-weight: 600;
    }

    .pgl-new .portlet-body .modal ul li p button {
        padding-top: 12px;
        padding-bottom: 12px;
        border-radius: 11px;
    }

.users .portlet {
    margin-bottom: 20px;
}

    .users .portlet input, .users .portlet select, .users .portlet button {
        width: 100%;
        margin-left: 0;
        padding-top: 7px;
        padding-bottom: 7px;
        height: 35px;
        margin-bottom: 10px;
    }

        .users .portlet input i, .users .portlet select i, .users .portlet button i {
            margin-right: 10px;
        }

.first li {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
    margin-bottom: 14px;
    /*
  h5 {
  	font-weight: 600;
  	i {
  		padding-right: 10px;
  	}
  }
  p {
  	padding-left: 5px;
  }*/
}

    .first li:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.review, .abandonada, .abandoned {
    background-color: #8f8f8f;
    color: #fff;
    padding: 3% 13%;
    border-radius: 3px;
}

.liquidated, .liquidada, span.liquidada, span.liquidated, span.liquidada, .confirmed, .processed {
    background-color: #54b748;
    color: #fff;
    padding: 3% 13%;
    border-radius: 3px;
}

.authorized, .autorizada, span.authorized, span.autorizada, .porliquidar, .pending {
    background-color: #fc9e00;
    color: #fff;
    padding: 3% 12%;
    border-radius: 3px;
}

.expired, .vencida, .cancel, .voided, span.anulada, span.voided, .rejected, .notauthorized, .rejected, .reject, .denegada, span.notauthorized, span.rejected, span.reject, span.denegada {
    background-color: #f5426c;
    color: #fff;
    padding: 3% 13%;
    border-radius: 3px;
}

.anulada {
    background-color: #f5426c;
    color: #fff;
    padding: 3% 17%;
    border-radius: 3px;
}

.recpass.config-p-sec .mdini {
    background-color: #fff;
    padding: 5%;
}

    .recpass.config-p-sec .mdini > div {
        position: relative;
    }

        .recpass.config-p-sec .mdini > div .lnr {
            top: 0;
        }

.export {
    padding: 2px 10px;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
}

    .export a.dt-button, .export button.dt-button:hover:not(.disabled), .export div.dt-button:hover:not(.disabled), .export a.dt-button:hover:not(.disabled), .export button.dt-button:focus:not(.disabled), .export div.dt-button:focus:not(.disabled), .export a.dt-button:focus:not(.disabled), .export button.dt-button:active:not(.disabled), .export button.dt-button.active:not(.disabled), .export div.dt-button:active:not(.disabled), .export div.dt-button.active:not(.disabled), .export a.dt-button:active:not(.disabled), .export a.dt-button.active:not(.disabled), .export button.dt-button:active:not(.disabled):hover:not(.disabled), .export button.dt-button.active:not(.disabled):hover:not(.disabled), .export div.dt-button:active:not(.disabled):hover:not(.disabled), .export div.dt-button.active:not(.disabled):hover:not(.disabled), .export a.dt-button:active:not(.disabled):hover:not(.disabled), .export a.dt-button.active:not(.disabled):hover:not(.disabled) {
        background: transparent;
        border: 0;
        padding: 0;
        text-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
        color: #0054cb;
        font-size: 14px;
        padding-top: 5px;
        padding-bottom: 2px;
    }

        .export a.dt-button i, .export button.dt-button:hover:not(.disabled) i, .export div.dt-button:hover:not(.disabled) i, .export a.dt-button:hover:not(.disabled) i, .export button.dt-button:focus:not(.disabled) i, .export div.dt-button:focus:not(.disabled) i, .export a.dt-button:focus:not(.disabled) i, .export button.dt-button:active:not(.disabled) i, .export button.dt-button.active:not(.disabled) i, .export div.dt-button:active:not(.disabled) i, .export div.dt-button.active:not(.disabled) i, .export a.dt-button:active:not(.disabled) i, .export a.dt-button.active:not(.disabled) i, .export button.dt-button:active:not(.disabled):hover:not(.disabled) i, .export button.dt-button.active:not(.disabled):hover:not(.disabled) i, .export div.dt-button:active:not(.disabled):hover:not(.disabled) i, .export div.dt-button.active:not(.disabled):hover:not(.disabled) i, .export a.dt-button:active:not(.disabled):hover:not(.disabled) i, .export a.dt-button.active:not(.disabled):hover:not(.disabled) i {
            margin-right: 10px;
        }

.bloqcopy {
    border: 1px solid #cecece;
    border-radius: 5px;
    padding: 15px;
    position: relative;
}

    .bloqcopy .btncopycode {
        position: absolute;
        right: 0;
        top: 0;
    }

/*.content-terms {
	label {
		font-weight: 400;
	}
	.terms-condic {
	  border: 1px solid #cccccc;
	  padding: 19px;
	  margin-left: 20px;
	  border-radius: 7px;
	  background-color: #fbfbfb;
	  color: #c7c3c3;
	  font-family: serif;
	}
}*/
.content-appar-enlace {
    margin-top: 15px;
    background-color: #f1f1f1;
    padding: 15px 25px;
}

    .content-appar-enlace .enlace-visa ul {
        border: 1px solid #d2d2d2;
    }

    .content-appar-enlace .enlace-visa ul, .content-appar-enlace .enlace-visa li {
        margin: 0;
        padding: 0 2px;
        padding-right: 0;
    }

    .content-appar-enlace input {
        margin-bottom: 0 !important;
    }

.optionsuser .suboptionuser {
    border-left: solid 5px #eaeaea;
    padding-left: 20px;
    margin-top: 20px;
}

.linkadd {
    display: block;
    background: #f1f1f1;
    color: #c7c3c3;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    float: right;
    margin: 20px 0;
    padding: 4px 10px;
}

.linkeliminar {
    display: block;
    background: #f1f1f1;
    color: #c7c3c3;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    margin: 0;
    padding: 4px 10px;
    width: 90px;
}

.pgl-new .portlet-body .portlet-box.addsusers {
    border: 1px solid #d2d2d2 !important;
    border-radius: 3px;
    margin-top: 20px;
    border-bottom: initial;
    padding-bottom: 0;
}

    .pgl-new .portlet-body .portlet-box.addsusers table tbody tr th {
        background: #f1f1f1;
        border: 1px solid #d2d2d2;
        border-width: 1px 0;
        padding: 15px;
    }

    .pgl-new .portlet-body .portlet-box.addsusers table tbody tr td {
        padding: 5px 15px !important;
        border-bottom: 1px solid #f0f0f0;
    }

    .pgl-new .portlet-body .portlet-box.addsusers p {
        padding: 15px;
    }

ul.carac-pass {
    margin-left: 0px;
    padding-left: 18px;
}

    ul.carac-pass li {
        font-size: 14px !important;
        list-style: disc;
        margin-bottom: 5px;
        color: #b2b9c3;
        /*display: block!important;*/
        margin-left: 0 !important;
    }

        ul.carac-pass li:first-child {
            padding-top: 10px;
            margin-bottom: 5px;
            line-height: inherit;
            color: #b2b9c3;
            text-transform: none;
            font-weight: normal;
            font-family: Arial, Serif;
        }

        ul.carac-pass li:last-child {
            color: #b2b9c3;
        }

        ul.carac-pass li.passgood {
            color: #b2b9c3;
        }

            ul.carac-pass li.passgood i {
                color: #54b748;
                font-weight: bolder;
                margin-left: 10px;
            }

        ul.carac-pass li.passwrong {
            color: #475c78;
        }

            ul.carac-pass li.passwrong i {
                color: #f5426c;
                font-weight: bolder;
                margin-left: 10px;
            }

.portlet-box.row.ovfl {
    overflow: hidden;
    width: 100%;
}

.sesion-expirada input[type='text'] {
    background: #fff;
    border: 0;
    border-radius: 4px;
    color: #000;
    font-family: 'Arial';
    font-size: 18px;
    height: 50px;
    padding-left: 60px;
    width: 262px;
}

.sesion-expirada input[type='submit'] {
    background: #0054cb;
    border: 0;
    border-radius: 4px;
    color: #fff;
    font-family: 'Arial';
    font-size: 18px;
    height: 50px;
    width: 262px;
    margin-bottom: 30px;
}

.sesion-expirada .lnr {
    top: 0;
    color: #ffad23;
    font-size: 30px;
    left: 13px;
    position: absolute;
    font-style: initial;
    font-size: 50px;
}

.sesion-expirada .new-pass {
    width: 262px;
    position: relative;
    margin: 0 auto;
}

    .sesion-expirada .new-pass div {
        position: relative;
    }

        .sesion-expirada .new-pass div input {
            border: solid 1px #f0f0f0;
        }

    .sesion-expirada .new-pass p {
        text-align: left;
    }

        .sesion-expirada .new-pass p span {
            float: right;
        }

            .sesion-expirada .new-pass p span span {
                float: initial;
            }

.input-small {
    width: 240px;
    position: relative;
}

.venc {
    width: 240px;
}

    .venc input {
        width: 100%;
    }

.input-group input, .input-group span {
    margin-bottom: 0 !important;
    border: 1px solid #ebebeb;
}

.pay-link-images-bottom {
    width: 15%;
    height: auto;
    padding-left: 10px;
    margin-right: 0px;
}

.pago-link-enlace {
    background-color: whitesmoke;
    padding: 20px;
    margin-top: 20px;
    border-radius: 5px;
    padding-bottom: 30px;
}

    .pago-link-enlace input[type='radio'] {
        position: absolute;
        width: auto !important;
        left: 5px;
        top: 5px;
    }

    .pago-link-enlace label {
        font-weight: 400;
        padding-bottom: 10px;
    }

    .pago-link-enlace input[type="text"] {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .pago-link-enlace .input-group {
        padding-left: 30px;
    }

    .pago-link-enlace i {
        position: absolute;
        right: 7px;
        top: 10px;
        z-index: 99;
    }

.vt-state-text {
    display: block;
    width: 100%;
    min-width: 100px;
    text-align: center;
    padding: 2px 4px;
    border-radius: 4px;
}

/*BSO-471*/
.input-mail-share {
    width: 85% !important;
}

/*BSO-116*/
.col-check {
    width: 5% !important;
}

/*Ini Dcc*/
.div-idioma {
    width: 100%;
    height: auto;
    text-align: right;
}

.link-idioma {
    text-decoration: none !important;
    cursor: pointer;
}

.row-dcc {
    margin: 20px 0 !important;
    /*margin-right: 0 !important;
    margin-left: 0 !important;*/
}

input, select {
    border-radius: 3px;
    border: 1px solid #ebebeb;
    padding: 4px 6px;
}

h4.titulo-form {
    font-size: 15px;
    font-weight: bold;
    /*text-decoration: underline;*/
}

.div-dcc {
    width: 100%;
    text-align: center;
    padding-top: 0;
}

.item-dcc {
    width: 45%;
    border: 4px solid #e5e5e5;
    border-radius: 4px;
    padding-top: 8px;
    padding-left: 5px;
    margin-top: 0px;
    margin-bottom: 10px !important;
    display: inline-table;
    text-align: left;
}

.item-dcc-active {
    border: 4px solid #ff9e00;
}

.item-left {
    position: relative;
    min-height: 100px;
    height: auto;
    margin: auto;
}

.recomendado-es {
    background-image: url('../images/recomendado.png');
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 0%;
}

.recomendado-en {
    background-image: url('../images/recommended.png');
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 0%;
}

/*.item-left:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 45%;
        font-size: 0.8em;
        text-align: center;
        color: #fff;
        background: #ff9e00;
        content: 'Recomendado';
        transform: translate(135%, 150%) rotate(45deg);
        opacity: 0.7;
    }*/

.item-left label {
    font-size: 14px;
}

.item-left ul {
    width: 80%;
    list-style-type: none;
    list-style: none;
    padding: 0;
    margin: 0;
    margin: auto;
}

    .item-left ul li {
        text-decoration: none;
        font-size: 10px;
    }

.item-left a {
    text-decoration: none !important;
    cursor: pointer;
}

    .item-left a img {
        height: 15px !important;
        width: 15px !important;
        float: right;
        margin: 8px 10px 0;
    }

.span-inline {
    display: contents !important;
    font-weight: bold;
    color: #000 !important;
    font-size: 12px !important;
}

.item-right {
    min-height: 100px;
    height: auto;
    margin: auto;
    margin-left: 15px;
}

    .item-right label {
        color: gray;
        text-transform: none;
        font-weight: normal;
    }

    .item-right ul {
        width: 90%;
        list-style-type: none;
        list-style: none;
        padding: 0;
        margin: 0;
        margin: auto;
    }

        .item-right ul li {
            text-decoration: none;
            text-align: center;
            font-size: 10px;
            color: gray;
        }

.input-radio:checked,
.input-radio:not(:checked) {
    position: absolute;
    left: -9999px;
}

    .input-radio:checked + label,
    .input-radio:not(:checked) + label {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        line-height: 20px;
        display: inline-block;
        color: #666;
    }

        .input-radio:checked + label:before,
        .input-radio:not(:checked) + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border: 1px solid #ddd;
            border-radius: 100%;
            background-color: #fff;
        }

        .input-radio:checked + label:after,
        .input-radio:not(:checked) + label:after {
            content: '';
            width: 12px;
            height: 12px;
            background: #F87D49;
            position: absolute;
            top: 3px;
            left: 3px;
            border-radius: 100%;
            transition: all 0.2s ease;
        }

        .input-radio:not(:checked) + label:after {
            opacity: 0;
            transform: scale(0);
        }

        .input-radio:checked + label:after {
            opacity: 1;
            transform: scale(1);
        }

.bg-input {
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-user {
    background-image: url("../images/icons/man-user.png");
}

    .bg-user:hover {
        background-image: url("../images/icons/man-user-azul.png");
    }


.bg-mail {
    background-image: url("../images/icons/close-envelope.png");
}

    .bg-mail:hover {
        background-image: url("../images/icons/close-envelope-azul.png");
    }

.bg-truck {
    background-image: url("../images/icons/delivery-truck.png");
}

    .bg-truck:hover {
        background-image: url("../images/icons/delivery-truck-azul.png");
    }

.bg-phone {
    background-image: url("../images/icons/phone-receiver.png");
}

    .bg-phone:hover {
        background-image: url("../images/icons/phone-receiver-azul.png");
    }

.bg-card {
    background-image: url("../images/icons/credit-card.png");
}

    .bg-card:hover {
        background-image: url("../images/icons/credit-card-azul.png");
    }

.bg-calendar {
    background-image: url("../images/icons/small-calendar.png");
}

    .bg-calendar:hover {
        background-image: url("../images/icons/small-calendar-azul.png");
    }

.bg-cash {
    background-image: url("../images/icons/banknote.png");
}

    .bg-cash:hover {
        background-image: url("../images/icons/banknote-azul.png");
    }

.ctform .btn-orange {
    display: block;
    background: #ffb900;
    border-radius: 4px;
    width: 100%;
    color: #fff !important;
    font-size: 24px;
    font-weight: bold;
    padding: 5px;
    margin: 30px 0 20px !important;
}

/*.ctform .btn .btncontinuar {
        background: #ffb900;
    }

        .ctform .btn .btncontinuar:hover {
            background: #ffb900;
        }*/

.ctform .btn-disabled {
    background: #c4c4c4;
}
/*Fin Dcc*/

/*@media screen and (max-width: 1600px) {
	table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before {
	  margin-top: -14px;
	}
}*/
@media screen and (max-width: 1200px) {
    .login .recpass .mdsesion .texhelp {
        bottom: 40px;
    }
}

@media screen and (max-width: 1200px) {
    body {
        font-size: 13px;
    }

    .navbar-fixed ul.navbar-nav li > a {
        padding-left: 0;
        padding-right: 15px;
    }

        .navbar-fixed ul.navbar-nav li > a button {
            margin-left: 5px;
        }

    .box-report-v {
        margin-bottom: 25px;
    }

        .box-report-v h1 {
            font-size: 20px;
        }

            .box-report-v h1 span {
                font-size: 26px;
                margin-right: 10px;
            }

        .box-report-v p {
            padding-left: 12%;
            font-size: 15px;
        }

    .page-content-wrapper.ventas .box-report-v {
        padding: 10% 5% 2%;
    }

        .page-content-wrapper.ventas .box-report-v .icon, .page-content-wrapper.ventas .box-report-v .text-icon {
            display: block;
            text-align: center;
            margin-bottom: 9px;
        }

            .page-content-wrapper.ventas .box-report-v .icon span {
                margin-top: 10px;
                font-size: 30px;
            }

    .pgl-new .portlet-body {
        padding-left: 250px;
        padding-right: 35px;
    }
}

@media screen and (max-width: 1024px) {
    .pgl-new .portlet-body {
        padding-left: 150px;
        padding-right: 35px;
    }

    .ventas .page-body .title-left h2 {
        font-family: 'Bariol';
        display: inline-block;
        font-size: 30px;
    }

    .page-content-wrapper .page-body .portlet-head .title-right button {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    /*.navbar-header {
  	width: 100%;
  }
  .navbar-fixed {
  	> ul:nth-child(1) {
  		width: 100%;
    	text-align: center;
    	> li {
    		float: initial;
    		display: inline-block;
    	}
  	}

  	> ul:nth-child(2) {
  		position: absolute;
    	right: 0;
  	}
  }*/
    .report-resumen-table .col-md-6 {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .navbar-top-home .navbar-fixed .navbar-nav {
        text-align: right;
    }

    .navbar-fixed .navbar-nav > li {
        display: inline-block;
    }

    .box-report-v {
        margin-bottom: 0;
    }

    .mdcontrasena {
        height: 12vh;
    }

    .mdsesion {
        height: 88vh;
    }

    .input-mail-share {
        /*BSO-471*/
        width: 100% !important;
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 640px) {
    .tour {
        bottom: 0;
        top: initial;
        overflow: scroll;
    }

        .tour .pasotour {
            width: 100%;
            padding-left: 5%;
            padding-right: 5%;
            left: 0;
        }

            .tour .pasotour .detpaso-ws, .tour .pasotour .detpaso-wl {
                width: 100%;
            }

            .tour .pasotour.paso2 .icon-arrow-left {
                display: none;
            }

            .tour .pasotour.paso3 {
                top: 70px;
            }

    .navbar-toggle {
        margin-top: 15px;
    }

    .logo-left {
        padding-top: 3%;
        padding-bottom: 8%;
    }

    .navbar-fixed ul.nav:nth-child(1) li a {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .navbar-brand {
        float: initial;
    }

    .page-content-wrapper .page-content {
        padding-right: 20px;
        padding-left: 20px;
        border-left: 0;
    }

    .page-sidebar-wrapper {
        opacity: 0;
        -o-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

        .page-sidebar-wrapper.min-width-sidebar#max-width-sidebar {
            opacity: 1;
            -o-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
            display: block;
            width: 100%;
            z-index: 999;
        }

            .page-sidebar-wrapper.min-width-sidebar#max-width-sidebar .page-sidebar ul.navbar-left li {
                float: none;
            }

                .page-sidebar-wrapper.min-width-sidebar#max-width-sidebar .page-sidebar ul.navbar-left li:last-child {
                    display: none;
                }

            .page-sidebar-wrapper.min-width-sidebar#max-width-sidebar span:last-child, .page-sidebar-wrapper.min-width-sidebar#max-width-sidebar span:first-child {
                display: inline-block;
            }

    .tour .pasotour .detpaso-wl {
        width: 100%;
    }

    .box-report-v {
        margin-bottom: 20px;
    }

    .ventas .page-body .title-left h2 {
        font-size: 20px;
    }

    .ventas .page-body .title-left button {
        margin: 0;
    }

    .ventas .page-body .title-right, .ventas .page-body .title-left {
        display: block;
        float: initial !important;
        text-align: center;
    }

        .ventas .page-body .title-right button, .ventas .page-body .title-left button {
            margin: 0;
        }

    .pagolink .page-header .page-alert span:nth-child(2) {
        top: 8px;
    }

    .pagolink .page-link {
        position: relative;
        margin-bottom: 20px;
    }

        .pagolink .page-link button {
            margin-left: 0px;
        }

    .page-header {
        text-align: center;
    }

        .page-header .page-title h1 {
            font-size: 25px;
        }

    .page-content-wrapper .pgl-new .portlet-body {
        padding-left: 20px;
        padding-right: 20px;
    }

        .page-content-wrapper .pgl-new .portlet-body .portlet-box li {
            margin-left: 0;
        }

        .page-content-wrapper .pgl-new .portlet-body .portlet-footer-box {
            text-align: center;
        }

            .page-content-wrapper .pgl-new .portlet-body .portlet-footer-box li {
                margin-top: 10px;
                margin-bottom: 15px;
                display: block;
            }

    .users ul li {
        width: 100%;
        padding-left: 0;
    }

    .modal .modal-dialog {
        margin-top: 10px;
    }

    table.dataTable .dtr-details {
        width: 100%;
    }

        table.dataTable .dtr-details li:last-child span.dtr-title, table.dataTable .dtr-details li:nth-last-child(2) span.dtr-title {
            display: none;
        }

        table.dataTable .dtr-details li:last-child span.dtr-data, table.dataTable .dtr-details li:nth-last-child(2) span.dtr-data {
            width: 100%;
        }

            table.dataTable .dtr-details li:last-child span.dtr-data button, table.dataTable .dtr-details li:nth-last-child(2) span.dtr-data button {
                width: 100%;
            }

    .export {
        width: 85%;
        float: initial !important;
        /* margin-left: 20px; */
        /* margin: 0 auto; */
        display: block;
        margin: 0 auto 20px;
    }

    .nav-report-v .navbar-filter-datetime .form-group {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .nav-report-v .navbar-nav.navbar-right {
        padding-bottom: 20px;
    }

    .nav-report-v .navbar-nav.navbar-left {
        text-align: center;
    }

        .nav-report-v .navbar-nav.navbar-left li {
            display: inline-block;
        }

    span.authorized, span.rejected, span.liquidated {
        padding: 5px;
    }

    table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
        margin-top: -14px;
    }

    .page-link {
        position: relative;
        text-align: center;
    }

        .page-link button {
            margin: 0;
        }
    /*.mdini, .mdini input[type='text'], .mdini input[type='submit']{
		width: 100%;
	}*/
    .new-pass p > span, .repeat-new-pass p > span {
        left: initial;
        right: 10px;
    }

    .input-small, .input-group, .input-small .input-group input, .mdini, .mdsesion .mdini input {
        width: 100%;
    }

    .mdini {
        padding-left: 20px;
        padding-right: 20px;
    }

    .mdsesion {
        position: relative;
        padding-left: 0;
    }

    .containt-small {
        width: 100%;
    }

    .mdcontrasena {
        padding: 0;
        text-align: center;
        width: 100%;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .cablog {
        position: initial;
    }

    .recpass .mdsesion {
        height: 100vh;
    }

        .recpass .mdsesion .texhelp {
            bottom: 20px;
            text-align: center;
        }
}

.order-icon {
    background: url(/images/icons/order-manager-icon.png);
    width: 25px;
    height: 25px;
    display: inline-block;
}

@media (max-width: 425px) {
    .ctbien .contebien {
        left: 0;
        margin-left: 0;
        width: 100%;
    }

        .ctbien .contebien h1 {
            font-size: 28px;
        }

        .ctbien .contebien > img {
            margin-bottom: 40px;
        }

    .ctdescpago {
        width: 100%;
    }

        .ctdescpago .cab {
            text-align: center;
        }

            .ctdescpago .cab li:first-child {
                margin-bottom: 20px;
            }

        .ctdescpago .ctform .clinput {
            margin-bottom: 10px; /*dcc*/
        }

            .ctdescpago .ctform .clinput .cleft,
            .ctdescpago .ctform .clinput .cright {
                float: initial;
                display: block;
                width: 100%;
            }

            .ctdescpago .ctform .clinput .cleft {
                margin-bottom: 10px; /*dcc*/
            }
}

@media (max-width: 375px) {
    .ctbien .contebien {
        padding-left: 5%;
        padding-right: 5%;
    }

    .ctbien .selecomercio {
        width: 100%;
    }

        .ctbien .selecomercio a span:first-child {
            margin-right: 2%;
            line-height: 55px;
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 22px;
        }
}

@media (max-width: 320px) {
    .ctbien .selecomercio a {
        padding: 12px;
    }

        .ctbien .selecomercio a span:first-child {
            width: 55px;
            height: 55px;
            line-height: 55px;
        }

        .ctbien .selecomercio a .text {
            width: 178px;
            font-size: 14px;
        }
}

@media (min-width: 769px) and (max-width: 1369px) {
    .recpass .mdsesion .texhelp {
        position: relative !important;
        bottom: initial;
        padding-top: 20px;
        padding-bottom: 20px;
        background: #f5f5f5;
    }

    .recpass {
        overflow-y: scroll;
        height: 100vh;
    }
}