*, ::after, ::before {
    box-sizing: border-box;
}

a {
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  text-decoration: none;
}

a:hover, a:focus, a:active {
    text-decoration: none;
}

body{
  color: var(--body);
  background-color: var(--body-bg);
  font-family: var(--font);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  overflow-x: hidden;
}

h1, h2,  h3,  h4,  h5, h6 {
  font-family: var(--font);
}

h3{ font-size: 18px;}
h4{ font-size: 16px;}
h5{font-size: 14px;}

:root {
  --body: #1e1e1e!important;
  --font: "Outfit", sans-serif;
  --bg-principal:#52163B!important;
  --bg-btn-icon: #99587D!important;
  --gris:#666666bd!important;
  --bg-gris:#EDEDED!important;
  --border:#C2BEBE!important;
  --bg-btn-gris:#4F4F4F!important;
  --bg-search:#E9E9E9!important;
}

.fw-500{font-weight: 500;}
.fw-700{font-weight: 700;}
.fw-800{font-weight: 800;}

.btn:hover{
  color:#fff!important;
}

.clean-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cc-body{color: var(--body);}
.cc-gris{color: var(--gris);}
.cc-gris:hover{color: var(--gris)!important}
.cc-icon{color:var(--bg-btn-icon);}
.cc-font{color: var(--bg-principal);}
.cc-font:hover{color: var(--bg-principal)!important}
.s-icon i{font-size: 25px;}
.bg-gris{background-color: var(--bg-gris);}
.border-cp{border-color: var(--bg-principal);}
.opacity-1{opacity: 1!important;} 


/*********************************
 * botones
 * *******************************/
.bg-btn{
  background-color: var(--bg-btn-icon);
  color: #fff;
}

.bg-btn.bg-btn:active{
  background-color: var(--bg-btn-icon);
  border-color: var(--bg-btn-icon);
  color: #fff;
}

.bg-btn:hover{
  color: #fff;
  opacity: .8;
  background-color: var(--bg-btn-icon);
}

.bg-btn.bg-btn-gris:hover{
  background-color: var(--bg-btn-gris);
}

.bg-btn.bg-btn-gris:active{
  background-color: var(--bg-btn-gris);
  border-color: var(--bg-btn-gris);
  color: #fff;
}

.bg-btn-p{
  background-color: var(--bg-principal);
}

.bg-btn-gris{
  background-color: var(--bg-btn-gris);
} 

/*********************************
 * login
 * *******************************/
#login-home{
  background: var(--bg-principal);
  height: 100vh;
} 

#login-home #login-logo{
  height: 40vh;
}

#login-home #login-form{
  height: 60vh;
}

#login-home #login-logo  img{
  max-width: 345px;
}

#login-home #row-login label,#login-home #row-login .form-text{
  color: #fff;
  font-size: 16px;
}

#login-home #row-logo h4{
  font-size: 18px;
  font-weight: 400;
}

#login-home #row-login .form-footer *{
  font-size: 12px;
}

#login-home #row-login .link-decoration{
  text-decoration: underline;
  color: #fff;
}

/*********************************
 * inputs
 * *******************************/
.form-control{
  border-color: var(--bg-btn-icon);
}

.form-control:focus{
  border-color: var(--bg-btn-icon);
  box-shadow: 0 0 0 0.25rem rgb(79 79 79 / 10%);
}

.btn:focus{
  box-shadow:0 0 0 0.25rem rgb(222 225 229 / 25%)!important;
}

/*********************************
 * header
 * *******************************/
.header-page{
  background: var(--bg-principal);
  padding: 10px 0;
}

.header-page .logo-home img{
  max-height: 40px;
}

.header-page .navbar{
  padding: 0!important;
  height: 100%;
}

.header-page .navbar:focus-visible {
  outline: 0;
}

.header-page .navbar .navbar-toggler{
  color: #fff;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-page .navbar .navbar-toggler i{
  font-size: 30px;
}

.header-page .navbar .navbar-toggler:focus{
  box-shadow: none;
}

.header-page .navbar .offcanvas-body a{
  color: var(--gris);
}

/*********************************
 * navbar representantes
 * *******************************/
.page-apertura .navbar-representantes:focus-visible {
  outline: 0;
}

.page-apertura .navbar-representantes .navbar-toggler{
  color:  var(--bg-principal);
  height: 100%;
}

.page-apertura .navbar-representantes .navbar-toggler:focus{
  box-shadow: none;
}

.page-apertura .navbar-representantes .offcanvas-body a{
  color: var(--gris);
}

.listado-partidos{
  width: 100%!important;
}

.listado-partidos .header-page .close-btn i{
  font-size: 25px;
  cursor: pointer;
  padding: 10px;
  line-height: 20px;
}
/*********************************
 * breadcrumbs-title
 * *******************************/
.breadcrumbs-title ul li a:hover {
  text-decoration: underline;
}

