:root {
    --CustColor: #0c44eb;
    --CustSoftColor: #b7cffc;
    --CustBgColor: #ffffff;
    --CustTextColor: #000000;
    --CustBorderColor: #999a9d;
    --CustGradientInitColor: #0c44eb;
    --CustGradientEndColor: #ffffff;
    --CustFillColor: #9d9d9d;
    --CustPlayingColor: green;
    --CustAlertColor: #A30327;
    --CustAlertBackColor: transparent;
    --CustBoldColor: #0c44eb;
    --CustFootToolBoxBgColor: #d7ddf0;
}

html {
    height: 100%;
}

@media (max-height: 575px) {
    .footer-tool-bar {
        display: none;
    }
}

@media (max-width: 575px) {
    .flexBox-child {
        max-width: 360px;
    }
}

@media (min-width: 768px) {
    .dropdown-submenu > .dropdown-menu {
        margin-left: -1px;
    }
    .headerImgs {
        margin-top: 130px;
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .dropdown-submenu > .dropdown-menu {
        margin-left: 25px;
    }
    .headerImgs {
        margin-top: 0px;
        margin-bottom: 20px;
    }
}

@media (min-width: 577px) {
    .nombreLargoClub {
        display: block;
    }

    .nombreCortoClub {
        display: none;
    }
}

@media (max-width: 576px) {
    .nombreLargoClub {
        display: none;
    }

    .nombreCortoClub {
        display: block;
    }
}


@media (min-width: 993px) {
    .btnBar {
        top: 105px
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .btnBar {
        top: 50px;
    }
}

@media (max-width: 767px) {
    .btnBar {
        top: 50px
    }
}


footer {
    margin-top: 40px;
}

.hoves:hover > .dropdown-menu {
    display: block !important;
    -webkit-transition: height .5s ease;
    -webkit-transition-delay: .4s;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
    -webkit-transition: height .5s ease;
    -webkit-transition-delay: .4s;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #555;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.dropdown-submenu {
    position: relative;
}

.grid {
    height: 150px;
}

.grid img {
    height: 100%
}


.upgProgreso {
    position: fixed;
    bottom: 50%;
    left: 40%;
    border: solid 2px gray;
    background-color: #FBFBFB;
    padding: 15px;
    z-index: 10;
}

.nombreClub {
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}

.nombreCortoClub, .nombreLargoClub {
}

h1, h1 select, .Name {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 2px;
    padding-bottom: 0px;
}

.Name {
    margin-left: 15px;
}

h2, h2 select {
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 0px;
}

h3 {
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 2px;
    padding-bottom: 0px;
}

h4 {
    font-size: 14px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 2px;
    padding-bottom: 0px;
}

h5 {
    font-size: 12px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 2px;
    padding-bottom: 0px;
}

.resaltado {
    font-weight: bold;
}

.error {
    font-weight: bold;
}

table {
    border: 1px solid #507CD1;
}

th, .hdr {
    border-style: none;
    font-weight: bold;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

td, .noHdr {
    border-style: none;
    padding-left: 5px;
}

.noHdr {
    text-align: center;
}

td:has(> img), td:has(> input[type='image']) {
    text-align: center;
}

.withGrid th, .withGrid .hdr {
    border: 1px solid white;
}

.withGrid td, .withGrid .noHdr {
    border: 1px solid #507CD1;
}

.withVerticalGrid td, .withVerticalGrid .noHdr {
    border-left: 1px solid #507CD1;
    border-right: 1px solid #507CD1;
}

.withVerticalGrid th {
    border-left: 1px solid white;
    border-right: 1px solid white;
}

.centered {
    text-align: center;
}

.noBreaks {
    white-space: nowrap;
}

.control-label {
}

input[type=number] {
    text-align: right;
}

.playerBox {
    top: 100px;
    width: 375px;
    border: 1px solid blue;
    overflow: auto;
    background-color: white;
    z-index: 99;
}

.playerBox header {
    margin-top: 0px;
    margin-bottom: 5px;
    background-color: blue;
    text-align: center;
    font-weight: bold;
}

.playerBox .container {
    width: 345px;
}

.playerBox .bg-imgPlayer {
    height: 100px;
    width: 100%;
}

.separadorClasif {
    border-bottom: 3px solid lightblue;
}

.primero, .segundo, .tercero, .primeroCat {
    font-weight: bold;
}

.bg-img {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.bg-logo {
    height: 140px;
    margin-left: 0px;
    margin-right: 0px;
}

.bg-imgPlayer {
    height: 50px;
    width: 40px;
    background-image: url(../imagenes/logos/player.png);
}

input[type="file"] {
    width: 100%;
    margin-bottom: 5px;
}

.form-control-listbox {
    height: 60px;
    overflow: auto;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

select.form-control, input.form-control, span.form-control {
    max-width: 500px;
}

.form-control-listbox td {
    text-align: left;
}

.form-control-listbox input {
    margin-right: 3px;
}

.form-control-listbox label {
    font-weight: normal;
}

.divCheckListBox {
    overflow: auto;
    border: 1px solid #ab0707
}

.alerta {
    border: 3px solid black;
    font-weight: bold;
    font-size: x-large
}

.progreso {
    z-index: 100;
}

.fijoCentrado {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 50px;
}

.botones {
    margin-top: 10px;
    margin-bottom: 10px;
}

.cookiesBox {
    bottom: 1rem;
    position: fixed;
    right: 0;
    border-radius: 4px;
}

.cookiesSec .row {
    display: flex;
    flex-wrap: wrap;
}

.cookiesSec .fas {
    cursor: pointer;
    font-size: 24px;
}

.cookiesSec h2 {
    margin-top: 0px;
    margin-bottom: .5rem;
    line-height: 1.2;
    font-size: 28px;
    font-weight: normal;
}

.cookiesSec p {
    font-size: 16px;
}

.cookiesSec a:hover {
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
}

.cookiesSec a.fas:hover {
    font-size: 30px;
}

.cookiesSec .p-3 {
    padding: 1rem !important;
}

.cookiesSec .pb-4 {
    padding-bottom: 1.5rem !important;
}

.cookiesSec .col-2, .cookiesSec .col-10 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.cookiesSec .col-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.cookiesSec .col-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}

.cookiesSec .w-100 {
    width: 100% !important;
}

/* Estilos para la vista de campeonatos */
.score-draw {
}

.score-draw-round {
    float: left;
}

.score-draw-round h4 {
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
}

.score-draw-cell-content {
    float: left;
    border-style: none;
    border-radius: 15px 15px;
}

.score-draw-cell-players {
    float: left;
}

.score-draw-cell-player {
    height: 24px;
}

.score-player {
    display: block;
    max-width: 190px;
    min-width: 190px;
    max-height: 24px;
    border: 1px solid lightgrey;
    padding-left: 5px;
    padding-top: 2px;
}

.score-player-name {
    width: 140px;
    display: inline-grid;
    white-space: nowrap;
}

.score-player-seed {
    display: inline-grid;
    width: 35px;
    text-align: right;
    white-space: nowrap;
}

.score-draw-h2h {
    float: left;
    width: 10px;
    vertical-align: middle;
    text-align: center;
    margin-left: 2px;
    margin-right: 10px;
}

.score-draw-h2h a {
    display: inline-block;
}

.score-draw-h2h a span {
    display: inline-block;
    color: transparent;
}

.score-draw-finalPos {
    display: none;
    float: left;
    width: 20px;
    margin-left: 2px;
}

.score-player-finalPos {
    text-align: center;
    padding-top: 2px;
}

.rrClasifPosRound {
    margin-left: 10px;
}

.rrClasif-finalPos-player {
    width: 220px;
    border: 1px solid lightgrey;
    margin-bottom: 10px;
    height: 22px;
}

.rrClasif-finalPos {
    float: left;
    width: 20px;
    text-align: center;
}

.rrClasif-finalPos-player-name {
    float: left;
    margin-left: 5px;
}

.draw-cell-match-result {
    height: 24px;
    display: none;
}

.draw-cell-match-result span {
    width: 190px;
    text-align: left;
    padding-left: 5px;
    padding-top: 3px;
}

.draw-cell-schedule {
    height: 24px;
}

.draw-cell-schedule span {
    width: 190px;
    text-align: left;
    padding-left: 5px;
    padding-top: 3px;
}

.linkVistaCampeonato {
    margin-left: 20px;
}

.oculto {
    display: none;
}

.calend-h2-eventos {
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.calend-mes {
    height: 40px;
    margin: 10px;
    text-transform: uppercase;
    padding-left: 5px;
    padding-bottom: 5px;
    font-size: x-large;
    font-weight: 500;
    -webkit-print-color-adjust: exact;
}

.calend-mes-eventos {
    margin: 10px;
}

.calend-evento {
    float: left;
    margin: 10px;
    border: 2px solid blue;
    border-radius: 10px;
    padding: 5px;
    min-height: 330px;
    max-width: 520px;
}

.calend-evento-dia {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    -webkit-print-color-adjust: exact;
}

.calend-evento-titulo {
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 500;
    padding: 5px;
    margin: 5px;
}

.calend-evento-detalle {
    float: left;
    padding: 0px 5px 10px 0px;
    line-height: 10px;
}

.calend-evento-imagen {
    float: left;
}

.calend-evento-detalles {
    margin: 5px 10px 40px 10px;
    font-size: 16px;
    font-weight: 500;
}

input[type=submit].calend-evento-detalle-boton, input[type=button].calend-evento-detalle-boton {
    margin-top: 25px;
    padding: 15px;
    font-size: large;
    border: 1px solid;
    border-radius: 10px;
}

.calend-cancelado .calend-evento-dia {
    text-transform: uppercase;
}

.calend-cancelado .calend-evento-titulo {
}

.calend-pendiente .calend-evento-dia {
    text-transform: uppercase;
}

.calend-ver-pdf {
    text-align: right;
    padding-right: 10px;
}

@media print {
    .calend-ver-pdf {
        display: none;
    }
}

.categories-box {
    max-height: 170px; 
    overflow-x: hidden; 
    overflow-y: auto;
}

.border-box {
    border: 1px solid #507CD1;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 5px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px;
}

.barraVideoInverso {
    text-align: center;
    margin-bottom: 15px;
}

.btnBar {
    /* position: sticky; */
    width: -webkit-fill-available;
    /* height: 70px; */
    padding-top: 5px;
    z-index: 90;
}

.btnBarItem {
    float: left;
    margin-right: 10px;
    margin-bottom: 5px;
    text-align: : left;
}

.btnBarItem.btnBarSearch, .btnBarItem.btnBarGoTo {
    border-radius: 10px 10px;
    border-width: 2px;
    border-style: solid;
    padding: 0px 10px 2px 10px;
    height: 35px;
}

.btnBarItem.btnBarSearch label, btnBarItem.btnBarGoTo label {
    font-weight: 400;
}

.btnBarItem.btnBarGoTo :is(input[type="submit"], select) {
    border-width: 1px;
}

.btnBarItem.btnBarSearch select {
    height: 25px;
    margin-top: 3px;
}

.btnBarItem.btnBarSearch input[type="checkbox"] {
    margin-top: 7px;
}

.btnBarItem .searchColorPickSelector {
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    text-align: center;
    padding: 3px;
    margin-top: 2px;
    height: 27px;
}

input[type=submit], input[type=button] {
    border-radius: 10px 10px;
    padding: 5px;
}

.chkbList {
    padding: 3px;
}

.chkbList td {
    text-align: left;
}

.chkbList td input[checked] {
    margin-right: 5px;
}

.treeNode {
    width: 100%;
    text-align: left;
}

.ui-autocomplete {
    width: 50px;
    cursor: pointer;
    border: 3px solid black;
    z-index: 99;
}

.ui-dialog {
    border: 10px solid;
    border-radius: 20px;
    padding: 10px;
    z-index: 99;
}

.ui-dialog-buttonset {
    padding: 10px;
}

ui-dialog-titlebar {
    font-size: large;
    font-weight: bold;
    text-align: center;
    border-bottom: 2px solid grey;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
    color: var(--CustTextColor);
}

.dialogBox.ui-dialog-content.ui-widget-content {
    color: var(--CustTextColor);
}

.ui-dialog-titlebar-close {
    display: none;
}

/* Pestañas */
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px;
    border-bottom: 1px solid #333;
    width: 100%;
}

ul.tabs li {
    float: left;
    margin: 0;
    cursor: pointer;
    padding: 0px 21px;
    height: 31px;
    line-height: 31px;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    border-bottom: 1px solid #333;
    overflow: hidden;
    position: relative;
}

.tab_last {
    border-right: 1px solid #333;
}

ul.tabs li.active {
    border-bottom: 1px solid;
    display: block;
}

.tab_container {
    display: none;
    border: 1px solid #333;
    border-top: none;
    clear: both;
    float: left;
    width: 100%;
    background: #fff;
    overflow: auto;
    margin-bottom: 10px;
}

.tab_content {
    padding: 20px;
}

.tab_drawer_heading {
    display: none;
}
/* Fin Pestañas */

.divElemHist {
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    margin-right: auto;
    margin-left: auto
}

.flexBox-center {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Barras de herramientas */
.material-icons-outlined {
    max-width: 42px;
}

.header-tool-bar p {
    margin-bottom: 0px;
}

.body-tool-bar {
    max-width: 550px;
    margin: 50px auto;
    display: flex;
    flex-wrap: wrap;
}

.body-tool-bar div {
    margin: 30px;
    transform: scale(1.25)
}

.footer-tool-bar {
    background-color: var(--CustFootToolBoxBgColor);
    border: 2px solid var(--CustBorderColor);
    position: fixed;
    bottom: 0px;
    right: 0em;
    width: fit-content;
    z-index: 99;
}

.footer-master {
    margin-bottom: 20px;
}


@media print {
    body {
        -webkit-print-color-adjust: exact;
    }
}


/* Elementos y clases parámetrizados mediante variables para la personzalización */

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


.primero {
    background-color: gold;
}

.segundo {
    background-color: silver;
}

.tercero {
    background-color: sandybrown;
}

.primeroCat {
    background-color: goldenrod;
}

body, .custHeadColor, h1, h1 select, .Name, h2, h2 select, h3, .resaltado, .draw-cell-schedule span,
.calend-h2-eventos, .calend-ver-pdf .calend-vinculo,
input[type=submit].calend-evento-detalle-boton, input[type=button].calend-evento-detalle-boton,
.footer-tool-bar a, .body-tool-bar a, .draw-cell-schedule span
{
    color: var(--CustColor);
}

.custColor, td, .noHdr, .navbar-inverse .navbar-nav > li > a:hover,
.draw-cell-schedule.draw-cell-played span, .draw-cell-match-result span,
.btnBarItem.btnBarSearch :is(input:not([type="button"]), select),
.btnBarItem .searchColorPickSelector, .ui-autocomplete, .ui-dialog-buttonset button,
ul.tabs li:hover, ul.tabs li.active
{
    color: var(--CustTextColor);
}

input[type=submit].calend-evento-detalle-boton:hover,
input[type=button].calend-evento-detalle-boton:hover,
.navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus,
input[type=submit].calend-evento-detalle-boton:hover,
input[type=button].calend-evento-detalle-boton:hover,
.custInvColor, .nombreClub, th, .hdr, .btnBarItem.btnBarSearch, .playerBox header,
.progreso, .cookiesSec h2, cookiesSec a, 
.score-draw-round h4, .score-player-finalPos, .rrClasif-finalPos, .calend-evento-dia,
.calend-pendiente .calend-evento-dia, .btnBarItem.btnBarSearch, .btnBarItem.btnBarGoTo,
.barraVideoInverso, .btnBarItem.btnBarGoTo :is(input[type="submit"], select), 
input[type=submit], input[type=button], input[type=submit].redButton, .header-tool-bar a,
.calend-mes
{
    color: var(--CustBgColor);
}

.draw-cell-schedule.draw-cell-playing span, .draw-cell-schedule.draw-cell-playing span {
    color: var(--CustPlayingColor);
}

.upgProgreso, .error, .InactivePlayer, .InactivePlayer td, td.InactivePlayer, th.hdr.InactivePlayer,
.playerBox header.inactive, .alerta, .score-draw-cell-players span.score-duration, 
.draw-cell-schedule.draw-cell-played span 
{
    color: var(--CustAlertColor);
}

.error
{
    background-color: var(--CustAlertBackColor);
}

.resaltado {
    color: var(--CustBoldColor);
}

.cookiesSec .bg-custom {
    color: var(--CustBgColor) !important;
}

.cookiesSec p, ul.tabs li {
    color: var(--CustFillColor);
}

@media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: var(--CustBgColor);
    }
}

body, .border-box, custBgColor, .custBgColor, td, .noHdr,
input[type=submit].calend-evento-detalle-boton, input[type=button].calend-evento-detalle-boton,
.btnBar, .btnBarItem .searchColorPickSelector, .ui-autocomplete, .ui-dialog, ul.tabs li.active
{
    background-color: var(--CustBgColor);
}

.custInvBgColor, .navbar-inverse, .navbar-inverse .navbar-toggle, th, .hdr,
.playerBox header, .custBorderColor, 
.score-draw-round h4, .score-draw-h2h,
.calend-evento-dia, .barraVideoInverso, input[type=submit], input[type=button], .btnBarItem.btnBarSearch,
.btnBarItem.btnBarGoTo, .btnBarItem.btnBarGoTo :is(input[type="submit"], select),
input[type=submit].calend-evento-detalle-boton:hover, input[type=button].calend-evento-detalle-boton:hover, 
.score-draw-round h4, .score-draw-h2h, .score-player-finalPos,
.rrClasif-finalPos, .barraVideoInverso, .btnBarItem.btnBarSearch, .btnBarItem.btnBarGoTo,
.btnBarItem.btnBarGoTo :is(input[type="submit"], select)
{
    background-color: var(--CustColor);
}

.altRow td:not(.hdr):not(.relleno):not(.InactivePlayer):not(.primero):not(.segundo):not(.tercero):not(.primeroCat):not(.primera),
.AlternateRows tr:nth-child(odd) td.score-player.previous, .previous .score-player-name, .previous .score-player-seed {
    background-color: var(--CustSoftColor);
}

.relleno, .alerta, .score-player.previous, .previous .score-player-name, .previous .score-player-seed,
.eachPositionMainDrawCell, ul.tabs li:hover
{
    background-color: var(--CustFillColor);
}

.calend-pendiente .calend-evento-dia, ul.tabs li
{
    background-color: var(--CustBoldColor);
}

input[type=submit].redButton
{
    background-color: var(--CustAlertColor);
}

.cookiesSec .bg-custom {
    background-color: var(--CustBoldColor);
    color: var(--CustBgColor) !important;
}

.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus,
.progreso {
    background-color: transparent;
}

.court {
    float: left;
    overflow: hidden;
    margin-right: 10px;
}

.court-match {
    margin: 10px;
    padding: 10px;
    border-width: 2px;
    border-style: solid;
    border-radius: 15px 15px;
    overflow: hidden;
    overflow-y: auto;
}

.court-match h3 {
    margin-top: 5px;
}

.court-match.over{
    border: 2px dotted #666;
}

.court-match-scheduleData span {
    display: block;
    font-weight: normal;
}

.custBorderColor, table, .withGrid td, .withGrid .noHdr, .playerBox, .withVerticalGrid td,
.withVerticalGrid .noHdr, .separadorClasif, .score-draw-cell-content, .calend-evento,
.border-box, .court-match, input[type=submit].calend-evento-detalle-boton,
input[type=button].calend-evento-detalle-boton, .score-draw-cell-content,
input[type=submit].calend-evento-detalle-boton, input[type=button].calend-evento-detalle-boton
{
    border-color: var(--CustBorderColor);
}

.btnBarItem.btnBarSearch, .btnBarItem.btnBarGoTo, .ui-dialog, .chkbList {
    border-color: var(--CustTextColor);
}

ul.tabs li.active {
    border-bottom-color: var(--CustBgColor);
}


.calend-mes {
    background: var(--CustGradientInitColor); /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, var(--CustGradientInitColor), var(--CustGradientEndColor)); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, var(--CustGradientInitColor), var(--CustGradientEndColor)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}