/* normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

.bold {font-weight: 400 !important;}
.f-75{font-size:75%;}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

/*manolada*/
thead {
    color: white;
    background-color: #0812b3 !important;
} 
table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc_disabled:before {
    right: 1em;   
}
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_desc_disabled:after { 
    right: 16px;
}

#ModalAnular {z-index:9999;}

.eldia, .lahora {
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #fff;
    margin-bottom: 5px;
}

/* fin manolada*/



audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

a {
    background-color: transparent;
}

a:active,
a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type="checkbox"],
input[type="radio"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

input[type="search"] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: bold
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 0
}

/* @import "../../../node_modules/backgrid/lib/backgrid.css"; */
.rickshaw_graph .detail {
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.1);
    bottom: 0;
    width: 1px;
    -webkit-transition: opacity 0.25s linear;
    -moz-transition: opacity 0.25s linear;
    -o-transition: opacity 0.25s linear;
    -ms-transition: opacity 0.25s linear;
    transition: opacity 0.25s linear;
    -moz-transition: opacity .25s linear;
    -o-transition: opacity .25s linear;
    -webkit-transition: opacity .25s linear
}

.rickshaw_graph .detail.inactive {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0)
}

.rickshaw_graph .detail .item.active {
    opacity: 1;
    -ms-filter: none;
    filter: none
}

.rickshaw_graph .detail .x_label {
    font-family: Arial, sans-serif;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 6px;
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    border: 1px solid #e0e0e0;
    font-size: 12px;
    position: absolute;
    background: #fff;
    white-space: nowrap
}

.rickshaw_graph .detail .x_label.left {
    left: 0
}

.rickshaw_graph .detail .x_label.right {
    right: 0
}

.rickshaw_graph .detail .item {
    position: absolute;
    z-index: 2;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: .25em;
    font-size: 12px;
    font-family: Arial, sans-serif;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.4);
    margin-left: 1em;
    margin-right: 1em;
    margin-top: -1em;
    white-space: nowrap
}

.rickshaw_graph .detail .item.left {
    left: 0
}

.rickshaw_graph .detail .item.right {
    right: 0
}

.rickshaw_graph .detail .item.active {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background: rgba(0, 0, 0, 0.8)
}

.rickshaw_graph .detail .item:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    content: "";
    border: 5px solid transparent
}

.rickshaw_graph .detail .item.left:after {
    top: 1em;
    left: -5px;
    margin-top: -5px;
    border-right-color: rgba(0, 0, 0, 0.8);
    border-left-width: 0
}

.rickshaw_graph .detail .item.right:after {
    top: 1em;
    right: -5px;
    margin-top: -5px;
    border-left-color: rgba(0, 0, 0, 0.8);
    border-right-width: 0
}

.rickshaw_graph .detail .dot {
    width: 4px;
    height: 4px;
    margin-left: -3px;
    margin-top: -3.5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    background: #fff;
    border-width: 2px;
    border-style: solid;
    display: none;
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box
}

.rickshaw_graph .detail .dot.active {
    display: block
}

.rickshaw_graph {
    position: relative
}

.rickshaw_graph svg {
    display: block;
    overflow: hidden
}

.rickshaw_graph .x_tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dotted rgba(0, 0, 0, 0.2);
    pointer-events: none
}

.rickshaw_graph .x_tick .title {
    position: absolute;
    font-size: 12px;
    font-family: Arial, sans-serif;
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    white-space: nowrap;
    margin-left: 3px;
    bottom: 1px
}

.rickshaw_annotation_timeline {
    height: 1px;
    border-top: 1px solid #e0e0e0;
    margin-top: 10px;
    position: relative
}

.rickshaw_annotation_timeline .annotation {
    position: absolute;
    height: 6px;
    width: 6px;
    margin-left: -2px;
    top: -3px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.25)
}

.rickshaw_graph .annotation_line {
    position: absolute;
    top: 0;
    bottom: -6px;
    width: 0;
    border-left: 2px solid rgba(0, 0, 0, 0.3);
    display: none
}

.rickshaw_graph .annotation_line.active {
    display: block
}

.rickshaw_graph .annotation_range {
    background: rgba(0, 0, 0, 0.1);
    display: none;
    position: absolute;
    top: 0;
    bottom: -6px
}

.rickshaw_graph .annotation_range.active {
    display: block
}

.rickshaw_graph .annotation_range.active.offscreen {
    display: none
}

.rickshaw_annotation_timeline .annotation .content {
    background: #fff;
    color: #000;
    opacity: .9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    padding: 5px;
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    position: relative;
    z-index: 20;
    font-size: 12px;
    padding: 6px 8px 8px;
    top: 18px;
    left: -11px;
    width: 160px;
    display: none;
    cursor: pointer
}

.rickshaw_annotation_timeline .annotation .content:before {
    content: "\25b2";
    position: absolute;
    top: -11px;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8)
}

.rickshaw_annotation_timeline .annotation.active,
.rickshaw_annotation_timeline .annotation:hover {
    background-color: rgba(0, 0, 0, 0.8);
    cursor: none
}

.rickshaw_annotation_timeline .annotation .content:hover {
    z-index: 50
}

.rickshaw_annotation_timeline .annotation.active .content {
    display: block
}

.rickshaw_annotation_timeline .annotation:hover .content {
    display: block;
    z-index: 50
}

.rickshaw_graph .y_axis,
.rickshaw_graph .x_axis_d3 {
    fill: none
}

.rickshaw_graph .y_ticks .tick line,
.rickshaw_graph .x_ticks_d3 .tick {
    stroke: rgba(0, 0, 0, 0.16);
    stroke-width: 2px;
    shape-rendering: crisp-edges;
    pointer-events: none
}

.rickshaw_graph .y_grid .tick,
.rickshaw_graph .x_grid_d3 .tick {
    z-index: -1;
    stroke: rgba(0, 0, 0, 0.2);
    stroke-width: 1px;
    stroke-dasharray: 1 1
}

.rickshaw_graph .y_grid .tick[data-y-value="0"] {
    stroke-dasharray: 1 0
}

.rickshaw_graph .y_grid path,
.rickshaw_graph .x_grid_d3 path {
    fill: none;
    stroke: none
}

.rickshaw_graph .y_ticks path,
.rickshaw_graph .x_ticks_d3 path {
    fill: none;
    stroke: #808080
}

.rickshaw_graph .y_ticks text,
.rickshaw_graph .x_ticks_d3 text {
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    font-size: 12px;
    pointer-events: none
}

.rickshaw_graph .x_tick.glow .title,
.rickshaw_graph .y_ticks.glow text {
    fill: #000;
    color: #000;
    text-shadow: -1px 1px 0 rgba(255, 255, 255, 0.1), 1px -1px 0 rgba(255, 255, 255, 0.1), 1px 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1), 0 -1px 0 rgba(255, 255, 255, 0.1), 1px 0 0 rgba(255, 255, 255, 0.1), -1px 0 0 rgba(255, 255, 255, 0.1), -1px -1px 0 rgba(255, 255, 255, 0.1)
}

.rickshaw_graph .x_tick.inverse .title,
.rickshaw_graph .y_ticks.inverse text {
    fill: #fff;
    color: #fff;
    text-shadow: -1px 1px 0 rgba(0, 0, 0, 0.8), 1px -1px 0 rgba(0, 0, 0, 0.8), 1px 1px 0 rgba(0, 0, 0, 0.8), 0 1px 0 rgba(0, 0, 0, 0.8), 0 -1px 0 rgba(0, 0, 0, 0.8), 1px 0 0 rgba(0, 0, 0, 0.8), -1px 0 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8)
}

.rickshaw_legend {
    font-family: Arial;
    font-size: 12px;
    color: #fff;
    background: #404040;
    display: inline-block;
    padding: 12px 5px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    position: relative
}

.rickshaw_legend:hover {
    z-index: 10
}

.rickshaw_legend .swatch {
    width: 10px;
    height: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2)
}

.rickshaw_legend .line {
    clear: both;
    line-height: 140%;
    padding-right: 15px
}

.rickshaw_legend .line .swatch {
    display: inline-block;
    margin-right: 3px;
    -webkit-border-radius: 2px;
    border-radius: 2px
}

.rickshaw_legend .label {
    margin: 0;
    white-space: nowrap;
    display: inline;
    font-size: inherit;
    background-color: transparent;
    color: inherit;
    font-weight: 400;
    line-height: normal;
    padding: 0;
    text-shadow: none
}

.rickshaw_legend .action:hover {
    opacity: .6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60)
}

.rickshaw_legend .action {
    margin-right: .2em;
    font-size: 10px;
    opacity: .2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
    cursor: pointer;
    font-size: 14px
}

.rickshaw_legend .line.disabled {
    opacity: .4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40)
}

.rickshaw_legend ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin: 2px;
    cursor: pointer
}

.rickshaw_legend li {
    padding: 0 0 0 2px;
    min-width: 80px;
    white-space: nowrap
}

.rickshaw_legend li:hover {
    background: rgba(255, 255, 255, 0.08);
    -webkit-border-radius: 3px;
    border-radius: 3px
}

