@font-face {
  font-family: Raleway;
  src: url(Raleway-Regular.ttf);
}

@font-face {
  font-family: Raleway;
  src: url(Raleway-Bold.ttf);
   font-weight: bold;
}

body{
	color: rgb(99, 107, 111);
	 background-color: #f5f8fa;
	 font-family: Raleway, Arial ;
	 
}
body:lang(mk) {
  font-family: Arial;
}
p{
	line-height: 160%;
}
dt{
	font-weight: bold;
}
.bottom-footer, .main-top
{
	
	display: flex;
	flex-flow: row wrap; 
	align-items: center;
}
.main-top div{
	min-width: 33%;
	text-align: center;
}
.first img{
	margin-left: -4em; 
}
.last img{
	margin-right: 5em;
	float: right;
}
.main-top div.last{
	text-align: left;
}
.logo-img
{
	flex:1 1 ;
	
}
.logo-img img
{
	width: 90%;
 height: auto;
	padding: 2em;

}
.lang {
    margin-left: 2%;
    margin-right: 2%;
    min-width: 80vw;
    padding: 1em;
}
.lang a {
    float: right;
}
.lang img {
    margin-left: 1em;
}

section.main {
    margin-left: 4%;
    margin-right: 4%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
nav{
 margin-bottom: 1em;
}
.first-left {
    float: left;
}
dt {
    font-weight: bold;
}
input[type="text"], input[type="password"], select {
    height: 1.5em;
    font-size: large;
    width: 20em;
}
select{

}

dt{
  margin-top: 1em;
}

.main-internal {
    margin-left: 2%;
    margin-right: 2%;
    min-height: 60vh;
    width: 80vw;
    border-right: 1px solid rgb(211, 224, 233);
    border-left: 1px solid rgb(211, 224, 233);
  /*  border-bottom: 1px solid rgb(211, 224, 233); */
    background-color: white;
    padding: 1em;
}

input[type=submit], button {
    background-color: #66065c;
    border-radius: 0.5em;
    color: white;
    padding: 0.5em;
    font-size: large;
}

.logging input[type=text], .logging input[type=password]{
  margin-left: 0.5em;
  margin-right: 0.5em;
  
}
.clear{
  clear: both;
}

.alert {
    padding: 15px;
    margin-bottom: 1em;
    margin-top: 1em;
    border: 1px solid transparent;
    border-radius: 4px;
    clear: both;
    
}

.alert-warning {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}

.alert-success{
    background-color: #dff0d8;
    border-color: #5bbb3a;
    color: #3c763d;
}
.fcontainer{
  display: flex;
  width: 100%;
}
.fitem{
  flex-grow: 1;
  padding: 1em;
  margin: 0.5em;
  width: 33%;
  vertical-align: bottom;
  height: 18em;
}
.fitem a{
 text-decoration: none;
 
}
.color1{
  background-color: #1e3847;
}
.color2{
  background-color: #5bbb3a;
}
.color3{
  background-color: #f7485b;
}
.color4{
  background-color: #fa733f;
}
.color5{
  background-color: #ffc13d;
}
.color6{
  background-color: #1e3648;
}
.ititle{
  width: 100%;
  font-weight: bold;
  font-size: 150%;
  text-transform: uppercase;
  color: white;
  text-align: center;
/*  margin-bottom: 0.75em; */
  
}
.ititle_sub{
    width: 100%;
  font-size: 90%;
  text-transform: uppercase;
  color: white;
  text-align: center;
  padding: 0.5em;
  font-weight: bold;
}
.speech-bubble {
	position: relative;
	background: #f5f8fa;
	border-radius: .4em;
  display: none;
  padding: 0.5em;
  max-width: 25em;
  color: #777;
  z-index: 3;

}

.speech-bubble:after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 2em solid transparent;
	border-bottom-color: #f5f8fa;
	border-top: 0;
	border-left: 0;
	margin-left: -1em;
	margin-top: -2em;
}
.fitem:hover   .speech-bubble
{
 display: block;
}
.fitem_text{
 opacity: 0.9;
}
.fitem_text:hover, .ititle_sub:hover  , .ititle:hover{
 opacity: 1;
}

.token{
	font-weight: bold;
	padding-left: 1em;
	padding-right: 1em;
}
.logout{
	float: right;
	display: inline-block;
}

.nav_left{
 float: left;
}

.required{
	font-weight: bolder;
	font-size: 1.8em;
	color: red;
}

.radios input[type="radio"], .checks input[type="checkbox"]{
	display: none;
}
.radios .radio, .checks .radio{
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	border-radius: 0.75em;
	border: 1px solid grey;
}

.checks .radio{
	border-radius: 0.5em;
	padding: 0.25em;
	height: 1.5em;
	width: 1em;
}

.radios input[type="radio"]:checked + .radio, .checks input[type="checkbox"]:checked + .radio{
	background: #dff0d8;
}

