:root{
	
	--backgroundmain: #eeecec;
	--texto: #637D96;
	--subtexto: #95B7B8;
	--blanco: #FFF;
	--warning: #E40003;
    --navbar: rgb(53, 53, 53);

}

body{

    font-size: 14px !important;
    font-family: 'Gotham Book', sans-serif !important;
	
}

.modalLarge{

	min-width: 80% !important;
	
}

.modalMed{

	min-width: 60% !important;
	
}

label{

	color: var(--texto);
	font-size: 14px;
	font-weight: bold;
}

.select2-selection__rendered{

	min-height: 35px !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	align-content: center;

}

.select2-selection--single{
	
	min-height: 36px !important;
	border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;

}

.select2-selection__arrow{
	
	min-height: 36px !important;
	
}

.inputStyle{

	border: none;
	border-bottom: 2px solid var(--texto);
	outline: none;
	min-width: 100%;
	color: var(--texto);

}

.btnComplete{

	width: 100%;
	height: 35px;
	border: none;
	border-radius: 10px;
	background-color: var(--texto);
	color: #fff;

}

.bodyLogging{

    min-width: 100vw;
    max-width: 100vw;
    min-height: calc(100vh - 50px);
    max-height: calc(100vh - 50px);
    display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
}

.contentLogging{

	min-width: 350px;
    max-width: 350px;
	border: none;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	background-color: #f7f7f7e1;
	padding: 25px;
	
}

.form-signin{

	min-width: 100% !important;
}

.tittleLogging{

	color: var(--texto);
	font-size: 24px;
	font-weight: bold;

}

.buttonLogging{

	margin-top: 25px;
	min-width: 100%;

}

.controlInput{

	margin-top: 25px;
	min-width: 100%;

}

.mainBody{

    min-height: 100vh;
    max-height: 100vh;
    min-width: 100vw;
    max-width: 100vw;
    background-color: var(--backgroundmain);
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.bodyPageAdmin{

    min-height: 100vh;
    max-height: 100vh;
    min-width: calc(100vw - 60px);
    max-width: calc(100vw - 60px);
	
}

.contentInfo{

	min-height: 100vh;
    max-height: 100vh;
    min-width: calc(100vw - 250px);
    max-width: calc(100vw - 250px);
	padding: 35px;

}

.contentFilter{

	min-height: 100vh;
    max-height: 100vh;
    width: 210px;
	padding: 15px;
	overflow: auto;

}

.tittleWindow{

	font-size: 28px;
	font-weight: bold;
	height: 70px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

}

.contentTittle{

	min-width: calc(100% - 250px);
	max-width: calc(100% - 250px);
	display: flex;
	align-content: flex-end;
	align-items: center;
	justify-content: flex-start;

}

.contentFunction{

	min-width: 250px;
	max-width: 250px;
	display: flex;
	align-content: flex-end;
	align-items: center;
	justify-content: flex-end;

}

.btnProcess{

	background-image: url("../img/icons/Iconos\ Ticket_Estatus_Proceso.svg");

}

.btnClient{

	background-image: url("../img/icons/Iconos\ Ticket_Estatus_Cliente.svg");

}
.btnProvider{

	background-image: url("../img/icons/Iconos\ Ticket_Estatus_Proveedor.svg");

}
.btnCancel{

	background-image: url("../img/icons/Iconos\ Ticket_Estatus_Cancelar.svg");

}
.btnFinish{

	background-image: url("../img/icons/Iconos\ Ticket_Estatus_Finalizar.svg");

}

.downloadDoc{

	background-image: url("../img/icons/Iconos\ Ticket_Importar.svg");
	background-position: center;
	background-repeat: no-repeat; 
	background-size: 100%;
	min-width: 50px;
	border: none;
	padding: 10px;

}

.deleteDoc{

	background-image: url("../img/icons/Iconos_Eliminar.svg");

}

#btnAgree{

	background-image: url("../img/icons/Iconos\ Ticket_Agregar.svg");

}

#btnFilter{

	background-image: url("../img/icons/Filtros.svg");

}

#btnExport{

	background-image: url("../img/icons/Iconos\ Ticket_Importar.svg");

}

.btnFuncModal{

	background-position: center;
	background-repeat: no-repeat; 
	background-size: 30%;
	border: none;
	padding: 10px;
	outline: none;
	
}

.btnNuevo{
	
	background-position: center;
	background-repeat: no-repeat; 
	background-size: 90%;
	height: 35px;
	width: 35px;
	border: none;
	padding: 10px;
	margin-left: 25px;
	transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);

}

.btnNuevo:hover{

	border-radius: 2px;
	box-shadow: inset 0 0 20px rgba(49, 138, 172, 0.5), 0 0 20px rgba(49, 138, 172, 0.4);
  	outline-color: rgba(49, 138, 172, 0);
  	outline-offset: 80px;
  	-webkit-border-shadow: 0 4px 16px rgba(49, 138, 172, 1);
	cursor: pointer;

}

.btnModal{

	border: none;
	border-radius: 5px;
	height: 35px;
	width: 80px;
	background-color: var(--texto);
	color: var(--blanco);
}

.btnCloseModal{
	
	color: var(--texto);
	font-weight: bold;
	font-size: 22px;
	border: none;
	outline: none;
	background-color: transparent;
	
}

