html {
  overflow-x: auto;
}
body {
  max-width: 99%;
}
.maincontent {
    /*font-size:12px !important;*/
    margin-top:105px;
    margin-bottom:60px;
}
.headernav{
    min-height:0px !important;
}
.headeritem{
    margin-top:5px;
}
.headertext{
    display:inline;
    margin-left: 10px;
}
.QuestionNumber
{
    border: solid 1px #aaa;
    border-radius:25px 25px 25px 25px;
    -moz-border-radius:25px 25px 25px 25px;
    -webkit-border-radius:25px 25px 25px 25px;
    width:50px;
    height:50px;
    text-align:center;
    background-color:#eee;
    float: left;
    cursor: pointer;
    padding-top: 10px;
    font-size: 16px;
}
.question-content
{
  border-bottom:1px solid #ddd; margin-bottom: 10px;
}
.instructions
{
  background-color: rgb(43,149,122);
}
.instructionscontent
{
  border-bottom:1px solid #ddd; 
  margin-bottom: 10px;
}
.ChoiceLetter
{
    border: solid 1px #aaa;
    border-radius:12px 12px 12px 12px;
    -moz-border-radius:12px 12px 12px 12px;
    -webkit-border-radius:12px 12px 12px 12px;
    width:25px;
    height:25px;
    text-align:center;
    background-color:#efe;
    float: left;
    cursor: pointer;
}
.ChoiceLetter:hover
{
    background-color: #eee;
}
.BubbleChoice{
    margin-right:10px;
}
.AssessmentChoiceLetterSelected
{
    background-color: #f2e187;
}
.AssessmentItemChoiceContent
{
    margin-left: 35px;
}
.questionpanel{
    margin-bottom:0px !important;
}
.qgroupcontent{
    padding-top:40px;
    border-top:2px solid black; 
}
.itemcontent{
    padding-top:20px;
    border-bottom:1px solid #eee;
}
.BubbleItem{
    padding-top:10px;
    padding-bottom:10px;
    border-bottom:1px solid #eee;
}
.Gridable{
  width: 80% !important;
}
.OpenResponse{
  width:90% !important;
  height:100px;
}
.scrollposition{
    display: block; 
    position: relative; 
    top: -60px; 
    visibility: hidden;
}
.btntoolbartext{
    margin:0px !important
}
.highlight{
    background-color:yellow;
}
.digits .well {
text-align: center;
cursor: pointer;
font-weight: bold;
font-size: 2em;
}
.result {
text-align: right;
font-weight: bold;
font-size: 2em;
}
.calc{
    width:400px
}
.scicalc{
    width:700px
}
.calcbtn{
    width:70px;
    margin: 5px;
}
.calcbtn2{
    width:50px;
    margin: 5px;
}
.dragheader{
    cursor:move;
}
.btnfinish{
    margin-right:30px;
}
.startupdetails{
    margin-left:30px;
}
.startupprogress{
    margin-left:30px;
}
.disabled {
    pointer-events: none;
    cursor: not-allowed;
    /*filter: alpha(opacity=65);
    opacity: .65;*/
}
.elimbtn{
    border:none;
}
.popup{
    position:absolute;
    left: 300px;
    top: 100px; 
    /*left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;*/
    z-index:1031;
}
.savealert{
    margin-bottom:0px !important;
    padding:5px;
}
.choicepnl{
    margin-bottom:0px !important;
}
.canvasbtn {
    display: none;
}
.tts {
    font-weight:bold;
    background-color:yellow;
}
/*.bs-docs-sidebar.affix, .bs-docs-sidebar.affix-bottom {
width: 183px;
}
.bs-docs-sidebar.affix {
position: fixed;
top: 50px;
}*/
.nextprev > .ng-hide{
  display: block!important;
  visibility:hidden; 
}

/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 991px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

  .row-offcanvas-right {
    right: 0;
  }

  .row-offcanvas-left {
    left: 0;
  }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -50%; /* 6 columns */
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -50%; /* 6 columns */
  }

  .row-offcanvas-right.active {
    right: 50%; /* 6 columns */
  }

  .row-offcanvas-left.active {
    left: 50%; /* 6 columns */
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%; /* 6 columns */
  }
  .canvasbtn {
    display: inline!important;
  }
}

