@import "../../../basic_imports";

$flagWidth: 20px !default;
$flagHeight: 15px !default;
// image related variables
$flagsImagePath: "/headers/ilusion/img/scr/" !default;
$flagsImageName: "flags" !default;
$flagsImageExtension: "png" !default;
$flagsImageTimeStamp: "?date=20180205" !default;

.covidSubtitle {
	margin-top: 30px;
	margin-bottom: 5px;
}

#mapid {
	background: #FFFFFF;
	border: 1px solid $brand-grey-medium;
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	height: 600px;
	width: 100%;
	z-index: 1;
	@media (max-width: $grid-float-breakpoint-max) {
		height: 350px;
	}
	.leaflet-popup-content {
		margin: 0;
		p {
			font-size: 14px;
			margin: 5px 0;
		}
	}
	.leaflet-popup-content-wrapper {
		border-radius: 6px;
	}
	.leaflet-popup-tip-container,
	.leaflet-popup-close-button {
		display: none;
	}
	@media (max-width: $grid-float-breakpoint-max) {
		.leaflet-popup-close-button {
			display: block;
		}
	}
}

.covidTooltip {
	padding: 10px 30px 10px 15px;
	&__head {
		display: flex;
		align-items: center;
	}
	&__title {
		@include medium-weight;
	}
	a {
		font-size: 14px;
		&:hover {
			text-decoration: none;
		}
	}
	.flag-box {
		line-height: 0;
		margin-right: 5px;
	}
	.iti-flag {
		border-radius: 3px;
	}
	.icon-anyfill-ui-chevron-right {
		width: 12px;
		height: 12px;
		fill: $interactive-color;
		margin-left: 3px;
		vertical-align: middle;
	}
}

.covidTable {
	border: 1px solid $gray-border;
	border-top: 1px solid $brand-primary;
	border-radius: 6px;
	overflow: auto;
	max-height: 600px;
	margin-top: 30px;
	margin-bottom: 10px;
	.table {
		overflow-x: auto;
		margin-bottom: 0;
		> thead:first-child > tr:first-child > th {
			background: $brand-primary-light;
			position: sticky;
			top: 0;
			vertical-align: middle;
		}
		> tbody > tr > td {
			background: #FFFFFF;
		}
	}
	&__country {
		max-width: 215px;
		width: 215px;
	}
	&__level {
		max-width: 215px;
		width: 215px;
	}
	&__date {
		width: 100px;
	}
}

.covidLegend {
	background: #FFFFFF;
	border: 1px solid $brand-grey-medium;
	border-top: 0;
	border-radius: 0 0 6px 6px;
	padding: 30px;
	&__title {
		font-size: 16px;
	}
	&__items {
		display: flex;
	}
	&__level {
		width: 120px;
		height: 10px;
		display: block;
		margin-bottom: 5px;
		margin-right: 2px;
		@media (max-width: $grid-float-breakpoint-max) {
			width: 50px;
		}
		@media (min-width: $grid-float-breakpoint) and (max-width: $screen-sm-max) {
			width: 80px;
		}
		&--one {
			background-color: $brand-primary-light;
		}
		&--two {
			background-color: #f9cfad;
		}
		&--three {
			background-color: #f5ad7d;
		}
		&--four {
			background-color: $brand-primary;
		}
		&--five {
			background-color: #bc5715;
		}
	}
}

.covidImg {
	font-size: 22px;
	margin: 60px 0;
	text-align: center;
	&__img {
		background-image: url('');
		background-repeat: no-repeat;
		background-position: 50%;
		height: 200px;
	}
}

/*sistema de banderas con sprite */
@function retina-size($value) {
	@return floor($value / 2);
}

@mixin retina-bg-size($spriteWidth, $spriteHeight) {
	background-size: floor($spriteWidth / 2) floor($spriteHeight / 2);
}

