/* ============================================
   APOING DESIGN SYSTEM 2026
   ============================================ */
:root {
    --ap-primary: #0284C7;
    --ap-primary-dark: #0369A1;
    --ap-primary-light: #ffd6c3;
    --ap-accent: #F97316;
    --ap-accent-dark: #EA580C;
    --ap-dark: #0F172A;
    --ap-body: #334155;
    --ap-muted: #64748B;
    --ap-border: #E2E8F0;
    --ap-surface: #F1F5F9;
    --ap-card: #FFFFFF;
    --ap-radius: 12px;
    --ap-radius-sm: 8px;
    --ap-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .04);
    --ap-shadow-md: 0 4px 12px rgba(0, 0, 0, .08), 0 8px 32px rgba(0, 0, 0, .06);
}

body {
    font-family: "Poppins", "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ap-body);
    /* background-color: var(--ap-surface); */
    text-align: left;
}

    body.corporate {
        background-color: #fff;
    }

table {
    /*font: 300 14px/21px 'Open Sans',sans serif;*/
    /* background: #fafafa; */
}

h1 {
    font-size: clamp(20px, 3.5vw, 28px);
    color: var(--ap-accent);
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

h2 {
    font-size: clamp(18px, 3vw, 26px);
    color: var(--ap-dark);
    font-weight: 700;
    letter-spacing: -0.3px;
}

h3 {
    font-size: 18px;
    color: var(--ap-dark);
    font-weight: 600;
}

/* ============================================
   ARTICLE (ayuda) — heading hierarchy
   ============================================ */
article h2 {
    font-size: clamp(17px, 2.5vw, 22px);
    color: var(--ap-primary-dark);
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--ap-primary-light);
}

article h3 {
    font-size: 16px;
    color: var(--ap-body);
    font-weight: 600;
    margin-top: 1.4rem;
    margin-bottom: 0.5rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--ap-accent);
}

article h4 {
    font-size: 14px;
    color: var(--ap-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 1rem;
    margin-bottom: 0.4rem;
}

article .img-steps {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 1.25rem 0;
}

    article .img-steps figure {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
    }

    article .img-steps img {
        max-width: 180px;
        width: 100%;
        border-radius: var(--ap-radius-sm);
        border: 1px solid var(--ap-border);
        box-shadow: var(--ap-shadow);
    }

    article .img-steps figcaption {
        font-size: 12px;
        color: var(--ap-muted);
        text-align: center;
        margin-top: 6px;
    }


.migas {
    margin-top: 15px;
    margin-bottom: 20px;
}

.migas {
    /*display: flex;*/
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--ap-muted);
}

    .colorMigas,
    .migas a,
    .migas i {
        color: var(--ap-accent);
    }

table tr.alignRight,
table.setup > tbody > tr > td.alignRight,
table.setup > thead > tr > th.alignRight {
    text-align: right;
    padding-right: 10px;
}

img.logo {
    margin-top: 0px;
    width: 220px;
}

.bienvenido {
    display: block;
    float: right;
    text-align: right;
    width: auto;
    color: #000;
    padding-right: 5px;
    padding-top: -5px;
    border: 0 solid;
    height: 20px;
    position: relative;
    padding: 0;
    position: absolute;
    bottom: 0px;
    right: 16px;
    z-index: 1040;
    top: 53px;
}

.leyenda {
    margin-top: 10px;
    margin-left: 35px;
}

@media only screen and (max-width: 768px) {
    .griddiv_desliza div table#MainContent_GridView1 {
        border-spacing: 1px;
    }

    .horas {
        display: none;
    }


    .leyenda {
        margin-left: 20px;
    }



    img.logo {
        margin-top: 0px;
        width: 160px;
    }

    .bienvenido {
        top: 80px;
    }

    .footable > thead > tr > th:last-child,
    .footable > thead > tr > td:last-child {
        border-radius: 0px;
    }

    .footable > thead > tr > th:first-child,
    .footable > thead > tr > td:first-child {
        border-radius: 0px;
    }
}

#contenedorPrincipal {
    margin-top: 0px;
    /*padding:10px;*/
}

.notifPadding.msg img {
    max-width: 100%;
}

@media only screen and (min-width: 768px) {
    img.logo {
        margin-top: 0px;
        width: 240px;
    }

    h1 {
        /* color already set globally */
    }

    .page-slider {
        margin-top: -20px;
        margin-bottom: 20px;
    }

    tr.alignRight,
    .footable > tbody > tr > td.alignRight,
    .footable > thead > tr > th.alignRight {
        text-align: right;
    }

    #contenedorPrincipal {
        /*   margin-top: 20px;*/
    }

    .titleField {
        /* text-align: right;*/
    }

    .dropdown-menu {
        right: 0;
        left: initial;
    }
}

a,
a:hover,
a:active,
a:focus {
    text-decoration: none;
    color: var(--ap-primary);
    transition: color .15s;
}

    a:hover,
    a:focus {
        color: var(--ap-primary-dark);
    }


.toggleMenu.active,
.toggleMenu.focus,
.toggleMenu.hover {
    color: #fff;
}








.bienvenido ul,
ol {
    list-style: none
}

.bienvenido .nav > li {
    margin-top: -32px;
    float: right;
    z-index: 9999
}

.bienvenido .nav li ul {
    background-color: #fff;
    color: #333;
}

.bienvenido .nav li a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
    padding: 5px 5px;
    /* display: block;*/
}

.bienvenido .nav li ul li:hover {
    text-decoration: none;
    background-color: #fcf2da;
}



.bienvenido .nav li ul {
    min-width: 110px;
    /* padding-right: 10px; */
    width: 300px;
    float: right;
    /* padding-left: 10px; */
    /* padding-top: 5px; */
    /* margin-top: 4px; */
    /* padding-bottom: 5px; */
    border: 0;
    margin-top: -5px;
    /* border-bottom: 4px solid #F47D44; */
    /* border-top: 4px solid #F47D44; */
    /* padding-bottom: 2px; */
    box-shadow: 0 0.5rem 2rem 0 rgba(33, 48, 85, .31);
    border-bottom-right-radius: .4375rem;
    border-bottom-left-radius: .4375rem;
    transition: visibility 3.35s, margin 3.35s ease-in-out, opacity .35s, transform 0s;
    padding: 10px;
}


    .bienvenido .nav li ul li {
        position: relative;
        padding: 2px;
        text-align: left;
    }

        .bienvenido .nav li ul li ul {
            right: 1110px;
            top: 0
        }

.idiomas {
    display: block;
    float: right;
    text-align: right;
    width: auto;
    color: #000;
    padding-right: 5px;
    padding-top: -5px;
    border: 0 solid;
    height: 20px;
    position: relative;
    padding: 0;
    top: 3px;
    position: absolute;
    /* top: 50px; */
    right: 16px;
    z-index: 1000;
    font-size: 15px;
    /* margin-top: -65px; */
}


#footerNaranja {
    background-color: #F47D44;
    width: 100%;
    height: 22px;
    position: absolute;
    bottom: -1px;
    right: 0px;
    -moz-border-radius-topleft: 20px 20px;
    border-top-left-radius: 0px;
    vertical-align: middle;
    margin-top: 0px;
    padding-bottom: 0px;
    color: White;
    text-align: right;
}



.socialLinks ul .instagram {
    background-image: url('/images/social_icons/instagram.png')
}

    .socialLinks ul .instagram:hover {
        background-image: url('/images/social_icons/instagram-hover.png')
    }

.socialLinks ul .co {
    background-image: url('/images/social_icons/co.png')
}

    .socialLinks ul .co:hover {
        background-image: url('/Content/images/social_icons/co-hover.png')
    }

.socialLinks ul .facebook {
    background-image: url('/Content/images/social_icons/facebook.png')
}

    .socialLinks ul .facebook:hover {
        background-image: url('/Content/images/social_icons/facebook-hover.png')
    }