.sideview {
    min-width: 700px;
    background-color: #afb3cf;
}
.btn-t{
    margin-right: 5px;
}
.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 55px;
    right: 20px;
    display:none;
}
.fullwidth {
  width: 100%
}
#StudentAssessmentItemsMain{
  min-height: 260px;
}
.zoom15{
 transform: scale(1.5); /*translateX(17%) translateY(20%)*/
 transform-origin: 0 0;
}
.zoom15 .popover{
 display: none !important;
}
/*.zoom15 .offset{
 transform: translateX(17%) translateY(20%)
}
.zoom15-toolbar{
  top: 34px !important;
  left: 310px !important;
}
.zoom15-quickview{
  top: 80px !important;
  left: 310px !important;
}*/
.zoom20{
 transform: scale(2); /*translateX(25%) translateY(33%)*/
 transform-origin: 0 0;
}
.zoom20 .popover{
 display: none !important;
}
/*.zoom20 .offset{
 transform: translateX(25%) translateY(33%)
}
.zoom20-toolbar{
  top: 80px !important;
  left: 460px !important;
}
.zoom20-quickview{
  top: 125px !important;
  left: 460px !important;
}*/
.zoom20 .tool-offset{
 /*transform: translateX(35%) translateY(40%)*/
}
.zoom25{
  transform: scale(2.5);
  transform-origin: 0 0;
}
.zoom25 .popover{
 display: none !important;
}
/*.zoom25 .offset{
 transform: translateX(30%) translateY(40%)
}
.zoom25-toolbar{
  top: 100px !important;
  left: 540px !important;
}
.zoom25-quickview{
  top: 145px !important;
  left: 540px !important;
}*/
.zoom30{
 transform: scale(3); /*translateX(33%) translateY(45%)*/
 transform-origin: 0 0;
}
.zoom30 .popover{
 display: none !important;
}
/*.zoom30 .offset{
 transform: translateX(33%) translateY(45%)
}
.zoom30-toolbar{
  top: 120px !important;
  left: 600px !important;
}
.zoom30-quickview{
  top: 165px !important;
  left: 600px !important;
}*/
.colorbtn{
  width:170px;
  margin: 5px;
}

.app-whiteblack{
  background-color: #747474;
  /*color: #000; */
}
.app-whiteblack .highlight{
    background-color:#747474;
    color:white;
}
.app-whiteblack .popover{
  color: #050505;
  background-color: #c1c1c1;  
}
.panel-whiteblack {
  border-color: #444444;
  color: #fff;
  background-color: #000;
}
.panel-whiteblack > .panel-heading {
  color: #747474;
  background-color: #050505;
  border-color: #444444;
}
.panel-whiteblack > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #444444;
}
.panel-whiteblack > .panel-heading .badge {
  color: #050505;
  background-color: #c1c1c1;
}
.panel-whiteblack > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #444444;
}
.ChoiceLetter-whiteblack
{
  background-color: #000 ;
}
.ChoiceLetter-whiteblack:hover
{
  background-color: #333;
}
.hr-whiteblack {
  border-bottom-color: #747474;
}
.label-whiteblack {
  color: #050505;
  background-color: #c1c1c1;
}
.btn-whiteblack {
  color: #ffffff;
  background-color: #333333;
  border-color: #000000;
}
.btn-whiteblack:focus,
.btn-whiteblack.focus {
  color: #ffffff;
  background-color: #1a1a1a;
  border-color: #000000;
}
.btn-whiteblack:hover {
  color: #ffffff;
  background-color: #1a1a1a;
  border-color: #000000;
}
.btn-whiteblack:active,
.btn-whiteblack.active,
.open > .dropdown-toggle.btn-whiteblack {
  color: #ffffff;
  background-color: #1a1a1a;
  background-image: none;
  border-color: #000000;
}
.btn-whiteblack:active:hover,
.btn-whiteblack.active:hover,
.open > .dropdown-toggle.btn-whiteblack:hover,
.btn-whiteblack:active:focus,
.btn-whiteblack.active:focus,
.open > .dropdown-toggle.btn-whiteblack:focus,
.btn-whiteblack:active.focus,
.btn-whiteblack.active.focus,
.open > .dropdown-toggle.btn-whiteblack.focus {
  color: #ffffff;
  background-color: #080808;
  border-color: #000000;
}
.btn-whiteblack.disabled:hover,
.btn-whiteblack[disabled]:hover,
fieldset[disabled] .btn-whiteblack:hover,
.btn-whiteblack.disabled:focus,
.btn-whiteblack[disabled]:focus,
fieldset[disabled] .btn-whiteblack:focus,
.btn-whiteblack.disabled.focus,
.btn-whiteblack[disabled].focus,
fieldset[disabled] .btn-whiteblack.focus {
  background-color: #333333;
  border-color: #000000;
}
.btn-whiteblack .badge {
  color: #333333;
  background-color: #ffffff;
}



