

.etiNuevo{
   width: 20%;
    margin-left: 10px;
    border-radius: 10px;
    padding: 3px 6px 3px 6px;
    color: rgb(231, 20, 76);
    background-color: #DEECF4;
    font-size: 10px;
    font-weight: bold;
}
.borders1{
    border: solid 1px #555555;
    border-radius: 10%;
} 
.borderImputRigth{
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.borderImputleft{
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.container_map{
    border: 0;
    padding: 0;
    position: relative;
}

.toollBox{
    position: absolute;
 /*    background-color: #e9ecef; */
    border-radius: 10px;
    padding: 2rem 1rem;
    top: 10px;
    right: 10px;
    width: auto;
    height:auto;
    z-index: 10;
}
@media (max-width: 800px){  
    .toollBox{
        position: absolute;
     /*    background-color: #e9ecef; */
        border-radius: 10px;
        padding: 2rem 1rem;
        top:initial;
        right: 10px;
        left: 10px;
        bottom: 10px;
        width: auto;
        height:auto;
        z-index: 10;
        
    }

.foeceTam{
    top:90%;
     height:50px;
 }

}

.card-circle-m{
    display: flex; 
    justify-content: center;
    align-items: center;
    margin-top:.5rem ;
    margin-bottom: .5rem;
}

.card-circle-m .circle{
    background-color: #cce5ff;
    border-radius:50%; 
    width: 6rem;
    height: 6rem;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: .2rem solid #0099ff
}

.card-circle-m .circle .text{
    margin: 0;
    padding: 0;
    color:#004085;
    text-align: center;
    font-weight: bold;
		font-size: 1.2rem;
}
.card{
    background-color: #f9f9f9;
    height: 100%;
}

.container-animation{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items:  center;
		position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
}
#circular3dG{
	position:relative;
	width:98px;
	height:98px;
	margin:auto;
}

.circular3dG{
	position:absolute;
	background-color:#4db8ffc7;
	width:28px;
	height:28px;
	border-radius:29px;
		-o-border-radius:29px;
		-ms-border-radius:29px;
		-webkit-border-radius:29px;
		-moz-border-radius:29px;
	animation-name:bounce_circular3dG;
		-o-animation-name:bounce_circular3dG;
		-ms-animation-name:bounce_circular3dG;
		-webkit-animation-name:bounce_circular3dG;
		-moz-animation-name:bounce_circular3dG;
	animation-duration:1.51s;
		-o-animation-duration:1.51s;
		-ms-animation-duration:1.51s;
		-webkit-animation-duration:1.51s;
		-moz-animation-duration:1.51s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
}

#circular3d_1G{
	left:39px;
	top:7px;
	animation-delay:0.57s;
		-o-animation-delay:0.57s;
		-ms-animation-delay:0.57s;
		-webkit-animation-delay:0.57s;
		-moz-animation-delay:0.57s;
}

#circular3d_2G{
	left:60px;
	top:23px;
	animation-delay:0.75s;
		-o-animation-delay:0.75s;
		-ms-animation-delay:0.75s;
		-webkit-animation-delay:0.75s;
		-moz-animation-delay:0.75s;
}

#circular3d_3G{
	left:72px;
	top:44px;
	animation-delay:0.94s;
		-o-animation-delay:0.94s;
		-ms-animation-delay:0.94s;
		-webkit-animation-delay:0.94s;
		-moz-animation-delay:0.94s;
}

#circular3d_4G{
	left:67px;
	top:65px;
	animation-delay:1.13s;
		-o-animation-delay:1.13s;
		-ms-animation-delay:1.13s;
		-webkit-animation-delay:1.13s;
		-moz-animation-delay:1.13s;
}

#circular3d_5G{
	left:41px;
	top:72px;
	animation-delay:1.32s;
		-o-animation-delay:1.32s;
		-ms-animation-delay:1.32s;
		-webkit-animation-delay:1.32s;
		-moz-animation-delay:1.32s;
}

#circular3d_6G{
	left:8px;
	top:47px;
	animation-delay:1.51s;
		-o-animation-delay:1.51s;
		-ms-animation-delay:1.51s;
		-webkit-animation-delay:1.51s;
		-moz-animation-delay:1.51s;
}

#circular3d_7G{
	left:0px;
	top:13px;
	animation-delay:1.7s;
		-o-animation-delay:1.7s;
		-ms-animation-delay:1.7s;
		-webkit-animation-delay:1.7s;
		-moz-animation-delay:1.7s;
}