.rickshaw_legend li:active {
    background: rgba(255, 255, 255, 0.2);
    -webkit-border-radius: 3px;
    border-radius: 3px
}

@font-face {
    font-family: 'fontello';
    src: url("../font/fontello.eot?7784711");
    src: url("../font/fontello.eot?7784711#iefix") format('embedded-opentype'), url("../font/fontello.woff?7784711") format('woff'), url("../font/fontello.ttf?7784711") format('truetype'), url("../font/fontello.svg?7784711#fontello") format('svg');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'mimo';
    src: url("../font/mimo.eot?84007961");
    src: url("../font/mimo.eot?84007961#iefix") format('embedded-opentype'), url("../font/mimo.woff?84007961") format('woff'), url("../font/mimo.ttf?84007961") format('truetype'), url("../font/mimo.svg?84007961#mimo") format('svg');
    font-weight: normal;
    font-style: normal
}

.demo-icon,
.mimo-icon {
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.mimo-icon {
    font-family: "mimo"
}

.demo-icon {
    font-family: "fontello"
}

figure {
    margin: 0
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    margin: 0
}

    body.outapp {
        /* background: url("../img/piscina.jpg") center center fixed; */
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover
    }

.outapp .tipo-pistas {
    display: none
}

body.inapp {
    background: #f5f1f1
}

section,
body {
    position: relative
}

.text-center {
    text-align: center
}

.clear {
    width: 50px;
    clear: both
}

.logo {
    position: relative;
    margin-left: 2em;
    max-width: 200px;
}

.logo img {
    margin: 1em auto;
    width: 100%;
    height: auto
}

@media screen and (max-width:650px) {
    .logo {
        position: relative;
        max-width: 200px;
        margin-left: 1em;
    }
        .logo img {
            margin: 1em auto;
            width: 100%;
            height: auto;
            margin-bottom: 0;
        }

    #misReservasUser2, #goHomeUser2 {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
    .calendario-list{
        margin-top:0 !important;
    }

    .header ul {
        width: 100%;
        list-style-type: none;
        padding: 0;
        margin: 0;
        float: none;
        clear: both;
    }
    .header ul li:last-child {
        float: right
    }
}

#logout,
.user-welcome,
#reservasAdmin,
#usuariosAdmin,
#nuevoUsuarioAdmin,
#pistasAdmin,
#estadisticasAdmin {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-weight: 300;
}

#logout:hover,
.user-welcome:hover,
#reservasAdmin:hover,
#usuariosAdmin:hover,
#nuevoUsuarioAdmin:hover,
#pistasAdmin:hover,
#estadisticasAdmin:hover {
    text-decoration: underline
}

.header {
    background-color: #f1f1f5;
    width: 100%;
    margin: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    overflow: hidden;
}

.header position relative {
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15)
}

.header ul {
    list-style-type: none;
    display: block;
    width: 385px;
    padding: 0;
    margin: 0 auto;
}

.header ul li {
    list-style-type: none;
    display: inline-block;
    padding: 0;
    float: left;
    position: relative;
}

.header ul li a#doNothing {
    font-size: 1.3em;
    font-weight: 700
}

.header ul li span#tenis {
    display: none
}

.header ul li#listItemWelcome {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 1.5em;
    margin-right: 1em;
}

.header ul li#listItemWelcome a {
    color: #51585c;
    text-decoration: none;
    font-weight: 300;
    display: inline-block;
    margin: 0 1em 0 .5em;
    padding-top: .5em;
    padding-right: 1em;
}

.header ul li#listItemWelcome a:hover {
    text-decoration: underline
}

.header ul li#listItemWelcome a span {
    display: block
}

.header ul li#listItemWelcome .ffos {
    display: none
}

.header ul li#listItemWelcome #logout {
    margin: .3em 0 0 -2em;
    position: absolute;
    padding: .3em;
    font-size: 1.2em;
    text-decoration: none;
    -webkit-transition: color .5s ease-out;
    -moz-transition: color .5s ease-out;
    -o-transition: color .5s ease-out;
    -webkit-transition: color 0.5s ease-out;
    -moz-transition: color 0.5s ease-out;
    -o-transition: color 0.5s ease-out;
    -ms-transition: color 0.5s ease-out;
    transition: color 0.5s ease-out;
}

.header ul li#listItemWelcome #logout:hover {
    color: #ff686f
}

@media screen and (max-width:650px) {
    .header ul li#listItemWelcome a span {
        display: none
    }
    .header ul li#listItemWelcome .ffos {
        display: inline-block
    }
}

.inapp #logotipoLink {
    margin: 0;
    width: 221px;
    display: block
}

.tipo-pistas2 {
    -webkit-box-shadow: 0 1px 3px rgba(158, 152, 152, 0.47);
    box-shadow: 0 1px 3px rgba(158, 152, 152, 0.47);
    background: rgba(38, 40, 45, 0.06);
    margin: 1em auto;
    padding: 7px;
    width: 301px;
    height: 100%
}

.deporte {
    position: relative;
    display: inline-block;
    padding: .7em 0;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 17px;
    margin: 0 0 2px;
    width: 100%;
    color: #4f4f4f;
    background-color: #fff;
    -webkit-box-shadow: 0 0 2px #bbb;
    -webkit-box-shadow: 0 0 2px rgba(187, 187, 187, 0.52);
    box-shadow: 0 0 2px rgba(187, 187, 187, 0.52);
    cursor: pointer;
    text-align: left;
    -webkit-border-radius: 2px;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-transition: color .5s ease-out;
    -moz-transition: color .5s ease-out;
    -o-transition: color .5s ease-out;
    -webkit-transition: color 0.5s ease-out;
    -moz-transition: color 0.5s ease-out;
    -o-transition: color 0.5s ease-out;
    -ms-transition: color 0.5s ease-out;
    transition: color 0.5s ease-out;
    -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -o-transition: background-color .5s ease-out;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    -ms-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}

.deporte span {
    display: inline-block;
    margin: 0;
    padding: 0 0 0 1em
}

.deporte:hover {
    background-color: #e2e2e2;
    color: #9b9b9b
}

.deporte span {
    cursor: pointer
}

.deporte i {
    float: right;
    margin-top: .2em;
    color: #9b9b9b
}

.pista {
    position: relative;
    display: inline-block;
    padding: 3em 0;
    margin: .2em;
    width: 45%;
    background-color: #c3c3c3
}

#verReservasUser {
    overflow: hidden;
    height: 150px;
    width: 204px;
    display: block;
    float: left;
}

#verReservasUser:before {
    content: ''
}

#calendario {
    display: none;
    margin: 0 auto;
    clear: none;
    max-width: 1124px;
    display: block;
    width: 100%;
    margin: 1em auto;
    padding: 0;
    overflow: hidden;
    -webkit-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    float: none
}

@-moz-document url-prefix() {
    .admin #calendario {
        float: left
    }
}

#claock {
    width: 100%;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    float: left;
    padding: 0
}

.calendariopick {
    display: none;
    width: 50%;
    padding: 0;
    margin: 0;
    float: left
}

.calendariopick-right {
    padding-top: 6em
}

@media screen and (max-width:640px) {
    .calendariopick {
        width: 100%;
        padding: 0;
        margin: 0;
        float: left
    }
    .calendariopick-right {
        padding-top: 0
    }
}

@media screen and (max-width:1350px) {
    #calendario {
        display: none;
        margin: 0 auto;
        clear: none;
        max-width: 1124px;
        display: block;
        width: 100%;
        margin: 1em auto;
        padding: 0;
        overflow: hidden;
        -webkit-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px
    }
}

.tipo-calendario.doble {
    width: 50%;
    min-width: 280px;
    float: left;
    margin: 0 auto !important;
    display: inline;
}

.tipo-calendario.doble.doble {
    margin: 0
}

.tipo-calendario.doble.simple {
    margin: 0 auto
}

.tipo-calendario.doble ul {
    margin: 0;
    padding: 0
}

@media screen and (max-width:600px) {
    .tipo-calendario.doble {
        width: 100%;
        float: left
    }
}

.calendario-list {
    margin: .5em;
    padding: 0
}

ul {
    padding: 1em
}

.calendario-list {
    background: #4760ce; /* #31383d; */
    -webkit-box-shadow: 0 0 4px #bbb;
    box-shadow: 0 0 4px #bbb;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.calendario-list h2 {
    margin: 0;
    padding: 1.5em 0 1.5em .8em;
    color: #fff;
    font-weight: 400;
    text-align: left;
    font-size: 16px
}

.hora {
    cursor: pointer;
    position: relative;
    display: block;
    background-color: #fff;
    -webkit-transition: box-shadow .3s ease-out;
    -moz-transition: box-shadow .3s ease-out;
    -o-transition: box-shadow .3s ease-out;
    -webkit-transition: box-shadow 0.3s ease-out;
    -moz-transition: box-shadow 0.3s ease-out;
    -o-transition: box-shadow 0.3s ease-out;
    -ms-transition: box-shadow 0.3s ease-out;
    transition: box-shadow 0.3s ease-out;
    -webkit-box-shadow: 0 0 0 #ededed;
    box-shadow: 0 0 0 #ededed;
    text-align: left;
    border-top: 1px solid #f0f0f0;
    padding: .6em .8em;
    margin: 0;
}