.radios input[type="radio"]:checked + .radio::after, .checks input[type="checkbox"]:checked + .radio::after{
	content: "✔" ;
	font-size: larger;
}
.answer-line:hover, .checks:hover, li.radios:hover{
	background: #eff0e8;
}


li.checks input[type="checkbox"] + .radio::after{
	content: "." ;
	color: white;
}
li.checks input[type="checkbox"]:checked + .radio::after{
	color: rgb(99, 107, 111);
	content: "✔" ;
	
}
li.radios, li.checks{
	line-height: 2em;
	vertical-align:  bottom;
	
}
li.radios label, li.checks label{
	text-align: center;
}
input[type="text"]{
		height: 1.5em;
	font-size: large;
	
}
.logout{
	float: right;
	display: inline-block;
}
.back_forward{
	float: left;
}
.clear{
	clear: both;
}
.token{
	font-weight: bold;
	padding-left: 1em;
	padding-right: 1em;
}
.required{
	font-weight: bolder;
	font-size: 1.8em;
	color: red;
}
.cond{
	color: blue;
}
.answers_line{
	background: #f5f8fa;
}

.answered_line{
	background: #e0ede8;
}
.questions .answer{
  display: block;
  
}

 

.questions dt{
  margin-top: 1em;
  margin-bottom: 0.5em;
}
.questions input[type="text"]{
  width: 10em;
}

.first-left{
  float: left;
}

td.radios{
  width: 6em;
}

.list_table input[type=submit] {
    font-size: small;
    width: 12em;
}

.quest .content {
    text-align: left;
    width: 40%;
}

td.radios {
    width: 6em;
}
.quest td {
    text-align: center;
}

.child_with{
 font-weight: bold;
}
.sphere_desc{
 margin-top: 0.25em;
 margin-bottom: 0.25em;
}
.extra_info{
 margin-top: 1em;
 font-style: italic;
 font-size: 80%;
}

.quest_type{
 width: 55em;
 font-size: 90%;
 font-weight: bold;
 margin-right: 2em;
}
.logo-img1{
 margin-left: 1.5em;
}

.logging_container{
  display: flex;
  justify-content: center;
}
.logging{
 
 text-align: center;
 padding: 2em;
}
.lgging{
 text-align: center;
}
.login_line{
 margin-bottom: 1em;
}
.login_line input[type=password] , .login_line input[type=text]{
  margin-left: 1em;
  margin-right: 1em;
  width: 15em;
}


.check_text {
    margin-left: 2em;
    margin-top: -1em;
}

.mandatory::after{
 content: "  ✱";
 color: red;
}

dd.any_problems {
    margin-top: 3em;
    color: #ff5757;
    font-style: italic;
    font-size: 80%;
    font-weight: bold;
}
.report_authors{
 border: 2px solid;
 padding: 1em;
 margin-bottom: 2em;
}
span.emp{
 font-weight: bold;
}
.result_graph{
 width: 10em;
}
.result_graph0{
 width: 5em;
}
.main-footer {
    margin-left: 2%;
    margin-right: 2%;
    width: 80vw;
 background: white;
    padding: 1em;
    border-right: 1px solid rgb(211, 224, 233);
    border-left: 1px solid rgb(211, 224, 233);
    border-bottom: 1px solid rgb(211, 224, 233);     
}

.bottom-footer dl{
 padding-right: 3em;
}

.main-header {
 display: flex;
 flex-flow: row wrap;
 justify-content: space-between;
 align-items: flex-end;
    margin-left: 2%;
    margin-right: 2%;
    width: 80vw;
 background: white;
    padding: 1em;
    border-right: 1px solid rgb(211, 224, 233);
    border-left: 1px solid rgb(211, 224, 233);
    border-top: 1px solid rgb(211, 224, 233);

}

#project-logo{
 margin-left: 2em;
}
#lang{
 margin-right: 2em;
}
#lang img{
 padding-left: 0.25em;
}
#lang a{
 text-decoration: none;
}

#common img{
 height: 25px;
}

.fitem {
 
 display: flex;
 align-items: center;
 justify-content: center;
 
}

.lang_center{
 text-align: center;
 padding-left: 0.35em;
}

.lang_center a {
 text-decoration: none;
}

img.tiles6{
 width: 90%;
}

.logging input[type=submit]{
 width: 15em;
 height: 3em;
 font-size: 140%;
}

.feedback-footer{
 border: solid #5bbb3a 3px;
 padding-left: 1em;
 padding-right: 1em;
 margin-left: 0.5em;
margin-right: 0.5em;
margin-top: 1em;
color: #f7485b ;
font-weight: bold;

}
.feedback-footer a{
 color: #5bbb3a ;
}

.result_table td, .result_table th
{
 padding: 0;
 margin: 0;
 border-width: 0;
}
.admin_buttons input[type="submit"]{
 width: 6em;
}
.result_table th{
 vertical-align: top;
}

.nav_left {
 margin-left: 0.5em;
}
.answer_text{
 display: inline-block;
}
.answer_text::first-letter{
   text-transform: capitalize;
   
 }