body{
    background: white url(../images/bg.png) 50% 0% no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.qwrap{
    overflow: initial;
}
.progressbar-filled,.progressbar{
    border-radius: 5px;
}

.question, .progressbarContainer{
    padding: 10px 3%;
}

#footerAccesskeys{
    margin-bottom: 0 !important;
}
.qwrap label {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.buttonbar{
    margin-bottom: 0 !important;
}
.mainbuttons{
    padding:0px 5% 5% 5%;
}

.container-wrap{
    margin-top:0 !important;
    margin-bottom:0 !important;
    background-color:#ffffffd6;
}

.container{
    margin:0;
}

.topbar, .progressbarContainer{
    background-color: #2d2d2d;
}

.layout-zebra li.even {
  background:#0000000a !important;
}
.question.separator-lines .qtype ul li {
    border-bottom: 0px solid #F1F1F1;
}

.qwrap{
  background-color:transparent;
}


html.no-touch .item-hover li.item:hover input[type=radio] ~ label span.label-radio:before, html.no-touch .item-hover li.item:hover input[type=checkbox] ~ label span.label-checkbox:before{
    color:#DB536A;
}


li.item input[type=radio]:checked ~ label span.label-radio:before, li.item input[type=checkbox]:checked ~ label span.label-checkbox:before {
    color: #DB536A !important;
}

li.item:hover input[type=checkbox] ~ label span.label-checkbox:before {
    color: #696969;
}

html.no-touch .item-hover li.item:hover input[type=checkbox] ~ label span.label-checkbox:before{
    content:"\e802";
}

html.no-touch .item-hover li.item:hover input[type=radio] ~ label span.label-radio:before{
    content: "\e800" ;
}

input[type=radio]:checked ~ label span.label-radio:before {
    content: "\e801" !important;
}

html.no-touch .item-hover.layout-zebra li.item:hover {
    background-color: transparent !important;
}

html.no-touch .item-hover.layout-zebra li.even.item:hover {
    background-color: #0000000a !important;
}

@media only screen and (min-width: 768px){
    .question, .progressbarContainer{
        padding:  10px 3%;
    }
}
@media only screen and (min-width: 1002px){
    .question, .progressbarContainer{
        padding:  10px 6%;
    }
}
@media only screen and (min-width: 1200px){
    .question, .progressbarContainer{
        padding: 10px 3%;
    }
}


.headerTitle, .headerTitleNoSub{
    font-family: Georgia,Times,Times New Roman,serif !important;
    font-size: 2.5em;
    width: max-content;
    background-color:#2d2d2d;
    padding:10px;
    line-height:initial;
    color:white;
}
.headerTitleNoSub{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width:initial!important;
}
.right{
    background-color:transparent;
  width:100%;
}
.rightNoSubheading{
    background-color:#2d2d2d;
}


@media only screen and (max-width: 600px) {
    .headerTitle,.headerSubheading {
        transform: translateY(0%);
        width:initial !important;
        padding:5px !important 
   }
    .right{
        background-color: #2d2d2d;
   }
    .left{
        padding: 0 5px 0 15px;
   }
    .headerTitleNoSub{
        font-size:1.6em;
        position: initial;
        top: initial;
        transform: translateY(0%);
        padding:20px;
   }
    .headerSubheading{
        font-size:1.2em;
   }
    .headerTitle, .headerTitleNoSub,{
        font-size:1.7em;
   }
    .headerSubheading .labeltext{
        display: initial !important;
   }
}
.headerSubheading{
    font-family: Georgia,Times,Times New Roman,serif !important;
    font-size: 1.5em;
    width: max-content;
    background-color:#2d2d2d;
    padding:10px;
    line-height:initial;
    color:white;
}


.topbar, .left{
  display: flex;
}

.left{
      background-color: #2d2d2d;
          padding: 0 15px 0 30px;


}

.textHeader{
  padding-bottom:10px;
}

.right{
      position: relative;
    top: 50%;
    background-color: #2d2d2d;
    /* transform: translateY(-50%); */
    min-height: 100px;
}
@media only screen and (max-width: 600px) {
  .right{
      position: initial;
    top: initial;
    background-color: #2d2d2d;
    /* transform: translateY(-50%); */
    min-height: initial;
}
}
.logoclass{
  display: block;
  padding-right: 30px;
    margin: auto 0;
    border-right: 2px solid #ffffff26;
}


.footersection{
  padding: 0 5%;
  background-color:#2d2d2df5;
  color:white;
  padding-top: 40px;
  padding-bottom: 40px;
}

.footersection a{
  color:#d9d9d9;
}

.footersection a:hover{
  color:white;
}

.footerlinks{  
  padding-top: 20px;
}

.footertext{
  margin: 0 0 10px;
}

.progressbarIndicator{
  font-weight:bold;
}

.divider{
    background-color:transparent;
}

.question .tag-header h2.title{
    margin: 0;
    color: #000;
    font-size: 1.5em;
    font-family: "Arial", "Helvetica", "Trebuchet MS", "Verdana", "Verdana Ref", sans serif;
    line-height: 1.4em;
    font-weight: bold;
}

.question .tag-header h3.subtitle{
    margin: 0;
    padding: 0;
    font-family: "Arial", "Helvetica", "Trebuchet MS", "Verdana", "Verdana Ref", sans serif;
    font-size: 1.15em;
    font-style: italic;
    color: black;
    line-height: 1.15em;
    font-weight: initial;
}

.buttonbar .mainbuttons{
    border-top: initial;
}

.mt-2{
    margin-top: 0 !important;
}

.question {
    position: relative;
    margin-top: 0;
    margin-bottom:0;
}

.navigationCenter2{
    background-color:transparent !important;
    border-bottom:0 !important;
}

.buttonbar #bb, .buttonbar #os, .buttonClass{
    outline:0 !important;
    font-weight:bold;   
    text-transform: uppercase !important;
    font-weight: bold !important;
    border-radius: 2px;    
    font-size: 1.2rem;
    letter-spacing: 2px;
    border: none;
    padding: 13px 20px;
    -webkit-animation: 0;
    transition: padding 0.2s;
    min-width:initial !important;
}

