body {
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    color: #232323;
	background:#EFEFF2;
}

header, footer, nav, section {
    display: block;
}

/*Styles para el login*/
#bodyLogin
{
	/*background:#C3C3C3; /*COLOR DE FONDO DE LA PAGINA */
	background: url('../Images/puerto1.jpg') no-repeat fixed center center;
	background-size: cover;
}

.logo { 
  width: auto;
  height: auto;
  float:left;
  padding:22.5px 0px 0px 10px;
}

#divLogin
{ 
	position:absolute;
	top:50%;
	left: 52%;
	width: 380px; /* TAMAÑO DE CUADRO DE LOGIN */
    padding: 69px;
    background: #fff;
    border-radius: 5px;
    border-top: 5px solid #FC6;
	border-bottom: 5px solid #FC6;
	margin-top: -346px;
    margin-left: -275px;
	/*
	position:absolute;
	top:50%;
    left: 50%;
	width:750px;
	height:492px;
    margin-top: -246px;
    margin-left: -375px;
	font-family:Arial;
	font-size:12px;
	/*background-image: url(../Images/puerto2.jpg)/*/

}

/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

.editor-label {
    margin: 1em 0 0 0;
}

.editor-field {
    margin: 0.5em 0 0 0;
}

option, select, input {
	border: 2px solid #C3DAF9; 
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

option:focus, select:focus, input:focus {
    border: 2px solid #ffd800; 
    box-shadow: 0px 0px 4px #ffd800; 
    -moz-box-shadow: 0px 0px 4px #ffd800;
    -webkit-box-shadow: 0px 0px 4px #ffd800;
}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
}

.validation-summary-valid {
    display: none;
}

/* Stylos de las etapas
    ------------------------------------------------*/

ul {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    margin: 5px;
}

li.borde {
        /*border-bottom: 1px dotted #8a9efe;*/
}

.ulMenu {
    height: 60px;
    border:none;
}

li.menu {
    float: left;
    height: 30px;
    width: 7.5%;
}

li.diferencias {
    float: left;
    height: 30px;
    width: 5%;
}

li.etapas {
    float: left;
    width: 7.5%;
    height: 25px;
}

li.tipo {
    float: left;
    width: 10%;
    background: -webkit-linear-gradient(top,#063f8f,#5798D0,#063f8f );
    background: -moz-linear-gradient(top,#063f8f,#5798D0,#063f8f);
    background: -o-linear-gradient(top,#063f8f,#5798D0,#063f8f);
    background: linear-gradient(to bottom,#063f8f,#5798D0,#063f8f);
    font-size: 1.2em;
    color:#fff;
    padding-bottom: 1px;
    padding-left: 10px;
    text-align:left;
}

li.pagina {
    float: left;
    width: 2%;
    background: -webkit-linear-gradient(top,#feb051,#FED098,#feb051 );
    background: -moz-linear-gradient(top,#feb051,#FED098,#feb051);
    background: -o-linear-gradient(top,#feb051,#FED098,#feb051);
    background: linear-gradient(to bottom,#feb051,#FED098,#feb051);
    font-size: 1.2em;
    color:#000;
    padding-bottom: 1px;
    text-align:center;
}

li.sucursal {
    float: left;
    width: 76%;
    padding-left: 10%;
    background: #063f8f;
    background: -webkit-linear-gradient(top,#063f8f,#5798D0,#063f8f );
    background: -moz-linear-gradient(top,#063f8f,#5798D0,#063f8f);
    background: -o-linear-gradient(top,#063f8f,#5798D0,#063f8f);
    background: linear-gradient(to bottom,#063f8f,#5798D0,#063f8f);
    font-size: 1.2em;
    color:#fff;
    padding-bottom: 1px;
	font-weight: bolder;
}

li.buque {
    float: left;
    width: 76%;
    padding-left: 10%;
    background: -webkit-linear-gradient(top,#5798D0,#FEFEFE,#5798D0 );
    background: -moz-linear-gradient(top,#5798D0,#FEFEFE,#5798D0);
    background: -o-linear-gradient(top,#5798D0,#FEFEFE,#5798D0);
    background: linear-gradient(to bottom,#5798D0,#FEFEFE,#5798D0);
    font-size: 1.2em;
    color:#000;
    padding-bottom: 1px;
    padding-right: 10px;
}

.circulo {
    display: block;
    width: 16px;
    height: 16px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    float: left;
}

.fecha {
    display: block;
    width: 75px;
    height: 18px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    float: left;
	text-align:center;
	background-color:#fff;
	font-size: 0.9em;
}

.linea {
    display: block;
    width: 100%;
    height: 4px;
    Margin-top: 6px;
    padding-left: 10px;
}

.primerLi {
    padding-left: 0%;
    margin-left: 1.5%;
}
.space {
    float: left;
    width: 7.5%;
	hight: 50%;
    margin-right: -3%;
	padding-right:22%;
}

.menuspace {
    Margin-top: 0px;
    float: left;
    width: 7%;
    cursor: pointer;
    font-size: 0.8em;
    height: 25px;
    text-align:left;
	font-weight: bolder; /* NEGRITAS */
}

.menusdescripcion {
    Margin-top: 0px;
    float: left;
    width: 10%;
    font-size: 0.8em;
    height: 25px;
    text-align:left;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden; 
	font-weight: bolder; /* NEGRITAS */
}

.menusdiferencias {
    Margin-top: 0px;
    float: left;
    width: 5%;
    font-size: 1em;
    height: 25px;
    text-align:left;
}
.tipoOperacionImportacion {   
    width:1.5%;
    height:2.5%;    
}

.tipoOperacionExportacion {
    width:1.5%;
    height:2.5%;
}


.etapasMenu, .diferenciasDias {
    width: 25px!important;
    height: 25px !important;
    cursor: pointer;
}

.nombreEtapas {
    display: block;
    font-weight: bolder;
    font-size: .8em;
}

.etapasMenugris {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    opacity:0.1;
}

.colorL1 {
    background: #009900;
    background: -webkit-linear-gradient(top,#009900,#fff,#009900 );
    background: -moz-linear-gradient(top,#009900,#fff,#009900 );
    background: -o-linear-gradient(top,#009900,#fff,#009900 );
    background: linear-gradient(to bottom,#009900,#fff,#009900 );
	
}

.colorL2 {
    background: #CC0000;
    background: -webkit-linear-gradient(top,#CC0000,#fff,#CC0000 );
    background: -moz-linear-gradient(top,#CC0000,#fff,#CC0000 );
    background: -o-linear-gradient(top,#CC0000,#fff,#CC0000 );
    background: linear-gradient(to bottom,#CC0000,#fff,#CC0000 );
}

.color1 {
    background: #A4DBA4 !important;
	/*font-weight: bolder; /* NEGRITAS */
}

.color2 {
    background: #D79090 !important;
}

.color3 {
    background: #FEF87C !important;
}

.colorB {
    display: block;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    float: left;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    color: #0805ff;
    padding: 0px 0px;
    text-align: center;
    background: -webkit-linear-gradient(top,#fff,#fff );
    background: -moz-linear-gradient(top,#fff,#fff);
    background: -o-linear-gradient(top,#fff,#fff);
    background: linear-gradient(to bottom,#fff,#fff);
    border: 1px solid #000000;
    -moz-box-shadow: 0px 1px 4px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.7);
    -webkit-box-shadow: 0px 1px 4px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.7);
    box-shadow: 0px 1px 4px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.7);
    text-shadow: 0px -1px 0px rgba(000,000,000,0.4), 0px 1px 0px rgba(255,255,255,0.3);
}

#config {
    width: 2%;
    cursor: pointer;
    position: absolute;
    left: 94%;
    top: 2%;
}

#popupConfig, #popupInfo {
    padding: 3px;
    background: #fff;
    border: 1px solid #000000;
    position: absolute;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: .7em;
    max-width: 25%;
    width: 25%;
    display: none;
    -moz-box-shadow: 2px 2px 5px rgba(000,000,000,0.3), inset 0px 0px 1px rgba(255,255,255,1);
    -webkit-box-shadow: 2px 2px 5px rgba(000,000,000,0.3), inset 0px 0px 1px rgba(255,255,255,1);
    box-shadow: 2px 2px 5px rgba(000,000,000,0.3), inset 0px 0px 1px rgba(255,255,255,1);
    text-shadow: 0px -1px 0px rgba(000,000,000,0.4), 0px 1px 0px rgba(255,255,255,0.3);
    z-index: 1;
}

#popupConfig {
    padding: 10px;
}

@media only screen and (max-width:1024px) {
    .circulo {
        display: block;
        width: 16px;
        height: 16px;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        float: left;
    }

	.fecha {
		display: block;
		width: 47px;
		height: 14px;
		-webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
		float: left;
		text-align:center;
		background-color:#fff;
		font-size: 0.6em;
	}

    .linea {
        display: block;
        width: 100%;
        height: 4px;
        Margin-top: 6px;
        padding-left: 0px;
    }

    li.buque, li.sucursal, li.tipo, li.pagina, .menuspace, .menusdescripcion, #popupConfig, #popupInfo, .colorB {
        font-size: .6em;
    }

	.menusdiferencias {		
		font-size: 0.8em;
	}

	.ulMenu {
        height: 35px;
        border:none;
    }

    .nombreEtapas {
        font-size: .6em;
    }

    .primerLi {
		padding-left: 2%;
    }

    .space {
        margin-right: 1%;
		padding-right:21%;
    }

	.etapasMenu, .diferenciasDias {
		width: 20px!important;
		height: 20px !important;
	}
}

@media only screen and (max-width:700px) {
    .circulo {
        display: block;
        width: 12px;
        height: 12px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        float: left;
    }

	.fecha {
		display: block;
		width: 20px;
		height: 10px;
		-webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
		float: left;
		text-align:center;
		background-color:#fff;
		font-size: 0.4em;
	}

    .linea {
        display: block;
        width: 100%;
        height: 2px;
        Margin-top: 5px;
        padding-left: 2px;
    }

    li.buque, li.sucursal, li.tipo, li.pagina, .menuspace, #popupConfig, #popupInfo, .colorB {
        font-size: .4em;
    }

	.menusdiferencias {		
		font-size: 0.6em;
	}

    .primerLi{
		padding-left: 4%;
		margin-left: 13%;
    }

    .nombreEtapas{
        display:none;
    }

    .ulMenu {
        height: 20px;
        border:none;
    }

	.menusdescripcion{
		display:none;
	}

    .space {
        margin-right: 1%;
		padding-right:14%;
    }

	.etapasMenu, .diferenciasDias {
		width: 15px!important;
		height: 15px !important;
	}

	.ano{
		display:none;
	}
}