.socialLinks ul .linkedin {
    background-image: url('/Content/images/social_icons/linkedin.png')
}

    .socialLinks ul .linkedin:hover {
        background-image: url('/Content/images/social_icons/linkedin-hover.png')
    }

.socialLinks ul .twitter {
    background-image: url('/Content/images/social_icons/twitter.png')
}

    .socialLinks ul .twitter:hover {
        background-image: url('/Content/images/social_icons/twitter-hover.png')
    }


.socialLinks {
    position: relative;
    float: right;
    margin-right: 50px;
    margin-top: 4px;
    margin-right: 0
}

.CondicionesLinks {
    position: relative;
    float: left;
    height: auto;
    height: 50px;
    vertical-align: middle;
    margin-top: 6px
}

.social {
    height: auto;
    display: inline-block;
    margin: 0;
    padding: 0
}



    .social li a {
        background-image: none;
        display: block
    }

        .social li a span {
            display: none
        }

    .social li {
        list-style-type: none;
        display: inline-block;
        width: 25px;
        height: 25px;
    }

        .social li.ano {
            width: 80px;
            margin-top: 4px;
        }

.footerDiv {
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
    height: 41px;
    margin-bottom: 20px;
}

.freepik {
    float: right;
    margin-top: -20px;
}

.separador {
    position: relative;
    float: left;
    height: 28px;
    border-left: 1px solid #ccc;
    margin-left: 10px;
    margin-right: 10px
}

.accesoLink {
    position: relative;
    float: left;
    margin-top: 2px
}

@media only screen and (max-width: 800px) {
    .socialLinks {
        position: relative;
        float: right;
        margin-right: 50px;
        margin-top: 7px
    }

    .freepik {
        float: left;
        margin-top: 0px;
    }

    .CondicionesLinks {
        position: relative;
        float: left;
        height: auto;
        /*height: 220px;*/
        vertical-align: middle;
        margin-top: 6px
    }

    .accesoLink {
        margin-right: 0px
    }

    .separador {
        position: relative;
        float: left;
        /* height: 20px;*/
        /*border-left: 0*/
    }

    .footerDiv {
        height: 66px;
        padding-left: 5px;
        padding-right: 5px;
    }
}



.AltRow {
    /*background-color: #ffd6c3;     */
}

.row {
    /*

    margin-left: 0px;
    margin-right: 0px;
       */
}

.footable.breakpoint > tbody > tr.GridPager > td.expand {
    background: none;
    font-size: 17px;
}

    .footable.breakpoint > tbody > tr.GridPager > td.expand a {
        margin-left: 4px;
    }


.footable > tbody > tr > td,
.footable > thead > tr > th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border: 0px solid #ccc;
    text-align: inherit;
}


.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
    /* padding-left: 15px; */
    /* padding-right: 15px; */
    text-align: left;
}

.ContenidoMenuSuperior {
    margin-top: 10px;
}


.footable > thead > tr > th,
.footable > thead > tr > td {
    /* background-color: #F47D44; */
    /* background-image: -webkit-gradient(linear,left top,left bottom,from(#ebf3fc),to(#dce9f9)); */
    /* background-image: -webkit-linear-gradient(top,#ebf3fc,#dce9f9); */
    background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: linear-gradient(to bottom, #F47D44, #F47D44);
    color: #000;
    background: none;
    font-weight: 600;
    -webkit-box-shadow: 0;
    -moz-box-shadow: 0;
    box-shadow: 0;
    border-top: 0;
    text-shadow: none;
    border-bottom: 1px solid #F47D44;
    background-color: #fff !important;
    text-transform: uppercase;
}


.footable {
    border: 0px;
}


.AltRow {
    background-color: #fbf8e9;
    /*height: 30px;*/
}


.footable > tbody > tr:hover {
    background: var(--ap-primary-light);
}

.footable-cell-detail {
    background-color: #f5f5f5;
}


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


.footable.breakpoint > tbody > tr.GridPager > td.expand {
    padding: 10px;
}



.footable > tbody > tr.GridPager:hover {
    background: #fff;
}

/*Paginacion BEGIN*/
.GridPager a,
.GridPager span {
    display: block;
    height: 25px;
    width: 25px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}

.GridPager a {
    /*background-color: #f5f5f5;*/
    color: #868c93;
    border: 1px solid #dddddd;
}


    .GridPager a:hover {
        color: #333;
        background-color: #ccc;
    }


.GridPager span {
    background-color: #555;
    color: #fff;
    border: 1px solid #dddddd;
}

.GridPager .footable-toggle {
    visibility: hidden;
}

/*Paginacion END*/

/*Cuadro reservas BEGIN*/
GridHeaderBook {
    padding-left: 0px;
    border-bottom: 0px solid #229a1e;
    border-left: 0px solid #229a1e;
    background-color: #92dbf6;
    text-align: center;
    text-indent: 0px;
    /*font-family: verdana,tahoma,arial,sans-serif;*/
    /*font-size:12px;*/
    /*font-weight:normal;*/
    color: #404040;
    border: 2px solid #374f8a;
    /*background : #3b5998;*/
    background: #48515c;
    color: #fff;
}



.GridItem {
    background-color: #fff;
    cursor: pointer;
    transition: background .15s;
}




.cssBoundField {
    cursor: pointer;
    text-align: center;
    height: 25px;
    width: 14%;
    border: 2px solid #fff;
    position: relative;
    border-radius: 7px;
}

.cssBoundFieldNoDisponible {
    text-align: center;
    height: 25px;
    width: 14%;
    border: 2px solid #fff;
    border-radius: 7px;
}

.leyenda div.partido {
    text-align: right;
    border: 0px solid;
    width: 14px;
    /* right: -6px; */
    text-align: center;
    position: relative;
    color: #fff;
    margin-right: 10px;
    float: left;
    margin-bottom: 5px;
}

.leyenda div.color {
    border: 1px solid;
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 10px;
    background-color: #c6efce;
    margin-bottom: 5px;
}

.cssBoundFieldNoDisponibleCursor {
    border: 2px solid #fff;
    text-align: center;
    height: 25px;
    width: 14%;
    cursor: pointer;
}

.horas {
    text-align: right;
    vertical-align: top;
    width: 25px;
}

.icons1 {
    width: 20px;
}

.icons1Torneo {
    width: 10px;
}

.tablaHeight {
    height: 100%;
}

.icons2 {
    width: 50px;
    border: 0px solid;
    border: none;
    border-style: none;
    margin-left: 60px;
    margin-right: -50px;
}

.icons.hover {
    border-style: solid;
    border-width: 1px;
}

img {
    border-style: none
}

.txtRegistro {
    /* font-weight: bold; */
}



.GridHeaderBook {
    background: var(--ap-dark);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    padding: 8px 4px;
    border: 2px solid #fff !important;
}

.GridHeaderBook5 {
    background: var(--ap-primary);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    padding: 6px 4px;
    border: 2px solid #fff !important;
}

#MainContent_GridView1,
#MainContent_GridView2,
#MainContent_GridViewUsers {
    border-collapse: initial;
    border-spacing: 0px;
    /*font: 300 14px/18px 'Open Sans',sans serif;*/
}




#MainContent_next1 img {
    display: block;
}

#MainContent_next11 img {
    display: block;
}

#MainContent_back1 img {
    display: block;
}

#MainContent_back11 img {
    display: block;
}

.whatsApp {
    display: none;
}

.marginsAdNotif {
    margin-bottom: 20px;
}

