.mb-main-container {
}

.mb-title {
    vertical-align: middle;
}

/* ********** */
.mb-highlight-unanswered {
  color: #ff0000;
  font-weight: bold;
  margin-left: 0.5rem;
}

/* ********** */
.mb-header-logo {
    margin-left: 0.0rem;
    margin-right: 1.0rem;
    margin-top: 0.0rem;
    margin-bottom: 0.0rem;
    vertical-align: middle;
    max-height: 3.0rem;
    max-width: 20%;
}

.mb-footer-logo {
    max-height: 3.0rem;
    max-width: 10.0rem;
}

/* ********** */
.mb-info {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right:  0.5rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}

/* ********** */
.question-group {
    border: 1px solid black;
}

/* ********** */
.answers-horizontal {
    /*display: flex;
    flex-flow: row wrap;*/
}

.question-spacer-v-only {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.question-spacer {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right:  0.5rem;
}

/* default question text colours and border */
.question-text {
    background-color: powderblue;
    border: 1px solid black;
    border-radius: 0.5rem;
}

.answers-outer-div {
    background-color: #eeeeee;
    border: 1px solid black;
    border-radius: 0.5rem;
}

.question-warning {
    color: red;
}

@media screen and (min-width: 992px) {
    .question-spacer {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1.0rem;
        padding-right:  1.0rem;
    }

}

/* ********** */
.mb-on {
    /*display: block;*/
    visibility: visible;
    max-height: 5000rem;
    opacity: 1;
    -webkit-transition: opacity 0.2s;
       -moz-transition: opacity 0.2s;
         -o-transition: opacity 0.2s;
            transition: opacity 0.2s; 
}

.mb-off {
    /*display: none; prevents desired transitions */
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0px !important;
    max-height: 0px !important;
    -webkit-transition: opacity 0.2s, max-height 0.1s linear 0.22s, visibility 0.1s 0.22s,
                        margin-top 0.1s 0.22s, margin-bottom 0.1s 0.22s,
                        margin-right 0.1s 0.22s, margin-left 0.1s 0.22s,
                        padding-top 0.1s 0.22s, padding-bottom 0.1s 0.22s,
                        padding-right 0.1s 0.22s, padding-left 0.1s 0.22s;

       -moz-transition: opacity 0.2s, max-height 0.1s linear 0.22s, visibility 0.1s 0.22s,
                        margin-top 0.1s 0.22s, margin-bottom 0.1s 0.22s,
                        margin-right 0.1s 0.22s, margin-left 0.1s 0.22s,
                        padding-top 0.1s 0.22s, padding-bottom 0.1s 0.22s,
                        padding-right 0.1s 0.22s, padding-left 0.1s 0.22s;

         -o-transition: opacity 0.2s, max-height 0.1s linear 0.22s, visibility 0.1s 0.22s,
                        margin-top 0.1s 0.22s, margin-bottom 0.1s 0.22s,
                        margin-right 0.1s 0.22s, margin-left 0.1s 0.22s,
                        padding-top 0.1s 0.22s, padding-bottom 0.1s 0.22s,
                        padding-right 0.1s 0.22s, padding-left 0.1s 0.22s;

            transition: opacity 0.2s, max-height 0.1s linear 0.22s, visibility 0.1s 0.22s,
                        margin-top 0.1s 0.22s, margin-bottom 0.1s 0.22s,
                        margin-right 0.1s 0.22s, margin-left 0.1s 0.22s,
                        padding-top 0.1s 0.22s, padding-bottom 0.1s 0.22s,
                        padding-right 0.1s 0.22s, padding-left 0.1s 0.22s;
    margin: 0px 0px 0px 0px !important;
    padding: 0px 0px 0px 0px !important;
    border-width: 0px !important;
}

/* ********** */
input[type=radio] {
    width: 2rem;
}

.answer-radio-dot {
    padding-left: 0.5rem;
    padding-right: 0.0rem;
}

.answer-radio-dot-vertical {
    margin-left: 0.0rem;
    margin-right: 0.5rem;
}

.answer-radio-dot-horizontal {
    margin-left: 0.0rem;
    margin-right: 0.3rem;
}

.answer-radio-label-horizontal {
    vertical-align: middle;
    margin-right: 1.0rem;
}

.answer-radio-label-vertical {
    vertical-align: middle;
}

/* ********** */
input[type=button].answer-bubble-button {
    /* MB removed 20200211 border: 1px solid black;*/
    border-radius: 0.5rem;
    /* MB removed 20200211 height: 1.8rem;*/
    vertical-align: middle;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}

.answer-bubble-button-horizontal {
    width: 100%;
    height: 100%;
    white-space: normal;
}

.answer-bubble-button-vertical {
    height: 100%;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    min-width: 50%; /* required */
    text-align: left;
    white-space: normal;
}

@media screen and (max-width: 768px) {
  .answer-bubble-button-vertical {
    min-width: 100%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .answer-bubble-button-vertical {
    min-width: 80%;
  }
}

@media screen and (min-width: 1024) {
  .answer-bubble-button-vertical {
    min-width: 50%;
  }
}

.answer-bubble-button-checked {
    background-color: #cccccc;
}

.answer-bubble-button-unchecked {
    background-color: #ffffff;
}

/* ********** */
input[type=checkbox] {
    /* MB removed 20200211 width: 0.8rem;*/
    /* MB removed 20200211 height: 0.8rem;*/
    /*margin-top: 0.3rem;
    margin-bottom: 0.3rem;*/
    vertical-align: middle;
    width: 2rem;
}

.answer-checkbox-square {
}

.answer-checkbox-square-vertical {
    margin-left: 0.0rem;
    margin-right: 0.5rem;
}

.answer-checkbox-square-horizontal {
    margin-left: 0.0rem;
    margin-right: 0.3rem;
}

.answer-checkbox-label-horizontal {
    vertical-align: middle;
}

.answer-checkbox-label-vertical {
    vertical-align: middle;
    margin-right: 1.0rem;
}

@media screen and (min-width: 992px) {
    input[type=checkbox] {
        /* MB removed 20200211 height: 0.5rem;*/
        /*margin-top: 0.2rem;
        margin-bottom: 0.2rem;*/
    }

    .answer-checkbox-square-vertical {
        margin-left: 0.0rem;
        margin-right: 0.5rem;
    }

    .answer-checkbox-square-horizontal {
        margin-left: 0.0rem;
        margin-right: 0.4rem;
    }

    .answer-checkbox-label-horizontal {
        /*MB removed 20200211 font-size: 1.0rem;*/
        margin-right: 1.7rem;
    }

    .answer-checkbox-label-vertical {
        /*MB removed 20200211 font-size: 1.0rem;*/
    }


}

/* ********** */
.answer-number-int {
}

.answer-textinput {
    width: 100%;
}

.answer-textarea {
    resize: none;
    width: 100%;
    -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
       -moz-box-sizing: border-box; /* FF1+ */
            box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}

.answer-fixed-answer {
    width: 100%;
}

.answer-fixed-answer:focus { 
    outline: none !important;
}

/* ********** */
/* slider stuff */
.answer-slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  background: #ffffff;
  width: 100%;
  height: 2.0rem;
  margin-top: 0rem;
  margin-bottom: 0.5rem;
  outline: 1px solid black;
}

/* Mouse-over effects */
.answer-slider:hover {
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.answer-slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 2.0rem;
  height: 2.0rem;
  background: #ff0000;
  cursor: pointer; /* Cursor on hover */
  border-radius: 2.0rem;
}

.answer-slider::-moz-range-thumb {
  width: 2.0rem;
  height: 2.0rem;
  background: #ff0000;
  cursor: pointer; /* Cursor on hover */
  border-radius: 2.0rem;
}

.answer-slider-subtext {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
}

/* ********** */
/* draw canvas stuff */
.answer-draw-canvas {
    border: 1px solid black;
    background-color: white;
}

.draw-clear-button {
    margin-left: 1rem;
}


/* ********** */
/* Colour and border options */
.text-colour-grey {
    color: #a0a0a0;
}

.text-colour-grey strong {
    color: #a0a0a0;
}

.text-colour-grey .button {
    color: #a0a0a0;
}

.background-colour-grey {
    background-color: #dddddd;
}

.background-colour-light-grey {
    background-color: #eeeeee;
}

.background-colour-white {
    background-color: #ffffff;
}
 
.no-border {
    border: none;
}

.border-colour-grey {
    border-color: #999999;
}