#circular3d_8G{
	left:16px;
	top:0px;
	animation-delay:1.89s;
		-o-animation-delay:1.89s;
		-ms-animation-delay:1.89s;
		-webkit-animation-delay:1.89s;
		-moz-animation-delay:1.89s;
}



@keyframes bounce_circular3dG{
	0%{
	transform:scale(1)
	}

	100%{
	transform:scale(.3)
	}
}

@-o-keyframes bounce_circular3dG{
	0%{
	-o-transform:scale(1)
	}

	100%{
	-o-transform:scale(.3)
	}
}

@-ms-keyframes bounce_circular3dG{
	0%{
	-ms-transform:scale(1)
	}

	100%{
	-ms-transform:scale(.3)
	}
}

@-webkit-keyframes bounce_circular3dG{
	0%{
	-webkit-transform:scale(1)
	}

	100%{
	-webkit-transform:scale(.3)
	}
}

@-moz-keyframes bounce_circular3dG{
	0%{
	-moz-transform:scale(1)
	}

	100%{
	-moz-transform:scale(.3)
	}
}




.user-selector-container .content {
 position: relative;
 width: 100%;
 height: 0;
}

.user-selector-container input{
	cursor: default;
}

.user-selector-container .content .panel {
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	position: absolute;
	top: 0;
    width: 30rem;
	z-index: 9999;
	display: none;
	padding: 1em;
	min-height: 15rem;
	overflow-y: scroll;
	overflow-x: hidden;
 }

.user-selector-container ul {

}

.user-selector-container ul li{
	 margin: .5rem ;
}

.user-selector-container ul li div{
	background-color: #FFFFFF;
	display: flex;
	padding: .5rem;
}
.user-selector-container ul li div img{
	width: 100px;
}
.user-selector-container ul li div .description{
	display: flex;
	margin-left: .5rem;
	flex-direction: column;
	justify-content: center;
}
.user-selector-container .text-description{
	font-size: .8rem;
	margin: 0;
	padding: 0;
}

.user-selector-container .content .panel::-webkit-scrollbar {
	width: .5rem;     /* Tamaño del scroll en vertical */
	height: .5rem;    /* Tamaño del scroll en horizontal */
 
}
.user-selector-container .content .panel::-webkit-scrollbar-thumb {
	background: ccc;
	border-radius: 3px;
}
.user-selector-container .content .panel::-webkit-scrollbar-thumb {
	background: #5a5a5a;
	border-radius: 3px;
}

/* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
.user-selector-container .content .panel::-webkit-scrollbar-thumb:hover {
	background: #5a5a5a;
	box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

/* Cambiamos el fondo cuando esté en active */
.user-selector-container .content .panel::-webkit-scrollbar-thumb:active {
	background-color: #363636;
}
.user-selector-container .content .panel::-webkit-scrollbar-track {
	background: #ababab;
	border-radius: 3px;
}

/* Cambiamos el fondo cuando esté en active o hover */
.user-selector-container .content .panel::-webkit-scrollbar-track:hover,
.user-selector-container .content .panel::-webkit-scrollbar-track:active {
background: #ababab;
}

 @media  (max-width: 600px) {
	 
	.user-selector-container .content .panel {
		left: 0;
		right: 0;
	  width: auto;
	}
	.user-selector-container ul li div{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.user-selector-container ul li .imageload{
		display: none;
	}
}

/* Cargs con eriquetas  */

.mycard {
	display: flex;
	flex-direction: row;
	margin: .2rem;
}
.mycard .mycart_label{
	background-color: #FF9B04;
	display: flex;
	justify-content: center;
	padding: .2rem;
	max-width: 2rem;
}
.mycart_label div{
	align-self: center;
}
.mycart_label  p{
	font-weight: bold;
	font-size: 1.2rem;
	margin: 0;
	padding: .2rem;
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.mycard .mycard_content{
	background-color: #F9F9F9;
	height: inherit;
	width: 100%;
}

.mycard_content .mycard_content_title{
	background-color: #F1F1F1;
	padding: .6rem;
}

.mycard_content .mycard_content_body{
	padding: .6rem;
}

@media (max-width: 796px) {
	.mycard{
		flex-direction: column;
	}
	.mycard .mycart_label{
		max-width: 100%;
	}
	.mycart_label  p{
		-webkit-transform: rotate(0deg); 
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	.mycart_label div{
	 justify-content: center;
	}
}



/*** Non-demo CSS ***/
.wrapper {
  max-width: 1000px;
  margin: 2rem auto 0;
}