@media (min-width: 0px) and (max-width: 600px) {
    .divCosteCuadrante.textOrientation {
        display: none;
    }

    .textOrientation,
    .textOrientationGroup {
        font-size: 0px;
        height: 0px;
    }

    .whatsApp {
        display: block;
    }

    .marginsAdNotif {
        margin-bottom: -45px;
    }

    .cortar {
        width: 200px;
        /* height:20px; */
        /* padding:20px; */
        /* border:1px solid blue; */
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}


@media (min-width: 415px) {
    .textOrientation {
        font-size: 13px;
    }
}



@media only screen and (max-width: 784px) {

    #MainContent_next1 img {
        display: none;
    }

    #MainContent_next11 img {
        display: none;
    }

    #MainContent_back1 img {
        display: none;
    }

    #MainContent_back11 img {
        display: none;
    }

    .cssBoundField {
        cursor: pointer;
        text-align: center;
        height: 25px;
        width: 13%;
        border: 2px solid #fff;
        position: relative;
    }


    .cssBoundFieldNoDisponible {
        text-align: center;
        height: 25px;
        width: 13%;
        border: 2px solid #fff;
    }

    .cssBoundFieldNoDisponibleCursor {
        text-align: center;
        height: 25px;
        width: 13%;
        border: 2px solid #fff;
        cursor: pointer;
    }

    .titleNotif {
        margin-top: 15px;
    }
}


span.ui-selectmenu-button-text {
    display: none;
}

/*Cuadro reservas END*/


.Cuadrante {
    position: relative;
}



    .Cuadrante div.condiciones {
        position: absolute;
        top: 0px;
        right: 10px;
        bottom: initial;
    }

    .Cuadrante div.btnOpciones {
        position: relative;
        float: left;
    }



.divCondiciones {
    /* border: 1px #ccc solid; */
    /* -webkit-box-shadow: 2px 2px 5px #999; */
    -moz-box-shadow: 2px 2px 5px #999;
    filter: shadow(color=#999999, direction=135, strength=2);
    /* box-shadow: 2px 2px 5px #999; */
    float: left;
}

    .divCondiciones .desCondiciones {
        font-weight: 500;
        font-size: 12px;
    }

.condicionescondiciones {
    margin-top: 20px;
}

.Cuadrante div.filtros table tr td {
    padding-right: 15px;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:visited {
    outline: none !important;
    background-image: none !important;
    filter: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    border: 1px solid #F47D44 !important;
    color: white !important;
    background-color: #F47D44 !important;
    border-radius: var(--ap-radius-sm) !important;
    font-weight: 500;
    transition: background-color .2s, border-color .2s, transform .15s;
}


.aspNetDisabled {
    outline: none !important;
    background-image: none !important;
    filter: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    border: 1px solid #fcc1a5;
    color: white;
    background-color: #fcc1a5;
    border-radius: 3px;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 7px 15px;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.3px;
    color: #333;
}

    .aspNetDisabled.inputform {
        background-color: #eee;
        color: #000 !important;
        opacity: 1;
    }

.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover {
    background-color: #d87503 !important;
    border: 1px solid #d87503 !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #d87503 !important;
    border-color: #d87503 !important;
    transform: translateY(-1px);
}


@media only screen and (max-width: 784px) {

    .Cuadrante div.condiciones {
        position: absolute;
        bottom: 0px;
        right: 10px;
        top: initial;
    }
}

.ui-loader {
    display: none;
}


.texto_aclaratorio {
    text-align: left;
}

#criterios {
    text-align: left;
}


.formApo {
    padding: 15px;
}

#txtMultiline {
    width: 90%;
}

.dropdown-menu > li > a {
    font-weight: 300;
}


/* Button */
.btn.default {
    color: #333333;
    background-color: #e5e5e5;
    border-color: none;
}

a.toggleMenu:hover,
a.toggleMenu:focus {
    color: #fff;
}

.footable > tbody > tr > td input,
.footable > thead > tr > th input {
    /* margin-top: 10px; */
}

.btn-sm {
    margin-top: 5px;
    margin-bottom: 5px;
    /*padding: 7px 15px;*/
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.3px;
}

.btn-xs {
    margin-top: 2px;
    margin-bottom: 0px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.3px;
}


.inputform.input90 {
    width: 100%;
}

.inputform.inputPass {
    width: 86%;
}

.inputform {
    /*font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;*/
    /*font-weight: normal;*/
    color: #404040;
    margin-top: 3px;
    height: 25px;
    /* border: 1px solid #ccc; */
    color: #555;
    padding: 0px 4px;
    background-image: none;
    border: 1px solid #e9ecef;
    border-radius: 0px;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
}

    .inputform:focus {
        border-color: #e18604;
        outline: 0;
    }


.tablaCompleta {
    /*font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;font-weight: normal;*/
    text-align: left;
    color: #404040;
    background-color: #fafafa;
    /*border: 4px #8b9dc3 solid;*/
    border: 1px #f6c35f solid;
    /*border-collapse: collapse;*/
    margin-top: 0px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 5px;
    /*padding-top:20px;*/
    /* -webkit-box-shadow: 1px 1px 2px #999; */
    -moz-box-shadow: 1px 1px 2px #999;
    filter: shadow(color=#999999, direction=135, strength=2);
    /* box-shadow: 1px 1px 2px #ddd; */
    float: left;
    width: 100%;
    border-radius: .4375rem;
    padding: 20px;
}

    .tablaCompleta td {
        padding: 3px;
        padding-left: 15px;
        padding-right: 15px;
    }



    .tablaCompleta .primera_col {
        font-weight: bold;
        text-align: right;
    }

    .tablaCompleta .texto_aclaratorio {
        text-align: left;
        margin-top: 10px;
        margin-bottom: 10px;
    }


.campo_obligatorio {
    /* position: absolute; */
    bottom: 0px;
    right: 16px;
    /* padding-top: 10px; */
    text-align: right;
}

.consentimiento {
    margin-top: 20px;
    margin-bottom: 20px;
}

.check_form input {
    width: 20px;
    height: 20px;
}

.titleField,
.titleField2 {
    font-weight: 500;
}

.padding0 {
    padding: 0px;
}

.marginbottom {
    margin-bottom: 25px;
}

.margintop {
    margin-top: 15px;
}

.dataline {
    /* margin-top: 3px; */
    /* margin-bottom: 3px; */
    /* padding: 0px; */
}

.addregister {
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0px;
}

.margintophoravz {
    margin-top: 16px;
}

.line {
    border-bottom: 1px solid #ffd6c3;
    padding-top: 2px;
    width: 90%;
    margin: auto;
}


.creartuclub {
    cursor: pointer;
}

.modal-footer .btn + .btn {
    margin-bottom: 0px;
    margin-left: 15px;
    margin-top: 0px;
}



tr.GridHeader > th,
tr.GridHeader > td {
    /* background-color: #F47D44; */
    /* background-image: -webkit-gradient(linear,left top,left bottom,from(#ebf3fc),to(#dce9f9)); */
    /* background-image: -webkit-linear-gradient(top,#ebf3fc,#dce9f9); */
    background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: linear-gradient(to bottom, #F47D44, #F47D44);
    color: #000;
    background: none;
    font-weight: 600;
    -webkit-box-shadow: 0;
    -moz-box-shadow: 0;
    box-shadow: 0;
    border-top: 0;
    text-shadow: none;
    border-bottom: 1px solid #F47D44;
    background-color: #fff !important;
    text-transform: uppercase;
}

@media only screen and (min-width: 768px) {

    tr.GridHeader > th:last-child,
    .tr.GridHeader > td:last-child {
        -moz-border-radius: 0 6px 0 0;
        -webkit-border-radius: 0 6px 0 0;
        border-radius: 0 6px 0 0;
    }



    tr.GridHeader > th:first-child,
    .tr.GridHeader > td:first-child {
        -moz-border-radius: 6px 0 0;
        -webkit-border-radius: 6px 0 0;
        border-radius: 6px 0 0;
    }

    .notifPadding.imagenRow img {
        width: 80px;
        height: 80px;
        margin-left: 10px;
        margin-top: 5px;
    }


    .deletenotifbtn {
        right: 10px;
    }

    .notifPadding.imagenRow {
        width: 110px;
    }

    .container.contPriv {
        /* padding-top: 25px; */
    }

    .titleNotif {
        margin-top: 10px;
    }
}

.GridPager tr td {
    padding-top: 20px;
    /* background-color: #fff; */
}


.notifPadding {
    padding: 0px;
    padding-right: 5px;
    padding-bottom: 15px;
    padding-top: 5px;
}



    .notifPadding.msg {
        padding: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
        background: white;
    }



.deletenotifbtn {
    position: absolute;
    right: 8px;
    margin-top: 11px;
    top: -3px;
    text-align: right;
}

.btn-facebook {
    border-style: none;
    border-color: inherit;
    border-width: 0;
    display: inline-block;
    height: 36px;
    width: 225px;
    line-height: 36px;
    /* padding: 0 14px 0 44px; */
    font-weight: normal;
    color: white;
    text-decoration: none;
    background-color: #3b5998;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    background: #3b5998 url('') no-repeat 5px center;
    margin-bottom: 13px;
    /*margin-left:152px;*/
}

label {
    font-weight: 300;
}

.margininverso {
    border-bottom: 1px solid #eee;
}

.pre-header .container .margintop {
    margin-top: 10px;
}


.filtros {
    margin-top: 20px;
}

div.ficha {
    padding: 0px;
    margin: 0px;
}

div.normas img {
    width: 100%;
}

#navPipe a {
    color: #666;
    cursor: pointer;
    font-size: 13px;
    text-decoration: none;
}

    #navPipe a:hover {
        color: #f6c35f;
        text-decoration: none;
    }

