/* ver.5.260000 */
@viewport{zoom: 1.0; width: extend-to-zoom;}
@-ms-viewport{width: device-width;} /* this is needed for IE10 snap mode */

html {
    -webkit-text-size-adjust: 100%; /*Prevent font scaling (iPhone) in landscape while allowing user zoom*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; /*https://css-tricks.com/box-sizing/*/
    overflow: auto;
}
html, body {
    height: 100%;
    overflow-x: hidden; 
}
body {
    font-family: Arial,  sans-serif, Verdana, Helvetica;
    font-size: 100%; 
    margin: 0;
    padding: 0;
    text-align: center;
}
#container {
    width: 100%;
    margin: 0 auto;
    text-align: left;
}
header, main, footer {width: 100%;}
header, main, footer, header > *, main > *, footer > *, .logo {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    min-width: 0;
} 
.content {
    min-height: fit-content;
    min-width: 300px;
    max-width: 1200px;
    width: 100%;
    margin: .5em auto;
}
.progressbar {
    background-color: #ccc;
    border: none;
    border-radius: 0;
    height: 12px;
    margin: 0;
    width: 100%;
}
.progressbar table {border-collapse: collapse; border-spacing: 0; margin: 0;}
.progressbar table td {text-align: center; padding:0;}

header .content,
footer .content {
    display: flex;
    padding: 0.5em;
    align-items: center; 
    margin: 0 auto;
    text-align: center;
    width: 100%;
}
/* Prevent overflow collisions */
header .inner1, header .inner3,
footer .inner1, footer .inner3 {
    overflow: visible;
    gap: 0.5rem;
    padding-inline: 0; 
}
header .menu {
    flex: 0 0 32px;
    width: 32px;
    max-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

main {display:block;}
main .content {
    max-width: min(95%, 1200px);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    margin: 1em auto;
    /* min-height: 60%; */
    padding: 1rem;
    width: auto;
}
main .auth {margin: 0 auto;}

.navbox {margin: 2em 0 1em;}

footer {padding-bottom: .25em;}
footer .content {font-size: .85em;}

a:link {
    color: #0000EE; /*deep blue*/
    text-decoration: none;
}
a:hover {
    color: #0040FF; /*blue*/
    text-decoration: underline;
}
a:visited, a:active {
    color: #003366; /*dark blue*/
    text-decoration: none;
}

/* radio button size */
input[type=radio], input[type=checkbox] {
    height: 1rem; 
    width: 1rem;
}
/* drop the other specify box to next line (by input name) */
input[name='_QCountry_OOth'] {
    display: block;
    margin: 0.25rem 2rem;
    width: 15em;
    height: 1.2em;
}
/*prevent iOS from styling input fields and buttons */
input[type="button"],input[type="submit"]{
    appearance: none;
    -webkit-appearance: none;
    border-radius: 5px;
}
/* disable numeric input spinner control */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="submit"]{width: auto !important;} /*expand to max width*/
/* adds space for codes */
input[id$="_X0"] {margin-top: 16px !important; margin-left: 1.25em !important;} label[for$="_X0"] > .mrMultipleText {vertical-align:middle !important; padding-left: 0.25em;} 
head span.mrBannerText + br, span.mrBannerText + br:has(+ form) {display: none;} /*hides the line break at the top for end of interview text*/
table.center {
	margin-left:auto;
	margin-right:auto;
}

/* override other styles to make videos responsive */
video {
    width: 100% !important;
    height: auto !important;
}
@media (min-width: 1024px) { /* Applies only for desktops, used for videos that are natively portrait */
    .vidportrait {
        width: auto !important; 
        height: 90% !important;
    }
}

/* misc classes ------------------------------------------------ */
.accrating {font-size: 1rem;}
.center, .centered {text-align:center;}
.fixed {
    display: block;
    position: sticky;
    top: 0;
    width: inherit;
    background-color: white; /* Adjust as needed */
    z-index: 10; /* Ensure it's above other content */
    padding: 10px; /* Adjust padding as needed */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add shadow */
}
.fwn {font-weight: normal;}
.hint {
    display: none;
    color: dimgray;
    font-size: .75em;
    font-style: italic;
    text-align: center;
}
.instruct {
    background-color: transparent;
    font-style: italic;
    margin: 0px;
    padding: 0px;
}
.onerem {font-size: 1rem;}
.tapmic.hint {display: none;} 

/* mrInterview ------------------------------------------------ */
/*.mrBannerText {} */
.mrDropdown {font-size: 1em !important;}
.mrEdit {
    font-family: Verdana, Arial, Helvetica, sans-serif !important; 
    font-size: 1em !important; 
    background-color: white !important;
}
/*
.mrErrorText {}
.mrGotoDropdown {}
.mrGridCategoryText {}
.mrGridQuestionText {}
.mrListBox {}
*/
.mrNext, .mrPrev, .mrFirst, .mrLast, .mrStop, .mrGoto {
    border: 1px solid gray;
    background-color: white;
    color: #646464;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.15em;
    margin: 0 .125em;
    min-height: 40px;
    min-width: 90px;
    max-width: 150px;
    padding: .5em;
}
.mrNext:hover, .mrPrev:hover, .mrFirst:hover, .mrLast:hover, .mrStop:hover, .mrGoto:hover {
    color: black; 
    outline: none; /* hide dotted outline in Firefox */
}
/* drop the other specify box to next line (applies to all other specify boxes)
.mrOtherEdit {
    display: block;
    margin: 0.25rem 2rem;
    width: 15em;
    height: 1.2em;
}*/
/* .mrOtherText {} */
.mrProgressText {
    font-size: .65em;
    color: gray;
}
/* .mrQuestionText {} */
.mrQuestionTable {BORDER-COLLAPSE: collapse}
.mrQuestionTable input[type=radio], input[type=checkbox] {
    margin: auto;
    padding: auto;
    margin-left: auto;
    margin-right: auto;
}
/* .mrSingle, .mrMultiple {} */
/* adds space between categories */
.mrSingleText, .mrMultipleText {padding-bottom: 0.25rem;}

@media only screen and (max-device-width: 737px) {
    @viewport{width: 100vw;}
    @-ms-viewport{width: 100vw;}
    .content {width: 100vw;}
    main {margin: 0 auto;}
    main .content {
        border-radius: 0;
        box-shadow: none;
        margin: 0 auto;
    }
    /* drop the other specify box to next line (for smaller devices only) */
    .mrOtherEdit {
        display: block;
        margin: 0.25rem 2rem;
        max-width: 11em;
        height: 1.2em;
    }	
}