/* ver.5.260000.260527b -- dependent on MAIN-2026.css */ /* https://truckownerstudy.com */
:root {
/* COLORS ======================= */ 
--clr-primary: #002855;
--clr-secondary: #00A896;
--clr-accent: #f0f6f4;

--clr-header-bg: #002855;
--clr-header-text: white;

--clr-main-bg: white;
--clr-main-text: #333;
/* --clr-alt-text: #1c857f; */
--clr-alt-text: teal;


--clr-btn-bg: #00A896;
--clr-btn-text: white;
--clr-btn-hover: #028090;
--clr-btn-hover-text: white;

--clr-progbar-bg: #ccc;
--clr-progbar-fill: #00A896;
--clr-progbar-hover: #028090;

/* LAYOUTS ====================== */     
/* header -------------------------------------------- */
--header-display: block;            /* block / none */
--header-bg-img: none; 
--header-flex-directiom: row;       /* row / column */
/* header left --------------------------------------- */
--header-inner1-display: flex;      /* flex / none */
--header-inner1-logo-display: flex; /* flex / none */
--header-inner1-logo-bg-img: none;  /* none / url("../images/davis_logo_white.png");  url("../images/test.svg"); */
--header-inner1-menu-display: none; /* none / flex */
--header-inner1-padding: 0 0 0 1rem;
/* header taglines ----------------------------------- */
--header-inner2-bg-img: none;       
--header-inner2-display: flex;      /* flex / none */
--header-tagline1-display: block;   /* block / none */
--header-tagline2-display: block;    /* none / block */
/* header right -------------------------------------- */
--header-inner3-display: none;      /* flex / none */
--header-inner3-logo-display: none; /* none / flex */
--header-inner3-logo-bg-img: none;  /* none / url("../images/davis_logo_white.png"); */
--header-inner3-menu-display: none; /* none / flex */
--header-inner3-padding: 0 1rem 0 0;
/* footer -------------------------------------------- */
--footer-display: none;            /* block / none */
--footer-bg-img: none; 
--footer-flex-directiom: row;       /* row / column */
/* footer left --------------------------------------- */
--footer-inner1-display: flex;      /* flex / none */
--footer-inner1-logo-display: none; /* none / flex */
--footer-inner1-logo-bg-img: none;  /* none / url("../images/davis_logo_black.png"); */
--footer-inner1-padding: 0 0 0 1rem;
/* footer content ----------------------------------- */
--footer-inner2-bg-img: none;
--footer-inner2-display: flex;      /* flex / none */
--footer-tagline1-display: block;   /* block / none */
--footer-tagline2-display: block;   /* block / none */
/* footer right -------------------------------------- */
--footer-inner3-display: flex;      /* flex / none */
--footer-inner3-logo-display: none; /* none / flex */
--footer-inner3-logo-bg-img: none;  /* none / url("../images/davis_logo_black.png"); */
--footer-inner3-padding: 0 1rem 0 0;

/* OPTIONAL LAYOUT EXAMPLES ====================== */    
/* BASIC - No logos, no taglines */
/* --header-inner1-display: none; --header-tagline1-display: none; --header-tagline2-display: none; --header-inner3-display: none; */
/* TAGLINES ONLY - No logos, center Taglines only */
/* --header-inner1-display: none; --header-inner3-display: none;  --header-tagline-margin-l: auto;  --header-tagline-margin-r: auto; */
/* CENTER TAGLINE + LEFT LOGO */
/* --header-inner1-logo-display: flex; --header-inner1-logo-display: flex; --header-inner1-logo-bg-img: url("../images/davis_logo_white.png"); */
/* CENTER TAGLINE + RIGHT LOGO */
/* --header-inner1-logo-display: none; --header-inner3-logo-display: flex; --header-inner3-logo-bg-img: url("../images/davis_logo_white.png"); */
/* CENTER TAGLINE + BOTH LOGO */
/* --header-inner1-logo-display: flex; --header-inner1-logo-bg-img: url("../images/davis_logo_white.png"); --header-inner3-logo-display: flex; --header-inner3-logo-bg-img: url("../images/davis_logo_white.png"); */
/* LEFT TAGLINE + RIGHT LOGO */
/* --header-inner1-display: none; --header-inner3-logo-display: flex;  --header-tagline-margin-l: 1rem; --header-inner3-logo-bg-img: url("../images/davis_logo_white.png");  */
/* LEFT LOGO + RIGHT TAGLINE */
/* --header-inner1-logo-display: flex;  --header-inner1-logo-bg-img: url("../images/davis_logo_white.png"); --header-inner3-display: none; --header-tagline-margin-r: 1rem; */
/* CENTER LOGO above CENTER TAGLINE */
/* --header-flex-directiom: column; --header-inner1-padding: 0; --header-inner1-logo-display: flex;  --header-inner1-logo-bg-img: url("../images/davis_logo_white.png"); */
/* CENTER LOGO below CENTER TAGLINE */
/* --header-flex-directiom: column-reverse; --header-inner1-padding: 0; --header-inner1-logo-display: flex;  --header-inner1-logo-bg-img: url("../images/davis_logo_white.png"); */
}