#navPipe ul {
    margin: 0;
    padding: 0;
    margin-bottom: 4px;
}

    #navPipe ul li {
        list-style-type: none;
        display: inline;
    }

#navPipe li:before {
    /*content: " | ";*/
}

#navPipe li:first-child:before {
    content: none;
}

.nombreUser img {
    margin-bottom: 8px;
}



.nombreUser .notificacion_num {
    float: right;
    position: relative;
    margin-left: 7px;
    background-color: #ff7d00;
    color: #fff;
    padding-top: 3px;
    text-align: center;
    width: 26px;
    height: 26px;
    top: 5px;
    border-radius: 100%;
    left: 5px;
}

.bell-badge {
    display: inline-block;
    background-color: #ff7d00;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    padding: 0 3px;
    margin-left: 3px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.navmenu .notificacion_num {
    float: right;
    position: absolute;
    /* margin-left: 7px; */
    background-color: #ff7d00;
    color: #fff;
    /* padding-top: 3px; */
    text-align: center;
    width: 23px;
    height: 23px;
    top: 0px;
    border-radius: 100%;
    right: 10px;
    top: 4px;
    /* right: 10px; */
    /* padding-bottom: 52px; */
}

.loading {
    position: fixed;
    z-index: 1001;
    top: 0px;
    left: 0px;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 600px;
    opacity: 0.7;
    filter: alpha(opacity=70);
    background-color: Gray;
    background-image: none;
    background-repeat: no-repeat;
    display: block;
    border: solid 1px black;
    padding: 100px 0 0 0;
}

a.tooltip2,
a.tooltip2:hover {
    color: #fff;
}


.setup.GridHeader {
    background-color: #666;
}

tr.setup.GridHeader > th,
tr.setup.GridHeader > td {
    background-color: #666;
    background-image: linear-gradient(to bottom, #666, #666);
}



.scrollup {
    opacity: .8;
    position: fixed;
    bottom: 50px;
    right: 25px;
    display: none;
    /* text-indent: -9999px; */
    z-index: 9999;
    color: #F47D44;
    font-size: 45px;
}

    .scrollup:hover {
        opacity: 1;
    }

.divCosteCuadrante {
    position: absolute;
    bottom: 0px;
    right: 0px;
    font-size: 12px;
    border: 1px solid #ccc;
    padding: 0px;
    padding-left: 3px;
    background-color: #F47D44;
    color: white;
    padding-right: 3px;
}

.cssBoundFieldNoDisponibleCursor .divCosteCuadrante {
    display: none;
}

.cssBoundFieldNoDisponible .divCosteCuadrante {
    display: none;
}

.dosdigitoscreditos {
    width: 26px;
    padding: 0px !important;
}

.cssBoundField.owner .divCosteCuadrante.textOrientation {
    display: none;
}


.btnOpciones {
    margin-top: 15px;
    position: relative;
    right: 0;
    /* width: 350px; */
    float: left;
    padding: 0px;
}

.nodisponible {
    font-weight: bold;
    color: red;
}

.dropdown-menu > li > a {
    padding-left: 12px;
}

.dropdown-menu .divider {
    margin: 2px;
}

.card {
    padding: 15px;
}

.AltRowPublicaciones {
    /*
    border: 1px solid #ccc;
    border-top: 3px solid #F47D44;
    padding-bottom: 20px;
    background-color:#fff;
    box-shadow:1px 5px 6px #ccc;
      border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
    */
    padding-bottom: 5px;
    text-align: left;
    vertical-align: text-top;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #ddd;
    /* Sombra normal */
    background-color: #fff;
    border: 0px;
    color: #fff;
    margin-top: 15px;
    color: #333;
    /* cursor: pointer; */
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
}

    .AltRowPublicaciones h3 {
        font-weight: 500;
    }

.subtitulo {
    float: left;
    position: relative;
    color: #a2a2a2
}

.AltRowPublicaciones h1 {
    line-height: 1;
    margin: 0;
    font-size: 1.7rem;
}

.subtitulo p:first-of-type:before {
    content: "";
    position: absolute;
    height: 5px;
    background: #F47D44;
    width: 35px;
    top: -0.65rem;
    border-radius: 3px;
}

.AltRowPublicaciones h2 {
    font-size: 1rem;
    font-weight: 300;
    text-transform: uppercase;
    color: #a2a2a2;
    margin-top: 5px;
    margin-bottom: 15px;
}

.gridviewNotif {
    border-collapse: separate !important;
    border-spacing: 0px 15px !important;
}


.btnClubList {
    /* height: 130px; */
    text-align: left;
    /* vertical-align: text-top; */
    /* border-radius: 20px; */
    /* box-shadow: 1px 1px 5px #ddd; */
    /* Sombra normal */
    /* margin-left: 2%; */
    /* background-color: #fff; */
    /* border: 0px; */
    /* color: #fff; */
    /* margin-top: 15px; */
    /* color: #333; */
    /* cursor: pointer; */
    /* border-top-right-radius: 0px; */
    /* border-bottom-left-radius: 0px; */
    /* border-radius: 3px; */
    /* border: 1px solid rgba(0,0,0,.125); */
}




    .btnClubList:hover {
        background-color: #F47D44;
        cursor: pointer;
        color: #fff;
    }

        .btnClubList:hover .bi.iconDropdown {
            color: #fff;
        }


.notificationcss {
    background-color: #fef0e9;
    padding-top: 5px;
    padding: 0px;
    padding-bottom: 5px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    text-align: left;
    vertical-align: text-top;
    border-radius: 0px;
    box-shadow: 0px 3px 0px #0369A1;
    /* Sombra normal */
    background-color: #fff;
    border: 0px;
    color: #fff;
    margin-top: 15px;
    color: #333;
    cursor: pointer;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    padding-top: 10px;
}


.notificationchildscss {
    /* margin-bottom:15px; */
    padding: 0px;
}

.everychildnotif {
    background-color: #fef0e9;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 10px;
}




#MainContent_divNormas img {
    max-width: 100%;
}



.adsbtc {
    width: 100%;
    text-align: center;
    position: fixed;
    bottom: 0px;
    background-color: #eee;
    z-index: 9999;
}

    .adsbtc div {
        /* padding-bottom:5px; */
        padding-top: 5px;
    }

.closeAds {
    position: absolute;
    right: 0px;
    top: -35px;
    cursor: pointer;
    color: var(--ap-dark);
    font-size: 20px;
    font-weight: bold;
    background-color: #eee;
    width: 33px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}


@media only screen and (max-width: 768px) {

    #MainContent_link_contact_to_admins,
    #link_normas,
    #MainContent_btn_reservar,
    #MainContent_link_contact_to_users,
    #MainContent_gestion_publicaciones {
        width: 100%;
    }

    .adsbtc {
        /*  visibility:visible;*/
    }
}


