/* CSS Document */
/* Colors */
/* 
    # base 
        // top #9c9c9c; - rgba(156,156,156,1);
        // txt #9c9c9c; - rgba(156,156,156,1);
    # light 
        // bg #d4d4d4; rgba(212,212,212,1);
    # dark
        // bg #424242; rgba(66,66,66 ,1);
    # cool
        // bg #ff7e00; rgba(255,126,0,1);
*/

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;1,100&display=swap');

:root {
    --bs-yellow-rgb: 232,249,57;
    --bs-blue-rgb: 42,149,255;
    --bs-pink-rgb: 254, 149, 149;
    --bs-red-rgb: 251,141,67;
}


.container-fluid{
    padding: 0!important;
}

.header {
    width: 100%;
    background-color: #9c9c9c;
    color: #FFFFFF;
    text-align: center;
    line-height: 3rem;
    font-weight: 700;
}
.user_card {
    background-color: #0163c3;
}
.h50{
    height:50px;
}
.bg-amarillo{
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-yellow-rgb), var(--bs-bg-opacity)) !important;
}
.bg-azul{
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-blue-rgb), var(--bs-bg-opacity)) !important;
}
.bg-rosa{
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-pink-rgb), var(--bs-bg-opacity)) !important;
}
.bg-rojo{
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-red-rgb), var(--bs-bg-opacity)) !important;
}
.bg-blanco{
    background-color: white;
}
.zi-100{
    z-index: 1000;
}
.input-group-text,
.login_btn{
    background: #172744 !important;
}
.card-body-overflow{
    max-height: 60vh;
    overflow-y:auto;
}
/*
  background: url('../images/bg_ag.jpg') center center no-repeat;
  background: url('../images/bg_g.jpg') top left no-repeat;
*/
.bg-1{
  background-size: cover;
  background-color: #ffffff;
  height: 100%!important;
  background: top center no-repeat;
}
.cpoint{
    cursor: pointer;
}
.mt-6{
  margin-top: 7rem !important;
}
.text-shadow {
  text-shadow: #424242 0px 0px 0px;
}
#tggl,
.bg-2{
  background: url('../images/bg_ad.jpg') top center no-repeat;
  background-size: cover;
  background-color: #ffffff;
}
.text-marca{
    color:#424242;
}
.text-all-white{
    color:#FFF;
}
.text-all-dark{
    color:#000;
}
.text-alternate{
    color:#ECECEC;
}
.btn-default{
    color: #ECECEC;
}
#tggl{
}
.fondo-1{
    background-color: rgba(231,231,231,0.20);
    background: linear-gradient(90deg, rgba(231,231,231,0.3) 0%, rgba(60,60,60,0.3) 100%, rgba(231,231,231,0.3) 100%);
}
.fondo-2{
    background-color: rgba(0,0,0,0.50);
    background: linear-gradient(2700deg, rgba(231,231,231,0.3) 0%, rgba(60,60,60,0.3) 100%, rgba(231,231,231,0.3) 100%);
}
.fondo-3{
    background-color: rgba(55,60,78,0.44);
    background: linear-gradient(1800deg, rgba(231,231,231,0.3) 0%, rgba(60,60,60,0.3) 100%, rgba(231,231,231,0.3) 100%);
}
.hvh-xx{
  min-height: 90vh !important;
}
.vh-15{
  min-height: 15vh !important;
}
.vh-25{
  min-height: 25vh !important;
}
.vh-50 {
  min-height: 50vh !important;
}
.vh-75 {
  min-height: 75vh !important;
}
.vh-90 {
  min-height: 90vh !important;
}
.max-vh-90 {
  height: 83vh!important;
  overflow-y: auto;
  margin-top: 12vh;
  position: fixed;
}
a,
a.card-link{
    text-decoration: none;
    color: black;
}
.traslucido-head{
    background-color: rgba(156,156,156,1);
}
.traslucido-foo{
    background-color: rgba(62,62,62,0.90);
}
.traslucido{
    background-color: rgba(221,221,221,0.50);
}
.card-traslucido{
    background-color: rgba(192,192,192,0.80);
}
#alpha{
    margin-top: 0;
}
section.top,
footer.footer {
    position: fixed;
    width: 100%;
    color: #000;
    z-index: 4;
    /*    
    background-color: rgba(60,154,3,0.58);
    line-height: 3rem;
    text-align: center;
    border-radius: 2% 2% 0 0;
    box-shadow: 1px 2px 5px 5px #DDD;
    */
}
section.top{
    position: fixed;
    top: 0px;
    height: 10vh;
    border-bottom: 2px solid #000;
    width: 100%;
}
footer.footer {
    bottom: 1vh;
    height: 6vh;
    font-family:  'Raleway', sans-serif;
    font-size: 6px;
    border-top: 2px solid #000;
    /*background-color: transparent*/
}
#edicion,
#torneos,
#clubes{
    margin-top: 3rem;
}
#panel,
#inicio{
    margin-top: 6.5rem;
}
thead tr th{ 
    position: sticky;
    top: 0;
    z-index: 0;
    background-color: #ffffff;
}
        
