/**
 * QuickQuiz v1.3.5
 * http://quizkquiz.ws
 * Copyright (c) 2015-present, Raquel García Cabañas
 */

@import url('import/icons.css');
html {}

#quickquiz {
    font-family: 'Roboto', sans-serif;
    max-width: 750px;
    padding: 10px;
    margin: auto;
    /*    margin-top: 1em;*/
    /*    margin-bottom: 1em;*/
    overflow: hidden;
    background-size: cover;
}


/* you may use custom colors for your selected rating icons */

#quickquiz .rating .md-button.md-primary md-icon,
#quickquiz table .md-button.md-primary md-icon {
    /* color:#eed700; */
}


/* YOU CAN CHANGE HERE THE COLOR FOR THE NAV BUTTONS */

#quickquiz .nav-buttons .md-button {
    /*color: #333;*/
    /*background-color: #80CBC4;*/
}

#quickquiz .nav-buttons .md-button:hover {
    /* background-color: #90DBD4;*/
}


/* input for 'other' option */

#quickquiz md-input-container.other-right {
    /* adjust the margin-left if you want the input to the right of the "other" option */
    margin-left: 70px;
    margin-top: -42px;
    width: 100%;
}

#quickquiz md-input-container.other-bottom {
    margin-top: -5px;
    width: 100%;
}

#quickquiz md-input-container.other-single {
    padding-left: 38px;
}

#quickquiz md-input-container.other-multiple {
    padding-left: 35px;
}

body {
    background-color: transparent;
}

#quickquiz>md-content {
    background-color: transparent;
}

#quickquiz .md-whiteframe-3dp {
    background-color: #ffffff;
    padding: 0;
}

#quickquiz .item-separation {
    padding: 8px;
}

#quickquiz .title-toolbar {
    border-radius: 3px 3px 0 0;
    box-shadow: 0 1px rgba(255, 255, 255, 0.1);
}

#quickquiz h1 {
    margin-left: 24px;
}

#quickquiz .main-title.without-toolbar {
    padding-top: 30px;
}

#quickquiz .page {
    /*    padding: 24px;*/
}

#quickquiz .prev-next,
#quickquiz .pagNumber {
    padding: 0 24px;
}

#quickquiz .pagNumber {
    margin: 20px 0;
}

#quickquiz .quiz-container {
    margin-bottom: 1em;
    padding-bottom: 2em;
}

#quickquiz .md-display-1 {
    line-height: 30px;
    margin: 10px;
}

#quickquiz md-progress-linear {
    width: 100%;
}

#quickquiz .prev-next {
    margin-top: 2em;
    margin-bottom: 2em;
}

#quickquiz .question .md-button {
    width: 100%;
    padding: 5px;
    margin: 0;
    font-weight: normal;
    text-transform: none;
    min-width: 0;
}

#quickquiz .matrix-choices .md-button {
    padding: 5px 15px;
}

#quickquiz .question .md-button.no-border {
    padding: 0;
    min-height: 0;
    line-height: 0;
}

#quickquiz .md-char-counter {
    bottom: -15px;
    right: 2px;
    color: #999
}

#quickquiz .page ul {
    list-style-type: none;
    padding: 0;
}

#quickquiz .question {
    /*    margin: 2em 0 3em 0;*/
}

#quickquiz .layout-answers {
    padding: 0;
}

#quickquiz .question-statement-line h3 {
    margin-top: 0;
}

#quickquiz .pointsPerQuestion {
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

#quickquiz .answer-container {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

#quickquiz img {
    width: 100%;
    vertical-align: middle;
}

#quickquiz .aside-image {
    padding: 16px;
    cursor: pointer;
}

#quickquiz .aside-image-score img {
    padding: 16px;
    cursor: pointer;
    float: right;
    max-width: 25%;
}

#quickquiz .score-questions md-divider {
    clear: both;
}

#quickquiz .md-button.textLeft {
    text-align: left;
    padding-left: 15px;
}

#quickquiz .halfWidth {
    width: 50%;
}

#quickquiz .md-button.semitransparent,
#quickquiz table.semitransparent {
    opacity: .9;
}

#quickquiz .matching-pairs .selected {
    background-color: #eee;
    color: #666666;
}

#quickquiz .matching-pairs .selected.border-color {
    border: 2px solid;
}

#quickquiz .matching-fixed.type-select {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    margin: 20px 25px 26px 0;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 3px;
    position: relative;
    box-sizing: border-box;
    min-width: 64px;
}

#quickquiz .matching-fixed.type-select span {
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 2px;
}

#quickquiz .scale-text {
    margin-bottom: 1.5em;
}

#quickquiz .md-button.md-icon-button {
    width: auto;
}