#MainContent_GridViewUsers td[colspan="4"] {
    background: none;
    font-weight: 500;
    background-color: #fbf8e9;
    color: #333;
    padding: 5px;
    padding-left: 20px;
}

.footable.breakpoint > tbody > tr.footable-detail-show > td.expand[colspan="4"],
.footable.breakpoint > tbody > tr > td.expand[colspan="4"] {
    background: none;
    font-weight: 500;
    background-color: #fbf8e9;
    color: #333;
    padding: 5px;
    padding-left: 20px;
}

    .footable.breakpoint > tbody > tr > td.expand[colspan="4"] > span {
        visibility: hidden;
    }

.footable-cell-detail[colspan="1"] {
    padding: 0px;
}


#MainContent_GridViewUsers.footable > tbody > tr:hover {
    background: #fff !important;
}



.cookiestable {
    width: 100%;
}

    .cookiestable tr td {
        padding: 5px;
    }

.selectOptionNoVisible {
    visibility: hidden;
    width: 1px;
}

.checkboxSelectUsers input[type=checkbox] {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    margin-top: -10px !important;
    border: 2px solid #555555;
    background-color: #eee;
}

.userCloud {
    border: 0;
    float: left;
    padding-right: 15px;
    border: 1px solid #ddd;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    margin-right: 25px;
    padding-right: 30px;
    position: relative;
}

.delfiltro {
    cursor: pointer;
    font-size: 15px;
    position: absolute;
    right: 6px;
    top: 6px;
    color: #bbb;
    font-weight: bold;
}


.userList.footable > tbody > tr > td {
    padding: 0px !important;
}




.notificationHeader {
    background-color: #fef0e9;
    padding: 10px;
    text-align: left;
    vertical-align: text-top;
    border-radius: 3px;
    box-shadow: 1px 1px 2px #F47D44;
    /* Sombra normal */
    background-color: #fff;
    border: 1px solid #fef0e9;
    color: #fff;
    margin-top: 15px;
    color: #333;
    cursor: pointer;
}



.notificationListcss {
    /*  background-color: #fff;
    padding-top: 5px;
    padding: 0px;
    padding-bottom: 5px;
    text-align: left;
    vertical-align: text-top;
    border: 1px solid #fff0e9;
    color: #fff;
    margin-top: 5px;
    color: #333;
    cursor: pointer;
    padding-top: 10px;
    font-weight: normal !important;
      */
}

    .notificationListcss div.cssUnRead:hover,
    .notificationListcss div.cssRead:hover {
        background-color: #fff0e9;
        padding-top: 5px;
        padding: 0px;
        padding-bottom: 5px;
        text-align: left;
        vertical-align: text-top;
        border: 1px solid #fff0e9;
        box-shadow: 1px 1px 5px #f6c35f;
        /* Sombra normal */
        color: #fff;
        margin-top: 5px;
        color: #333;
        cursor: pointer;
        padding-top: 10px;
        padding-left: 10px;
    }



    .notificationListcss div.cssUnRead {
        background-color: #fff0e9;
        padding-top: 5px;
        padding: 0px;
        padding-bottom: 5px;
        text-align: left;
        vertical-align: text-top;
        border: 1px solid #fff0e9;
        color: #fff;
        margin-top: 5px;
        color: #333;
        cursor: pointer;
        padding-top: 10px;
        font-weight: normal !important;
        font-weight: bold !important;
        padding-left: 10px;
    }

    .notificationListcss div.cssRead {
        background-color: #fff;
        padding-top: 5px;
        padding: 0px;
        padding-bottom: 5px;
        text-align: left;
        vertical-align: text-top;
        border: 1px solid #fFDBA6;
        color: #fff;
        margin-top: 5px;
        color: #333;
        cursor: pointer;
        padding-top: 10px;
        font-weight: normal !important;
        padding-left: 10px;
    }


.detailchildnotif {
    background-color: #fef0e9;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    float: left;
    position: relative;
    width: 100%;
}



#skillList {
    list-style-type: none;
    padding: 0px;
}

    #skillList div {
        margin-top: 2px;
        margin-bottom: 2px;
    }

        #skillList div div {
            float: right;
            position: relative;
        }

            #skillList div div.opcionText {
                float: left !important;
            }

    #skillList .impar {
        background-color: #ded;
    }

    #skillList .option {
        border: 1px solid #fFDBA6;
        padding: 0px;
    }


        #skillList .option:hover {
            background-color: #fff0e9;
            border: 1px solid #f6c35f;
        }

    #skillList .handle:hover {
        cursor: pointer;
    }

.cursor {
    cursor: pointer;
}


div.votacionesCssResult,
div.votacionesCssVoted,
div.votacionesCssNoVoted {
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 18px 20px 14px;
    margin-top: 0;
    margin-bottom: 14px;
    color: #333;
    font-weight: normal;
}

div.votacionesCssNoVoted {
    border-left: 3px solid #F47D44;
}

div.votacionesCssVoted {
    border-left: 3px solid #6c757d;
}




/* The container */
.containerRadio {
    display: block;
    position: relative;
    padding: 8px 8px 8px 38px;
    margin-bottom: 4px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background 0.15s;
}

    .containerRadio:hover {
        background-color: #fff5ef;
    }

    /* Hide the browser's default radio button */
    .containerRadio input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

/* Create a custom radio button */
.checkmark,
.checkmarkOK {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

.checkmarkDisabled {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #ccc;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.containerRadio:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.containerRadio input:checked ~ .checkmark {
    background-color: #d87503;
}

.checkmarkOK {
    background-color: #d87503;
}

    /* Create the indicator (the dot/circle - hidden when not checked) */
    .checkmark:after,
    .checkmarkOK:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the indicator (dot/circle) when checked */
    .containerRadio input:checked ~ .checkmark:after,
    .checkmarkOK:after {
        display: block;
    }

    /* Style the indicator (dot/circle) */
    .containerRadio .checkmark:after,
    .checkmarkOK:after {
        top: 9px;
        left: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
    }

#skillList div.opcionCode {
    visibility: hidden;
    width: 1px;
    font-size: 1px;
}

#skillList div.handle {
    float: left
}

#skillList div.btnDelete {
    right: -10px;
}

#lblNumNotificaciones {
    cursor: pointer !important;
}

#footerBlog ul li a:hover {
    color: #d87503 !important;
}

#footerBlog ul {
    padding: 0px;
}


#footerBlog h3 {
    margin-left: 20px !important;
}


.gm-style .gm-style-iw-c {
    max-width: 300px !important;
}

.modal-header .close {
    margin-top: -2px;
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 35px;
}

.glyphicon {
    font-size: 16px;
}

.btnMap {
    height: 30px !important;
    margin-right: 5px !important;
}


.btn-icon {
    color: var(--ap-dark);
    background-color: #fff;
    border: 1px solid var(--ap-dark);
    padding-top: 4px;
}

    .btn-icon:hover {
        color: #fff;
        border: 1px solid #ccc;
        background-color: #ccc;
        border-color: none;
    }

.btnMap {
    padding-top: 4px;
    margin-top: 0px;
}



.gm-style-iw-d {
    padding: 10px !important;
}

div.ficha.normas {
    padding-top: 15px;
}


.margintop0 {
    margin-top: 0px !important;
}

.GridPager {
    margin-top: 16px;
    margin-bottom: 24px;
}

.nav-item.nav-link {
    font-size: 15px;
    text-transform: uppercase;
    margin-right: 40px;
}

.nav-item div {
    float: left;
    margin-right: 20px;
}