/*######### Red White theme ############*/
.app-redwhite{
  background-color: #c96469;
  /*color: #fff; */
}
.app-redwhite .highlight{
    background-color:red;
    color:white;
}
.app-redwhite .popover{
  color: #fdfafa;
  background-color: #c96469;
}
.panel-redwhite {
  border-color: #fdfafa;
  color: #86191e;
  background-color: #fff;
}
.panel-redwhite > .panel-heading {
  color: #c96469;
  background-color: #eebec0;
  border-color: #fdfafa;
}
.panel-redwhite > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #fdfafa;
}
.panel-redwhite > .panel-heading .badge {
  color: #fdfafa;
  background-color: #c96469;
}
.panel-redwhite > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #fdfafa;
}
.ChoiceLetter-redwhite
{
  background-color: #fff ;
  border-color: #86191e; 
}
.ChoiceLetter-redwhite:hover
{
    background-color: #dcebe2;
}
.hr-redwhite {
  border-bottom-color: #86191e;
}
.label-redwhite {
  color: #fdfafa;
  background-color: #c96469;
}
.btn-redwhite {
  color: #86191e;
  background-color: #ffffff;
  border-color: #2c0103;
}
.btn-redwhite:focus,
.btn-redwhite.focus {
  color: #86191e;
  background-color: #e6e6e6;
  border-color: #000000;
}
.btn-redwhite:hover {
  color: #86191e;
  background-color: #e6e6e6;
  border-color: #000000;
}
.btn-redwhite:active,
.btn-redwhite.active,
.open > .dropdown-toggle.btn-redwhite {
  color: #86191e;
  background-color: #e6e6e6;
  background-image: none;
  border-color: #000000;
}
.btn-redwhite:active:hover,
.btn-redwhite.active:hover,
.open > .dropdown-toggle.btn-redwhite:hover,
.btn-redwhite:active:focus,
.btn-redwhite.active:focus,
.open > .dropdown-toggle.btn-redwhite:focus,
.btn-redwhite:active.focus,
.btn-redwhite.active.focus,
.open > .dropdown-toggle.btn-redwhite.focus {
  color: #86191e;
  background-color: #d4d4d4;
  border-color: #000000;
}
.btn-redwhite.disabled:hover,
.btn-redwhite[disabled]:hover,
fieldset[disabled] .btn-redwhite:hover,
.btn-redwhite.disabled:focus,
.btn-redwhite[disabled]:focus,
fieldset[disabled] .btn-redwhite:focus,
.btn-redwhite.disabled.focus,
.btn-redwhite[disabled].focus,
fieldset[disabled] .btn-redwhite.focus {
  background-color: #ffffff;
  border-color: #2c0103;
}
.btn-redwhite .badge {
  color: #ffffff;
  background-color: #86191e;
}

/*######### White Red theme ############*/
.app-whitered{
  background-color: #c96469;
  /*color: #fff; */
}
.app-whitered .popover{
  color: #b32733;
  background-color: #f3dedf;  
}
.panel-whitered {
  border-color: #b32733;
  color: #fff;
  background-color: #86191e;
}
.panel-whitered > .panel-heading {
  color: #f3dedf;
  background-color: #b32733;
  border-color: #86191e;
}
.panel-whitered > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #444444;
}
.panel-whitered > .panel-heading .badge {
  color: #b32733;
  background-color: #f3dedf;
}
.panel-whitered > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #86191e;
}
.ChoiceLetter-whitered
{
  border-color: #fff; 
  background-color: #86191e;
}
.ChoiceLetter-whitered:hover
{
  background-color: #b32733;
}
.hr-whitered {
  border-bottom-color: #c96469;
}
.label-whitered {
  color: #b32733;
  background-color: #f3dedf;
}
.btn-whitered {
  color: #ffffff;
  background-color: #b12128;
  border-color: #a8050d;
}
.btn-whitered:focus,
.btn-whitered.focus {
  color: #ffffff;
  background-color: #86191e;
  border-color: #2c0103;
}
.btn-whitered:hover {
  color: #ffffff;
  background-color: #86191e;
  border-color: #6d0308;
}
.btn-whitered:active,
.btn-whitered.active,
.open > .dropdown-toggle.btn-whitered {
  color: #ffffff;
  background-color: #86191e;
  background-image: none;
  border-color: #6d0308;
}
.btn-whitered:active:hover,
.btn-whitered.active:hover,
.open > .dropdown-toggle.btn-whitered:hover,
.btn-whitered:active:focus,
.btn-whitered.active:focus,
.open > .dropdown-toggle.btn-whitered:focus,
.btn-whitered:active.focus,
.btn-whitered.active.focus,
.open > .dropdown-toggle.btn-whitered.focus {
  color: #ffffff;
  background-color: #681317;
  border-color: #2c0103;
}
.btn-whitered.disabled:hover,
.btn-whitered[disabled]:hover,
fieldset[disabled] .btn-whitered:hover,
.btn-whitered.disabled:focus,
.btn-whitered[disabled]:focus,
fieldset[disabled] .btn-whitered:focus,
.btn-whitered.disabled.focus,
.btn-whitered[disabled].focus,
fieldset[disabled] .btn-whitered.focus {
  background-color: #b12128;
  border-color: #a8050d;
}
.btn-whitered .badge {
  color: #b12128;
  background-color: #ffffff;
}

