#containerMap
    {
        overflow:hidden;border: 1px solid #0000001c;
    }
    
        #routeMap 
        {
                z-index:1; 
                width:440px;
                min-height:420px;
                height:100%;
        }
    
    #routeInfoContainer_routeCalculator
    {
        font-size:11px;text-align:right;display:flex;flex-direction:column;gap:10px;
    }
    
    #buttonContainer_routeCalculator
    {
        display:flex;gap:20px;
    }
    
	#routeMapContainer 
	{
		display:inline-flex;
		text-align:left;
		padding:35px;
		padding-bottom:15px;
		border-radius:12px;
		gap:10px;
		
		/*
		box-shadow: 6px 4px 0px #0000002e;
        border: 1px solid #00000008;
		background:#aaa4a45c;*/
	}

		#formColumnCalculatorContainer 
		{
			display:flex;gap:6px;flex-direction:column;
		}

		#containerFormColumnCalculatorContainer 
		{
			display:flex;gap:6px;flex:1;
		}


	.iconInputCalculatorContainer 
	{
		position: absolute;
		top: 9px;
		left: 4px;
	}

		.iconInputCalculatorContainer i 
		{
			color:#a01f3e;
		}

	.suggestion_routeCalculator
	{
		position: absolute;
		display:none;
		flex-direction:column;
		z-index:500;
		background: white;
		box-shadow: 2px 3px 1px #867e7e;
		border: 1px solid #00000045;
		border-radius: 1px;
		width:400px;
		text-align:left;
	}

		.suggestion_routeCalculator > .resultBorderBottom 
		{
		  cursor: pointer;
		  border-bottom: 1px solid #00000036;

		}

		.suggestion_routeCalculator > div
		{
		  text-transform: capitalize;
		  padding: 6px;
		}

		.suggestion_routeCalculator > div[id_mode]:hover 
		{
			background: #00000029;
		}


	.tarifaT3Box_routeCalculator
	{
	  font-weight:600;
	  justify-content: center;
	  border-radius: 8px;
	  font-size: 13px;
	  background: #873450;
	  margin:0 auto;
	  width:85px;
	  color: white;
	  padding: 5px;
	  margin-top:5px;
	  margin-bottom:5px;
	}

	.leaflet-tooltip.bindTooltip_routeCalculatorMap
	{
		border-radius:100%;
		padding:5px;
		display:flex;
		justify-content:center;
		align-items:center;
		padding:8px;
	}

	.leaflet-tooltip.bindTooltip_routeCalculatorMap.start
	{
		background:blue;
	}

	.leaflet-tooltip.bindTooltip_routeCalculatorMap.end
	{
		background:red;
	}

	
	.leaflet-routing-container-hide
	{
		display:none !important;
	}


	#tarifaBoxContainer 
	{
		display:flex;
		justify-content:center;
		flex-direction:column;
		gap:40px;
		margin-left:30px;
		margin-right:20px;
	}

		.tarifaBox
		{
            font-size: 11px;
              height: 200px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              text-align: center;
              border: 1px solid #00000005;
              background: #dfdfdf;
              padding: 6px;
              border-radius: 10px;
              color: #484848;
              		width:230px;
		}



	.inputCalculatorContainer 
	{
		display:flex;
		min-width:400px;
		border: 1px solid #0000002b;
		border-radius:6px;
		overflow:hidden;	
	}

		.inputCalculatorContainer > .buttonBootstrap 
		{
			border:0;
			border-radius:0;
			background:#d4d4d4;
			cursor:default;
		}


	.inputCalculatorContainer > input 
	{
		border:0 !important;
		padding-left:25px;
	}

	.inputCalculatorContainer > input:focus 
	{
	  outline: none;
	  border-color: #999; /* o el color que prefieras */
	  box-shadow: none;   /* elimina sombras adicionales */
	}


    #buttonCalcPrice 
    {
     width: 100%;
      border: 0;
      background: #a01f3e;
      padding: 12px;
      color: white;
      font-size: 16px;
      border-radius: 10px;
      font-weight: 600;
      cursor:pointer;
    }
    
	#buttonCalcPrice:disabled
	{
		opacity:0.5;
	}
	
	
	
	


@media (max-width: 1200px)
{
	#tarifaBoxContainer 
	{
		flex-direction:row;
	}

	#containerFormColumnCalculatorContainer
	{
		flex-direction:column;
	}
}


@media (max-width: 900px)
{
        #routeMap 
    {
        
        width:100%;
    }
    
	#routeMapContainer 
	{
		justify-content:center;
		flex-wrap:wrap;
	}
	
	      #routeInfoContainer_routeCalculator
      {
          flex-direction: row;
         justify-content: space-around;
      }
    
    .carRouteContainer 
    {
        text-align:center;
    }
}


@media ( max-width:650px ) 
{

    .suggestion_routeCalculator
    {
        width:auto;
    }
    
    .inputCalculatorContainer
    {
        min-width: auto;
    }
    #routeMap
    {
        width:100%;
        
    }
    
    #tarifaBoxContainer
    {
        margin:0px;
        padding:8px;
        flex-direction:column;
    }
    
    .tarifaBox
    {
       width: 100%
    }
    
      #routeMapContainer
      {
         padding:0px;
      }
      
      #formColumnCalculatorContainer
      {
          padding: 8px;
      }
      
      #buttonContainer_routeCalculator
      {
          flex-direction:column;
      }
      

}



@media ( max-width:1110px ) 
{
    #routeMapContainer
    {
        flex-direction: column-reverse;
    }
    
    #routeMap
    {
        width:100%;
        
    }
    
}




/** MODAL */

#tarifaModal
{
    position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #0000006e;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

[modal-container]:focus {
  outline: none;
}

    #containerTarifaInfoBox
    {
        flex-wrap:wrap;
    }
    
    #headerTarifaModal 
    {
        font-size:32px;
    }

    .tarifaInfoBox
    {
      background: #00000026;
      padding: 3px;
      width: 305px;
      border-radius: 8px;
      gap:7px;
      display:flex;
      flex-direction: column;
    }
        
        .titleTarifaInfoBox
        {
            font-size:24px;
        }
        
        .subTitleTarifaInfoBox
        {
            font-size:11px;
        }


    @media (max-width:680px) 
    {
        .tarifaInfoBox
        {
            width:100%;
        }
    }