.nav-link.active div {
    border-bottom: 3px solid #F47D44;
    color: #F47D44;
}


.nav-link:after {
    content: "23423423423423";
    background: #556ee6;
    height: 72px;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -1px;
    -webkit-transition: all 250ms ease 0s;
    transition: all 250ms ease 0s;
    -webkit-transform: scale(0);
    transform: scale(0)
}

.tab-pane.fade {
    /* background-color: #fafafa; */
    border-radius: .4375rem;
}


.statisticValue {
    font-weight: 700;
    font-size: 30px;
}


.viewMoreDots:after {
    content: '\2807';
    font-size: 30px;
    color: #777;
    cursor: pointer;
}

.viewMoreDotsCard {
    position: absolute;
    right: 0;
}

.viewMoreDesplegable {
    padding: 10px;
}

    .viewMoreDesplegable li {
        list-style: none;
    }

        .viewMoreDesplegable li a {
            color: #333;
            /* margin-left: 10px; */
            font-size: 14px;
        }

        .viewMoreDesplegable li:hover {
            text-decoration: none;
            background-color: #fcf2da;
        }

hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: 1px solid #f6c35f;
}




.optionDropdown {
    width: 250px;
    border-radius: 5px;
    font-size: 15px;
}

    .optionDropdown li {
        padding: 2px;
    }

        .optionDropdown li:hover,
        .dropdown-item:focus,
        .dropdown-item:hover {
            text-decoration: none;
            background-color: #fcf2da;
        }

            .optionDropdown li:hover a {
                color: #333;
            }

    .optionDropdown .divider {
        border-bottom: 1px solid #f6c35f;
        height: 1px !important;
        padding: 0px;
        padding-top: 4px;
        margin-bottom: 5px;
    }

        .optionDropdown .divider:hover {
            background-color: transparent;
        }


    .optionDropdown.small {
        width: 130px;
    }

.migas i {
    font-size: 16px;
}


.tablaTitulo h1 {
    /* margin-left: 10px; */
}

.btn-close {
    position: absolute;
    right: 15px;
}

.btn-light:hover {
    background-color: #eee;
}


.bi.iconDropdown {
    margin-right: 10px;
    font-size: 18px;
    color: #777;
}


.bi.bi-trash {
    color: red;
}


@media (min-width:1200px) {
    h3 {
        font-size: 1.5rem;
    }

    .btnAccesoAlta {
        margin-top: -15px;
    }
}


.leyenda .txt {
    width: 87%;
}


.txtAlignCenter {
    text-align: center !important;
}

.txtAlignRight {
    text-align: right !important;
}


.borderbottom {
    border-bottom: 1px solid #ccc;
}



.footable.breakpoint > tbody > tr > td > span.footable-toggle {
    margin-left: 10px;
    color: #F47D44;
}


.footable.breakpoint.toggle-medium > tbody > tr > td > span.footable-toggle {
    font-size: 20px;
    margin-top: -6px;
    /* padding-right: 10px; */
}

.comunityList.footable.breakpoint.toggle-medium > tbody > tr > td > span.footable-toggle {
    margin-top: 25px;
}

span.footable-toggle {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 10px;
}

.footable-first-column {
    padding-left: 35px;
}

.footable-row-detail-cell {
    padding: 10px;
    padding-left: 35px;
    background-color: #fafafa;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-box-shadow: 2px 2px 5px #999;
    filter: shadow(color=#999999, direction=135, strength=2);
}

#calendar > td,
#calendar tr {
    font: 300 13px / 18px "Open Sans", "sans serif" !important;
}

.ui-datepicker {
    z-index: 1000;
}



.markedFullOcupation > a {
    background-color: red !important;
    color: #fff !important;
}

.markedMiddleOcupation > a {
    background-color: #FFA500 !important;
    color: #fff !important;
}

.markedLowOcupation > a {
    background-color: #ffcf1f !important;
    color: #fff !important;
}

.ui-datepicker-calendar tr > td > a {
    border: 2px solid #fff !important;
}


.ui-datepicker-calendar tr:hover > td > a {
    border: 2px solid var(--ap-primary) !important;
}

.ui-datepicker-header {
    background-color: var(--ap-primary) !important;
    color: #fff !important;
}

.ui-widget-header {
    font-weight: 300 !important;
}

.tooltip-container {
    position: relative;
}

.tooltip-bs {
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px;
    background-color: #343a40;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
}

.tooltip-container:hover .tooltip-bs {
    visibility: visible;
}

.textOrientationGroup .bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
    /*padding-top: 7px;*/
    padding-bottom: 5px;
}

.scrollup .bi::before {
    padding-top: 7px;
    padding-left: 1px;
}

a.scrollup i.bi.bi-arrow-up {
    padding-top: 4px;
    padding-left: 9px;
    padding-bottom: 5px;
    display: block;
    /* o flex — necesario para que el padding funcione */
}

/* ============================================
   APOING 2026 - Overrides y nuevos componentes
   ============================================ */

/* --- Botones modernos --- */
/*
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:visited,
.btn-primary.active,
.blue-madison,
.blue-madison:visited {
    background-color: var(--ap-primary) !important;
    border-color: var(--ap-primary) !important;
    color: white !important;
    border-radius: var(--ap-radius-sm) !important;
    font-weight: 600 !important;
    transition: background .2s, border-color .2s, transform .15s !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.blue-madison:hover {
    background-color: var(--ap-primary-dark) !important;
    border-color: var(--ap-primary-dark) !important;
    color: white !important;
    transform: translateY(-1px);
}

.btn-primary:active,
.btn-primary.active,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active:focus,
.btn-primary:active:hover {
    background-color: var(--ap-primary-dark) !important;
    border-color: var(--ap-primary-dark) !important;
    color: white !important;
    transform: translateY(0);
}
*/

.botonWeb.button.orange,
.btn-accent {
    background-color: var(--ap-accent) !important;
    border-color: var(--ap-accent) !important;
    color: white !important;
    border-radius: var(--ap-radius-sm) !important;
    font-weight: 600 !important;
    transition: background .2s, transform .15s !important;
}

    .botonWeb.button.orange:hover,
    .btn-accent:hover {
        background-color: var(--ap-accent-dark) !important;
        border-color: var(--ap-accent-dark) !important;
        transform: translateY(-1px);
    }

/* --- Inputs modernos --- */
.inputform,
.inputformLogin {
    border: 1.5px solid var(--ap-border) !important;
    border-radius: var(--ap-radius-sm) !important;
    padding: 6px 10px;
    height: auto !important;
    font-size: 13px;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}

    .inputform:focus,
    .inputformLogin:focus {
        border-color: var(--ap-primary) !important;
        box-shadow: 0 0 0 3px rgba(2, 132, 199, .12) !important;
    }

/* --- Cards --- */
.tablaCompleta {
    border-radius: var(--ap-radius);
    padding: 20px;
    box-shadow: var(--ap-shadow);
    border: 1px solid var(--ap-border);
    margin-bottom: 16px;
}

.titleField {
    font-weight: 500;
    color: var(--ap-body);
    font-size: 13px;
}

/* --- Grid contenedor --- */
.griddiv_desliza {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--ap-radius-sm);
}

/* --- Swipe hint --- */
.swipe-hint {
    font-size: 12px;
    color: var(--ap-muted);
    text-align: center;
    padding: 5px 8px;
    background: rgba(2, 132, 199, .05);
    border-radius: 0 0 var(--ap-radius-sm) var(--ap-radius-sm);
}

/* --- Condiciones reserva --- */
.condicionescondiciones .divCondiciones {
    /*background: var(--ap-primary-light);*/
    border: 1px solid var(--ap-primary);
    border-radius: var(--ap-radius);
    padding: 12px;
    font-size: 13px;
}

