.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    z-index: 1200;
    transform: translate(-50%, -50%);
}

/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */

body.loading {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
modal element will be visible */

body.loading .modal {
    display: block;
}

#loadingDiv {
    z-index: 1100;
    background-color: rgba(255, 255, 255, 0.75);
}

/* Mensaje que sale cuando se carga */
.message {
    background-image: linear-gradient(135deg, purple, #239B56);
    margin-top: 0px;
    height: 60px;
    line-height: 60px;
    color: white;
    z-index: 1300;
    text-align: center;
    font-family: 'Racing Sans One', cursive;
    font-size: 200%;
    box-shadow: 3px 3px 3px 3px grey;
}

/* Boton Pagar*/
.push_button {
    display: inline-block;
    margin: 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 8px 0 #c5376d, 0 15px 20px rgba(0, 0, 0, .35);
    -moz-box-shadow: 0 8px 0 #c5376d, 0 15px 20px rgba(0, 0, 0, .35);
    box-shadow: 0 8px 0 #c5376d, 0 15px 20px rgba(0, 0, 0, .35);
    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
    -moz-transition: -moz-box-shadow .1s ease-in-out;
    -o-transition: -o-box-shadow .1s ease-in-out;
    transition: box-shadow .1s ease-in-out;
    font-size: 50px;
    color: #fff;
}

.push_button span {
    color: #fff;
    display: inline-block;
    padding: 20px 30px;
    background-color: #ec528d;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(338, 90%, 80%, .8)), to(hsla(338, 90%, 70%, .2)));
    background-image: -webkit-linear-gradient(hsla(338, 90%, 80%, .8), hsla(338, 90%, 70%, .2));
    background-image: -moz-linear-gradient(hsla(338, 90%, 80%, .8), hsla(338, 90%, 70%, .2));
    background-image: -o-linear-gradient(hsla(338, 90%, 80%, .8), hsla(338, 90%, 70%, .2));
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
    -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
    box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
    font-family: 'Racing Sans One', cursive;
    font-size: 100%;
    line-height: 1;
    text-shadow: 0 -1px 1px rgba(175, 49, 95, .7);
    -webkit-transition: background-color .2s ease-in-out, -webkit-transform .1s ease-in-out;
    -moz-transition: background-color .2s ease-in-out, -moz-transform .1s ease-in-out;
    -o-transition: background-color .2s ease-in-out, -o-transform .1s ease-in-out;
    transition: background-color .2s ease-in-out, transform .1s ease-in-out;
}

.push_button:hover span {
    color: #fff;
    background-color: #ec6a9c;
    text-shadow: 0 -1px 1px rgba(175, 49, 95, .9), 0 0 5px rgba(255, 255, 255, .8);
}

.push_button:active,
.button:focus {
    color: #fff;
    -webkit-box-shadow: 0 8px 0 #c5376d, 0 12px 10px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 8px 0 #c5376d, 0 12px 10px rgba(0, 0, 0, .3);
    box-shadow: 0 8px 0 #c5376d, 0 12px 10px rgba(0, 0, 0, .3);
}

.push_button:active span {
    color: #fff;
    -webkit-transform: translate(0, 4px);
    -moz-transform: translate(0, 4px);
    -o-transform: translate(0, 4px);
    transform: translate(0, 4px);
}

/* Boton Pagar Azul*/
.push_button_azul {
    display: inline-block;
    margin: 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 8px 0 #6c95d9, 0 15px 20px rgba(0, 0, 0, .35);
    -moz-box-shadow: 0 8px 0 #6c95d9, 0 15px 20px rgba(0, 0, 0, .35);
    box-shadow: 0 8px 0 #6c95d9, 0 15px 20px rgba(0, 0, 0, .35);
    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
    -moz-transition: -moz-box-shadow .1s ease-in-out;
    -o-transition: -o-box-shadow .1s ease-in-out;
    transition: box-shadow .1s ease-in-out;
    font-size: 50px;
    color: #fff;
}

.push_button_azul span {
    color: #fff;
    display: inline-block;
    padding: 20px 30px;
    background-color: #0069d9;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(211, 100%, 43%, 0.8)), to(hsla(338, 90%, 70%, .2)));
    background-image: -webkit-linear-gradient(hsla(211, 100%, 43%, 0.8), hsla(338, 90%, 70%, .2));
    background-image: -moz-linear-gradient(hsla(211, 100%, 43%, 0.8), hsla(338, 90%, 70%, .2));
    background-image: -o-linear-gradient(hsla(211, 100%, 43%, 0.8), hsla(338, 90%, 70%, .2));
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
    -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
    box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
    font-family: 'Racing Sans One', cursive;
    font-size: 100%;
    line-height: 1;
    text-shadow: 0 -1px 1px rgba(46, 94, 250, 0.7);
    -webkit-transition: background-color .2s ease-in-out, -webkit-transform .1s ease-in-out;
    -moz-transition: background-color .2s ease-in-out, -moz-transform .1s ease-in-out;
    -o-transition: background-color .2s ease-in-out, -o-transform .1s ease-in-out;
    transition: background-color .2s ease-in-out, transform .1s ease-in-out;
}

.push_button_azul:hover span {
    color: #fff;
    background-color: #0069d9;
    text-shadow: 0 -1px 1px rgba(0, 105, 217, 0.9), 0 0 5px rgba(255, 255, 255, .8);
}

.push_button_azul:active,
.button:focus {
    color: #fff;
    -webkit-box-shadow: 0 8px 0 #2e5efa, 0 12px 10px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 8px 0 #2e5efa, 0 12px 10px rgba(0, 0, 0, .3);
    box-shadow: 0 8px 0 #2e5efa, 0 12px 10px rgba(0, 0, 0, .3);
}

.push_button_azul:active span {
    color: #fff;
    -webkit-transform: translate(0, 4px);
    -moz-transform: translate(0, 4px);
    -o-transform: translate(0, 4px);
    transform: translate(0, 4px);
}

/* Teclado de Pin*/
#PINform input:focus,
#PINform select:focus,
#PINform textarea:focus,
#PINform button:focus {
    outline: none;
}

