* {margin:0;padding:0;} 
html {height: 100%;}


body
{
    background-color: #c1dfdd !important;
}

.noaccess{
            
            background-image: url('../images/no_access.png');
            background-position: center center;
			background-repeat: no-repeat;
			background-attachment: fixed;
            
            
        }

#wrapper{
	max-width:1024px;
	margin:0px auto;
    min-height:100%;
	position:relative;
    
}


.school{
    margin: 5px auto;
    width: 100%;
    text-align: center;
}

.active{
    display:block !important;
    cursor: pointer;
}

#container{
	height:100%;
}


#container ul{
	list-style-type: none;
	padding-left:0;
    margin-top:35px;
}

#left li:not(:last-child){
	height:240px;
}

#right li:not(:last-child){
	height:160px;
}


#controls {
    min-width:325px;
    text-align:center;
    float: right;
    margin-top: 5px;
}

#controls .next{
    margin-top:15px!important;
    border:1px solid #ddd;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
}

#confirmation{
    margin-top:15px!important;
    border:1px solid #c1dfdd;
    border-radius: 5px;
}

.not-active{
   pointer-events: none;
   cursor: default;
}

button{
    padding:0px !important;
    border:1px solid #c1dfdd !important;
    border-radius: 5px !important;
    background-color: #c1dfdd !important;
}


.confirmed, .hidden_lang{
    display:none;
}

 
#progressBar {
  width: 70%;
  margin: 10px auto;
  height: 30px;
  background-color: #E50000;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 30px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #CBEA00;
  box-sizing: border-box;
}


.test_image{
    min-height:235px;
    text-align:center;
    
}

.test_image img{
    
    max-height:235px;
}

div.question{
    min-height:120px;
}


div.answer{
    font-size: 20px;
    min-height: 112px;
    background: #fff;
    border: 1px solid gray;
    margin-top:15px;
    padding: 10px;
    cursor: pointer;
}


.unAnswered, .language{
    display:none;
}

.answered{
    display:none !important;   
}



.current, .active {
    display:block;    
}


.row::after {
    clear: none !important;
}



#results div.selected_answer{
    background-color: red;
}


#results div.question {
    margin-block: 50px;
    border-top: 1px solid;
}

#results .test_image{
    display:block !important;
    min-height:initial;
    margin-block: 55px;
}

#results, #pass, #help_data{ 
   display:none;
}




.apotelesmata{
    font-size:18px;
}


.apotelesmata span{
    padding:5px;
}



#footer{
    position: static;
    bottom:0px;
    clear: both;
    margin: 0px auto;
    text-align: center;
    padding: 30px;
}


@media only screen and (max-width: 1024px) {
    
        #controls {
            float:none;
            min-width:auto;
        }

        body
        {
            background-image:none !important;
        }

        .row{
            margin: 0px !important;
        }
        #right li:not(:last-child), #left li:not(:last-child){
            height:auto;
        }


        #left{
            float:left;
        }

        #right{
            float:right;
        }

}