@font-face {
	font-family: concept;
	src: url("../fonts/Concept Bold.ttf");
}
@font-face {
	font-family: gandhi_regular;
	src: url("../fonts/GandhiSans-Regular.otf");
}
@font-face {
	font-family: gandhi_bold;
	src: url("../fonts/GandhiSans-Bold.otf");
}
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #90ad33 #ffffff;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 15px;
}

*::-webkit-scrollbar-track {
background: #ffffff;
}

*::-webkit-scrollbar-thumb {
background-color: #90ad33;
border-radius: 0px;
border: 3px solid #ffffff;
}
*{
    font-family: gandhi_regular !important;
}
.vh-98{
	height: 95.2vh!important;
}
.font_gandhi_bold{
    font-family: gandhi_bold !important;
}
h1, .ciudad_box {
	font-family: concept !important;
	transform: scaley(1.1);
	letter-spacing: 3.1px;
}
.fondo_busqueda{
    background-image: url('../imagenes/fondo_busqueda.png');
    background-size: cover;
    height: 250px;
    background-position: 0px -100px;
}
.fondo_index{
    background-image: url('../imagenes/mecanico_inicio.jpg');
    background-size: 100%;
    background-position-y: -10pc;
    background-position: center;
	background-repeat: no-repeat;
	height: 500px;
}
.fondo_registrate{
    background-image: url('../imagenes/fondo_registrate.png');
    background-size: cover;
    height: 255px;
    background-position: 0px -100px;
}
.color_fondo_busqueda{
    background-color: rgba(255, 255, 255, 0.6);
}
.color_fondo_panel{
    background-color: #7F7F7F;
}
.fondo_alert{
    background-color: rgba(255, 255, 255, 0.6);
}
.border-5{
    border-bottom: 4px solid !important;
}
.color_azul{
    background-color:  #1D4A87;
}
.text_azul{
    color:  #1D4A87;
}
.color_naranja{
    background-color:  #E66C00 !important;
}
.text_naranja{
    color:  #E66C00 !important;
}
.color_verde{
    background-color:  #90AD33;
}
.color_verde_lima{
    background-color:  #C2CF7B;
}
.color_verde_oscuro{
    background-color:  #50632F;
}
.text_verde_oscuro{
    color:  #50632F !important;
}
.text_verde{
    color:  #90AD33 !important;
}
.color-gris{
	background: #D7D6D6 !important;
}
.text-gris{
	color: #D7D6D6 !important;
}
.color-gris-select{
	color: #817f7f !important;
}
.select_box, .input_configuracion{
  	border: 2px solid #90AD33;
}
.select_box:after{
	width: 0; 
	height: 0; 
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #90AD33 !important;
	position: absolute;
	top: 40%;
	right: 5px;
	content: "";
	z-index: 98;
}
.select_box select{
	width: 220px;
	border: 0;
	position: relative;
	z-index: 99;
	background: none;
}
.degradado_azul{
    background: rgb(133,175,31);
	background: linear-gradient(0deg, rgba(74,105,3,1) 0%, rgba(133,175,31,1) 100%);
}
.img_mecanico{
    width:66%;
    position: absolute;
    bottom: -40px;
    margin-left: -190px;
    z-index: 0;
}
.redes_lateral {
    position: absolute;
    top: 30%;
    right: 0%;
    width: 4%;
    z-index: 1;
}

i{
    font-family: 'Font Awesome 5 Brands' !important;
}
.nav-link {
    font-size: 1.7em;
	letter-spacing: 2.1px;
}
.border-radius-cda{
	border-radius: 3.25rem !important;
}
.width-100{
	width: 100px !important;
}
.width-200{
	width: 200px !important;
}
.width-300{
	width: 300px !important;
}
.ls-0{
	letter-spacing: 0.5px;
}
.ls-1{
	letter-spacing: 1px;
}
.ls-2{
	letter-spacing: 2px;
}
.ls-3{
	letter-spacing: 3px;
}
.informacion_mecanico {
  position: relative;
}

.informacion_mecanico:before {
  content:"";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0px;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  transition: all 1s ease;
}
.informacion_mecanico:hover:before {
width: 100%;
}
.form-check-input:checked {
    background-color: #E66C00;
    border-color: #E66C00;
}
.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
}
.accordion-button:focus, .accordion-button:not(.collapsed) {
    background: #1D4A87 !important;
}
/* ----------------------------------- ESTILOS PANTALLA DE CARGA ----------------------------------------- */
.loader-div {
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgb(255,255,255, 0.9);;
	height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
    z-index: 4;
}