.breadcrumbs-title a:hover {
  color: var(--bg-btn-icon);
  text-decoration: underline;
}

/*********************************
 * page principal
 * *******************************/
#page-principal .breadcrumbs-title{
  font-size: 24px;
}

#page-principal .breadcrumbs-title li:nth-child(2){
  font-size: 18px;
}

#page-principal .breadcrumbs-title li:nth-child(2) i{
  font-size: 23px;
}

#page-principal .breadcrumbs-title i{
  font-size: 30px;
}

#page-principal .content-options .card{
  border-radius: 1.25rem;
}

#page-principal .content-options .card:hover{
  background-color: var(--bg-principal);
}

#page-principal .content-options .card:hover i,
#page-principal .content-options .card:hover h5{
  color: #fff;
}

#page-principal .content-options .card h5{
  font-size:16px;
}

#page-principal .content-options .card img{
  max-height: 70px;
}

#page-principal .content-options .disabled .card{
  border-color: #979797;
}

#page-principal .content-options .disabled .card img{
  filter: grayscale(100%);
  opacity: .5;
}

#page-principal .content-options .disabled .card h5{
  color: #979797;
}

#page-principal .content-options .disabled .card:hover{
  background-color: var(--bg-gris);
} 

#page-principal .content-options .disabled .card:hover img{
  filter: brightness(0);
  opacity: .5;
} 

#page-principal .content-options .card:hover img{
  filter: brightness(12);  
}

/*********************************
 * row borders
 * *******************************/
.content-info .border-row .form-check-label {
  width: calc(100% - 35px);
}

.content-info .border-row.lista-partidos .form-check-label {
  width: calc(100% - 75px);
}

.content-info .border-row.lista-partidos .form-check-input:disabled{
  margin: 0;
}

.form-check-input:checked[type=radio]{
  margin: 0 15px;
}

.arrow-lista{
  cursor: pointer;
  padding: 0 0 0 15px;
}

.content-info .border-row .hora-input .form-check-label{
  width: calc(100% - 140px);
}

.form-check-input:focus{
  border-color: rgba(0,0,0,.25);
}

.form input[type="time" i] {
  border:0;
}

.form input[type="time" i]:focus-visible {
  outline:0;
}


input[type=time]::-webkit-datetime-edit-hour-field {
  background-color: #f2f4f5;
  color: var(--bg-principal);
}

input[type=time]::-webkit-datetime-edit-minute-field {
  background-color: #f2f4f5;
  color: var(--bg-principal);
}

input[type=time]::-webkit-datetime-edit-ampm-field {
  background-color: #f2f4f5;
  color: var(--bg-principal);
}


/*********************************
 * page
 * *******************************/
 .form-switch .form-check-input,
.form-switch .form-check-input:focus {
  background-image: url(../img/iconos/circle.png);
}

.form-switch .form-check-input:checked[type=checkbox]{
  background-image: url(../img/iconos/circleb.png);
}

.content-info .border-row{
  border-bottom: 1px solid var(--border);
}  

.content-info .border-row.border-row-bottom{
  border-bottom-color: var(--bg-principal);
  transition: all .5s;
}

.form-check-input{
  border-color: var(--bg-btn-icon);
}

.form-check-input:checked{
  border-color: var(--bg-principal);
  background-color: var(--bg-principal);
}

.form-check-input:focus {
  box-shadow:0 0 0 0.25rem rgb(222 225 229 / 25%)!important;
}

.archivo-image {
  position: relative;
  overflow: hidden;
  width: 50%;
  height: 200px;
  background-color: #ecedee;
  border-radius: 12px;
  margin: 0 auto;
}

.cont-image {
  padding: 10px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
} 

.cont-image:hover {
  opacity: .3;
}

#foto-acta {
  display: none;
}
.acta-frente i {
  font-size: 6rem;
}

.row-partidos img{
  max-height: 75px;
}

.row-partidos .form-control{
  max-height: 45px;
}

/*page afluencia*/
.bg-section {
  background: var(--bg-search);
  text-align: justify;
}  

.page-afluencia .input-group .buscador-btn {
  background: #fff;
  border: 1px solid;
  border-left: 0;
  border-color: var(--bg-btn-icon);
}

.buscador-btn:focus{
  box-shadow:none;
}

.page-afluencia .input-group .buscador-btn i {
  color: var(--border);
}

.row-check{
  transform-origin: top;
  transform: scaleY(0);
  height: 0;
}

.row-check.open{
  transform: scaleY(1);
  height: auto;
}

/* Media Querys */

@media (min-width: 1600px){


}

@media (min-width: 1200px) {


}
@media (min-width: 992px) and (max-width: 1199px)  {



}
@media (min-width: 992px) {

}
@media (min-width: 767px) and (max-width: 991px)  {



}

@media (max-width: 991px) {





}

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



}

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



}

/*@media (max-width: 676px)  {
}

@media (min-width: 576px) {
}
*/

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


}