.hora:last-child {
    border-bottom: 1px solid #f0f0f0
}

.hora:hover {
    background: #efefef
}

    .hora[data-estado="ocupado"] {
        cursor: default;
        color: #cf1414;
    }

.hora[data-estado="ocupado"]:hover {
    background: #fff
}

.hora[data-estado="ocupado"]:hover:after {
    content: ' no anulable';
    font-size: .8em
}

.hora[data-estado="libre"]:hover:after {
    content: ' reservar';
    color: #59ab3e;
    text-align: center;
    font-size: .8em
}

.hora[data-estado="owner"]:hover:after {
    content: ' anular';
    color: #ff686f;
    text-align: center;
    font-size: .8em
}

.precios_calendar2 {
    color: #5c6c77;
    display: inline-block;
    text-align: center;
    font-size: 1.0em !important;
    text-align: right;
    padding-bottom: 1em;
    font-weight: 500;
    float: right;
    padding-right: .8em
}

.precios_calendar {
    color: #ffffff;
    display: inline-block;
    text-align: center;
    font-size: .9em;
    text-align: right;
    padding-bottom: 1em;
    font-weight: 400;
    float: right;
    padding-right: .8em
}

#doNothing {text-decoration:none !important; }

#inContentModal span.response {
    display: block;
    text-align: center;
    font-size: 2em;
    font-weight: 800;
    padding: 2em 0 0;
    margin: 1.5em auto 0;
    overflow: hidden;
    color: blue; /* #53ded8; */
}

#modalCalendario,
.modal {
    position: fixed;
    z-index: 3;
    background: rgba(0, 0, 0, 0.83);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: none;
}

#modalCalendario>div,
.modal>div {
    position: relative;
    height: 380px;
    max-width: 550px;
    background: #fff;
    -webkit-box-shadow: 0 4px 20px #000;
    -webkit-box-shadow: 0 4px 20px #000;
    box-shadow: 0 4px 20px #000;
    margin: .5em auto;
}

#modalCalendario>div .response,
.modal>div .response {
    display: block;
    width: 80%;
    margin: 1em auto
}

    #modalCalendario > div h2,
    .modal > div h2 {
        background: #3e47b5;
        padding: .5em 0;
        margin: 0;
        color: #ffffff;
        font-weight: 400;
        font-size: 1.5em
    }

#modalCalendario>div p,
.modal>div p {
    padding-left: 1.5em;
    font-weight: 400;
}

#modalCalendario>div p i,
.modal>div p i {
    color: #cdcdcd;
    background-color: #949494;
    padding: .4em;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: color .5s ease-out;
    -moz-transition: color .5s ease-out;
    -o-transition: color .5s ease-out;
    -webkit-transition: color 0.5s ease-out;
    -moz-transition: color 0.5s ease-out;
    -o-transition: color 0.5s ease-out;
    -ms-transition: color 0.5s ease-out;
    transition: color 0.5s ease-out;
    -webkit-transition: background-color .3s ease-out;
    -moz-transition: background-color .3s ease-out;
    -o-transition: background-color .3s ease-out;
    -webkit-transition: background-color 0.3s ease-out;
    -moz-transition: background-color 0.3s ease-out;
    -o-transition: background-color 0.3s ease-out;
    -ms-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out
}

#modalCalendario>div p .on,
.modal>div p .on {
    color: #fff !important;
    background-color: #57f0aa;
    -webkit-transition: color .5s ease-out;
    -moz-transition: color .5s ease-out;
    -o-transition: color .5s ease-out;
    -webkit-transition: color 0.5s ease-out;
    -moz-transition: color 0.5s ease-out;
    -o-transition: color 0.5s ease-out;
    -ms-transition: color 0.5s ease-out;
    transition: color 0.5s ease-out;
    -webkit-transition: background-color .3s ease-out;
    -moz-transition: background-color .3s ease-out;
    -o-transition: background-color .3s ease-out;
    -webkit-transition: background-color 0.3s ease-out;
    -moz-transition: background-color 0.3s ease-out;
    -o-transition: background-color 0.3s ease-out;
    -ms-transition: background-color 0.3s ease-out;
    transition: background-color 0.3s ease-out
}

    #modalCalendario > div p strong,
    .modal > div p strong {
        font-weight: 400;
        color: #3e47b5;
    }

#modalCalendario>div .modal-botones,
.modal>div .modal-botones {
    bottom: 0;
    width: 100%;
    clear: both;
    position: absolute;
}

#modalCalendario>div .modal-botones a,
.modal>div .modal-botones a {
    text-decoration: none;
    width: 50%;
    display: inline-block;
    padding: 1em 0;
    margin: 0;
    text-align: center
}

#modalCalendario>div .modal-botones .cancel-modal,
.modal>div .modal-botones .cancel-modal {
    background: #dd656a;
    color: #fff;
}

    #modalCalendario > div .modal-botones .supercerrar,
    .modal > div .modal-botones .supercerrar {
        color: #fff !important;
        /*background: #998787 !important;*/
        background: #4ab564 !important;
    }

#modalCalendario>div .modal-botones .confirm-modal,
.modal>div .modal-botones .confirm-modal,
#modalCalendario>div .modal-botones #actualizarUserData,
.modal>div .modal-botones #actualizarUserData {
    background: #4ab564;
    color: #fff;
}

#reg_pass_old {
    border: none;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #ededed;
    text-align: center;
    display: block;
    margin: 2.5em auto 0;
    width: 80%;
    padding: 1em
}

@media screen and (max-width:650px) {
    #modalCalendario,
    .modal {
        position: fixed;
        z-index: 3;
        background: rgba(0, 0, 0, 0.83);
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        display: none;
    }
    #modalCalendario>div,
    .modal>div {
        position: fixed;
        border: none;
        height: 380px;
        width: 99%;
        background: #fff;
        -webkit-box-shadow: 0 0 6px #818181;
        -webkit-box-shadow: 0 0 6px #818181;
        box-shadow: 0 0 6px #818181;
        top: 10px;
        margin: .3em;
        margin-left: .1em;
        left: 0
    }
}

[data-estado$="pasado"] {
    background-color: #fdf5f2 !important;
    color: #bfbfcb;
}

.hora span {
    font-size: .9em;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    padding: .3em .8em;
    float: right;
    margin-top: -.1em;
    cursor: pointer
}

.icon-ko.ownerpasado {
    display: none !important;
}

.numreservas {
    height:1.5em;
}
.quantity {
    position: relative;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}
.text-red {
    color: #ef1849 !important;
    font-weight: 600 !important;
}
.quantity input {
    width: 85px !important;
    height: 52px !important;
    line-height: 1.65;
    float: left;
    display: block;
    padding: 0;
    margin: 0;
    padding-left: 20px !important;
    margin-left:30px !important;
    border: 1px solid #eee;
}

    .quantity input:focus {
        outline: 0;
    }

.quantity-nav {
    float: left;
    position: relative;
    height: 52px;   
}