.loader {
	position: relative;
	width: 10vw;
	height: 5vw;
	padding: 1.5vw;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loader span {
	position: absolute;
	height: 1.2vw;
	width: 1.2vw;
	border-radius: 50%;
	background-color: #E66C00;
}

.loader span:nth-child(1) {
	animation: loading-dotsA 0.9s infinite linear;
}

.loader span:nth-child(2) {
	animation: loading-dotsB 0.9s infinite linear;
}
.box_mensajes::-webkit-scrollbar {
    width: 8px;     /* Tamaño del scroll en vertical */
    height: 8px;    /* Tamaño del scroll en horizontal */
    /* display: none;  Ocultar scroll */
}
/* Ponemos un color de fondo y redondeamos las esquinas del thumb */
.box_mensajes::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
.box_mensajes::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

/* Cambiamos el fondo cuando esté en active */
.box_mensajes::-webkit-scrollbar-thumb:active {
    background-color: #999999;
}
@keyframes loading-dotsA {
	0% {
		transform: none;
	}
	25% {
		transform: translateX(2vw);
	}
	50% {
		transform: none;
	}
	75% {
		transform: translateY(2vw);
	}
	100% {
		transform: none;
	}
}

@keyframes loading-dotsB {
	0% {
		transform: none;
	}
	25% {
		transform: translateX(-2vw);
	}
	50% {
		transform: none;
	}
	75% {
		transform: translateY(-2vw);
	}
	100% {
		transform: none;
	}
}
.container-perfil{
	width: 100%;
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
    margin-right: auto;
    margin-left: auto;
}
.radius_4rem{
	border-radius: 0.4rem !important;
}
.btn-outline-cda {
    color: #000;
    border: 2px solid #1D4A87;
}
.btn-check:active+.btn-outline-cda, .btn-check:checked+.btn-outline-cda, .btn-outline-cda.active, .btn-outline-cda.dropdown-toggle.show, .btn-outline-cda:active,.btn-outline-cda:hover  {
    color: #fff;
    background-color: #1D4A87;
    border-color: #1D4A87;
}
.rounded_registrate {
    border-radius: 2.25rem!important;
}
.input_registrate, .input_registrate {
	outline: 0;
	border-width: 0 0 3px;
	border-color: #404040;
	background-color: transparent !important;
	border-radius: 0rem;
	color: #404040;
	text-transform: capitalize;
}
.input_registrate:focus, .input_registrate_p:focus {
	border-color: #90AD33;
	border-color: #404040 !important;
	box-shadow: 0 0 0 0.25rem rgb(255 255 255 /25%);
	color: #404040;
}
.select_registrate{
	padding: 0.4em;
	background-color : transparent;
	border : 2px solid 404040;
	border-radius: 0.5rem !important;
	color: 404040;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-indent: 1px;
	text-overflow: '';
	font-size: 1em;
}
.select_registrate:focus{
	color: #404040;
}
.tooltip.show {
	opacity: 1;
}
.tooltip-inner {
	background-color: #D7D6D6;
	box-shadow: 0px 0px 4px #D7D6D6;
	opacity: 1 !important;
	color:black;
	font-size: 9pt;
}
.tooltip.bs-tooltip-right .arrow:before {
	border-right-color: #D7D6D6 !important;
}
.tooltip.bs-tooltip-left .arrow:before {
	border-left-color: #D7D6D6 !important;
}
.tooltip.bs-tooltip-bottom .arrow:before {
	border-bottom-color: #D7D6D6 !important;
}
.tooltip.bs-tooltip-top .arrow:before {
	border-top-color: #D7D6D6 !important;
}
.swal2-popup{
    border-radius: 30px !important;
}
.swal2-input {
    height: 2em !important;
}
.dropdown-config:focus{
	background-color: #D7D6D6;
	box-shadow: 0 0 0 0.15rem rgb(215 214 214 / 25%);
}

.dropdown-menu[data-bs-popper] {
    top: 100%;
    left: -229px !important;
    margin-top: .125rem;
}

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #4280d4 !important;
}

.input-panel{
	outline: none !important;
	border: 0px;
	width: 150px;
}

.textarea-panel{
	border: #817f7f 2px solid;
	border-radius: 5px;
	width: 300px;
}
.input-time{
	border: #817f7f 1px solid;
	color: #817f7f;
	border-radius: 3px;
	width: 90px !important;
	height: 20px !important;
}

.input-panel:focus{
	outline: none !important;
	border: 0px 0px 2px 0px ;
	border-bottom: #4280D4 2px solid;
	cursor: text;
}
.textarea-panel:focus{
	outline: none !important;
	cursor: text;
}
.cursor-normal{
	cursor: context-menu;
}
.fs-5pt{
	font-size: 5pt !important;
}
.fs-7pt{
	font-size: 7pt !important;
}
.fs-8pt{
	font-size: 7.5pt !important;
}
.fs-9pt{
	font-size: 9pt !important;
}
.fs-10pt{
	font-size: 10pt !important;
}
.fs-12pt{
	font-size: 12pt !important;
}
.fs-14pt{
	font-size: 14pt !important;
}
.fs-16pt{
	font-size: 16pt !important;
}
.fs-18pt{
	font-size: 18pt !important;
}
.fs-20pt{
	font-size: 20pt !important;
}
.border_gris{
	border-color: #D7D6D6 !important;
}
.text-gris-claro{
	border-color: #D7D6D6 !important;
}
.image-filter {
    filter: saturate(0%) grayscale(100%) brightness(69%) contrast(1000%);
    -webkit-filter: saturate(0%) grayscale(100%) brightness(69%) contrast(1000%)
}
.float{
	width:60px;
	height:60px;
	right:10px;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
	z-index: 12;
	border: none;
}