.table-responsive-xl { 
    max-height:70vh;
    overflow-y:scroll;
    overflow-x:hidden;
    padding-bottom: 50px;
}
@media (min-width: 1200px) {
    footer.footer {
        bottom: 0px;
        border-bottom: 2px solid #000;
        border-top: none;
        width: 100%;
   }
    section.top{
        width: 100%;
        top: 0vh;
    }
    section.top img{
        height: 80%;
    }
    #alpha{
        margin-top: 5.5rem;
    }
    #panel,
    #inicio{
        margin-top: 10rem;
    }
    .table-responsive-xl { 
        max-height:70vh;
    }
    .max-vh-90 {
      margin-top: 12vh;
      height: auto!important; 
      position: relative;
    }
    #betha{
        width: 100%;
        margin: auto;
    }
    .hvh-xx{
      min-height: 80vh !important;
    }
}
/* (1366x768) WXGA Display */
@media  screen and (max-width: 1366px) {
    section.top{
        height: 12vh;        
    }
    footer.footer {
        bottom: 1.5vh;
    }
}



.grecaptcha-badge {
    display: none;
}

img.card-img-top{
    max-width: 200px;
    margin: auto;
}
.img-fluid{
    max-height: 100px;
    overflow: hidden;
}
.avatar {
    width: 60px;
    height: 60px;
    overflow: hidden;
    margin: 10px;
    position: relative;
    border-radius:50%;
    background-color: white;
}
.avatar > .crop {
    position:absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
    padding: 10%;
}
.follow-ava {
    border: 3px solid rgba(0,0,0,0.1);
    display: inline-block;
    padding: 2%;
    background-color: white;
}

/* hack iphone */

#nav-side {
  padding: env(safe-area-inset-top) 0 0 env(safe-area-inset-left);
  z-index: 5;
  top: 10vh;
}

/* IPHONE */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    section.top{
        height: 12vh!important;
        padding-top: 35px!important;
    }
    .max-vh-90 {
      height: 80vh!important;
      margin-top: 8vh;
    }

}
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
    section.top{
        height: 12vh!important;
        padding-top: 35px!important;
    }
    .max-vh-90 {
      height: 80vh!important;
      margin-top: 8vh;
    }

}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    section.top{
        height: 12vh!important;
        padding-top: 10px!important;
    }
    .max-vh-90 {
      height: 80vh!important;
      margin-top: 12vh!important;
   }

} 

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
    section.top{
        height: 12vh!important;
        padding-top: 35px!important;
    }
    .max-vh-90 {
      height: 80vh!important;
      margin-top: 14vh;
    }

}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
    section.top{
        height: 12vh!important;
        padding-top: 25px!important;
    }
    .max-vh-90 {
      height: 80vh!important;
      margin-top: 8vh;
      /*border:3px solid black!important;*/
    }

}


.fadeIn {
  animation-name: fadeIn;
  animation-duration: 2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}