.buttonbar #bb:hover, .buttonbar #os:hover, .buttonClass:hover{
    padding: 13px 30px;
    transition: padding 0.2s;
}

.content{
    flex: 1 0 auto;
}

html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
}
.content {
    flex: 1 0 auto;
}
.footersection {
    flex-shrink: 0;
}  

li.item{
    border-radius: 3px;
}

.mainbuttons{
    margin-top: 40px;
}
 .tooltip {
      position: relative;
      display: inline-block;
      cursor:pointer;
  }
  
  
 .tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0 !important;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px !important;
   font-weight: normal !important;
    line-height: 1.4em !important;
}
   .tooltip .tooltiptext.wide{
  width: 500px !important;
  margin-left: -250px !important;
}
  
 
  .tooltip .tooltiptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: black transparent transparent transparent;
  }
  
  .tooltip:hover .tooltiptext {
      visibility: visible;
  }

.message-error {
    padding: 0 20px;
}

.message-error {
    background-color: #F7C8C4 !important;
    margin: auto;
    border-radius: 5px;
    margin-bottom: 20px;
}

.logoclass2 {
    display: block;
    padding-left: 30px;
    margin: auto 0;
    border-left: 0px solid #ffffff26;
}

#header {
    margin-bottom: 0px !important;
  background-color: #2d2d2d !important;
}

@media only screen and (min-width: 1002px){}#header {
   margin-bottom: 25px;
}
}

@media only screen and (max-width: 700px) {
#header {
   margin-bottom: 0px;
}
}
.headerTitleNoSub {
    transform: translateY(0%);

}  

.right2{
    background-color:transparent;
  width:100%;
        position: relative;
    top: 50%;
    background-color: #2d2d2d;
    /* transform: translateY(-50%); */
    min-height: 100px;
}

.logoclass2 {
    margin-top: 20px;
    display: block;
    padding-left: 30px;
    border-right: 0px solid #ffffff26;
    float: right;
}

.logoclass {

    border-right: 0px solid #ffffff26;

}
  
.headerTitleNoSub {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: initial!important;
    text-align: center;
}


.right {
   background-color: #000000 !important;
}

.topbar, .progressbarContainer {
   background-color: #000000 !important;
}

.headerTitleNoSub {
   background-color: #000000 !important;
}

.left {
   background-color: #000000 !important;
}

.right2 {
   background-color: #000000 !important;
}

.footersection {

   background-color: #000000 !important;
}

@media only screen and (max-width: 700px) {
  .logoclass {
    width: 80%;
    height: 50%;
  }
}

.buttonbar #bb, .buttonbar #os, .buttonClass {

       background-color: #000000 !important;
}