.iti-flag {
	$item-width-maps: (ac: 20px, ad: 20px, ae: 20px, af: 20px, ag: 20px, ai: 20px, al: 20px, am: 20px, an: 20px, ao: 20px, aq: 20px, ar: 20px, as: 20px, at: 20px, au: 20px, aw: 20px, ax: 20px, az: 20px, ba: 20px, bb: 20px, bd: 20px, be: 18px, bf: 20px, bg: 20px, bh: 20px, bi: 20px, bj: 20px, bl: 20px, bm: 20px, bn: 20px, bo: 20px, bq: 20px, br: 20px, bs: 20px, bt: 20px, bv: 20px, bw: 20px, by: 20px, bz: 20px, ca: 20px, cc: 20px, cd: 20px, cf: 20px, cg: 20px, ch: 15px, ci: 20px, ck: 20px, cl: 20px, cm: 20px, cn: 20px, co: 20px, cp: 20px, cr: 20px, cu: 20px, cv: 20px, cw: 20px, cx: 20px, cy: 20px, cz: 20px, de: 20px, dg: 20px, dj: 20px, dk: 20px, dm: 20px, do: 20px, dz: 20px, ea: 20px, ec: 20px, ee: 20px, eg: 20px, eh: 20px, er: 20px, es: 20px, et: 20px, eu: 20px, fi: 20px, fj: 20px, fk: 20px, fm: 20px, fo: 20px, fr: 20px, ga: 20px, gb: 20px, gd: 20px, ge: 20px, gf: 20px, gg: 20px, gh: 20px, gi: 20px, gl: 20px, gm: 20px, gn: 20px, gp: 20px, gq: 20px, gr: 20px, gs: 20px, gt: 20px, gu: 20px, gw: 20px, gy: 20px, hk: 20px, hm: 20px, hn: 20px, hr: 20px, ht: 20px, hu: 20px, ic: 20px, id: 20px, ie: 20px, il: 20px, im: 20px, in: 20px, io: 20px, iq: 20px, ir: 20px, is: 20px, it: 20px, je: 20px, jm: 20px, jo: 20px, jp: 20px, ke: 20px, kg: 20px, kh: 20px, ki: 20px, km: 20px, kn: 20px, kp: 20px, kr: 20px, kw: 20px, ky: 20px, kz: 20px, la: 20px, lb: 20px, lc: 20px, li: 20px, lk: 20px, lr: 20px, ls: 20px, lt: 20px, lu: 20px, lv: 20px, ly: 20px, ma: 20px, mc: 19px, md: 20px, me: 20px, mf: 20px, mg: 20px, mh: 20px, mk: 20px, ml: 20px, mm: 20px, mn: 20px, mo: 20px, mp: 20px, mq: 20px, mr: 20px, ms: 20px, mt: 20px, mu: 20px, mv: 20px, mw: 20px, mx: 20px, my: 20px, mz: 20px, na: 20px, nc: 20px, ne: 18px, nf: 20px, ng: 20px, ni: 20px, nl: 20px, no: 20px, np: 13px, nr: 20px, nu: 20px, nz: 20px, om: 20px, pa: 20px, pe: 20px, pf: 20px, pg: 20px, ph: 20px, pk: 20px, pl: 20px, pm: 20px, pn: 20px, pr: 20px, ps: 20px, pt: 20px, pw: 20px, py: 20px, qa: 20px, re: 20px, ro: 20px, rs: 20px, ru: 20px, rw: 20px, sa: 20px, sb: 20px, sc: 20px, sd: 20px, se: 20px, sg: 20px, sh: 20px, si: 20px, sj: 20px, sk: 20px, sl: 20px, sm: 20px, sn: 20px, so: 20px, sr: 20px, ss: 20px, st: 20px, sv: 20px, sx: 20px, sy: 20px, sz: 20px, ta: 20px, tc: 20px, td: 20px, tf: 20px, tg: 20px, th: 20px, tj: 20px, tk: 20px, tl: 20px, tm: 20px, tn: 20px, to: 20px, tr: 20px, tt: 20px, tv: 20px, tw: 20px, tz: 20px, ua: 20px, ug: 20px, um: 20px, us: 20px, uy: 20px, uz: 20px, va: 15px, vc: 20px, ve: 20px, vg: 20px, vi: 20px, vn: 20px, vu: 20px, wf: 20px, ws: 20px, xk: 20px, ye: 20px, yt: 20px, za: 20px, zm: 20px, zw: 20px, );
	$standard-country: 'es';
	width: map-get($item-width-maps, $standard-country);

	@each $key, $width in $item-width-maps {
		@if $width != map-get($item-width-maps, $standard-country) {
			&.#{$key} {
				width: $width;
			}
		}
	}

	@media
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (   min--moz-device-pixel-ratio: 2),
	only screen and (     -o-min-device-pixel-ratio: 2/1),
	only screen and (        min-device-pixel-ratio: 2),
	only screen and (                min-resolution: 192dpi),
	only screen and (                min-resolution: 2dppx) {
		background-size: 5652px 15px;
	}

	&.ac {
		height: 10px;
		background-position: 0 0;
	}
	&.ad {
		height: 14px;
		background-position: -22px 0;
	}
	&.ae {
		height: 10px;
		background-position: -44px 0;
	}
	&.af {
		height: 14px;
		background-position: -66px 0;
	}
	&.ag {
		height: 14px;
		background-position: -88px 0;
	}
	&.ai {
		height: 10px;
		background-position: -110px 0;
	}
	&.al {
		height: 15px;
		background-position: -132px 0;
	}
	&.am {
		height: 10px;
		background-position: -154px 0;
	}
	&.ao {
		height: 14px;
		background-position: -176px 0;
	}
	&.aq {
		height: 14px;
		background-position: -198px 0;
	}
	&.ar {
		height: 13px;
		background-position: -220px 0;
	}
	&.as {
		height: 10px;
		background-position: -242px 0;
	}
	&.at {
		height: 14px;
		background-position: -264px 0;
	}
	&.au {
		height: 10px;
		background-position: -286px 0;
	}
	&.aw {
		height: 14px;
		background-position: -308px 0;
	}
	&.ax {
		height: 13px;
		background-position: -330px 0;
	}
	&.az {
		height: 10px;
		background-position: -352px 0;
	}
	&.ba {
		height: 10px;
		background-position: -374px 0;
	}
	&.bb {
		height: 14px;
		background-position: -396px 0;
	}
	&.bd {
		height: 12px;
		background-position: -418px 0;
	}
	&.be {
		height: 15px;
		background-position: -440px 0;
	}
	&.bf {
		height: 14px;
		background-position: -460px 0;
	}
	&.bg {
		height: 12px;
		background-position: -482px 0;
	}
	&.bh {
		height: 12px;
		background-position: -504px 0;
	}
	&.bi {
		height: 12px;
		background-position: -526px 0;
	}
	&.bj {
		height: 14px;
		background-position: -548px 0;
	}
	&.bl {
		height: 14px;
		background-position: -570px 0;
	}
	&.bm {
		height: 10px;
		background-position: -592px 0;
	}
	&.bn {
		height: 10px;
		background-position: -614px 0;
	}
	&.bo {
		height: 14px;
		background-position: -636px 0;
	}
	&.bq {
		height: 14px;
		background-position: -658px 0;
	}
	&.br {
		height: 14px;
		background-position: -680px 0;
	}
	&.bs {
		height: 10px;
		background-position: -702px 0;
	}
	&.bt {
		height: 14px;
		background-position: -724px 0;
	}
	&.bv {
		height: 15px;
		background-position: -746px 0;
	}
	&.bw {
		height: 14px;
		background-position: -768px 0;
	}
	&.by {
		height: 10px;
		background-position: -790px 0;
	}
	&.bz {
		height: 14px;
		background-position: -812px 0;
	}
	&.ca {
		height: 10px;
		background-position: -834px 0;
	}
	&.cc {
		height: 10px;
		background-position: -856px 0;
	}
	&.cd {
		height: 15px;
		background-position: -878px 0;
	}
	&.cf {
		height: 14px;
		background-position: -900px 0;
	}
	&.cg {
		height: 14px;
		background-position: -922px 0;
	}
	&.ch {
		height: 15px;
		background-position: -944px 0;
	}
	&.ci {
		height: 14px;
		background-position: -961px 0;
	}
	&.ck {
		height: 10px;
		background-position: -983px 0;
	}
	&.cl {
		height: 14px;
		background-position: -1005px 0;
	}
	&.cm {
		height: 14px;
		background-position: -1027px 0;
	}
	&.cn {
		height: 14px;
		background-position: -1049px 0;
	}
	&.co {
		height: 14px;
		background-position: -1071px 0;
	}
	&.cp {
		height: 14px;
		background-position: -1093px 0;
	}
	&.cr {
		height: 12px;
		background-position: -1115px 0;
	}
	&.cu {
		height: 10px;
		background-position: -1137px 0;
	}
	&.cv {
		height: 12px;
		background-position: -1159px 0;
	}
	&.cw {
		height: 14px;
		background-position: -1181px 0;
	}
	&.cx {
		height: 10px;
		background-position: -1203px 0;
	}
	&.cy {
		height: 13px;
		background-position: -1225px 0;
	}
	&.cz {
		height: 14px;
		background-position: -1247px 0;
	}
	&.de {
		height: 12px;
		background-position: -1269px 0;
	}
	&.dg {
		height: 10px;
		background-position: -1291px 0;
	}
	&.dj {
		height: 14px;
		background-position: -1313px 0;
	}
	&.dk {
		height: 15px;
		background-position: -1335px 0;
	}
	&.dm {
		height: 10px;
		background-position: -1357px 0;
	}
	&.do {
		height: 13px;
		background-position: -1379px 0;
	}
	&.dz {
		height: 14px;
		background-position: -1401px 0;
	}
	&.ea {
		height: 14px;
		background-position: -1423px 0;
	}
	&.ec {
		height: 14px;
		background-position: -1445px 0;
	}
	&.ee {
		height: 13px;
		background-position: -1467px 0;
	}
	&.eg {
		height: 14px;
		background-position: -1489px 0;
	}
	&.eh {
		height: 10px;
		background-position: -1511px 0;
	}
	&.er {
		height: 10px;
		background-position: -1533px 0;
	}
	&.es {
		height: 14px;
		background-position: -1555px 0;
	}
	&.et {
		height: 10px;
		background-position: -1577px 0;
	}
	&.eu {
		height: 14px;
		background-position: -1599px 0;
	}
	&.fi {
		height: 12px;
		background-position: -1621px 0;
	}
	&.fj {
		height: 10px;
		background-position: -1643px 0;
	}
	&.fk {
		height: 10px;
		background-position: -1665px 0;
	}
	&.fm {
		height: 11px;
		background-position: -1687px 0;
	}
	&.fo {
		height: 15px;
		background-position: -1709px 0;
	}
	&.fr {
		height: 14px;
		background-position: -1731px 0;
	}
	&.ga {
		height: 15px;
		background-position: -1753px 0;
	}
	&.gb {
		height: 10px;
		background-position: -1775px 0;
	}
	&.gd {
		height: 12px;
		background-position: -1797px 0;
	}
	&.ge {
		height: 14px;
		background-position: -1819px 0;
	}
	&.gf {
		height: 14px;
		background-position: -1841px 0;
	}
	&.gg {
		height: 14px;
		background-position: -1863px 0;
	}
	&.gh {
		height: 14px;
		background-position: -1885px 0;
	}
	&.gi {
		height: 10px;
		background-position: -1907px 0;
	}
	&.gl {
		height: 14px;
		background-position: -1929px 0;
	}
	&.gm {
		height: 14px;
		background-position: -1951px 0;
	}
	&.gn {
		height: 14px;
		background-position: -1973px 0;
	}
	&.gp {
		height: 14px;
		background-position: -1995px 0;
	}
	&.gq {
		height: 14px;
		background-position: -2017px 0;
	}
	&.gr {
		height: 14px;
		background-position: -2039px 0;
	}
	&.gs {
		height: 10px;
		background-position: -2061px 0;
	}
	&.gt {
		height: 13px;
		background-position: -2083px 0;
	}
	&.gu {
		height: 11px;
		background-position: -2105px 0;
	}
	&.gw {
		height: 10px;
		background-position: -2127px 0;
	}
	&.gy {
		height: 12px;
		background-position: -2149px 0;
	}
	&.hk {
		height: 14px;
		background-position: -2171px 0;
	}
	&.hm {
		height: 10px;
		background-position: -2193px 0;
	}
	&.hn {
		height: 10px;
		background-position: -2215px 0;
	}
	&.hr {
		height: 10px;
		background-position: -2237px 0;
	}
	&.ht {
		height: 12px;
		background-position: -2259px 0;
	}
	&.hu {
		height: 10px;
		background-position: -2281px 0;
	}
	&.ic {
		height: 14px;
		background-position: -2303px 0;
	}
	&.id {
		height: 14px;
		background-position: -2325px 0;
	}
	&.ie {
		height: 10px;
		background-position: -2347px 0;
	}
	&.il {
		height: 15px;
		background-position: -2369px 0;
	}
	&.im {
		height: 10px;
		background-position: -2391px 0;
	}
	&.in {
		height: 14px;
		background-position: -2413px 0;
	}
	&.io {
		height: 10px;
		background-position: -2435px 0;
	}
	&.iq {
		height: 14px;
		background-position: -2457px 0;
	}
	&.ir {
		height: 12px;
		background-position: -2479px 0;
	}
	&.is {
		height: 15px;
		background-position: -2501px 0;
	}
	&.it {
		height: 14px;
		background-position: -2523px 0;
	}
	&.je {
		height: 12px;
		background-position: -2545px 0;
	}
	&.jm {
		height: 10px;
		background-position: -2567px 0;
	}
	&.jo {
		height: 10px;
		background-position: -2589px 0;
	}
	&.jp {
		height: 14px;
		background-position: -2611px 0;
	}
	&.ke {
		height: 14px;
		background-position: -2633px 0;
	}
	&.kg {
		height: 12px;
		background-position: -2655px 0;
	}
	&.kh {
		height: 13px;
		background-position: -2677px 0;
	}
	&.ki {
		height: 10px;
		background-position: -2699px 0;
	}
	&.km {
		height: 12px;
		background-position: -2721px 0;
	}
	&.kn {
		height: 14px;
		background-position: -2743px 0;
	}
	&.kp {
		height: 10px;
		background-position: -2765px 0;
	}
	&.kr {
		height: 14px;
		background-position: -2787px 0;
	}
	&.kw {
		height: 10px;
		background-position: -2809px 0;
	}
	&.ky {
		height: 10px;
		background-position: -2831px 0;
	}
	&.kz {
		height: 10px;
		background-position: -2853px 0;
	}
	&.la {
		height: 14px;
		background-position: -2875px 0;
	}
	&.lb {
		height: 14px;
		background-position: -2897px 0;
	}
	&.lc {
		height: 10px;
		background-position: -2919px 0;
	}
	&.li {
		height: 12px;
		background-position: -2941px 0;
	}
	&.lk {
		height: 10px;
		background-position: -2963px 0;
	}
	&.lr {
		height: 11px;
		background-position: -2985px 0;
	}
	&.ls {
		height: 14px;
		background-position: -3007px 0;
	}
	&.lt {
		height: 12px;
		background-position: -3029px 0;
	}
	&.lu {
		height: 12px;
		background-position: -3051px 0;
	}
	&.lv {
		height: 10px;
		background-position: -3073px 0;
	}
	&.ly {
		height: 10px;
		background-position: -3095px 0;
	}
	&.ma {
		height: 14px;
		background-position: -3117px 0;
	}
	&.mc {
		height: 15px;
		background-position: -3139px 0;
	}
	&.md {
		height: 10px;
		background-position: -3160px 0;
	}
	&.me {
		height: 10px;
		background-position: -3182px 0;
	}
	&.mf {
		height: 14px;
		background-position: -3204px 0;
	}
	&.mg {
		height: 14px;
		background-position: -3226px 0;
	}
	&.mh {
		height: 11px;
		background-position: -3248px 0;
	}
	&.mk {
		height: 10px;
		background-position: -3270px 0;
	}
	&.ml {
		height: 14px;
		background-position: -3292px 0;
	}
	&.mm {
		height: 14px;
		background-position: -3314px 0;
	}
	&.mn {
		height: 10px;
		background-position: -3336px 0;
	}
	&.mo {
		height: 14px;
		background-position: -3358px 0;
	}
	&.mp {
		height: 10px;
		background-position: -3380px 0;
	}
	&.mq {
		height: 14px;
		background-position: -3402px 0;
	}
	&.mr {
		height: 14px;
		background-position: -3424px 0;
	}
	&.ms {
		height: 10px;
		background-position: -3446px 0;
	}
	&.mt {
		height: 14px;
		background-position: -3468px 0;
	}
	&.mu {
		height: 14px;
		background-position: -3490px 0;
	}
	&.mv {
		height: 14px;
		background-position: -3512px 0;
	}
	&.mw {
		height: 14px;
		background-position: -3534px 0;
	}
	&.mx {
		height: 12px;
		background-position: -3556px 0;
	}
	&.my {
		height: 10px;
		background-position: -3578px 0;
	}
	&.mz {
		height: 14px;
		background-position: -3600px 0;
	}
	&.na {
		height: 14px;
		background-position: -3622px 0;
	}
	&.nc {
		height: 10px;
		background-position: -3644px 0;
	}
	&.ne {
		height: 15px;
		background-position: -3666px 0;
	}
	&.nf {
		height: 10px;
		background-position: -3686px 0;
	}
	&.ng {
		height: 10px;
		background-position: -3708px 0;
	}
	&.ni {
		height: 12px;
		background-position: -3730px 0;
	}
	&.nl {
		height: 14px;
		background-position: -3752px 0;
	}
	&.no {
		height: 15px;
		background-position: -3774px 0;
	}
	&.np {
		height: 15px;
		background-position: -3796px 0;
	}
	&.nr {
		height: 10px;
		background-position: -3811px 0;
	}
	&.nu {
		height: 10px;
		background-position: -3833px 0;
	}
	&.nz {
		height: 10px;
		background-position: -3855px 0;
	}
	&.om {
		height: 10px;
		background-position: -3877px 0;
	}
	&.pa {
		height: 14px;
		background-position: -3899px 0;
	}
	&.pe {
		height: 14px;
		background-position: -3921px 0;
	}
	&.pf {
		height: 14px;
		background-position: -3943px 0;
	}
	&.pg {
		height: 15px;
		background-position: -3965px 0;
	}
	&.ph {
		height: 10px;
		background-position: -3987px 0;
	}
	&.pk {
		height: 14px;
		background-position: -4009px 0;
	}
	&.pl {
		height: 13px;
		background-position: -4031px 0;
	}
	&.pm {
		height: 14px;
		background-position: -4053px 0;
	}
	&.pn {
		height: 10px;
		background-position: -4075px 0;
	}
	&.pr {
		height: 14px;
		background-position: -4097px 0;
	}
	&.ps {
		height: 10px;
		background-position: -4119px 0;
	}
	&.pt {
		height: 14px;
		background-position: -4141px 0;
	}
	&.pw {
		height: 13px;
		background-position: -4163px 0;
	}
	&.py {
		height: 11px;
		background-position: -4185px 0;
	}
	&.qa {
		height: 8px;
		background-position: -4207px 0;
	}
	&.re {
		height: 14px;
		background-position: -4229px 0;
	}
	&.ro {
		height: 14px;
		background-position: -4251px 0;
	}
	&.rs {
		height: 14px;
		background-position: -4273px 0;
	}
	&.ru {
		height: 14px;
		background-position: -4295px 0;
	}
	&.rw {
		height: 14px;
		background-position: -4317px 0;
	}
	&.sa {
		height: 14px;
		background-position: -4339px 0;
	}
	&.sb {
		height: 10px;
		background-position: -4361px 0;
	}
	&.sc {
		height: 10px;
		background-position: -4383px 0;
	}
	&.sd {
		height: 10px;
		background-position: -4405px 0;
	}
	&.se {
		height: 13px;
		background-position: -4427px 0;
	}
	&.sg {
		height: 14px;
		background-position: -4449px 0;
	}
	&.sh {
		height: 10px;
		background-position: -4471px 0;
	}
	&.si {
		height: 10px;
		background-position: -4493px 0;
	}
	&.sj {
		height: 15px;
		background-position: -4515px 0;
	}
	&.sk {
		height: 14px;
		background-position: -4537px 0;
	}
	&.sl {
		height: 14px;
		background-position: -4559px 0;
	}
	&.sm {
		height: 15px;
		background-position: -4581px 0;
	}
	&.sn {
		height: 14px;
		background-position: -4603px 0;
	}
	&.so {
		height: 14px;
		background-position: -4625px 0;
	}
	&.sr {
		height: 14px;
		background-position: -4647px 0;
	}
	&.ss {
		height: 10px;
		background-position: -4669px 0;
	}
	&.st {
		height: 10px;
		background-position: -4691px 0;
	}
	&.sv {
		height: 12px;
		background-position: -4713px 0;
	}
	&.sx {
		height: 14px;
		background-position: -4735px 0;
	}
	&.sy {
		height: 14px;
		background-position: -4757px 0;
	}
	&.sz {
		height: 14px;
		background-position: -4779px 0;
	}
	&.ta {
		height: 10px;
		background-position: -4801px 0;
	}
	&.tc {
		height: 10px;
		background-position: -4823px 0;
	}
	&.td {
		height: 14px;
		background-position: -4845px 0;
	}
	&.tf {
		height: 14px;
		background-position: -4867px 0;
	}
	&.tg {
		height: 13px;
		background-position: -4889px 0;
	}
	&.th {
		height: 14px;
		background-position: -4911px 0;
	}
	&.tj {
		height: 10px;
		background-position: -4933px 0;
	}
	&.tk {
		height: 10px;
		background-position: -4955px 0;
	}
	&.tl {
		height: 10px;
		background-position: -4977px 0;
	}
	&.tm {
		height: 14px;
		background-position: -4999px 0;
	}
	&.tn {
		height: 14px;
		background-position: -5021px 0;
	}
	&.to {
		height: 10px;
		background-position: -5043px 0;
	}
	&.tr {
		height: 14px;
		background-position: -5065px 0;
	}
	&.tt {
		height: 12px;
		background-position: -5087px 0;
	}
	&.tv {
		height: 10px;
		background-position: -5109px 0;
	}
	&.tw {
		height: 14px;
		background-position: -5131px 0;
	}
	&.tz {
		height: 14px;
		background-position: -5153px 0;
	}
	&.ua {
		height: 14px;
		background-position: -5175px 0;
	}
	&.ug {
		height: 14px;
		background-position: -5197px 0;
	}
	&.um {
		height: 11px;
		background-position: -5219px 0;
	}
	&.us {
		height: 11px;
		background-position: -5241px 0;
	}
	&.uy {
		height: 14px;
		background-position: -5263px 0;
	}
	&.uz {
		height: 10px;
		background-position: -5285px 0;
	}
	&.va {
		height: 15px;
		background-position: -5307px 0;
	}
	&.vc {
		height: 14px;
		background-position: -5324px 0;
	}
	&.ve {
		height: 14px;
		background-position: -5346px 0;
	}
	&.vg {
		height: 10px;
		background-position: -5368px 0;
	}
	&.vi {
		height: 14px;
		background-position: -5390px 0;
	}
	&.vn {
		height: 14px;
		background-position: -5412px 0;
	}
	&.vu {
		height: 12px;
		background-position: -5434px 0;
	}
	&.wf {
		height: 14px;
		background-position: -5456px 0;
	}
	&.ws {
		height: 10px;
		background-position: -5478px 0;
	}
	&.xk {
		height: 15px;
		background-position: -5500px 0;
	}
	&.ye {
		height: 14px;
		background-position: -5522px 0;
	}
	&.yt {
		height: 14px;
		background-position: -5544px 0;
	}
	&.za {
		height: 14px;
		background-position: -5566px 0;
	}
	&.zm {
		height: 14px;
		background-position: -5588px 0;
	}
	&.zw {
		height: 10px;
		background-position: -5610px 0;
	}
	&.an {
		height: 13px;
		background-position: -5632px 0;
	}
}
.iti-flag {
	display: inline-block;
	width: $flagWidth;
	height: $flagHeight;
	vertical-align: top;
	box-shadow: 0 0 1px 0 #888;
	background-image: url("#{$flagsImagePath}#{$flagsImageName}.#{$flagsImageExtension}#{$flagsImageTimeStamp}");
	background-repeat: no-repeat;
	// empty state
	background-color: #DBDBDB;
	background-position: $flagWidth 0;

	@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
		background-image: url("#{$flagsImagePath}#{$flagsImageName}@2x.#{$flagsImageExtension}#{$flagsImageTimeStamp}");
	}
}
// hack for Nepal which is the only flag that is not square/rectangle, so it has transparency, so you can see the default grey behind it
.iti-flag.np {
	background-color: transparent;
}