#quickquiz .rating md-icon {
    width: 30px;
    height: 30px;
}

#quickquiz .rating .md-icon-button:hover,
#quickquiz .rating .md-icon-button:hover~.md-icon-button {
    opacity: .75;
    filter: alpha(opacity=75);
}


/* SCORE */

#quickquiz .score-message {
    text-align: center;
    margin: 50px 0;
    line-height: 50px;
}

#quickquiz .unanswered {
    font-style: italic;
}

#quickquiz .score-questions {
    margin-top: 2em;
}

#quickquiz .score-answers {
    margin: 0 0 2em 2em;
}

#quickquiz .score-answers .md-caption {
    margin-left: -1.5em;
    margin-top: 1.5em;
}

#quickquiz .score-questions img {
    width: 40%;
    margin-bottom: 1em;
    vertical-align: text-top;
    /*display: block;*/
    margin-right: 5px;
}

#quickquiz .score-questions .puzzle img {
    margin-bottom: 0;
}


/* FORM */

#quickquiz .form-container {
    margin-top: 30px;
}

#quickquiz .form-container form {
    margin-top: 20px;
}


/* MATRIX */

#quickquiz table,
#quickquiz th,
#quickquiz td {
    border: 1px solid grey;
    border-collapse: collapse;
    width: 100%;
}

#quickquiz th {
    background-color: #999;
    color: white;
    white-space: nowrap;
    padding: 15px;
}

#quickquiz table tr:nth-child(odd) {
    background-color: #f1f1f1;
    padding: 5px;
}

#quickquiz table tr:nth-child(even) {
    background-color: #ffffff;
}

#quickquiz table td {
    padding-left: 10px;
}

#quickquiz table td.radio {
    text-align: center;
    padding-left: 12px;
}

#quickquiz table .rating md-icon {
    margin: 5px 0 15px 0;
}


/* BASIC TEXT COLORS */

#quickquiz {
    color: #333;
    /* basic text color */
}

#quickquiz .pagNumber,
#quickquiz .timer {
    color: #ccc;
}

#quickquiz .description,
#quickquiz .pointsPerQuestion {
    color: #999;
}

#quickquiz [ng-message],
#quickquiz .alert,
md-input-container [ng-messages] {
    color: rgb(244, 67, 54);
    font-size: 12px !important;
    line-height: 14px;
    overflow: hidden;
    padding-top: 5px;
    opacity: 1 !important;
}

#quickquiz .alert.global {
    margin-top: 20px;
}


/* VIDEOGULAR */

#quickquiz vg-overlay-play.audio {
    display: none;
}

#quickquiz videogular.hide-controls vg-controls,
#quickquiz videogular.hide-controls vg-overlay-play {
    pointer-events: none;
    display: none;
}

#quickquiz videogular.hide-controls {
    pointer-events: none;
}

#quickquiz .videogular-container {
    width: 100%;
    margin: auto;
    overflow: hidden;
}

#quickquiz .videogular-container.video {
    height: 320px;
}

#quickquiz videogular.audio {
    height: 50px;
}

@media (min-width: 768px) {
    #quickquiz .videogular-container.video {
        height: 387px;
    }
}

#quickquiz vg-scrub-bar-cue-points .cue-point {
    width: 5px !important;
    height: 5px;
    border-radius: 50px;
}

#quickquiz videogular vg-scrub-bar [role=slider],
[videogular] vg-scrub-bar [role=slider] {
    background-color: rgba(255, 255, 255, .2)
}


/* SENDING ICON */

#quickquiz .loading-icon {
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
}

#quickquiz .spinner {
    height: 40px;
    width: 40px;
    animation: rotate 0.8s infinite linear;
    border: 8px solid #333;
    border-right-color: transparent;
    border-radius: 50%;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* table MySQL */

.tableMySQL {
    font-family: 'Roboto', sans-serif;
    font-size: .8em;
    margin: 15px;
}

.tableMySQL,
.tableMySQL th,
.tableMySQL td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 15px;
    white-space: pre;
}

.tableMySQL th {
    background-color: #999;
    color: white;
}

.tableMySQL tr:nth-child(odd) {
    background-color: #f1f1f1;
}

.tableMySQL tr:nth-child(even) {
    background-color: #ffffff;
}

.tableText {
    font-family: 'Roboto', sans-serif;
    margin: 15px;
}


/*TRANSITION PAGES */


/* fade in-out */

*#quickquiz .fade.ng-enter {
    -webkit-transition: all cubic-bezier(0.25, 0.50, 0.50, 0.90) 0.3s 0.3s;
    transition: all cubic-bezier(0.25, 0.50, 0.50, 0.90) 0.3s 0.3s;
    opacity: 0;
    filter: alpha(opacity=0);
}

