/*
<color name="colorPrimary">#EEC303</color>
<color name="colorPrimary_translu">#CCEEC303</color>
<color name="colorPrimaryDark">#616365</color>
<color name="colorAccent">#69BE28</color>

<color name="green">#69BE28</color>
<color name="red">#ba0000</color>
<color name="white">#ffffff</color>

<color name="generalBg">#eeeeee</color>
<color name="artBg">#616365</color>
<color name="lignt_blue">#e2f2ff</color>
<color name="light_green">#cfffce</color>
<color name="light_red">#efdada</color>
<color name="light_gray">#e0e0e0</color>

<color name="baseTextColor">#7f7f7f</color>

<color name="pix_orange">#F57D09</color>
 */

/*noinspection CssUnknownTarget*/
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

#web_app_container
{
    position:absolute;
    width:100%;
    min-height:100%;
    background-color: #2D2D2D;
}

#web_app
{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    font-family: 'Roboto', sans-serif;
    font-weight: 400;

    font-size: 18px;

    line-height: normal;

    background: #eeeeee;

    max-width: 800px;
    margin:auto;
    overflow: hidden;
}
#web_app nav.navbar
{
    font-weight: 500;
    text-align: center;
    padding:20px;
    color:#2D2D2D;
    background:#EEC303;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#web_app thead th
{
    color:#2D2D2D;
}
#web_app nav.navbar div.navbarItem
{
    display:inline-block;
    width:33%;
    vertical-align: middle;
}
#web_app nav.navbar div.back
{
    text-align: left;
    font-size: 38px;
    /*line-height: 38px;*/
}
#web_app nav.navbar div.menu
{
    text-align: right;
    font-size: 28px;
}
#web_app nav.navbar a
{
    color:#2D2D2D;
    text-decoration: none;
    border:none;

    min-width: 40px;
    display: inline-block;
    text-align: center;

    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#web_app nav.navbar div.menu a
{
    text-align: right;
}
#web_app nav.navbar a:hover
{
    color:#fff;
}

/* MENU */
#app_menu_container
{
    position:relative;
    float:right;
}
#app_menu
{
    position: absolute;
    right:0px;
    margin:0;
    padding:0;
    list-style-type: none;
    background:#EEC303;

    /*border-left: 1px solid #2D2D2D;
    border-bottom: 1px solid #2D2D2D;*/

    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);

    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#app_menu.visible
{
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
#app_menu li a
{
    text-decoration: none;
    border-bottom: none;
    color: #2D2D2D;
    display: block;
    padding:15px 20px;
    /*border-top:1px solid #2D2D2D;*/

    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    -ms-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    transition: background-color 0.3s;
}

#app_menu li a:hover
{
    background-color: #2D2D2D;
    color:#fff;
}

#web_app .region-highlighted
{
    margin:0;
}
#web_app .messages
{
    margin:0;
}
#web_app .layout-container
{
    max-width: 100%;
    width:100%;
}
#web_app #content
{
    min-height:600px;
}
#web_app #content.video_media,
#web_app #content.audio_media
{
    background-color:#2D2D2D;
}

#web_app ul.listview
{
    list-style:none;
    margin:0;
    padding:10px;
}
#web_app ul.listview li.noAnswer a
{
    -webkit-background-size: 25px !important;
    background-size: 25px !important;
    background: url("../images/question-blue.png") no-repeat right 10px center;
}
#web_app ul.listview li.correctAnswer a
{
    -webkit-background-size: 25px !important;
    background-size: 25px !important;
    background: url("../images/question-green.png") no-repeat right 10px center;
}
#web_app ul.listview li.wrongAnswer a
{
    -webkit-background-size: 25px !important;
    background-size: 25px !important;
    background: url("../images/question-red.png") no-repeat right 10px center;
}
#web_app ul.listview a
{
    display:block;
    text-decoration: none;
    border:none;
    width:100%;
    overflow: hidden;
    color: #7f7f7f;
}
#web_app ul.listview .thumb
{
    display:block;
    float:left;
    width:60px;
    min-height:60px;
    background-color: #e0e0e0;
}
#web_app ul.listview .thumb img
{
    width:100%;
    line-height: 0;
    display:block;

}
#web_app ul.listview .name
{
    display:block;
    float:left;
    line-height: 58px;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:calc(100% - 60px);

    border-top:1px solid transparent;
    border-bottom:1px solid transparent;

    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#web_app ul.listview li
{
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}
#web_app ul.listview li.last
{
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}
#web_app ul.listview li a:hover .name,
#web_app ul.listview li a:focus .name
{
    border-top:1px solid #e0e0e0;
    border-bottom:1px solid #e0e0e0;
}

#web_app .poiContainer
{
    background-color:#616365;
    line-height: 0;
    text-align: center;
    min-height:600px;
}


#web_app .poiContainer .text-with-bg-container
{
    background-position-x: center;
    background-size: contain;
    background-repeat: no-repeat;
    min-height:600px;
}
#web_app .poiContainer .text-container
{
    line-height: normal;
    background-color: rgba(255,255,255,0.8);
    text-align: left;

    padding:20px 2%;
    font-weight: lighter;
    min-height:600px;
}
#web_app .poiContainer .text-container p
{
    margin:0 0 20px 0;
}
#web_app .poiContainer .text-container ul,
#web_app .poiContainer .text-container ol
{
    margin-top: 20px;
    margin-bottom: 20px;
}

#web_app .poiContainer img
{
    margin:0 auto;
}
#web_app .poiContainer a#showQuestion
{
    display:block;
    line-height: normal;
    text-decoration: none;
    border:none;
    font-size: 32px;
    text-align: center;
    background-color:#5db6ff;
    padding:20px 10px;
    color:#fff;

    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    -ms-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    transition: background-color 0.3s;
}
#web_app .poiContainer a#showQuestion:hover
{
    background-color:#616365;
}
#web_app .poiContainer .anwerSummary
{
    display:block;
    line-height: normal;
    text-align: center;
    padding:20px 10px;
    color:#fff;
}
#web_app .poiContainer .anwerSummary .questionTitle
{
    font-size:20px;
}
#web_app .poiContainer .anwerSummary .questionAnswer label
{
    margin:10px auto 0 auto;
}
#web_app .poiContainer .anwerSummary.correctAnswer
{
    background-color: #69be28;
}
#web_app .poiContainer .anwerSummary.wrongAnswer
{
    background-color: #ba0000;
}
#web_app .poiContainer img
{
    display:block;

}
#web_app .poiContainer audio
{
    width:100%;
    background-color:#69BE28;
}

/* info pages */
#web_app .page-content
{
    padding:20px;
}
#web_app .page-content .page-item
{
    margin-bottom:40px;
}
#web_app .page-content .label
{
    color: #c9a400;
    margin-bottom:20px;
}
#web_app ul.partners
{
    margin:0;
    padding:0;
    list-style:none;
}
#web_app ul.partners li
{
    margin: 40px 0;
}
#web_app ul.partners .partner-container
{
    display:block;
    text-decoration: none;
    border-bottom: none;
    color:#616365;
    text-align: center;
    width:100%;

    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -ms-transition: color 0.3s;
    -o-transition: color 0.3s;
    transition: color 0.3s;
}
#web_app ul.partners a.partner-container:hover,
#web_app ul.partners a.partner-container:focus
{
    color:#EEC303;
}
#web_app ul.partners .partner-container img
{
    max-height: 100px;
    display:block;
    margin:0 auto;
    line-height:0;
}

#web_app #dev-by
{
    margin-top:200px;
}
#web_app #dev-by a
{
    color:#F57D09;
    text-decoration: none;
    border-bottom: none;
}
#web_app #dev-by,
#web_app #version-info
{
    font-size:12px;
    width: 100%;
    text-align:center;
}


#web_app .app-button
{
    display:block;
    color:#fff;
    background-color: #c9a400;
    padding:10px;
    margin-bottom: 10px;
    text-decoration: none;
    border: none;
    text-align: center;

    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
#web_app .app-button.neutral
{
    background-color:#7f7f7f;
}
#web_app .app-button:hover,
#web_app .app-button:focus
{
    background-color: #EEC303;
}
#web_app .app-button.neutral:hover,
#web_app .app-button.neutral:focus
{
    background-color: #616365;
}

/* question overlay */
#web_app #question-overlay
{
    display:none;
    line-height: normal;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.8);
}
#web_app #question-overlay.visible
{
    display:block;
}
#web_app #question-overlay #question-content
{
    position: absolute;
    left:50%;
    top:200px;
    padding:20px;
    background:#eeeeee;
    width:80%;
    max-width:500px;
    text-align: left;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
#web_app #question-overlay #question-content .question-label
{
    color:#c9a400;
    font-weight:400;
    font-size:24px;
    width:100%;
    margin-bottom:20px;
}
#web_app form.answers label.answer
{
    margin:15px 0;
    width:100%;
    padding:0;
    font-weight:400;

}
#web_app form.answers label.answer input
{
    display:inline-block;
    width:20px;
    vertical-align: top;
    font-weight:400;
    margin-top:4px;
    margin-right:4px;

}
#web_app form.answers label.answer div.label
{
    display:inline-block;
    width:calc(100% - 24px);
    vertical-align: top;
    font-weight:400;
}

/* QUIZ PAGE */
#web_app table.quiz-expo .cell-label
{
    width:calc(100% - 20px);
}
#web_app table.quiz-expo .cell-score
{
    width:20px;
    text-align: center;
}
#web_app table.quiz-expo tr
{
    border:none;
}
#web_app table.quiz-expo th
{
    background:#EEC303;
    border:none;
    padding: 10px;
}
#web_app table.quiz-expo.success th
{
    background:#66c010;
}
#web_app table.quiz-expo.failure th
{
    background:#bc0000;
}

#web_app table.quiz-expo tr td
{
    padding: 0;
    background:#e2f2ff;
    border:none;
    border-bottom:1px solid #eeeeee;
}
#web_app table.quiz-expo tr.wrongAnswer td
{
    background:#efdada;

}
#web_app table.quiz-expo tr.correctAnswer td
{
    background: #cfffce;
}

#web_app table.quiz-expo tr td .container
{
    text-decoration: none;
    border:none;
    display:block;
    padding:20px 10px;
    color: #7f7f7f;
}
#web_app table.quiz-expo tr td .container .poi-title
{
    font-weight: 700;
    margin-bottom:10px;
    text-decoration: underline;
}
#web_app table.quiz-expo tr td .container .question-title
{
    font-size:18px;
    margin-bottom: 5px;
}

#web_app table.quiz-expo tr td .iconContainer.noAnswer
{
    color:#58b5ff;
}
#web_app table.quiz-expo tr td .iconContainer.wrongAnswer
{
    color:#ba0000;
}
#web_app table.quiz-expo tr td .iconContainer.correctAnswer
{
    color:#69BE28;
}


body.overflowHidden
{
    overflow: hidden;
}