body {
    font-size: 14px;
}

.navbar.navbar-inverse {
    border-radius: 0;
    border-bottom: none;
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px rgba(33, 33, 33, 0.46);
}

body.ahd-quiz .navbar.navbar-inverse {
    box-shadow: none;
}

.navbar.navbar-fixed-bottom {
    box-shadow: 0 -4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px rgba(33, 33, 33, 0.46);
}

.navbar-header .navbar-toggle.profile-photo-small {
    padding: 4px 0;
    width: 36px;
    height: 36px;
}

.nav-center .nav-pills-icons {
    width: 100%;
}

.navbar .navbar-brand {
    padding-left: 24px;
}

.nav-pills>li {
    width: 25%;
    cursor: pointer;
}

.nav-pills>li+li {
    margin-left: 0;
}

.nav-pills > li i {
    padding: 0;
}

.navbar-fixed-bottom {
    z-index: 1020;
}

.content,
.main-panel > .content {
    /*overflow:hidden;*/
    width: 100%;
    position: relative;
    margin: 72px 0 123px 0;
    padding: 0;
}

/** Fix for older Safari versions for top margin bug **/
div:not(.main-panel) > .content {
    margin: 0;
}

.text-danger-important {
    color: #f44336!important;
}

.card .card-footer .stats .category {
    color: #666666;
    font-size: 1.2em;
}

.card .card-footer .stats-quiz {
    line-height: 22px;
    color: #666666;
    font-size: 1.1em;
}
/*
a .material-icons {
    vertical-align: top;
}
*/


/*
.material-icons {
    display: block!important;
}
*/

.card-image.card-image-detail {
    position: relative;
    min-height: 158px;
}

