/*Index*/
#Stars {  
    animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}

.dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #5475c5;
    border-radius: 50%;
    display: inline-block;
    margin-top: 9px;
    margin-left: -28px;
}


#light1, #light2, #light3 {
    position: absolute;  /* Asegura que los divs se superpongan entre sí */
    opacity: 0;
    transition: opacity 0.5s;  /* Ajuste para hacer la transición más rápida */
    animation: lights 3s infinite; /* 3 segundos para un ciclo completo */
}

#light1 {
    animation-delay: 0s;
}

#light2 {
    animation-delay: 1s;
}

#light3 {
    animation-delay: 2s;
}

@keyframes lights {
    0%, 33% {
        opacity: 1;
    }
    34%, 100% {
        opacity: 0;
    }
}

.colorGreen {
    color: #31d0aa;
}
.colorRed {
    color: #ed4b9e;
}

/****CARDS****/
#cardsList td {
    border: 1px solid #1a0933;
    font-size: 12px;
    color: white;
}
#cardsList tr {
    border-bottom: 10px solid #1a0933;
}

.footer-buttons {
    width: 100%;
    text-align: center;
}
.card {
    border-radius: 5px;
    float: left;
    margin: 0 2px;
    font-size: 12px;
    color: white;
    text-align: center;
}
.c1 {
    background: rgb(49, 208, 170);
}
.c2 {
    background: rgb(237, 75, 158);
}
.c3 {
    background: #afafaf;
}

.loading {
    text-align: center;
    animation: backgroundAnimation 1s infinite;
    border: 5px solid;
    font-size: 15px;
    padding: 5px 8px 9px 8px;
    width: 100px;
    color: #fff;
}

#cardsList table {
    border-collapse: separate;
}

#cardsList .cardSelected {
    border: 2px solid #ebf700;
    padding: 0px;
}

@keyframes backgroundAnimation {
    0% { border-color: #7645d9; }
    50% { border-color: #ca82f5; }
    100% { border-color: #7645d9; }
}

.sameColor {
    border: 4px solid #ffe364;
}

.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch input {display:none;}

.buttonSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ed4b9e;
  -webkit-transition: .4s;
  transition: .4s;
   border-radius: 34px;
}

.buttonSlider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .buttonSlider {
  background-color: #31d0aa;
}

input:focus + .buttonSlider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .buttonSlider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(55px);
}



/*--------- END --------*/


@media (max-width: 768px) {
    .cardNum {
        /* Ajustes específicos para móviles */
        /*display: none;*/
    }
}

#cardsList table {
    width: 100%;
    table-layout: fixed; /* Asegura que las columnas tengan el mismo ancho */
}

#cardsList th, #cardsList td {
    width: 8.33%; /* Cada columna ocupará un 1/12 del ancho total (100% / 12 columnas) */
    overflow: hidden;       /* Oculta el contenido que desborda */
    white-space: nowrap;    /* Impide que el texto se divida en múltiples líneas */
    direction: rtl;         /* Muestra el texto desde la derecha */
    text-overflow: ellipsis;/* Opcional: Muestra "..." para indicar que hay más texto */
}

.dropdown-menu {
    background-color: #36246d;
}


#stats .form-check-input {
    background-color: #6f42c0;

}
#stats .form-check-input:checked {
    background-color: #ea39b8;
}

#myTabContent {
    padding: 20px 10px;
    background-color: #281955;
}
.nav-tabs .nav-item .nav-link {
    background: #1c1337;
    border-radius: 13px 13px 0 0;
    margin: 0 1px;
}
.nav-tabs .nav-item .nav-link.active {
    background: #281955;
    border-radius: 13px 13px 0 0;
    margin: 0 1px;
}


/*Fix Bootstrap Tabs*/
.tab-content #stats>.tab-pane {
    display: none;
}

.tab-content #stats>.active {
    display: block;
}

.tab-pane .progress {
    margin-top: 5px;
}

.green-bar {
    background-color:  #31d0aa;
}
.red-bar {
    background-color:  #ed4b9e;
}

/*==================== Login Form===================*/

#loginform .panel-heading {
    text-align: center;
    margin-bottom: 10px
}

#loginform #forgot {
    min-width: 100px;
    margin-left: auto;
    text-decoration: none
}

#loginform a:hover {
    text-decoration: none
}

#loginform .form-inline label {
    padding-left: 10px;
    margin: 0;
    cursor: pointer
}

#loginform .btn.btn-primary {
    margin-top: 20px;
    border-radius: 15px;
    width: 100%;
}

#loginform {
    min-height: 380px;
    /*box-shadow: 20px 20px 80px rgb(224 242 255);*/
    border-radius: 12px
}

#loginform .input-field .fa {
    color: #008FD8;
}

#loginform .input-field {
    border-radius: 5px;
    padding: 5px;
    display: flex;
    align-items: center;
    border: 1px solid #671ba3;
    color: #4343ff
}

#loginform input[type='email'],
#loginform input[type='text'],
#loginform input[type='password'] {
    outline: none;
    box-shadow: none;
    width: 100%
}

#loginform .fa-eye-slash.btn {
    border: none;
    outline: none;
    box-shadow: none
}

#loginform img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    position: relative
}

#loginform a[target='_blank'] {
    position: relative;
    transition: all 0.1s ease-in-out;
    text-decoration: none;
}

#loginform .bordert {
    border-top: 1px solid #aaa;
    position: relative
}

#loginform .bordert:after {
    content: "o conectate a través de";
    position: absolute;
    top: -13px;
    left: 33%;
    background-color: #fff;
    padding: 0px 8px
}

.bg-image {
    background-image: url(../img/background-t.png);
    background-position: center center;
    background-repeat: repeat;
}