/*--Style: normal, Weight: Light---*/
@font-face {
  font-family: 'Averta';
  font-style: normal;
  font-weight: lighter;
  src: url('../fonts/Averta-Light.otf');
  }
/*--Style: normal, Weight: normal---*/
@font-face {
  font-family: 'Averta';
  font-style:  normal;
  font-weight: normal;
  src: url('../fonts/Averta-Regular.otf');
  }
/*--Style: normal, Weight: semibold---*/
@font-face {
  font-family: 'Averta';
  font-style:  normal;
  font-weight: 600;
  src: url('../fonts/Averta-Semibold.otf');
  }
  
/*--Style: normal, Weight: bold---*/
@font-face {
  font-family: 'Averta';
  font-style:  normal;
  font-weight: bold;
  src: url('../fonts/Averta-Bold.otf');
  }
/*--Style: italic, Weight: Light---*/
@font-face {
  font-family: 'Averta';
  font-style: italic;
  font-weight: lighter;
  src: url('../fonts/Averta-LightItalic.otf');
  }
/*--Style: italic, Weight: normal---*/
@font-face {
  font-family: 'Averta';
  font-style:  italic;
  font-weight: normal;
  src: url('../fonts/Averta-RegularItalic.otf');
  }
/*--Style: italic, Weight: Semibold---*/
@font-face {
  font-family: 'Averta';
  font-style:  italic;
  font-weight: 600;
  src: url('../fonts/Averta-SemiboldItalic.otf');
  }
/*--Style: italic, Weight: bold---*/
@font-face {
  font-family: 'Averta';
  font-style:  italic;
  font-weight: bold;
  src: url('../fonts/Averta-BoldItalic.otf');
  } 
  
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, FtR, HDr, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, textarea, input, a.btn, select, datalist, list, button, span {
	margin: 0;
	padding: 0;
	border: 0;
	font-family:   averta, 'segoe ui',sans-serif;
	font-weight: normal;
	box-sizing: border-box;
	line-height: 1.5;
	box-sizing: border-box;
	-moz-osx-font-smoothing: greyscale;
	-webkit-font-smoothing: antialiased;
	font-smooth: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	color:#333333;
 
	 

}
.btn.primary{
	background:primary;
	
}
body{
 
}
:root{
	--top-bar-height:72px;
	--footer-height:20px;
}
.top-bar{
	display:flex;
	justify-content:space-between;
	align-items:center;
	background:white;
	padding:12px;
	position: relative;;
	margin: auto;
	top:0;
	left:0;
	right:0;
	height:var(--top-bar-height);
	width:100%;
	z-index:3;
}
.inputs{
	padding:2px  12px;
}
.config{
	display:flex;
	display:none;
	flex-wrap:nowrap;
}
		#table{
			display:flex;
			flex-wrap:wrap;
			width:fit-content;
			margin: auto;
			padding-bottom: 24px;
			padding-left:.5%;
			max-height:calc(100% - var(--top-bar-height) + var(--footer-height));
			margin-top:calc(var(--top-bar-height) + 12px)
		}
		#table span{
			font-size: 18px;
		}
	 
		#table .block{
			display:flex;
			flex-wrap:wrap;
			position: relative;
			width: 19.4%;
			min-width: 190px; 
			border:1px solid cornflowerblue;
			border-radius:12px;
			margin:0;
			page-break-inside:avoid;
			margin-right:0.5%;
			margin-top:0.5%;
			
		}
		 
		#table .block .list{
			display:flex;
			flex-direction:column; 
			border-radius: 12px;
			padding:6px; 
		}
		#table .block .no{
			font-weight:bold;
			text-align:left;
			padding:1px 3px;  
			top:0;
			right:0;
			font-size: 34px;
			color: white;
			width: 34px;
			color: lightblue;
			text-align:center;
			
		}
		.ujuzi-logo{
			height: 36px;
			width: auto;
		}
		.app-info{
			display:flex;
			justify-content:space-between;
			align-items:center;
		}
		#table .col1{
			color: cornflowerblue;
			text-align:right;
		}	
		#table .col2{
			text-align:center;
		}
		#table .col{
			width: 24px;
			display:inline-block;
			
		}
		#table .ans{
			font-weight: bold;
			text-decoration:underline;
		}
		.top-bar .title{
			font-weight: bold;
		}
		b{
			font-weight: bold;
		}
		#rowCount{
			width: 200px;
			display:inline-block;
			padding:3px;
		}
		#blocks{
			padding:3px;
		
		}
		
		.btn {
    display: flex;
    padding: 6px;
    border-radius: 5px;
    background: transparent;
    /* border: 1px solid var(--primary-color); */
    color: var(--dark-shade-color);
    fill: var(--dark-shade-color);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 32px;
    min-width: 32px;
    height: 32px;
    flex-wrap: nowrap;
    transition: all .1s ease-out;
    white-space: nowrap;
}
.btn:hover {
    background: white;
}
.inputs,.drop-down{
  outline: none;
  border: none;
  border: 1px solid hsl(204deg 26% 79%);
  background-color: #fffffff2;
 
  padding: 0 12px;
  transition: all .2s;
  height: 36px;
  padding: 6px 12px;
  border-radius:var(--bod-radius);
}
  .drop-down{
	color: var(--font-color);
    background: var(--background-color); 

 }
.footer{
	text-align:center;
	font-size:.8em;
	padding:6px;
	position: fixed;
	bottom:5px;
	margin: auto;
	left:0;
	right:0;
	height:var(--footer-height);
	display:none;
}

 @media print{
	#config{
		display:none;
	}
	.footer{
		display:block;
	}
 }