/* 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 */
* { text-shadow: none; }
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; }
.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: 15px; }
.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; }

/* Override default jquery style */
.ui-header .ui-title { text-align: left; margin: 0 0 1% 0 !important; white-space: normal; overflow: visible; }
.ui-footer .ui-title { text-align: left; margin: 8px 0 0 0 !important; padding: 3px; }
.ui-br { border: 0; }
.ui-checkbox-on .ui-icon, .ui-radio-on .ui-icon { background-color: #777; }
.ui-checkbox input, .ui-radio input { display: none; }
.ui-checkbox.maxDisabled .ui-checkbox-off .ui-btn-inner { color: #CCC; }
.ui-mobile .ui-page-active { overflow: hidden; }

.ui-btn-active,
.ui-page-theme-a .ui-btn:hover,
html .ui-bar-a .ui-btn:hover,
html .ui-body-a .ui-btn:hover,
html body .ui-group-theme-a .ui-btn:hover,
html head + body .ui-btn.ui-btn-a:hover,
.ui-page-theme-a .ui-btn:active,
html .ui-bar-a .ui-btn:active,
html .ui-body-a .ui-btn:active,
html body .ui-group-theme-a .ui-btn:active,
html head + body .ui-btn.ui-btn-a:active,
.ui-navbar .ui-btn.ui-btn-active { background: #f6f6f6; border-color: #ddd; color: #333; text-shadow: none; }

.ui-content { padding: 0.5em 1em; }
.ui-table-reflow.ui-responsive { display: table !important; width: 100%; }
.ui-table-reflow.ui-responsive td .ui-btn-inner { border: 0; }
.ui-navbar li:last-child .ui-btn { margin-right: 0; }
.ui-btn, label.ui-btn { font-weight: normal; }

/* 
    Accordion css 
*/

.accordionRow >  p.gridRowHeader ,
.accordionRow >  label.gridColumnHeader 
{ 
    cursor: pointer;  
    border: none;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    margin: 0;
    width: auto; 
    position:relative;
} 
div[data-questiontype=imagechoicegrid] div.accordionRow > p.gridRowHeader, 
div[data-questiontype=choicegrid] div.accordionRow > p.gridRowHeader,
div[data-questiontype=starratinggrid] div.accordionRow > p.gridRowHeader
 { 
    padding: 10px;
}

 
.accordionRow >  p.gridRowHeader:after , 
.accordionRow >  label.gridColumnHeader:after 
 {
    content: '\002B'; 
    font-weight: bold;
    float: right;
    font-weight: bolder;
    margin-left: 5px;
    font-size: 15px;
    right : 10px;
}

div[data-questiontype=imagechoicegrid] div.accordionRow > p.gridRowHeader:after, 
div[data-questiontype=choicegrid] div.accordionRow > p.gridRowHeader:after,
div[data-questiontype=starratinggrid] div.accordionRow > p.gridRowHeader:after{  
    top : 15px ;
}

div[data-questiontype=hybridgrid] div.accordionRow > p.gridRowHeader:after {  
    top : 2px ; 
}

.accordionRow > p.active:after,
.accordionRow > label.active:after  {
    content: "\2212"; 
    font-weight: bolder;
    font-size: 15px;
}

.accordionRow > div.accordionRowContent  { 
    margin:0 auto; 
    max-height: 100%;
    overflow: hidden; 
    display:none;  
    width:98%;
    padding:5px;

}
.accordionRow > p.gridRowHeader > span,.accordionRow > p.gridRowHeader > div,
.accordionRow > label.gridColumnHeader > div {
    font-size: smaller;
    font-weight: bolder;
    width: 100%;  
    overflow: hidden;
    text-overflow: ellipsis;  
    white-space: nowrap; 
}
 div.ui-checkbox.maxDisabled {
    opacity: 0.5;
}