//troco 
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.wrapper{
  display: inline-flex;
  background: #fff;
  height: 50px;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 5px;
  padding: 5px 5px;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
}
.wrapper .option{
  background: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0 5px;
  border-radius: 5px;
  cursor: pointer;
  padding: 0 10px;
  border: 2px solid lightgrey;
  transition: all 0.3s ease;
}
.wrapper .option .dot{
  height: 0px;
  width: 0px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
}
.wrapper .option .dot::before{
  position: absolute;
  content: "";
  top: 4px;
  left: 4px;
  width: 0px;
  height: 0px;
  background: #0069d9;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.3s ease;
}
input[type="radio"]{
  display: none;
}
#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2,
#option-3:checked:checked ~ .option-3,
#option-4:checked:checked ~ .option-4,
#option-5:checked:checked ~ .option-5,
#option-6:checked:checked ~ .option-6,
#option-7:checked:checked ~ .option-7,
#option-8:checked:checked ~ .option-8
{


  border-color: #090909 ;
  background: #090909 ;
}
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot,
#option-3:checked:checked ~ .option-3 .dot,
#option-4.dot::before:checked ~ .option-4 .dot
{
  background: #fff;
}
#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before,
#option-3:checked:checked ~ .option-3 .dot::before,
#option-3:checked:checked ~ .option-3 .dot::before
{
  opacity: 1;
  transform: scale(1);
}
.wrapper .option span{
  font-size: 10px;
  color: #313131;
}
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span,
#option-3:checked:checked ~ .option-3 span,
#option-4:checked:checked ~ .option-4 span
{
  color: #fff;
}









//menu Inferior 




.body{

min-height:100vh;
display:flex;
justify-content:center;
align-items: center;
background: white;

}  
  
.progresso{
  width: 100%;
  max-width: 288px;
  height: 6px;
  background: #e1e4e8;
  border-radius: 3px;
  overflow: hidden;
}
  
.progress-barra{
    display: block;
    height: 100%;
    background: linear-gradient(90deg,#4caf50 ,#dddddd 17%,#4caf50 34%,#dddddd 51%,#4caf50 68%,#dddddd 85%,#4caf50);
    background-size: 300% 100%;
    animation: progress-animation 2s linear infinite;
}    
    
@keyframes progress-animation{
  0%{background-position: 100% }
  100% {background-position: 0}
    
}



/*Inicio do menu inferior*/

html {

    box-sizing: border-box;
    --bgColorMenu :  #090909 !important;
    --duration: .7s;    

}

html *,
html *::before,
html *::after {

    box-sizing: inherit;

}

.menu1{

    margin: 0;
    display: flex;
    /* Works well with 100% width  */
    width: 100%;
    font-size: 1.5em;
    padding: 0 2.85em;
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: #090909 !important ;
    
    
}
.cor{

background-color: #090909 !important ;

}

/*fin do menu inferior*/


.colored,
.shop-bag i,
.naver .navbar a i,
.header .naver .navbar .social a:hover i,
.naver .navbar a:hover,
.user-menu i,
.search-bar-mobile button i,
.categoria .vertudo i,
.categoria .counter,
.bread i,
.produto-detalhes .categoria a,
.campo-numero i,
.sacola-table .sacola-remover i,
.sacola-table .sacola-change i,
.adicionado .checkicon,
.title-line i,
.back-button i,
.sidebar-info i,
.filter-select .outside,
.filter-select .fake-select i,
.pagination i,
.funcionamento-mobile i,
.fake-select i,
.search-bar button i,
.holder-shop-bag i
 {
color: #090909 !important;
}



*
  box-sizing: border-box

body
  min-height: 100vh
  display: flex
  justify-content: center
  align-items: center
  background: white
  
  
.progress
  width: 100%
  max-width: 260px
  height: 6px
  background: #e1e4e8
  border-radius: 3px
  overflow: hidden
  
.progress-bar
    display: block
    height: 100%
    background: linear-gradient(90deg,#ffd33d,#ea4aaa 17%,#b34bff 34%,#01feff 51%,#ffd33d 68%,#ea4aaa 85%,#b34bff)
    background-size: 300% 100%
    animation: progress-animation 2s linear infinite
    
@keyframes progress-animation
  0%
    background-position: 100%
  100%
    background-position: 0

.top {
border-color: #090909 !important;
}

.footer-info,
.categoria .produto .detalhes,
.cover,
.carousel-indicators .active,
.botao-acao,
.sidebar .sidebar-header,
.minitop,
.opcoes .opcao.active .check,
.floatbar {
background: #090909 !important;
}

.pagination > li > a:hover, .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
background: #090909 !important;
color: #fff !important;
}

.is-sticky .avatar {
height: 0px !important;
width: 0px !important;
}

.tv-infinite-menu a.active,
.tv-infinite-menu a:hover,
.fancybox-thumbs__list a::before {
border-color: #090909 !important;
}

/* ALL MOBILE */

@media (max-width: 991px) {

	.user-menu i {
	color: #fff !important;
	}

	.shop-bag i {
	color: #fff !important;
	}

	.shop-bag .counter {
	border: 0;
	padding-top: 2px;
	}

	.top {
	border-top: 0;
	background: #090909 !important;
	}
	
	

}

/* ALL DESK */

@media (min-width: 991px) {

*
  box-sizing: border-box

body
  min-height: 100vh
  display: flex
  justify-content: center
  align-items: center
  background: white
  
  
.progress
  width: 100%
  max-width: 260px
  height: 6px
  background: #e1e4e8
  border-radius: 3px
  overflow: hidden
  
.progress-bar
    display: block
    height: 100%
    background: linear-gradient(90deg,#ffd33d,#ea4aaa 17%,#b34bff 34%,#01feff 51%,#ffd33d 68%,#ea4aaa 85%,#b34bff)
    background-size: 300% 100%
    animation: progress-animation 2s linear infinite
    
@keyframes progress-animation
  0%
    background-position: 100%
  100%
    background-position: 0

}