.card-image.card-image-detail > div:first-child {
    position: absolute;
    z-index:1;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.card-image-detail-incentive-container {
    position: absolute;
    z-index:9999;
    color: #FF9900;
    font-size: 1.825em;
    font-weight: 300;
    right:6px;
    bottom: 0;
    padding-bottom: 8px;
}

.x-scoll-flow  > .row {
    overflow-x: auto;
    white-space: nowrap;
}
.x-scoll-flow  > .row > .col-xs-4 {
    display: inline-block;
    min-width: 300px;
    float: none;
}

th.narrow {
    width: 1px;
}
.table-highscore tr td:nth-child(1),
.table-highscore tr td:nth-child(3) {
    text-align: center;
}

.table-highscore tbody tr {
    cursor: pointer;
}

.quiz-header {
    background-color: #EEEEEE;
    border-radius: 0;
    border-bottom: none;
    top: 72px;
    padding: 0;
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px rgba(33, 33, 33, 0.46);
    z-index: 1025;
    display: none;
}

.quiz.quiz-additional-solution,
.quiz.quiz-answer,
.quiz.quiz-question {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-size: 1.3em;
    font-weight: 300;
    line-height: 1.5em;
    text-align: center;
}
.quiz.quiz-question {
    font-weight: bold;
}
.quiz.quiz-additional-solution {
    text-align: left;
}

.progress.quiz-progress {
    margin-bottom: 0;
}

.quiz-question-addition-data {
    margin-top: 12px;
}

.quiz-question-addition-data,
.quiz.quiz-result .card-content,
.quiz.quiz-result .card-header {
    text-align: center;
}

.quiz-additional-solution a,
.quiz-additional-solution a:hover {
    color: rgba(0,0,0, 0.87);
}
.quiz-additional-solution a:hover {
    text-decoration: underline;
}

.card>.card-avatar {
    max-width: 92px;
    max-height: 92px;
}

.welcome-message-container {
    background:url('../img/welcome-bg.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: 266px 70px;
}

.welcome-message-container-v2 {
}

.v2-category-img-bg {
    background-image: url('../img/v2demo/card-2.jpeg' );
    background-size:cover;
    background-repeat: no-repeat;

    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);

}


.welcome-message-container-v2>div,
.welcome-message-container>div {
    font-size: 1.825em;
    font-weight: 300;
    line-height: 1.5em;
    padding-top: 20px;
    padding-bottom: 20px;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}

.card.card-answer>.card-content{
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.card.card-correct {
    border-color: #4caf50;
    border-style: solid;
    border-width: 3px;
    margin: 21.5px 0;
}

.card.card-incorrect {
    border-color: #f44336;
    border-style: solid;
    border-width: 3px;
    margin: 21.5px 0;

}

.bold-text {
    font-weight: bold;
}

.btn {
    white-space: normal!important;
}

li.quiz-step.quiz-step-open {
    color: #555555;
}

li.quiz-step.quiz-step-wrong {
    color: #f44336;
}

li.quiz-step.quiz-step-correct {
    color: #4caf50;
}

.card .card-header.card-header-icon i.fa {
    line-height: 33px;
    font-size: 2em;
}

.media-center {
    text-align: center;
}

.media-center > video,
.media-center > img {
    margin: auto;
}

.card.card-answer.is-selected {
    border-color: #ff9800;
    border-style: solid;
    border-width: 3px;
    margin: 21.5px 0;
}

.card.card-answer.is-selected>.card-content>.quiz-answer {
    /*font-weight: bold;*/
}

#loader-container {
    text-align: center;
    color: black;
    position: fixed;
    width: 100%;
    height:100%;
    background-color: #282828;
    opacity: 0.8;
    align-items: center;
    top: 0;
    z-index: 1028;
}

.loader {
    margin: 0 auto;
    color: white;
    font-size: 2.2em;
}

.modal .modal-header .close i {
    font-size: 2em;
}

.close-layer {
    z-index: 1030;
}

.alert.alert-danger {
    background-color: #f44336; }
.alert.alert-warning {
    background-color: #ff9800; }
.alert.alert-success {
    background-color: #4caf50; }
.alert.alert-info {
    background-color: #00bcd4; }
.alert.alert-primary {
    background-color: #9c27b0; }
.alert.alert-rose {
    background-color: #e91e63; }


.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover
{
    cursor: pointer;
}

.card-sub-title:before {
    content: 'DEMO INSTANZ'
}

.form-group.is-focused .form-control,
.form-control, .form-group .form-control {
    background-image: linear-gradient(#ff9800, #ff9800), linear-gradient(#D2D2D2, #D2D2D2)
}

.quiz-solution-image,
.quiz-question-image {
    width: 70%!important;
}

.footer-button {
    display: block;
    cursor: pointer;
    border-radius: 4px;
    color: white;
    background-color: #ff9800;
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4);
}

.footer-button.inactive {
    background-color: #cccccc;
    cursor: not-allowed;
}


.footer-button a {
    line-height: 24px;
    text-transform: uppercase;
    font-size: 0.9em;
    font-weight: 500;
    /* min-width: 100px; */
    text-align: center;
    color: #FFFFFF;
    transition: all .3s;
    border-radius: 4px;
    position: relative;
    display: block;
    padding: 10px 15px;
    user-select: none;
}

.footer-button a:active, .footer-button a:hover {
    outline: 0;
}

.footer-button i {
    display: block;
    font-size: 2.4em;
    padding: 0;
    color: #FFFFFF;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.ahd-configuration legend {
    margin-top: 24px;
}

.card-login img {
    width: auto;
    max-width: 100%;
}

.card .dropdown img {
    width: auto;
}

.modal-content .modal-header {
    padding-top: 0;
}
.modal-content .modal-body {
    padding-top: 0;
}

.slim-btn-remove,
.slim-btn-upload {
    opacity: 0!important;
    display: none!important;
}

.form-group .help-error {
    margin-top: 0;
    color : #f44336;
    font-size: 0.8em;
    display: none;
}

.form-group.has-error .help-error {
    display: block;
}

.sidebar .logo, .off-canvas-sidebar .logo {
    text-align: center;
}

.label {
    font-size: 11px;
    letter-spacing: 1px;
}

.label-top-three {
    font-size: 14px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius : 20px;
}

.label.label-warning.label-highscore-rank {
    font-size: 9px;
    border-radius: 12px;
    padding: 3px 6px;
}

.highscore-profile-image {
    width: 36px;
    height: 100%;
    position: relative;
}

.highscore-profile-image>div {
    position: absolute;
    bottom: -8px;
    right: -4px;
}

.card-top-three {
    margin-top: 52px;
}
.card-profile .card-content.card-content-top-three {
    margin-top: 0;
}

.card .card-title.card-title-top-three {
    margin-bottom: 9px;
}

.description, .card-description, .footer-big p,
.card .category:not([class*="text-"]) {
    color: #3C4858;
}

.sidebar img.sidebar-logo {
    width: 230px;
    height: 90px;
}

nav img.header-logo-icon {
    width: 32px;
    height: 32px;
}

body.ahd-auth-forgot-password .container p.category,
body.ahd-auth-token .container p.category,
body.ahd-auth-login .container p.category {
    padding-left: 24px;
    padding-right: 24px;
}


.card .card-footer {
    margin-top: 0px;
}

.block-btn-col-spacer {
    margin-top: -24px;
    margin-bottom: 24px;
}

@media (min-width: 1200px) {
    .container {
        width: 970px;
    }
    body.ahd-auth-forgot-password .container,
    body.ahd-auth-token .container,
    body.ahd-auth-login .container {
        width: 1170px;
    }
}

.btn-link:hover,
.btn-link {
    background-color: #FFFFFF!important;
    color: #3C4858!important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    margin: 0 1px;
    padding: 10px 30px;
}


@media (max-width: 768px) {
    .navbar-absolute {
        padding-top: 2px;
    }
    .navbar {
        padding-bottom: 2px;
    }

    .navbar-absolute.quiz-header {
        padding: 0;
    }

    .navbar-header .navbar-toggle.profile-photo-small {
        padding-top: 6px;
        width: 32px;
        height: 32px;
    }

    .nav-pills > li i {
        padding: 5px 0;
    }

    /*
    a .material-icons {
        vertical-align: sub;
    }
    */

    .main-panel > .content {
        margin: 60px 0 86px 0;
    }

    .quiz-header {
        top: 56px;
    }
    .quiz.quiz-additional-solution,
    .quiz.quiz-answer,
    .quiz.quiz-question {
        font-size: 1.0em;
    }

    .table-responsive.table-categories {
        overflow-x: visible;
        min-height: 0;
    }

    .table-responsive.table-categories table,
    .table-responsive.table-categories thead,
    .table-responsive.table-categories tbody,
    .table-responsive.table-categories th,
    .table-responsive.table-categories td,
    .table-responsive.table-categories tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .table-responsive.table-categories thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .table-responsive.table-categories tr {
        /*border: 1px solid #ccc;*/
    }

    .table-responsive.table-categories td {
        /* Behave  like a "row" */
        border: none;
        /*border-bottom: 1px solid #eee;*/
        position: relative;
        padding-left: 50%!important;
        white-space: normal;
        text-align:left;
    }

    .table-responsive.table-categories td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 12px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }

    /*
    Label the data
    */
    .table-responsive.table-categories td:before { content: attr(data-title); }
}

.dropdown-menu li a:hover, .dropdown-menu li a:focus, .dropdown-menu li a:active {
    background-color: #ff9800;
    color: #FFFFFF;
}

.chartist-tooltip {
    position: absolute;
    display: inline-block;
    opacity: 0;
    min-width: 5em;
    padding: .5em;
    background: #ff9800;
    color: #FFFFFF;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    text-align: center;
    pointer-events: none;
    z-index: 1;
    -webkit-transition: opacity .2s linear;
    -moz-transition: opacity .2s linear;
    -o-transition: opacity .2s linear;
    transition: opacity .2s linear; }
.chartist-tooltip:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top-color: #ff9800; }
.chartist-tooltip.tooltip-show {
    opacity: 1; }

.ct-area, .ct-line {
    pointer-events: none; }
.ct-chart svg {
    touch-action: auto;
}

/** This prevents zooming on input:focus on iOS devices **/
.form-control {
    font-size: 16px!important;
}
/** Sepcial IE11 handling - otherwise layout breaks **/
@media all and (-ms-high-contrast:none)
{
    .input-group {
        display: block;
    }
}

.game-item-image-header {
    width: 100%;
    height: 180px;
    background-position: center;
    background-repeat: no-repeat;
}

.scroller {
    overflow: hidden;
    margin-right: 15px;
    margin-left: 15px;
}

.circle-loader {
    margin: 0 0 30px 10px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-left-color: #228ae6;
    animation-name: loader-spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.circle-loader,
.circle-loader:after {
    border-radius: 50%;
    width: 8em;
    height: 8em;
}

.checkmark {
    display: none;
}
.checkmark.draw:after {
    animation-duration: 1.2s;
    animation-timing-function: ease;
    animation-name: checkmark;
    transform: scaleX(-1) rotate(135deg);
}
.checkmark:after {
    opacity: 1;
    height: 4em;
    width: 2em;
    transform-origin: left top;
    border-right: 2px solid #396f3a;
    border-top: 2px solid #396f3a;
    content: '';
    left: 2em;
    top: 4em;
    position: absolute;
}

.load-failure:before, .load-failure:after {
    display: block;
    content: "";
    height: 2px;
    background: #c92a2a;
    width: 50%;
    position: absolute;
    top: 4em;
    left: 2em;
}
.load-failure:before {
    transform: rotate(45deg);
}
.load-failure:after {
    transform: rotate(-45deg);
}

.load-complete {
    -webkit-animation: none;
    animation: none;
    transition: border 500ms ease-out;
}
.load-complete.load-success {
    border-color: #396f3a;
}
.load-complete.load-failure {
    border-color: #c92a2a;
}

@keyframes loader-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
    }
    20% {
        height: 0;
        width: 2em;
        opacity: 1;
    }
    40% {
        height: 4em;
        width: 2em;
        opacity: 1;
    }
    100% {
        height: 4em;
        width: 2em;
        opacity: 1;
    }
}