body{
    background:  rgb(54, 0, 66);
    color: white;
}


.ra-center{
    display:flex;
    align-items: center;
    justify-content: center;
    
}



.ra-boton3{

    background: linear-gradient(3deg, rgb(23 0 92 / 0%) 0%, rgb(162 146 217 / 70%) 100%);
    box-shadow: rgb(0 0 0 / 29%) 0px 0px 1rem 0.5rem;
}
@media (max-width: 1100px) {
    .particlesMode{
        display: none;
    }
}


.ra-bg-center{

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;


}



.ra-boton1{
    
    background:linear-gradient(90deg, rgb(131 60 183 / 77%) 0%, rgb(25 35 69 / 73%) 100%);
    
}

.ra-elegido{
    background:linear-gradient(90deg, rgb(147 0 255) 0%, rgb(0 58 255 / 75%) 100%) !important;
}

.ra-elegido2{
    background:linear-gradient(90deg, rgb(147 0 255) 0%, rgb(0 58 255 / 100%) 100%) !important;
}

.ra-boton2{
    backdrop-filter: blur(20px);
    box-shadow: rgb(0 0 0 / 29%) 0px 0px 1rem 0.5rem;
    background: #ffffff14;
}

.ra-boton4{
    backdrop-filter: blur(20px);
    box-shadow: rgb(0 0 0 / 29%) 0px 0px 1rem 0.5rem;
    background: #0000005c;
}

.ra-shadow1{
    box-shadow: rgb(0 0 0 / 29%) 0px 0px 1rem 0.5rem;
}

.ra-shadow2{
    box-shadow:rgb(0 0 0 / 91%)-5px 5px 0.3rem 0.1rem;
    
}


.ra-agrandar{
    
    transition:0.3s;
}

.ra-agrandar:hover{
    
    -webkit-transform: scale(1.1) !important;
    transform: scale(1.1) !important;
}

.ra-agrandar2{
    transition:0.3s;
}

.ra-agrandar2:hover{
    
    -webkit-transform: scale(1.05) !important;
    transform: scale(1.05) !important;
}


/* ---- stats.js ---- */
.count-particles {
    background: #000022;
    position: absolute;
    top: 0px;
    left: 0;
    width: 80px;
    color: #13E8E9;
    font-size: .8em;
    text-align: left;
    text-indent: 4px;
    line-height: 14px;
    padding-bottom: 2px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
}

.js-count-particles {
    font-size: 1.1em;
}

#stats,
.count-particles {
    -webkit-user-select: none;
    margin-top: 5px;
    margin-left: 5px;
}

#stats {
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}

.count-particles {
    border-radius: 0 0 3px 3px;
}

.row{
    --bs-gutter-x: 0px;
}


.navbar-expand-lg .offcanvas{
    flex-grow: 0;
}




select{
    transition: .3s;
}

.spinner-grow {
    --bs-spinner-animation-speed: 1.5s;
}


input:focus {
    border: 1 solid rgba(255, 255, 255, 0);
}




.ra-background{
    background-image: url(../img/background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:inherit;
    background-position-x: center;
    background-attachment: fixed;
    
}


.texto-75{
    color: rgba(255, 255, 255, 0.75);
}
.texto-50{
    color: rgba(255, 255, 255, 0.50);

}




body::-webkit-scrollbar {
    width: 1em;
  }
   
  body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  }
   
  body::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
  }





.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl{
    --bs-offcanvas-width : 300px;
    transition: 1s ease;
    background-color: transparent;
    --bs-offcanvas-border-width: 0px;
}





.btn-outline-light{
    --bs-btn-hover-bg: rgba(0, 0, 0, 0);
    --bs-btn-focus-shadow-rgb: rgba(0, 0, 0, 0);
    --bs-btn-hover-color: white;
}





/* width */
::-webkit-scrollbar {
    width: 15px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(111, 221, 255, 0.247); 
    border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, rgba(149, 0, 255, 0.801) 0%, rgba(0, 60, 255, 0.571) 100%); 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.767);
  }

  







.modal{
    --bs-modal-width: 360px;
}




input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
}


/* #name::placeholder{
    color:rgba(255, 255, 255, 0.8);
} */



-check-input:checked{
    background-color: #38c1e3;
    border-color:#38c1e3;
    
}

.form-check-input{
    transition: 0.8s;
}



input:focus{
    outline: none;
    border: 0px;
}

input{
    color:black;
}



    .content {
        /* this is needed or the background will be offset by a few pixels at the top */
        overflow: auto;
        position: relative;
      }


select option{
    background:rgb(115, 94, 162);
}

select{

    background:linear-gradient(90deg, rgb(147 0 255) 0%, rgb(0 58 255 / 75%) 100%) !important;
    
}


select:hover{

    background-color: rgb(255, 255, 255);

}

.dropdown-menu {
    --bs-dropdown-min-width: 15rem;
    --bs-dropdown-link-active-bg: #00ccffc7;
}




/* //////////////////////////////////////////////////////////////////////// */

.slidecontainer {
    width: 100%; /* Width of the outside container */
  }
  
  /* The slider itself */
  .slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    height: 25px; /* Specified height */
    background: #00000080; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 1; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    border-radius: 15px;

  }


  
  /* Mouse-over effects */
  .slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
  }
  
  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    border-radius: 50%;
    background: rgb(0, 162, 255);
    cursor: pointer; /* Cursor on hover */
  }

  .slider::-webkit-slider-thumb:hover{
    background: rgb(0, 162, 255);
  }
  
  /* ///////////////////////////////////////////////// */


#handle2 .rs-range-color  {
    background-color: #8832cd;
}
#handle2 .rs-path-color  {
    background-color: #ddc5f0;
}

/* ////////////////////////////////////////////////// */

#slider .rs-range-color  {
    background: rgb(0, 162, 255);
}

#slider .rs-path-color  {
    background-color: rgba(255, 0, 0, 0.555);
}

#slider .rs-border  { /* BORDE */
    border-color: #ffffff;
}

#slider .rs-handle  {
    background-color: #bebebe;


    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(0px) translateZ(0);
    transform: perspective(0px) translateZ(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}
#slider .rs-handle:after{  /*PEPA DE ADENTRO */
    background-color: rgb(255, 255, 255);
}

#slider .rs-handle:hover  {
    background-color: #ffffff;

    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}


  /* sssssssssssssssssssss */



  .loader {
    position: relative;
    width: 100px;
    height: 100px;
  }
  
  .loader:before , .loader:after{
    content: '';
    border-radius: 50%;
    position: absolute;
    inset: 0;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0) inset;
  }
  .loader:after {
    box-shadow: 0 3px 0 #0062ff inset;
    animation: rotate 2s linear infinite;
  }
  
  @keyframes rotate {
    0% {  transform: rotate(0)}
    100% { transform: rotate(360deg)}
  }


  .loader2 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    border-top: 3px solid #FFF;
    border-right: 3px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }