html,body{font-family: 'Lato', sans-serif;font-size:14px;color:#344960;background:#EBEBEB}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

#headerWrapper{background:#003c71}
#header{max-width:760px;margin:auto;}
#headerText{font-family: 'Fira Sans', sans-serif;font-size:13px;color:#fff;float:left;padding:12px 0}
#headerText a{color:#fff}

#linguaSelect{float:right;padding:8px 0}

#isMobile{display: none}
#mobile{width:98%;font-family: 'Fira Sans', sans-serif;display:none;background:#fff;padding:5px 0 10px 0;text-align: center;margin:5px auto;box-shadow: 0 4px 5px -2px rgba(0,0,0,0.29);border-left:1px rgba(0,0,0,0.04) solid;border-top:1px rgba(0,0,0,0.04) solid;z-index: 99;top:41px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px}
#mobile a{color:#000;display: block;padding: 5px}
#mobile a:visited{color:#000}
#mobile a:hover{background:#2984d3 ;color:#fff;}
#mobile span{color:#ff6e00}
#mobile small{font-size:10px;color:#414141}

#loghiTable{margin:20px auto;width:100%}
#aziendaLogo{float:left;max-height:100px;max-width:200px}
#aziendaLogo img{max-height:100px}
#qaplaLogo{text-align:right;vertical-align:middle}
#qaplaLogoIMG{width: 100px}
#aziendaLogo{text-align:left;vertical-align:middle}

#trackingText{background:#fff;padding:15px;margin-bottom:15px}

#container{max-width:760px;margin:auto; flex-basis: 760px;}
#wrapper{background:#f9f9f6;padding:15px;margin-bottom:15px;box-shadow: 0 4px 5px -2px rgba(0,0,0,0.29);border-left:1px rgba(0,0,0,0.04) solid;border-top:1px rgba(0,0,0,0.04) solid}

#window{background:#fff;padding:10px;position:absolute;box-shadow: 0 4px 5px -2px rgba(0,0,0,0.29);border-left:1px rgba(0,0,0,0.04) solid;border-top:1px rgba(0,0,0,0.04) solid;z-index: 99;display: none;top:41px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px}
#window a{font-family: 'Fira Sans', sans-serif;color:#000;display: block;padding: 10px;text-decoration: none}
#window a:visited{color:#000}
#window a:hover{background:#2984d3 ;color:#fff;text-decoration: underline}

#ticket{float:right;display:block;color:#ff7f3f;font-family: 'Fira Sans', sans-serif;text-transform: uppercase;padding: 10px;font-size: 18px;margin-top:4px}
#ticket:hover{background:#ff7f3f;color:#fff}

#tracking{background:#fff;padding:30px;margin:-15px -15px 15px -15px}
#statusWrapper{position: relative;height:100px}
.statusDot{background:#d6d6d6;position:absolute;width:6px;height:6px;border-radius:50%;top:55px}
.statusDot.no{background:#f4f5f0;}
#statusBaloon{position: absolute;top:0;font-family: 'Fira Sans', sans-serif;color:#fff;font-size:16px;border-radius: 20px;border-bottom-right-radius: 0;width:200px;height: 45px;line-height: 45px;text-align: center}
#statusBaloon.reverse{border-radius: 20px;border-bottom-left-radius: 0}
#statusIcon{position: absolute;bottom:-3px;left:0;z-index: 100}
#statusBar{position: absolute;bottom:20px;left: 0;width: 700px}
#statusBarLeft{background:#d6d6d6;height:8px;border-top-left-radius:3px;display: inline-block;}
#statusBarRight{background:#f4f5f0;height:8px;border-top-right-radius:3px;border-bottom-right-radius:3px;display: inline-block;}
#statusPartenza{max-width:180px;height: 46px;background: #ffdc1e;border-radius: 20px;border-top-left-radius: 0}
#statusPartenza div{padding: 5px 0 0 22px;font-family: 'Fira Sans', sans-serif;color:#000}
#statusPartenza b{text-transform: capitalize}

#status{background:#fff;padding:15px;font-size:22px;color:#808080;margin-bottom:15px}
#corriereLogo{float:left;vertical-align:middle;width:48px;height:48px;margin-right:25px}
#trackingNumber{font-family: 'Fira Sans', sans-serif;color:#101010;font-size:22px;text-decoration:none;display:block;float:left;margin-top:12px}
#trackingNumber:hover{color:#ff7f3f}
#trackingNumber.milkman{background:#01bfbd;color:#fff;padding: 10px;margin-top:0}
#trackingNumber.milkman:hover{background:#ff7f3f}

#trackingElenco{border-collapse:separate;border-spacing:0;width:100%}
#trackingElenco td{padding:12px 12px;font-size:14px;color:#004f84;overflow:hidden;text-overflow: ellipsis;line-height:16px}
#trackingElenco td.data{color:#afb1b4;text-align: right}
#trackingElenco td.status{width:22px;}
#trackingElenco td small{color:#414141;display:block;margin-top:8px}
#trackingElenco td.dot{background: url('https://cdn.qapla.it/img/tracking/dot.png') no-repeat center center}
#trackingElenco td.text{}
#trackingElenco span.status{margin-top:0;margin-right: 0;}
a.moreTracks{color:#ff7f3f;font-family: 'Fira Sans', sans-serif;font-size:15px;padding-left: 30px}
a.moreTracks:hover{color:#003c71}
.hidden{display:none}

span.status{display:inline-block;background:url('https://cdn.qapla.it/cp/img/status-round.png') no-repeat;width:22px;height:22px;vertical-align:middle}
span.status-0{background-position: -0px -0px}
span.status-4{background-position: -22px -0px}
span.status-6-0{background-position: -44px -0px}
span.status-6{background-position: -44px -0px}
span.status-3{background-position: -0px -22px}
span.status-6-3{background-position: -22px -22px}
span.status-6-2{background-position: -44px -22px}
span.status-5{background-position: -0px -44px}
span.status-6-1{background-position: -22px -44px}
span.status-2{background-position: -44px -44px}
span.status-1{background-position: -0px -66px}
span.status-99{background-position: -22px -66px}
span.status-10{background-position: -44px -66px}
span.status-8{background-position: -0px -88px}
span.status-95{background-position: -22px -88px}
span.status-50{background-position: -44px -88px}
span.status-20{background-position: 0 -110px}

hr{margin:10px auto;color:#b8b8b1 ;height:1px;border:0;background:#b8b8b1;width:95%}

#footer{text-align:center;margin-top:30px;margin-bottom:30px;font-size:10px;color:#A8A8A8}
#footer a{color:#ff7f3f}
#footer a:hover{color:#003c71}

#main-container{
	display: flex;
	flex-direction: row;
	height: 100px;
	flex-basis: 760px;
}
#left-container, #right-container{
	flex: 1;
}
#right-container{
	padding: 10px;
}

/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (max-width : 1380px) {
    #isMobile{display:block}
    #rightBar{width: 100%;position: relative;}
}
@media only screen and (max-width : 767px) {
    #mobile{display:block}
	#container{width:98%; margin:auto; flex-basis: 98%}
	#wrapper{}
	#trackingText{}
	#header{width:100%}
	#aziendaLogoTD{text-align:center}
	#status{background:#fff;padding-bottom:0}
	#qaplaLogo,#headerText,#spacer,#qaplaLogoTD,#tracking{display:none}
	#linguaSelect{float:right;margin-right:5px}
	#ticket{float:none;text-align:center;margin:8px auto;}
	#trackingNumber{float:none;text-align:center}
	#statusButton{float:none;display:block;margin:10px auto 10px auto;padding-left:0;padding-right:0;width:90%}
	#aziendaLogo{margin:auto;float:none;text-align:center}
    #aziendaLogo img{max-height:50px}
	#corriereLogo{float:none;text-align:center;margin:0 auto 10px auto;display: block}

    #trackingElenco td.data{font-size:11px;padding-left:0;padding-right:0}

	#footer{margin-top:15px;margin-bottom:20px}
	#footer span{display:block;margin:5px 0}


}