body {
    font-family: "Open Sans", sans-serif;
    background: #f6f9ff;
    color: #444444;
  }
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Nunito", sans-serif;
}
.flex{display: flex;justify-content: center;align-items: center;}
        .flexCol{display: flex;flex-direction:column;justify-content: center;align-items: center;}
        .flexPremia{padding: 20px;width:100%;}
        .w45{width: 45%;}
        .fsPuntos{font-size:50px;font-weight:400;color:#242424;}
        .ecomonedas{font-size: 25px;width: 150px;text-align: left;display: inline-block;color: #252525;line-height: 26px;margin-left: 20px;}
        .monedas{width:75px;}
        .tabla_ecomonedas{margin:15px auto 10px;text-align:center;font-size:18px;font-weight:500;max-width: 400px;}
        .th_ecomonedas{background: #a19e9e;color: #fff;font-size: 23px;border-radius: 10px 10px 0 0;padding: 2px 30px;}
        .flex_ecomonedas{display:flex;} 
        .td_ecomonedas{border:solid 1px #a19e9e;width:50%;}
        .td_ecomonedas p{margin:5px 0;}
        .img-spinner{ width: 20%; margin: 80px;  padding: 10px; }

.letrasBonus{
  font-family: 'News Cycle', sans-serif;
font-family: 'Poiret One', cursive;
font-family: 'Potta One', cursive;
font-family: 'Roboto', sans-serif;
font-family: 'Titan One', cursive;
color: transparent; /* Hacer el texto transparente */
background-image: linear-gradient(209deg, #e6d56a 0%, #633b1d 100%);
background-clip: text; /* Aplicar el degradado solo al texto */
-webkit-background-clip: text;
font-size: 45px;
 /*  background-color: #e6d56a;
background-image: linear-gradient(209deg, #e6d56a 0%, #633b1d 100%); 

color: white;*/
}
.letrasIntBonus{
  font-family: 'ADLaM Display', cursive;
font-family: 'News Cycle', sans-serif;
font-family: 'Poiret One', cursive;
font-family: 'Potta One', cursive;
font-family: 'Roboto', sans-serif;
font-family: 'Titan One', cursive;
color: #395b97;
}
        .dashboard .info-card {
            padding-bottom: 10px;
          }
          
          .dashboard .info-card h6 {
            font-size: 28px;
            color: #012970 ;
            font-weight: 700;
            margin: 0;
            padding: 0;
          }
          .dashboard .customers-card .card-icon {
            color: #ff771d;
            background: #ffecdf;
          }
          
        .buttonDegrapack{
          color: #54b479 !important;
          background: #e0f8e9 !important;
        }

          .dashboard .filter {
            position: absolute;
            right: 0px;
            top: 15px;
          }
          
          .dashboard .filter .icon {
            color: #aab7cf;
            padding-right: 20px;
            padding-bottom: 5px;
            transition: 0.3s;
            font-size: 16px;
          }
          
          .dashboard .filter .icon:hover,
          .dashboard .filter .icon:focus {
            color: #4154f1;
          }
          
          .dashboard .filter .dropdown-header {
            padding: 8px 15px;
          }
          
          .dashboard .filter .dropdown-header h6 {
            text-transform: uppercase;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1px;
            color: #aab7cf;
            margin-bottom: 0;
            padding: 0;
          }
          
          .dashboard .filter .dropdown-item {
            padding: 8px 15px;
          }

          .dashboard .card-icon {
            font-size: 32px;
            line-height: 0;
            width: 64px;
            height: 64px;
            flex-shrink: 0;
            flex-grow: 0;
          }
          
         .card-icon {
            color: #2eca6a;
            background: #e0f8e9;
            font-size: 28px;
          }

          .card-title {
            padding: 20px 0 15px 0;
            font-size: 18px;
            font-weight: 500;
            color: #012970;
            font-family: "Poppins", sans-serif;
          }
          
          .card-title span {
            color: #899bbd;
            font-size: 14px;
            font-weight: 400;
          }

          .card-title span {
            color: #899bbd;
            font-size: 14px;
            font-weight: 400;
          }
          
          .dashboard .filter .icon {
            color: #aab7cf;
            padding-right: 20px;
            padding-bottom: 5px;
            transition: 0.3s;
            font-size: 16px;
          }
          
          .dashboard .filter .icon:hover,
          .dashboard .filter .icon:focus {
            color: #4154f1;
          }

          .iconslist .icon {
            background-color: #fff;
            border-radius: 0.25rem;
            text-align: center;
            color: #012970;
            padding: 15px 0;
          }
          
          .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Capa oscura con transparencia */
            z-index: 4; /* Coloca la capa oscura encima de todo */
          }
        .cstar{
          background: linear-gradient(88deg, #d0c741 0%, #D09D10 54%, #d1cd57 100%);
          -webkit-background-clip: text;
          color: transparent;
        }
        .bw img {
          filter: grayscale(100%);
      }
      .vf{
        color: #2eb417;
        font-size: 35px!important;
      }
      .modalbg{
        background-color: #ffffb0;
        background-image: linear-gradient(135deg, #ffffb0 0%, #ffb100 100%);
      }
      .trc>th{
        text-align: center;
      }
    
      .ctr>tr>td{
        text-align: center;
      }

      .ctr>tr>td:first-child{
        text-align: left;
      }

      .ctr tr:nth-child(even) {
        background-color: #f3f7ff;
    }

    .ctr tr:nth-child(odd) {
    
      background-color: #ffffff;
    }
    .bgbadge{
      background: #a6e1cf;
    }
  
      .brgreen{
        background-image: linear-gradient( 358.7deg,  rgba(42,136,157,1) 1.7%, rgba(122,197,214,1) 51.1%, rgba(211,232,242,1) 95.5% );
      }
      
      .clst{
        color: #012970;
        
        }
        .clsm{
          color: #aa3535 ;
        }
        .clsb{
          color:#1b5e31
        }
        .m32{
          margin-left: 32.5%;
        }
        .m33{
          margin-left: 33%;
        }
        .m35{
          margin-left: 35%;
        }
        .m65{
          margin-left: 65.5%;
        }
        .m66{
          margin-left: 66%;
        }
        .m68{
          margin-left: 68%;
        }
      
        .borderRadius{
          border-radius: 10px !important; 
          
        }
        .bgButton{
         background:  #cdf0c9!important;
        }
        .clIcon{
          color: #319256;
        }
        .clmxn{
          color:  #71ca67!important;
        }
        .apexcharts-text{
          color: #25D366;
        }
        .h200{
          width: 130px;
          height: 130px;
          border-radius: 50%;
        }
        
        .bgcard{
          background: #f5f5ff;
        }
        .bgcardText1{
          color: #50609e;
        }
        .bgcardText2{
          color: #a1a5b4;
        }
        .bgcardText3{
          color: #8d99c5;
        }
        .tamLetrasTrof{
          font-size: 40px;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, .6);
        }
        .tamLetrasTrofBottom{
          font-size: 25px;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, .6);
        }
        .fhand:hover{
         cursor: pointer; 
        }
        .tabresy{
          max-height: 75vh;
          overflow-y: auto;
        }
          

        .bottsbag{
          background: linear-gradient(to bottom, #008374 50%, #FFFFFF 50%);
          }
          
          
          .bg-whites{
            background:#f5f5ff ;
          }

          .fsIcon{
            font-size:45px!important;
          /*   color: #99D1CB; */
          color: #4670b9;
          }
          .bordecls{
            border-color: #6a6e75 ; /* Cambiar el color del borde */
            border-style: solid;
            border-width: 1px;
          }
          
          
            .clBtn{
          background: #ffbd8a !important;
          
            }
            .clmxn{
              color: #ffbd8a;
            }
            .clicons{
              color: #A35012;
            }
            .clsbonos{
              color: #4670b9;
            }

            
              .overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5); /* Color gris transparente */
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 999;
          }
          .bg-whites1{
            background:#F6EDF6 ;
          }
          .bg-whites2{
            background:#E3F9E3 ;
          }
          .bg-whites3{
            background:#FEF2E4 ;
          }
        .iconCol1{
          font-size:45px!important;
          color: #f281f2;
        }
        .iconCol2{
          font-size:45px!important;
          color: #60cb60;
        }
        .iconCol3{
          font-size:45px!important;
          color: #f7b366;
        }
        .clst1{
          font-size: 10px !important;
     
          color: #012970 !important;
          }
         .altModal{max-height:82vh;}
         .ltclm{
          color: #e17f3d;
         }
         .clblue{
          color:#1E4769;
         }
         
         .barhov{
          display: none;
         }
.clsFoco{
  color:#C59C44;
}

.clsFoco2{
 color: #2E5DB0;
}
         
      
         .animated-element {
          width: 100px;
          height: 100px;
          background: linear-gradient(45deg, #3498db, #e74c3c);
          animation: colorChange 1s infinite alternate;
        }
        
        @keyframes colorChange {
          0% {
            background: linear-gradient(45deg, #3498db, #e74c3c);
          }
          100% {
            background: linear-gradient(45deg, #2ecc71, #f39c12);
          }
        }
        
.cardFocoProd{
  background:#F7F53A;
  color:rgb(65, 65, 65);
}