.btnCloseModal:hover{
	
	transition: 0.2s;
	cursor: pointer;
	
}

.flexContent{

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-shrink: 0;
    max-height: calc(100% - 150px);
	border: none;
	border-radius: 10px;
	overflow: auto;

	
}

.itemTicket{

	background-color: var(--blanco);
	border-radius: 5px;
	margin: 1rem;
	display: flex;
	flex-direction: column;
	width: 20rem !important;
	height:min-content ;
	align-items: center;
	
}

.itemTitle{

	border-radius: 5px;
	background-color: var(--texto);
	display: flex;
	flex-direction: row;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	padding: 10px;
	min-height: 30px;
	max-height: 35px;
	color: var(--blanco) !important;
	font-size: 1.1rem;
	font-weight: bold;
	width: 100%;

}

.nTicket{

	width: calc(100% - 80px);

}

.btnFunctionTicket{

	width: 35px;
	height: 35px;
	margin-left: 10px;
	border-radius: 5px;
	background-color: transparent;
	cursor: pointer;
}

.btnFunctionTicket:hover{

	background-color: var(--backgroundmain);

}

.divGasto{

	background-image: url("../img/icons/Ticket_Gastos.svg");
	background-position: center;
	background-repeat: no-repeat; 
	background-size: 90%;

}

.divDetalles{

	background-image: url("../img/icons/Ticket_Detalle_Data.svg");
	background-position: center;
	background-repeat: no-repeat; 
	background-size: 90%;

}

.divEvidencia{

	background-image: url("../img/icons/Ticket_Adjuntar.svg");
	background-position: center;
	background-repeat: no-repeat; 
	background-size: 90%;

}

.divExport{

	background-image: url("../img/icons/Ticket_Importar.svg");
	background-position: center;
	background-repeat: no-repeat; 
	background-size: 90%;

}

.itemTitleStatus{

	display: flex;
	flex-direction: row;
	align-items: center;
	align-content: center;
	justify-content: center;
	min-height: 30px;
	width: 100%;
	color: var(--texto) !important;
	font-size: 1.1rem;
	font-weight: bold;

}

.itemTicket label{

	color: var(--texto);
	font-weight: bold;
	min-width: 100%;
	max-width: 100%;
	
}

.itemTicket span{

	color: var(--subtexto);
	font-weight: bold;
	margin-left: 10px;

}

.itemBody{

	padding: 10px;
	line-height: 18px;

}

.itemFunction{

	border-end-start-radius: 10px;
	border-end-end-radius: 10px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	min-width: 100%;
	max-height: 50px;

}

.changeStatus{

  	grid-row: 1;
	height: 40px;
	width: 40px;
	border-radius: 5px;
	background-color: transparent;
	color: transparent;
	font-weight: 900;
	margin: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-repeat: no-repeat; 
	background-size: 80%;

}

.statusSelect{

	width: 110px;
	background-color: var(--texto);
	color: var(--blanco);
	cursor: pointer;
	background-position: left;
	background-repeat: no-repeat; 
	background-size: 30%;
	justify-content: right;
	padding: 5px;

}

.subtextos{

	color: var(--texto);
	font-weight: bold;
	margin: 3px;
}

.subtextos span{

	color: var(--subtexto);

}

.headerDetails{

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: center;

}

.headerDetails label{

	margin-right: 15px;

}

.imageEvid{

	min-width: 100%;
	max-width: 100%;
	max-height: 600px;
	padding: 10px;;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	overflow: auto;

}

.elementImage{

	max-width: calc((100% / 3) - 10px);
	min-width: calc((100% / 3) - 10px);
	max-height: 130px;
	min-height: 130px;
	margin: 5px;
	background-position: center;
	background-size: 100%;

}

.elementImage img{

	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 5px;

}

.imgCar{

	width: 160px;
	height: 200px;
	object-fit: cover;
	object-position: center;
	border-radius: 5px;

}

.imgCarDetails{

	width: 160px;
	height: 400px;
	object-fit: cover;
	object-position: center;
	border-radius: 5px;

}

.contentFilterSel{

	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-content: center;
	flex-wrap: nowrap;
	max-width: 100%;
	overflow: auto;

}

.elementFiler{

	min-width: 100px;
	min-height: 2rem;
	border: 1px solid var(--subtexto);
	border-radius: 5px;
	background-color: var(--blanco);
	color: var(--texto);
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10px;

}

.elementFiler:hover{
	background-color: var(--texto);
	color: var(--blanco);
	border: 1px solid var(--blanco);
	cursor: pointer;
}

.elementFilerSelect{

	background-color: var(--texto);
	color: var(--blanco) !important;
	border: 1px solid var(--blanco);

}

.contentFilterDate{

	background-color: var(--blanco);
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	padding: 5px;

}

.contenDate{

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	justify-content: center;
	
}

.day{

	border-radius: 5px;
	border: 1px solid var(--texto);
	color: var(--texto);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	margin: 3px;
	font-size: 10px;

}

.day:hover{

	background-color: var(--texto);
	color: var(--blanco);
	border: 1px solid var(--blanco);
	cursor: pointer;

}

.elementDaySelect{

	background-color: var(--texto);
	color: var(--blanco);
	border: 1px solid var(--blanco);

}