.quantity-button {
    position: relative;
    cursor: pointer;
    border-left: 1px solid #eee;
    width: 35px;
    text-align: center;
    color: #333;
    font-size: 1.0em;
    font-family: "Trebuchet MS", Helvetica, sans-serif !important;
    line-height: 1.7;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

    .quantity-button.quantity-up {
        position: absolute;
        height: 50%;
        top: 0;
        border-bottom: 1px solid #eee;
        background-color: #4ab564;
        color: white;
    }

    .quantity-button.quantity-down {
        position: absolute;
        bottom: -1px;
        height: 50%;
        background-color: #dd656a;
        color: white;
    }





.hora span[data-btn="owner"] {
    background-color: #ff686f;
    color: #fff;
}

.hora span[data-btn="ownerhoy"] {
    background-color: #071a68;
    color: #fff;
}

.hora span[data-btn="ownerpasado"] {
    background-color: #673ab7;
    color: #fff;
}

    .hora span[data-btn="owner"]:before {
        content: "anular la reserva"
    }
.hora span[data-btn="ownerhoy"]:before {
    content: "tu reserva hoy"
}

@media screen and (max-width:650px) {
    .hora span[data-btn="owner"]:before {
        content: "Anular"
    }
    .hora span[data-btn="ownerhoy"]:before {
        content: "tu reserva hoy"
    }
}


    .hora span[data-btn="ownerpasado"]:before {
        content: "Mi Reserva"
    }

    .hora span[data-btn="libre"], span[data-btn="librepasado"] {
        background-color: #6cfc86;
        color: #427e4c;
    }

        .hora span[data-btn="libre"]:before, span[data-btn="librepasado"]:before {
            content: "libre"
        }

    .hora span[data-btn="ocupado"], span[data-btn="ocupadopasado"] {
        cursor: default;
        background-color: #2715e5;
        color: #ede9e9;
    }

        .hora span[data-btn="ocupado"]:before, span[data-btn="ocupadopasado"]:before {
            content: "ocupado"
        }

.icon-ok.ownerpasado,
.icon-ok.ocupadopasado,
.icon-ko.librepasado,
.icon-ko.ocupadopasado,
.icon-other.librepasado,
.icon-ko.ownerhoy,
.icon-ok.owner,
.icon-ok.ocupado,
.icon-ko.libre,
.icon-ko.ocupado,
.icon-other.libre,
.icon-other.owner, .icon-other.ownerhoy {
    display: none
}

    footer {
        background-color: transparent;
        color: #6c6c6c;
        font-weight: 100;
        display: block;
        width: 100%;
        clear: both;
        margin-top: 3em
    }

    body.inapp footer {
        padding-top: 3em;
        display: block
    }

    body.outapp footer {
        color: #efd3b1
    }

    #logo figure {
        margin: 2em auto;
        width: 300px
    }

    .inapp #logo {
        display: none
    }

    .login_users {
        position: relative;
        max-width: 600px;
        background: #fbfbfb; /*rgba(237, 237, 237, 0.64); */
        height: auto;
        overflow: hidden;
        margin: 0 auto;
        -webkit-box-shadow: 0 0 4px rgba(51, 51, 51, 0.44);
        box-shadow: 0 0 4px rgba(51, 51, 51, 0.44);
        padding: 1em;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        font-weight: 300;
        text-align: center;
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-transition: height .2s ease-out;
        -moz-transition: height .2s ease-out;
        -o-transition: height .2s ease-out;
        -webkit-transition: height 0.2s ease-out;
        -moz-transition: height 0.2s ease-out;
        -o-transition: height 0.2s ease-out;
        -ms-transition: height 0.2s ease-out;
        transition: height 0.2s ease-out;
    }

        .login_users label,
        .login_users input {
            position: relative;
            margin: .5em auto;
            width: 580px;
            height: 2em;
            padding: .5em;
            border: none
        }

        .login_users label {
            text-align: center
        }

        .login_users #dologin,
        .login_users #doregister,
        .login_users #doactualizar,
        .login_users #doborrar {
            text-transform: uppercase;
            -webkit-transition: background-color .8s ease-out;
            -moz-transition: background-color .8s ease-out;
            -o-transition: background-color .8s ease-out;
            -webkit-transition: background-color 0.8s ease-out;
            -moz-transition: background-color 0.8s ease-out;
            -o-transition: background-color 0.8s ease-out;
            -ms-transition: background-color 0.8s ease-out;
            transition: background-color 0.8s ease-out;
            -webkit-transition: box-shadow .2s ease-out;
            -moz-transition: box-shadow .2s ease-out;
            -o-transition: box-shadow .2s ease-out;
            -webkit-transition: box-shadow 0.2s ease-out;
            -moz-transition: box-shadow 0.2s ease-out;
            -o-transition: box-shadow 0.2s ease-out;
            -ms-transition: box-shadow 0.2s ease-out;
            transition: box-shadow 0.2s ease-out;
            -webkit-transition: color .2s ease-out;
            -moz-transition: color .2s ease-out;
            -o-transition: color .2s ease-out;
            -webkit-transition: color 0.2s ease-out;
            -moz-transition: color 0.2s ease-out;
            -o-transition: color 0.2s ease-out;
            -ms-transition: color 0.2s ease-out;
            transition: color 0.2s ease-out;
            -webkit-box-shadow: none;
            box-shadow: none;
            display: inline-block;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            text-decoration: none;
            text-align: center;
            color: #fff;
            padding: .8em 3em;
            margin: 2em auto 2em;
            background-color: #3f51b5;
            -webkit-box-shadow: 0 3px 0 #b2b8bd;
            box-shadow: 0 3px 0 #b2b8bd;
            font-weight: 400;
        }

            .login_users #dologin:hover,
            .login_users #doregister:hover,
            .login_users #doactualizar:hover,
            .login_users #doborrar:hover {
                color: #fff;
                background-color: #4093ab;
                -webkit-box-shadow: 0 3px 0 #cbc9cf;
                box-shadow: 0 3px 0 #cbc9cf;
            }

        .login_users #goregistro,
        .login_users #gologin {
            color: #736e6e
        }

        .login_users span {
            font-weight: 300;
            color: #949494;
            text-align: center;
            display: block;
            margin: 1em auto 1.5em
        }

            .login_users span.title-span {
                font-weight: 300;
                color: #a8a7a3
            }

        .login_users #error {
            position: relative;
            border: 1px solid #ff686f;
            padding: 1em;
            background: #ff686f;
            color: #fff;
            text-align: center;
        }

            .login_users #error ul {
                margin: 0;
                padding: 0;
                list-style: none;
                text-align: center;
            }

                .login_users #error ul li {
                    text-align: center;
                    margin: 0;
                    padding: 0
                }

        .login_users #no-error {
            position: relative;
            border: 1px solid #59ab3e;
            padding: 1em;
            background: #59ab3e;
            color: #fff;
            text-align: center
        }

    .outapp #error,
    .outapp #no-error {
        bottom: -30px
    }

    @media screen and (max-width:650px) {
        .login_users {
            background: transparent;
            -webkit-box-shadow: none;
            box-shadow: none;
            max-width: 600px;
            margin: 0 1em;
        }

            .login_users label,
            .login_users input {
                margin: .1em auto;
                width: 94%
            }

            .login_users #dologin,
            .login_users #doregister {
                padding: .8em 0;
                width: 100%
            }

            .login_users .title-span {
                display: none
            }

        #logo figure {
            width: 200px;
            margin: 1em auto;
        }

            #logo figure img {
                width: 100%;
                height: auto
            }

        .footer p {
            font-size: .8em;
            margin: 0 auto .5em
        }
    }

    .error {
        display: none
    }

    .inapp .login_users {
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        background: none
    }

    #actualizarUsuarioModal {
        display: none
    }

    .inapp .login_users .in-inputs {
        position: absolute;
        z-index: 2;
        margin-top: 1.5em;
        left: 1.3em;
        color: #ededed
    }

    .inapp .login_users input {
        padding-left: 2em
    }

    @media screen and (max-width:650px) {
        .inapp .login_users .in-inputs {
            margin-top: 1.1em;
            left: 1.3em
        }
    }

    .rotate:hover i {
        -webkit-animation: spin 1s linear infinite;
        -moz-animation: spin 1s linear infinite;
        -webkit-animation: spin 1s linear infinite;
        -moz-animation: spin 1s linear infinite;
        -o-animation: spin 1s linear infinite;
        -ms-animation: spin 1s linear infinite;
        animation: spin 1s linear infinite
    }

    @-moz-keyframes spin {
        100% {
            -moz-transform: rotate(360deg)
        }
    }

    @-webkit-keyframes spin {
        100% {
            -webkit-transform: rotate(360deg)
        }
    }

    #datapicker-button {
        margin: 0;
        text-align: center;
        padding: 1em 0;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        position: fixed;
        left: 0;
        z-index: 2;
        display: block;
        -webkit-box-shadow: 1px -1px 4px rgba(0, 0, 0, 0.29);
        box-shadow: 1px -1px 4px rgba(0, 0, 0, 0.29)
    }

#datepickerDay {
    display: none;
    max-width: 322px;
    margin: 1em auto ;

    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
}

    a {
        text-decoration: none
    }

.ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker-header .ui-state-hover.ui-datepicker-prev-hover {
    position: absolute !important;
    top: 1.2em !important;
    /*top: 13.2em !important;*/
    margin-left: 11px !important;
    left: auto !important;
    right: auto !important
}