.float-principal{
	position:fixed;
	bottom:45%;
	background-color:#50632F;
	animation: pulse 2s infinite;
}

.float-whats{
	position:fixed;
	bottom:57%;
	background-color:#7b9432;
}

.float-pqr{
	position:fixed;
	bottom:69%;
	background-color:#90ad33;
}


.float:hover{
	color:#FFF;
}

.my-float{
	margin-top:12px;	
}

@keyframes pulse {
    0%{
		transform: scale(0.9);
		box-shadow: 0 0 0 0 rgba(80, 99, 47, 0.7);
	}
	70%{
		transform: scale(1);
		box-shadow: 0 0 0 15px rgba(255, 82, 82, 0);
		
	}
	100%{
		transform: scale(0.9);
	}
}

.dropbtn {
    cursor: pointer;
}

.card-text-shadow{
	position:absolute; 
	bottom:0px; 
	background: rgba(0,0,0, 0.7);
	height: 70px;
}

.card{
	cursor: pointer;
}

.card:hover .card-text-shadow {
	cursor: pointer;
	padding-bottom:20px ;
}

.instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
  -webkit-background-clip: text !important;
          /* Also define standard property for compatibility */
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.facebook{
	color: #337fff;
}

.ink{
	color: #3b66be;
}
.input-inicio:focus{
	box-shadow:  0 0 0.25rem rgb(144 173 51 / 50%) !important
}
.card-star{
    position: absolute;
    top: 0;
    right: 5px;
    margin-top: -10px;
}
/* .carousel-control-prev, .carousel-control-next{
	background-color: rgba(0, 0, 0, 0.2);
} */
/* `----------------------------------------------------------- RESPONSIVE -------------------------------------------------- */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	.fs-0 {
		font-size: 1.5rem !important;
	}
	.width-300{
		width: 100% !important;
	}
	.fondo_carro{
		background-image: url('../imagenes/fondo_mecanicos.jpg'); 
		background-size:cover;
		background-position-x: -450px;
    	background-position-y: 5px;
	}
	.container-perfil{
		max-width: 100% !important;
	}
	.icono_mecanico{
		height: 20em !important;
	}
	.fondo_index{
		background-image: url('../imagenes/mecanico_inicio.jpg');
		background-size: 100%;
		background-position-y: -10pc;
		background-position: center;
		background-repeat: no-repeat;
		height: 220px;
	}
	.fondo_busqueda{
		background-image: url('../imagenes/fondo_busqueda.png');
		background-size: cover;
		height: 250px;
		background-position: -200px 0;
	}
	.fondo_registrate{
		background-image: url('../imagenes/fondo_registrate.png');
		background-size: cover;
		height: 255px;
		background-position: -200px 0px;
	}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	.fs-0 {
		font-size: 1.9rem !important;
	}
	.fondo_carro{
		background-image: url('../imagenes/fondo_mecanicos.jpg');
		background-size: cover;
		background-position-x: -330px;
    	background-position-y: 5px;
	}
	.container-perfil{
		max-width: 500px !important;
	}
	.icono_mecanico{
		height: 18em !important;
	}
	.fondo_index{
		background-image: url('../imagenes/mecanico_inicio.jpg');
		background-size: 100%;
		background-position-y: -10pc;
		background-position: center;
		background-repeat: no-repeat;
		height: 400px;
	}
	.fondo_busqueda{
		background-image: url('../imagenes/fondo_busqueda.png');
		background-size: cover;
		height: 250px;
		background-position: 0px 0;
	}
	.fondo_registrate{
		background-image: url('../imagenes/fondo_registrate.png');
		background-size: cover;
		height: 400px;
		background-position: 0px 0px;
	}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	.fs-0 {
		font-size: 2.5rem !important;
	}
	.fondo_carro{
		background-image: url('../imagenes/fondo_mecanicos.jpg'); 
		background-size:cover;
		background-position-x: 0px;
    	background-position-y: 5px;
	}
	.container-perfil{
		max-width: 700px !important;
	}
	.icono_mecanico{
		height: 9em !important;
	}	
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.fs-0 {
		font-size: 2.5rem !important;
	}
	.fondo_carro{
		background-image: url('../imagenes/fondo_mecanicos.jpg'); 
		background-size:cover;
	}
	.container-perfil{
		max-width: 800px !important;
	}
	.icono_mecanico{
		height: 9em !important;
	}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	.fs-0{
    	font-size: 3.5rem !important;
	}
	.fondo_carro{
		background-image: url('../imagenes/fondo_mecanicos.jpg'); 
		background-size:cover;
		background-position-y:-250px;
	}
	.container-perfil{
		max-width: 1000px !important;
	}
	.icono_mecanico{
		height: 9em !important;
	}
	
}

#fondo-pop {
    background-color: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 101;
}

.loading {
    position: fixed;
    z-index: 999;
    height: 8em;
    width: 8em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}