html, body {
		overflow-x:hidden;	
      	background: #f8f9fa;
    }

    .form-container {
      	max-width: 500px;
      	margin: 50px auto;
      	background: #ffffff;
      	padding: 30px;
      	border-radius: 15px;
      	box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
        display: none;
		opacity: 0;
		transition: opacity 0.4s ease-in-out;
    }
    

	.form-container.active {
		display: block;
		opacity: 1;
	}
    
    .form-container h4 {
    	text-align: center;
    	font-size: 1rem;
    	color: #9e9e9e;
    }

    .form-container h3 {
      text-align: center;
      color: #343a40;
    }

    .btn-custom {
      background-color: #007bff;
      border-color: #007bff;
      transition: all 0.3s ease;
      color: white;
    }

    .btn-custom:hover {
      background-color: #0056b3;
      border-color: #004b9a;
      color: white;
    }

    .form-group label {
      font-weight: 500;
    }
    
    .was-validated .form-control:invalid ~ .invalid-feedback {
		display: block;
    }
    
    #txaDescripcion{
    	height:180px;    	
    	resize:none;
    }
    
    .cameraContainer{
		background-color: #002060;
	    border-radius: 50%;
	    margin: 10px;
	    display: flex;
	    color: white;
	    justify-content: center;
	    height: 50px;
	    width: 50px;
	    align-items: center;
	    cursor:pointer;
    }
    
    #video{
    	width:100%;
    	height:auto;
    }
    
    .closeButton{
   	    background: white;
	    color: red;
	    position: absolute;
	    top: 10px;
	    right: 10px;
	    border-radius: 50%;
	    font-size: 1.5rem;
	    opacity: .8;
    }
    
    .shootButton{
		background: white;
	    color: #5d5d5d;
	    position: absolute;
	    bottom: 10px;
	    left: 50%;
	    transform: translateX(-50%);
	    font-size: 2.5rem;
	    opacity: .8;
    	border-radius: 50%;
    }
    
    .picture-container{
   	   	display: none;
    	width: 100%;
    	overflow: hidden;
    	justify-content: center;
    }
    
    .pictureInner-container{
	    width: 80%;
	    border-radius: 10px;
	    margin: 10px;
	    overflow: hidden;
    }
    
    .clearButton{
    	position:absolute;
    	top:10px;
    	right:10px;
    	color: red;
	    background: white;
	    border-radius: 50%;
	    padding: 1px;
    }
    
    datepicker {
	  border-radius: 1rem;
	  border: 1px solid #dee2e6;
	  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
	  font-family: 'Segoe UI', sans-serif;
	}
	
	/* Estilo para los días */
	.datepicker table tr td,
	.datepicker table tr th {
	  padding: 0.75rem;
	  width: 2.5rem;
	  height: 2.5rem;
	  text-align: center;
	}
	
	/* Día seleccionado */
	.datepicker table tr td.active,
	.datepicker table tr td.active:hover {
	  background-color: #007bff;
	  color: white;
	  border-radius: 50%;
	}
	
	/* Día de hoy */
	.datepicker table tr td.today {
	  background-color: #e3f2fd;
	  border-radius: 50%;
	  color: #007bff;
	}
	
	/* Encabezado del mes */
	.datepicker .datepicker-switch,
	.datepicker .prev,
	.datepicker .next {
	  font-weight: bold;
	  font-size: 1.1rem;
	}
	
	.datepicker-inline {
	    width: fit-content !important;
	}
	
	
	#datepicker-inline-container.is-invalid {
	  border: 1px solid #dc3545; /* borde rojo */
	  border-radius: 0.25rem;
	}
	
	#datepicker-inline-container.is-invalid::after {
	  content: "!";
	  color: #dc3545;
	  font-weight: bold;
	  position: absolute;
	  right: 10px;
	  top: 10px;
	  font-size: 1.2rem;
	}
	
	#datepicker-inline-container.is-valid {
	  border: 1px solid #28a745; /* borde verde */
	  border-radius: 0.25rem;
	}
	
	#datepicker-inline-container.is-valid::after {
	  content: "\2713";
	  color: #28a745;
	  font-weight: bold;
	  position: absolute;
	  right: 10px;
	  top: 10px;
	  font-size: 1.2rem;
	}
	
	
	.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%;
	}
	
	
	.presupuestoInputContainer{
		display:none;
	}
	
	.legales{
		max-height:360px;
		overflow-y: scroll;
		padding:10px;
	}
	
	.codeContainer ul li{
		cursor: pointer;
	    padding-left: 1rem;
	    padding-right: 1rem;
	}
	
	.codeContainer ul li:nth-child(odd) {
	  background-color: #f0f0f0;
	}
	
	.codeContainer ul li:hover{
		background-color: #c7effe;
	}
	
	.codeContainer ul li div:nth-child(1){
		font-weight: bold;
	}
	
	.codeContainer ul li div:nth-child(2){
		font-size:.7rem;
	}
	
	@keyframes rotate360 {
	  from {
	    transform: translateY(-50%) rotate(0deg);
	  }
	  to {
	    transform: translateY(-50%) rotate(360deg);
	  }
	}
	
	.rotating {
	  animation: rotate360 2s linear infinite;
	}
	
	.loader {
	  position: absolute;
	  top: 50%;
	  right: 10px;
	  font-size: 20px;
	  transform: translateY(-50%);
	  display:none;
	}
	
	.exitoform-container .header span{
		color:green;
	}
	
	.logocontainer{
		overflow: hidden;
	    border-radius: 50%;
	    height: 200px;
	    width: 200px;
	    margin: auto;
	    display: flex;
	    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
	    margin-bottom: 1rem;
	}
	
	.logocontainer img{
		width: 100%;
	    object-fit: contain;
	}
	
	.legalesform-container{
		position:relative;
	}
	
	.legalesform-container .legalesloader{
		display:none;
		position:absolute;
		top:0px;
		left:0px;
	    width: 100%;
	    height: 100%;
	    background: #8080807d;
	    border-radius: 10px;
	}
	
	.legalesloader.flexcenter {
		display: flex;
		justify-content: center;
		align-items: center;
	}

    @media (max-width: 538px) {
		.form-container{
			margin: 20px  auto;
			padding: 10px;
		}
	}