/*######### Green White theme ############*/
.app-greenwhite{
  background-color: #61a77d;
  color: #fff; 
}
.app-greenwhite .popover{
  color: #fafcfa;
  background-color: #61a77d;
}
.panel-greenwhite {
  border-color: #dcebe2;
  color: #01722e;
  background-color: #fff;
}
.panel-greenwhite > .panel-heading {
  color: #61a77d;
  background-color: #fafcfa;
  border-color: #dcebe2;
}
.panel-greenwhite > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #dcebe2;
}
.panel-greenwhite > .panel-heading .badge {
  color: #fafcfa;
  background-color: #61a77d;
}
.panel-greenwhite > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #dcebe2;
}
.ChoiceLetter-greenwhite
{
    background-color: #fff ;
    border-color: #01722e; 
}
.ChoiceLetter-greenwhite:hover
{
    background-color: #fafcfa;
}
.hr-greenwhite {
  border-bottom-color: #61a77d;
}
.label-greenwhite {
  color: #fafcfa;
  background-color: #61a77d;
}
.btn-greenwhite {
  color: #01722e;
  background-color: #ffffff;
  border-color: #23854a;
}
.btn-greenwhite:focus,
.btn-greenwhite.focus {
  color: #01722e;
  background-color: #e6e6e6;
  border-color: #082012;
}
.btn-greenwhite:hover {
  color: #01722e;
  background-color: #e6e6e6;
  border-color: #16552f;
}
.btn-greenwhite:active,
.btn-greenwhite.active,
.open > .dropdown-toggle.btn-greenwhite {
  color: #01722e;
  background-color: #e6e6e6;
  background-image: none;
  border-color: #16552f;
}
.btn-greenwhite:active:hover,
.btn-greenwhite.active:hover,
.open > .dropdown-toggle.btn-greenwhite:hover,
.btn-greenwhite:active:focus,
.btn-greenwhite.active:focus,
.open > .dropdown-toggle.btn-greenwhite:focus,
.btn-greenwhite:active.focus,
.btn-greenwhite.active.focus,
.open > .dropdown-toggle.btn-greenwhite.focus {
  color: #01722e;
  background-color: #d4d4d4;
  border-color: #082012;
}
.btn-greenwhite.disabled:hover,
.btn-greenwhite[disabled]:hover,
fieldset[disabled] .btn-greenwhite:hover,
.btn-greenwhite.disabled:focus,
.btn-greenwhite[disabled]:focus,
fieldset[disabled] .btn-greenwhite:focus,
.btn-greenwhite.disabled.focus,
.btn-greenwhite[disabled].focus,
fieldset[disabled] .btn-greenwhite.focus {
  background-color: #ffffff;
  border-color: #23854a;
}
.btn-greenwhite .badge {
  color: #ffffff;
  background-color: #01722e;
}

/*######### White Green theme ############*/
.app-whitegreen{
  background-color: #9ec9af;
  /*color: #fff; */
}
.app-whitegreen .popover{
  color: #23854a;
  background-color: #deeee3;
}
.panel-whitegreen {
  border-color: #23854a;
  color: #fff;
  background-color: #01722e;
}
.panel-whitegreen > .panel-heading {
  color: #deeee3;
  background-color: #23854a;
  border-color: #23854a;
}
.panel-whitegreen > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #23854a;
}
.panel-whitegreen > .panel-heading .badge {
  color: #23854a;
  background-color: #deeee3;
}
.panel-whitegreen > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #23854a;
}
.ChoiceLetter-whitegreen
{
  border-color: #fff; 
  background-color: #01722e;
}
.ChoiceLetter-whitegreen:hover
{
  background-color: #23854a;
}
.hr-whitegreen {
  border-bottom-color: #9ec9af;
}
.label-whitegreen {
  color: #23854a;
  background-color: #deeee3;
}
.btn-whitegreen {
  color: #ffffff;
  background-color: #01722e;
  border-color: #23854a;
}
.btn-whitegreen:focus,
.btn-whitegreen.focus {
  color: #ffffff;
  background-color: #013f1a;
  border-color: #082012;
}
.btn-whitegreen:hover {
  color: #ffffff;
  background-color: #013f1a;
  border-color: #16552f;
}
.btn-whitegreen:active,
.btn-whitegreen.active,
.open > .dropdown-toggle.btn-whitegreen {
  color: #ffffff;
  background-color: #013f1a;
  background-image: none;
  border-color: #16552f;
}
.btn-whitegreen:active:hover,
.btn-whitegreen.active:hover,
.open > .dropdown-toggle.btn-whitegreen:hover,
.btn-whitegreen:active:focus,
.btn-whitegreen.active:focus,
.open > .dropdown-toggle.btn-whitegreen:focus,
.btn-whitegreen:active.focus,
.btn-whitegreen.active.focus,
.open > .dropdown-toggle.btn-whitegreen.focus {
  color: #ffffff;
  background-color: #001c0b;
  border-color: #082012;
}
.btn-whitegreen.disabled:hover,
.btn-whitegreen[disabled]:hover,
fieldset[disabled] .btn-whitegreen:hover,
.btn-whitegreen.disabled:focus,
.btn-whitegreen[disabled]:focus,
fieldset[disabled] .btn-whitegreen:focus,
.btn-whitegreen.disabled.focus,
.btn-whitegreen[disabled].focus,
fieldset[disabled] .btn-whitegreen.focus {
  background-color: #01722e;
  border-color: #23854a;
}
.btn-whitegreen .badge {
  color: #01722e;
  background-color: #ffffff;
}