.icon-shield {
  --shield-fill: var(--clr-secondary);
  --shield-stroke: white;
  --icon-color: white;
}
/* inner shield color */
.shield-fill {fill: var(--shield-fill);}
/* border */
.shield-stroke {
  fill: none;
  stroke: var(--shield-stroke);
  stroke-width: 28;
  stroke-linejoin: round;
}
.icon {fill: var(--icon-color);}

.svg-bullet{
    /* background-color: var(--clr-alt-text);
    border-radius: 50%; */
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    /* margin-top: 2px; */
    /* fill: var(--clr-alt-text); */
}
.svg-bullet.circle{
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
}

/*-------------------------------------------*/

body {background-color: #F9F9FB;}

header {
    display: block;  /*fallback*/
    display: var(--header-display); 
    position: static;
    top: 0; 
    background-color: #002855; /*fallback*/
    background-color: var(--clr-header-bg);
    color: white; /*fallback*/
    color: var(--clr-header-text);
    background-size: cover;
    background-image: none; /*fallback*/
    background-image: var(--header-bg-img);
} 
header .content {
    /* display: none; */
    flex-direction: row; /*fallback*/
    flex-direction: var(--header-flex-directiom);
    background-size: cover;
}
/* Left side container */
header .inner1 {
    display: none; /*fallback*/
    display: var(--header-inner1-display);
    /*padding: .25rem 1rem; /*fallback*/
    padding: var(--header-inner1-padding);  /*0505*/
    margin-left: 0.75em;
    padding: 0; 
    align-items: center;
    justify-content: flex-start; 
    flex: 1 1 0; 
}
header .inner1 .menu {
    display: none; /*fallback*/
    display: var(--header-inner1-menu-display);
}
header .inner1 .logo {
    display: none; /*fallback*/
    display: var(--header-inner1-logo-display);
    background-image: var(--header-inner1-logo-bg-img);
    width: 100px;
    max-width: 140px;
    height: 56px;
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
header .logo img {
    max-height: 56px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}
/* tagline */
header .inner2 {
    display: flex; /*fallback*/
    display: var(--header-inner2-display);
    min-height: 1rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    flex: 0 0 auto;
    background-image: var(--header-inner2-bg-img);
}
header .taglines {
    margin-left: var(--header-tagline-margin-l);
    margin-right: var(--header-tagline-margin-r);
}
header .taglines h1 {
    display: block; /*fallback*/
    display: var(--header-tagline1-display);
    font-size: 1.5rem;
    flex: 1;
}
header .taglines h2 {
    display: block; /*fallback*/
    display: var(--header-tagline2-display);
    font-size: 1rem;
}
/*optional -align left*/
/* .taglines h1, .taglines h2 {text-align: left; width: 100%;} */

/* Right side container */
header .inner3 {
    display: none; /*fallback*/
    display: var(--header-inner3-display);
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 0; 
    /*padding: .25rem 1rem; /*fallback*/
    padding: var(--header-inner3-padding);  /*0505*/
    margin-right: 0.75em;
    padding: 0;
}
header .inner3 .menu {
    display: none; /*fallback*/
    display: var(--header-inner3-menu-display);
}
header .inner3 .logo {
    display: none; /*fallback*/
    display: var(--header-inner3-logo-display);
    background-image: var(--header-inner3-logo-bg-img);
    width: 100px;
    max-width: 140px;
    height: 56px;
    flex: 0 0 auto;
}
/* header .inner3 > :last-child {margin-right: 0.5em;} */


/*260045 -----------------------*/
header .content {
    gap: 0;
}
header .inner1 .logo {max-width: 60px;}
header .inner2 {
    text-align: left;
    flex-direction: row;
}
header .inner2 {
    text-align: left;
    flex-direction: row;
}
header .inner2.taglines {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 1rem;
}
header .inner2.taglines h1 {
    flex: 1 1 auto;
    text-align: left;
    margin: 0;
}
header .inner2.taglines h2 {
    flex: 0 0 auto;
    text-align: right;
    margin: 0;
    white-space: nowrap;
    padding-right: 1em;
    margin-right: 2em;
}
main {padding-bottom: 0;}
main .content {
    position: relative; /*260526*/
    margin: 0 auto 0;
    /* background-position: center; */
    background-repeat: no-repeat;
    background-position: top right;
    /* background-position: right top; */
    /* background-position: 80% top; */
    background-size: cover;

    /* background-image: url("../images/260045-login-bg2.png"); */
    /* background-image: url("https://dim7aws.davisresearch.com/260045/images/260045-login-bg2.png"); */
    background-image: url("https://truckownerstudy.com/260045/images/260045-login-bg2.png");
    /* min-height: 85vh; */
    min-height: auto;
    border-radius: 0;
    color: var(--clr-primary);

    /* creates space for the truck area */
    /* padding-top: clamp(180px, 22vw, 320px); */
}
main .hero {
    font-size: 2rem;
    font-weight: bolder;
    /* margin: 2rem; */
    /* margin: 0 2rem 2rem; */
    margin: 1.5rem 2rem 0;
    position: relative;
    z-index: 2;
    max-width: 60%;
}
main .hero hr {width: 85px; margin: .25rem auto .25rem 0; border:none; border-top: 3px solid var(--clr-secondary)}
main .inner1 {margin-top: clamp(140px, 18vw, 200px);}
.incentive {color: var(--clr-alt-text);}
.intro {width: 60%;}
main .inner1, main .inner2, main .inner3 {
    background-color: white;
    padding: 1rem;
    font-weight: bold;
}
main .inner1 {border-radius: 10px 10px 0px 0px; margin-bottom: auto;}
.cards{
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin: 1rem;
}
.card{
    /* height: 200px; */
    flex: 1 1 300px;
    /* background-color: #f1f1f1; */
    padding: .25em;
    border-radius: 5px;
}
.accent {background-color: var(--clr-accent);}
.bullet-list{
    list-style: none;
    padding: 0;
    margin: .5em .25em;
}
.bullet-list li{
    display: flex;
    /* align-items: flex-start; */
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.circle {
    border-radius: 50%;
    border: 2px solid var(--clr-primary);
}
.inner2 .bullet-list li{
    align-items: flex-start;
}
main .inner1 {padding-bottom: .25em;}
main .inner2 {padding-top: .25em;}
.login-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    background-color: var(--clr-accent);
    border-radius: 5px;
    padding: 1em;
}
.login_id.card, .submit_btn.card {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.mrEdit,
.mrNext {
    width: 70%;
    max-width: 300px;
    height: 48px;
    font-size: 1.25rem !important;
}
.login_id .mrEdit {width:100%; padding-left: .5rem; }
.submit_btn.card input[type="Submit"] {
    width: 70% !important;
}
.login_id input[name="_QSMAuth_Q_DIProps"] {display:none;}
main .mainftr {display: flex; background-color: white; gap:.25em}
.mainftr.cards {background-color: white;margin:0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
main .mainftr > * {padding: 1em; font-size: .75em; color: #666;}
.mainftr .inner1 {border-radius: 0;}
.mainftr.cards .card:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mainftr.cards .card:nth-child(2) > * {text-align: left;}
@media (max-width: 768px) {
    main .content {
        background-size: cover;
        background-position: top right;
        /* background-image: url("../images/260045-login-bg3.png"); */
        /* background-image: url("https://dim7aws.davisresearch.com/260045/images/260045-login-bg3.png"); */
        background-image: url("https://truckownerstudy.com/260045/images/260045-login-bg3.png");
        /* background-image: none; */
        max-width: 100%;
        margin: 0;
    }
    main .inner1 {margin-top: clamp(1em, 10vw, 120px);}
    main .hero {max-width: 90%;}
    main .intro {width: 100%;}
    header .inner2.taglines h2 {font-size: .7rem; text-wrap: balance; padding-bottom: .25em; margin-right: 2em;}
}
@media (max-width: 488px) {
    header .inner2.taglines h2 {margin: 0.25em; padding-right: 6em;}
}
.mainftr.cards .card:nth-child(1) {display:flex; gap:.5em;}
/*260045 -----------------------*/


/* progress bar ====================================== */
.progressbar {background-color: var(--clr-progbar-bg);}
.progressbar:hover {background-color: var(--clr-progbar-hover);}
.progressbar tr:first-child:has(td:nth-child(2)) td:first-child {background-color: var(--clr-progbar-fill);}
header .progressbar {display:none;}
main .progressbar, footer .progressbar, .progbarscale {display:none; width: 100%;}
/* ------- similar to old set-up ------------------------- */
/* main .progressbar, main .progbarscale {width: 150px; font-size: .75em;}
main .progressbar {display:block; height:0.85em; margin: 1em auto 0; border-radius: 3px; border: 1px solid #666;}
main .progbarscale {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin: 0 auto;
    color: #666;
}
.progbarscale span:first-child {justify-self: start;}
.progbarscale span:nth-child(2) {justify-self: center;}
.progbarscale span:last-child {justify-self: end;} */
/* ------- similar to old set-up ------------------------- */
/* progress bar ====================================== */

main .content {
    /* color: var(--clr-main-text); */
    font-size: 1rem;
    /* margin-bottom: 0.25em; */ 
}
main .inner1 .logo, main .inner3 .logo {
    display: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 0.25em;
    margin: 0.25em;
    height: 35px;
}
/* OPTIONAL - unccomment to include logo in main. inner1=top, inner3=btm */
/* main .inner1 .logo {
    display: block; 
    background-image: url("../images/davis_logo_black.png");
    margin-bottom: 1em;
} */
/* main .inner3 .logo {
    display: block; 
    background-image: url("../images/davis_logo_black.png"); 
    margin-top: 2em;
} */

.navbox, .hint {text-align: left;}

footer {
    display: block;  /*fallback*/
    display: var(--footer-display); 
    /* position: sticky;  */
    bottom: 0; 
    color: #666; /*fallback*/
    background-image: none; /*fallback*/
    background-image: var(--footer-bg-img);
    /* background-image: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)), var(--header-bg-img); */
    /* background-image: url("https://images.pexels.com/photos/3063411/pexels-photo-3063411.jpeg"); */
    background-size: cover;
}
/* OPTIONAL - mirror header ------------ */
/* footer {background-color: #002855; background-color: var(--clr-header-bg); color: var(--clr-header-text);} footer .progressbar {display: block;} */
footer .content {
    display: flex;
    flex-direction: row; /*fallback*/
    flex-direction: var(--footer-flex-directiom);
    padding-top: 4px;
}
/* Left side container */
footer .inner1 {
    display: none; /*fallback*/
    display: var(--footer-inner1-display);
    padding: .25rem 1rem; /*fallback*/
    padding: var(--footer-inner1-padding); 
    align-items: center;
    justify-content: flex-start; 
    flex: 1 1 0; 
}
footer .inner1 .logo {
    display: none; /*fallback*/
    display: var(--footer-inner1-logo-display);
    background-image: var(--footer-inner1-logo-bg-img);
    width: 100px;
    max-width: 140px;
    height: 56px;
    flex: 0 0 auto;
}
footer .logo img {
    max-height: 56px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
}
/* tagline */
footer .inner2 {
    display: none; /*fallback*/
    display: var(--footer-inner2-display);
    min-height: 1rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    flex: 0 0 auto;
    flex-direction: column;
    background-image: var(--footer-inner2-bg-img);
}
/* Right side container */
footer .inner3 {
    display: none; /*fallback*/
    display: var(--footer-inner3-display);
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 0; 
    padding: .25rem 1rem; /*fallback*/
    padding: var(--footer-inner3-padding); 
}
footer .inner3 .logo {
    display: none; /*fallback*/
    display: var(--footer-inner3-logo-display);
    background-image: var(--footer-inner3-logo-bg-img);
    width: 100px;
    max-width: 140px;
    height: 56px;
    flex: 0 0 auto;
}
footer .inner3 > :last-child {
    margin-right: 0.5em;
}

/* taglines tablet - balanced wrapping */
@media (max-width: 900px) {
    /* .taglines {max-width: 45ch;} */
    .taglines > *, footer .inner2 > * {text-wrap: balance;}
    /* .taglines h1 {font-size: 1.5rem;}
    .taglines h2 {font-size: 1rem;}  */
    /* header .inner1 .logo {display:none;} */
    /* header .inner3 .logo {display:none;} */
    /* header .inner1 .logo {width:75px;} */
    /* header .inner2.taglines {padding-left: 1em;} */
    header .inner3 .logo {width:75px;}
    footer .inner1 .logo {width:75px;}
    footer .inner3 .logo {width:75px;}
    /* footer .inner2 > * {max-width: 60ch;} */
}
/* taglines phone */
@media (max-width: 600px) {
    .taglines {max-width: 20ch; align-items: left;}
    .taglines h1 {font-size: 1rem; padding-top: .5rem;}
    .taglines h2 {font-size: .7rem; text-wrap: balance;}
    /* push to next row */
    /* header .inner2 {
        order: 10;   
        flex: 0 0 100%;  
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    } */
    /* header .inner1 .logo {display:none;} */
    /* header .inner1 {justify-content: center; padding-left: .05em;} */
    /* header .inner1 .logo {width:50px;} */
    /* header .inner3 .logo {display:none;} */
    /* header .inner3 {justify-content: center; padding-right: .05em;} */
    header .inner3 .logo {width:50px;}
    /* footer .inner1 .logo {width:50px;} */
    footer .inner3 .logo {width:50px;}
    header .inner2.taglines {flex-direction: column; max-width: 100%;}
    header .inner2 {flex:1;}
}

/* mrInterview ------------------------------------------------ */
.mrQuestionText {
    color: #333; /*fallback*/
    color: var(--clr-main-text);
    font-size: 1.25rem;
    font-weight: bold;
}
.mrGridQuestionText .mrQuestionText,
.accheader .mrQuestionText,
.mrSingleText, .mrMultipleText {
    font-size: 1rem;
    font-weight: normal;
    vertical-align: text-top;
}
.mrSingleText, .mrMultipleText {padding: 0.125em 0 .5em;}
/*
.mrBannerText {}
.mrDropdown {}
.mrEdit {}
.mrErrorText {}
.mrGotoDropdown {}
.mrGridCategoryText {}
.mrGridQuestionText {}
.mrListBox {}
.mrOtherText {}
.mrOtherEdit {}
*/

/* style all NAV buttons the same */
.mrNext, .mrPrev, .mrFirst, .mrLast, .mrStop, .mrGoto {
    border-radius: 5px; 
    border: 3px solid #00A896; /*fallback*/
    border: 3px solid var(--clr-btn-bg);
    background-color: #00A896; /*fallback*/
    background-color: var(--clr-btn-bg);
    color: white; /*fallback*/
    color: var(--clr-btn-text);
    text-align: center;
    /* do not set width, allow to re-size */
}
.mrNext:hover, .mrPrev:hover, .mrFirst:hover, .mrLast:hover, .mrStop:hover, .mrGoto:hover {
    background-color: #028090; /*fallback*/
    background-color: var(--clr-btn-hover);
    color: white; /*fallback*/
    color: var(--clr-btn-hover-text);
}

@media only screen and (max-width: 375px) {
    .mrNext, .mrPrev {font-size: 0.8rem;}
}

/*instructions*/
.instruct {
    color: green;
    font-style: italic;
}
/*interviewer only text*/
.intvr {color: blue;}
/*error messages*/
.errmsg {
    color: red; 
    font-weight: bold;
}
.onerem {font-size: 1rem;}