html{
  background:#ffffff;
  background:#eeeeee;
}
body{
  overflow:auto;
}
html, body{
  -webkit-text-size-adjust: none;
  height:100%;
  margin:0;
}

body, input, select, textarea, button{
  font-family:'Jost', sans-serif;
  font-size:14px;
  color:#000000;
}
h1,h2,h3{
  margin:0;
}
#page{
  width:100%;
  min-width:320px;
  min-height:100%;
  position:relative;
}
.button{
  font-size:14px;
  line-height:16px;
  border-radius:22px;
  padding:10px 30px;
  color:#ffffff;
  background:#84a362;
  text-decoration:none;
  display:inline-block;
  border:0;
  outline:0;
  cursor:pointer;
}
a.eklase{
  background:rgb(0, 154, 227);
}
a.eklase::before{
  content:'';
  background:url(eklase-logo.png) no-repeat;
  width:20px;
  height:15px;
  display:inline-block;
  vertical-align:middle;
  margin-right:5px;
}
a.mykoob{
  background:rgb(41, 44, 57);
}
a.mykoob::before{
  content:'';
  background:url(mykoob-logo.png) no-repeat;
  width:20px;
  height:15px;
  display:inline-block;
  vertical-align:middle;
  margin-right:5px;
}
a.logout{
  background:#bc5b5b;
  position:fixed;
  top:10px;
  right:10px;
  z-index:100;
}
button.vote{
  background:rgb(0, 154, 227);
  margin:0 auto;
  display:block;
}

form[name="agree-form"] div{
  margin:0 0 10px 0;
}
.alert{
  text-align:center;
  color:red;
}

#alert{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,.5);
  display:none;
  z-index:200;
}
#alert > div{
  padding:30px 60px;
  border-radius:20px;
  background:#ffffff;
  box-shadow:0 0 3px 0 rgba(0,0,0,.5);
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}
#alert .text{
  display:block;
  margin:0 0 10px 0;
}
#alert .close{
  background:#bc5b5b;
}

#questionary{
  width:820px;
  _height:1179px;
  margin:0 auto;
  position:relative;
  background:#ffffff;
  _border:1px solid #666666;
  box-sizing:border-box;
  padding:85px 85px 28px 53px;
}
#questionary .title{
  position:relative;
  margin:0 0 67px 0;
}
#questionary .title.tp{
  padding:0 160px 0 0;
}
#questionary .title.center{
  text-align:center;
}
#questionary .title h1{
  font-size:126px;
  line-height:126px;
  font-weight:bold;
  position:absolute;
  right:0;
  bottom:-14px;
}
#questionary .title h3{
  font-size:22px;
  line-height:25px;
  font-weight:normal;
  margin:0 0 7px 0;
}
#questionary .title h2{
  font-size:25px;
  line-height:28px;
  font-weight:bold;
}
#questionary .title h4{
  font-size:19px;
  line-height:22px;
  color:rgb(0, 154, 227);
  font-weight:normal;
  margin:50px 0 -50px 0;
}

#questionary .table{
  padding:0 17px 0 35px;
  counter-reset:ol;
}
#questionary .list{
  padding-bottom:100px;
}
#questionary .table ol,
#questionary .list ul{
  list-style:none;
  padding:0;
  margin:0;
}
#questionary .table li,
#questionary .list li{
  display:block;
  white-space:nowrap;
  position:relative;
}
#questionary .list li{
  font-size:20px;
  line-height:22px;
  margin:0 0 5px 0;
}
#questionary .table li.caption{
  position:sticky;
  top:0;
}
#questionary .list li a{
  color:#000000;
  text-decoration:none;
  white-space:normal;
}
#questionary .list li a:hover{
  text-decoration:underline;
}
#questionary .table li:not(.caption)::before{
  counter-increment:ol;
  content: counter(ol) ". ";
  font-size:20px;
  line-height:22px;
  position:absolute;
  width:42px;
  text-align:right;
  left:-46px;
  top:6px;
}
#questionary .table li + li{
  border-top:1px solid #000000;
}
#questionary .table div{
  font-size:20px;
  line-height:22px;
  width:549px;
  width:calc(100% - 92px);
  display:inline-block;
  vertical-align:top;
  white-space:normal;
  padding:6px 0;
}
#questionary .table span{
  width:38px;
  display:inline-block;
  vertical-align:top;
  margin-left:8px;
}
#questionary .table li.caption span{
  font-size:11px;
  line-height:22px;
  font-weight:bold;
  text-transform:uppercase;
  text-align:center;
}
#questionary .table span input{
  display:none;
}
#questionary .table span label{
  width:38px;
  height:34px;
  display:block;
  background:#84a362;
  position:relative;
  cursor:pointer;
}
#questionary .table span + span label{
  background:#bc5b5b;
}
#questionary .table span label::before{
  content:'';
  width:21px;
  height:13px;
  display:block;
  background:#ffffff;
  border-radius:50%;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  box-sizing:border-box;
  border:1px solid #000000;
}
#questionary .table span input:checked + label::before{
  background:#000000;
}
#questionary .table span input:checked + label.ch::before{
  background:#ffffff;
}
#questionary .table span label i{
  width:21px;
  height:13px;
  display:block;
  border-radius:50%;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  overflow:hidden;
}
#questionary .table span label svg{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:36px;
  height:36px;
}
#questionary .table span label.ch2 svg{
  width:25px;
  height:32px;
  transform:translate(-30%, -70%);
}
#questionary .table span label svg .path{
  fill: none;
  stroke: #000000;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4px;
  stroke-dasharray:120;
  stroke-dashoffset:120;
}
@keyframes dash {
to{stroke-dashoffset: 0;}
}
#questionary .table span input:checked + label svg .path{
  animation:dash 300ms ease-in-out forwards;
}