/*######### Blue White theme ############*/
.app-bluewhite{
  background-color: #7e86b2;
  color: #fff; 
}
.app-bluewhite .popover{
  color: #fafbfc;
  background-color: #7e86b2;
}
.panel-bluewhite {
  border-color: #20253f;
  color: #222b5e;
  background-color: #fff;
}
.panel-bluewhite > .panel-heading {
  color: #7e86b2;
  background-color: #fafbfc;
  border-color: #20253f;
}
.panel-bluewhite > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #20253f;
}
.panel-bluewhite > .panel-heading .badge {
  color: #fafbfc;
  background-color: #7e86b2;
}
.panel-bluewhite > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #20253f;
}
.ChoiceLetter-bluewhite
{
    background-color: #fff ;
    border-color: #222b5e; 
}
.ChoiceLetter-bluewhite:hover
{
    background-color: #fafbfc;
}
.hr-bluewhite {
  border-bottom-color: #7e86b2;
}
.label-bluewhite {
  color: #fafbfc;
  background-color: #7e86b2;
}
.btn-bluewhite {
  color: #222b5e;
  background-color: #ffffff;
  border-color: #20253f;
}
.btn-bluewhite:focus,
.btn-bluewhite.focus {
  color: #222b5e;
  background-color: #e6e6e6;
  border-color: #000000;
}
.btn-bluewhite:hover {
  color: #222b5e;
  background-color: #e6e6e6;
  border-color: #0b0d16;
}
.btn-bluewhite:active,
.btn-bluewhite.active,
.open > .dropdown-toggle.btn-bluewhite {
  color: #222b5e;
  background-color: #e6e6e6;
  background-image: none;
  border-color: #0b0d16;
}
.btn-bluewhite:active:hover,
.btn-bluewhite.active:hover,
.open > .dropdown-toggle.btn-bluewhite:hover,
.btn-bluewhite:active:focus,
.btn-bluewhite.active:focus,
.open > .dropdown-toggle.btn-bluewhite:focus,
.btn-bluewhite:active.focus,
.btn-bluewhite.active.focus,
.open > .dropdown-toggle.btn-bluewhite.focus {
  color: #222b5e;
  background-color: #d4d4d4;
  border-color: #000000;
}
.btn-bluewhite.disabled:hover,
.btn-bluewhite[disabled]:hover,
fieldset[disabled] .btn-bluewhite:hover,
.btn-bluewhite.disabled:focus,
.btn-bluewhite[disabled]:focus,
fieldset[disabled] .btn-bluewhite:focus,
.btn-bluewhite.disabled.focus,
.btn-bluewhite[disabled].focus,
fieldset[disabled] .btn-bluewhite.focus {
  background-color: #ffffff;
  border-color: #20253f;
}
.btn-bluewhite .badge {
  color: #ffffff;
  background-color: #222b5e;
}


