html { height: 100%; width:100%; }


body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: black;
}


div.navbar {
    padding: 0em;
    margin: 0em;
    font-weight: normal;
    color: white;
    background-color: #515151;
    opacity: 0.8;
}

div.scoreDiv {
    position: relative;
    background-color: #EAEAEF;
    width: 100%;
    overflow: auto;
    padding: 1em 9em 1em 1em;
    color: darkgreen;
    text-align: center;
}

div.page {
    position: relative;
    background-color: transparent;
    float: center;
    text-align: center;
    width: 100%;
    overflow: auto;
    padding: 0em 1em 1em 1em;
    margin: 2em 0em 0em 0em;
}

.jumbotron {
    background-color: transparent;
    width: 98%;
    max-width: 1280px;
    float: center;
    text-align: left;
}

.image {
    float: right;
    border: 0;
    padding: 0em 0.0em 0.5em 0em;
    margin:  0em 0.0em 0.5em 2em;
    max-width: 40%;
}

.image1 {
    border: 0;
    padding: 0.2em;
    margin:  0.2em;
    max-width: 80%;
}

.opt{
  text-align: center;
  width: 94%;
  margin: 0.4em;
  }
.opt1{
  text-align: center;
  width: auto;
  margin: 0.4em;
  }

.options{
  width : 96%;    
  text-align: center;
  float: center;    
  background-color: transparent;
}

#question{
  width: 96%;
  margin: 0.4em;
  color: black;
  font-size: 1em;
  font-weight: 400;
  }

/*________________ NEW ___________________*/


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li.n1 {
    font-size: 2em;
    cursor: default;
    font-style: italic;
    color: white;
    margin: 0;
    padding: 0;
    padding-left: 1em;
    margin-top: -0.8em;
    margin-bottom: -2em;
}

li.n2 {
    min-width: 20%;
    cursor: default;
    vertical-align: bottom;
    margin-bottom: -1em;
    float: center;
    margin-top: 0.8em;
}
li.n3 {
    float: right;
    cursor: pointer;
    min-width: 4em;
}

li {
  float: left;
  font-size: 1em;  
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 1em 1em;
  text-decoration: none;
}

li p {
  display: block;
  color: white;
  text-align: center;
  padding: 1em 1em;
  text-decoration: none;
}

li.n3 a:hover {
  background-color: #111;
  text-decoration: none;
  color: orangered;    
}
li.n1 a:hover, li.n2 a:hover {
  cursor: default;    
  text-decoration: none;
 color: white;
}

/*____________________*/

.s-noanswer, .s-actual, .s-answered, .s-bad, .s-notbad, .s-good {
  color: lightgray;
  background-color: white;
  padding: 0.1em;
  margin: 0.1em;
  width: 2em;
  height: 2em;    
  display: inline-block;
  border: 1px solid lightgray; 
  text-align: center;
  cursor: pointer;
}

.s-answered{ 
  background-color: lightgrey;
  color: #888;   
  border: 1px solid darkslategrey;    
}
.s-good    { 
  background-color: lightgreen;
  color: #888;   
  border: 1px solid darkslategrey;    
  }
.s-notbad  { 
  background-color: lightyellow;
  color: #888;     
  border: 1px solid darkslategrey;  
  }
.s-bad     { 
  background-color: lightcoral; 
  border: 1px solid darkslategrey;  
  color: #888;    
  }
.s-actual  { font-weight: bolder; border: 1px solid black; color: black;}
.s-noanswer:hover , .s-actual:hover, .s-answered:hover, .s-bad:hover, s-notbad:hover, s-good:hover {
  text-decoration: none; 
  color : steelblue; 
  border: 1px solid steelblue;
}

.o-noanswer {
}

.o-answered {
    background-color: lightgrey;
    color: #111;
    border: 1px solid #444;
    pointer-events: none;
}

.o-good {
    background-color: lightgreen;
    color: #111;
    border: 1px solid #444;
}

.o-notbad {
    background-color: lightyellow;
    color: #111;
    border: 1px solid #444;
}

.o-bad {
    background-color: lightcoral;
    border: 1px solid #444;
    color: #111;
}

.o-answered:hover, .o-good:hover, .o-bad:hover, .o-notbad:hover   {
    pointer-events: none;
}

#feedback {
    margin: 0.4em;
    text-align: center;
    font-size: 100%;
    color: black;
    font-size: 16px;
    font-weight: 400;
}

div.footer {
    float: center;
    text-align: center;
    width: 96%;
    margin: 0.4em 0.4em 4em 0.4em;
    padding: 0.4em 0.4em 4em 0.4em;
    font-size: small;
    color: black;
}

#qID {
    background-color: #FFF;
    font-size: smaller;
    color: black;
    text-align: right;
    width: 96%;
    margin: 0.4em;
}

.comments {
    width: 80%;
    max-width: 56em;
    text-align: justify;
}

.langDiv {
    width: 99%;
    text-align: right;
    color: #666;
}


.lang {
    color: #666;
    background-color: transparent;
    border-radius: 0.0em;
    border: 1px solid lightgray;
    width: 3em;
    text-align:center;
}

.langNow {
    color: white;
    background-color: mediumseagreen;
    border-radius: 0.0em;
    border: 1px gray;
    border: 1px solid green;
    width: 3em;
    text-align: center;
    cursor: default;
}

.errors {
    width: 80%;
    max-width: 56em;
    color:red;
}
/*
#name {
    height: 2.8em;
    padding: 0.2em;
    margin: 0em;
    font-size: larger;
}
*/

label.col-md-4{
    justify-content: flex-end;
    float: right;
}

div.centered {
    display:block;
    max-width:60em;
}


button#submit {
    color: white;
    background-color: mediumseagreen;
    text-align: center;
    cursor: pointer;
}
/*
.submitName {
    color: white;
    background-color: mediumseagreen;
    height: 2.8em;
    padding: 0.2em;
    margin: 0.2em;
    border: 1px solid green;
    text-align: center;
    font-size: larger;
    cursor: pointer;
}
*/

/******************  TIMER ************************************/

div.clockDiv {
    position: absolute;
    top: 4.2em;
    left: 84%;
    width: 5em;
    height: 5 em;
    background-color: transparent;
    border: none;
}


.base-timer {
    position: relative;
    width: 50px;
    height: 50px;
    margin-left: 20px;
}

.base-timer__svg {
    transform: scaleX(-1);
}

.base-timer__circle {
    fill: none;
    stroke: none;
}

.base-timer__path-elapsed {
    stroke-width: 10px;
    stroke: #DDD;
}

.base-timer__path-remaining {
    stroke-width: 10px;
    stroke-linecap: round;
    transform: rotate(90deg);
    transform-origin: center;
    transition: 1s linear all;
    fill-rule: nonzero;
    stroke: currentColor;
}

    .base-timer__path-remaining.green {
        color: rgb(65, 184, 131);
    }

    .base-timer__path-remaining.orange {
        color: orange;
    }

    .base-timer__path-remaining.red {
        color: red;
    }

.base-timer__label {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: green;
}
/*************************************************/