#questionary.columns .table{
  white-space:nowrap;
}
#questionary.columns .table ol{
  display:inline-block;
  vertical-align:top;
}
#questionary.columns .table ol + ol{
  margin-left:80px;
}
#questionary.columns .table div{
  font-size:16px;
  line-height:17px;
  width:210px;
  padding:4px 0;
}
#questionary.columns .table li:not(.caption)::before{
  font-size:16px;
  line-height:16px;
  top:3px;
}
#questionary.columns .table span{
  width:30px;
  margin-left:6px;
}
#questionary.columns .table span label{
  width:30px;
  height:26px;
}
#questionary.columns .table span label::before{
  width:17px;
  height:10px;
}


#date *{
  display:inline-block;
  margin-right:10px;
}
form select{
  border:1px solid #666;
  border-radius:3px;
}
form select.err{
  border:1px solid red;
}
form input[type="checkbox"].err + label{
  color:red;
}

/*#date div,
#date label{
  width:100px;
  display:inline-block;
  margin-right:10px;
}
#date label{
  width:auto;
}*/

.tt-menu,
.gist {
  text-align: left;
}
.time-off{
  font-size:14px;
  text-align:center;
}

.typeahead,
.tt-query,
.tt-hint {
  wwidth: 396px;
  hheight: 30px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {
  wwidth: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 14px;
  line-height: 16px;
  white-space:nowrap;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}


.gist {
  font-size: 14px;
}

.twitter-typeahead .dropdown-menu {
  max-height: 150px;
  overflow-y: auto;
}



@media print {
#questionary{
  break-after: page;
  break-inside: avoid-page;
  border:0;
}
}

@media screen {
#questionary + #questionary{
  margin-top:30px;
}
}

@media screen and (max-width: 850px) {
#questionary{
  width:100%;
  border:0;
  padding:15px 0 30px 0;
}
#questionary .title,
#questionary .title.tp{
  padding:40px 30px 30px 30px;
  margin:0;
}
#questionary .title h1{
  font-size:100px;
  line-height:100px;
  position:relative;
  right:auto;
  bottom:auto;
  text-align:right;
}
#questionary .title h4{
  margin:30px 0 0 0;
}
#questionary .table{
  padding:0 20px 0 45px;
}
#questionary .list{
  padding:0 30px 0 30px;
}
#questionary .list li{
  white-space:normal;
}
#questionary.columns .table ol{
  display:block;
}
#questionary.columns .table ol + ol{
  margin:0;
}
#questionary .table div,
#questionary.columns .table div{
  font-size:20px;
  line-height:22px;
  width:calc(100% - 92px);
  padding:6px 0;
}
#questionary.columns .table li:not(.caption)::before{
  font-size:20px;
  line-height:22px;
  top:6px;
}
#questionary.columns .table li.mn{
  display:none;
}
#questionary.columns .table span{
  width:38px;
  margin-left:8px;
}
#questionary.columns .table span label{
  width:38px;
  height:34px;
}
#questionary.columns .table span label::before{
  width:21px;
  height:13px;
}
}