/* --- Scroll up button --- */
.scrollup {
    position: fixed;
    bottom: 24px;
    right: 20px;
    background: var(--ap-accent);
    color: white !important;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    box-shadow: var(--ap-shadow-md);
    z-index: 999;
    transition: all .2s;
    text-decoration: none !important;
}

    .scrollup:hover {
        background: var(--ap-accent-dark);
        transform: translateY(-2px);
    }

/* --- Footer moderno --- */
.ap-footer {
    background: var(--ap-dark);
    color: rgba(255, 255, 255, .7);
    padding: 32px 0 24px;
    margin-top: 48px;
}

.ap-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.ap-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ap-footer-logo {
    font-size: 20px;
    font-weight: 700;
    color: white;
    letter-spacing: -0.5px;
}

.ap-footer-tagline {
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
}

.ap-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

    .ap-footer-links a {
        color: rgba(255, 255, 255, .6);
        text-decoration: none;
        font-size: 13px;
        transition: color .2s;
    }

        .ap-footer-links a:hover {
            color: white;
        }

.ap-footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .ap-footer-social a {
        color: rgba(255, 255, 255, .6);
        font-size: 20px;
        transition: color .2s;
    }

        .ap-footer-social a:hover {
            color: white;
        }

.ap-footer-copy {
    font-size: 12px;
    color: rgba(255, 255, 255, .4);
}

@media (max-width: 768px) {
    .ap-footer-inner {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* --- Paginación moderna --- */
.GridPager a {
    color: var(--ap-primary);
    border: 1px solid var(--ap-border);
    border-radius: 6px;
}

    .GridPager a:hover {
        color: white;
        background-color: var(--ap-primary);
    }

.GridPager span {
    background-color: var(--ap-primary);
    color: white;
    border: 1px solid var(--ap-primary);
    border-radius: 6px;
}



.nav-tabs > a.nav-item {
    color: #333 !important;
}


.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    border-color: #FFA500;
    border-bottom-color: #fff;
}

.nav-item.nav-link:hover {
    color: #F47D44 !important;
}

.nav-tabs {
    border-color: #FFA500;
    margin-bottom: 20px;
}

.iub__us-widget {
    visibility: hidden !important;
    height: 1px;
}

    .iub__us-widget div {
        visibility: hidden !important;
        height: 1px;
    }


#iubenda_policy #wbars {
    height: 100% !important;
}


/* ============================================
   GRIDVIEW — Modern override
   ============================================ */
.tablaTitulo {
    width: 100% !important;
    height: auto !important;
}

.ap-card tr.GridHeader > th,
.ap-card tr.GridHeader > td {
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 12px 16px !important;
    border: none !important;
    border-bottom: 2px solid var(--ap-primary-dark) !important;
}

.ap-card .GridItem td,
.ap-card .GridItem th {
    background: var(--ap-card) !important;
    font-size: 14px !important;
    padding: 5px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    vertical-align: middle !important;
    border-top: none !important;
    border-bottom: 1px solid var(--ap-border) !important;
    color: var(--ap-body) !important;
}

.ap-card .GridItem:hover td,
.ap-card .GridItem:hover th {
    background: var(--ap-primary-light) !important;
}

.ap-card .AltRow td,
.ap-card .AltRow th {
    background: var(--ap-surface) !important;
    font-size: 14px !important;
    padding: 5px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    vertical-align: middle !important;
    border-top: none !important;
    border-bottom: 1px solid var(--ap-border) !important;
    color: var(--ap-body) !important;
}

@media only screen and (max-width: 768px) {

    .ap-card .GridItem td,
    .ap-card .GridItem th {
        padding-left: 25px;
    }

    .ap-card .AltRow td,
    .ap-card .AltRow th {
        padding-left: 25px;
    }
}


.ap-card .AltRow:hover td,
.ap-card .AltRow:hover th {
    background: var(--ap-primary-light) !important;
}

.gridViewGlobal {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

/* Pagination modern */
/*
.GridPager td {
    background: transparent !important;
    border: none !important;
    padding: 12px 4px !important;
    text-align: center;
}

.GridPager a,
.GridPager span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 34px !important;
    border-radius: var(--ap-radius-sm) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 8px !important;
}
*/

.GridPager a {
    color: var(--ap-primary) !important;
    border: 1px solid var(--ap-border) !important;
    background: var(--ap-card) !important;
    text-decoration: none !important;
}

    .GridPager a:hover {
        background: var(--ap-primary-light) !important;
        border-color: var(--ap-primary) !important;
    }

.GridPager span {
    background: var(--ap-primary) !important;
    color: #fff !important;
    border: 1px solid var(--ap-primary) !important;
}

/* ============================================
   PAGE LAYOUT UTILITIES
   ============================================ */

.ap-card {
    background: var(--ap-card);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow);
    /*overflow-x: auto;*/
    -webkit-overflow-scrolling: touch;
}

.ap-search-bar {
    background: var(--ap-card);
    border-radius: var(--ap-radius);
    padding: 14px 20px;
    box-shadow: var(--ap-shadow);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Toggle / filter bar ──────────────────────────── */
.ap-toggle-bar {
    display: inline-block;
    margin-bottom: 16px;
}

.ap-switch {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    position: relative;
    background: var(--ap-card);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    padding: 12px 20px;
    box-shadow: var(--ap-shadow);
    transition: box-shadow 0.2s, border-color 0.2s;
    user-select: none;
}

    .ap-switch:hover {
        box-shadow: var(--ap-shadow-md);
        border-color: var(--ap-primary);
    }

/* Hide native checkbox — pointer-events:auto so label activation fires onchange */
.ap-switch-chk {
    position: absolute !important;
    opacity: 0;
    width: 0 !important;
    height: 0 !important;
    pointer-events: auto;
}

/* Track */
.ap-switch-track {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--ap-border);
    border-radius: 100px;
    transition: background 0.25s;
    flex-shrink: 0;
}
    /* Thumb */
    .ap-switch-track::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 1px 4px rgba(0,0,0,.18);
        transition: left 0.25s;
    }

/* Checked state: sibling selectors from the hidden input */
.ap-switch-chk:checked + .ap-switch-track {
    background: var(--ap-primary);
}

    .ap-switch-chk:checked + .ap-switch-track::after {
        left: 22px;
    }

/* Text block */
.ap-switch-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ap-switch-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ap-dark);
    line-height: 1.2;
}

.ap-switch-desc {
    font-size: 12px;
    color: var(--ap-muted);
    line-height: 1.3;
}


@media only screen and (min-width: 800px) {
    .modal-dialog.fichaComunidad {
        max-width: 800px !important;
    }
}

/* ============================================
   DESIGN SYSTEM — shared page components
   ============================================ */

/* Page header with title + action button */
.ap-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1rem;
}

    .ap-page-header h1 {
        margin: 0;
    }

/* Section subtitle / helper text */
.ap-section-intro {
    color: var(--ap-muted);
    font-size: 14px;
    margin-bottom: 1.25rem;
    line-height: 1.55;
}

/* Empty-state panel */
.ap-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--ap-muted);
}

    .ap-empty i {
        font-size: 48px;
        display: block;
        margin-bottom: 12px;
        opacity: .4;
    }

    .ap-empty p {
        font-size: 15px;
        margin: 0;
    }

/* Section card (wraps grids, forms, lists) */
.ap-card {
    background: var(--ap-card);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow);
}

.ap-card-body {
    padding: 20px 24px;
}

/* Table header in ap-card */
.ap-card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--ap-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

    .ap-card-header h2,
    .ap-card-header h3 {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        color: var(--ap-dark);
    }