/*######### White Blue theme ############*/
.app-whiteblue{
  background-color: #afb4d0;
  /*color: #fff; */
}
.app-whiteblue .popover{
  color:#2f3c84;
  background-color:#fafbfc; 
}
.panel-whiteblue {
  border-color: #4b5694;
  color: #fff;
  background-color: #2f3c84;
}
.panel-whiteblue > .panel-heading {
  color: #fafbfc;
  background-color: #4b5694;
  border-color: #2f3c84;
}
.panel-whiteblue > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #2f3c84;
}
.panel-whiteblue > .panel-heading .badge {
  color: #2f3c84;
  background-color: #fafbfc;
}
.panel-whiteblue > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #4b5694;
}
.ChoiceLetter-whiteblue
{
  border-color: #fff; 
  background-color: #2f3c84;
}
.ChoiceLetter-whiteblue:hover
{
  background-color: #4b5694;
}
.choicepnl .whiteblue
{
  border-color: #fff;
}
.hr-whiteblue {
  border-bottom-color: #afb4d0;
}
.label-whiteblue {
  color:#2f3c84;
  background-color:#fafbfc;
}
.btn-whiteblue {
  color: #ffffff;
  background-color: #2f3c84;
  border-color: #4b5694;
}
.btn-whiteblue:focus,
.btn-whiteblue.focus {
  color: #ffffff;
  background-color: #222b5e;
  border-color: #20253f;
}
.btn-whiteblue:hover {
  color: #ffffff;
  background-color: #222b5e;
  border-color: #363e6b;
}
.btn-whiteblue:active,
.btn-whiteblue.active,
.open > .dropdown-toggle.btn-whiteblue {
  color: #ffffff;
  background-color: #222b5e;
  background-image: none;
  border-color: #363e6b;
}
.btn-whiteblue:active:hover,
.btn-whiteblue.active:hover,
.open > .dropdown-toggle.btn-whiteblue:hover,
.btn-whiteblue:active:focus,
.btn-whiteblue.active:focus,
.open > .dropdown-toggle.btn-whiteblue:focus,
.btn-whiteblue:active.focus,
.btn-whiteblue.active.focus,
.open > .dropdown-toggle.btn-whiteblue.focus {
  color: #ffffff;
  background-color: #181f44;
  border-color: #20253f;
}
.btn-whiteblue.disabled:hover,
.btn-whiteblue[disabled]:hover,
fieldset[disabled] .btn-whiteblue:hover,
.btn-whiteblue.disabled:focus,
.btn-whiteblue[disabled]:focus,
fieldset[disabled] .btn-whiteblue:focus,
.btn-whiteblue.disabled.focus,
.btn-whiteblue[disabled].focus,
fieldset[disabled] .btn-whiteblue.focus {
  background-color: #2f3c84;
  border-color: #4b5694;
}
.btn-whiteblue .badge {
  color: #2f3c84;
  background-color: #ffffff;
}

/*######### Black on Yellow theme ############*/
.app-blackyellow{
  background-color: #5d5908;
  /*color: #f5ea16; */
}
.app-blackyellow .popover{
  color:#fafbfc;
  background-color:#5d5908;
}
.panel-blackyellow {
  border-color: #20253f;
  color: #000;
  background-color: #f5ea16;
}
.panel-blackyellow > .panel-heading {
  color: #5d5908;
  background-color: #d4ca12;
  border-color: #20253f;
}
.panel-blackyellow > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #20253f;
}
.panel-blackyellow > .panel-heading .badge {
  color: #d4ca12;
  background-color: #5d5908;
}
.panel-blackyellow > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #20253f;
}
.ChoiceLetter-blackyellow
{
  background-color: #f5ea16 ;
  border-color: #000; 
}
.ChoiceLetter-blackyellow:hover
{
  background-color: #fafbfc;
}
.hr-blackyellow {
  border-bottom-color: #5d5908;
}
.label-blackyellow {
  color:#d4ca12;
  background-color:#5d5908;
}
.btn-blackyellow {
  color: #212121;
  background-color: #f5ea16;
  border-color: #212121;
}
.btn-blackyellow:focus,
.btn-blackyellow.focus {
  color: #212121;
  background-color: #cfc509;
  border-color: #000000;
}
.btn-blackyellow:hover {
  color: #212121;
  background-color: #cfc509;
  border-color: #020202;
}
.btn-blackyellow:active,
.btn-blackyellow.active,
.open > .dropdown-toggle.btn-blackyellow {
  color: #212121;
  background-color: #cfc509;
  background-image: none;
  border-color: #020202;
}
.btn-blackyellow:active:hover,
.btn-blackyellow.active:hover,
.open > .dropdown-toggle.btn-blackyellow:hover,
.btn-blackyellow:active:focus,
.btn-blackyellow.active:focus,
.open > .dropdown-toggle.btn-blackyellow:focus,
.btn-blackyellow:active.focus,
.btn-blackyellow.active.focus,
.open > .dropdown-toggle.btn-blackyellow.focus {
  color: #212121;
  background-color: #ada507;
  border-color: #000000;
}
.btn-blackyellow.disabled:hover,
.btn-blackyellow[disabled]:hover,
fieldset[disabled] .btn-blackyellow:hover,
.btn-blackyellow.disabled:focus,
.btn-blackyellow[disabled]:focus,
fieldset[disabled] .btn-blackyellow:focus,
.btn-blackyellow.disabled.focus,
.btn-blackyellow[disabled].focus,
fieldset[disabled] .btn-blackyellow.focus {
  background-color: #f5ea16;
  border-color: #212121;
}
.btn-blackyellow .badge {
  color: #f5ea16;
  background-color: #212121;
}