#PINform {
    background: #ededed;
    position: absolute;
    width: 300px;
    height: 400px;
    left: 50%;
    margin-left: -180px;
    top: 50%;
    margin-top: -215px;
    padding: 30px;
    -webkit-box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
}

#PINbox {
    background: #ededed;
    margin: 3.5%;
    width: 92%;
    font-size: 4em;
    text-align: center;
    border: 1px solid #d5d5d5;
}

.PINbutton {
    background: #ededed;
    color: #7e7e7e;
    border: none;
    /*background: linear-gradient(to bottom, #fafafa, #eaeaea);
      -webkit-box-shadow: 0px 2px 2px -0px rgba(0,0,0,0.3);
         -moz-box-shadow: 0px 2px 2px -0px rgba(0,0,0,0.3);
              box-shadow: 0px 2px 2px -0px rgba(0,0,0,0.3);*/

    border-radius: 50%;
    font-size: 2em;
    text-align: center;
    width: 60px;
    height: 60px;
    margin: 7px 10px;
    padding: 0;
    outline: 0;
}

.clear,
.enter {
    font-size: 1.3em;
}

.PINbutton:hover {
    /*box-shadow: #506CE8 0 0 1px 1px;*/
}

.PINbutton:active {
    background: #506CE8;
    color: #fff;
}

.clear:hover {
    /*box-shadow: #ff3c41 0 0 1px 1px;*/
}

.clear:active {
    background: #ff3c41;
    color: #fff;
}

.enter:hover {
    /*box-shadow: #47cf73 0 0 1px 1px;*/
}

.enter:active {
    background: #47cf73;
    color: #fff;
}

.enter {
    background: #47cf73;
    color: white;
}

.clear {
    background: red;
    color: white;
}

.shadow {
    -webkit-box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
}

.ticket {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%;
}

/* Dar vuelta correo de contacto*/
span.lol_reverse {
    unicode-bidi: bidi-override;
    direction: rtl;
}

/* Google Maps*/
.pac-input {
    padding-top: 10px;
    margin: 10px;
}

/* estilo polaroid*/
div.polaroid {
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: table;
    margin: 10px auto;
    width: 100px;
}

div.polaroid > h1 {
    width: 155px;
}

div.polaroid > a > img {
    width: 100%;
}

div.polaroid_descripcion {
    text-align: center;
    padding: 5px 10px;
    overflow-y: auto;
    max-height: 100px;
    height: 100%;

}

div.polaroid:nth-child(2n) {
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    transform: rotate(1deg);
}

div.polaroid:nth-child(3n) {
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    transform: rotate(-1deg);
}

div.polaroid:nth-child(5n) {
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    transform: rotate(1deg);
}

div.polaroid:nth-child(6n) {
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    transform: rotate(-1deg);

}


/*D3 */

.chart {
    padding: 10px;
    background: #e9ecef;
    border-radius: 10px;
    margin: 5px;
    height: 400px;
    max-width: 100%;
    overflow: auto;
    overflow-y: hidden;
}

.number_chart {
    padding: 20px;
    background: #e9ecef;
    border-radius: 10px;
    margin: 5px;
}

text {
    font-size: 14px;
    font-family: inherit;
}

line {
    stroke: white;
}

.domain {
    stroke: white;
}

.tick {
    fill: black;
    stroke: lightslategrey;
}

.btn-custom-warning {
    border: 2px solid #fd7e14 !important;
}

.btn-custom-warning {
    padding: 8px 24px !important;
    color: #ffffff !important;
    background: #fd7e14 !important;
    border-radius: 50px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 14px;
}

.btn-custom-warning:hover {
    color: #fd7e14 !important;
    background-color: transparent !important;
}

.pago_historial_estado4 {
    color: black;
    background-image: radial-gradient(circle 343px at 46.3% 47.5%, rgba(242, 242, 242, 1) 0%, rgba(241, 241, 241, 1) 72.9%);
}

.feather-white {
    font-size: 28px;
    color: white;
    font-weight: bold
}

.seguridad-list:hover {
    cursor: pointer;
}

.seguridad-list-icon {
    background-color: #2f3e47;
    width: 40px;
    height: 40px;
}

.main-logo-background {
    transform: translateX(-50%);
    left: 50%;
    top: 4px;
    position: absolute;
    filter: drop-shadow(1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 -1px 0 white);
}

.scrolled-down{
    transform:translateY(-100%); transition: all 0.3s ease-in-out;
}
.scrolled-up{
    transform:translateY(0); transition: all 0.3s ease-in-out;
}

section {
    padding-top: 10px !important;
}