/* Table inside ap-card */
.ap-card .gridViewGlobal thead th {
    background: var(--ap-surface) !important;
    color: var(--ap-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    padding: 11px 16px !important;
    border-bottom: 1px solid var(--ap-border) !important;
    border-top: none !important;
}

/* Stat / KPI tile (zona privada) */
.ap-stat {
    background: var(--ap-card);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ap-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #FFF0E8;
    color: #F47D44;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.ap-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--ap-dark);
    line-height: 1;
}

.ap-stat-label {
    font-size: 12px;
    color: var(--ap-muted);
    margin-top: 2px;
}
/* Reset para el hero público — no aplica el estilo de KPI tile */
.ap-hero .ap-stat {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: block;
}

.ap-hero .ap-stat-value, .ap-hero .ap-stat-num {
    color: #fff;
}

.ap-hero .ap-stat-label {
    color: rgba(255,255,255,.55);
}

/* Badge pill */
.ap-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.ap-badge-success {
    background: #d4edda;
    color: #155724;
}

.ap-badge-warning {
    background: #fff3cd;
    color: #856404;
}

.ap-badge-muted {
    background: #e9ecef;
    color: #495057;
}

.ap-badge-info {
    background: #d0ebff;
    color: #1c4f82;
}

.ap-badge-danger {
    background: #f8d7da;
    color: #842029;
}

/* Icon action button (small round) */
.ap-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
    background: var(--ap-surface);
    color: var(--ap-body);
}

    .ap-icon-btn:hover {
        background: var(--ap-border);
        transform: translateY(-1px);
    }

    .ap-icon-btn.danger {
        color: #dc3545;
    }

        .ap-icon-btn.danger:hover {
            background: #f8d7da;
        }

    .ap-icon-btn.success {
        color: #198754;
    }

        .ap-icon-btn.success:hover {
            background: #d4edda;
        }

/* Filter bar */
.ap-filter-bar {
    background: var(--ap-card);
    border-radius: var(--ap-radius);
    padding: 12px 18px;
    box-shadow: var(--ap-shadow);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Filter bar — mobile: stack each row full-width so all controls share the same width */
@media (max-width: 575px) {
    .ap-filter-bar {
        flex-direction: column;
        gap: 8px;
    }

        .ap-filter-bar > div {
            width: 100%;
        }

            .ap-filter-bar > div label.titleField {
                min-width: 110px;
                flex-shrink: 0;
            }

            .ap-filter-bar > div .form-control,
            .ap-filter-bar > div .form-control-sm,
            .ap-filter-bar > div .form-select,
            .ap-filter-bar > div .form-select-sm {
                flex: 1;
                min-width: 0 !important;
                width: auto !important;
            }
}

/* Breadcrumb (already .migas but adding modern reset) */
.migas {
    margin-top: 65px;
    margin-bottom: 16px;
    font-size: 13px;
}

    .migas a {
        color: var(--ap-muted) !important;
    }

        .migas a:hover {
            color: #F47D44 !important;
        }

    .migas .bi-chevron-right {
        font-size: 11px;
        color: var(--ap-muted) !important;
    }

/* General btn-outline variants — consistent radius */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
    border-radius: var(--ap-radius-sm) !important;
    font-weight: 500;
}

    /* Force icon color to white on hover for all outline buttons */
    .btn-outline-primary:hover i, .btn-outline-primary:focus i,
    .btn-outline-secondary:hover i, .btn-outline-secondary:focus i,
    .btn-outline-success:hover i, .btn-outline-success:focus i,
    .btn-outline-danger:hover i, .btn-outline-danger:focus i,
    .btn-outline-warning:hover i, .btn-outline-warning:focus i,
    .btn-outline-info:hover i, .btn-outline-info:focus i {
        color: #fff !important;
    }

/* tablaTitulo — legacy compat; keep it harmless */
.tablaTitulo {
    margin-bottom: 0;
}

    .tablaTitulo h1 {
        margin: 0;
    }

/* ── Nav SVG icons ── */
.nav-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    margin-top: -3px;
    flex-shrink: 0;
}

/* ============================================
   LIST PAGES — shared table utilities
   ============================================ */

/* Right-align action column td cells */
td.alignRight {
    text-align: right;
}

/* Title cell — bold first data column */
.pub-title {
    font-weight: 600;
    color: var(--ap-dark);
}

/* Action cell — keep buttons on one line */
.pub-actions {
    white-space: nowrap;
    text-align: right;
}

    .pub-actions .btn {
        padding: 1px 7px;
        font-size: 1.1rem;
    }

/* Shared badge styles for status labels */
.pub-badge {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 600;
    border-radius: 20px;
    padding: 2px 9px;
}

.pub-badge-pub {
    background: #dcfce7;
    color: #15803d;
}

.pub-badge-draft {
    background: #fef9c3;
    color: #854d0e;
}

.pub-badge-priv {
    background: #f1f5f9;
    color: #475569;
}

/* Date columns — hide on small screens */
@media (max-width: 640px) {
    .pub-col-dates {
        display: none !important;
    }
}

/* ap-card — ensure border-radius wraps table corners correctly */
.ap-card {
    overflow: hidden;
}

/* ap-filter-bar search input — consistent with select size */
.ap-filter-bar .form-control-sm {
    height: calc(1.5em + .5rem + 2px);
}

/* ===== GRIDPAGER — modern redesign (overrides all legacy definitions) ====
   ASP.NET renders pager as:
     <tr class="GridPager"><td colspan="N"><table><tr><td>«</td><td><span>1</span></td>…</tr></table></td></tr>
   ========================================================================= */

/* Outer pager row — no visual chrome */
.GridPager {
    background: transparent !important;
}

    .GridPager > td {
        background: transparent !important;
        border: none !important;
        padding: 14px 16px !important;
        text-align: center !important;
    }

        /* Inner table ASP.NET generates */
        .GridPager > td > table {
            border-collapse: separate !important;
            border-spacing: 3px !important;
            margin: 0 auto !important;
        }

            .GridPager > td > table > tbody > tr > td {
                padding: 0 !important;
                border: none !important;
                background: transparent !important;
                vertical-align: middle !important;
            }

    /* Every link and current-page span */
    .GridPager a,
    .GridPager span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 34px !important;
        height: 34px !important;
        padding: 0 10px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        border: 1px solid var(--ap-border) !important;
        transition: background .15s, border-color .15s, color .15s !important;
        white-space: nowrap !important;
    }

    /* Inactive page links */
    .GridPager a {
        background: #fff !important;
        color: var(--ap-body) !important;
    }

        .GridPager a:hover {
            background: var(--ap-surface) !important;
            border-color: var(--ap-primary) !important;
            color: var(--ap-primary) !important;
        }

    /* Current page (rendered as <span>, no link) */
    .GridPager span {
        background: var(--ap-primary) !important;
        color: #fff !important;
        border-color: var(--ap-primary) !important;
    }

    /* First «  and Last » navigation buttons — slightly different style */
    .GridPager td:first-child a,
    .GridPager td:last-child a {
        background: var(--ap-surface) !important;
        border-color: var(--ap-border) !important;
        color: var(--ap-muted) !important;
        font-weight: 600 !important;
        font-size: 15px !important;
    }

        .GridPager td:first-child a:hover,
        .GridPager td:last-child a:hover {
            background: var(--ap-primary-light) !important;
            border-color: var(--ap-primary) !important;
            color: var(--ap-primary) !important;
        }

/* Mobile: compact pager */
@media (max-width: 576px) {
    .GridPager a,
    .GridPager span {
        min-width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
        padding: 0 7px !important;
    }
}

/* Toggle bar — full width on list pages */
.ap-toggle-bar {
    width: 100%;
}

/* Mobile: action buttons full-width in card rows */
@media (max-width: 768px) {
    .pub-actions .btn {
        width: auto;
    }

    .d-inline-flex.gap-1 {
        flex-wrap: nowrap;
    }
}

tbody td {
    padding-top: 10px !important;
}

/* ── Legend callout ── */
.legend-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #94a3b8;
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 28px;
}

.legend-callout-icon {
    font-size: 18px;
    color: #64748b;
    flex-shrink: 0;
    margin-top: 1px;
}

.legend-callout-title {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 4px;
}

.legend-callout-text {
    font-size: 12px;
    color: #6c757d;
    line-height: 1.6;
}
}