/* Responsive layout */
@media (max-width: 1580px) {
    html { font-size: 14px; }
}

@media (max-width: 980px) {
    html { font-size: 14px; }
}

@media (max-width: 640px) {
    html { font-size: 14px; }
}

@media (max-width: 35em) {
    .ui-table-reflow.ui-responsive td { height: 45px; font-size: 1em; }
    .ui-table-reflow.ui-responsive td  .ui-checkbox {  position: absolute; left: 45%; }
    .ui-table-reflow.ui-responsive td .ui-btn-inner { padding-top: 20px; }
    .dataTables_wrapper .dataTables_paginate { width: 180px; }
    .dataTables_wrapper .dataTables_paginate span { display: none; }

    .dataTables_wrapper .filter-bar { width: 100%; margin: 0; }
    .dataTables_wrapper .filter-bar .button-group { width: 100%; }
    .dataTables_wrapper .filter-bar .button { display: block; clear: both; margin: 10px 0; padding: 8px !important; }
}

@media (min-width: 35em) {
    .dataTables_wrapper .dataTables_paginate { width: 400px; }
}

/*img, video, canvas { max-width: 100%; }*/

/* PAGE ITEMS */
p { margin: 1% 0; }
table { border-collapse: collapse; border-spacing: 0; }

div .clear { clear: both; }

.preview-mode-banner { color: #FFFFFF; background-color: #EB6725; height: 38px; line-height: 38px; box-sizing: border-box; border-bottom: 3px solid #FF9300; padding: 0 35px; }
.preview-mode-banner__message { font-family: sans-serif; font-size: 14px; padding: 0 12px; }
.icon-test { background: url("../Images/generalIcons15x15.png") no-repeat -15px -105px; height: 15px; width: 15px; display: inline-block; margin-bottom: -3px; }

.testmodeheader { background-color: #4b6c9e; color:#ffffff; width: 98%; padding: 2px 5px 0 5px; border: 1px outset black; margin: 3px auto 3px auto; font-size: .80em; }
.testmodeheader a:link, .testmodeheader a:visited { text-decoration: none; color:#ffffff; font-weight:normal; }
.testmodeheader a:hover { text-decoration:underline; }

.pageHeader, .pageFooter { background-color: transparent; background-image: none; border: 0 solid #505050; margin-top: -5px; }
.backlink-container {
    position: fixed;
    bottom: 0;
    border-radius: 10px 0 0 0;
    background-color: #0f6cb4;
    padding: 10px 40px;
    color: #EBEBEB;
    font-size: 14px;
    left: 0;
    width: 100%;
    z-index: 10;
}
.backlink {
    color: #EBEBEB;
    font-size: 14px;
}
.languageSelector { padding: 0 1em; }
.languageSelectorTop { margin: 0 1em 0.5em 1em; }
.languageSelectorBottom { margin: 0.5em 1em 0 1em; }

.progressBarTop { margin-bottom: 1%; }
.progressBarBottom { margin-top: 1%; }
.progressBarBackground { width: 75% !important; height: 2em !important; border: 1px solid gray; margin: 0 auto; }
.progressBarBar { text-align: right; height: 100%; font-size: 1em; background-color: #5e87b0; color: #fff; }
.progressBarBar .progressBarPercentage { line-height: 2em; margin-right: 3px;  text-shadow: 0 1px 3px #000000 !important; }

.errorMessageContainer .errorMessage { padding: 1% 2%; vertical-align: middle; }
.pageErrors { margin: 0 0 1% 0; }
.pageTitle { margin-bottom: 1em; }
.pageSingleMessage { text-align: center; }

/**** Navigation Bar ****/
.navigationBar { margin: 0 1em; text-align: center; vertical-align: middle; padding-bottom: 15%; }
.navigationBar .buttonContainer { vertical-align: middle; display: inline-block; }
.navigationBar .buttonContainer a:not(.ui-btn) { margin: 0px 1%; }

/**** Shortcuts Bar ****/
.shortcutsBar { margin: 1% 2%; }

/**** Print responses  ****/
.printResponsesButtonContainer { margin: 2%; }
.printResponsesButtonContainer div { font-weight: bold; font-size: 12.5px; }

.questionBlock { padding: 1px 0; }
.questionBlock .questionBackground { margin: 1%; overflow-x: auto; overflow-y: hidden; }
.questionBlock .questionBackground .questionContainer { margin: 0 auto 0 auto; }
.questionBlock .questionContent .inputDiv .calendarIcon { position: relative; float: right; top: -34px; left: -10px; }
.questionBlock fieldset .dateTimeContent .calendarIcon { position: relative; left: -18px; }
.questionNameContainer { margin: 1% 1% 0 1%; }
.questionTextContainer { margin: 0; padding: 1%; }
html[dir=rtl] .questionTextContainer { text-align: right; }
.questionContent { padding: 1% !important; }
.questionContent .ui-field-contain { border: 0px; }
.questionContent .resetButton { text-align: right; cursor: pointer; }