.fee{

	color: white;

}



#brandsProducts{
	display: grid;
  gap: 1rem;
 	/* grid-template-columns: 1fr 1fr 1fr 1fr; */
}

@media (max-width: 600px) {
  #brandsProducts { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 601px) {
  #brandsProducts { grid-template-columns: repeat(4, 1fr); }
}


#listcategorieshome, #skeletoncategorieshome{
  display: grid;
	grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: auto;
  grid-gap: 1rem;
  /* padding: .5rem; */
}
@media (max-width: 1366px) {
  #listcategorieshome, #skeletoncategorieshome { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1024px) {
  #listcategorieshome, #skeletoncategorieshome { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
  #listcategorieshome, #skeletoncategorieshome { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 512px) {
  #listcategorieshome, #skeletoncategorieshome { grid-template-columns: repeat(2, 1fr); }
}
/* @media (max-width: 375px) {
  #listcategorieshome, #skeletoncategorieshome { grid-template-columns: repeat(1, 1fr); }
} */

.skeleton {
  background-color: #e2e5e7;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  background-size: 40px 100%;
  background-repeat: no-repeat;
  background-position: left -40px top 0;
  -webkit-animation: shine 1s ease infinite;
          animation: shine 1s ease infinite;
}
@-webkit-keyframes shine {
  to {
    background-position: right -40px top 0;
  }
}
@keyframes shine {
  to {
    background-position: right -40px top 0;
  }
}

#listbrandshome, #skeletonbrandhome{
  display: grid;
	grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: auto;
  grid-gap: 1rem;
  padding: .5rem;
}
@media (max-width: 1366px) {
  #listbrandshome, #skeletonbrandhome { grid-template-columns: repeat(7, 1fr); }
}
@media (max-width: 1024px) {
  #listbrandshome, #skeletonbrandhome { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 768px) {
  #listbrandshome, #skeletonbrandhome { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 512px) {
  #listbrandshome, #skeletonbrandhome { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 375px) {
  #listbrandshome, #skeletonbrandhome { grid-template-columns: repeat(1, 1fr); }
}

.card-category{
  background-color:#2d2c2c;
  height: 30px !important;
}
.text-card-category{
  color: #FFFFFF !important;
  font-size: 1em;
  font-family: "Titillium Web", Sans-serif;
  font-weight: 700;  
}

.checkbrand{

	margin-top: 30px;

}

.form-check-input:checked{

	background-color:  #e41408 !important;

    border-color:  #e41408 !important;

}




.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }






select.categoriesproducts {

	background-image:

	  linear-gradient(45deg, transparent 50%, #2d2d2d 50%),

	  linear-gradient(135deg, #2d2d2d 50%, transparent 50%),

	  linear-gradient(to right, #ccc, #ccc);

	background-position:

	  calc(100% - 20px) calc(1em + 2px),

	  calc(100% - 15px) calc(1em + 2px),

	  calc(100% - 2.5em) 0.5em;

	background-size:

	  5px 5px,

	  5px 5px,

	  0px 1.5em;

	background-repeat: no-repeat;

  }

  

  select.categoriesproducts:focus {

	background-image:

	  linear-gradient(45deg, #2d2d2d 50%, transparent 50%),

	  linear-gradient(135deg, transparent 50%, #2d2d2d 50%),

	  linear-gradient(to right, #ccc, #ccc);

	background-position:

	  calc(100% - 15px) 1em,

	  calc(100% - 20px) 1em,

	  calc(100% - 2.5em) 0.5em;

	background-size:

	  5px 5px,

	  5px 5px,

	  0px 1.5em;

	background-repeat: no-repeat;

	border-color: #2d2d2d;

	outline: 0;

  }

  /* Update-Pass */

#retrive_password{
  border-radius: 0px !important;
}

.generate-pass{    
  border-radius: 0px !important;
  padding: 7px !important;
  background-color: #cdcdcd !important;
  border: 2px solid #cfe2ff !important;
  color: black !important;
}
.generate-pass:hover{
  background-color: #cfe2ff !important;
}

#update_value_pass {
  background-color: #86cc4a !important;
  border: 2px solid #86cc4a !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  padding: 14px 32px 14px 32px;
  background: initial;
  font-size: 1em;
  cursor: pointer;
  display: inline-block;
}
#update_value_pass:hover {
  background-color: #53951a !important;
  border: 2px solid #53951a !important;
  border-radius: 12px !important;
  color: white !important;
  padding: 14px 32px 14px 32px;
  background: initial;
  font-size: 1em;
  cursor: pointer;
  display: inline-block;
}

#eye_pass:hover{
  background-color: #53951a !important;
  color: #fff !important;
}
#eye_pass:focus {
  background-color: #d2d2d2 !important;
}
.fa-eye{
  color: black;
}
.fa-eye:hover {
  color: white;
}
button.generate-pass {
  border-radius: 12px 12px 12px 12px !important;
  padding: 15px 25px 15px 25px !important;
  color: #f50e00 !important;
  border: 2px solid #f50e00 !important;
  background-color: transparent !important;

}

button.generate-pass:hover {
  background-color: #f50e00 !important;
  color: #fff!important;
}

  /* Olvide Contraseña */

#set_value_back {
  background-color: #78808e;
  color: #fff;
  margin: 0 auto;
  border: 1px solid #78808e;
}
#set_value_back:hover {
  background-color: #f50e00;
  color: #fff;
  border: 1px solid #f50e00;
}

/* Añerta */

.alert-primary {
  --bs-alert-color: #fff!important;
  --bs-alert-bg: #f50e00!important;
  --bs-alert-border-color: #f50e00!important;
  --bs-alert-link-color: #fff!important;
}