/*######### Yellow on black theme ############*/
.app-yellowblack{
  background-color: #98910d;
  /*color: #000000; */
}
.app-yellowblack .popover{
  color: #000000;
  background-color: #cfc509;
}
.panel-yellowblack {
  border-color: #20253f;
  color: #f6eb16;
  background-color: #000000;
}
.panel-yellowblack > .panel-heading {
  color: #cfc509;
  background-color: #212003;
  border-color: #20253f;
}
.panel-yellowblack > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #20253f;
}
.panel-yellowblack > .panel-heading .badge {
  color: #000000;
  background-color: #cbc212;
}
.panel-yellowblack > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #20253f;
}
.ChoiceLetter-yellowblack
{
  background-color: #000000 ;
  border-color: #f6eb16; 
}
.ChoiceLetter-yellowblack:hover
{
  background-color: #98910d;
}
.hr-yellowblack {
  border-bottom-color: #cfc509;
}
.label-yellowblack {
  color: #000000;
  background-color: #cfc509;
}
.btn-yellowblack {
  color: #f6eb16;
  background-color: #212121;
  border-color: #212003;
}
.btn-yellowblack:focus,
.btn-yellowblack.focus {
  color: #f6eb16;
  background-color: #080808;
  border-color: #000000;
}
.btn-yellowblack:hover {
  color: #f6eb16;
  background-color: #080808;
  border-color: #000000;
}
.btn-yellowblack:active,
.btn-yellowblack.active,
.open > .dropdown-toggle.btn-yellowblack {
  color: #f6eb16;
  background-color: #080808;
  background-image: none;
  border-color: #000000;
}
.btn-yellowblack:active:hover,
.btn-yellowblack.active:hover,
.open > .dropdown-toggle.btn-yellowblack:hover,
.btn-yellowblack:active:focus,
.btn-yellowblack.active:focus,
.open > .dropdown-toggle.btn-yellowblack:focus,
.btn-yellowblack:active.focus,
.btn-yellowblack.active.focus,
.open > .dropdown-toggle.btn-yellowblack.focus {
  color: #f6eb16;
  background-color: #000000;
  border-color: #000000;
}
.btn-yellowblack.disabled:hover,
.btn-yellowblack[disabled]:hover,
fieldset[disabled] .btn-yellowblack:hover,
.btn-yellowblack.disabled:focus,
.btn-yellowblack[disabled]:focus,
fieldset[disabled] .btn-yellowblack:focus,
.btn-yellowblack.disabled.focus,
.btn-yellowblack[disabled].focus,
fieldset[disabled] .btn-yellowblack.focus {
  background-color: #212121;
  border-color: #212003;
}
.btn-yellowblack .badge {
  color: #212121;
  background-color: #f6eb16;
}

/*######### Black on Gray theme ############*/
.app-blackgray{
  background-color: #3a3a3a;
  /*color: #f5ea16; */
}
.app-blackgray .popover{
  color: #999999;
  background-color: #3a3a3a;
}
.panel-blackgray {
  border-color: #848484;
  color: #000;
  background-color: #999999;
}
.panel-blackgray > .panel-heading {
  color: #3a3a3a;
  background-color: #969696;
  border-color: #848484;
}
.panel-blackgray > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #848484;
}
.panel-blackgray > .panel-heading .badge {
  color: #999999;
  background-color: #3a3a3a;
}
.panel-blackgray > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #848484;
}
.ChoiceLetter-blackgray
{
  background-color: #999999;
  border-color: #000; 
}
.ChoiceLetter-blackgray:hover
{
  background-color: #969696;
}
.hr-blackgray {
  border-bottom-color: #000;
  border-top: none;
}
.label-blackgray {
  color: #999999;
  background-color: #3a3a3a;
}
.btn-blackgray {
  color: #212121;
  background-color: #999999;
  border-color: #848484;
}
.btn-blackgray:focus,
.btn-blackgray.focus {
  color: #212121;
  background-color: #808080;
  border-color: #444444;
}
.btn-blackgray:hover {
  color: #212121;
  background-color: #808080;
  border-color: #656565;
}
.btn-blackgray:active,
.btn-blackgray.active,
.open > .dropdown-toggle.btn-blackgray {
  color: #212121;
  background-color: #808080;
  background-image: none;
  border-color: #656565;
}
.btn-blackgray:active:hover,
.btn-blackgray.active:hover,
.open > .dropdown-toggle.btn-blackgray:hover,
.btn-blackgray:active:focus,
.btn-blackgray.active:focus,
.open > .dropdown-toggle.btn-blackgray:focus,
.btn-blackgray:active.focus,
.btn-blackgray.active.focus,
.open > .dropdown-toggle.btn-blackgray.focus {
  color: #212121;
  background-color: #6e6e6e;
  border-color: #444444;
}
.btn-blackgray.disabled:hover,
.btn-blackgray[disabled]:hover,
fieldset[disabled] .btn-blackgray:hover,
.btn-blackgray.disabled:focus,
.btn-blackgray[disabled]:focus,
fieldset[disabled] .btn-blackgray:focus,
.btn-blackgray.disabled.focus,
.btn-blackgray[disabled].focus,
fieldset[disabled] .btn-blackgray.focus {
  background-color: #999999;
  border-color: #848484;
}
.btn-blackgray .badge {
  color: #999999;
  background-color: #212121;
}