#quickquiz .fade.ng-enter.ng-enter-active {
    opacity: 1;
    filter: alpha(opacity=100);
}

#quickquiz .fade.ng-leave {
    -webkit-transition: all cubic-bezier(0.25, 0.50, 0.50, 0.90) 0.2s;
    transition: all cubic-bezier(0.25, 0.50, 0.50, 0.90) 0.2s;
    opacity: 1;
    filter: alpha(opacity=100);
}

#quickquiz .fade.ng-leave.ng-leave-active {
    opacity: 0;
    filter: alpha(opacity=0);
}


/* slide */

#quickquiz .slide.ng-enter {
    -webkit-transition: all cubic-bezier(0.25, 0.50, 0.50, 0.90) 0.5s 0.3s;
    transition: all cubic-bezier(0.25, 0.50, 0.50, 0.90) 0.5s 0.3s;
    -ms-transform: translateX(110%);
    -webkit-transform: translateX(110%);
    transform: translateX(110%);
    z-index: 9999;
}

#quickquiz .slide.ng-enter.ng-enter-active {
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
    z-index: 9999;
}

#quickquiz .slide.ng-leave {
    -webkit-transition: all cubic-bezier(0.25, 0.50, 0.50, 0.90) 0.2s;
    transition: all cubic-bezier(0.25, 0.50, 0.50, 0.90) 0.2s;
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
    z-index: 8888;
}

#quickquiz .slide.ng-leave.ng-leave-active {
    -ms-transform: translateX(-110%);
    -webkit-transform: translateX(-110%);
    transform: translateX(-110%);
    z-index: 8888;
}


/* END TRANSITION */


/** Social Button CSS **/

#quickquiz .qq_social_icons a {
    margin: 0.7em;
    box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.2);
}

#quickquiz .qq_social_icons a:hover {
    box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}

#quickquiz .qq_social_icons img {
    width: 50px;
    height: 50px;
}

#quickquiz md-checkbox .md-container{
    top: 15px!important; 
}

#quickquiz md-checkbox.md-default-theme:not([disabled]).md-primary.md-checked .md-icon, md-checkbox:not([disabled]).md-primary.md-checked .md-icon{
    background-color: #D01E2E; 
}


/* media queries for mobile*/

@media (max-width: 600px) {
    #quickquiz {
        padding: 0;
        margin: 0;
    }
    #quickquiz .page {
        padding: 5px;
    }
    #quickquiz>.layout-padding {
        padding: 0;
    }
    #quickquiz .quiz-container {
        margin-bottom: 0;
    }
    #quickquiz .halfWidth {
        width: 100%;
    }
    #quickquiz .hide-image-mobile {
        display: none;
    }
    #quickquiz th {
        white-space: normal;
        /* delete or comment this line if your header text are too large */
        padding: 8px 3px;
    }
    #quickquiz table td {
        padding-left: 5px;
    }
    #quickquiz table td.radio {
        padding-left: 5px;
    }
    #quickquiz table .rating md-icon {
        margin: 0px 0 0px 0;
        padding: 0;
    }
    #quickquiz .question table .md-button {
        padding: 0 !important;
    }
}

@media screen and (min-width:0\0) {
    span[flex],
    .flex {
        display: block;
    }
}

md-toolbar.md-default-theme:not(.md-menu-toolbar),
md-toolbar:not(.md-menu-toolbar),
a.md-button.md-default-theme.md-primary.md-raised,
a.md-button.md-primary.md-raised,
a.md-button.md-default-theme.md-primary.md-fab,
a.md-button.md-primary.md-fab,
.md-button.md-default-theme.md-primary.md-raised,
.md-button.md-primary.md-raised,
.md-button.md-default-theme.md-primary.md-fab,
.md-button.md-primary.md-fab,
md-progress-linear.md-default-theme .md-bar,
md-progress-linear .md-bar {
    background-color: #b00000!important;
    color: #FFF!important;
}

md-toolbar.md-default-theme:not(.md-menu-toolbar) a,
md-toolbar:not(.md-menu-toolbar) a {
    color: #b00000!important;
    padding: 10px 15px;
    margin-left: 10px;
    border-radius: 100px;
    text-decoration: none;
    background: rgba(255, 255, 255, .85);
}

md-toolbar.md-default-theme:not(.md-menu-toolbar) a:hover,
md-toolbar:not(.md-menu-toolbar) a:hover {
    background: rgba(255, 255, 255, 1);
}

md-progress-linear.md-default-theme .md-container,
md-progress-linear .md-container {
    background-color: rgba(0, 0, 0, .1);
}