.ui-datepicker-header .ui-datepicker-next,
.ui-datepicker-header .ui-state-hover.ui-datepicker-next-hover {
    position: absolute !important;
    top: 1.2em !important;
    /*top: 13.2em !important;*/
    margin-left: 290px !important;
    left: auto !important;
    right: auto !important
}

    .ui-widget {
        font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
        border: none;
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0
    }

    .ui-datepicker {
        padding: 0
    }

    .ui-datepicker-header {
        border: none;
        background: transparent;
        font-weight: normal;
        font-size: 14px
    }

        .ui-datepicker-header .ui-state-hover {
            background: transparent;
            border-color: transparent;
            cursor: pointer;
            -webkit-border-radius: 0;
            border-radius: 0;
            -webkit-border-radius: 0;
            -moz-border-radius: 0
        }

    td.pagado {
        color: blue;
    }

    td.pendiente {
        color: red;
    }

    #tbanulreserva td {
        border-top: none;
        padding-top: 3px;
        padding-bottom: 3px;
        vertical-align: middle;
    }

        #tbanulreserva td.dato {
            color: blue;
            font-size: 1.2rem;
            font-weight: 400;
        }

        #tbanulreserva td.datos {
            color: blue;
            font-size: 0.9rem;
            font-weight: 400;
        }

    #tbanulreserva tr.center td {
        text-align: center;
        padding-bottom: 1px;
        padding-top: 1px;
    }

    thead {
        background: #2e3641
    }

    .ui-datepicker-calendar tr {
        height: 2.7em
    }

    table {
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .ui-datepicker .ui-datepicker-title {
        margin-top: .4em;
        margin-bottom: .3em;
        color: #2e3641;
        font-size: 1.2em;
        padding-top: 1em;
        text-align: center;
        margin-bottom: 1em
    }

    .ui-datepicker .ui-datepicker-prev-hover,
    .ui-datepicker .ui-datepicker-next-hover,
    .ui-datepicker .ui-datepicker-next,
    .ui-datepicker .ui-datepicker-prev {
        top: .9em;
        border: none
    }

    .ui-datepicker-prev.ui-state-disabled {
        color: #fff;
        cursor: default !important;
        display: none
    }

    .ui-datepicker .ui-datepicker-prev-hover {
        left: 2px
    }

    .ui-datepicker .ui-datepicker-next-hover {
        right: 2px
    }

    .ui-datepicker .ui-datepicker-next span,
    .ui-datepicker .ui-datepicker-prev span {
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #31383d;
        color: #fff;
        padding: .3em .5em !important;
        background-image: url("images/ui-icons_ffffff_256x240.png");
        background-position: -32px 0;
        margin-top: 0;
        top: 0;
        font-weight: normal
    }

    .ui-datepicker .ui-datepicker-prev span {
        background-position: -96px 0
    }

    .ui-datepicker table {
        margin: 0
    }

    .ui-datepicker th {
        padding: 1em 0;
        color: #fff; /* #ccc; */
        font-size: 13px;
        font-weight: normal;
        border: none;
        border-top: 1px solid #3a414d;
        text-align: center;
    }

.ui-datepicker td {
    background: #f7c642; /*#4093ab; */
    border: none;
    padding: 0
}

    td .ui-state-default {
        background: transparent;
        border: none;
        text-align: center;
        padding: .8em;
        margin: 0;
        font-weight: normal;
        color: #fff;
        font-size: 16px
    }

    .ui-state-disabled {
        opacity: 1;
        -ms-filter: none;
        filter: none
    }

        .ui-state-disabled .ui-state-default {
            color: #3a53a9;
            text-decoration:line-through;
        }

td .ui-state-active,
td .ui-state-hover {
    background: #0812b3; /*#388298 */
}

    #loading {
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        display: none
    }

    .spinner {
        top: 50%;
        margin: -27px auto;
        width: 40px;
        height: 40px;
        position: relative;
        text-align: center;
        -webkit-animation: rotate 2s infinite linear;
        -webkit-animation: rotate 2s infinite linear;
        -moz-animation: rotate 2s infinite linear;
        -o-animation: rotate 2s infinite linear;
        -ms-animation: rotate 2s infinite linear;
        animation: rotate 2s infinite linear
    }

    .dot1,
    .dot2 {
        width: 60%;
        height: 60%;
        display: inline-block;
        position: absolute;
        top: 0;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        -webkit-animation: bounce 2s infinite ease-in-out;
        -webkit-animation: bounce 2s infinite ease-in-out;
        -moz-animation: bounce 2s infinite ease-in-out;
        -o-animation: bounce 2s infinite ease-in-out;
        -ms-animation: bounce 2s infinite ease-in-out;
        animation: bounce 2s infinite ease-in-out
    }

    .dot1 {
        background-color: #f7105f
    }

    .dot2 {
        background-color: #fff
    }

    .dot2 {
        top: auto;
        bottom: 0;
        -webkit-animation-delay: -1s;
        -webkit-animation-delay: -1s;
        -moz-animation-delay: -1s;
        -o-animation-delay: -1s;
        -ms-animation-delay: -1s;
        animation-delay: -1s
    }

    @-webkit-keyframes rotate {
        100% {
            -webkit-transform: rotate(360deg)
        }
    }

    @-webkit-keyframes bounce {
        0%, 100% {
            -webkit-transform: scale(0)
        }

        50% {
            -webkit-transform: scale(1)
        }
    }

    @-moz-keyframes rotate {
        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg)
        }
    }

    @-webkit-keyframes rotate {
        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg)
        }
    }

    @-o-keyframes rotate {
        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg)
        }
    }

    @keyframes rotate {
        100% {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg)
        }
    }

    @-moz-keyframes bounce {
        0%, 100% {
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -o-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0);
            -webkit-transform: scale(0)
        }

        50% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -o-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            -webkit-transform: scale(1)
        }
    }

    @-webkit-keyframes bounce {
        0%, 100% {
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -o-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0);
            -webkit-transform: scale(0)
        }

        50% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -o-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            -webkit-transform: scale(1)
        }
    }

    @-o-keyframes bounce {
        0%, 100% {
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -o-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0);
            -webkit-transform: scale(0)
        }

        50% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -o-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            -webkit-transform: scale(1)
        }
    }

    @keyframes bounce {
        0%, 100% {
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -o-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0);
            -webkit-transform: scale(0)
        }

        50% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -o-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            -webkit-transform: scale(1)
        }
    }

    .admin {
        padding-left: 300px
    }

        .admin .header {
            width: 300px;
            height: 100%;
            left: 0;
            top: 0;
            overflow: hidden;
            background-color: #26282d;
            margin: 0;
            -webkit-box-shadow: 0 1px 2px #666;
            -webkit-box-shadow: 0 1px 2px #666;
            box-shadow: 0 1px 2px #666;
            overflow: auto;
            position: fixed;
        }

            .admin .header ul {
                float: right !important;
                width: 100%;
            }

                .admin .header ul li {
                    width: 100%;
                    margin: 0;
                    list-style-type: none;
                    display: block;
                    padding: 0;
                    float: left !important;
                    border-bottom: 1px solid #44474f;
                }

                    .admin .header ul li:last-child {
                        border-bottom: 1px solid #44474f !important
                    }

                    .admin .header ul li:hover {
                        background: #41454f !important
                    }

                    .admin .header ul li a {
                        padding: 1em 0 !important;
                        width: 100% !important;
                        display: block !important;
                        text-decoration: none !important;
                    }

                        .admin .header ul li a i {
                            margin-left: 1em !important
                        }

                    .admin .header ul li.current {
                        background: #41454f !important
                    }

    #botonMenuresponsive-wrapper {
        display: none
    }

    @media screen and (max-width:1000px) {
        .admin {
            padding-left: 0
        }

            .admin .header {
                width: 250px;
                height: 100%;
                left: 0;
                top: 0;
                overflow: hidden;
                margin: 0 0 0 -250px;
                -webkit-box-shadow: none;
                box-shadow: none;
                overflow: hidden;
                position: fixed;
                z-index: 3;
                -webkit-transition: background-color .2s ease-out;
                -moz-transition: background-color .2s ease-out;
                -o-transition: background-color .2s ease-out;
                -webkit-transition: background-color 0.2s ease-out;
                -moz-transition: background-color 0.2s ease-out;
                -o-transition: background-color 0.2s ease-out;
                -ms-transition: background-color 0.2s ease-out;
                transition: background-color 0.2s ease-out;
                -webkit-transition: margin .3s ease-out;
                -moz-transition: margin .3s ease-out;
                -o-transition: margin .3s ease-out;
                -webkit-transition: margin 0.3s ease-out;
                -moz-transition: margin 0.3s ease-out;
                -o-transition: margin 0.3s ease-out;
                -ms-transition: margin 0.3s ease-out;
                transition: margin 0.3s ease-out;
            }

                .admin .header .black-fondo {
                    display: none
                }

                .admin .header.open {
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    overflow: hidden;
                    margin: 0 0 0 0;
                    -webkit-box-shadow: none;
                    box-shadow: none;
                    overflow: hidden;
                    position: fixed;
                    z-index: 3;
                    -webkit-transition: background-color 0s ease-out;
                    -moz-transition: background-color 0s ease-out;
                    -o-transition: background-color 0s ease-out;
                    -webkit-transition: background-color 0s ease-out;
                    -moz-transition: background-color 0s ease-out;
                    -o-transition: background-color 0s ease-out;
                    -ms-transition: background-color 0s ease-out;
                    transition: background-color 0s ease-out;
                    -webkit-transition: margin 0s ease-out;
                    -moz-transition: margin 0s ease-out;
                    -o-transition: margin 0s ease-out;
                    -webkit-transition: margin 0s ease-out;
                    -moz-transition: margin 0s ease-out;
                    -o-transition: margin 0s ease-out;
                    -ms-transition: margin 0s ease-out;
                    transition: margin 0s ease-out
                }

            .admin #botonMenuresponsive-wrapper {
                display: block;
                position: fixed;
                position: device-fixed;
                right: 10px;
                top: 10px;
                text-decoration: none;
                cursor: pointer;
                z-index: 5;
                zoom: 1;
            }

                .admin #botonMenuresponsive-wrapper #menu-boton-responsive {
                    margin: 0;
                    padding: 0;
                    overflow: hidden;
                    height: auto;
                    width: auto;
                }

                    .admin #botonMenuresponsive-wrapper #menu-boton-responsive #middle {
                        -webkit-border-radius: 50%;
                        border-radius: 50%;
                        overflow: hidden;
                    }

                        .admin #botonMenuresponsive-wrapper #menu-boton-responsive #middle #in-menu {
                            padding: .4em 0 0 .4em;
                            height: 28px;
                            width: 28px;
                            color: #fff;
                            background-color: #46b5be;
                        }

                            .admin #botonMenuresponsive-wrapper #menu-boton-responsive #middle #in-menu i:first-child {
                                display: inline-block
                            }

                            .admin #botonMenuresponsive-wrapper #menu-boton-responsive #middle #in-menu i:last-child {
                                display: none
                            }

                    .admin #botonMenuresponsive-wrapper #menu-boton-responsive.open #middle #in-menu i:first-child {
                        display: none
                    }

                    .admin #botonMenuresponsive-wrapper #menu-boton-responsive.open #middle #in-menu i:last-child {
                        display: inline-block
                    }
    }

    #chart_container {
        position: relative;
        font-family: Arial, Helvetica, sans-serif
    }

    #chart {
        position: relative;
        left: 40px
    }

    #y_axis {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 40px
    }

    #content {
        display: none;
        max-width: 280px;
        margin: 2em auto 0;
        position: relative;
    }

        #content input[type="radio"] {
            display: none
        }

        #content input[type="text"] {
            width: 227.6px;
            padding: .5em 0 .5em 2em;
            font-weight: 300;
            -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
            -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
            border: none;
            margin: 1em auto;
            display: inline-block;
            position: relative;
            border: 11px solid #e8e3e3
        }

        #content .finding {
            position: absolute;
            color: #a8a8a8;
            z-index: 1;
            top: 37px;
            left: 16px
        }

    .deportes-tipo-pistas2 {
        display: none;
        position: relative;
    }

        .deportes-tipo-pistas2 h1 {
            font-size: 1.8em;
            margin: .67em 0;
            text-align: center;
            font-weight: 300;
            margin-bottom: -.6em;
            color: #dbd8d8;
            text-transform: uppercase
        }

    .mis-reservas-table-view {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        margin: 0 auto;
    }

    .bgred {
        background: #e1291b !important;
    }

    .bggreen {
        background: #4ab564 !important;
    }

    .mis-reservas-table-view thead {
        background: #4093ab;
        color: #fff;
        font-weight: 100 !important
    }


    #dtreservas {
        max-width: 1050px;
    }

        #dtreservas td,
        #dtreservas th {
            /* padding: .5em .5em !important; */
            text-align: center;
        }

        #dtreservas tr {
            padding: 0 1em;
            height: 3em;
            border-bottom: 1px solid rgba(128, 128, 128, 0.08)
        }
        /*
#dtreservas td.pluz0  i.on {
    display: none;
}
#dtreservas td.pluz1 i.off {
    display: none;
}
*/
        #dtreservas i.off1 {
            display: none;
        }

        #dtreservas i.on0 {
            display: none;
        }

        #dtreservas .luz0 i {
            display: none;
        }

        #dtreservas .anulado0 {
            background: #fff;
        }

        #dtreservas .anulado1 {
            background: #fff;
            color: #333
        }
        #dtreservas td.anulado1 {
            text-decoration:line-through;
        }
        #dtreservas td.anuladohoy {
            color:blue;
        }
        #dtreservas td.anulado0 {
            color: brown;
        }
        #dtreservas td.anulado2 {
            color:darkseagreen;
        }
        #dtreservas td[data-reserva] span {
            display: inline-block;
            font-weight: 100;
            padding: .2em 1em;
            cursor: pointer;
        }

        #dtreservas button[data-reserva] {
            display: inline-block;
            font-weight: 100;
            padding: .2em 1em;
            cursor: pointer;
        }
        /*
#dtreservas td[data-anulado='0'] span {
    display: inline-block;
    font-weight: 400;
    padding: .2em 1em;
    cursor: pointer;
}

#dtreservas td[data-anulado='0'] span:hover:after {
    color: #e0585e;
    content:' anular ';
}
            
*/
        #dtreservas td[data-anulado='0'] span i {
            color: #e0585e
        }
        #dtreservas td[data-anulado='hoy'] span i {
            background-color: #071a68;
            color: #fff;
        }

        /*
    #dtreservas td[data-anulado='0'] span{
        display:none;
    }   
    #dtreservas td[data-anulado='1'] a, #dtreservas td[data-anulado='2'] a {
        display: none;
    }
    */
        #dtreservas a[data-anulado='1'], #dtreservas a[data-anulado='2'], #dtreservas a[data-anulado='hoy'] {
            display: none;
        }

        #dtreservas span[data-anulado='0'] {
            display: none;
        }
        #dtreservas span[data-anulado='hoy'] {
            display: none;
        }
        #dtreservas span[data-anulado='hoy']:after {
            color: #ffffff;
            content: '- tu reserva hoy -';
            font-weight: 400;
            background-color: #4b32d5;
        }
        #dtreservas span[data-anulado='hoy'] {
            display: inline-block;
            border: 1px solid #d8d3d3;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            padding: .2em;
            font-weight: 100;
            cursor: no-drop;
        }
        #dtreservas td[data-anulado='hoy'] span i {
            color: #d8d3d3;
            display: none;
        }

        #dtreservas span[data-anulado='1']:after {
            color: #4b32d5;
            content: '- anulada -';
            font-weight: 400;
        }

        #dtreservas span[data-anulado='1'] {
            display: inline-block;
            border: 1px solid #d8d3d3;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            padding: .2em;
            font-weight: 100;
            cursor: no-drop;
        }


        #dtreservas td[data-anulado='1'] span i {
            color: #d8d3d3;
            display: none;
        }

        #dtreservas span[data-anulado='2'] {
            display: inline-block;
            border: 1px solid #d8d3d3;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            padding: .2em .6em;
            font-weight: 100;
            cursor: no-drop;
        }

            #dtreservas span[data-anulado='2']:after {
                color: #24b936;
                content: ' - pasada - ' !important;
                font-weight: 300;
            }


            #dtreservas span[data-anulado='2'] i {
                display: none
            }

    .admin #perfil .login_users {
        background-color: rgba(166, 182, 202, 0.4);
        margin: 1em auto;
        max-width: 618.7px;
        -webkit-box-shadow: 0 1px 1px #bdbfc2;
        box-shadow: 0 1px 1px #bdbfc2;
    }

        .admin #perfil .login_users h3 {
            font-weight: 100;
            display: inline-block;
            color: #fff;
            padding: 1em 3em;
            background-color: #495b73;
            -webkit-border-radius: 10px;
            border-radius: 10px;
        }

            .admin #perfil .login_users h3 span {
                margin: 0
            }

    .admin #usuarios_list .mis-reservas-table-view tr:hover {
        cursor: pointer;
        background: #fff
    }

    .admin #usuarios_list .mis-reservas-table-view thead {
        background: #6893cb;
        color: #e1e5ea;
        font-weight: 100 !important;
    }

        .admin #usuarios_list .mis-reservas-table-view thead tr:hover {
            cursor: default;
            background: #6893cb
        }

    .admin #usuarios_list .mis-reservas-table-view .rol1 {
        background-color: rgba(222, 255, 15, 0.04)
    }

    .admin #usuarios_list .mis-reservas-table-view td[data-rol="1"] span {
        -webkit-box-shadow: 0 2px 0 #285ea3;
        box-shadow: 0 2px 0 #285ea3;
        font-weight: 100;
        display: inline-block;
        margin: 0 auto;
        border: 1px solid rgba(134, 182, 245, 0.54);
        -webkit-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        background: rgba(0, 110, 255, 0.75);
        color: #bfdafc;
        padding: .3em .5em;
    }

        .admin #usuarios_list .mis-reservas-table-view td[data-rol="1"] span i:last-child {
            display: none
        }

        .admin #usuarios_list .mis-reservas-table-view td[data-rol="1"] span:after {
            content: 'admin'
        }

    .admin #usuarios_list .mis-reservas-table-view td[data-rol="0"] span {
        -webkit-box-shadow: none;
        box-shadow: none;
        display: inline-block;
        margin: 0 auto;
        border: 1px solid rgba(160, 160, 160, 0.38);
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.03);
        color: #6893cb;
        padding: .3em .5em;
    }

        .admin #usuarios_list .mis-reservas-table-view td[data-rol="0"] span i:first-child {
            display: none
        }

        .admin #usuarios_list .mis-reservas-table-view td[data-rol="0"] span:after {
            content: 'user'
        }

    .mis-reservas-table-view {
        font-size: .8em !important
    }

    #usuarios_list {
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
        height: auto;
    }

        #usuarios_list .mis-reservas-table-view {
            width: 950px
        }

    @media screen and (max-width:800px) {
        #reservas_user {
            width: 100%;
            overflow: hidden;
            overflow-x: auto;
            height: auto;
        }

            #reservas_user .mis-reservas-table-view {
                width: 850px
            }
    }

    @media screen and (max-width:1300px) {
        #reservas_admin {
            width: 100%;
            overflow: hidden;
            overflow-x: auto;
            height: auto;
        }

            #reservas_admin .mis-reservas-table-view {
                width: 800px
            }
    }

    #misReservasUser,
    #misReservasUser2,
    #goHomeUser2 {
        text-align: center;
        display: block;
        width: 290px;
        padding: .8em 3em;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: 1em auto;
        background-color: #f5f1f1;
        border: 1px solid #969696;
        color: #5a5a5a;
        text-decoration: none;
        font-weight: 300;
        overflow: hidden;
        text-transform: uppercase;
        -webkit-transition: background-color .8s ease-out;
        -moz-transition: background-color .8s ease-out;
        -o-transition: background-color .8s ease-out;
        -webkit-transition: background-color 0.8s ease-out;
        -moz-transition: background-color 0.8s ease-out;
        -o-transition: background-color 0.8s ease-out;
        -ms-transition: background-color 0.8s ease-out;
        transition: background-color 0.8s ease-out;
        -webkit-transition: color .2s ease-out;
        -moz-transition: color .2s ease-out;
        -o-transition: color .2s ease-out;
        -webkit-transition: color 0.2s ease-out;
        -moz-transition: color 0.2s ease-out;
        -o-transition: color 0.2s ease-out;
        -ms-transition: color 0.2s ease-out;
        transition: color 0.2s ease-out;
    }

        #misReservasUser:hover,
        #misReservasUser2:hover,
        #goHomeUser2:hover {
            background-color: #3a3a3a;
            color: #fff; /*#b0b0b0*/
        }

