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

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

@import url("material-design-iconic-font.min.css");

@import url("../fonts/font-roboto.css");

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

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

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

/*
       * A better looking default horizontal rule
       */
header {
    background: #d4d9e3;
}

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

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

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

/*
       * Remove default fieldset styles.
       */

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

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

textarea {
    resize: vertical;
}

.textarea {
    resize: none !important;
}

a,
a:focus,
a:hover,
a:active,
button,
button:focus,
button:hover,
button:active {
    outline: none;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
}

    ul li {
        list-style: none;
    }

.btn,
.panel {
    border-radius: 2px;
}

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

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

/* ==========================================================================
         Author's custom styles
         ========================================================================== */

html {
    background: #f6f7fa !important;
    height: 100%;
}

body {
    display: block;
    width: 100%;
    height: 100% !important;
    background: none;
    font-size: 14px;
    font-family: "Roboto", Helvetica, Arial, sans-serif !important;
    color: #545454 !important;
    margin: 0;
    line-height: normal;
}

.wrapper {
    width: 100%;
    margin: 0;
    min-width: 1024px !important;
    position: relative;
    min-height: 100vh;
}

.bold {
    font-weight: bold;
}

.black-text {
    color: black;
}

/*  LOGON  
   
   .bglogon {
       background: url('../img/bg_logon.jpg') no-repeat;
       background-size: cover;
       height: 100%;
   }
   
   .headerlogon {
       width: 100%;
   }
   
   .headerlogon figure {
       padding: 2%;
   }
   
   .headerlogon figure img {
       width: 75%;
       margin: 0 0 0 15%;
   }
   
   .mainlogon {
       position: relative;
       width: 100%;
       margin: 5% 0 0 0;
   }
   
   .centro {
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .userfig {
       display: -webkit-box;
        display: -moz-box;
       display: -ms-flexbox;
        display: -webkit-flex;
       display: flex;
       width: 100px;
       height: 100px;
       left: 50%;
       right: 50%;
       background: #fff !important;
       border-radius: 50% !important;
       box-shadow: 0px 0px 5px #888888;
       align-items: center;
       justify-content: center;
   }
   
   .userfig div {
       display: flex;
       width: 90%;
       height: 90%;
       margin: 5%;
       background: #fff !important;
       border-radius: 50% !important;
       box-shadow: 0px 0px 5px #888888;
       align-items: center;
       justify-content: center;
       font-size: 50px;
   }
   
   .formuser label {
       color: #5384ff;
       margin: 3% 0 3% 0;
       font-size: 15px;
       font-weight: normal;
   }
   */

/*//////////////////////////////////////////////////////////////////
   [ login ]*/

.version-login {
    position: absolute;
    bottom: 15px;
    right: 55px;
}

    .version-login span {
        font-size: 10px;
        color: #666;
    }

.limiter {
    width: 100%;
    margin: 0 auto;
}

.container-login100 {
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
}

.wrap-login100 {
    width: 100%;
    background: #fff;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    flex-direction: row-reverse;
}

/*==================================================================
     [ login more ]*/

.login100-more {
    width: calc(100% - 560px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

    .login100-more::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.1);
    }

/*==================================================================
     [ Form ]*/

.login100-form {
    width: 560px;
    min-height: 100vh;
    display: block;
    background-color: #f7f7f7;
    padding: 0px 55px 0px 55px;
}

.login100-form-title {
    width: 100%;
    display: block;
    font-size: 30px;
    color: #333333;
    line-height: 1.2;
    text-align: center;
}

.p-b-43 {
    padding-bottom: 43px;
}

/*------------------------------------------------------------------
     [ Input ]*/

.wrap-input100 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 100%;
    height: 80px;
    position: relative;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    margin-bottom: 10px;
}

.label-input100 {
    font-family: "Roboto", Helvetica, Arial, sans-serif !important;
    font-size: 18px;
    color: #999999;
    line-height: 1.2;
    display: block;
    position: absolute;
    pointer-events: none;
    width: 100%;
    padding-left: 24px;
    left: 0;
    top: 30px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

.input100 {
    display: block;
    width: 100%;
    background: transparent;
    font-family: "Roboto", Helvetica, Arial, sans-serif !important;
    font-size: 18px;
    color: #555555;
    line-height: 1.2;
    padding: 0 26px;
    border: none;
    outline: none;
}

input.input100 {
    height: 100%;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

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

.focus-input100 {
    position: absolute;
    display: block;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    top: -1px;
    left: -1px;
    pointer-events: none;
    border: 1px solid #6675df;
    border-radius: 10px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transform: scaleX(1.1) scaleY(1.3);
    -moz-transform: scaleX(1.1) scaleY(1.3);
    -ms-transform: scaleX(1.1) scaleY(1.3);
    -o-transform: scaleX(1.1) scaleY(1.3);
    transform: scaleX(1.1) scaleY(1.3);
}

.input100:focus + .focus-input100 {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.eff-focus-selection {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.input100:focus {
    height: 48px;
}

    .input100:focus + .focus-input100 + .label-input100 {
        top: 14px;
        font-size: 13px;
    }

.has-val {
    height: 48px !important;
}

    .has-val + .focus-input100 + .label-input100 {
        top: 14px;
        font-size: 13px;
    }

/*------------------------------------------------------------------
   [ Responsive ]*/

@media (max-width: 992px) {
    .login100-form {
        width: 50%;
        padding-left: 30px;
        padding-right: 30px;
    }

    .login100-more {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .login100-form {
        width: 100%;
    }

    .login100-more {
        display: none;
    }
}

@media (max-width: 576px) {
    .login100-form {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 70px;
    }
}

/*------------------------------------------------------------------
   [ Button ]*/

.container-login100-form-btn {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.login100-form-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    width: 100%;
    height: 50px;
    border-radius: 10px;
    background: #5384ff;
    font-size: 12px;
    color: #fff;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

    .login100-form-btn:hover {
        background: #333333;
        color: #fff;
    }

.login100-form-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
}

.flex-col {
    flex-direction: column !important;
}

.box-login {
    display: flex;
    justify-content: center;
}

.logo-login img {
    margin: 0 auto;
}

/*==================================================================
   [ Restyle Checkbox ]*/

.input-checkbox100 {
    display: none;
}

.label-checkbox100 {
    font-size: 13px;
    color: #999999;
    line-height: 1.4;
    display: block;
    position: relative;
    padding-left: 26px;
    cursor: pointer;
}

    .label-checkbox100::before {
        content: "\f00c";
        font-family: FontAwesome;
        font-size: 13px;
        color: transparent;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 2px;
        background: #fff;
        border: 1px solid #6675df;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

.input-checkbox100:checked + .label-checkbox100::before {
    color: #6675df;
}

/****** fin login new***************/

.formuser input {
    color: #000;
    margin: 3% 0 3% 0;
}

.formuser .btn {
    margin: 8% 0 3% 0;
    padding: 2%;
    font-size: 15px;
}

.btn-md {
    line-height: 2em;
    font-size: 16px;
}

.btn-white {
    background-color: #ffffff;
    color: #4164c2;
    border: none;
    transition: all 0.3s ease-out;
}

.btn-dark {
    background-color: #000;
    border: none;
    color: #fff !important;
    transition: all 0.3s ease-out;
}

.btn.btn-dark:hover,
.btn.btn-dark:visited,
.btn.btn-dark:active,
.btn.btn-dark:focus {
    background-color: rgb(45, 45, 45);
    transition: all 0.3s ease-out;
    color: #fff !important;
}

.btn-primary {
    background-color: #4164c2;
    border: none;
    transition: all 0.3s ease-out;
}

    .btn-primary.small {
        padding: 2px 10px;
        margin: 3px;
        font-size: 12px;
    }

    .btn-primary:hover,
    .btn-primary:visited {
        background-color: #ccc;
        transition: all 0.3s ease-out;
    }

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary.focus,
    .open > .dropdown-toggle.btn-primary {
        background-color: #3f51b5;
        color: #fff;
        transition: all 0.3s ease-out;
    }

.pers {
    height: 75px !important;
}

.hover-01:hover {
    background-color: #ebebeb;
}

/* preloader */

.preloader-process {
    position: fixed;
    width: 100%;
    min-height: 100%;
    z-index: 3000;
    background-color: rgba(0, 0, 0, 0.7);
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    color: #999;
    top: 0;
    left: 0;
}

.hold {
    position: fixed;
    top: 40%;
    left: 0;
    margin: 0 auto;
    right: 0;
    padding: 15px;
    width: 275px;
    height: auto;
    min-height: 75px;
    font-size: 1em;
    color: #000;
    text-align: center;
    border-radius: 2px;
    z-index: 1050;
    background: #fff;
}

    .hold .progress {
        margin: 15px 0 0 0;
    }

.preloader {
    top: 0;
    margin: auto;
    left: 0;
    bottom: 0;
    position: fixed;
    right: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
}

.progress {
    position: relative;
    height: 4px;
    display: block;
    width: 100%;
    background-color: #acece6;
    overflow: hidden;
}

    .progress .indeterminate {
        background-color: #5384ff;
    }

        .progress .indeterminate:before {
            content: "";
            position: absolute;
            background-color: inherit;
            top: 0;
            left: 0;
            bottom: 0;
            will-change: left, right;
            -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
            -moz-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
            -ms-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
            -o-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
            animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
        }

        .progress .indeterminate:after {
            content: "";
            position: absolute;
            background-color: inherit;
            top: 0;
            left: 0;
            bottom: 0;
            will-change: left, right;
            -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
            -moz-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
            -ms-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
            -o-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
            animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
            -webkit-animation-delay: 1.15s;
            -moz-animation-delay: 1.15s;
            -ms-animation-delay: 1.15s;
            -o-animation-delay: 1.15s;
            animation-delay: 1.15s;
        }

@-webkit-keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }

    60% {
        left: 100%;
        right: -90%;
    }

    100% {
        left: 100%;
        right: -90%;
    }
}

@-moz-keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }

    60% {
        left: 100%;
        right: -90%;
    }

    100% {
        left: 100%;
        right: -90%;
    }
}

@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }

    60% {
        left: 100%;
        right: -90%;
    }

    100% {
        left: 100%;
        right: -90%;
    }
}

@-webkit-keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }

    60% {
        left: 107%;
        right: -8%;
    }

    100% {
        left: 107%;
        right: -8%;
    }
}

@-moz-keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }

    60% {
        left: 107%;
        right: -8%;
    }

    100% {
        left: 107%;
        right: -8%;
    }
}

@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }

    60% {
        left: 107%;
        right: -8%;
    }

    100% {
        left: 107%;
        right: -8%;
    }
}

/**/

/* ------------------------------------------------------------- 0 - 100 preload*/

.loading-process {
    position: fixed !important;
    z-index: 5000;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}