/*######### Yellow on black theme ############*/
.app-grayblack{
  background-color: #5e5e5e;
  /*color: #080808; */
}
.app-grayblack .popover{
  color: #080808;
  background-color: #858585;
}
.panel-grayblack {
  border-color: #000000;
  color: #999999;
  background-color: #080808;
}
.panel-grayblack > .panel-heading {
  color: #858585;
  background-color: #151515;
  border-color: #000000;
}
.panel-grayblack > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #000000;
}
.panel-grayblack > .panel-heading .badge {
  color: #080808;
  background-color: #858585;
}
.panel-grayblack > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #000000;
}
.ChoiceLetter-grayblack
{
  background-color: #080808 ;
  border-color: #999999; 
}
.ChoiceLetter-grayblack:hover
{
  background-color: #151515;
}
.hr-grayblack {
  border-bottom-color: #999999;
}
.label-grayblack {
  color: #080808;
  background-color: #858585;
}
.btn-grayblack {
  color: #999999;
  background-color: #212121;
  border-color: #151515;
}
.btn-grayblack:focus,
.btn-grayblack.focus {
  color: #999999;
  background-color: #080808;
  border-color: #000000;
}
.btn-grayblack:hover {
  color: #999999;
  background-color: #080808;
  border-color: #000000;
}
.btn-grayblack:active,
.btn-grayblack.active,
.open > .dropdown-toggle.btn-grayblack {
  color: #999999;
  background-color: #080808;
  background-image: none;
  border-color: #000000;
}
.btn-grayblack:active:hover,
.btn-grayblack.active:hover,
.open > .dropdown-toggle.btn-grayblack:hover,
.btn-grayblack:active:focus,
.btn-grayblack.active:focus,
.open > .dropdown-toggle.btn-grayblack:focus,
.btn-grayblack:active.focus,
.btn-grayblack.active.focus,
.open > .dropdown-toggle.btn-grayblack.focus {
  color: #999999;
  background-color: #000000;
  border-color: #000000;
}
.btn-grayblack.disabled:hover,
.btn-grayblack[disabled]:hover,
fieldset[disabled] .btn-grayblack:hover,
.btn-grayblack.disabled:focus,
.btn-grayblack[disabled]:focus,
fieldset[disabled] .btn-grayblack:focus,
.btn-grayblack.disabled.focus,
.btn-grayblack[disabled].focus,
fieldset[disabled] .btn-grayblack.focus {
  background-color: #212121;
  border-color: #151515;
}
.btn-grayblack .badge {
  color: #212121;
  background-color: #999999;
}



@media (min-width: 768px) {
  .PassageView {
    height: 350px; overflow-y: hidden;
  }
}

@media (min-width: 992px) {
  .PassageView {
    height: 500px; overflow-y: hidden;
  }
}
@media (min-width: 1200px) {
  .PassageView {
    /* height: 100%; */
    min-height: 350px; flex: 1 1 auto; overflow-y: auto;
  }
  .PassageList{
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
  }
}

.tspeech{
  display: none;
}
.edi-tspeech{
  display: none;
}
.btn-s{
  margin-right: 5px;
  height: 20px;
  font-size: 10px;
  line-height: 1;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-right: 5px;
}
.btn-circle {
  width: 40px;
  height: 40px;
  text-align: center;
  padding: 4px 0;
  font-size: 16px;
  line-height: 1.9;
  border-radius: 20px;
}
.toptoolbar {
  height: 30px;
  background-color: #afb3cf;
}
.label-q {
  display: inline;
  padding: .2em .6em .3em;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  cursor: pointer;
}
.a-pq {
  padding: 0px !important;
}
.text-pointer {
  cursor: pointer;
}
.col-right {
  float: right !important;
  white-space: nowrap;
}
.psg-tabs {
  border-bottom:1px solid #ddd; 
  /* margin-bottom: 10px; */
}
.text-nowrap {
  white-space: nowrap;
}
small {
  font-size: 9px;
}
.unselectable {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;

  /*
    Introduced in Internet Explorer 10.
    See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
  */
  -ms-user-select: none;
  user-select: none;
}