#goHomeUser2 {
    background-color: #f5f1f1;
    color: #121212;
    border: 1px solid rgba(150, 150, 150, 0.28) !important;
    /*
    background-color: #4093ab;
    color: #f0f0f0; 
    border: 1px solid #2b6576;
    */
}

    #eltiempo span {
        /*display: none; */
    }

    #list-ul-time {
        margin: 0;
        padding: 0;
        display: block;
        list-style: none;
        overflow: none;
        text-align: center;
    }

        #list-ul-time li {
            margin: .5em;
            background: rgba(231, 231, 231, 0.52);
            -webkit-border-radius: 5px;
            border-radius: 5px;
            text-align: center;
            list-style: none;
            display: inline-block;
            padding: .5em 1em;
            -webkit-box-shadow: 0 1px 0 rgba(110, 110, 110, 0.21);
            box-shadow: 0 1px 0 rgba(110, 110, 110, 0.21);
        }

            #list-ul-time li p {
                padding: 0;
                margin: 0
            }

                #list-ul-time li p:first-child {
                    font-weight: 100
                }

                #list-ul-time li p:last-child {
                    font-weight: 700
                }

    .eltimepop {
        text-align: center;
        color: #a6a6a6;
        font-weight: 100
    }

    #eltiempo {
        display: block;
        overflow: hidden;
        margin: 0;
        padding: 0
    }

    #backBotones {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden
    }

    .col {
        width: 50%;
        float: left
    }
