/* GENERAL STYLES */
body { font-family:verdana,arial,sans-serif; font-size:90%; margin:2rem; padding:0; }
h1,
h2 { font-size:140%; margin-top:2rem; }
form { max-width:1400px; }
ul li p { margin:0; }
li { padding:.5rem 10px; }
a:hover, a:focus { text-decoration:none; }
.fileInfo { font-size:80%; font-style:italic; white-space:nowrap; }
.addInfo { font-size:80%; font-style:italic; }
.systemText { color:#666666; font-style:italic; }
.ready { color:#025900; }
.errorText { color:#FF0000; font-weight:bold; }
img.errorIcon { height:20px; vertical-align:middle; width:20px; }
.nowrap { white-space:nowrap; }
.boxLabel { background-color:#333333; color:#FFFFFF; font-weight:bold; padding:10px; }
.backToTop { font-size:80%; font-style:italic; margin-top:3rem; }
.clearBefore::before, .clearAfter::after { clear:both; content:""; display:block; height:0; visibility:hidden; }


/* PADDLE LOCK ICONS */
.lockOption { display:inline-block; height:30px; padding-left:5px; vertical-align:middle; width:30px; }
.unlocked svg { fill:#B1B1B1; }
.unlocked svg rect,
.unlocked svg path { stroke:#B1B1B1; }


/* EXPANDABLE DETAILS BOX (e.g., show directions)  */
details { font-size:90%; padding-left:1rem; }
details summary { border:0; color:#333333; cursor:pointer; margin:0; padding:0; width:fit-content; }
details .toggleArea { border:1px solid #A9A9A9; border-width:1px 3px 3px 1px; margin:0; padding:0.5rem 2rem; }
details .toggleArea .examples { border-top:1px solid #CCCCCC; margin-top:1rem; }
details .toggleArea .examples > p:first-child { font-style:italic; text-transform:uppercase; }
details[open] summary { margin-bottom:5px; }
details[open] .toggleArea { margin-bottom:3rem; }



.sectionInstructions { margin-bottom:3em; }
.radioOps { margin:4px 10px; }
.radioOps span { display:inline; white-space:nowrap; }
.radioOps label { padding-right:10px; }
.question { font-size:110%; margin:1em .5em; }
.question textarea { margin:2em .5em 0; width:44%; }
.question .viewInfo { background-color:#F0F0F0; border:1px solid #CCCCCC; margin:0 .5em; min-height:60px; padding:.5em; }
.question .viewInfo p { font-size:80%; margin:0 0 1em; }
.question .viewInfo ul { font-size:80%; margin:0 0 1em 2em; padding:0; }
.question .viewInfo ul li { margin-bottom:1em; padding:0 5px; }
.question .viewInfo .examples { margin-bottom:1.5em; padding:0 10px 0 25px; }
.question .viewInfo .examples p:first-child { font-size:90%; font-style:italic; margin-left:-25px; text-transform:uppercase;}
.question .attachDirections .backgroundImage { background:url("/images/directionsArrow.jpg") no-repeat top left; float:right; margin:0; padding:0 0 0 27px; width:49%; }
.question .attachDirections .viewInfo { margin:0; }
.question .attachDirections textarea { float:left; margin:0 1% 0 0; }
.question .progressChoices { list-style:none; margin:1em 2em 3em; padding:0; }
.question .progressChoices li { border-bottom:1px solid #CCCCCC; }
.question .progressChoices li p { float:left; width:65%; }
.question .progressChoices li .radioOps { float:right; width:30%; }
.question .progressChoices li:first-child { border-top:1px solid #CCCCCC; margin-top:0; }
.question .progressChoices li:nth-child(even) { background-color:#F0F0F0; }
@media (max-width:80em) {
    .question .progressChoices li p { width:55%; }
    .question .progressChoices li .radioOps { width:40%; }
}
@media (max-width:40em) {
    .question .progressChoices li p { float:none; width:100%; }
    .question .progressChoices li .radioOps { float:none; width:100%; }
    .question textarea { width:100%; }
    .question .attachDirections .backgroundImage { background:none; display:block; float:none; padding:0; width:100%; }
    .question .attachDirections .viewInfo { margin-bottom:1em; }
    .question .attachDirections textarea { float:none; margin:0; }
}

.button { margin-top:2.5rem; }  /* form submit button */
.button input { background-color:#333333; border:1px solid #000000; border-radius:5px; color:#FFFFFF; cursor:pointer; filter:drop-shadow(2px 2px 2px #D9D9D9); font-size:1rem; padding:8px; }
.button input:hover, .button input:focus { background-color:#000000; }

.answer { background-color:#F0F0F0; border:1px solid #CCCCCC; margin:1rem 0.5rem; padding:0.5rem; }
.answer ul:only-child { margin:0; padding:0 1.6rem; }



/* MESSAGE BOX (typically used to display query errors) */
div.msgBox { background-color:#FEFDFA; border:1px solid #000000; padding:1em; margin:2.5em 1em; font-size:120%; }
div.msgBox :first-child { margin-top:0; }
div.msgBox :last-child { margin-bottom:0; }
div.msgBox p { font-weight:bold; }
div.msgBox p img { height:20px; padding-right:10px; vertical-align:middle; width:20px; }
div.msgBox ul { margin:0.5em 0 0 45px; padding:0; }
div.msgBox li { background:none; margin-bottom:0.25em; padding:0; }
div.msgBox.error p:not(.normal) { color:#FF0000; }                             /* custom styling -- when msgBox is also flagged as an error box -- only applies to paragraph tags not marked as normal */
div.msgBox .normal,
div.msgBox.normal p { color:#000000; font-style:normal; font-weight:normal; }  /* custom styling -- when msgBox is also flagged as a normal box */


/* TYPICALLY USED TO DISPLAY FORM DIRECTIONS */
.infoBox { background-color:#F0F0F0; border:1px solid #CCCCCC; margin:1rem 0; padding:0.5rem; }
.infoBox.directions { font-size:0.9rem; }
.infoBox.directions > p { margin:1rem 0 0; }
.infoBox.directions > p:first-child { margin-top:0; }
.infoBox.examples { font-size:0.9rem; padding:0 15px; }
.infoBox.examples > p:first-child { background-color:#333333; color:#FFFFFF; font-weight:bold; margin:0 -15px; padding:10px; }

.infoBox.belowFieldResponses { background-color:#FFFFFF; font-size:0.8rem; margin:0 15px 3rem; padding:1rem; }  /* custom styling -- for PI responses that appear below the university summary SAPR questions */
.infoBox.belowFieldResponses p { font-style:italic; }
.infoBox.belowFieldResponses p.boxLabel { font-style:normal; margin:-1rem -1rem 1rem !important; }
.infoBox.belowFieldResponses p:last-child { margin-bottom:0.5rem; }
.infoBox.belowFieldResponses.singleLine p { margin:0; }


/* CURRENTLY DESIGNED FOR THE SUBMISSION FORMS (typically used to split response box and the corresponding examples) */
.layout_split { display:grid; gap:0 40px; grid-template-areas:"main side"; grid-template-columns:1fr 1fr; }
.layout_split textarea { box-sizing:border-box; margin:1rem 0; width:100%; }
.layout_split .sideBar { grid-area:side; }  /* used when side bar content isn't displayed in order */
@media (max-width:800px) {
    .layout_split { grid-template-areas:"side" "main"; grid-template-columns:1fr; }
}


/* STANDARD DATA TABLES */
.dataTable { margin:2em 0; }
.dataTable table { border:1px solid #CCCCCC; border-collapse:collapse; position:relative; }
.dataTable thead { position:sticky; top:0; z-index:10; }
.dataTable.nonStick thead { position:relative; }  /* override for small tables */
.dataTable tr { vertical-align:top; }
.dataTable th,
.dataTable td { border:1px solid #CCCCCC; padding:6px; }
.dataTable th { background-color:#F0F0F0; font-weight:bold; text-align:center; }
.dataTable th span { font-style:italic; font-weight:normal; }
.dataTable th a { color:#000000; }
.dataTable .systemText { text-align:center; }
.dataTable .noReport { color:#B9B9B9; font-style:italic; }
.dataTable table.centerAll td { text-align:center; }
.dataTable table.centerAll .left { text-align:left; }
.dataTable table.centerAll .right { text-align:right; }


/* PROJECTS BROKEN DOWN BY STRATEGIC GOAL */
.goalBreakdown h2 { font-size:1rem; }
.goalBreakdown h2:first-child { margin-top:1rem; }
.goalBreakdown .dataTable { margin-top:0; }
.goalBreakdown table { background-color:#FFFFFF; }
.goalBreakdown td { min-width:100px; text-align:center; vertical-align:top; }
.goalBreakdown td:nth-child(2) { max-width:500px; text-align:left; }


/* STICKY HEADER (e.g., project being viewed) */
#stickyContent { background-color:#FFFFFF; border-bottom:1px solid #A6A6A6; display:none; left:0; padding:20px; position:fixed; top:0; width:100%; z-index:50; }
#stickyContent div { border-right:1px solid #CCCCCC; display:inline-block; margin-right:8px; padding-right:8px; }
#stickyContent div:last-child { border:0; margin:0; padding:0; }
@media (max-width:640px) {
    #stickyContent { font-size:90%; }
    #stickyContent div { border-width:0; display:block; margin:0 0 3px; padding:0; }
}


/* CURRENTLY SELECTED PROJECT (typically contains content useful for sticky headers) */
.projInfo { color:#333333; font-style:italic; margin:1em 0 2em; }
.projInfo span:not(.plain) { color:#666666; font-weight:bold; }