body{

}

.play-button{
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 36px;
    color: #FFF;
    background-color: #a32921;
    border-radius: 50%;
}

.player-one{
    background-color: gray;
    color: #fff;
    padding: 0.25rem;
    border-radius: 0.25rem;
    font-family:  "Uber Move Medium";
    width: 100%;
}

.player-two{
    background-color: #378fe9;
    color: #000;
    padding: 0.25rem;
    border-radius: 0.25rem;
    font-family:  "Uber Move Medium";
    width: 100%;
}



.icon-green{
    color:#2dce89;
}
.coliseoBox:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.coliseoBox{
	width:12rem;
	    padding-top: 1.25rem;
	    padding-bottom: 1.25rem;
	 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border: 1px solid #a3292150;
    border-radius: 6px;

}

.coliseoBox a {
	display: flex;
    flex-direction: column;
    align-items: center;
}

.swiper {
  width: 40rem;
  margin-top: 1rem;
  /*height: 300px;*/
}
.columnFight{
	display: block; 
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0.75rem;
}
@media (max-width:600px) {
   .swiper {
        width: 90%;
	margin-top: 1rem;
        /*height: 300px;*/
    }
    .coliseoBox{
        width: 40%;

     }
     .scheduleColiseo{
	font-size: smaller;
     }
     .columnFight{
	     width:100%;
	     margin-top:1rem;
     }
}


.title-coliseo{
    font-weight: 900;
    font-size: 1.6275rem;
    line-height: 1.5;
    margin-left: 0.25rem;
    color: #FFFF;
}

.text-red-client {
    color: #a32921;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar {
    color: #fff; 
    background-color: #adb5bd; 
    display: inline-flex; 
    -webkit-align-items: center; 
    align-items: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
    font-size: 1rem; 
    border-radius: 50%; 
    height: 48px; 
    width: 48px;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #a32921;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.header-table{
    border-color: #a32921;
    padding: 10px 15px;
    border-bottom: 1px solid #a32921;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-weight: 700;
}

.body-table{
    padding: 15px;
    /* max-height: 500px;
    min-height: 500px; */
}

.title-header-panel{
    padding-bottom: 9px;
    padding-top: 2rem;
    margin: 40px 0 20px ;
    border-bottom: 1px solid #eee;
}

.max-with{
    width: 100%;
}

.button-primary{
    background-color: #a32921 !important;
    color: #FFF !important;
}

.text-color-box{
    color: #92a5c6;
}

.rounded-1 {
    border-radius: 5px;
}

.box-sesion{
    height: 25rem;
    border-radius: 20px;
    background: linear-gradient(35deg,#a32921,#621510);
    width: 80%;
}
/*
.navbar{
    background-color: #a32921 !important;
    color: #FFFF;
}

a.navbar-item:hover:not(.is-active) {
    font-weight: 800;
    background-color: transparent !important;
}

.navbar .is-active{
    background-color: #FFFF !important;
    color: #a32921  !important;
    margin: 0.5rem 0;
    border-radius: 5px;
    font-weight: 800;
}



.navbar-item, .navbar-link {
    color: #FFFF !important;
    font-family: "Open Sans",sans-serif;
    font-weight: 400;
}
*/
.box-main {
    background-color: #a32921;
    border-radius: 5px;
    padding: 0 1rem;
}

.canal-title{
    background-color: #FFFF !important;
    color: #a32921  !important;
    margin: 0.5rem 0;
    border-radius: 5px;
    font-weight: 800;
    border: 2px solid #a32921;
}

.button-floating{
    width: 60px; 
    height: 60px; 
    background-color: #A32822; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    border-radius:60px;
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 1;
}

/*.navbar-burger span {
    background-color: #FFFF !important;
}*/

.is-active-coliseum{
    background-color: #323639 !important;
}


 /* Estilos para la barra de progreso */
 .spinner {
    position: absolute;
    width: 9px;
    height: 9px;
 }
 
 .spinner div {
    position: absolute;
    width: 50%;
    height: 150%;
    background: #a32921;
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
    animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;
 }
 
 .spinner div:nth-child(1) {
    --delay: 0.1;
    --rotation: 36;
    --translation: 150;
 }
 
 .spinner div:nth-child(2) {
    --delay: 0.2;
    --rotation: 72;
    --translation: 150;
 }
 
 .spinner div:nth-child(3) {
    --delay: 0.3;
    --rotation: 108;
    --translation: 150;
 }
 
 .spinner div:nth-child(4) {
    --delay: 0.4;
    --rotation: 144;
    --translation: 150;
 }
 
 .spinner div:nth-child(5) {
    --delay: 0.5;
    --rotation: 180;
    --translation: 150;
 }
 
 .spinner div:nth-child(6) {
    --delay: 0.6;
    --rotation: 216;
    --translation: 150;
 }
 
 .spinner div:nth-child(7) {
    --delay: 0.7;
    --rotation: 252;
    --translation: 150;
 }
 
 .spinner div:nth-child(8) {
    --delay: 0.8;
    --rotation: 288;
    --translation: 150;
 }
 
 .spinner div:nth-child(9) {
    --delay: 0.9;
    --rotation: 324;
    --translation: 150;
 }
 
 .spinner div:nth-child(10) {
    --delay: 1;
    --rotation: 360;
    --translation: 150;
 }
 
 @keyframes spinner-fzua35 {
    0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 90%, 100% {
       transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
    }
 
    50% {
       transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%));
    }
 }
 
/* Estilos para ocultar la barra de progreso */
.oculto {
    display: none;
}