.loading-page {
    background: rgba(0, 0, 0, 0.8);
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .loading-page .counter {
        text-align: center;
    }

        .loading-page .counter p {
            font-size: 30px;
            font-weight: 100;
            color: #5384ff;
        }

        .loading-page .counter h1 {
            color: white;
            font-size: 60px;
            margin-top: -10px;
        }

        .loading-page .counter hr {
            background: #5384ff;
            border: none;
            height: 2px;
        }

    .loading-page .counter {
        position: relative;
        width: 100%;
    }

        .loading-page .counter h1.abs {
            position: absolute;
            top: 0;
            width: 100%;
        }

        .loading-page .counter .color {
            width: 0px;
            overflow: hidden;
            color: #f60d54;
        }

/*-*/

/* ------------------------------------------------------------- preload card */

.preload-card-full .panel {
    min-height: 70vh;
}

.preload-aside-full {
    min-height: 25vh;
}

.item {
    margin: 12px 0;
    display: block;
}

.rect {
    height: 64px;
    margin: 0 0 30px 0;
}

.line {
    height: 16px;
    border-radius: 5px;
    width: 100%;
}

.pre {
    background: linear-gradient(to right, #eeeeee 8%, #e1e1e1 18%, #eeeeee 33%);
    background-size: 200% 50px;
    -webkit-animation: preloadAnimation 2s infinite;
    animation: preloadAnimation 2s infinite;
}

@-webkit-keyframes preloadAnimation {
    from {
        background-position: -280px 0;
    }

    to {
        background-position: 300px 0;
    }
}

@keyframes preloadAnimation {
    from {
        background-position: -280px 0;
    }

    to {
        background-position: 300px 0;
    }
}

/*_----------------------------------------------------------------------------------------------------------------------_*/

/*  MASTER TEMPLATE  */

/* MENU */

.linkSalir {
    position: absolute;
    bottom: 8px;
    left: 0px;
    width: 100%;
    color: #fff !important;
    padding: 8px 15px;
}

    .linkSalir:hover,
    .linkSalir:focus {
        background: #5384ff;
        color: #fff !important;
        transition: all 0.3s ease-out;
        display: inline-block;
    }

.titleLinkMenu {
    color: #8e9bbc !important;
}

.left-closed {
    background: none repeat scroll 0 0 #0e1a35;
    float: left;
    height: 100% !important;
    position: fixed;
    text-align: center;
    width: 0%;
    z-index: 8888;
}

.left-open {
    background: none repeat scroll 0 0 #0e1a35;
    top: 0;
    left: 0;
    height: 100% !important;
    position: fixed;
    text-align: center;
    transition: all 0.1s ease 0s;
    width: 15%;
    z-index: 8888;
    display: fixed;
}

.right-closed {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 0 0 2% 0;
    min-width: 1024px !important;
}

.right-open {
    position: absolute;
    width: 100%;
    left: 15%;
    padding: 0 0 2% 0;
}

.navmenu1 {
    display: none;
}

    .navmenu1 ul {
        margin: 0;
        padding: 0;
    }

    .navmenu1 a {
        text-decoration: none;
        color: #282828;
    }

.navmenu {
    display: block;
    color: #fff;
    margin: 0;
    text-align: left;
    width: 100%;
    z-index: 10000;
}

    .navmenu h1 {
        color: #fff;
        font-size: 20px;
        float: left;
    }

    .navmenu ul {
        margin: 0;
        width: 100%;
    }

        .navmenu ul li {
            font-size: 14px;
            list-style: none outside none;
            width: 100%;
            text-transform: uppercase;
        }

            .navmenu ul li span,
            .navmenu ul li a {
                padding: 8px 15px;
                display: inline-block;
                color: #fff;
                width: 100%;
            }

                .navmenu ul li a:hover,
                .navmenu ul li a:focus {
                    background: #5384ff;
                    transition: all 0.3s ease-out;
                    display: inline-block;
                }

            .navmenu ul li ul {
                width: 100%;
            }

                .navmenu ul li ul li {
                    text-transform: none;
                    display: inline-block;
                }

                    .navmenu ul li ul li a {
                        color: #fff;
                        text-decoration: none;
                        overflow: hidden;
                        width: 100%;
                    }

                        .navmenu ul li ul li a:hover,
                        .navmenu ul li ul li a:focus {
                            background: #5384ff;
                            display: inline-block;
                            transition: all 0.3s ease-out;
                        }

.close-menu {
    color: #fff !important;
    padding: 10px 20px !important;
    /* background: #394f85 !important; */
    border: 0 !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 58px;
    height: 58px;
    cursor: pointer;
    z-index: 300px;
    line-height: 44px;
    text-align: center;
    font-size: 26px;
}

    .close-menu:hover {
        color: #5384ff !important;
        transition: all 0.3s ease-out;
    }

/* PANEL SLIDE*/

.userpanel-closed,
.detailpanel-closed {
    display: none;
}

.userpanel-open,
.detailpanel-open {
    background: none repeat scroll 0 0 #fff;
    box-shadow: 0px 0px 5px #888888;
    height: 100% !important;
    position: fixed !important;
    right: 0 !important;
    text-align: left;
    width: 50%;
    z-index: 8888;
    transition: all 15s ease 0s;
}

.closepanel {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    height: 65px;
    left: 0px;
    padding: 23px 15px;
    top: 0px;
    width: 100%;
    border-bottom: 1px solid #ccc;
    margin: 0 0 2% 0;
}

    .closepanel a {
        cursor: pointer;
    }

        .closepanel a i {
            margin: 0 15px 0 0;
            font-size: 20px;
        }

aside .scroll {
    height: auto;
    overflow: auto;
}

/* - */

.scroll::-webkit-scrollbar {
    width: 8px;
    padding: 2px;
}

.scroll::-webkit-scrollbar-track {
    background-color: #fff;
}

.scroll::-webkit-scrollbar-thumb {
    background-color: rgba(71, 71, 71, 1);
}

.scroll::-webkit-scrollbar-button {
    background-color: #fff;
    display: none;
}

.scroll::-webkit-scrollbar-corner {
    background-color: black;
}

aside h4 {
    font-size: 16px !important;
    margin: 15px 0;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
}

aside h5 {
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    line-height: 1em;
}

aside p {
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    color: #000 !important;
    line-height: 1em;
}

aside table {
    background: #f5f5f5;
    border-color: #fff !important;
}

/* panel de usuario*/

.user {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    align-items: center;
    margin: 0 0 2% 0;
}

.userfig2 {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    width: 84px;
    height: 84px;
    background: #fff !important;
    border-radius: 50% !important;
    align-items: center;
    justify-content: center;
    margin: 15px;
    float: left;
    border: 1px solid #d4d9e3;
    overflow: hidden;
}

    .userfig2 div {
        display: -webkit-box;
        /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;
        /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;
        /* TWEENER - IE 10 */
        display: -webkit-flex;
        /* NEW - Chrome */
        display: flex;
        /* NEW, Spec - Opera 12.1, Firefox 20+ */
        width: 90%;
        height: 90%;
        margin: 5%;
        background: #fff !important;
        border-radius: 50% !important;
        box-shadow: 0px 0px 5px #888888;
        align-items: center;
        justify-content: center;
        font-size: 50px;
        overflow: hidden;
    }

    .userfig2 img {
        width: 100%;
    }

.user-text {
    line-height: 0.95em;
    font-size: 18px;
    margin: 0.7em 0 0 15px;
    float: left !important;
    text-align: left;
    color: #5384ff;
}

.user .btn {
    margin: 0 0 0 200px;
}

.user-text span {
    height: 30px;
    width: 100%;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 0.8em;
    color: #7b7b7b !important;
}

/*panel notificacion*/

.codebar {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 1% 0;
    overflow: hidden;
    height: 70px;
}

    .codebar img {
        width: 100%;
        z-index: 3005;
    }

    .codebar figcaption {
        width: 100%;
        z-index: 3007;
        position: absolute;
        top: 40px;
        background: #fff;
        padding: 1%;
    }

        .codebar figcaption p {
            text-align: center;
        }

/*  MAIN  */

.header {
    width: 100%;
    height: auto;
    background: #fff;
    border-bottom: 1px solid #d4d9e3;
}

    .header figure {
        margin: 0.8% 0 0 0;
    }

        .header figure img {
            width: 80%;
        }

.menu {
    color: #8492af !important;
    border: 1px solid #8492af;
    margin: 15px 0;
    border-radius: 0;
    transform: translateZ(0);
}

.dropdown-search {
    border-radius: 0;
}

.menu:hover,
.menu:focus,
.menu.focus,
.open > .dropdown-toggle.btn-primary {
    transition: all 0.3s ease-out;
    color: #5384ff !important;
    border: 1px solid #5384ff;
}

.pad {
    position: absolute;
    right: 20px;
    padding: 0.7% 0 0.5% 0;
    width: 50%;
}

    .pad .input-group {
        float: left !important;
        width: 60%;
        margin: 0 5% 0 0;
    }

.search {
    margin: 2.5% 15px !important;
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    color: #fff;
    height: 2em;
    width: 2em;
    border-radius: 50% !important;
    float: left !important;
    background: #5384ff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateZ(0);
    transition-duration: 0.5s;
}

.activeuser {
    float: right !important;
    cursor: pointer;
    transform: translateZ(0);
    transition-duration: 0.5s;
    width: 30%;
}

.max-detail {
    overflow: hidden;
}

    /* revisar */

    .search:hover,
    .search:focus,
    .search:active,
    .activeuser:hover,
    .activeuser:focus,
    .activeuser:active,
    .close_search span:hover,
    .close_search span:focus,
    .close_search span:active,
    .closepanel .icon_close_alt2:hover,
    .closepanel .icon_close_alt2:active,
    .closepanel .icon_close_alt2:focus,
    .max-detail h4 span:hover,
    .max-detail h4 span:focus,
    .max-detail h4 span:active,
    .modal-header span:hover,
    .modal-header span:focus,
    .modal-header span:active {
        transform: scale(1.2);
        transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    }

.log-text {
    height: 40px;
    max-width: 300px;
    line-height: 0.95em;
    font-size: 14px;
    margin: 0.7em 0 0 15px;
    float: left !important;
}

    .log-text span {
        height: 30px;
        width: 100%;
        text-transform: uppercase;
        font-size: 10px;
        line-height: 0.8em;
    }

.log-user {
    height: 40px;
    width: 40px;
    border-radius: 50% !important;
    overflow: hidden;
    float: left;
    border: #d4d9e3 1px solid;
}

    .log-user img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.breadcrumb {
    display: block;
    border-radius: 2px;
    list-style: outside none none;
    margin-bottom: 20px;
    padding: 8px 30px;
    margin: 0px;
    background-color: #e4e7ef;
    width: 100%;
    font-size: 12px;
    border-radius: 0;
}

    .breadcrumb > li + li:before,
    .breadcrumb ol li {
        color: #b3b9c6;
    }

    .breadcrumb a {
        color: #7686a7;
        transition: all 0.3s ease-out;
    }

        .breadcrumb a:hover {
            text-decoration: underline;
            transition: all 0.3s ease-out;
        }

    .breadcrumb .active {
        color: #0e1a35;
        font-weight: 500;
        font-size: 13px;
    }

hgroup {
    margin: 15px 0;
}

    hgroup h1 {
        font-size: 22px;
        font-weight: 500;
        margin: 0 15px;
        display: block;
        color: #0e1a35;
    }

.modal-body h2 {
    font-size: 22px;
    font-weight: 500;
    display: block;
    color: #0e1a35;
}

hgroup p {
    font-size: 14px;
    font-weight: normal;
    margin: 0 15px;
    display: block;
    line-height: 2.5em;
}

.panel-default {
    border: solid 1px #d4d9e3;
    box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.05);
}

    .panel-default > .panel-heading {
        background-color: #4164c2;
        border-color: #d4d9e3;
    }

.h-history {
    height: 20px;
}

.aside-wizard .panel-default > .panel-heading,
.aside-wizard-history .panel-default > .panel-heading {
    background-color: #fff;
    border-top: 3px solid 4164c2;
}

.panel-default > .panel-heading .btn-default {
    background-color: transparent !important;
    border: none;
    padding: 0px 18px;
    font-size: 25px;
    color: #fff;
    border: none;
    margin: 10px 0 0 0;
}

    .panel-default > .panel-heading .btn-default:hover,
    .panel-default > .panel-heading .btn-default:focus {
        border-color: #ddd;
        border-radius: 50px;
        font-size: 25px;
        color: #fff;
        opacity: 0.5;
        border: none;
    }

    .panel-default > .panel-heading .btn-default:active,
    .panel-default > .panel-heading .btn-default:focus {
        opacity: 1;
        box-shadow: none;
        border: none;
    }

.aside-wizard .panel-default > .panel-heading .btn-default {
    background-color: transparent !important;
    border: none;
    padding: 0px 18px;
    font-size: 25px;
    color: #0e1a35;
    border: none;
    margin: 10px 0 0 0;
}

    .aside-wizard .panel-default > .panel-heading .btn-default:hover,
    .aside-wizard .panel-default > .panel-heading .btn-default:focus {
        border-color: #ddd;
        border-radius: 50px;
        font-size: 25px;
        color: #0e1a35;
        opacity: 0.5;
        border: none;
    }

.panel-default > .panel-heading .btn-default:active,
.panel-default > .panel-heading .btn-default:focus {
    opacity: 1;
    box-shadow: none;
    border: none;
    color: #5384ff;
}

.panel-default > .panel-heading h2.title {
    color: #fff;
    line-height: 28px;
    margin: 10px 0 8px 0;
}

.label {
    font-size: 12px;
    padding: 5px 5px 5px 5px;
}

.panel-default > .panel-heading .badge {
    margin: 15px 0 0 15px;
}

.badge {
    border-radius: 3px !important;
    padding: 3px 6px;
}

h2.title {
    font-size: 18px;
    font-weight: 500 !important;
    display: block;
    color: #5384ff;
    text-transform: uppercase;
}

    h2.title span {
        font-size: 14px;
        font-weight: 500;
        display: inline-block;
        color: #5384ff;
        margin: 0 0 0 10px;
    }

h3 {
    font-size: 18px;
    font-weight: normal;
    margin: 20px 0 20px 0;
    line-height: 25px;
    display: block;
    color: #0e1a35;
}

.results.flex-container .well {
    margin: 0;
}

.well h3 {
    font-size: 18px;
    font-weight: normal;
    margin: 20px 0 20px 0;
    line-height: 25px;
    display: block;
}

.dist-div .well {
    margin: 20px 0;
    padding: 25px 0 !important;
}

.panel-heading h3 {
    color: #5384ff;
    line-height: 47px;
    margin: 0;
}

    .panel-heading h3.panel-title {
        border: none;
        color: #5384ff;
        line-height: 18px;
        margin: 8px 0;
    }

.panel-slide-out .panel-heading h3 {
    color: #fff;
    line-height: 47px;
    margin: 0;
}

.panel-heading h3.panel-title + span.badge {
    margin: 8px;
}

h3 a,
a.trigger {
    font-size: 12px;
    margin: 0 0 0 15px;
    color: #9fa8da;
    border: 1px solid #9fa8da;
    border-radius: 20px;
    text-transform: uppercase;
    padding: 5px 10px;
    line-height: 16px;
    display: inline-block;
}

.panel-body a.trigger.more {
    margin: 0px;
}

h3 a:hover,
a.trigger.more:hover,
.max-detail h4 a:hover {
    color: #5c6bc0;
    border: 1px solid #5c6bc0;
    transition: all 0.3s ease-out;
}

h3 span {
    transform: translateZ(0);
    transition-duration: 0.5s;
    margin: 0 0 0 15px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 20px;
    background: #5384ff;
    padding: 4px;
    align-items: center;
    justify-content: center;
    line-height: 14px;
}

    h3 span.listamount {
        font-size: 14px;
        width: auto;
        height: auto;
        border-radius: 20px;
        background: none;
        line-height: 14px;
        color: #454545;
        text-transform: lowercase;
    }

h4 {
    font-size: 15px;
    font-weight: 500;
    color: #454545;
    line-height: 60px;
}

.list-group a h3 {
    margin: 0;
    padding: 0;
    border: none;
}

.list-group table {
    margin: 0;
}

.nrocausa h3 {
    color: #5384ff;
    font-size: 20px;
    font-weight: 500 !important;
    margin: 0 0 0 1.5%;
    text-transform: uppercase;
}

.nrocausa div.badge {
    margin: 4px 15px;
}

.wizardback,
.preload-card-full {
    padding: 0 15px;
    width: 70% !important;
    float: left;
    min-width: 800px;
}

.wizardback-feed {
    width: 69.5% !important;
    float: left;
}

.aside-wizard.archive {
    position: absolute;
    right: 30px;
    /* top: 580px;*/
    width: 28% !important;
}

.panel-slide-out {
    position: absolute;
    top: 24px;
    right: 45px;
    width: 26.5% !important;
    transition: transform 0.25s cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 0.25s cubic-bezier(0.694, 0.0482, 0.335, 1);
    transform: translateX(550px);
    -webkit-transform: translate3d(550px, 0, 0);
    transform: translate3d(550px, 0, 0);
    will-change: transform;
}

.panel-open .panel-slide-out {
    transform: translateX(0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.aside-wizard.panel-slide-down {
    position: absolute;
    right: 30px;
    top: 600px;
    width: 28% !important;
    transition: transform 0.25s cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 0.25s cubic-bezier(0.694, 0.0482, 0.335, 1);
    transform: translateY(-600px);
    -webkit-transform: translate3d(0, -600px, 0);
    transform: translate3d(0, -600px, 0);
    will-change: transform;
}

.panel-open .panel-slide-down {
    transform: translateY(0px);
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
}

.wizardback h3 {
    margin: 0 0 5px 0;
    line-height: 60px;
}

.aside-wizard {
    padding: 0 15px;
    width: 30% !important;
    float: left;
}

    /*.aside-wizard-history {
        position: absolute;
        padding: 0 15px;
        right: 30px;
        top: 0;
        width: 28%!important;
      }*/

    .aside-wizard .off-col-1,
    .aside-wizard .off-col-3 {
        padding: 0 15px;
        width: 100%;
        position: relative;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
        float: left;
    }

    .aside-wizard .off-col-2 {
        padding: 0 15px;
        width: 100%;
        position: relative;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
        float: left;
    }

.close_search {
    background: #284583;
    height: 40px;
}

    .close_search span {
        color: #fff;
        font-size: 18px;
        line-height: 14px;
        margin: 0.7%;
        transform: translateZ(0);
        transition-duration: 0.5s;
        cursor: pointer;
    }

.search_overlay h1 {
    font-size: 25px !important;
    margin: 7% 0 5% 0 !important;
    margin: 15px;
    color: #5384ff !important;
    font-weight: normal;
    text-align: center;
}

.input-group {
    height: 35px;
    position: relative;
}

    .input-group input,
    .input-group .input-group-btn button,
    .input-group div.btn {
        height: 35px !important;
    }

    .input-group div.btn {
        border: 1px solid #ccc;
        color: #fff;
        background: #5384ff !important;
        font-size: 18px;
        border-radius: 0 2px 2px 0 !important;
        border: 1px solid #5384ff !important;
    }

.find_search:hover,
.find_search:focus,
.find_search:active {
    border: 1px solid #5384ff !important;
}

.sex_control {
    float: left;
    display: inline-block;
    width: auto;
    heigth: 35px;
    margin: 0;
    padding: 0 4% 0 0;
    line-height: 30px;
}

.containers {
    position: absolute;
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s, opacity 0.2s linear;
    top: 53px !important;
    left: 0px;
}

    .containers .alert {
        margin-bottom: 15px;
    }

.alert {
    z-index: 3;
    position: relative;
}

.containers.show {
    position: absolute;
    top: 53px !important;
    left: 0px;
    width: 60%;
    background: #fff;
    box-shadow: 0px 0px 2px #888888;
    z-index: 200;
    padding: 0 15px 25px 15px;
    visibility: visible;
    opacity: 1;
    left: 0px;
    height: auto !important;
    transition: visibility 0s, opacity 0.5s linear;
}

.max-contain {
    position: relative;
    height: auto;
    max-height: 300px !important;
    z-index: 310;
    margin: 0 0 15px 0;
}

.adv_search .alert {
    margin: 0 0 10px 0 !important;
    padding: 10px;
}

.adv_search h2 {
    font-size: 14px !important;
    color: #5384ff !important;
    font-weight: 500 !important;
    text-align: left;
}

.adv_search p {
    font-size: 11px;
    text-align: left;
}

.adv_search .dropdown-menu {
    box-shadow: 0px 0px 2px #888888 !important;
    border-radius: 0px !important;
}

.dropdown-menu {
    z-index: 5000 !important;
}

.adv_search input,
.adv_search select,
.adv_search textarea {
    height: 30px !important;
    font-size: 11px;
    padding: 3px;
}

.adv_search label {
    font-size: 12px;
    font-weight: normal !important;
    color: #333;
    line-height: 18px;
    margin: 6px 0;
}

.divider {
    border-top: 1px solid #e0e0e0;
    padding-top: 10px !important;
    margin: 10px 0 0 0;
}

label.labelinline {
    width: auto !important;
}

.control-label,
label {
    width: 100%;
    font-weight: 500;
    font-size: 13px;
}

.form-control,
.form-control:focus {
    box-shadow: none;
    border-radius: 2px;
}

.has-error .help-block,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error.radio label,
.has-error .checkbox-inline {
    color: #f44336;
}

.has-error,
.has-error .form-control,
.has-error.dropList,
.has-error div .comp_planpagos {
    border-color: #f44336 !important;
}

div.error.has-error {
    border: 1px solid #f44336 !important;
}

table.has-error thead tr th {
    border-top: 1px solid #f44336 !important;
}

table.has-error {
    border: 1px solid #f44336;
}

.mce-tinymce.mce-container.mce-panel {
    width: auto !important;
}

.row {
    position: relative;
}

.has-error + .help-block,
.help-block {
    position: absolute;
    display: block;
    background: #f44336;
    color: #fff !important;
    font-size: 12px;
    padding: 5px 10px;
    z-index: 600;
}

    .help-block:before {
        content: "";
        position: absolute;
        top: -5px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #f44336;
    }

    .help-block i {
        position: relative;
        top: 0;
        padding: 5px;
    }

        .help-block i:hover {
            opacity: 0.5;
        }

.has-error .input-group-addon {
    background-color: #f2dede;
    border-color: #ca4a50;
    color: #ca4a50;
}

.help-block.radio-error {
    top: 60px;
}

.help-block.dropzone-error {
    top: 98px;
}

.has-error .form-control-feedback {
    color: #ca4a50;
}

/*HOME*/

.panel-indicador,
.panel-infractor {
    position: relative;
    margin-bottom: 15px;
    min-height: 150px;
    color: #fff;
    border-radius: 2px;
}

    .panel-indicador .dropList {
        -moz-user-select: none;
        cursor: default;
        display: block;
        list-style-type: none;
        overflow: hidden;
        height: 100%;
        position: relative;
        border: none !important;
        border-radius: 2px;
        margin: 0 0 15px 0;
        color: #000;
    }

    .panel-indicador .list-group-item-text {
        width: auto !important;
        line-height: 13px;
    }

    .panel-indicador .list-group-item-heading {
        width: auto !important;
    }

    .panel-indicador .dropList li > span {
        padding: 0px;
        width: 100%;
    }

    .panel-indicador .dropList li {
        padding: 8px;
    }

.refresh {
    font-size: 12px;
    text-align: right;
    margin: 15px;
}

.btn-refresh-dark {
    color: #fff;
    background: #4164c2;
}

    .btn-refresh-dark:hover {
        color: #fff;
        background: #1c2b53;
    }

.refresh p {
    display: inline-block;
}

.preload-card {
    display: none;
}

.biometric-preview {
    overflow: hidden;
    position: relative;
}

.block .preload-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 150;
    background: rgba(14, 26, 53, 0.9);
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-out;
}

.preloader-wrapper {
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
}

    .preloader-wrapper.small {
        width: 36px;
        height: 36px;
    }

    .preloader-wrapper.active {
        /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
        -webkit-animation: container-rotate 1568ms linear infinite;
        animation: container-rotate 1568ms linear infinite;
    }

@-webkit-keyframes container-rotate {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes container-rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.spinner-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-color: #26a69a;
}

.spinner-blue,
.spinner-blue-only {
    border-color: #5584ff;
}

.active .spinner-layer.spinner-blue {
    /* durations: 4 * ARCTIME */
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer,
.active .spinner-layer.spinner-blue-only {
    /* durations: 4 * ARCTIME */
    opacity: 1;
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@-webkit-keyframes fill-unfill-rotate {
    12.5% {
        -webkit-transform: rotate(135deg);
    }
    /* 0.5 * ARCSIZE */
    25% {
        -webkit-transform: rotate(270deg);
    }
    /* 1   * ARCSIZE */
    37.5% {
        -webkit-transform: rotate(405deg);
    }
    /* 1.5 * ARCSIZE */
    50% {
        -webkit-transform: rotate(540deg);
    }
    /* 2   * ARCSIZE */
    62.5% {
        -webkit-transform: rotate(675deg);
    }
    /* 2.5 * ARCSIZE */
    75% {
        -webkit-transform: rotate(810deg);
    }
    /* 3   * ARCSIZE */
    87.5% {
        -webkit-transform: rotate(945deg);
    }
    /* 3.5 * ARCSIZE */
    to {
        -webkit-transform: rotate(1080deg);
    }
    /* 4   * ARCSIZE */
}

@keyframes fill-unfill-rotate {
    12.5% {
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    /* 0.5 * ARCSIZE */
    25% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    /* 1   * ARCSIZE */
    37.5% {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg);
    }
    /* 1.5 * ARCSIZE */
    50% {
        -webkit-transform: rotate(540deg);
        transform: rotate(540deg);
    }
    /* 2   * ARCSIZE */
    62.5% {
        -webkit-transform: rotate(675deg);
        transform: rotate(675deg);
    }
    /* 2.5 * ARCSIZE */
    75% {
        -webkit-transform: rotate(810deg);
        transform: rotate(810deg);
    }
    /* 3   * ARCSIZE */
    87.5% {
        -webkit-transform: rotate(945deg);
        transform: rotate(945deg);
    }
    /* 3.5 * ARCSIZE */
    to {
        -webkit-transform: rotate(1080deg);
        transform: rotate(1080deg);
    }
    /* 4   * ARCSIZE */
}

@-webkit-keyframes blue-fade-in-out {
    from {
        opacity: 1;
    }

    25% {
        opacity: 1;
    }

    26% {
        opacity: 0;
    }

    89% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blue-fade-in-out {
    from {
        opacity: 1;
    }

    25% {
        opacity: 1;
    }

    26% {
        opacity: 0;
    }

    89% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/**
       * Patch the gap that appear between the two adjacent div.circle-clipper while the
       * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
       */

.gap-patch {
    position: absolute;
    top: 0;
    left: 45%;
    width: 10%;
    height: 100%;
    overflow: hidden;
    border-color: inherit;
}

    .gap-patch .circle {
        width: 1000%;
        left: -450%;
    }

.circle-clipper {
    display: inline-block;
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
    border-color: inherit;
}

    .circle-clipper .circle {
        width: 200%;
        height: 100%;
        border-width: 3px;
        /* STROKEWIDTH */
        border-style: solid;
        border-color: inherit;
        border-bottom-color: transparent !important;
        border-radius: 50%;
        -webkit-animation: none;
        animation: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .circle-clipper.left .circle {
        left: 0;
        border-right-color: transparent !important;
        -webkit-transform: rotate(129deg);
        transform: rotate(129deg);
    }

    .circle-clipper.right .circle {
        left: -100%;
        border-left-color: transparent !important;
        -webkit-transform: rotate(-129deg);
        transform: rotate(-129deg);
    }

.active .circle-clipper.left .circle {
    /* duration: ARCTIME */
    -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .circle-clipper.right .circle {
    /* duration: ARCTIME */
    -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@-webkit-keyframes left-spin {
    from {
        -webkit-transform: rotate(130deg);
    }

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

    to {
        -webkit-transform: rotate(130deg);
    }
}

@keyframes left-spin {
    from {
        -webkit-transform: rotate(130deg);
        transform: rotate(130deg);
    }

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

    to {
        -webkit-transform: rotate(130deg);
        transform: rotate(130deg);
    }
}

@-webkit-keyframes right-spin {
    from {
        -webkit-transform: rotate(-130deg);
    }

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

    to {
        -webkit-transform: rotate(-130deg);
    }
}

@keyframes right-spin {
    from {
        -webkit-transform: rotate(-130deg);
        transform: rotate(-130deg);
    }

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

    to {
        -webkit-transform: rotate(-130deg);
        transform: rotate(-130deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.btnSpinner.loading::after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid transparent;
    border-top-color: #5384ff;
    border-right-color: #5384ff;
    border-radius: 50%;
    margin-left: 5px;
    animation: spin 1s linear infinite;
}

#spinnerContainer.cooldown {
    /* duration: SHRINK_TIME */
    -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
    animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

@-webkit-keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.panel-indicador .panel-body,
.panel-causa .panel-body {
    position: relative;
    display: block;
    width: 100%;
    height: 100px;
    color: #fff !important;
}

.panel-causa .panel-body {
    min-height: 270px;
    color: #fff !important;
}

.panel-indicador.height .panel-body {
    height: 250px !important;
}

.panel-infractor .panel-body .item-label {
    font-weight: 400;
    color: #575757;
}

.panel-infractor .panel-body .item-detail,
.panel-infractor .panel-body .item-detail-persona {
    font-weight: 500;
    color: #575757;
}

.panel-indicador .panel-body-persona {
    height: auto !important;
}

a:hover .panel-indicador {
    -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

.panel-indicador a:hover .panel-body:before {
    position: absolute;
    content: "VER DETALLE";
    width: 70%;
    border: 1px solid #fff;
    padding: 10px 25px 8px 25px;
    font-size: 12px;
    border-radius: 50px;
    z-index: 15;
    text-align: center;
    color: #fff;
    left: 15%;
    top: 30%;
}

.btn-refresh {
    border: 1px solid #fff;
    color: #fff;
    background: transparent;
    padding: 5px 7px;
    line-height: 12px;
    margin-right: 5px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

    .btn-refresh:hover {
        border: 1px solid #fff;
        color: #fff;
        background: rgba(0, 0, 0, 0.7);
        transition: all 0.3s ease-out;
    }

    .btn-refresh:active {
        background: white;
    }

    .btn-refresh:focus {
        color: #fff;
    }

.panel-indicador a:hover .panel-body:after {
    content: "";
    height: 100%;
    width: 100%;
    background: rgba(14, 26, 53, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    transition: all 0.3s ease-out;
}

.panel-indicador a:hover:active .panel-body:after {
    content: "";
    height: 100%;
    width: 100%;
    background: white;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 2px;
    transition: all 0.3s ease-out;
}

.panel-indicador .panel-heading,
.panel-causa .panel-heading,
.panel-infractor .panel-heading {
    position: relative;
    height: 50px;
    padding: 15px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.25);
    border: none;
}

.panel-indicador .panel-footer {
    position: relative;
    background-color: transparent;
    height: 45px;
    padding: 15px;
    color: #fff;
    border-top: 1px solid #fff;
    font-size: 12px;
    padding: 10px 15px;
}

.panel-indicador.height .panel-footer {
    position: relative;
    background-color: transparent;
    height: 45px;
    padding: 15px;
    color: #454545;
    border-top: 1px solid #ccc;
    font-size: 12px;
    padding: 10px 15px;
}

    .panel-indicador.height .panel-footer .btn-refresh {
        border: 1px solid #ccc;
        color: #454545;
        background: transparent;
        padding: 5px 7px;
        line-height: 12px;
        margin-right: 5px;
    }

        .panel-indicador.height .panel-footer .btn-refresh:hover {
            border: 1px solid #fff;
            color: #fff;
            background: rgba(0, 0, 0, 0.7);
        }

        .panel-indicador.height .panel-footer .btn-refresh:active {
            background: white;
        }

        .panel-indicador.height .panel-footer .btn-refresh:focus {
            color: #454545;
        }

.panel-indicador .panel-footer p {
    line-height: 30px;
}

.panel-indicador .idr-total {
    float: left;
    text-align: left;
}

.panel-indicador .idr-title {
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.05em;
    float: left;
}

.panel-indicador .idr-total {
    margin: 20px 0 0 0;
    font-size: 45px;
    font-weight: 600;
    line-height: 30px;
    padding-bottom: 5px;
    float: right;
}

    .panel-indicador .idr-total small {
        font-weight: 400;
        display: inline;
        font-size: 50%;
        line-height: 30px;
        opacity: 0.5;
    }

.full .detail-link {
    font-size: 0.9em;
}

.canvas-reference .idr-total {
    margin-left: 0;
}

.view-more {
    position: absolute;
    text-decoration: none;
    right: 15px;
    bottom: 22px;
}

    .view-more:hover {
        text-decoration: none !important;
        opacity: 0.75;
    }

#canvas-holder {
    float: left;
    width: 45%;
    margin: 30px 0;
}

.canvas-reference {
    float: left;
    width: 55%;
    margin: 20px 0 0 0;
}

    .canvas-reference ul,
    .user-reference ul {
        margin: 0;
        padding: 0;
    }

        .canvas-reference ul li,
        .user-reference ul li {
            margin: 0;
            padding: 5px;
            width: 100%;
            float: left;
            list-style: none;
            border-bottom: 1px #ccc dashed;
        }

.user-reference-foot {
    padding: 7px 30px 5px 18px;
    border-top: 1px solid #ccc;
}

    .user-reference-foot span,
    .canvas-reference ul li span,
    .user-reference ul li span {
        float: right;
    }

.judge {
    font-size: 1.5em;
    color: #5384ff;
}

.input-group-addon i.zmdi {
    cursor: pointer;
    font-size: 20px !important;
}

/*RESULTADO DE BUSQUEDA*/

.results {
    display: flex;
    display: -webkit-box;
    display: box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    max-height: 670px !important;
    overflow: auto;
    float: left;
    position: relative;
    border: 1px solid #ccc;
    padding: 10px 5px;
    background: #fff;
    border-bottom: none !important;
    border-radius: 2px 2px 0 0;
    width: 100%;
    margin: 0;
    min-width: 750px;
}

.panel-infractor.auto .results {
    display: flex;
    display: -webkit-box;
    display: box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    max-height: 300px !important;
    overflow: auto;
    float: left;
    position: relative;
    border: none;
    background: transparent;
    border-bottom: none !important;
    border-radius: none;
    width: 100%;
    margin: 0;
}

.results-dcausa {
    border: none !important;
}

.cerrar-causa {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
}

.foot-pager {
    background: #f5f5f5 !important;
    color: #7b7b7b;
    bottom: 0;
    background: none;
    border-radius: 0 !important;
    border: 1px solid #ccc;
    border-top: none !important;
}

    .foot-pager .btn-group {
        margin: 7px 0;
    }

.list-change {
    margin: 7px 15px 7px 0 !important;
}

.foot-pager .btn-group .btn {
    height: 40px;
}

.foot-pager .btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.foot-pager
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.foot-pager
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
}

.foot-pager .dropup .btn {
    margin: 0px 20px !important;
    border-radius: 2px !important;
}

.panel-footer span {
    margin: 15px;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 7px 0 !important;
    border-radius: 0px !important;
}

.page {
    margin: 15px !important;
}

.pagination > li > a,
.pagination > li > span {
    color: #5384ff;
}

    .pagination .active a,
    .pagination > li > a:hover,
    .pagination > li > span:hover,
    .pagination > li > a:focus,
    .pagination > li > span:focus {
        background: #5384ff !important;
        color: #fff;
    }

h4.title-detail {
    background-color: #fff;
}

.descargo,
.notificaciones,
.licencia,
.pagos,
.causa_derivada {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    width: 100%;
}

.bs-component {
    position: relative;
    display: block;
    height: 100%;
    width: 23.4%;
    min-width: 200px;
    margin: 10px;
}

.results .bs-component {
    width: 15%;
}

.wizardback .results .bs-component {
    position: relative;
    display: block;
    height: 100%;
    width: 23.2%;
    min-width: 200px;
}

.list-group,
.comp_planpagos {
    position: relative;
    display: block;
    margin: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
    overflow: hidden;
}

.bs-component .list-group .copy {
    position: absolute;
    top: 15px;
    right: 15px;
}

    .bs-component .list-group .copy:hover {
        color: #5384ff;
        transition: all 0.2s linear;
        cursor: copy;
    }

.title .copy {
    color: #fff;
}

    .title .copy:hover {
        opacity: 0.3;
        transition: all 0.2s linear;
        cursor: copy;
    }

.comp_planpagos {
    min-height: 140px;
    margin: 0 0 16px 0;
}

.table {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
    border-collapse: separate;
}

    .table thead {
        background: #f2f2f2;
    }

        .table thead th {
            color: #454545;
            font-size: 12px;
            font-weight: normal;
        }

    .table td {
        font-size: 14px;
    }

    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
        vertical-align: middle;
    }

    .table td .radio.normal {
        height: 25px;
        padding: 0 !important;
        margin: 0 0 0 30px !important;
    }

    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
        border-top: 1px solid #d4d9e3 !important;
    }

    .table > thead > tr > th {
        border-bottom: 1px solid #d4d9e3 !important;
    }

.bs-component .list-group.simplelist {
    padding: 5px 15px !important;
}

.bs-component .list-group:hover,
.bs-component .list-group:focus,
.bs-component .list-group:active {
    background: #fff !important;
    transition: all 0.3s ease-out;
    outline: 3px solid #98d4f3 !important;
}

.list-group a {
    display: block;
    width: 100%;
    min-height: 75px;
    height: auto;
}

.causa li .list-group a {
    min-height: 145px !important;
}

.list-group a:after {
    clear: both;
}

.list-group a h4 {
    color: #5384ff;
}

.list-group a:hover,
.list-group a:focus,
.list-group a:active {
    text-decoration: none !important;
    text-decoration: none !important;
    transition: all 0.3s ease-out;
}

    .list-group a:hover h4,
    .list-group a:focus h4,
    .list-group a:active h4 {
        color: #1976d2 !important;
        transition: all 0.3s ease-out;
    }

    .list-group a:hover p,
    .list-group a:focus p,
    .list-group a:active p {
        color: #000;
        transition: all 0.3s ease-out;
    }

.ellipsis {
    height: 1.2em !important;
    max-height: 1.2em !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}

.list-group-item-heading {
    font-size: 14px !important;
    color: #5384ff !important;
    text-transform: uppercase;
    display: block;
    line-height: normal;
    width: 98%;
}

.list-group-item-text {
    font-size: 13px !important;
    font-weight: normal !important;
    color: #545454 !important;
    line-height: 28px;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 28px;
}

    .list-group-item-text .doc {
        float: left;
        width: 70%;
    }

    .list-group-item-text .dom {
        float: right;
        width: 30%;
        text-align: right;
    }

    .list-group-item-text .pay,
    .doc.full,
    .full {
        width: 100%;
        display: block;
    }

.absolutoria {
    display: none;
}

.absolucion .absolutoria {
    display: block;
}

.radio {
    position: relative;
    padding: 5px 0 5px 30px !important;
    margin: 0 !important;
    display: block !important;
    width: 115%;
    left: -15px;
    bottom: -15px;
    background: #f5f5f5;
}

.checkbox {
    position: relative;
    padding: 5px 30px;
    margin: 0 !important;
    display: block !important;
    width: 115%;
    left: -15px;
    bottom: -15px;
    background: #f5f5f5;
}

.bs-component .checkbox input[type="checkbox"] {
    position: relative;
    margin: 0;
}

.list-items .list-group {
    box-shadow: none !important;
    margin: 0;
}

.list-items .bs-component {
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    /*  height: 55px !important;*/
    margin: 3px 15px;
    border-radius: 0px;
}

    .list-items .bs-component .list-group {
        height: 55px !important;
    }

    .list-items .bs-component .list-group-item-heading {
        float: left;
        width: 20%;
        line-height: 30px;
        font-size: 14px !important;
    }

        .list-items .bs-component .list-group-item-heading.heading-more-width {
            width: 40%;
        }

.bs-component .wed {
    float: left;
    width: 100%;
    height: 20px;
}

.list-items .bs-component .wed {
    float: left;
    width: 15%;
    margin: 0 1% 0 0;
}

.bs-component .wed .badge {
    float: left;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 5px 0 0;
}

.list-items .bs-component .wed .badge {
    float: left;
    max-width: 95%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 5px;
}

.list-items .bs-component .list-group-item-text {
    float: left;
    width: 13%;
    font-size: 13px;
    margin: 0 1% 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 20px;
}

    .list-items .bs-component .list-group-item-text.plus {
        float: left;
        min-width: 24%;
        font-size: 13px;
        margin: 0;
    }

    .list-items .bs-component .list-group-item-text .doc i,
    .list-items .bs-component .list-group-item-text .dom i,
    .list-items .bs-component .list-group-item-text i {
        display: none !important;
    }

    .list-items .bs-component .list-group-item-text .doc {
        float: left;
        width: 170px;
    }

    .list-items .bs-component .list-group-item-text .dom {
        float: left;
        text-align: left;
        width: 100px;
    }

.list-items .bs-component .checkbox {
    float: right;
    padding: 5px !important;
}

.list-items .bs-component .list-group {
    padding: 7px 15px;
}

.list-items .bs-component .checkbox .select span {
    display: none !important;
}

.select {
    font-weight: 500 !important;
    width: auto;
}

.list-items .bs-component .list-group a {
    float: right;
    width: 97%;
    min-height: 25px;
    margin: 3px 0 0 0;
}

.list-items .bs-component .checkbox {
    clear: none;
    float: left;
    background: none;
    left: 0;
    bottom: 0;
    margin: 5px 0 0 0 !important;
    width: 50px;
}

.resolucion .panel {
    background: #e3e3e3;
}

.persona-name-lastname {
    color: #0e1a35;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2rem;
    margin: 0 0 10px 0;
}

.well .well,
.panel-infractor .well {
    background: #ffffff;
    float: left;
    width: 100%;
    border-radius: 2px;
    color: #545454 !important;
}

.well {
    height: auto;
    border-radius: 2px;
    padding: 10px !important;
}

    .well.blue {
        height: auto;
        border-radius: 0;
        background: #ffffff;
    }

    .well span {
        font-size: 14px;
    }

.list-group .user-list {
    float: left;
    margin: 0 0 5px 0;
}

    .list-group .user-list .img-persona {
        float: left;
        width: 45px;
        height: 45px;
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
        margin: 0 15px 0 0;
        border: 1px solid #ccc !important;
    }

        .list-group .user-list .img-persona img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .list-group .user-list .list-group-item-heading {
        float: left;
        width: 60%;
        margin: 5px 0 0 0;
    }

    .list-group .user-list .list-group-item-text {
        float: left;
        width: 60%;
        margin: 0;
    }

.list-items .list-group .user-list {
    float: left;
    margin: 0 0 5px 0;
    width: 50% !important;
}

    .list-items .list-group .user-list .img-persona {
        float: left;
        width: 30px;
        height: 30px;
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
        margin: 0 15px 0 0;
    }

    .list-items .list-group .user-list .list-group-item-heading {
        float: left;
        width: 30%;
        margin: 3px 0 0 0;
    }

    .list-items .list-group .user-list .list-group-item-text {
        float: left;
        width: 30%;
        margin: 3px 0 0 0;
    }

.persona-card {
    min-height: 60px;
    padding-left: 72px;
    position: relative;
}

    .persona-card .img-persona {
        position: absolute;
        width: 48px;
        height: 48px;
        overflow: hidden;
        left: 0px;
        display: inline-block;
        vertical-align: middle;
        border: 1px solid #d4d9e3 !important;
    }

.panel-infractor .persona-card .img-persona {
    position: absolute;
    width: 60px;
    height: 60px;
    overflow: hidden;
    left: 0px;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #d4d9e3 !important;
}

.panel-infractor .persona-card .persona-name-lastname {
    margin: 10px 0 5px 0;
}

.header-persona-data {
    padding: 30px 0;
}

.persona-data {
    float: left;
}

    .persona-data .smaller {
        font-size: 12px;
        margin-top: 0px;
    }

.item-detail-persona {
    font-size: 14px;
    margin: 0;
}

.judge-name-lastname {
    color: #fff;
    font-size: 16px;
    margin: 0;
    line-height: 20px;
}

.judge-card .persona-card {
    position: relative;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

    .judge-card .persona-card .img-persona {
        position: relative;
        width: 42px;
        height: 42px;
        overflow: hidden;
        left: 0px;
        display: inline-block;
        vertical-align: middle;
        align-items: center;
        justify-content: center;
    }

.judge-card .persona-name-lastname,
.judge-card .autoridad {
    color: #fff;
    text-align: center;
}

.judge-card .persona-data {
    float: left;
    width: 100%;
}

.checkbox.normal,
.radio.normal {
    display: inline-block !important;
    float: left;
    position: static !important;
    background-color: transparent !important;
    width: auto !important;
    margin: 0px 10px !important;
    color: #545454 !important;
    border-top: none !important;
    height: 35px;
}

.checkbox label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-size: 0.85em !important;
}

    .checkbox label::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 17px;
        height: 17px;
        left: 0;
        margin-left: -20px;
        border: 1px solid #cccccc;
        border-radius: 2px;
        background-color: #fff;
        -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    }

    .checkbox label::after {
        display: inline-block;
        position: absolute;
        width: 16px;
        height: 16px;
        left: 0;
        top: 0;
        margin-left: -20px;
        padding-left: 3px;
        padding-top: 1px;
        font-size: 11px;
        color: #555555;
    }

.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
    opacity: 0;
    z-index: 1;
}

    .checkbox input[type="checkbox"]:focus + label::before,
    .checkbox input[type="radio"]:focus + label::before {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }

    .checkbox input[type="checkbox"]:checked + label::after,
    .checkbox input[type="radio"]:checked + label::after {
        font-family: "Material-Design-Iconic-Font";
        content: "\f26b";
    }

    .checkbox input[type="checkbox"]:disabled + label,
    .checkbox input[type="radio"]:disabled + label {
        opacity: 0.65;
    }

        .checkbox input[type="checkbox"]:disabled + label::before,
        .checkbox input[type="radio"]:disabled + label::before {
            background-color: #eeeeee;
            cursor: not-allowed;
        }

.checkbox.checkbox-circle label::before {
    border-radius: 50%;
}

.checkbox.checkbox-inline {
    margin-top: 0;
}

.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
    background-color: #36a3dc;
    border-color: #337ab7;
}

.checkbox-primary input[type="checkbox"]:checked + label::after,
.checkbox-primary input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
    background-color: #d9534f;
    border-color: #d9534f;
}

.checkbox-danger input[type="checkbox"]:checked + label::after,
.checkbox-danger input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
    background-color: #5bc0de;
    border-color: #5bc0de;
}

.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="radio"]:checked + label::before {
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}

.checkbox-warning input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-success input[type="checkbox"]:checked + label::before,
.checkbox-success input[type="radio"]:checked + label::before {
    background-color: #5cb85c;
    border-color: #5cb85c;
}

.checkbox-success input[type="checkbox"]:checked + label::after,
.checkbox-success input[type="radio"]:checked + label::after {
    color: #fff;
}

.radio {
    padding-left: 20px;
    padding-top: 5px;
}

    .radio label {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        padding-left: 5px;
    }

        .radio label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 17px;
            height: 17px;
            left: 0;
            margin-left: -20px;
            border: 1px solid #cccccc;
            border-radius: 50%;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out;
            transition: border 0.15s ease-in-out;
        }

        .radio label::after {
            display: inline-block;
            position: absolute;
            content: " ";
            width: 11px;
            height: 11px;
            left: 3px;
            top: 3px;
            margin-left: -20px;
            border-radius: 50%;
            background-color: #555555;
            -webkit-transform: scale(0, 0);
            -ms-transform: scale(0, 0);
            -o-transform: scale(0, 0);
            transform: scale(0, 0);
            -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        }

    .radio input[type="radio"] {
        opacity: 0;
        z-index: 1;
    }

        .radio input[type="radio"]:focus + label::before {
            outline: thin dotted;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        .radio input[type="radio"]:checked + label::after {
            -webkit-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            -o-transform: scale(1, 1);
            transform: scale(1, 1);
        }

        .radio input[type="radio"]:disabled + label {
            opacity: 0.65;
        }

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

    .radio.radio-inline {
        margin-top: 0;
    }

.radio-primary input[type="radio"] + label::after {
    background-color: #337ab7;
}

.radio-primary input[type="radio"]:checked + label::before {
    border-color: #337ab7;
}

.radio-primary input[type="radio"]:checked + label::after {
    background-color: #337ab7;
}

.radio-danger input[type="radio"] + label::after {
    background-color: #d9534f;
}

.radio-danger input[type="radio"]:checked + label::before {
    border-color: #d9534f;
}

.radio-danger input[type="radio"]:checked + label::after {
    background-color: #d9534f;
}

.radio-info input[type="radio"] + label::after {
    background-color: #5bc0de;
}

.radio-info input[type="radio"]:checked + label::before {
    border-color: #5bc0de;
}

.radio-info input[type="radio"]:checked + label::after {
    background-color: #5bc0de;
}

.radio-warning input[type="radio"] + label::after {
    background-color: #f0ad4e;
}

.radio-warning input[type="radio"]:checked + label::before {
    border-color: #f0ad4e;
}

.radio-warning input[type="radio"]:checked + label::after {
    background-color: #f0ad4e;
}

.radio-success input[type="radio"] + label::after {
    background-color: #5cb85c;
}

.radio-success input[type="radio"]:checked + label::before {
    border-color: #5cb85c;
}

.radio-success input[type="radio"]:checked + label::after {
    background-color: #5cb85c;
}

.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
    font-family: "Material-Design-Iconic-Font";
    content: "\f26b";
}

input[type="checkbox"] .styled:checked + label::before,
input[type="radio"] .styled:checked + label::before {
    color: #fff;
}

input[type="checkbox"] .styled:checked + label::after,
input[type="radio"] .styled:checked + label::after {
    color: #fff;
}

.label i {
    margin: 0 5px 0 0;
}

/* links */

.btn-searchIcon:hover {
    color: #000;
}

.btn-outline {
    border: 1px solid #2962ff !important;
    background: #fff;
    color: #2962ff;
}

    .btn-outline:hover {
        border: 1px solid #2962ff !important;
        background: #829be2;
        color: #fff;
    }

.btn-outline-dark {
    border: 1px solid #212529 !important;
    background: transparent;
    color: #212529;
    line-height: inherit;
}

    .btn-outline-dark:hover {
        border: 1px solid #212529 !important;
        background: #60656a;
        color: #fff !important;
        line-height: inherit;
    }

.btn:hover {
    transition: all 0.3s ease-out !important;
}

.btn-default {
    background: #fff !important;
}

    .btn-default.active {
        color: #fff !important;
        background: #2962ff !important;
    }

.btn-secondary {
    color: #5384ff !important;
    border: 1px solid #5384ff;
    background: #fff;
    transition: all 0.3s ease-out;
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:visited {
        color: #000 !important;
        transition: all 0.3s ease-out;
    }

.btn-info {
    color: #fff !important;
    background: #1976d2;
    border: 1px solid #1976d2;
    transition: all 0.3s ease-out;
    height: 40px;
}

    .btn-info:hover,
    .btn-info:focus,
    .btn-info:visited {
        color: #fff !important;
        background: #5384ff;
        transition: all 0.3s ease-out;
    }

.btn-tertiary {
    color: #5384ff !important;
    border: 1px solid #ccc;
    background: #fff;
    transition: all 0.3s ease-out;
    color: #999 !important;
}

    .btn-tertiary:hover,
    .btn-tertiary:focus,
    .btn-tertiary:visited {
        color: #000 !important;
        transition: all 0.3s ease-out;
    }

.btn-adv_search {
    background: #5384ff !important;
    border: 1px solid #5384ff;
    color: #fff;
    transition: all 0.5s ease-out;
    margin-top: 26px;
    height: 35px;
    padding-top: 8px;
}

    .btn-adv_search.lg {
        height: auto !important;
    }

.btn-adv {
    padding-top: 8px;
    margin-top: 26px;
}

.btn-adv_search.show_template {
    margin: 0px 0 0 15px;
}

.margin_cero {
    margin: 0 !important;
}

.btn-adv_search:hover,
.btn-adv_search:focus,
.btn-adv_search:visited,
.btn-dwnld:hover,
.btn-dwnld:focus,
.btn-dwnld:visited {
    color: #5384ff !important;
    border: 1px solid #5384ff !important;
    background: #fff !important;
    transition: all 0.5s ease-out;
}

.adv_search .input-group {
    float: left !important;
    margin: 0 5% 0 0;
    width: 100%;
    height: 20px;
}

    .adv_search .input-group .input-group-addon {
        background-color: #eee;
        color: #555;
        font-size: 14px;
        font-weight: normal;
        line-height: 1em;
        padding: 0 5px;
        text-align: center;
    }

/*   -----        panel      -----   */

.media .pull-left {
    border-radius: 100px;
    overflow: hidden;
    height: 50px !important;
    width: 50px !important;
    padding: 0;
    margin-right: 10px;
}

    .media .pull-left img {
        width: 100%;
        height: auto !important;
    }

/*   -----        causa general       -----   */

.nrocausa {
    display: none;
    position: fixed;
    top: 0;
    padding: 1%;
    width: 100%;
    background: #4164c2;
    z-index: 1;
}

    .nrocausa .title {
        color: #fff;
    }

.item-label,
.item-label-persona,
.item-detail {
    display: block;
    width: 100%;
    font-size: 14px;
}

.item-detail {
    font-weight: 500;
    color: #575757;
}

.panel .item-detail {
    margin-bottom: 20px;
}

.item-label-persona {
    margin: 5px 0 0 0;
}

.causa_gral {
    height: 100%;
    background: #fff;
    border: 1px solid #ccc;
    padding: 0 0 15px 0 !important;
}

    .causa_gral .actions {
        height: 100%;
        background: #fff !important;
        border-top: 1px #ccc solid;
        margin: 1% 0 0 0;
    }

.input-group-addon {
    color: #5384ff !important;
    transition: all 0.3s ease-out;
}

    .input-group-addon:hover {
        color: #0d47a1 !important;
        transition: all 0.3s ease-out;
    }

/*modals*/

.modal-content {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    border-radius: 2px;
}

.modal-title {
    font-weight: 500;
    color: #0e1a35;
}

.modal-body label {
    margin: 10px 0 5px 0;
    font-weight: 500;
    font-size: 16px;
}

.modal-body.height {
    max-height: 350px !important;
    overflow: auto;
}

.modal-body i + h2 {
    margin-top: 10px;
}

.modal-body i {
    font-size: 45px;
}

    .modal-body i.zmdi-alert-triangle {
        color: #f44336;
    }

input {
    color: #000;
}

.modal-header span.fs1 {
    margin: 10px 0 5px 0;
    font-weight: 500;
    transform: translateZ(0);
    transition-duration: 0.5s;
}

.modal-footer .alert-danger {
    text-align: left;
}

.thumb-ni {
    float: left;
    border: 1px solid #ccc;
    height: 100px;
    width: 100px;
    margin: 0 0 0 15px;
}

    .thumb-ni a:hover {
        opacity: 0.5;
        transition: all 0.3s ease-out;
    }

    .thumb-ni a:active {
        border-color: 1px solid #5384ff;
        opacity: 0.5;
        transition: all 0.3s ease-out;
    }

    .thumb-ni img,
    .thumb-temp img {
        width: 100%;
        height: 100%;
    }

.thumb-temp {
    float: left;
    position: relative;
    border: 1px solid #ccc;
    height: 100px;
    width: 100px;
    margin: 15px 15px 30px 0 !important;
}

    .thumb-temp:hover img {
        opacity: 0.5;
        transition: all 0.3s ease-out;
    }

.importar,
.ver {
    display: none;
}

.thumb-temp:hover .ver {
    display: block !important;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30%;
    opacity: 1 !important;
    transition: all 0.3s ease-out;
    background-color: #5384ff;
    padding: 5px;
    text-align: center;
    cursor: pointer;
}

.thumb-temp:hover .importar {
    display: block !important;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    opacity: 1 !important;
    transition: all 0.3s ease-out;
    background-color: #283593;
    padding: 5px;
    text-align: center;
}

    .thumb-temp:hover .ver a,
    .thumb-temp:hover .importar a {
        color: #fff;
    }

.thumb-temp:hover .ver:hover {
    background: #64b5f6;
}

.thumb-temp:hover .importar:hover {
    background: #5c6bc0;
}

.thumb-temp:hover .ver:active,
.thumb-temp:hover .importar:active {
    opacity: 0.7 !important;
    transition: all 0.3s ease-out;
}

.panel-table {
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
}

    .panel-table table {
        margin: 0;
        box-shadow: none;
    }

    .panel-table .thead {
        padding: 0 18px 0 0;
        background: #f2f2f2;
        border-top: 1px solid #d4d9e3 !important;
        border-bottom: 1px solid #d4d9e3 !important;
    }

        .panel-table .thead .table > thead > tr > th {
            border: none !important;
        }

.tbody {
    overflow-y: scroll;
    padding: 0;
    margin-bottom: 35px;
    min-height: 150px;
    background: #fff;
    position: relative;
    top: -1px;
}

.panel-table .panel-footer--table {
    background: #000 !important;
    color: #fff;
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 35px;
    background: none;
}

    .panel-table .tbody.table > tbody > tr:first-child > td,
    .panel-table .panel-footer--table .table > tfoot > tr:first-child > td {
        border-top: none;
    }

    .panel-table .panel-footer--table .table > tfoot > tr > td strong {
        font-weight: 600;
    }

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
    display: block;
}

    .table-fixed tbody td,
    .table-fixed thead > tr > th {
        float: left;
        border-bottom-width: 0;
    }

.panel-collapse .table-condensed > thead > tr > th,
.panel-collapse .table-condensed > tbody > tr > th,
.panel-collapse .table-condensed > tfoot > tr > th,
.panel-collapse .table-condensed > thead > tr > td,
.panel-collapse .table-condensed > tbody > tr > td,
.panel-collapse .table-condensed > tfoot > tr > td {
    padding: 1%;
}

.empty-flex {
    min-height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.empty-state {
    float: left;
    text-align: center;
    width: 100%;
    display: block;
    text-align: center;
    margin: auto;
    vertical-align: middle;
    padding: 50px 0;
}

.preview-dwnld .empty-state {
    padding: 6% 0 !important;
}

.zmdi-48px {
    font-size: 48px !important;
}

.preview-dwnld {
    float: left;
    width: 100%;
    overflow: hidden;
    position: relative;
}

    .preview-dwnld a.dwnld_a {
        float: left;
        width: 80%;
        border: none;
        padding: 0;
        margin: 0;
        background: none;
    }

    .preview-dwnld a:hover {
        opacity: 0.5;
        transition: all 0.1s ease-out;
    }

    .preview-dwnld a.dwnld_a span.p {
        float: left;
        padding: 10px 0 0 0;
        margin: 0 15px;
        width: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .preview-dwnld a.dwnld_a .desc {
        float: left;
        margin: 0 15px;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .preview-dwnld a.dwnld_a span.p-date {
        float: left;
        padding: 10px 0 0 0;
        margin: 0 15px;
        width: 20%;
        text-align: right;
    }

    .preview-dwnld a.erase {
        padding: 0;
        margin: 5px 0 0 15px;
        color: red;
        width: auto;
        line-height: 25px;
    }

    .preview-dwnld a.erase2 {
        padding: 0;
        color: red;
        width: auto;
        line-height: 25px;
    }

        .preview-dwnld a.erase2:hover {
            color: grey;
        }

    .preview-dwnld a.erase:hover {
        color: grey;
    }

    .preview-dwnld .mov-btn {
        width: 100px;
        border: none;
        padding: 0;
        margin: 0 15px;
        background: none;
        position: absolute;
        top: 10px;
        right: 15px;
        transition: transform 0.25s cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 0.25s cubic-bezier(0.694, 0.0482, 0.335, 1);
        transform: translateX(140px);
        -webkit-transform: translate3d(140px, 0, 0);
        transform: translate3d(140px, 0, 0);
        will-change: transform;
    }

    /*////////////////////////////////////////////////*/

    .preview-dwnld.hover-erase a.dwnld_a span.p {
        float: left;
        padding: 10px 0 0 0;
        margin: 0 15px;
        width: 40%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .preview-dwnld.hover-erase a.dwnld_a span.p-date {
        float: left;
        padding: 10px 0 0 0;
        margin: 0 15px;
        width: 20%;
        text-align: right;
    }

    .preview-dwnld.hover-erase .mov-btn {
        float: left;
        font-size: 20px;
        border: none;
        padding: 0;
        margin: 0 15px;
        background: none;
        transform: translateX(0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

/*////////////////////////////////////////////////*/

.thumb-dwnld {
    float: left;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    text-align: center;
}

    .thumb-dwnld i {
        font-size: 18px;
        margin: 10px 0;
    }

.btn-dwnld2 {
    color: #5384ff;
    transition: all 0.5s ease-out;
    overflow: hidden;
}

.btn-dwnld {
    background: #5384ff !important;
    border: 1px solid #5384ff;
    color: #fff;
    transition: all 0.5s ease-out;
    height: 35px;
    padding-top: 8px;
    overflow: hidden;
}

.download {
    border: 2px solid rgba(0, 0, 0, 0.3);
    background: white;
    text-align: center;
    border-radius: 2px;
    background: white;
    border: none;
}

    .download a {
        float: left;
        position: relative;
        width: 100%;
        padding: 4px;
        line-height: 1.42857143;
        background-color: #e3e3e3;
        border: 1px solid #ddd;
        border-radius: 2px;
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        display: -webkit-flex;
        display: flex;
        webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    }

        .download a:hover {
            background-color: #5384ff;
        }

    .download .thumb-circle {
        position: relative;
        height: 45px;
        width: 45px;
        margin: auto;
    }

        .download .thumb-circle i {
            position: absolute;
            display: none;
        }

    .download:hover .thumb-circle img {
        -webkit-transform: scale(1.05, 1.05);
        -moz-transform: scale(1.05, 1.05);
        -ms-transform: scale(1.05, 1.05);
        -o-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05);
        -webkit-filter: blur(8px);
        filter: blur(8px);
    }

    .download:hover .thumb-circle i {
        position: absolute;
        width: 100%;
        display: block;
        z-index: 200;
        text-align: center;
        font-size: 30px;
        line-height: 40px;
        color: #5384ff;
        -webkit-animation-name: bounceInDown;
        animation-name: bounceInDown;
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

/*fin modals*/

/*DESCARGOS*/

.wizardback textarea {
    height: 100px !important;
}

.menu-wizard ul {
    box-sizing: border-box;
    height: auto;
    width: 100%;
    margin: 0 !important;
    padding: 0 15px;
    min-width: 800px;
}

.menu-wizard li {
    box-sizing: border-box;
    font-size: 16px;
    width: 100%;
    display: inline;
}

    .menu-wizard li div {
        background: #e4e7ef;
        color: #7686a7;
        display: inline-block;
        overflow: hidden;
        padding: 10px 27px 10px 60px;
        position: relative;
        border-radius: 2px;
    }

        .menu-wizard li div span {
            background: #d2d6e0;
            color: #7686a7;
            bottom: 0;
            font-size: 16px;
            font-weight: 500;
            left: 0;
            padding: 15px 15px;
            line-height: 24px;
            position: absolute;
            top: 0;
            line-height: 0.8em;
        }

        .menu-wizard li div.selected {
            background: #4b74e0 none repeat scroll 0 0;
            color: #fff;
        }

            .menu-wizard li div.selected span {
                background: #4164c2 none repeat scroll 0 0;
                color: #fff;
            }

a.trash {
    color: #ccc !important;
    font-size: 18px;
    line-height: 1em;
    transition: all 0.3s ease-out;
}

    a.trash:hover {
        color: #f44336 !important;
        transition: all 0.3s ease-out;
    }

    a.trash:active {
        color: #304ffe !important;
        transition: all 0.3s ease-out;
    }

/*          PLAN DE PAGOS          */

.precio {
    font-weight: bold;
    font-size: 17px !important;
}

.precio1 {
    font-weight: bold;
    font-size: 20px !important;
}

.mtop50px {
    margin-top: 50px;
}

/* Underline From Left */

.underline-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscbs-ale;
    position: relative;
    overflow: hidden;
}

    .underline-left:before {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 100%;
        bottom: 0;
        background: #5384ff;
        height: 4px;
        -webkit-transition-property: right;
        transition-property: right;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .underline-left:hover:before,
    .underline-left:focus:before,
    .underline-left:active:before {
        right: 0;
    }

.input-group.date .input-group-addon {
    height: 20px !important;
    border-radius: 0 2px 2px 0;
}

.timepicker-picker .arrow_carrot-up,
.timepicker-picker .arrow_carrot-down,
.timepicker-picker .separator {
    font-size: 28px !important;
}

.strong {
    font-weight: bold;
}

/* titular */

.titular {
    float: left;
    width: 100%;
}

    .titular ul {
        position: relative;
        margin: 0 0 0 50px;
        padding: 0;
        list-style: none;
        position: relative;
        font-size: 14px;
    }

        .titular ul:before {
            content: "";
            position: absolute;
            height: 100%;
            width: 2px;
            background: #e7e7e7;
            left: -30px;
        }

        .titular ul li {
            position: relative;
            margin-left: 0px;
            background-color: #fff;
            padding: 14px;
            border-radius: 2px;
            width: 70%;
            border: solid 1px #d4d9e3;
            box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
        }

            .titular ul li:before {
                content: "";
                position: absolute;
                width: 20px;
                height: 20px;
                border-radius: 50px;
                border: 3px solid #4164c2;
                background: #fff;
                left: -40px;
                top: 40%;
            }

            .titular ul li div.titular-data {
                width: 83%;
                position: relative;
                margin: 0 0 0 110px;
            }

.tit-total {
    position: absolute !important;
    bottom: 0px;
    right: 0px;
    width: 150px !important;
    background: #f6f7fa !important;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 4px;
    height: 100%;
    padding: 15px;
    font-size: 40px;
    line-height: 50px;
}

.titular ul li:not(:first-child) {
    margin-top: 15px;
    background: #f6f7fa !important;
    box-shadow: none;
    border: 1px solid #eee;
}

    .titular ul li:not(:first-child) div .tit-total {
        background: #fff !important;
        color: #ccc !important;
    }

    .titular ul li:not(:first-child):before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50px;
        border: 2px solid #999;
        background: #fff;
        left: -38px;
        top: 40%;
    }

    .titular ul li:not(:first-child) .time {
        background: #ccc !important;
    }

    .titular ul li:not(:first-child) .titular-data .list-group-item-text,
    .titular ul li:not(:first-child) .titular-data .list-group-item-heading {
        color: #999 !important;
    }

.time {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100px !important;
    height: 100%;
    background: #4164c2;
    padding: 15px;
    text-align: center;
    border-radius: 2px 0px 0px 2px;
}

    .time span {
        font-weight: 500;
        width: 100%;
        color: #fff;
        font-size: 40px;
    }

    .time small {
        font-weight: 500;
        color: #fff;
        font-size: 20px;
        line-height: 15px;
    }

.tit-total span {
    float: right;
    font-weight: 500;
}

.tit-total small {
    float: right;
    font-size: 20px;
    width: 100%;
    line-height: 15px;
}

.badge-rect {
    border-radius: 2px !important;
}

.i-search-bar {
    color: #ccc;
    position: absolute;
    font-size: 20px;
    top: 8px;
    right: 13px;
    z-index: 9999;
}

/* ESTADOS DE CAUSAS
      
      Causa cerrada y observada en negro con candado cerrado    // zmdi zmdi-lock  //.badge .b-black
      con resolucion absolucion notificada .badge .b-red
      con pago voluntacio NC .badge .b-red
      Con pago voluntario NI .badge .b-red
      con condena cumplida  .badge .b-red
      Todo esto en rojo con icono de atencion  zmdi zmdi-alert-polygon
      
      
      y el resto de estados en verde con el candado cerrado zmdi zmdi-lock
      .badge .b-green*/

/* colores */

.greyscale {
    filter: grayscale(100%);
}

.c-red {
    color: #f44336 !important;
}

.c-cyan {
    color: #5384ff !important;
}

.c-blue {
    color: #3d5afe !important;
}

.c-violet {
    color: #7e57c2 !important;
}

.c-indigo {
    color: #303f9f !important;
}

.c-green {
    color: #7cb342 !important;
}

.c-orange {
    color: #fb8c00 !important;
}

.c-black {
    color: #000 !important;
}

.c-grey {
    color: #454545 !important;
}

.c-grey-70 {
    color: #bebebe !important;
}

.c-bluetheme {
    color: #4164c2 !important;
}

.b-bord {
    background: #80000b !important;
    color: #fff !important;
}

.b-red {
    background: #f44336 !important;
    color: #fff !important;
}

.b-cyan {
    background: #5384ff !important;
    color: #fff !important;
}

.b-violet {
    background: #7e57c2 !important;
    color: #fff !important;
}

.b-indgio {
    background: #303f9f !important;
    color: #fff !important;
}

.b-blue {
    background: #49c3fd !important;
    color: #fff !important;
}

.b-green {
    background: #7cb342 !important;
    color: #fff !important;
}

.b-orange {
    background: #fb8c00 !important;
    color: #fff !important;
}

.b-black {
    background: #000000 !important;
    color: #fff !important;
}

.b-grey {
    background: #454545 !important;
    color: #fff !important;
}

.b-white {
    background: #fff !important;
    color: #fff !important;
}

.b-darkestblue {
    background: #0e1a35 !important;
    color: #fff !important;
}

.b-bluetheme {
    background: #4164c2 !important;
    color: #fff !important;
}

.b-bluethemegrey {
    background: #f2f2f2;
    color: #fff !important;
}

.b-bluegreen {
    background: #41c2c2;
    color: #fff !important;
}

.b-yellow {
    background: #f1da55 !important;
    color: #000 !important;
}

/*    MODULO DE USUARIOS     */

/* titular */

.historial {
    float: left;
    width: 100%;
    min-height: 450px;
    max-height: 450px;
    overflow: auto;
}

    .historial ul {
        position: relative;
        margin: 0 0 0 50px;
        padding: 0;
        list-style: none;
        position: relative;
        font-size: 14px;
    }

        .historial ul:before {
            content: "";
            position: absolute;
            height: 100%;
            width: 2px;
            background: #e7e7e7;
            left: -30px;
        }

        .historial ul li {
            position: relative;
            margin-left: 0px;
            background-color: #fff;
            padding: 14px 0;
            border-radius: 2px;
            width: 100%;
            margin-bottom: 15px;
        }

            .historial ul li:before {
                content: "";
                position: absolute;
                width: 20px;
                height: 20px;
                border-radius: 50px;
                border: 3px solid #4164c2;
                background: #fff;
                left: -39px;
                top: 20px;
            }

.user-date {
    display: inline-block;
    font-size: 14px;
    margin: 5px 0 0px 0px;
    font-weight: 500;
}

.historial ul li div.historial-data {
    width: 95%;
    position: relative;
    margin: 15px 0 0 0;
    border: solid 1px #d4d9e3;
    padding: 15px;
    box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

    .historial ul li div.historial-data:after {
        position: absolute;
        content: "";
        top: -14px;
        border: solid transparent;
        border-color: rgba(136, 183, 213, 0);
        border-bottom-color: #fff;
        border-width: 7px;
        margin-left: -7px;
    }

    .historial ul li div.historial-data:before {
        position: absolute;
        content: "";
        top: -15px;
        border: solid transparent;
        border-color: rgba(194, 225, 245, 0);
        border-bottom-color: #ccc;
        border-width: 7px;
        margin-left: -7px;
    }

.chip {
    display: inline-block;
    height: 32px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    line-height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    background-color: #e4e4e4;
    margin-bottom: 5px;
    margin-right: 5px;
}

    .chip > img {
        float: left;
        margin: 0 8px 0 -12px;
        height: 32px;
        width: 32px;
        border-radius: 50%;
    }

    .chip > span {
        float: left;
        margin: 0 8px 0 -12px;
        height: 32px;
        width: 32px;
        border-radius: 50%;
        text-align: center;
        font-size: 14px;
    }

        .chip > span > i {
            font-size: 15px;
            margin: 8px 0 0 0;
        }

    .chip .close {
        cursor: pointer;
        float: right;
        font-size: 16px;
        line-height: 32px;
        padding-left: 8px;
    }

.chips {
    border: none;
    border-bottom: 1px solid #9e9e9e;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0 0 20px 0;
    min-height: 45px;
    outline: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

    .chips.focus {
        border-bottom: 1px solid #26a69a;
        -webkit-box-shadow: 0 1px 0 0 #26a69a;
        box-shadow: 0 1px 0 0 #26a69a;
    }

    .chips:hover {
        cursor: text;
    }

    .chips .chip.selected {
        background-color: #26a69a;
        color: #fff;
    }

    .chips .input {
        background: none;
        border: 0;
        color: rgba(0, 0, 0, 0.6);
        display: inline-block;
        font-size: 1rem;
        height: 3rem;
        line-height: 32px;
        outline: 0;
        margin: 0;
        padding: 0 !important;
        width: 120px !important;
    }

        .chips .input:focus {
            border: 0 !important;
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
        }

    .chips .autocomplete-content {
        margin-top: 0;
        margin-bottom: 0;
    }

.prefix ~ .chips {
    margin-left: 3rem;
    width: 92%;
    width: calc(100% - 3rem);
}

.chips:empty ~ label {
    font-size: 0.8rem;
    -webkit-transform: translateY(-140%);
    transform: translateY(-140%);
}

.user-detail {
    position: absolute;
    left: 0;
    top: 0;
    width: 130px;
    height: 130px;
    margin: 0 auto;
    padding: 0;
    background: url("../img/default-user.jpg") center;
    z-index: 0;
    border-radius: 50%;
    border: 1px solid #ccc;
    overflow: hidden;
}

    .user-detail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.refresh-pass {
    position: absolute;
    top: 10px;
    display: inline-block;
    background: #5384ff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    padding: 5px 8px;
    font-size: 17px;
    margin: 15px;
    line-height: 14px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

    .refresh-pass:hover {
        background: #3f51b5;
        color: #fff;
    }

.user-asigned {
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

    .user-asigned .user-asigned-item {
        background-color: #fff;
        line-height: 1.5rem;
        padding: 10px 20px;
        margin: 0;
        /* border-bottom: 1px solid #e0e0e0;*/
    }

        .user-asigned .user-asigned-item.avatar {
            min-height: 64px;
            padding-left: 72px;
            position: relative;
        }

            .user-asigned .user-asigned-item.avatar:not(.circle-clipper) > .circle,
            .user-asigned .user-asigned-item.avatar :not(.circle-clipper) > .circle {
                position: absolute;
                width: 42px;
                height: 42px;
                overflow: hidden;
                left: 15px;
                display: inline-block;
                vertical-align: middle;
            }

            .user-asigned .user-asigned-item.avatar i.circle {
                font-size: 18px;
                line-height: 42px;
                color: #fff;
                background-color: #999;
                text-align: center;
            }

            .user-asigned .user-asigned-item.avatar .title {
                font-size: 16px;
            }

            .user-asigned .user-asigned-item.avatar p {
                margin: 0;
            }

            .user-asigned .user-asigned-item.avatar .secondary-content {
                position: absolute;
                top: 16px;
                right: 16px;
            }

        .user-asigned .user-asigned-item:last-child {
            border-bottom: none;
        }

        .user-asigned .user-asigned-item.active {
            background-color: #26a69a;
            color: #eafaf9;
        }

            .user-asigned .user-asigned-item.active .secondary-content {
                color: #fff;
            }

    .user-asigned a.user-asigned-item {
        display: block;
        -webkit-transition: 0.25s;
        transition: 0.25s;
        color: #26a69a;
    }

        .user-asigned a.user-asigned-item:not(.active):hover {
            background-color: #ddd;
        }

    .user-asigned.with-header .user-asigned-header {
        background-color: #fff;
        border-bottom: 1px solid #e0e0e0;
        padding: 10px 20px;
    }

    .user-asigned.with-header .user-asigned-item {
        padding-left: 30px;
    }

        .user-asigned.with-header .user-asigned-item.avatar {
            padding-left: 72px;
        }

.circle {
    border-radius: 50%;
}

.justification {
    border-radius: 2px;
    background: white;
    color: #454545;
    border: 1px solid #e3e3e3;
    padding: 15px;
    float: left;
    width: 100%;
    max-height: 300px;
    overflow: auto;
}

.overflow-div {
    border-radius: 2px;
    background: white;
    color: #454545;
    border: 1px solid #e3e3e3;
    padding: 15px;
    float: left;
    width: 100%;
    max-height: 450px;
    overflow: auto;
}

/* Switch
         ========================================================================== */

.switch,
.switch * {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .switch label {
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        color: #575757;
    }

        .switch label input[type="checkbox"] {
            opacity: 0;
            width: 0;
            height: 0;
        }

            .switch label input[type="checkbox"]:checked + .lever {
                background-color: #bbdefb;
            }

                .switch label input[type="checkbox"]:checked + .lever:before,
                .switch label input[type="checkbox"]:checked + .lever:after {
                    left: 18px;
                }

                .switch label input[type="checkbox"]:checked + .lever:after {
                    background-color: #5384ff;
                }

        .switch label .lever {
            content: "";
            display: inline-block;
            position: relative;
            width: 36px;
            height: 14px;
            background-color: rgba(0, 0, 0, 0.38);
            border-radius: 15px;
            margin-right: 10px;
            -webkit-transition: background 0.3s ease;
            transition: background 0.3s ease;
            vertical-align: middle;
            margin: 0 16px;
        }

            .switch label .lever:before,
            .switch label .lever:after {
                content: "";
                position: absolute;
                display: inline-block;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                left: 0;
                top: -3px;
                -webkit-transition: left 0.3s ease, background 0.3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
                transition: left 0.3s ease, background 0.3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
                transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease, transform 0.1s ease;
                transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease, transform 0.1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
            }

            .switch label .lever:before {
                background-color: rgba(38, 166, 154, 0.15);
            }

            .switch label .lever:after {
                background-color: #f1f1f1;
                -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
                box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
            }

input[type="checkbox"]:checked:not(:disabled) ~ .lever:active::before,
input[type="checkbox"]:checked:not(:disabled).tabbed:focus ~ .lever::before {
    -webkit-transform: scale(2.4);
    transform: scale(2.4);
    background-color: rgba(38, 166, 154, 0.15);
}

input[type="checkbox"]:not(:disabled) ~ .lever:active:before,
input[type="checkbox"]:not(:disabled).tabbed:focus ~ .lever::before {
    -webkit-transform: scale(2.4);
    transform: scale(2.4);
    background-color: rgba(0, 0, 0, 0.08);
}

.switch input[type="checkbox"][disabled] + .lever {
    cursor: default;
    background-color: rgba(0, 0, 0, 0.12);
}

.switch label input[type="checkbox"][disabled] + .lever:after,
.switch label input[type="checkbox"][disabled]:checked + .lever:after {
    background-color: #949494;
}

/*listado agregar area*/

.dropList.h-140 {
    height: 145px !important;
}

.dropList2 {
    list-style-type: none;
    border: 1px solid #ccc !important;
    border-radius: 2px;
    margin: 0 0 15px 0;
}

    .dropList2 .dropListInt {
        margin: 0;
        padding: 10px;
        width: 100%;
        border-bottom: 1px solid #f2f2f2;
    }

.dropList {
    -moz-user-select: none;
    cursor: default;
    display: block;
    list-style-type: none;
    height: 175px;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    border: 1px solid #ccc !important;
    border-radius: 2px;
    margin: 0 0 15px 0;
}

    .dropList li {
        display: block;
        float: left;
        min-height: 45px;
        margin: 0;
        padding: 10px;
        width: 100%;
        cursor: pointer;
        border-bottom: 1px solid #f2f2f2;
    }

    .dropList.empresa.detail li,
    .dropList.apoderado.detail li {
        cursor: default;
    }

    .dropList li > span {
        float: left;
        padding: 0 0 0 15px;
        margin: 0;
        width: 92%;
    }

    .dropList.empresa li > span,
    .dropList.apoderado li > span {
        float: left;
        padding: 0 0 0 15px;
        margin: 0;
        width: 48%;
        text-align: left;
    }

    .dropList li:hover {
        background: #bbdefb;
    }

    .dropList.empresa.detail li:hover {
        background: #fff;
    }

.selectUserOn {
    background: #bbdefb;
}

    .selectUserOn:before {
        position: absolute;
        font-family: "Material-Design-Iconic-Font";
        content: "\f26b";
        font-style: normal;
        font-weight: normal;
        float: right;
        color: #2196f3;
        font-size: 1.286em;
        right: 15px;
    }

.selectUser input {
    display: none;
}

    .selectUser input:before {
        display: none;
    }

.itemArticulo input:after {
    display: none;
}

.opacity50 {
    opacity: 0.5;
}

/*      ANIMATE      */

@keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }

    75% {
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        transform: translate3d(5px, 0, 0);
    }

    to {
        transform: none;
    }
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }
}

/********************* DROPZONE PARA TODO LO QUE ES USUARIO******************/

.imageControl {
    position: relative;
    width: 130px;
    height: 130px;
    float: left;
    margin: 15px 0 0 15px;
}

    .imageControl .user-dropzone {
        position: absolute;
        left: 0;
        top: 0;
        width: 130px;
        height: 130px !important;
        margin: 0 auto;
        padding: 0;
        background: url("../img/default-user.jpg") center;
        z-index: 0;
        border-radius: 50%;
        border: 1px solid #d4d9e3;
        min-height: 130px !important;
    }

    .imageControl .dz-message {
        position: absolute;
        left: 0;
        top: 0;
        width: 130px;
        height: 130px;
        margin: 0;
        text-align: center;
        z-index: 1;
    }

        .imageControl .dz-message:hover {
            background: rgba(83, 132, 255, 1);
            color: #fff;
            border-radius: 50%;
            -webkit-animation: slide-in 0.5s cubic-bezier(0.77, 0, 0.175, 1);
            -moz-animation: slide-in 0.5s cubic-bezier(0.77, 0, 0.175, 1);
            -ms-animation: slide-in 0.5s cubic-bezier(0.77, 0, 0.175, 1);
            -o-animation: slide-in 0.5s cubic-bezier(0.77, 0, 0.175, 1);
            animation: slide-in 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        }

            .imageControl .dz-message:hover:after {
                content: "arrastre una imagen o haga click";
                position: absolute;
                top: 40%;
                left: 0;
                font-size: 12px;
                font-size: 500;
            }

    .imageControl .dropzone .dz-preview .dz-image {
        position: absolute;
        left: 0;
        top: 0;
        width: 130px;
        height: 130px;
        text-align: center;
        margin: 0;
        z-index: 1;
        overflow: hidden;
        border-radius: 50%;
    }

    .imageControl .dropzone .dz-preview {
        border-radius: 50%;
        height: 130px;
        width: 130px;
        margin: 0;
        position: absolute;
        top: 0;
        left: 0px;
    }

    .imageControl .dz-preview .dz-image img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .imageControl .dropzone .dz-preview:hover {
        z-index: 1000;
    }

        .imageControl .dropzone .dz-preview:hover .dz-details {
            opacity: 1;
        }

    .imageControl .dropzone .dz-preview.dz-file-preview .dz-image {
        border-radius: 5px;
        background: #999;
        background: linear-gradient(to bottom, #eee, #ddd);
    }

    .imageControl .dropzone .dz-preview.dz-file-preview .dz-details {
        opacity: 1;
    }

    .imageControl .dropzone .dz-preview.dz-image-preview {
        background: white;
    }

    .imageControl .dropzone .dz-preview .dz-remove {
        position: absolute;
        top: 150px !important;
        left: 0;
        right: 25%;
        font-size: 14px;
        text-align: center;
        display: block;
        cursor: pointer;
        border: none;
        color: #454545;
    }

        .imageControl .dropzone .dz-preview .dz-remove:before {
            content: "\f135";
            font: normal normal normal 14px/1 "Material-Design-Iconic-Font";
            color: #ccc;
            margin: 0 5px 0 0;
        }

        .imageControl .dropzone .dz-preview .dz-remove:hover {
            text-decoration: underline;
        }

    .imageControl .dropzone .dz-preview:hover .dz-details {
        opacity: 1;
    }

    .imageControl .dropzone .dz-preview .dz-details {
        z-index: 20;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        font-size: 13px;
        min-width: 100%;
        max-width: 100%;
        padding: 2em 1em;
        text-align: center;
        color: rgba(0, 0, 0, 0.9);
        line-height: 150%;
    }

        .imageControl .dropzone .dz-preview .dz-details .dz-size {
            margin-bottom: 1em;
            font-size: 16px;
        }

        .imageControl .dropzone .dz-preview .dz-details .dz-filename {
            white-space: nowrap;
        }

            .imageControl .dropzone .dz-preview .dz-details .dz-filename:hover span {
                border: none;
                background-color: rgba(255, 255, 255, 0.8);
            }

            .imageControl .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
                overflow: hidden;
                text-overflow: ellipsis;
            }

                .imageControl .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
                    border: 1px solid transparent;
                }

            .imageControl .dropzone .dz-preview .dz-details .dz-filename span,
            .imageControl .dropzone .dz-preview .dz-details .dz-size span {
                background-color: rgba(255, 255, 255, 0.4);
                padding: 0 0.4em;
                border-radius: 3px;
            }

    .imageControl .dropzone .dz-preview .dz-image img {
        display: block;
    }

    .imageControl .dropzone .dz-preview .dz-success-mark,
    .imageControl .dropzone .dz-preview .dz-error-mark {
        pointer-events: none;
        opacity: 0;
        z-index: 500;
        position: absolute;
        display: block;
        top: 55%;
        margin: -25px 0 0 -85px;
    }

        .imageControl .dropzone .dz-preview .dz-success-mark svg,
        .imageControl .dropzone .dz-preview .dz-error-mark svg {
            display: block;
            width: 54px;
            height: 54px;
        }

    .imageControl .dropzone .dz-preview .dz-progress {
        /*opacity: 1;*/
        z-index: 1000;
        pointer-events: none;
        position: absolute;
        height: 16px;
        left: 50%;
        top: 50%;
        margin-top: -8px;
        width: 80px;
        margin-left: -40px;
        background: rgba(255, 255, 255, 0.9);
        -webkit-transform: scale(1);
        border-radius: 8px;
        overflow: hidden;
    }

*/ .imageControl .dropzone .dz-preview.dz-error .dz-error-message {
    display: block;
}

.imageControl .dropzone .dz-preview.dz-error:hover .dz-error-message {
    opacity: 1;
    pointer-events: auto;
}

/*
      .imageControl .user-dropzone{
        position: absolute;
        left: 0; top: 0;
        width: 130px; height: 130px;
        margin:0 auto; padding: 0;
        background: url("../img/default-user.jpg") center;
        z-index: 0;
        border-radius: 50%; 
      border: 1px solid #d4d9e3}
      
      .imageControl .dz-message{
        position: absolute;
        left: 0;  top: 0;
        width: 130px;  height: 130px;
        margin: 0;
        text-align: center; z-index: 1; }
      .imageControl .dz-message:hover{
        background: rgba(83,132,255,1);
        color: #fff;
        border-radius: 50%;
        -webkit-animation: slide-in 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        -moz-animation: slide-in 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        -ms-animation: slide-in 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        -o-animation: slide-in 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        animation: slide-in 0.5s cubic-bezier(0.77, 0, 0.175, 1); }
      .imageControl .dz-message:hover:after{
        content: "arrastre una imagen o haga click" ;
        position: absolute;
        top: 40%;
        left: 0;
        font-size: 12px;
        font-size: 500;
      }
      .imageControl .dropzone .dz-preview .dz-image{
        position: absolute;
        left: 0;  top: 0;
        width: 130px;  height: 130px;
        text-align: center;
        margin: 0;
        z-index: 1;
        overflow: hidden; }
      .imageControl .dropzone {
         border: none!important; }
      .imageControl .dropzone .dz-preview {
        border-radius: 50%;
        height: 130px;  width: 130px;
        margin: 0;
        position: absolute;
        top: 0;  left:0px; }
      .imageControl .dz-preview .dz-image img {
        border-radius: 50%;
        width: 100%; }
      .imageControl .dropzone .dz-preview:hover {
        z-index: 1000; }
      .imageControl .dropzone .dz-preview:hover .dz-details {
        opacity: 1; }
      .imageControl .dropzone .dz-preview.dz-file-preview .dz-image {
        border-radius: 5px;
        background: #999;
        background: linear-gradient(to bottom, #eee, #ddd); }
      .imageControl. .dropzone .dz-preview.dz-file-preview .dz-details {
        opacity: 1; }
      .imageControl .dropzone .dz-preview.dz-image-preview {
        background: white; }    
      .imageControl .dropzone .dz-preview .dz-remove {    
        position:absolute;
        top:150px!important;
        left: 25%; right:25%;
        font-size: 14px;
        text-align: center;
        display: block;
        cursor: pointer;
        border: none;
        color: #454545;
      } 
      .imageControl .dropzone .dz-preview .dz-remove:before {    
        content: '\f135';
        font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
        color: #ccc;
        margin: 0 5px 0 0;
      }    
      .imageControl .dropzone .dz-preview .dz-remove:hover {
        text-decoration: underline; }
      .imageControl .dropzone .dz-preview:hover .dz-details {
        opacity: 1; }
      .imageControl .dropzone .dz-preview .dz-details {
        z-index: 20;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        font-size: 13px;
        min-width: 100%;
        max-width: 100%;
        padding: 2em 1em;
        text-align: center;
        color: rgba(0, 0, 0, 0.9);
        line-height: 150%; }   
       .imageControl .dropzone .dz-preview .dz-details .dz-size {
        margin-bottom: 1em;
        font-size: 16px; }
      .imageControl .dropzone .dz-preview .dz-details .dz-filename {
        white-space: nowrap; }
      .imageControl .dropzone .dz-preview .dz-details .dz-filename:hover span {
        border:none;
        background-color: rgba(255, 255, 255, 0.8); }
      .imageControl .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
        overflow: hidden;
        text-overflow: ellipsis; }
      .imageControl .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
        border: 1px solid transparent; }
      .imageControl .dropzone .dz-preview .dz-details .dz-filename span,
      .imageControl .dropzone .dz-preview .dz-details .dz-size span {
        background-color: rgba(255, 255, 255, 0.4);
        padding: 0 0.4em;
        border-radius: 3px; }
      .imageControl .dropzone .dz-preview .dz-image img {
        display: block; }    
      .imageControl .dropzone .dz-preview .dz-success-mark,
      .imageControl .dropzone .dz-preview .dz-error-mark {
        pointer-events: none;
        opacity: 0;
        z-index: 500;
        position: absolute;
        display: block;
        top: 55%;
        margin: -25px 0 0 -85px;}
      .imageControl .dropzone .dz-preview .dz-success-mark svg,
      .imageControl .dropzone .dz-preview .dz-error-mark svg {
        display: block;
        width: 54px;
        height: 54px; }
      .imageControl .dropzone .dz-preview .dz-progress {
        opacity: 1;
        z-index: 1000;
        pointer-events: none;
        position: absolute;
        height: 16px;
        left: 50%;  top: 50%;
        margin-top: -8px;
        width: 80px;
        margin-left: -40px;
        background: rgba(255, 255, 255, 0.9);
        -webkit-transform: scale(1);
        border-radius: 8px;  overflow: hidden; }
      
      .imageControl .dropzone .dz-preview.dz-error .dz-error-message {
        display: block; }
      .imageControl .dropzone .dz-preview.dz-error:hover .dz-error-message {
        opacity: 1;
        pointer-events: auto; }
      
      
      .dropzone1{
        float:left; display:block;
        width:100%; height:auto;
        margin:0; padding:0;  
        min-height: 70px!important }
      .dropzone1 .drag-and-drop div span{
        display:block;
        width:100%; height:auto;
        margin:0; padding:0;
        text-align:center;
        white-space:normal; }
      .dropzone1 .dz-message{
        float:left; display:block;
        width:100%; height:auto;
        margin:0; padding:0;
        text-align:center;}
      .dropzone1 .dz-preview{
        padding:10px 0;
        width: 100%; 
        display: block;}
      .dropzone1 .dz-preview .dz-details{
        opacity: 1;
        margin: 0;
        padding: 15px;}
      .dropzone1 .dz-preview, .dropzone1 .dz-details, .dropzone1 .dz-filename, .dropzone1 .dz-size,
      .dropzone1 .dz-success-mark, .dropzone1 .dz-error-mark{
        float:left!important;
        height:auto;
        margin:0; padding:0;}
      .dropzone1 .dz-filename{
        max-width:50%;
         white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;}
      .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark{
        top: 50%;
        left: 95%!important;}
      .dropzone1 .dz-default{
        margin-top:10px;
        padding:15px 2%;}
      .dropzone1 .dz-preview.dz-error .dz-error-message {
        opacity: 1;
        color:red; 
        background: none; 
        top: 75px;
        left: 10px;
        width: auto;
        background-color: red;
        color:#fff;
        border-radius:2px; 
        margin:5px;}
      .dropzone .dz-preview .dz-error-message:after { content: '';  border: none; }
      .dropzone1 .dz-default:hover{
        cursor:pointer;
        border-color:#348b7a; }
      .dropzone1 .dz-preview .dz-success-mark svg{
          width: 20px;
          height: 35px;}
      .dropzone1 .dz-preview .dz-error-mark svg{display: none}
      .alert-success{  background-color: #689F38 ; color: #ffffff ;}
      .alert-danger{  background-color: #F44336 ; color: #ffffff ;}
      
      .dropzone  .thmub.thumb-preview-ok img,
      .dropzone  .thmub.thumb-preview-ok img{
        width: 50%;
        margin: 0 25% 25% 25%;
      }
      
      
      
      .dropzone.licence .thumb.thumb-preview-nolicence img{
        width: 50%;
        margin: 0 25% 10% 25%;
      }*/

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

/*
       * Hide visually and from screen readers:
       */

.text-center {
    text-align: center;
}

.text-start {
    text-align: start;
}

.text-end {
    text-align: end;
}

.text-center.middle {
    margin: 60px 0 0 0;
}

    .text-center.middle i {
        font-size: 30px;
    }

.txt-ellipsis {
    float: left;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
    margin: 0;
}

.txt-break {
    word-break: break-all;
    max-width: 450px;
}

.nomargin {
    margin: 0;
}

.nopadding {
    padding: 0 !important;
}

.left {
    float: left;
}

.txt-left {
    text-align: left;
}

.right {
    float: right !important;
}

.right15 {
    float: right !important;
    margin: 0 0 0 15px;
}

.hidden {
    display: none !important;
    transition: all 0.5s ease-out;
}

.block {
    display: block !important;
}

.block-in {
    display: inline-block !important;
}

.half {
    width: 50%;
    float: left;
}

.noscriptms {
}

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

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    transition: all 0.5s ease-out;
}

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

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

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

.invisible {
    visibility: hidden;
}

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

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

.clearfix:after {
    clear: both;
}

.clear {
    clear: both;
}

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

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

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

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */

@media only screen and (min-width: 320px) {
    .header figure img {
        width: 100%;
    }

    .panel-indicador .idr-title,
    .idr-title {
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 0.02em;
        float: left;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Extra Small Devices, Phones */

@media only screen and (min-width: 480px) {
}

/* Small Devices, Tablets */

@media only screen and (min-width: 768px) {
    .header figure img {
        width: 90%;
    }
}

/* Medium Devices, Desktops */

@media only screen and (min-width: 992px) {
    aside .scroll {
        max-height: 500px;
    }
}

/* Large Devices, Wide Screens */

@media only screen and (min-width: 1200px) {
    .header figure img {
        width: 90%;
    }

    .span-TotalesCardsTramites {
        font-size: 16px !important;
    }

    .span-DatosCardsTramites {
        font-size: 12px !important;
    }

    .icono-CardsDatosTramites {
        font-size: 24px !important;
    }

    .margen-CardErroresTramites {
        margin-right: 15px !important;
    }

    .d-CardEstadistica {
        display: none !important;
    }

    .d-CardsDatosTramites {
        display: flex !important;
        flex-direction: column;
    }

    .p-CardDatosTramites {
        padding: 10px !important;
        margin-bottom: 10px;
    }

    .p-CardEstadisticasTramites {
        padding: 15px !important;
    }

    .m-CardsDatosTramites {
        margin-right: 30px !important;
    }

    .pEmail {
        display: none;
    }

    .mr-listadoPagos {
        margin-right: 7px !important;
    }

    .t-cVencidas {
        font-size: 12px !important;
    }

    .t-cardPM {
        font-size: 12px !important;
    }

    .t-hCardPM {
        font-size: 14px !important;
    }
}

/* Large Devices, Wide Screens */

@media only screen and (min-width: 1366px) {
    .header figure img {
        width: 75%;
    }

    .userfig {
        width: 8em;
        height: 8em;
    }

    aside .scroll {
        max-height: 600px;
    }

    .line-ChartConsultas {
        width: 375px !important;
        height: 100px !important;
    }

    .bar-ChartVelocidadConsultas {
        width: 250px !important;
        height: 100px !important;
    }

    .txt-Parametros {
        max-width: 400px;
        word-break: break-all;
        overflow-wrap: break-word;
        margin: 0;
    }

    .txt-valorParametros {
        max-width: 120px;
        word-break: break-all;
        overflow-wrap: break-word;
        margin: 0;
    }

    .txt-notasRealizadas {
        max-width: 270px;
        word-wrap: break-word;
    }
}

/* Large Devices, Wide Screens */

@media only screen and (min-width: 1600px) {
    html,
    body {
        font-size: 100% !important;
    }

    .header figure img {
        width: 60%;
    }

    .userfig {
        width: 8em;
        height: 8em;
    }

    aside .scroll {
        max-height: 700px;
    }

    .line-ChartConsultas {
        width: 650px !important;
        height: 100px !important;
    }

    .bar-ChartVelocidadConsultas {
        width: 300px !important;
        height: 100px !important;
    }

    .span-TotalesCardsTramites {
        font-size: 18px !important;
    }

    .span-DatosCardsTramites {
        font-size: 12px !important;
    }

    .margen-CardErroresTramites {
        margin-right: 20px !important;
    }

    .d-CardEstadistica {
        display: flex !important;
    }

    .icono-CardsDatosTramites {
        font-size: 30px !important;
    }

    .d-CardsDatosTramites {
        flex-direction: row !important;
    }

    .p-CardDatosTramites {
        padding: 15px !important;
    }

    .p-CardEstadisticasTramites {
        padding: 20px !important;
    }

    .d-TextBotonEstadisitca {
        display: none !important;
    }

    .m-CardsDatosTramites {
        margin-right: 0px !important;
    }

    .txt-Parametros {
        max-width: 570px;
        word-break: break-all;
        overflow-wrap: break-word;
        margin: 0;
    }

    .pEmail {
        display: block;
    }

    .mr-listadoPagos {
        margin-right: 20px !important;
    }

    .t-cVencidas {
        font-size: 14px !important;
    }

    .t-cardPM {
        font-size: 14px !important;
    }

    .t-hCardPM {
        font-size: 18px !important;
    }

    .txt-notasRealizadas {
        max-width: 470px;
        word-wrap: break-word;
    }
}

/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */

@media only screen and (max-width: 1600px) {
    .bs-component {
        width: 23%;
    }
}

/* Large Devices, Wide Screens */

@media only screen and (max-width: 1366px) {
    .foot-pager .btn-group .btn,
    .pagination {
        height: 30px;
        font-size: 12px !important;
    }

    .page {
        margin: 10px;
        height: auto;
        font-size: 12px !important;
    }

    .foot-pager .dropup .btn {
        margin: 0px 0px 0px 15px !important;
        border-radius: 2px !important;
    }

    .left-open {
        background: none repeat scroll 0 0 #0e1a35;
        top: 0;
        left: 0;
        height: 100% !important;
        position: fixed;
        text-align: center;
        transition: all 0.1s ease 0s;
        width: 18%;
        z-index: 8888;
        display: fixed;
    }

    .right-open {
        position: absolute;
        width: 100%;
        left: 18%;
        padding: 0 0 2% 0;
    }

    a:hover .panel-indicador:before {
        font-size: 14px;
        left: 15%;
    }

    .panel-indicador a:hover .panel-body:before {
        top: 20%;
    }

    .panel-indicador {
        min-height: 120px;
        display: inline-block;
        overflow: hidden;
    }

        .panel-indicador:hover {
            filter: grayscale(100%);
            background: #f2f2f2;
        }

        .panel-indicador .panel-heading {
            position: relative;
            height: 35px;
            padding: 10px;
            color: #fff;
            border: none;
            text-overflow: ellipsis;
        }

        .panel-indicador .idr-title,
        .idr-title {
            text-transform: uppercase;
            font-size: 14px;
            letter-spacing: 0.02em;
            float: left;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .panel-indicador .idr-total small {
            font-weight: 400;
            display: inline;
            font-size: 50%;
            opacity: 0.5;
        }

        .panel-indicador .panel-body {
            height: 70px;
        }

        .panel-indicador.height .panel-body {
            height: 200px !important;
        }

        .panel-indicador .idr-total {
            font-size: 40px !important;
            padding-bottom: 0px;
            margin: 10px 0 0 0;
        }

    .view-more {
        position: absolute;
        text-decoration: none;
        right: 15px;
        bottom: 22px;
    }

        .view-more:hover {
            text-decoration: none !important;
            opacity: 0.75;
        }

    #canvas-holder {
        float: left;
        margin: 30px 0;
    }

    .canvas-reference {
        margin: 20px 0 0 0;
        font-size: 12px;
    }

    .wizardback,
    .preload-card-full {
        padding: 0 15px;
        width: 90% !important;
        float: left;
    }

    .wizardback-feed {
        width: 90% !important;
        float: left;
    }

    .panel-slide-out {
        position: absolute;
        top: 20px;
        right: 45px;
        width: 460px !important;
        transition: transform 0.25s cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 0.25s cubic-bezier(0.694, 0.0482, 0.335, 1);
        transform: translateX(550px);
        -webkit-transform: translate3d(550px, 0, 0);
        transform: translate3d(550px, 0, 0);
        will-change: transform;
    }

    .wizardback {
        transition: transform 0.25s cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-transform 0.25s cubic-bezier(0.694, 0.0482, 0.335, 1);
    }

    .panel-open .wizardback,
    .panel-open .aside-wizard.panel-slide-down {
        transform: translateX(-375px);
        -webkit-transform: translate3d(-375px, 0, 0);
        transform: translate3d(-375px, 0, 0);
    }

    .panel-open .panel-slide-out {
        transform: translateX(0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .aside-wizard.panel-slide-down {
        transition: none;
        transform: none;
        -webkit-transform: none;
        transform: none;
    }

    .aside-wizard,
    /*.aside-wizard-history,*/
    .aside-wizard.panel-slide-down {
        position: static;
        padding: 0 15px;
        width: 90% !important;
        float: left;
    }

        .aside-wizard .off-col-1 {
            padding: 0 15px;
            width: 33.33333333%;
            position: relative;
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
            float: left;
        }

        .aside-wizard .off-col-2 {
            padding: 0 15px;
            width: 16.66666667%;
            position: relative;
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
            float: left;
        }

        .aside-wizard .off-col-3 {
            padding: 0 15px;
            width: 50%;
            position: relative;
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
            float: left;
        }

    .results .bs-component,
    .bs-component {
        position: relative;
        display: block;
        height: 100%;
        width: 23.2%;
        min-width: 200px;
    }

    .list-items .bs-component .list-group a {
        width: 95%;
    }

    .historial {
        float: left;
        width: 100%;
        max-height: 300px;
        overflow: auto;
    }

    .panel-infractor .panel-body {
        height: 250px !important;
    }

    .panel-infractor.auto .panel-body {
        height: auto !important;
        margin-bottom: 15px;
    }

    .preview-dwnld a span.p {
        width: 30%;
    }
}

/* Large Devices, Wide Screens */

@media only screen and (max-width: 1280px) {
    html,
    body {
        font-size: 85% !important;
    }

    .wizardback,
    .wizardback-feed {
        width: 100% !important;
    }
}

/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {
}

/* Small Devices, Tablets */

@media only screen and (max-width: 768px) {
}

/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {
}

/* Custom, iPhone Retina */

@media only screen and (max-width: 320px) {
}

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

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

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

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

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

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

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

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

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

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

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

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

/*
      Animate.css - http://daneden.me/animate
      Licensed under the ☺ license (http://licence.visualidiot.com/)
      
      Copyright (c) 2012 Dan Eden*/

.animated {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
    }
}

@-moz-keyframes shake {
    0%, 100% {
        -moz-transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        -moz-transform: translateX(-10px);
    }

    20%, 40%, 60%, 80% {
        -moz-transform: translateX(10px);
    }
}

@-o-keyframes shake {
    0%, 100% {
        -o-transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        -o-transform: translateX(-10px);
    }

    20%, 40%, 60%, 80% {
        -o-transform: translateX(10px);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

.shake {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
}

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

/* animate plug */

/*!
      Animate.css - http://daneden.me/animate
      Licensed under the MIT license - http://opensource.org/licenses/MIT
      
      Copyright (c) 2015 Daniel Eden
      */

@-webkit-keyframes bounce {
    from, 20%, 53%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounce {
    from, 20%, 53%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

@-webkit-keyframes flash {
    from, 50%, to {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

@keyframes flash {
    from, 50%, to {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

@-webkit-keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes rubberBand {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
}

@-webkit-keyframes shake {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

@keyframes shake {
    from, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
}

@-webkit-keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg);
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg);
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.headShake {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: headShake;
    animation-name: headShake;
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

@-webkit-keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes tada {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes wobble {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}

@-webkit-keyframes jello {
    from, 11.1%, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg);
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }

    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }

    77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }

    88.8% {
        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}

@keyframes jello {
    from, 11.1%, to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg);
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg);
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg);
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg);
    }

    66.6% {
        -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
        transform: skewX(-0.78125deg) skewY(-0.78125deg);
    }

    77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg);
    }

    88.8% {
        -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
        transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    }
}

.jello {
    -webkit-animation-name: jello;
    animation-name: jello;
    -webkit-transform-origin: center;
    transform-origin: center;
}

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

    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

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

    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

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

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

    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

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

    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

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

.heartBeat {
    -webkit-animation-name: heartBeat;
    animation-name: heartBeat;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInRight {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInUp {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
}

.bounceOut {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDownBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeftBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRightBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUpBig {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

@keyframes fadeOutDownBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0);
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

@keyframes fadeOutLeftBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0);
    }
}

.fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

@keyframes fadeOutRightBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
}

.fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

@keyframes fadeOutUpBig {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0);
    }
}

.fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
    from {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    to {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

@keyframes flip {
    from {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    to {
        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
}

@-webkit-keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInX {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
}

@-webkit-keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes flipInY {
    from {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

.flipOutX {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

@keyframes flipOutY {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    to {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

.flipOutY {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
    from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes lightSpeedIn {
    from {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
    from {
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

@keyframes lightSpeedOut {
    from {
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes rotateInDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes rotateInDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes rotateInUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes rotateInUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}

@keyframes rotateOut {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}

.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
}

@keyframes rotateOutDownLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
}

.rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

@keyframes rotateOutDownRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

.rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

@keyframes rotateOutUpLeft {
    from {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

.rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0;
    }
}

@keyframes rotateOutUpRight {
    from {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0;
    }
}

.rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    20%, 60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    40%, 80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}

@keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    20%, 60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    40%, 80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}

.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-name: hinge;
    animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes jackInTheBox {
    from {
        opacity: 0;
        -webkit-transform: scale(0.1) rotate(30deg);
        transform: scale(0.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.jackInTheBox {
    -webkit-animation-name: jackInTheBox;
    animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes rollIn {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
}

@keyframes rollOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInDown {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInLeft {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInRight {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomInUp {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
        opacity: 0;
    }
}

@keyframes zoomOut {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
        opacity: 0;
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomOutDown {
    -webkit-animation-name: zoomOutDown;
    animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
        transform: scale(0.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
        transform: scale(0.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
}

.zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
        transform: scale(0.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center;
    }
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
        transform: scale(0.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center;
    }
}

.zoomOutRight {
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomOutUp {
    -webkit-animation-name: zoomOutUp;
    animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

@keyframes slideOutDown {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes slideOutRight {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

    .animated.infinite {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    .animated.delay-1s {
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
    }

    .animated.delay-2s {
        -webkit-animation-delay: 2s;
        animation-delay: 2s;
    }

    .animated.delay-3s {
        -webkit-animation-delay: 3s;
        animation-delay: 3s;
    }

    .animated.delay-4s {
        -webkit-animation-delay: 4s;
        animation-delay: 4s;
    }

    .animated.delay-5s {
        -webkit-animation-delay: 5s;
        animation-delay: 5s;
    }

    .animated.fast {
        -webkit-animation-duration: 800ms;
        animation-duration: 800ms;
    }

    .animated.faster {
        -webkit-animation-duration: 500ms;
        animation-duration: 500ms;
    }

    .animated.slow {
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
    }

    .animated.slower {
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
    }

@media (prefers-reduced-motion) {
    .animated {
        -webkit-animation: unset !important;
        animation: unset !important;
        -webkit-transition: none !important;
        transition: none !important;
    }
}

.b-darkestblue .item-label,
.b-darkestblue .item-detail {
    color: #fff !important;
}

.b-red .item-label,
.b-red .item-detail {
    color: #fff !important;
}

/*validacion biometria*******/

.invalidBiometric {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 150;
    background: rgba(221, 141, 141, 0.9);
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-out;
}

.num-version {
    position: absolute;
    bottom: 66px;
    font-size: 11px;
    right: -37px;
    transform: rotate(90deg);
    color: rgb(146, 146, 146);
}

.h-400 {
    min-height: 400px;
}

.huella-tomada-img {
    margin-top: 25px;
    position: absolute;
    bottom: 38px;
    left: 400px;
    width: 50%;
}

    .huella-tomada-img img {
    }

    .huella-tomada-img p {
        position: absolute;
        bottom: 0px;
        left: 100px;
        font-size: 12px;
    }

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

/*=============================
       ESTADÍSTICAS
       ============================*/

.panel-header-estad {
    height: 310px !important;
    padding-top: 80px;
    padding-bottom: 45px;
    background: #141e30;
    /* fallback for old browsers */
    background: -webkit-gradient( linear, left top, right top, from(#0c2646), color-stop(60%, #204065), to(#2a5788) );
    background: linear-gradient(to right, #0c2646 0%, #204065 60%, #2a5788 100%);
    position: relative;
    overflow: hidden;
}

    .panel-header-estad .header .title {
        color: #ffffff;
    }

    .panel-header-estad .header .category {
        max-width: 600px;
        color: rgba(255, 255, 255, 0.5);
        margin: 0 auto;
        font-size: 13px;
    }

        .panel-header-estad .header .category a {
            color: #ffffff;
        }

.panel-header-sm {
    height: 135px;
}

.panel-header-lg {
    height: 345px;
}

.panel-header-xlg {
    height: 400px !important;
}

.panel-header-xxlg {
    height: 450px !important;
}

.title-estadisticas {
    text-transform: uppercase;
    font-size: 0.8571em;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    line-height: 1.625rem;
    display: inline-block;
    float: left;
    margin: 0px;
}

/*text text*/
a.text-white:hover {
    color: rgba(255, 255, 255, 0.5) !important;
}

.text-white {
    color: #fff !important;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

.text-blue {
    color: #5384ff;
}

.text-c-red {
    color: #eb212e;
}

.text-c-green {
    color: #00a86b;
}

.text-black {
    color: #000000 !important;
}

.text-c-01 {
    color: #757474;
}

.text-c-02 {
    color: #414141;
}

.text-c-03 {
    color: #8f9094;
}

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

.text-normal {
    font-weight: normal !important;
}

.text-orange {
    color: #e6ae35;
}

.text-violet {
    color: #8950fc !important;
}

/*tamaño de textos*/
.text-20 {
    font-size: 20px !important;
}

.text-22 {
    font-size: 22px !important;
}

.text-24 {
    font-size: 24px !important;
}

.text-25 {
    font-size: 25px !important;
}

.text-18 {
    font-size: 18px !important;
}

.text-16 {
    font-size: 16px !important;
}

.text-15 {
    font-size: 15px !important;
}

.text-14 {
    font-size: 14px !important;
}

.text-13 {
    font-size: 13px !important;
}

.text-35 {
    font-size: 35px !important;
}

.text-30 {
    font-size: 30px !important;
}

.text-40 {
    font-size: 40px !important;
}

.text-100 {
    font-size: 100px !important;
}

.text-70 {
    font-size: 70px !important;
}

.text-sm {
    font-size: 10px;
}

.text-12 {
    font-size: 12px !important;
}

.text-11 {
    font-size: 11px !important;
}

.text-10 {
    font-size: 10px !important;
}

.text-50 {
    font-size: 50px !important;
}

/*************
 weight tamaños
 ************/
.fw-100 {
    font-weight: 100;
}

.fw-200 {
    font-weight: 200;
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.text-upp {
    text-transform: uppercase;
}

.text-ellipsis-250 {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lh-normal {
    line-height: normal !important;
}

.title-top {
    background-color: transparent !important;
    box-shadow: none;
    color: #ffffff;
    position: absolute;
    width: 100%;
    padding-top: 10px;
    z-index: 1029;
}

.dropdown.dropdown-estadisticas .month {
    text-transform: uppercase;
    font-size: 0.7142em;
    padding: 0.5rem 0.7rem;
    line-height: 1.625rem;
    margin-right: 3px;
    cursor: pointer;
}

/*
   .dropdown-toggle::after {
       display: inline-block;
       margin-left: .255em;
       vertical-align: .255em;
       content: "";
       border-top: .3em solid;
       border-right: .3em solid transparent;
       border-bottom: 0;
       border-left: .3em solid transparent;
       color: #fff;
   }
   */

.btn-more:after {
    display: none;
}

.btn-more-options {
    font-size: 25px;
    color: #333;
    margin: 0px;
}

ul.dropdown-moreoption li a {
    padding: 10px 15px !important;
}

.select-month {
    float: right;
}

.now-ui-icons {
    display: inline-block;
    font-size: inherit;
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    position: relative;
    top: 3px;
    text-align: center;
    width: 21px;
    color: #fff;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-estadisticas {
    position: relative;
}

.dropdown-menu-est {
    left: -120px;
}

.main-panel > .content {
    padding: 0 30px 30px;
    /*min-height: calc(100vh - 123px);*/
    margin-top: -30px;
}

.main-panel > .content-feriado {
    padding: 0 30px 30px;
    min-height: calc(100vh - 123px);
    margin-top: -290px;
}

.main-panel.content {
    padding: 0 30px 30px;
    /*min-height: calc(100vh - 123px);*/
    margin-top: -30px;
}

.main-panel.content-feriado {
    padding: 0 30px 30px;
    min-height: calc(100vh - 123px);
    margin-top: -290px;
}

/*******calendar bootstrap*****************/

#calendar {
    min-height: 500px;
}

.calendar .month-container {
    min-width: 180px;
    text-align: center;
    height: 240px;
    padding: 6px;
}

.calendar table.month th.month-title {
    font-size: 13px;
    padding-bottom: 15px;
}

.calendar table.month th.day-header {
    font-size: 12px;
}

/*.calendar-ds .row,*/

.calendar-col,
.calendar-col .panel {
    min-height: 100%;
    height: auto;
}

    .calendar-col .panel {
        margin: 0;
    }

.calendar-ds #calendar {
    max-width: 100%;
    margin: 0 auto;
}

.calendar-ds .calendar-col--reference .h5 {
    font-weight: 500;
}

.fc-button {
    color: #fff !important;
    border: none !important;
    background: #5384ff !important;
    transition: all 0.5s ease-out;
}

.fc-state-active {
    background: #2d4786 !important;
}

.fc-event,
.fc-event:hover,
.ui-widget .fc-event {
    color: #000;
}

.content-p-stock {
    padding: 0 30px 30px;
    /*min-height: calc(100vh - 123px);*/
    margin-top: -30px;
}

.card-varios {
    border: 0;
    border-radius: 0.1875rem;
    display: inline-block;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    box-shadow: 0 1px 15px 1px rgba(39, 39, 39, 0.1);
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
}

    .card-varios .card-header {
        padding: 15px 15px 0;
        border: 0;
    }

    .card-varios .card-body {
        padding: 15px;
        border: 0;
        position: relative;
    }

    .card-varios .card-title {
        margin: 0px;
    }

    .card-varios .card-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .card-varios p {
        font-size: 14px;
    }

.card-chart {
    border: 0;
    border-radius: 0.1875rem;
    display: inline-block;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    box-shadow: 0 1px 15px 1px rgba(39, 39, 39, 0.1);
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    min-height: 495px;
}

    .card-chart .card-header {
        padding: 15px 15px 0;
        border: 0;
    }

    .card-chart .card-body {
        padding: 15px;
        border: 0;
        position: relative;
    }

    .card-chart .card-title {
        margin: 0px;
    }

    .card-chart .card-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .card-chart p {
        font-size: 14px;
    }

.chart-area {
    position: relative;
    margin: auto;
}

.table-user-est > thead > tr > th {
    border-bottom-width: 1px;
    font-size: 1.45em;
    font-weight: 300;
    border: 0;
}

.table-user-est > thead > tr > th,
.tabtable-user-estle > tbody > tr > th,
.table-user-est > tfoot > tr > th,
.table-user-est > thead > tr > td,
.table-user-est > tbody > tr > td,
.table-user-est > tfoot > tr > td {
    padding: 12px 7px;
    vertical-align: middle;
}

.table-user-est .th-description {
    max-width: 150px;
}

.table-user-est .td-price {
    font-size: 26px;
    font-weight: 300;
    margin-top: 5px;
    position: relative;
    top: 4px;
    text-align: right;
}

.table-user-est .td-total {
    font-weight: 700;
    font-size: 1.57em;
    padding-top: 20px;
    text-align: right;
}

.table-user-est .td-actions .btn {
    margin: 0px;
}

.table-user-est > tbody > tr {
    position: relative;
}

.table-responsive {
    overflow: auto;
    padding-bottom: 10px;
}

.table-est {
    height: 412px;
    position: relative;
    overflow: auto;
}

.table-user-est {
    box-shadow: none;
    border-collapse: separate;
    border-color: 0px;
}

    .table-user-est > thead > tr > th,
    .table-user-est > tbody > tr > th,
    .table-user-est > tfoot > tr > th,
    .table-user-est > thead > tr > td {
        border: 0px !important;
    }

    .table-user-est thead {
        background: #fff;
    }

.user-avatar-table {
    height: 60px;
    width: 60px;
    border-radius: 50% !important;
    overflow: hidden;
    float: left;
    border: #d4d9e3 1px solid;
}

    .user-avatar-table img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.date-juz i {
    font-size: 20px;
    color: #2a5788;
}

/***** flex************/

.justify-content-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}

.justify-content-spacearound {
    -ms-flex-pack: justify !important;
    justify-content: space-around !important;
}

.justify-content-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.align-content-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
}

.align-items-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

.flex-lg-fill {
    flex: 1 1 auto !important;
}

.align-items-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
}

.align-items-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.d-flex {
    display: -ms-flexbox !important;
    display: flex !important;
}

.flex-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}

.flex-grow-1 {
    -webkit-box-flex: 1 !important;
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
}

.rounded {
    border-radius: 0.42rem !important;
}

/*/////////////margenes////////*/

.m-0 {
    margin: 0px !important;
}

.m-20 {
    margin: 20px !important;
}

.m-10 {
    margin: 10px !important;
}

.m-15 {
    margin: 15px !important;
}

/* margin bottom*/
.mb-8 {
    margin-bottom: 8px !important;
}

.mb-5 {
    margin-bottom: 5px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-18 {
    margin-bottom: 18px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-0 {
    margin-bottom: 0px;
}

/*margin top*/
.mt-5 {
    margin-top: 5px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-45 {
    margin-top: 45px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-18 {
    margin-top: 18px !important;
}

.mt-25 {
    margin-top: 25px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-12 {
    margin-top: 12px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-35 {
    margin-top: 35px !important;
}

.mt-8 {
    margin-top: 8px !important;
}

.mt-0 {
    margin-top: 0px !important;
}

/*margin right*/
.mr-5 {
    margin-right: 5px !important;
}

.mr-8 {
    margin-right: 8px !important;
}

.mr-10 {
    margin-right: 10px !important;
}

.mr-15 {
    margin-right: 15px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.mr-30 {
    margin-right: 30px !important;
}

.mr-50 {
    margin-right: 50px !important;
}

.mr-85 {
    margin-right: 85px !important;
}

.mr-370 {
    margin-right: 350px !important;
}

/*margin left*/
.ml-20 {
    margin-left: 20px !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.ml-15 {
    margin-left: 15px !important;
}

.ml-5 {
    margin-left: 5px !important;
}

.ml-30 {
    margin-left: 30px;
}

/*******padding*/

.p-0 {
    padding: 0px !important;
}

.p-5 {
    padding: 5px !important;
}

.p-7 {
    padding: 7px !important;
}

.p-10 {
    padding: 10px !important;
}

.p-15 {
    padding: 15px !important;
}

.p-20 {
    padding: 20px !important;
}

.p-25 {
    padding: 25px;
}

.p-20 {
    padding: 20px;
}

.p-30 {
    padding: 30px !important;
}

.p-40 {
    padding: 40px !important;
}

/*padding-bottom*/

.pb-5 {
    padding-bottom: 5px !important;
}

.pb-10 {
    padding-bottom: 10px !important;
}

.pb-15 {
    padding-bottom: 15px !important;
}

.pb-20 {
    padding-bottom: 20px;
}

/* padding-top*/

.pt-50 {
    padding-top: 50px;
}

.pt-5 {
    padding-top: 5px !important;
}

.pt-10 {
    padding-top: 10px !important;
}

.pt-15 {
    padding-top: 15px !important;
}

.pt-20 {
    padding-top: 20px !important;
}

.pt-30 {
    padding-top: 30px !important;
}

.pt-0 {
    padding-top: 0px;
}

.pb-5 {
    padding-bottom: 5px;
}

/* padding-right*/
.pr-0 {
    padding-right: 0px !important;
}

.pr-10 {
    padding-right: 10px !important;
}

.pr-15 {
    padding-right: 15px !important;
}

.pr-50 {
    padding-right: 50px;
}

.pr-30 {
    padding-right: 30px;
}

.pr-20 {
    padding-right: 20px !important;
}

/* padding-left*/
.pl-0 {
    padding-left: 0px !important;
}

.pl-10 {
    padding-left: 10px !important;
}

.pl-15 {
    padding-left: 15px !important;
}

.pl-20 {
    padding-left: 20px !important;
}

.pl-25 {
    padding-left: 25px !important;
}

.pr-20 {
    padding-left: 20px !important;
}

.pl-30 {
    padding-left: 30px;
}

.px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.px-5 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.px-6 {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.px-30 {
    padding-left: 30px;
    padding-right: 30px;
}

.py-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.px-15 {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.px-20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.px-30 {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.py-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.d-block {
    display: block;
}

.d-inline-block {
    display: inline-block;
}

.d-none {
    display: none !important;
}

.d-table {
    display: table !important;
}

.small {
    font-size: 12px !important;
}

.small-10 {
    font-size: 10px !important;
}

.p-relative {
    position: relative;
}

.kt-font-success {
    color: #1dc9b7 !important;
}

.scroll {
    overflow-y: visible;
    overflow-x: hidden;
}

/*********border border border*****************/
.bo-01 {
    border: 1px solid #ccc;
}

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

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

.bo-3 {
    border-right: 1px solid #ccc;
}

.bo-4 {
    border-bottom: 1px solid #ccc;
}

.bot-0 {
    border-top: 0px !important;
}

.border-grey {
    border: 1px solid #dbdbdb;
}

    .border-grey .panel-heading {
        background: #fff;
        border-bottom: 1px solid #dbdbdb;
    }

.bo-0 {
    border: none !important;
}

.bo-radius-3 {
    border-radius: 3px;
}

.bo-radius-4 {
    border-radius: 4px;
}

.bo-radius-5 {
    border-radius: 5px;
}

.bo-radius-10 {
    border-radius: 10px;
}

/* fondos fondos*/

.bg-grey {
    background: #f2f2f2;
}

.bg-05 {
    background: #e63712;
}

.bg-06 {
    background: #fbbd4c;
}

.bg-c-blue {
    background: #4099ff !important;
}

.bg-c-black {
    background: #222 !important;
}

.bg-white {
    background: #fff;
}

.bg-light-info {
    background-color: #5384ff !important;
}

.bg-blue-default {
    background-color: #4164c2 !important;
}

.bg-blue-default-dark {
    background-color: #2c4b91 !important;
}

.bg-dark {
    background-color: #212529 !important;
}

.bg-purple-info {
    background: #a564e2;
}

.bg-transparent {
    background-color: transparent !important;
}

/*============================================
LISTADOS
=============================================*/

.listado-230 {
    overflow: hidden;
    height: 230px;
    position: relative;
}

.listado-145 {
    overflow: hidden;
    height: 145px;
    position: relative;
}

.listado-215 {
    overflow: hidden;
    height: 215px;
    position: relative;
}

.listado-250 {
    overflow: hidden;
    height: 250px;
    position: relative;
}

.listado-450 {
    overflow: hidden;
    height: 450px;
    position: relative;
}

.listado-resolucion-head {
    display: table;
    table-layout: fixed;
    width: 100%;
}


.listado-resolucion-body {
    display: block;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    table-layout: fixed;
}

    .listado-resolucion-body tr {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

.listado-resolucion-foot {
    display: table;
    table-layout: fixed;
    width: 100%;
}

/* altos maximos y minimos*/

.lh-0 {
    line-height: normal !important;
}

.min-h-500 {
    min-height: 500px;
}

.mh-155 {
    min-height: 155px;
}

.min-h-25 {
    min-height: 25px !important;
}

.min-h-250 {
    min-height: 250px;
}

.min-h-280 {
    min-height: 280px;
}

.min-h-450 {
    min-height: 450px;
}

.maxh-250 {
    max-height: 250px;
}

.maxh-400 {
    max-height: 400px;
}

.maxh-450 {
    max-height: 450px !important;
}

.maxh-550 {
    max-height: 550px;
}

.maxh-600 {
    max-height: 600px;
}

.maxh-660 {
    max-height: 660px;
}

.h-25 {
    height: 25px !important;
}

.h-50 {
    height: 50px !important;
}

.h-150 {
    height: 150px !important;
}

.h-200 {
    height: 200px !important;
}

.h-250 {
    height: 250px !important;
}

.h-350 {
    height: 350px !important;
}

.h-450 {
    height: 450px !important;
}

.h-100 {
    height: 100% !important;
}

.w-25 {
    width: 25% !important;
}

.w-35 {
    width: 35% !important;
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 75% !important;
}

.w-100 {
    width: 100% !important;
}

.w-350 {
    width: 350px !important;
}

.w-85 {
    width: 85px !important;
}

.h-55 {
    height: 55px;
}

/**********text text text**********************/

.txt-md-18 {
    font-size: 18px;
}

.m-text-11 {
    font-size: 11px;
}

.m-text-10 {
    font-size: 10px;
}

.m-text-12 {
    font-size: 12px;
}

.m-text-13 {
    font-size: 13px;
}

.m-text-16 {
    font-size: 16px !important;
}

.m-text-18 {
    font-size: 18px;
}

.m-text-20 {
    font-size: 20px;
}

.m-text-24 {
    font-size: 24px;
}

.m-text-30 {
    font-size: 30px;
}

.m-text-40 {
    font-size: 40px !important;
}

.progress-bar.progress-bar-varias {
    background: linear-gradient(to right, rgb(27, 99, 255), rgb(0, 250, 212));
    height: 10px;
    color: #fff;
    transition: width 0.6s ease;
}

.progress.progress-h-5 {
    height: 10px;
    background-color: #f5f5f6;
    margin-top: 6px;
    border-radius: 1.25rem;
    box-shadow: none;
}

.progress.progress-h-15 {
    height: 30px;
    background-color: #f5f5f6;
    margin-top: 6px;
    border-radius: 1.25rem;
    box-shadow: none;
}

.progress-bar {
    background: linear-gradient(to right, rgb(27, 99, 255), rgb(251, 17, 134));
    height: 0.625rem;
    line-height: 0.625rem;
    color: #fff;
    transition: width 0.6s ease;
}

    .progress-bar.progress-bar-citacion {
        background: rgb(27, 99, 255) !important;
        height: 30px;
        color: #fff;
        transition: width 0.6s ease;
        font-size: 16px !important;
        line-height: 28px !important;
    }

    .progress-bar.progress-bar-citacion-warning {
        background: #a17a06 !important;
        height: 30px;
        color: #fff;
        transition: width 0.6s ease;
        font-size: 16px !important;
        line-height: 28px !important;
    }

.progress-wrapper .progress-value {
    position: absolute;
    top: 6px;
    right: 0;
    color: #5a6169;
    font-size: 12px;
}

.progress-wrapper {
    position: relative;
}

.progress {
    font-size: 0.625rem;
    line-height: 0.625rem;
    background-color: #f5f5f6;
    margin-top: 6px;
    border-radius: 1.25rem;
    box-shadow: inset 0 0.1rem 0.1rem rgba(90, 97, 105, 0.15);
}

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

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

.card-chart .link-absolute {
    position: absolute;
    top: 6px;
    right: 15px;
    color: #5a6169;
    font-size: 12px;
    color: rgb(27, 99, 255);
    text-transform: uppercase;
}

.card-chart .link-upper {
    color: #5a6169;
    font-size: 12px;
    color: rgb(27, 99, 255);
    text-transform: uppercase;
}

/*=============================
       FERIADOS
       ============================*/

.calendario__mes {
    border: 1px solid #d9d9d9;
    height: 330px;
    padding: 10px;
}

    .calendario__mes > header {
        border-bottom: 1px solid #d9d9d9;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        justify-content: space-between;
        margin-bottom: 13px;
        padding-bottom: 10px;
    }

        .calendario__mes > header > h1 {
            -webkit-box-flex: 1;
            margin: 0px;
            flex: 1 1 auto;
            font: 600 12px Arial;
            text-align: center;
            text-transform: uppercase;
            color: #5384ff;
        }

    .calendario__mes ul {
        display: flex;
        -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: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: none;
        flex-wrap: nowrap;
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        -moz-justify-content: space-around;
        justify-content: space-around;
        margin-bottom: 15px;
    }

.calendario__guia {
    margin-bottom: 20px;
}

    .calendario__guia > p {
        display: inline-block;
        padding-left: 20px;
        position: relative;
    }

        .calendario__guia > p.nacionales::before {
            background-color: rgb(177, 246, 255);
            border-color: transparent;
        }

        .calendario__guia > p::before {
            border: 1px solid transparent;
            border-radius: 50%;
            content: "";
            position: absolute;
            left: 0;
            height: 18px;
            width: 18px;
        }

        .calendario__guia > p.municipales::before {
            background-color: rgb(174, 211, 53);
            border-color: transparent;
        }

        .calendario__guia > p:not(:last-child) {
            margin-right: 30px;
        }

.calendario__mes ul > li {
    position: relative;
    font-size: 13px;
}

.calendario__mes ul > li {
    font: 400 15px Arial;
    text-align: center;
    text-transform: uppercase;
    width: 25px;
    line-height: 25px;
}

    .calendario__mes ul > li.nacionales {
        background-color: rgb(177, 246, 255);
        border: 1px solid transparent;
        border-radius: 50%;
        height: 25px;
        width: 25px;
        text-align: center;
        font-weight: bold;
    }

    .calendario__mes ul > li.municipales {
        background-color: rgb(174, 211, 53);
        border: 1px solid transparent;
        border-radius: 50%;
        height: 25px;
        width: 25px;
        text-align: center;
        font-weight: bold;
    }

.calendario__mes__eventos {
    padding: 10px;
}

    .calendario__mes__eventos > h3 {
        color: #000;
        font: 13px/19px Arial;
        padding-top: 5px;
        position: relative;
        margin: 0px;
    }

    .calendario__mes__eventos h3.nacionales .badge {
        background-color: rgb(177, 246, 255);
        color: #000;
        margin: 0px 10px 0 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        padding: 0px;
        text-align: center;
    }

    .calendario__mes__eventos h3.municipales .badge {
        background-color: rgb(174, 211, 53);
        color: #000;
        margin: 0px 10px 0 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        padding: 0px;
        text-align: center;
    }

/*=================stock page=================
   ========================================*/

.panel-default-top {
    border: 0px !important;
}

    .panel-default-top .panel-heading {
        background: #fff;
        border-bottom: 1px solid #979797;
    }

        .panel-default-top .panel-heading .card-title {
            font-size: 18px;
            font-weight: normal;
            margin: 0px 0 0px 0;
            line-height: 25px;
            display: block;
        }

        .panel-default-top .panel-heading .link-card h3 {
            font-size: 18px;
            font-weight: normal;
            margin: 0px 0 0px 0;
            line-height: 25px;
            display: block;
        }

.panel-indicador {
    min-height: 120px;
    display: inline-block;
    overflow: hidden;
}

    .panel-indicador:hover {
        filter: grayscale(100%);
        background: #f2f2f2;
    }

    .panel-indicador .panel-heading .link-card h3 {
        color: #1976d2 !important;
    }

        .panel-indicador .panel-heading .link-card h3:hover {
            text-decoration: underline;
            color: rgb(16, 88, 160) !important;
        }

    .panel-indicador .panel-heading h3.card-title {
        color: #0e1a35;
    }

.panel-default-top .panel-body .numbers p {
    text-align: right;
    font-size: 2.5em;
    color: #666;
    margin: 0px;
    line-height: 1.4em;
}

.panel-default-top .panel-body .numbers .card-text-muted {
    color: #9a9a9a;
    font-size: 15px;
}

.chart-area .text {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: inline-block;
    text-align: center;
}

    .chart-area .text p {
        font-size: 43px;
        font-weight: 300;
    }

.info .info-title {
    font-size: 15px;
    font-weight: normal;
    margin: 0px 0 20px 0;
    line-height: 25px;
    display: block;
    color: #0e1a35;
}

    .info .info-title span {
        font-size: 15px;
        font-weight: normal;
        margin: 20px 0 20px 0;
        line-height: 25px;
        color: #919292;
    }

.content-p-stock .legend {
    padding: 10px 20px;
}

.stats-title {
    font-size: 14px;
}

    .stats-title a {
        font-size: 12px;
        color: #1976d2 !important;
    }

        .stats-title a:hover {
            font-size: 14px;
            color: rgb(16, 88, 160) !important;
            text-decoration: underline rgb(140, 148, 156);
        }

/* para trabajar*/

.text-01 {
    color: #51bcda !important;
}

.text-02 {
    color: #455a64 !important;
}

/*anulaciones*/

.text-03 {
    color: #ef8157 !important;
}

/*absoluciones*/

.text-04 {
    color: #633d8b !important;
}

/*condenas*/

.text-05 {
    color: #cece2e !important;
}

.link-table-stk {
    font-size: 15px;
    line-height: 20px;
    color: #337ab7 !important;
}

    .link-table-stk:hover {
        color: #3759af !important;
        text-decoration: underline rgb(140, 148, 156);
    }

.without-overflow {
    overflow: hidden;
}

.icon-send-notif {
    font-size: 20px;
    color: rgb(97, 106, 109);
}

.btn-absolute-input {
    position: relative;
}

.confirm-mail-persona {
    position: absolute;
    top: 20px;
    display: inline-block;
    background: #5384ff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    padding: 5px 8px;
    font-size: 17px;
    margin: 15px;
    line-height: 14px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    right: -35px;
}

    .confirm-mail-persona:hover {
        background: #3f51b5;
        color: #fff;
    }

.pielegend.muted {
    font-size: 12px;
    color: #5a6169;
}

/* pagina datos empresa*/

.datos-empresa h2.name {
    color: #5384ff;
    font-weight: 300;
    font-size: 28px;
    margin-top: 0px;
}

/* pagina datos persona*/

.datos-persona h2.name {
    color: #5384ff;
    font-weight: 300;
    margin-bottom: 58px;
    font-size: 28px;
}

.datos-persona-cards .link-table-stk {
    font-size: 14px;
    line-height: 20px;
}

.card-datos-juz-empresa {
    border: 0;
    border-radius: 0.1875rem;
    display: inline-block;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    box-shadow: 0 1px 15px 1px rgba(39, 39, 39, 0.1);
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    max-height: 400px;
    min-height: 400px;
}

    .card-datos-juz-empresa .card-header {
        padding: 15px 15px 0;
        border: 0;
        position: relative;
    }

        .card-datos-juz-empresa .card-header a {
            position: absolute;
            right: 20px;
            text-transform: uppercase;
            top: 15px;
        }

    .card-datos-juz-empresa .card-body {
        padding: 0px;
        border: 0;
        position: relative;
    }

    .card-datos-juz-empresa .card-title {
        margin: 0px;
    }

    .card-datos-juz-empresa p {
        font-size: 14px;
    }

.card-datos-juz-persona {
    border: 0;
    border-radius: 0.1875rem;
    display: inline-block;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    box-shadow: 0 1px 15px 1px rgba(39, 39, 39, 0.1);
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    max-height: 400px;
}

    .card-datos-juz-persona .card-header {
        padding: 15px 15px 0;
        border: 0;
        position: relative;
    }

        .card-datos-juz-persona .card-header a {
            position: absolute;
            right: 20px;
            text-transform: uppercase;
            top: 15px;
        }

    .card-datos-juz-persona .card-body {
        padding: 0px;
        border: 0;
        position: relative;
    }

    .card-datos-juz-persona .card-title {
        margin: 0px;
    }

    .card-datos-juz-persona p {
        font-size: 14px;
    }

.light-info-light {
    color: #96b0f0 !important;
}

.text-c-blue {
    color: #4099ff;
}

.col-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

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

.comp-card i {
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    text-align: center;
    padding: 17px 0;
    font-size: 18px;
    text-shadow: 0 6px 8px rgba(62, 57, 107, 0.18);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.datos-totales-top-per h6 {
    font-size: 16px;
    margin: 0px;
}

.datos-totales-top-per h3 {
    font-size: 28px;
    margin: 3px 0;
    color: #666;
}

.datos-totales-top-per .card-body {
    position: relative;
}

    .datos-totales-top-per .card-body .last-date {
        margin: 2px 0 0 0;
        font-size: 11px;
    }

    .datos-totales-top-per .card-body .total {
        position: absolute;
        right: 15px;
        top: 6px;
    }

.datos-totales-top-per {
    margin-bottom: 6px;
    min-height: 54px;
}

.btn-fotolink:hover,
.btn-fotolink:active,
.btn-fotolink:focus {
    background: #7395e9 !important;
}

.person-detail img {
    border-radius: 50%;
    width: 180px;
    height: 180px;
}

/* input type file */

.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    max-width: 550px;
    font-size: 15px;
    /* 20px */
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
    /* 10px 20px */
}

.no-js .inputfile + label {
    display: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}

.inputfile-6 + label {
    color: #222;
}

.inputfile-6 + label {
    border: 1px solid #ccc;
    background-color: #fff;
    position: relative;
    height: 37px;
}

    .inputfile-6:focus + label,
    .inputfile-6.has-focus + label,
    .inputfile-6 + label:hover {
        border-color: #799efd;
    }

    .inputfile-6 + label span {
        padding: 0rem 1.25rem;
        /* 10px 20px */
    }

    .inputfile-6 + label strong {
        padding: 0.5rem 1.25rem;
        /* 10px 20px */
    }

    .inputfile-6 + label span {
        width: 300px;
        min-height: 2em;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        vertical-align: top;
    }

    .inputfile-6 + label strong {
        height: 100%;
        color: #fff;
        background-color: #5384ff;
        display: inline-block;
        position: absolute;
        right: 0px;
        top: 0px;
    }

    .inputfile-6:focus + label strong,
    .inputfile-6.has-focus + label strong,
    .inputfile-6 + label:hover strong {
        background-color: #799efd;
    }

@media screen and (max-width: 50em) {
    .inputfile-6 + label strong {
        display: block;
    }
}

.label-file-adj {
    border: 1px solid #dbdbdb;
    padding: 3px 8px;
    border-radius: 14px;
    color: #333;
}

.label-doc-adjunta {
    align-items: center;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: inset 0 0 0 1px rgba(100, 121, 143, 0.302);
    box-shadow: inset 0 0 0 1px rgba(100, 121, 143, 0.302);
    box-sizing: border-box;
    color: #5f6368;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 30px;
    padding: 0 12px;
    margin-right: 8px;
    max-width: 160px;
    min-width: 64px;
}

    .label-doc-adjunta span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: 8px;
        display: inline-block;
    }

/*////////////{programar notificaciones}///////////////////*/

h4.title-line::after {
    position: absolute;
    left: 0;
    right: 0;
    top: 30px;
    width: 50px;
    height: 2px;
    background: #099de2;
    content: "";
}

.widget-total-grid {
    padding: 10px 45px;
}

    .widget-total-grid i {
        font-size: 30px;
    }

a.link-action-grid {
    color: #545454 !important;
    font-size: 13px !important;
    font-weight: bold;
}

    a.link-action-grid:hover {
        color: #5384ff !important;
    }

.table-row-list {
    border-bottom: 1px solid #dbdbdb;
    padding: 15px;
}

.table-list {
    min-height: 710px;
}

.panel-footer-grid {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background-color: #fff;
}

.pagination-list {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.375rem;
}

    .pagination-list .page-link {
        line-height: 1.25;
        position: relative;
        display: block;
        margin-left: -1px;
        padding: 0.5rem 0.75rem;
        color: #8898aa;
        border: 1px solid #dee2e6;
        background-color: #fff;
    }

        .pagination-list .page-link:hover {
            z-index: 2;
            text-decoration: none;
            color: #8898aa;
            border-color: #dee2e6;
            background-color: #dee2e6;
        }

        .pagination-list .page-link:focus {
            z-index: 3;
            outline: 0;
            box-shadow: none;
        }

    .pagination-list .page-item:first-child .page-link {
        margin-left: 0;
        border-top-left-radius: 0.375rem;
        border-bottom-left-radius: 0.375rem;
    }

.page-item:last-child .page-link {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    border-color: #5e72e4;
    background-color: #5e72e4;
}

.page-item.disabled .page-link {
    cursor: auto;
    pointer-events: none;
    color: #8898aa;
    border-color: #dee2e6;
    background-color: #fff;
}

.pagination-lg .page-link {
    font-size: 1.25rem;
    line-height: 1.5;
    padding: 0.75rem 1.5rem;
}

.page-item .page-link,
.page-item span {
    font-size: 0.875rem;
    display: flex;
    width: 36px;
    height: 36px;
    margin: 0 3px;
    padding: 0;
    border-radius: 50% !important;
    align-items: center;
    justify-content: center;
}

/*tabs*/

.grid-tab #tabs .nav-tabs .nav-item.show .nav-link,
.grid-tab .nav-tabs .nav-link.active {
    background-color: transparent;
    border-bottom: 3px solid #5384ff !important;
    font-size: 16px;
    background: transparent !important;
    border: 1px solid transparent;
}

.grid-tab .nav-link.active {
    color: rgb(34, 53, 80);
}

.grid-tab .nav-tabs > li.active > a,
.grid-tab .nav-tabs > li.active > a:focus,
.grid-tab .nav-tabs > li.active > a:hover {
    border: 1px solid transparent;
    color: rgb(15, 112, 248);
}

.grid-tab .nav-link {
    color: #333;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid transparent;
}

    .grid-tab .nav-link a {
        color: #333;
        text-transform: uppercase;
        min-width: 250px;
        text-align: center;
    }

.grid-tab .nav-tabs > li:hover {
    border: 1px solid transparent;
    background: transparent !important;
}

.grid-tab .nav-tabs > li a:hover,
.grid-tab .nav-tabs > li a:active,
.grid-tab .nav-tabs > li a:focus {
    background: transparent !important;
    border: 1px solid transparent;
}

.grid-tab .nav-tabs {
    border: 0px;
}

    .grid-tab .nav-tabs > li a:hover {
        color: #727272;
    }

.grid-tab .tab-content {
    min-height: 755px;
}

/* panel collapsable trabajo de reprogramacion*/
/*
   .reprogramacion .accordion .panel .panel-header div.header-coll::before {
       content: "\e64b";
       font-family: 'themify';
       position: absolute;
       top: 50%;
       right: 0;
       -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
       -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%);
       transform: translateY(-50%);
   }
   
   .reprogramacion .accordion .panel .panel-header div.header-coll.collapsed::before {
      
       content: "\e648";
   }*/

.programacion .accordion .panel .panel-header {
    background: #fff;
    color: #333;
    padding: 10px 20px;
    border-bottom: 1px solid #dbdbdb;
    cursor: pointer;
}

.programacionHecho .accordion .panel .panel-header {
    background: rgb(245, 245, 245);
    color: #999;
    padding: 10px 20px;
    border-bottom: 1px solid #dbdbdb;
    cursor: pointer;
}

.slimScrollDiv {
    overflow: hidden;
    position: absolute !important;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 5px;
    height: 80vh;
}

/********************************
   PERFECT SCROLL**********
   ********************************/

.ps-container .ps-scrollbar-x-rail {
    position: absolute;
    /* please don't change 'position' */
    bottom: 3px;
    /* there must be 'bottom' for ps-scrollbar-x-rail */
    height: 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transition: background-color 0.2s linear, opacity 0.2s linear;
    -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
    -moz-transition: background-color 0.2s linear, opacity 0.2s linear;
    transition: background-color 0.2s linear, opacity 0.2s linear;
}

.ps-container:hover .ps-scrollbar-x-rail,
.ps-container.hover .ps-scrollbar-x-rail {
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.ps-container .ps-scrollbar-x-rail:hover,
.ps-container .ps-scrollbar-x-rail.hover {
    background-color: #eee;
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.ps-container .ps-scrollbar-x-rail.in-scrolling {
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.ps-container .ps-scrollbar-y-rail {
    position: absolute;
    /* please don't change 'position' */
    right: 1.2em;
    /* there must be 'right' for ps-scrollbar-y-rail */
    width: 6px;
    right: 6px;
    background-color: #6074a5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    opacity: 1;
    filter: alpha(opacity=100);
    -o-transition: background-color 0.2s linear, opacity 0.2s linear;
    -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
    -moz-transition: background-color 0.2s linear, opacity 0.2s linear;
    transition: background-color 0.2s linear, opacity 0.2s linear;
}

.ps-container:hover .ps-scrollbar-y-rail,
.ps-container.hover .ps-scrollbar-y-rail {
    background-color: #eee;
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.ps-container .ps-scrollbar-y-rail:hover,
.ps-container .ps-scrollbar-y-rail.hover {
    background-color: #eee;
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.ps-container .ps-scrollbar-y-rail.in-scrolling {
    opacity: 1;
    filter: alpha(opacity=100);
}

.ps-container .ps-scrollbar-x {
    position: absolute;
    /* please don't change 'position' */
    bottom: 0;
    /* there must be 'bottom' for ps-scrollbar-x */
    height: 8px;
    background-color: #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -o-transition: background-color 0.2s linear;
    -webkit-transition: background-color.2s linear;
    -moz-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
}

.ps-container.ie6 .ps-scrollbar-x {
    font-size: 0;
    /* fixed scrollbar height in xp sp3 ie6 */
}

.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x,
.ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x {
    background-color: #999;
}

.ps-container .ps-scrollbar-y {
    position: absolute;
    /* please don't change 'position' */
    right: 0;
    /* there must be 'right' for ps-scrollbar-y */
    width: 6px;
    background-color: #394f85;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -o-transition: background-color 0.2s linear;
    -webkit-transition: background-color.2s linear;
    -moz-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
}

.ps-container.ie6 .ps-scrollbar-y {
    font-size: 0;
    /* fixed scrollbar height in xp sp3 ie6 */
}

.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,
.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y {
    background-color: #394f85;
}

.ps-container.ie .ps-scrollbar-x,
.ps-container.ie .ps-scrollbar-y {
    visibility: hidden;
}

.ps-container.ie:hover .ps-scrollbar-x,
.ps-container.ie:hover .ps-scrollbar-y,
.ps-container.ie.hover .ps-scrollbar-x,
.ps-container.ie.hover .ps-scrollbar-y {
    visibility: visible;
}

.listadoScroll.ps-container .ps-scrollbar-y-rail {
    right: 0px !important;
}

/* Aanimacion spinner en boton*/

.icon-spin {
    display: inline-block;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

a .icon-stack,
a .icon-spin {
    display: inline-block;
    text-decoration: none;
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
    }
}

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

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

@-o-keyframes spin {
    0% {
        -o-transform: rotate(0deg);
    }

    100% {
        -o-transform: rotate(359deg);
    }
}

@-ms-keyframes spin {
    0% {
        -ms-transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(359deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

/* datos legajo infractor*/

.panel-card .panel-heading {
    background: #b5b5b5;
}

    .panel-card .panel-heading .card-title h2 {
        font-size: 14px;
        line-height: normal;
        margin: 0px;
        text-transform: uppercase;
    }

.symbol.symbol-lg-120 > img {
    width: 120px;
    height: 120px;
    object-fit: cover;
}

.symbol.symbol-lg-objetfit300 > img {
    width: 300px;
    height: auto;
    object-fit: cover;
}

.symbol.symbol-lg-120.boxshadow {
    border: 3px solid #ffffff;
    -webkit-box-shadow: 0.2rem 0.2em 1.5rem 0.2rem rgba(0, 0, 0, 0.075);
    box-shadow: 0.2rem 0.2em 1.5rem 0.2rem rgba(0, 0, 0, 0.075);
}

.icon-status-inf {
    border-radius: 50%;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 20px;
    display: inline-block;
}

input#mailSend {
}

.search-wrap {
    background: #fff;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
    transition: 0.5s all ease;
}

    .search-wrap.active {
        opacity: 1;
        visibility: visible;
    }

    .search-wrap .form-control {
        width: 150px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        border: none;
        z-index: 3;
        font-size: 40px;
    }

.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
    background: #2e6da4 !important;
    color: #fff !important;
    border: 0px !important;
}

/*release note*/

.card-new-release {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10;
    border: 1px solid #dbdbdb;
}

    .card-new-release .footer-card {
        padding: 15px;
    }

.card-new-release-close {
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    margin-top: 0;
    margin-right: 0;
    padding: 0;
    overflow: hidden;
    transition: color 0.1s, box-shadow 0.1s;
    border: none;
    border-radius: 5px;
    background: 0 0;
    color: #ccc;
    font-family: serif;
    font-family: monospace;
    font-size: 1.8em;
    cursor: pointer;
    justify-self: end;
}

.sidebarRelease {
    bottom: 0px;
    width: 350px;
    position: absolute;
    z-index: 1;
    top: 92px;
    right: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    height: 100vh;
    box-shadow: 0 1px 15px 1px rgba(39, 39, 39, 0.1);
}

    .sidebarRelease a {
        text-decoration: none;
        color: #363636;
        display: block;
        transition: 0.3s;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 5px;
    }

        .sidebarRelease a:hover {
            color: #c3c3c3;
        }

    .sidebarRelease .closebtn {
        align-items: center;
        justify-content: center;
        width: 1.2em;
        height: 1.2em;
        margin-top: 0;
        margin-right: 0;
        padding: 0;
        overflow: hidden;
        transition: color 0.1s, box-shadow 0.1s;
        border: none;
        border-radius: 5px;
        background: 0 0;
        color: rgb(131, 131, 131);
        font-family: serif;
        font-family: monospace;
        font-size: 1.8em;
        cursor: pointer;
        justify-self: end;
    }

.openbtnRelease {
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
}

    .openbtnRelease:hover {
        background-color: #444;
    }

.header-SideBarrelease {
    padding: 5px 15px;
    background-color: #d4d9e3;
    font-size: 16px;
    font-weight: bold;
}

    .header-SideBarrelease h3 {
        font-size: 18px;
        font-weight: bold;
        color: #545454;
    }

.body-SideBarrelease {
    padding: 15px;
}

.scrollable-container-top-87 {
    overflow: hidden;
    position: absolute;
    top: 87px;
    left: 0;
    right: 0;
    bottom: 160px;
    padding: 20px;
}

.cardRelease .fecha {
    background: #d0cfe6;
    padding: 5px 10px;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: normal;
}

.header-modalSeleccionarCausa {
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
}

.xl-check input {
    height: 20px;
    width: 20px;
}

.xl-check {
    height: 30px;
    width: 30px !important;
}

.md-check {
    height: 20px;
    width: 20px !important;
}

.xl-radio {
    height: 20px;
    width: 20px !important;
}

.correccionBug,
.itemMejora,
.nuevaFunc {
    font-size: 14px;
    color: #00a19a;
    text-transform: uppercase;
}

    .correccionBug::before {
        font-family: "FontAwesome";
        content: "\f188";
        margin-right: 5px;
    }

    .itemMejora::before {
        font-family: "Material-Design-Iconic-Font";
        content: "\f310";
        margin-right: 5px;
    }

    .nuevaFunc::before {
        font-family: "Material-Design-Iconic-Font";
        content: "\f227";
        margin-right: 5px;
    }

.ellipsis-twolines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*galeria de imagenes adjuntas*/

.imagenDeGaleria {
    display: block;
    margin-right: 10px;
}

    .imagenDeGaleria img {
        object-fit: cover;
        width: 100%;
        height: 150px;
    }

/*bordes*/
.bot-01 {
    border-top: 1px solid #8b979f;
}

.bot-02 {
    border-top: 4px solid #00a19a;
}

/**********estados descargos**********/

/******************
}estados
presentado
En carga 
Valido
No valido
Anulados
Ignorado
*********************/

.badge-estado.presentado {
    color: #fff !important;
    background: #0091d4;
}

    .badge-estado.presentado:before {
        content: " \f32f";
        font-family: "Material-Design-Iconic-Font";
    }

.badge-estado.encarga {
    color: #fff !important;
    background: #00bcd4;
}

    .badge-estado.encarga:before {
        content: " \f158 ";
        font-family: "Material-Design-Iconic-Font";
    }

.badge-estado.valido {
    color: #fff !important;
    background: #00d4a2;
}

    .badge-estado.valido:before {
        content: " \f1c7 ";
        font-family: "Material-Design-Iconic-Font";
    }

.badge-estado.novalido {
    color: #fff !important;
    background: #d44300;
}

    .badge-estado.novalido:before {
        content: " \f1f4 ";
        font-family: "Material-Design-Iconic-Font";
    }

.badge-estado.anulado {
    color: #fff !important;
    background: #f11e0b;
}

    .badge-estado.anulado:before {
        content: " \f270 ";
        font-family: "Material-Design-Iconic-Font";
    }

.badge-estado.ignorado {
    color: #fff !important;
    background: #5d5957;
}

    .badge-estado.ignorado:before {
        content: "\f15b";
        font-family: "Material-Design-Iconic-Font";
    }

/* fancybox*/
.fancybox-lock {
    overflow: visible !important;
    width: auto;
}

/*detalle actas*/
.cont-img-cover img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.empty-img-modal-acta {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background: #dbdbdb;
}

/****************************
 Sidebar traking linea de tiempo
****************************/
.sidebar-overlay {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    background: #000;
    z-index: 9;
    transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}

    .sidebar-overlay.active {
        opacity: 0.8;
        visibility: visible;
        transition-delay: 0;
    }

.cbp-spmenu-vertical {
    width: 40%;
    height: 100%;
    top: 0px;
    z-index: 10;
}

.cbp-spmenu {
    background: #f3f6f9;
    position: fixed;
    z-index: 10;
    box-shadow: 0 4px 5px 0 rgba(133, 133, 133, 0.2), 0 1px 10px 0 rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(121, 121, 121, 0.5);
}

.cbp-spmenu-right {
    right: -50%;
}

    .cbp-spmenu-right.cbp-spmenu-open {
        right: 0px;
    }

/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.cbp-spmenu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

.cbp-spmenu-push-toright {
    right: -450px;
}

/* titulo sidenav*/

.title-sidenav {
    background: #4164c2;
    padding: 15px;
    display: flex;
    flex-direction: row;
}

    .title-sidenav h3 {
        margin: 0 0 5px 0;
        font-size: 23px;
        font-weight: bold;
        color: #fff;
    }

    .title-sidenav .title {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 8px;
        width: 1px;
        color: #fff;
    }

    .title-sidenav .buttons button,
    .title-sidenav .buttons a {
        color: #fff;
        height: 40px;
        margin: 0 -2px;
        outline: none;
        padding: 10px;
        width: 40px;
        text-align: center;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0);
        outline: none;
        box-shadow: none;
        border: 0px;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        text-decoration: none;
        font-size: 30px;
    }

        .title-sidenav .buttons button:hover.title-sidenav .buttons a:hover {
            background: rgba(0, 0, 0, 0.05);
            text-decoration: none;
            outline: none;
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
            text-decoration: none;
        }

/*chart del side traking*/
.tituloChart {
    position: absolute;
    left: 17px;
    top: 16px;
    color: #000;
}

/*timeline*/

.gradient-top {
    position: absolute;
    width: 100%;
    height: 150px;
    background: rgb(65, 100, 194);
    background: linear-gradient( 180deg, rgba(65, 100, 194, 1) 0%, rgba(46, 87, 157, 1) 47%, rgba(26, 72, 117, 1) 82% );
    z-index: 2;
    border-radius: 0 0 50% 50%;
}

.timelineTop {
    width: 100%;
    height: 180px;
    background: rgb(65, 100, 194);
    display: flex;
    overflow: hidden;
    align-items: flex-end;
}

.timeline-bg {
    min-height: 550px;
    background: #ecf1f524;
    mix-blend-mode: normal;
    backdrop-filter: blur(15px);
    overflow: hidden;
    position: absolute;
    top: 90px;
    margin-left: 71px;
    box-shadow: 0px 20px 53px -30px rgba(95, 102, 173, 0.566816);
    border-radius: 10px;
    z-index: 3;
    width: 95%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

/* Styling */
.timeline {
    margin: 4em auto;
    max-width: 100%;
    overflow: auto;
    position: absolute;
    top: 200px;
    left: 0;
    right: 0;
    bottom: 0px;
    color: #000;
}

#cerrarPanelTraking:hover i {
    transform: rotate(45deg);
}

.timeline-event {
    position: relative;
}

    .timeline-event:hover .timeline-event-icon {
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        background-color: #5384ff;
    }

    .timeline-event:hover .timeline-event-thumbnail {
        -moz-box-shadow: inset 40em 0 0 0 #5384ff;
        -webkit-box-shadow: inset 40em 0 0 0 #5384ff;
        box-shadow: inset 40em 0 0 0 #5384ff;
    }

.timeline-event-copy:before {
    background-color: black;
    content: "";
    margin-left: -1px;
    position: absolute;
    top: 0;
    left: -2em;
    width: 2px;
    height: 100%;
    bottom: 0px;
}

.timeline-event-copy {
    padding: 0.5em 1em;
    position: relative;
    background-color: rgba(255, 255, 255, 0.5);
    left: 4em;
    width: 90%;
    border-radius: 8px;
    margin-bottom: 8px;
    box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.05);
}

    .timeline-event-copy h3 {
        font-size: 1.75em;
    }

    .timeline-event-copy h4 {
        font-size: 1.2em;
        margin-bottom: 1.2em;
    }

    .timeline-event-copy strong {
        font-weight: 700;
    }

/* .timeline-event-copy p:not(.timeline-event-thumbnail) {
    padding-bottom: 10px;
  } */

.timeline-event-icon {
    -moz-transition: -moz-transform 0.2s ease-in;
    -o-transition: -o-transform 0.2s ease-in;
    -webkit-transition: -webkit-transform 0.2s ease-in;
    transition: transform 0.2s ease-in;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: black;
    outline: 10px solid #f3f6f9;
    display: block;
    margin: 0.5em 0.5em 0.5em -0.5em;
    position: absolute;
    top: 0;
    left: 2.4em;
    width: 1em;
    height: 1em;
    z-index: 2;
}

.timeline-event-thumbnail {
    -moz-transition: box-shadow 0.5s ease-in 0.1s;
    -o-transition: box-shadow 0.5s ease-in 0.1s;
    -webkit-transition: box-shadow 0.5s ease-in;
    -webkit-transition-delay: 0.1s;
    transition: box-shadow 0.5s ease-in 0.1s;
    color: white;
    font-size: 0.75em;
    background-color: black;
    -moz-box-shadow: inset 0 0 0 0em #0dcec4;
    -webkit-box-shadow: inset 0 0 0 0em #0dcec4;
    box-shadow: inset 0 0 0 0em #0dcec4;
    display: inline-block;
    margin-bottom: 1.2em;
    padding: 3px 5px;
    line-height: normal;
    border-radius: 3px;
}

/*Listados pagos SUGIT*/

.list-pagosSUGIT:hover {
    background: #f2f2f2;
}

.list-pagosSUGIT {
    min-height: 58px !important;
}

.list-pagos:hover {
    background: #f2f2f2;
}

.list-pagos {
    min-height: 58px !important;
}

.list-45 {
    min-height: 45px !important;
}

/*Valor UF*/

.overlay {
    position: fixed;
    width: 100%;
    /* min-height: 100%;*/
    z-index: 3000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
}

.overlay-content {
    position: relative;
    margin: 5% auto;
    width: 50% !important;
    min-height: 250px;
    height: auto;
    max-height: 800px;
    padding: 1%;
    background: #fff;
    box-shadow: 0px 0px 5px #888888;
    -moz-box-shadow: 0px 0px 5px #888888;
    -webkit-box-shadow: 0px 0px 5px #888888;
}

.overlay-image {
    position: relative;
    margin: 5% auto;
    width: 50% !important;
    height: auto;
    /*max-height: 600px;*/
    padding: 1%;
    background: #fff;
    box-shadow: 0px 0px 5px #888888;
    -moz-box-shadow: 0px 0px 5px #888888;
    -webkit-box-shadow: 0px 0px 5px #888888;
}

    .overlay-image.overlay-sm {
        position: relative;
        margin: 5% auto;
        max-width: 500px;
        height: auto;
        max-height: 100%;
        padding: 0px;
        background: #fff;
        box-shadow: 0px 0px 5px #888888;
        -moz-box-shadow: 0px 0px 5px #888888;
        -webkit-box-shadow: 0px 0px 5px #888888;
    }

    .overlay-image.overlay-lg {
        max-width: 800px !important;
        position: relative;
        margin: 5% auto;
        height: auto;
        max-height: 100%;
        padding: 0px;
        background: #fff;
        box-shadow: 0px 0px 5px #888888;
        -moz-box-shadow: 0px 0px 5px #888888;
        -webkit-box-shadow: 0px 0px 5px #888888;
    }

    .overlay-image img {
        width: 100%;
    }

.overlay-close {
    cursor: pointer;
}

.overlay-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}

.overlay-body {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem;
}

.overlay-footer {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem;
}

.circle-md {
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
}

.circle-sm {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
}

.circle-xs {
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
}

.circle-xss {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
}

.bo-bg-01 {
    border: 1px solid #5384ff;
}

/*Boton agregar feriados*/

.btn-plus-feriados {
    position: relative;
    display: flex;
    gap: 25px;
}

    .btn-plus-feriados li {
        position: relative;
        list-style: none;
        width: 40px;
        height: 40px;
        border-radius: 60px;
        border: 1px solid #5384ff !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        cursor: pointer;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        transition: 0.25s;
    }

        .btn-plus-feriados li:hover {
            width: 180px;
        }

        .btn-plus-feriados li::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 50%;
            opacity: 0;
            transition: 0.25s;
        }

        .btn-plus-feriados li::after {
            content: "";
            position: absolute;
            top: 10px;
            width: 100%;
            height: 100%;
            transition: 0.5s;
            filter: blur(15px);
            opacity: 0;
            transition: 0.25s;
        }

    .btn-plus-feriados:hover::before {
        opacity: 1;
    }

    .btn-plus-feriados li i {
        position: absolute;
        right: 12px;
        top: 7px;
        transition: 0.15s;
        transition-delay: 0.15s;
    }

    .btn-plus-feriados li:hover ::after {
        opacity: 0.5;
    }

    .btn-plus-feriados li:hover i {
        transform: scale(0);
        transition-delay: 0s;
    }

    .btn-plus-feriados li .title-btn {
        color: #000;
        font-size: 0.8em;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        transform: scale(0);
        transition: 0.15s;
        transition-delay: 0s;
    }

    .btn-plus-feriados li:hover .title-btn {
        transform: scale(1);
        transition-delay: 0.15s;
    }

.card-receipt {
    border-radius: 39.969px;
    background: #fff;
    box-shadow: 0px 13px 39px 0px rgba(170, 170, 170, 0.33);
}

.dropzonePagos-box {
    min-height: 70px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px 4px 4px 4px !important;
    background: white;
    padding: 20px 20px;
}

.text-success {
    color: #5cb85c;
}

.text-alert {
    color: #fbbd4c;
}

.card-modalPagos {
    border-radius: 4px;
    background: #fff;
    box-shadow: 0px 13px 39px 0px rgba(170, 170, 170, 0.33);
}

.div-warning {
    border: 1px dashed #fbbd4c;
    background: #fff3cd;
}

    .div-warning span {
        color: #664d03;
    }