/*
    #goHomeUser2 {
        border: none !important;
        -webkit-box-shadow: 0 3px 0 #3a7f93 !important;
        box-shadow: 0 3px 0 #3a7f93 !important;
    }
   
        #goHomeUser2:hover {
            -webkit-box-shadow: 0 3px 0 #3a7f93 !important;
            box-shadow: 0 3px 0 #3a7f93 !important;
            background-color: #3a7f93 !important;
            color: #fff !important
        }
     */
    #misReservasUser2 {
        border: 1px solid rgba(150, 150, 150, 0.28) !important
    }

    .col-left a {
        float: right !important;
        margin-right: .5em !important
    }

    .col-right a {
        float: left !important;
        margin-left: 1.5em !important
    }

    @media screen and (max-width:800px) {
        .col {
            width: 100%;
            float: left
        }

        .col-left a,
        .col-right a {
            float: none !important;
            margin: .5em auto !important
        }
    }

    form {
        margin: 0
    }

    #backBotones.onlyone .col.col-left {
        width: 100%
    }

    #backBotones.onlyone a {
        float: none !important;
        margin: 1em auto !important
    }

    #backBotones.onlyone .col.col-right {
        display: none !important
    }

    @media screen and (max-width:1000px) {
        .admin .header {
            background-color: rgba(0, 0, 0, 0.79);
        }

            .admin .header .special-back {
                -webkit-box-shadow: 1px 0 2px rgba(0, 0, 0, 0.54);
                box-shadow: 1px 0 2px rgba(0, 0, 0, 0.54);
                overflow: auto;
                width: 250px !important;
                background-color: #26282d;
                position: relative;
                width: auto;
                height: 100%;
                padding: 0;
                margin: 0 0 0 -250px;
                position: fixed;
                z-index: 4;
                -webkit-transition: margin .2s ease-out;
                -moz-transition: margin .2s ease-out;
                -o-transition: margin .2s ease-out;
                -webkit-transition: margin 0.2s ease-out;
                -moz-transition: margin 0.2s ease-out;
                -o-transition: margin 0.2s ease-out;
                -ms-transition: margin 0.2s ease-out;
                transition: margin 0.2s ease-out
            }

            .admin .header.open {
                -webkit-animation: pulse 8s ease infinite alternate, nudge 8s linear infinite alternate;
                -moz-animation: pulse 8s ease infinite alternate, nudge 8s linear infinite alternate;
                -o-animation: pulse 8s ease infinite alternate, nudge 8s linear infinite alternate;
                -ms-animation: pulse 8s ease infinite alternate, nudge 8s linear infinite alternate;
                animation: pulse 8s ease infinite alternate, nudge 8s linear infinite alternate;
            }

                .admin .header.open .special-back {
                    left: 0;
                    top: 0;
                    margin: 0 0 0 0;
                    height: 100% !important;
                    background-color: #26282d !important;
                    -webkit-transition: margin .2s ease-out;
                    -moz-transition: margin .2s ease-out;
                    -o-transition: margin .2s ease-out;
                    -webkit-transition: margin 0.2s ease-out;
                    -moz-transition: margin 0.2s ease-out;
                    -o-transition: margin 0.2s ease-out;
                    -ms-transition: margin 0.2s ease-out;
                    transition: margin 0.2s ease-out
                }
    }

    .admin #backBotones {
        display: none !important
    }

    .wrap-pistas input,
    .wrap-deportes input,
    .wrap-pistas select,
    .wrap-deportes select {
        padding: 1em .5em;
        margin: .2em
    }

        .wrap-pistas input.disabled,
        .wrap-deportes input.disabled {
            color: #bababa;
            border: none;
            background: transparent;
            border: 1px solid rgba(38, 40, 45, 0.05)
        }

    .admin #misReservasUser,
    .admin #misReservasUser2 {
        display: none
    }

    #activar-check-lus input {
        cursor: pointer
    }

    .inputDeporteSty {
        border: none;
        -webkit-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        background: #ededed;
        text-align: center;
        display: block;
        margin: 2.5em auto 0;
        width: 80%;
        padding: 1em
    }

    #deleteDeporte,
    #deletePista {
        right: 14px;
        cursor: pointer;
        padding: .3em .4em;
        color: #e0585e;
        border: 1px solid #e0585e;
        margin-top: 15px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transition: color .2s ease-out;
        -moz-transition: color .2s ease-out;
        -o-transition: color .2s ease-out;
        -webkit-transition: color 0.2s ease-out;
        -moz-transition: color 0.2s ease-out;
        -o-transition: color 0.2s ease-out;
        -ms-transition: color 0.2s ease-out;
        transition: color 0.2s ease-out;
        -webkit-transition: background-color .5s ease-out;
        -moz-transition: background-color .5s ease-out;
        -o-transition: background-color .5s ease-out;
        -webkit-transition: background-color 0.5s ease-out;
        -moz-transition: background-color 0.5s ease-out;
        -o-transition: background-color 0.5s ease-out;
        -ms-transition: background-color 0.5s ease-out;
        transition: background-color 0.5s ease-out;
        position: absolute;
    }

        #deleteDeporte:hover,
        #deletePista:hover {
            background-color: #e0585e;
            color: #fff;
            -webkit-transition: color .2s ease-out;
            -moz-transition: color .2s ease-out;
            -o-transition: color .2s ease-out;
            -webkit-transition: color 0.2s ease-out;
            -moz-transition: color 0.2s ease-out;
            -o-transition: color 0.2s ease-out;
            -ms-transition: color 0.2s ease-out;
            transition: color 0.2s ease-out;
            -webkit-transition: background-color .5s ease-out;
            -moz-transition: background-color .5s ease-out;
            -o-transition: background-color .5s ease-out;
            -webkit-transition: background-color 0.5s ease-out;
            -moz-transition: background-color 0.5s ease-out;
            -o-transition: background-color 0.5s ease-out;
            -ms-transition: background-color 0.5s ease-out;
            transition: background-color 0.5s ease-out
        }

    .wrap-gestion,
    .wrap-pistas,
    .wrap-deportes {
        width: 300px;
        padding: 0 2em;
        margin: 1em .5em;
        height: auto;
        overflow: hidden;
        position: relative;
        float: left;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    }

        .wrap-gestion #no-error,
        .wrap-pistas #no-error,
        .wrap-deportes #no-error {
            display: none;
            text-align: center;
            padding: .5em;
            background-color: #66bb49;
            color: #fff;
            font-weight: 100
        }

        .wrap-gestion .clear,
        .wrap-pistas .clear,
        .wrap-deportes .clear {
            background-color: #dfdfdf;
            width: 100%;
            clear: both;
            overflow: hidden;
            height: 1px
        }

            .wrap-gestion .clear:first-child,
            .wrap-pistas .clear:first-child,
            .wrap-deportes .clear:first-child {
                background-color: rgba(223, 223, 223, 0.2);
                width: 100%;
                clear: both;
                overflow: hidden;
                height: 1px
            }

        .wrap-gestion h3,
        .wrap-pistas h3,
        .wrap-deportes h3 {
            display: inline-block;
            background-color: #fff;
            color: #4d6181;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.42);
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.42);
            font-size: 1.4em;
            padding: .7em 0;
            text-align: center;
            font-weight: 100;
            width: 100%;
        }

            .wrap-gestion h3 i,
            .wrap-pistas h3 i,
            .wrap-deportes h3 i {
                opacity: .2;
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
                filter: alpha(opacity=20)
            }

        .wrap-gestion #adddeporte,
        .wrap-pistas #adddeporte,
        .wrap-deportes #adddeporte,
        .wrap-gestion #addpista,
        .wrap-pistas #addpista,
        .wrap-deportes #addpista {
            position: absolute;
            top: 57.5px;
            display: inline-block;
            background-color: #7fe84b;
            -webkit-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            padding: .1em;
            font-size: 1.8em;
            color: #3c771e;
            -webkit-box-shadow: 0 1px 4.7px rgba(0, 0, 0, 0.71);
            box-shadow: 0 1px 4.7px rgba(0, 0, 0, 0.71);
            right: 8px;
            -webkit-transition: color .2s ease-out;
            -moz-transition: color .2s ease-out;
            -o-transition: color .2s ease-out;
            -webkit-transition: color 0.2s ease-out;
            -moz-transition: color 0.2s ease-out;
            -o-transition: color 0.2s ease-out;
            -ms-transition: color 0.2s ease-out;
            transition: color 0.2s ease-out;
            -webkit-transition: background-color .5s ease-out;
            -moz-transition: background-color .5s ease-out;
            -o-transition: background-color .5s ease-out;
            -webkit-transition: background-color 0.5s ease-out;
            -moz-transition: background-color 0.5s ease-out;
            -o-transition: background-color 0.5s ease-out;
            -ms-transition: background-color 0.5s ease-out;
            transition: background-color 0.5s ease-out;
            -webkit-transition: webkit-box-shadow .5s ease-out;
            -moz-transition: box-shadow .5s ease-out;
            -o-transition: box-shadow .5s ease-out;
            -webkit-transition: box-shadow 0.5s ease-out;
            -moz-transition: box-shadow 0.5s ease-out;
            -o-transition: box-shadow 0.5s ease-out;
            -ms-transition: box-shadow 0.5s ease-out;
            transition: box-shadow 0.5s ease-out;
        }

            .wrap-gestion #adddeporte:hover,
            .wrap-pistas #adddeporte:hover,
            .wrap-deportes #adddeporte:hover,
            .wrap-gestion #addpista:hover,
            .wrap-pistas #addpista:hover,
            .wrap-deportes #addpista:hover {
                -webkit-transition: color .2s ease-out;
                -moz-transition: color .2s ease-out;
                -o-transition: color .2s ease-out;
                -webkit-transition: color 0.2s ease-out;
                -moz-transition: color 0.2s ease-out;
                -o-transition: color 0.2s ease-out;
                -ms-transition: color 0.2s ease-out;
                transition: color 0.2s ease-out;
                -webkit-transition: background-color .5s ease-out;
                -moz-transition: background-color .5s ease-out;
                -o-transition: background-color .5s ease-out;
                -webkit-transition: background-color 0.5s ease-out;
                -moz-transition: background-color 0.5s ease-out;
                -o-transition: background-color 0.5s ease-out;
                -ms-transition: background-color 0.5s ease-out;
                transition: background-color 0.5s ease-out;
                -webkit-transition: box-shadow .5s ease-out;
                -moz-transition: box-shadow .5s ease-out;
                -o-transition: box-shadow .5s ease-out;
                -webkit-transition: box-shadow 0.5s ease-out;
                -moz-transition: box-shadow 0.5s ease-out;
                -o-transition: box-shadow 0.5s ease-out;
                -ms-transition: box-shadow 0.5s ease-out;
                transition: box-shadow 0.5s ease-out;
                background: #65b53d;
                color: #91ec64;
                -webkit-box-shadow: 0 .3px 6px #000;
                box-shadow: 0 .3px 6px #000
            }

        .wrap-gestion input.disabled,
        .wrap-pistas input.disabled,
        .wrap-deportes input.disabled {
            -webkit-text-fill-color: #800;
            border: none
        }

    .admin footer {
        display: none
    }

    .admin #modalCalendario input {
        line-height: normal;
        width: 100%;
        margin: .2em 0;
        border: none;
        text-align: center;
        padding: 10px 0;
        position: relative;
        background-color: #f9f9f9
    }

    .admin #modalCalendario select {
        text-transform: none;
        margin: 2em 0 0 10%;
        overflow: hidden;
        text-align: center
    }

    .admin #doactualizar {
        margin-right: .5em
    }

    .admin #doborrar {
        color: #f5f1f1;
        background-color: #db4545;
        -webkit-box-shadow: 0 3px 0 #a83131;
        box-shadow: 0 3px 0 #a83131;
    }

        .admin #doborrar:hover {
            background-color: #a83131;
            color: #f5f1f1;
            -webkit-box-shadow: 0 3px 0 #a83131;
            box-shadow: 0 3px 0 #a83131
        }

    #error-gestion,
    #no-error-gestion {
        display: none;
        margin: .5em 3em;
        color: #fff;
        padding: 1em 2em;
        text-align: center;
        font-weight: 100
    }

    #error-gestion {
        background-color: #ff686f
    }

    #no-error-gestion {
        background-color: #59ab3e
    }

    .error {
        display: none
    }

    .txt-left {
        text-align: left !important
    }

    @-moz-keyframes spin {
        100% {
            -webkit-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }

    @-webkit-keyframes spin {
        100% {
            -webkit-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }

    @-o-keyframes spin {
        100% {
            -webkit-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }

    @keyframes spin {
        100% {
            -webkit-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }

    @-moz-keyframes pulse {
        0%, 100% {
            background-color: rgba(37, 45, 65, 0.8)
        }

        50% {
            background-color: rgba(38, 40, 45, 0.9)
        }
    }

    @-webkit-keyframes pulse {
        0%, 100% {
            background-color: rgba(37, 45, 65, 0.8)
        }

        50% {
            background-color: rgba(38, 40, 45, 0.9)
        }
    }

    @-o-keyframes pulse {
        0%, 100% {
            background-color: rgba(37, 45, 65, 0.8)
        }

        50% {
            background-color: rgba(38, 40, 45, 0.9)
        }
    }

    @keyframes pulse {
        0%, 100% {
            background-color: rgba(37, 45, 65, 0.8)
        }

        50% {
            background-color: rgba(38, 40, 45, 0.9)
        }
    }

    @-moz-keyframes girator {
        0% {
            -webkit-transform: rotate(0);
            -moz-transform: rotate(0);
            -o-transform: rotate(0);
            -ms-transform: rotate(0);
            transform: rotate(0)
        }

        100% {
            -webkit-transform: rotate(2000deg);
            -moz-transform: rotate(2000deg);
            -o-transform: rotate(2000deg);
            -ms-transform: rotate(2000deg);
            transform: rotate(2000deg)
        }
    }

    @-webkit-keyframes girator {
        0% {
            -webkit-transform: rotate(0);
            -moz-transform: rotate(0);
            -o-transform: rotate(0);
            -ms-transform: rotate(0);
            transform: rotate(0)
        }

        100% {
            -webkit-transform: rotate(2000deg);
            -moz-transform: rotate(2000deg);
            -o-transform: rotate(2000deg);
            -ms-transform: rotate(2000deg);
            transform: rotate(2000deg)
        }
    }

    @-o-keyframes girator {
        0% {
            -webkit-transform: rotate(0);
            -moz-transform: rotate(0);
            -o-transform: rotate(0);
            -ms-transform: rotate(0);
            transform: rotate(0)
        }

        100% {
            -webkit-transform: rotate(2000deg);
            -moz-transform: rotate(2000deg);
            -o-transform: rotate(2000deg);
            -ms-transform: rotate(2000deg);
            transform: rotate(2000deg)
        }
    }

    @keyframes girator {
        0% {
            -webkit-transform: rotate(0);
            -moz-transform: rotate(0);
            -o-transform: rotate(0);
            -ms-transform: rotate(0);
            transform: rotate(0)
        }

        100% {
            -webkit-transform: rotate(2000deg);
            -moz-transform: rotate(2000deg);
            -o-transform: rotate(2000deg);
            -ms-transform: rotate(2000deg);
            transform: rotate(2000deg)
        }
    }