@charset "utf-8";
/* CSS Document */

/*Theme: CORE
Description: Comprehensive Outcome Research Evaluation
Author: Wisconsin Department of Justice
*/

/* ==================== */
/* TABLE OF CONTENTS    */
/* ==================== */
/* 1. RESETS */
/* 2. COLORS */
/* 3. SITE ELEMENTS */
/* 4. UNIVERSAL STYLES */
/* 5. TYPOGRAPHY */
/* 6. FORMS & INPUTS */
/* 7. BUTTONS */
/* 8. HEADER */
/* 9. NAVIGATION */
/* 10. ERROR HANDLING */
/* 11. CONTENT AREAS */
/* 12. SIDENAV */
/* 13. TABLES */
/* 14. SURVEY TABLES */
/* 15. ACCESSIBILITY */
/* 16. FOCUS STYLES */
/* 17. ANIMATIONS */
/* 18. JQUERY UI FIXES */
/* 19. FOOTER */
/* 20. RESPONSIVE */

/* ==================== */
/* 1. RESETS            */
/* ==================== */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, canvas, progress {margin: 0; padding: 0; border: 0; vertical-align: baseline;}

article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}

textarea {overflow: auto;}
textarea, text, textfield, input, select {line-height: normal;}
textarea, text, textfield, input, input [type*="date"], input [type*="month"], input [type*="time"], input [type*="week"], select {-webkit-padding-start:0;}

small {font-size:85%;}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

button, select {text-transform: none;}
button, input, optgroup, select, textarea {color:inherit; font:inherit; margin:0;}

figure{position:relative}
figure img{width:100%}

/* ==================== */
/* 2. COLORS            */
/* ==================== */

/* NAVY:#25356E				37,53,110 */
/* SKY BLUE:#27A9E1			39,169,225 */
/* TEAL:#01B7C6				1,183,198 */
/* AQUAMARINE:#2798A0		39,152,160 */
/* PURPLE:#7B4A8E			136,97,169 */
/* BLOOD RED:#821138		224,64,98 */
/* GRAY:#AFBBC5				175,187,197 */
/* LIGHT GRAY:#EFEFEF		239,239,239 */
/* VALID GREEN:#367258		54,114,88 */
/* ERROR RED:#C82B25		200,43,37 */
/* WARNING YELLOW:#D2C564	210,197,100	*/

/* ==================== */
/* 3. SITE ELEMENTS     */
/* ==================== */

* {margin:0; padding:0;}
html, body {height:65%;}
html, body {background:#FDFDFD; font-size:20px; font-family: 'chameronregular', serif; font-weight:normal; line-height:1.375em; color:#25356E;}

a {cursor:pointer; text-decoration:underline; background-color: transparent; color:#005ea2;}
a:hover, a:active {color:#7B4A8E;}

/* Visited links - only for content, not navigation */
a:visited {color:#54278f;}

/* Remove visited style from navigation elements */
nav a:visited,
#cssmenu a:visited,
.sidemenu a:visited,
.bjiaAdmin a:visited,
.btn a:visited,
button a:visited,
footer a:visited,
.breadcrumb a:visited,
[role="navigation"] a:visited {
    color: #005ea2; /* Keep original link color */
}

/* Navigation links - no underline */
nav a,
#cssmenu a,
.sidemenu a,
.bjiaAdmin a {
    text-decoration: none;
}

img {border:none; height:auto; max-width:100%;}
object, embed, figure {max-width:100%; border:none;}

*, *:after, *::before {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box}

::selection {background:#7B4A8E; color:#FFF;}
::-moz-selection {background:#7B4A8E; color:#FFF;}

/* ==================== */
/* 4. UNIVERSAL STYLES  */
/* ==================== */

.wrapper {width:100%; max-width:80%; margin:0 auto; position:relative;}
.left, .right {float:none;}
img.left, img.right {padding:.5em; display:block;}
.center {display:block; margin:0 auto; position:relative;}
.textCenter {display:flex;justify-content:center;align-items:center;}
.clearfix {clear:both;}
.clearfix:after {visibility: hidden; display: table; font-size: 0; content: " "; clear: both; height: 0;}

.centeredTitle {text-align:center;}
.nowrap { white-space: nowrap;}
.left-align { text-align:left}
.not-active {pointer-events: none; cursor: default; display:block;}
/* Accessible color for disabled sidenav links */
.sidemenu .not-active,
.sidemenu a.not-active,
.sidemenu .hrefLink.not-active {
    color: #595959 !important;
}
.active {pointer-events: all;}

i[class*="fa fa-"] {vertical-align:middle; padding:0 .5em;}
.fa-minus-circle {color: red;}
.fa-plus-circle {color: #D0D0D0;}

p {word-break:break-all;}

/* ==================== */
/* 5. TYPOGRAPHY        */
/* ==================== */

b, strong {font-family: 'chameronbold', serif;}
i, em {font-family: 'chameronregular', serif; font-style:italic;}
b i, b em, strong i, strong em, i b, i strong, em b, em strong {font-family: 'chameronbold', serif; font-style:italic;}

h1, h2, h3, h4, h5, h6 {font-weight:normal; line-height:1.0625em; margin:.125em 0; font-family: 'chameronbold', serif; width:100%;}
h1 {font-size:1.75em;}
h2 {font-size:1.625em;}
h3 {font-size:1.5em;}
h4 {font-size:1.375em;}
h5 {font-size:1.25em;}
h6 {font-size:1.125em;}

ul {list-style-type:none;}
ul, ol {padding:0 0 0 1.5em; margin:0;}
ul li, ol li {padding:0 0 0 .25em; margin:4px;}

/* ==================== */
/* 6. FORMS & INPUTS    */
/* ==================== */

fieldset {border: none; padding: 0; margin: 0;}
fieldset.neutral-fieldset {border: none; padding: 0; margin: 0; min-width: 0;}

legend {padding: 0; margin-bottom: 10px; font-weight: normal;}
legend.neutral-legend {padding: 0; margin: 0; margin-bottom: 10px; font-weight: normal; width: 100%; display: block;}

label {font-size:.75em; width:100%;}

span.check-title label {
    font-size: 1em;
}

.required:after {content:'*'; color:#C82B25; font-size:1.25em;}

textarea, text, textfield, input, select {
    background:linear-gradient(#F2F2F2, #F9F9F9); 
    border:#2798A0 solid thin; 
    padding:.25em .5em; 
    width:100%; 
    margin:0 auto .25em; 
    clear:both; 
    border-radius:.5em;
    -webkit-transition: box-shadow 0.4s; 
    -moz-transition: box-shadow 0.4s; 
    -o-transition: box-shadow 0.4s; 
    -ms-transition: box-shadow 0.4s; 
    transition: box-shadow 0.4s;
}
input.require:focus, textarea.require:focus, text.require:focus, textfield.require:focus, select.require:focus {
    color:#25356E; 
    background:#FFF;
}

select {padding:.375em .5em;}

.input-require {border:#25356E solid thin;}

.readonly-input {
    pointer-events: none; 
    border: solid thin black; 
    background: #EDEDED; 
    box-shadow: inset 0 0 8px #B9B9B9;
}

input[type="text"]:disabled, 
input[type="search"]:disabled, 
input[type="textarea"]:disabled,
select:disabled, 
input[type="checkbox"]:disabled, 
input[type="radio"]:disabled, 
input[type="button"]:disabled,
.btn[disabled] {
    border:solid thin black; 
    background:#EDEDED; 
    box-shadow:inset 0 0 8px #B9B9B9;
}

input[type="checkbox"], input[type="radio"] {
    font-size:.75em; 
    clear:none; 
    width:25px; 
    height:25px; 
    background:none; 
    float:left; 
    display:block; 
    margin:.25em 1em 0 0; 
    box-shadow:none; 
    padding:0; 
    border:none;
}

span.check-title {
    display:inline-block; 
    position:relative; 
    float:left; 
    clear:both; 
    margin:0 1% 0 0; 
    width:100%;
}

span.check-title + label {float:right; clear:none;}

.checkboxConsent {font-size: 17px; word-break:keep-all;display: inline-block;}
.termsCondns {text-decoration: underline;}
/* CORE Search Radio Button Alignment */
#coreSearch .fieldgroup {
    display: inline-flex;
    align-items: center;
    margin: 0.25em 1.5%;
}

#coreSearch .fieldgroup input[type="radio"] {
    margin: 0 0.5em 0 0;
    float: none;
}

#coreSearch .fieldgroup label {
    margin: 0;
    white-space: nowrap;
}
/* ==================== */
/* 7. BUTTONS           */
/* ==================== */

.btn, button {
    background:#01B7C6; 
    color:#25356E;
    font-family: 'chameronbold', serif; /* Make text bold */
    display:inline-block; 
    padding:.25em .75em; 
    margin:.25em auto; 
    text-align:center; 
    cursor:pointer; 
    width:100%; 
    border-radius:.5em;
    border:0;
}

.btn a, button a {color:#25356E; text-decoration:none;}

.btn:hover, .btn a:hover, .btn:active, .btn a:active, .btn:hover a, .btn:active a, 
button:hover, button a:hover, button:active, button a:active, button:hover a, button:active a {
    color:#FFF; /* Changed from #005ea2 to white for better contrast */
}

.btn:hover, button:hover {background:#25356E;}

.btnbox {width:100%; margin:.5em auto 0; position:relative;}

.btn:disabled, button:disabled {
    background:#EDEDED; 
    text-shadow:1px 1px 0 #FFF;
    pointer-events: none;
}

button.delete-alias-btn,
button.delete-dob-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
}

button.delete-alias-btn:hover,
button.delete-dob-btn:hover {
    color: #C82B25;
}
.btn.btn-delete {
    background-color: #C82B25;
    color: #FFF;
}

.btn.btn-delete:hover {
    background-color: #a02220;
    color: #FFF;
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0 0.25em;
    color: inherit;
    display: inline-block;
    vertical-align: middle;
}

.btn-icon:hover .fa-plus-circle {color: #01B7C6;}
.btn-icon:hover .fa-minus-circle {color: #C82B25;}
.btn-icon.not-active {pointer-events: none; cursor: default;}

/* ==================== */
/* 8. HEADER            */
/* ==================== */

header {padding:1em 0 .5em; background:#EFEFEF;}

#name-and-slogan {margin:0 auto; position:relative; text-align:center; width:100%;}
#logo {max-width:320px; margin:0 auto; position:relative; display:none;}
#logo img {margin:0;}
#site-name h1 {font-size:1.25em;}
#logbox {clear:both; font-size:.75em;}
#togglebox {clear:both; margin:.25em auto; display:block; text-align:center; width:100%;}

#noti_Container {position:relative; border:1px solid blue; width:16px; height:16px;}
.noti_bubble {
    position:absolute;
    top: -6px;
    right:-6px;
    padding:1px 2px 1px 2px;
    background-color: #C82B25;
    color:white;
    font-weight:bold;
    font-size:0.55em;
    border-radius:30px;
    box-shadow:1px 1px 1px gray;
}

.dot {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    color: white; 
    background-color: #C82B25;
    font-weight: bold;
    display: none;
    padding-top: 10px;
}

/* ==================== */
/* 9. NAVIGATION        */
/* ==================== */

nav {font-size:.9em; letter-spacing:1px; padding:.5em 0; width:100%;}
nav#cssmenu {padding:0; z-index:100;clear:both;}
nav ul {list-style:none; padding:0; text-align:center; margin:0;}
nav ul li, nav ul li.leaf {list-style-image:none; margin:0; display:inline-block; padding:0;}
nav a {display:block;}

#cssmenu ul, #cssmenu ul li, #cssmenu ul li a {position: relative;}
#cssmenu:after, #cssmenu > ul:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
#cssmenu #menu-button {display:none;}
#cssmenu > ul {list-style:none; padding:0 1.5em; margin:0; vertical-align:top; width:100%;}
#cssmenu > ul > li {padding:.5em; text-indent:0; display:inline-block;}
#cssmenu > ul > li.has-sub > a {padding-right: 2em;}
#cssmenu ul > li.has-sub > a:after {position:absolute; content:'\f067'; font-family: 'FontAwesome'; font-size:.85em; right:5px; padding-top:.125em;}
#cssmenu ul > li.has-sub:hover > a:after {position:absolute; content:'\f068'; font-family: 'FontAwesome'; right:5px;}
#cssmenu ul ul {left:-9999px; position:absolute; padding:.5em 0 0; text-align:left;}
/* Show submenu on hover AND keyboard focus */
#cssmenu li:hover > ul,
#cssmenu li:focus-within > ul {
    left: auto;
}#cssmenu ul ul li {height: 0; -webkit-transition: height .5s ease; -moz-transition: height .5s ease; transition: height .5s ease; z-index:100; text-indent:0;}
#cssmenu li:hover > ul > li {height:50px;}
#cssmenu ul ul li {background:#01B7C6; width:300px;}
#cssmenu ul ul li a {padding:1em 0 0 1.25em;color:#25356E; font-family: 'chameronbold', serif;} 
#cssmenu ul ul li:hover {background:#25356E; color:#FFF;}
#cssmenu ul ul li a:hover, #cssmenu ul ul li:hover a {color:#FFF;} 
/* Keyboard focus for all menu links */
#cssmenu a:focus {
    outline: 2px solid #005ea2;
    outline-offset: 2px;
}

#cssmenu ul ul li a:focus {
    outline: 2px solid #005ea2;
    outline-offset: 2px;
    color: #005ea2;
}

/* Responsive Menu */
#cssmenu.small-screen {width: 100%;}
#cssmenu.small-screen ul {width: 100%; display: none; text-align:left;}
#cssmenu.small-screen ul li {width:100%; text-indent:0;}
#cssmenu.small-screen ul ul li, #cssmenu.small-screen li:hover > ul > li {height: auto; text-indent:0;}
#cssmenu.small-screen ul li a, #cssmenu.small-screen ul ul li a {width: 100%; border-bottom: 0; padding:.5em 0;}
#cssmenu.small-screen > ul > li, #cssmenu.small-screen > ul ul > li {float: none; padding:.25em 0}
#cssmenu.small-screen ul ul, #cssmenu.small-screen ul ul ul {position: relative; left: 0; width: 100%; margin: 0; text-align: left;}
#cssmenu.small-screen ul ul li a {padding: .75em .5em .5em .75em;}
#cssmenu.small-screen ul ul ul li a {padding-left: 1em;}
#cssmenu.small-screen > ul > li.has-sub > a:after, #cssmenu.small-screen > ul > li.has-sub > a:before, #cssmenu.small-screen ul ul > li.has-sub > a:after, #cssmenu.small-screen ul ul > li.has-sub > a:before {display: none;}
#cssmenu.small-screen #menu-button {display: block; color:#005ea2; padding: .5em; cursor: pointer; font-size:1.125em; letter-spacing:2px; -webkit-transition:ease .5s;}
#cssmenu.small-screen #menu-button:hover {color:#7B4A8E;}
#cssmenu.small-screen #menu-button:after {position: absolute; top:.5em; right:0; display: block; content: '\f0c9'; font-family: 'FontAwesome';}
#cssmenu.small-screen #menu-button.menu-opened:after {content: '\f067'; font-family: 'FontAwesome'; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition:ease .5s; -moz-transition:ease .5s; -ms-transition:ease .5s; -o-transition:ease .5s; transition:ease .5s;}
#cssmenu.small-screen .submenu-button {position: absolute; z-index: 99; right: 0; top: 0; display: block; height: 46px; width: 46px; cursor: pointer;}
#cssmenu.small-screen ul ul .submenu-button {height: 34px; width: 34px;}
#cssmenu.small-screen .submenu-button:after {color:#005ea2; position:absolute; content:'\f067'; font-family: 'FontAwesome'; right:5px; top:.75em;}
#cssmenu.small-screen ul > li:hover .submenu-button:after, #cssmenu.small-screen ul ul > li:hover .submenu-button:after {color:#7B4A8E;}

.accordion-expand-holder {text-align: center; margin-left: -75%;}

/* ==================== */
/* USER MENU (HEADER)   */
/* ==================== */

#user-menu {
    font-size: .9em;
    letter-spacing: 1px;
    padding: .5em 0;
    width: 100%;
}

#user-menu ul {
    list-style: none;
    padding: 0;
    text-align: center;
    margin: 0;
}

#user-menu ul li {
    list-style-image: none;
    margin: 0;
    display: inline-block;
    padding: 0;
    position: relative;
}

#user-menu a,
#user-menu button {
    display: block;
}

#user-menu > ul > li {
    padding: .5em;
}

#user-menu ul ul {
    left: -9999px;
    position: absolute;
    padding: .5em 0 0;
    text-align: left;
    z-index: 100;
}

/* Show submenu on hover AND keyboard focus */
#user-menu li:hover > ul,
#user-menu li:focus-within > ul {
    left: auto;
    right: 0; /* Align to right edge for user menu */
}

#user-menu ul ul li {
    background: #01B7C6;
    width: 250px;
}

#user-menu ul ul li a {
    padding: 1em 0 0 1.25em;
    color: #25356E;
    font-family: 'chameronbold', serif;
}

#user-menu ul ul li:hover {
    background: #25356E;
    color: #FFF;
}

#user-menu ul ul li a:hover,
#user-menu ul ul li:hover a {
    color: #FFF;
}

/* Keyboard focus for user menu links */
#user-menu a:focus,
#user-menu button:focus {
    outline: 2px solid #005ea2;
    outline-offset: 2px;
}

#user-menu ul ul li a:focus {
    outline: 2px solid #005ea2;
    outline-offset: 2px;
    color: #005ea2;
}
/* ==================== */
/* 10. ERROR HANDLING   */
/* ==================== */

.message-container {display:block; font-size:1.125em; width:100%; text-shadow:1px 1px 0 #FFF;}

.message-error {
    background:#FFDCDD; 
    background:rgba(200,43,37,.15); 
    border:solid medium #C82B25; 
    border-radius: .5em; 
    margin:1em auto; 
    padding:1em;
}
.message-error:before {color:#C82B25; content:'\f024'; font-family:'FontAwesome'; margin-right:1em;}

.message-valid {
    background:#FFDCDD; 
    background:rgba(1, 183, 198, 0.28); 
    border:solid medium #01B7C6; 
    border-radius: .5em; 
    margin:1em auto; 
    padding:1em;
}
.message-valid:before {color:#25356E; content:'\f164'; font-family:'FontAwesome'; margin-right:1em;}

.message-warn {
    background:#FCF9DC; 
    background:rgba(210,197,100,.15); 
    border:solid medium #D2C564; 
    border-radius: .5em; 
    margin:1em auto; 
    padding:1em;
}
.message-warn:before {color:#D2C564; content:'\f071'; font-family:'FontAwesome'; margin-right:1em;}	

.errorMsg {
    font-style: italic; 
    font-weight: normal; 
    color:#C82B25; 
    border-color:#C82B25; 
    border-radius: .5em; 
    font-size:.9em;
}

.qtipster {display:inline-block; font-size:.8em; right:0; position:relative; left: 1em;}
.short-input .qtipster {position:absolute;}
.qtipster i[class*="fa fa-"] {display:inline-block; padding:0; position:absolute; margin:0; right:.1em; top:.2em;}
.qtipinfo {margin-left:-.7em;}
.short-input .qtipinfo {right:0; top:0;}
.leftQtipster {position:relative !important;}

.fa-alph {
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #C82B25;
    font-style: normal;   
}

.f-circle {
    font-family: Arial;
    font-size: .8em;
    padding-bottom: 5px;
}

/* ==================== */
/* 11. CONTENT AREAS    */
/* ==================== */

section {display:block; position:relative; width:100%;}
section#mainc {min-height:116% !important;}
#mainc {clear:both; margin:1em auto 2em; display:block; position:relative;}
#main {display: block; position: relative; width: 100%; min-height: 116% !important; clear: both; margin: 1em auto 2em;}

.login-home {width:100%; position:relative; margin:0 auto;}
.loginLink {display: inline;white-space: nowrap;}

.subhead {color:#7B4A8E; border-left:thick solid #7B4A8E; padding:0 0 0 .5em;}

.fieldcontent {width:100%;}
.fieldlabel {position:relative;}
.fieldbox {width:100%;}
.fieldbox .fieldlabel {display:-webkit-flex; display:flex; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.fieldlabel-full-width {width: 100%}
.fieldlabel.half-width, .fieldlabel-twothird {width:100%;}
.short-input {width:48%; margin:0 1%; float:left; display:inline-block; position:relative;}
.full-width {clear:both; border:#2798A0 solid thin; padding:.25em .5em; clear:both; border-radius:.5em;}
.fieldbox .fieldlabel.full-width {margin:.5em 2% .5em 1.5%;}

.half-div {width: 50%}
.short-input-adjusted {width:97%;}
.hoverHelpLabelSpan {width: 100%;float: right}

.fieldset-with-button {position: relative;}
.check-all-btn {position: absolute; top: 0; right: 0;}
.checkbox-group {clear: both; padding-top: 0.5em;}
.checkbox-group span.check-title {clear: none; width: auto; min-width: 200px;}

.dash-admin, .dash-results, .dash-admin.dashbox {
    width:100%; 
    margin:0 auto .5em; 
    position:relative; 
    padding:1em; 
    background:#EFEFEF; 
    display:inline-block; 
    vertical-align:top; 
    text-align:left;
}

/* Add overflow handling for user management table */
#users-contain {
    overflow-x: auto;
}

#users-contain .dataTables_wrapper {
    overflow-x: visible;
}
.dash-admin ul {padding:0; margin:0;}
.search-bar, .recently-accessed {display:block; width:100%; margin:0 auto 1em; position:relative;}

.report, .suminfo {width:100%;}
.suminfo {border:solid thin #25356E; margin:0 auto .25em; padding:.25em; text-align:center; vertical-align:top;} 

.pickListButtons {padding: 10px; display: flex;}
.pickListButtons button {margin-bottom: 5px;}
.pickListSelect {height: 200px !important;}

#nameSearch, #atnSearch {display: none;}

.reportsView{background:#EFEFEF}
.reportsButton {padding-left: 1000px}
.checkAll {margin-left: -105px;}

.helpContentRescs .resourcesHeader{ 
    display:block;
    text-align: left;
    padding-left: 50px;
}

.helpContentRescs div li {
    text-align: left;
    margin-left: 85px;
}

.helpContentForms .headerPDF, 
.reportsNav .headerPDF, 
.userManageNav .headerPDF, 
.pfSurveyNav .headerPDF{
    background-color: #01B7C6;
    padding: 15px 60px 15px 60px;
    display:block;
    text-align: left;
}

.helpContentForms ul li {
    list-style-type: none;
    width: 100%;
    text-align: left;
}

.helpContentForms .headerPDF a{color: #25356E}

.scrollTo-top {
    display: none;
    position: fixed;
    bottom: 16px;
    right: 20px;
    font-size: 32px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 0.3rem;
    z-index: 500;
}

.scrollTo-top:hover {background-color: rgba(0, 0, 0, 0.6);}
.scrollTo-top i {padding: 3px 10px;}

.user-info-header {
    background: #EFEFEF;
    padding: 1em;
    margin-bottom: 1em;
    border-radius: 0.5em;
}

.user-info-header p {margin: 0.5em 0;}

#userLockStatus {color: #C82B25; font-weight: bold;}
#userLockStatus i {vertical-align: middle; margin-right: 0.5em;}

.roleAuthList {width: 100%; margin: 1em 0;}
.role-site-program-group {border: none; padding: 0; margin: 0 0 1em 0; position: relative;}
.role-action-buttons {display: inline-block; margin-left: 1em; white-space: nowrap;}

.addMultipleTypeDiv,
.deleteMultipleTypeDiv {
    display: inline-block;
    margin-left: 0.5em;
}

.addMultipleTypeDiv .addChildLink,
.deleteMultipleTypeDiv .deleteChildLink {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

.addMultipleTypeDiv .addChildLink:hover .fa-plus-circle {
    color: #01B7C6;
}

.deleteMultipleTypeDiv .deleteChildLink:hover .fa-minus-circle {
    color: #C82B25;
}
.paging {display:block; margin-top:1em;}
.paging.btn {display:inline-block; margin:0 .25em; width:100%;}

#participant, #alias, #administrative, #family, #residence, #emergency, #education, #employment, #currentoff, #criminalhis {display:block;}

.reportnav {text-align:center; overflow:hidden;}
.reportnav ul {padding:0; margin:0; list-style:none;}
.reportnav ul li {padding:0 .125em; margin:0; display:inline-block;}
.reportnav li .active {color:#25356E;}
.hidebox {display:none;}
#ytd:target, #ptd:target, #inc:target {display:block;}
.summary-content {clear:both; margin:.5em 0 0;}
.summary-row {border: 1px solid #25356E; padding:.25em .5em; width:100%; position:relative; display:block; margin:0 0 .25em;}
.summary-term {width:70%; float:left;}
.summary-no {width:25%; float:right;}

#aliasDelete {position:relative; width:30px; margin:0 0 0 -1.75em; padding:0;}
.fieldbox.aka #aliasDelete {margin:0 0 0 -5.5em;}
#aliasDelete a {color:#C82B25}
#aliasDelete:hover {opacity:.7; animation:pulse ease-in-out .2s;}

.referralLab{float: left;}
.referralVal {float: right;}
.referralConf {line-height: 120%}

ul.disc li {
    color:#005ea2;
    margin-left: 385px;
    text-align: left;
}

/* ==================== */
/* 12. SIDENAV          */
/* ==================== */

.sidemenu {background:#EFEFEF;padding:1em; width:100%; display:block;}
.sidemenu strong {color: #595959;}
.sidemenu h6 {margin:.25em 0;}
.show {display:block; background:none; border:none; color:#005ea2; width:100%; text-align:left; vertical-align:middle;}
.show:hover {color:#7B4A8E;}

ul.sidenav {padding:0; margin:0;font-size: 18px}
ul.sidenav i[class*="fa fa-"] {float:right;}

/* Regular sidenav link styles */
.sidemenu a,
.sidemenu .hrefLink {
    color: #005ea2;
    text-decoration: none;
    display: block;
    padding: 0.25em 0.5em;
}

/* Hover state for all sidenav links - including visited */
.sidemenu a:hover,
.sidemenu a:visited:hover,
.sidemenu .hrefLink:hover {
    color: #FFF !important;
    background-color: #7B4A8E;
}

/* Active page styling */
.sidemenu .hrefLink.active-page {
    font-weight: bold;
    color: #7B4A8E;
    background-color: rgba(1, 183, 198, 0.2);
    padding: 0.25em 0.5em;
    display: block;
    border-left: 3px solid #01B7C6;
}

/* Active page hover */
.sidemenu .hrefLink.active-page:hover,
.sidemenu .hrefLink.active-page:visited:hover {
    color: #7B4A8E;
    background-color: rgba(1, 183, 198, 0.3);
}

.sidemenu .ui-accordion-header {
    cursor: pointer;
    background: #EFEFEF;
    padding: 0.5em;
    border: none;
    margin: 0.25em 0;
}

.sidemenu .ui-accordion-header:hover {
    background: #01B7C6;
    color: #25356E;
}

.ui-accordion-header.ui-state-active { 
    background-color: #01B7C6;
    color: #25356E; 
}

.sidemenu .ui-accordion-content {
    padding: 0.5em;
    border: none;
}
/* ==================== */
/* 13. TABLES           */
/* ==================== */

.dashrow {border:solid thin #25356E; clear:both; display:inline-block; float:left; margin:.25em auto; padding:.25em .5em; width:100%;}
.dashrow-qs-name:before, .dashrow-qs-cid:before, .dashrow-qs-sid:before, .dashrow-qs-status:before, .dashrow-qs-atn:before, .dashrow-qs-dob:before {font-family: 'chameronbold', serif; display:block;}
.dashrow-qs-name:before {content:'Full Name';}
.dashrow-qs-cid:before {content:'Core ID';}
.dashrow-qs-sid:before {content:'SID';}
.dashrow-qs-status:before {content:'Status';}
.dashrow-qs-atn:before {content:'ATN';}
.dashrow-qs-dob:before {content:'DOB';}
.dashrow-head {border:none; display:none; font-family: 'chameronbold', serif;}
.dashrow-head .dashrow-qs-name:before, .dashrow-head .dashrow-qs-cid:before, .dashrow-head .dashrow-qs-sid:before, .dashrow-head .dashrow-qs-status:before, .dashrow-head .dashrow-qs-dob:before, .dashrow-head .dashrow-qs-atn:before {content:'';}
.dashrow-qs-name, .dashrow-qs-cid, .dashrow-qs-sid, .dashrow-qs-status, .dashrow-qs-dob, .dashrow-qs-atn {float:left; width:100%; word-break:break-all;}
.dashrow-qs-cid, .dashrow-qs-sid {text-align: right;}

table#coreSearchTable th.coreId, td.coreId {text-align: right;}

/* ==================== */
/* DATATABLE FIXES      */
/* ==================== */

/* General DataTables width constraint */
table.display {
    table-layout: fixed !important;
    width: 100% !important;
    font-size: 0.9em;
}

table.display td,
table.display th {
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal !important;
    max-width: 0;
}

/* Specific table column widths */

/* ACM Table (Drug & Alcohol Continuous Monitoring) */
#acmTable thead th:nth-child(1),
#acmTable tbody td:nth-child(1) {
    width: 15%; /* Date Placed */
}

#acmTable thead th:nth-child(2),
#acmTable tbody td:nth-child(2) {
    width: 15%; /* Date Ended */
}

#acmTable thead th:nth-child(3),
#acmTable tbody td:nth-child(3) {
    width: 20%; /* Type */
}

#acmTable thead th:nth-child(4),
#acmTable tbody td:nth-child(4) {
    width: 35%; /* Non-Compliance */
}

#acmTable thead th:nth-child(5),
#acmTable tbody td:nth-child(5) {
    width: 5%; /* Flag */
}

#acmTable thead th:nth-child(6),
#acmTable tbody td:nth-child(6) {
    width: 10%; /* Actions */
}

/* MAT Table (Medication Assisted Treatment) */
#matTable thead th:nth-child(1),
#matTable tbody td:nth-child(1) {
    width: 15%; /* Date Placed */
}

#matTable thead th:nth-child(2),
#matTable tbody td:nth-child(2) {
    width: 15%; /* Date Discontinued */
}

#matTable thead th:nth-child(3),
#matTable tbody td:nth-child(3) {
    width: 20%; /* Type */
}

#matTable thead th:nth-child(4),
#matTable tbody td:nth-child(4) {
    width: 35%; /* Reason Discontinued */
}

#matTable thead th:nth-child(5),
#matTable tbody td:nth-child(5) {
    width: 5%; /* Flag */
}

#matTable thead th:nth-child(6),
#matTable tbody td:nth-child(6) {
    width: 10%; /* Actions */
}

/* Ensure DataTables wrapper doesn't overflow */
.dataTables_wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* User management table */
#listCoreUserTable {
    table-layout: fixed; /* Forces table to respect column widths */
    width: 100% !important;
    font-size: 0.9em;
}

#listCoreUserTable td,
#listCoreUserTable th {
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal !important;
    max-width: 0; /* Forces cells to respect column widths */
}

/* Set specific column widths */
#listCoreUserTable thead th:nth-child(1),
#listCoreUserTable tbody td:nth-child(1) {
    width: 15%; /* CORE User Full Name */
}

#listCoreUserTable thead th:nth-child(2),
#listCoreUserTable tbody td:nth-child(2) {
    width: 20%; /* Email Address */
}

#listCoreUserTable thead th:nth-child(3),
#listCoreUserTable tbody td:nth-child(3) {
    width: 12%; /* Account Status */
}

#listCoreUserTable thead th:nth-child(4),
#listCoreUserTable tbody td:nth-child(4) {
    width: 18%; /* Site(s) */
}

#listCoreUserTable thead th:nth-child(5),
#listCoreUserTable tbody td:nth-child(5) {
    width: 18%; /* Program(s) */
}

#listCoreUserTable thead th:nth-child(6),
#listCoreUserTable tbody td:nth-child(6) {
    width: 17%; /* Role(s) */
}
/* Summary Report Tables */
.summary-report-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2em;
    border: 1px solid #25356E;
}

.summary-report-table caption {
    font-weight: bold;
    padding: 0.5em;
    text-align: left;
}

.summary-report-table thead {
    background-color: #f5f5f5;
}

.summary-report-table th,
.summary-report-table td {
    padding: 0.5em;
    border: 1px solid #25356E;
    text-align: left;
}

.summary-report-table thead th {
    font-weight: bold;
    text-align: center;
}

.summary-report-table tbody th[scope="row"] {
    text-align: left;
    font-weight: normal;
}

.summary-report-table tbody td {
    text-align: center;
}

.summary-report-table .total-row {
    font-weight: bold;
    background-color: #f5f5f5;
}

.summary-report-table a {
    color: #005ea2;
    text-decoration: underline;
}

.summary-report-table a:hover {
    color: #7B4A8E;
}

/* ==================== */
/* 14. SURVEY TABLES    */
/* ==================== */

/* Survey table using fieldsets for accessibility */
.pfSurveyTable {
    width: 100%;
    font-size: 16px;
    border: 1px solid #ddd;
}

.survey-header {
    display: flex;
    background-color: #f5f5f5;
    border-bottom: 2px solid #25356E;
    font-weight: bold;
}

.survey-header-question {
    flex: 1;
    padding: 12px;
    text-align: left;
    border-right: 1px solid #ddd;
}

.survey-header-answer {
    width: 120px;
    padding: 12px;
    text-align: center;
    border-right: 1px solid #ddd;
}

.survey-header-answer:last-child {
    border-right: none;
}

.survey-question-group {
    display: flex;
    align-items: center;
    border: none;
    border-bottom: 1px solid #ddd;
    padding: 0;
    margin: 0;
    min-height: 0;
}

.survey-question-text {
    flex: 1;
    padding: 12px;
    margin: 0;
    font-weight: normal;
    text-align: left;
    border-right: 1px solid #ddd;
}

.survey-answers {
    display: flex;
}

.survey-answer-option {
    width: 120px;
    padding: 12px;
    text-align: center;
    border-right: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.survey-answer-option:last-child {
    border-right: none;
}

.survey-answer-option input[type="radio"] {
    margin: 0;
    width: auto;
    height: auto;
    float: none;
}

/* ==================== */
/* 15. ACCESSIBILITY    */
/* ==================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    width: auto;
    height: auto;
    overflow: visible;
    background: #000;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    outline: 3px solid #fff;
    outline-offset: 0;
}

/* Data Extract Checkbox Groups */
.fieldlabel.full-width.neutral-fieldset.fieldset-with-button {
    position: relative !important;
    padding-top: 0 !important;
}

.fieldset-with-button .neutral-legend {
    margin-bottom: 0.5em !important;
    padding-right: 120px !important;
    min-height: 2em !important;
}

.fieldset-with-button .check-all-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: auto !important;
    padding: 0.25em 0.75em !important;
    margin: 0 !important;
    z-index: 10 !important;
    pointer-events: auto !important;
}

.fieldlabel.full-width .checkbox-group,
.neutral-fieldset .checkbox-group {
    clear: both !important;
    padding-top: 0 !important;
    padding-right: 130px !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

.fieldlabel.full-width .checkbox-group span.check-title,
.neutral-fieldset .checkbox-group span.check-title {
    clear: none !important;
    width: 32% !important;
    min-width: 250px !important;
    display: flex !important;
    align-items: center !important;
    float: none !important;
    margin: 0.25em 0.5% !important;
}

.fieldlabel.full-width .checkbox-group span.check-title input[type="checkbox"],
.neutral-fieldset .checkbox-group span.check-title input[type="checkbox"] {
    margin: 0 0.5em 0 0 !important;
    float: none !important;
    width: 25px !important;
    height: 25px !important;
    flex-shrink: 0 !important;
}

.fieldlabel.full-width .checkbox-group span.check-title label,
.neutral-fieldset .checkbox-group span.check-title label {
    display: inline !important;
    width: auto !important;
    vertical-align: middle !important;
    float: none !important;
    margin: 0 !important;
    flex: 1 !important;
}
/* ==================== */
/* CHECKBOX GROUP GRID  */
/* ==================== */

.fieldlabel.full-width .neutral-fieldset,
fieldset.fieldlabel.full-width.neutral-fieldset {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.fieldlabel.full-width .neutral-fieldset .neutral-legend,
fieldset.fieldlabel.full-width.neutral-fieldset .neutral-legend {
    flex: 0 0 100%;
    width: 100%;
}

.fieldlabel.full-width .neutral-fieldset span.check-title,
fieldset.fieldlabel.full-width.neutral-fieldset span.check-title {
    clear: none;
    width: auto;
    min-width: 200px;
    flex: 0 1 32%;
    display: flex;
    align-items: center;
    float: none;
    margin: 0.25em 0.5%;
}

.fieldlabel.full-width .neutral-fieldset span.check-title input[type="checkbox"],
.fieldlabel.full-width .neutral-fieldset span.check-title input[type="radio"],
fieldset.fieldlabel.full-width.neutral-fieldset span.check-title input[type="checkbox"],
fieldset.fieldlabel.full-width.neutral-fieldset span.check-title input[type="radio"] {
    margin: 0 0.5em 0 0;
    float: none;
    flex-shrink: 0;
}

.fieldlabel.full-width .neutral-fieldset span.check-title label,
fieldset.fieldlabel.full-width.neutral-fieldset span.check-title label {
    display: inline;
    width: auto;
    float: none;
    margin: 0;
}

/* Stack on small screens */
@media all and (max-width: 39.99em) {
    .fieldlabel.full-width .neutral-fieldset span.check-title,
    fieldset.fieldlabel.full-width.neutral-fieldset span.check-title {
        flex: 0 0 100%;
        width: 100%;
    }
}

/* Two columns on medium screens */
@media all and (min-width: 40em) and (max-width: 51.99em) {
    .fieldlabel.full-width .neutral-fieldset span.check-title,
    fieldset.fieldlabel.full-width.neutral-fieldset span.check-title {
        flex: 0 1 48%;
    }
}
/* ================================ */
/* STANDALONE CHECKBOX ALIGNMENT    */
/* ================================ */

.fieldlabel > span.check-title {
    display: flex;
    align-items: center;
    width: auto;
    clear: none;
    float: none;
}

.fieldlabel > span.check-title label {
    width: auto;
    display: inline;
    margin: 0;
}

.fieldlabel > span.check-title input[type="checkbox"],
.fieldlabel > span.check-title input[type="radio"] {
    float: none;
    margin: 0 0.5em 0 0;
}
/* ==================== */
/* 16. FOCUS STYLES     */
/* ==================== */

/* Global focus indicator for all interactive elements */
*:focus {
    outline: 2px solid #005ea2;
    outline-offset: 2px;
}

/* Links - maintain underline and show outline */
a:focus {
    outline: 2px solid #005ea2;
    outline-offset: 2px;
    color: #7B4A8E;
}

/* Buttons - show clear focus state */
.btn:focus,
button:focus {
    outline: 2px solid #005ea2;
    outline-offset: 2px;
    background: #25356E;
    color: #01B7C6;
}

/* Form inputs - combine shadow and outline */
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #005ea2;
    outline-offset: 2px;
    box-shadow: 0 0 10px 0px rgba(39,152,160,0.7);
    background: #FFF;
}

/* Checkbox and radio - larger outline offset for visibility */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: 2px solid #005ea2;
    outline-offset: 3px;
}


/* Navigation menu items */
#cssmenu a:focus {
    outline: 2px solid #005ea2;
    outline-offset: 2px;
}

/* Sidenav links */
.sidemenu a:focus {
    outline: 2px solid #005ea2;
    outline-offset: 2px;
}

.sidemenu .hrefLink.active-page:focus {
    outline: 2px solid #005ea2;
    outline-offset: 2px;
}

/* Icon buttons */
.btn-icon:focus {
    outline: 2px solid #005ea2;
    outline-offset: 2px;
}

/* Accordion headers */
.sidemenu .ui-accordion-header:focus {
    outline: 2px solid #005ea2;
    outline-offset: 2px;
}

/* Mobile menu button */
#cssmenu.small-screen #menu-button:focus {
    outline: 2px solid #005ea2;
    outline-offset: 2px;
}

/* Table links */
.summary-report-table a:focus {
    outline: 2px solid #005ea2;
    outline-offset: 2px;
}

/* Disabled elements should not show focus */
*:disabled:focus,
.not-active:focus,
[aria-disabled="true"]:focus {
    outline: none;
}

/* ==================== */
/* 17. ANIMATIONS       */
/* ==================== */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@keyframes pulse {
    from {transform:scale(1, 1);}
    20% {transform:scale(1.5, 1.5);}
    to {transform:scale(1, 1);}
}

@-webkit-keyframes pulse {
    from {-webkit-transform:scale(1, 1);}
    20% {-webkit-transform:scale(1.5, 1.5);}
    to {-webkit-transform:scale(1, 1);}
}

/* Loading Animation */
.no-js #loading {display:none;}
#wi-loading {position:relative; margin:0 auto; display:block; overflow:hidden; height:110px; width:100px; top:30%;}
#wi-loading img {width:100%;}
#loading {position:absolute; top:0; left:0; background:#0A4D6B; color:#FFF; height:100%; width:100%; z-index:10000;}
#loading-text {position:relative; font-size:2em; font-family: 'rocchi_boldbold', serif; display:block; letter-spacing:5px; margin:1em auto 0; width:300px; text-align:center; top:30%;}

.l-one {animation:l_one 2s infinite linear;}
.l-two {animation:l_two 2s infinite linear;}
.l-three {animation:l_three 2s infinite linear;}
.l-four {animation:l_four 2s infinite linear;}
.l-five {animation:l_five 2s infinite linear;}
.l-six {animation:l_six 2s infinite linear;}
.l-seven {animation:l_seven 2s infinite linear;}

@keyframes l_one {0%{opacity:1;} 12.5%{opacity:0;} 100%{opacity:1;}}
@keyframes l_two {0%{opacity:1;} 25%{opacity:0;} 100%{opacity:1;}}
@keyframes l_three {0%{opacity:1;} 37.5%{opacity:0;} 100%{opacity:1;}}
@keyframes l_four {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}}
@keyframes l_five {0%{opacity:1;} 62.5%{opacity:0;} 100%{opacity:1;}}
@keyframes l_six {0%{opacity:1;} 75%{opacity:0;} 100%{opacity:1;}}
@keyframes l_seven {0%{opacity:1;} 87.5%{opacity:0;} 100%{opacity:1;}}

/* ==================== */
/* 18. JQUERY UI FIXES  */
/* ==================== */

input[class*="ui-"], select[class*="ui-"], text[class*="ui-"], textarea[class*="ui-"], textfield[class*="ui-"] {color:#25356E !important;}
.ui-dialog {box-shadow:0 3px 20px; font-size:.8em; padding:0;}
.ui-datepicker {z-index:500 !important;}

/* DataTables Pagination Accessibility */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-block;
    min-width: 1.5em;
    padding: 0.5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: #25356E !important;
    border: 1px solid transparent;
    border-radius: 0.5em;
    background: none;
    font-family: 'chameronregular', serif;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #FFF !important;
    border: 1px solid #25356E;
    background-color: #25356E;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #25356E !important;
    border: 1px solid #01B7C6;
    background-color: #01B7C6;
    font-family: 'chameronbold', serif;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default;
    color: #AFBBC5 !important;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:focus {
    outline: 2px solid #005ea2;
    outline-offset: 2px;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 0.5em;
}

/* ==================== */
/* 19. FOOTER           */
/* ==================== */

footer {
    width:100%; 
    bottom:0; 
    clear:both; 
    height:auto;  
    margin-top:2em; 
    padding:2em 0; 
    position:relative; 
    text-align:center; 
    background:#EFEFEF; 
    color:#25356E;
}

footer a {
    color:#005ea2; 
    padding:.25em; 
    width:100%; 
    display:block; 
    background:rgba(255,255,255,0); 
    -webkit-transition:all .3s;
}

footer a:hover {
    color:#7B4A8E; 
    background:rgba(255,255,255,.7); 
    -webkit-transform:scale(1.1,1.1);
}

.footbox {
    display:inline-block; 
    vertical-align:top; 
    position:relative; 
    margin:0 auto; 
    text-align:left; 
    width:100%; 
    padding:.5em;
}

.footbox ul {list-style:none; padding:0;}

/* ==================== */
/* 20. RESPONSIVE       */
/* ==================== */

/* Mobile: Stack table cells vertically */
@media all and (max-width: 51.99em) {
    .summary-report-table thead {
        display: none; /* Hide column headers on mobile */
    }
    
    .summary-report-table tbody tr {
        display: block;
        margin-bottom: 1em;
        border: 1px solid #25356E;
    }
    
    .summary-report-table tbody th,
    .summary-report-table tbody td {
        display: block;
        width: 100%;
        text-align: left;
        border: none;
        border-bottom: 1px solid #ddd;
    }
    
    .summary-report-table tbody th {
        font-weight: bold;
        background-color: #f5f5f5;
    }
    
    /* Add labels before data on mobile */
    .summary-report-table tbody td:nth-of-type(1):before {
        content: "Current: ";
        font-weight: bold;
        display: inline;
    }
    
    .summary-report-table tbody td:nth-of-type(2):before {
        content: "Incomplete: ";
        font-weight: bold;
        display: inline;
    }
}

/* Desktop: Normal table layout */
@media all and (min-width: 52em) {
    .summary-report-table tbody th[scope="row"] {
        width: 40%;
    }
    
    .summary-report-table tbody td {
        width: 30%;
    }
}

/* WIDTH IN PX: 440 */
@media all and (min-width:22em)  {
    .wrapper {max-width:85%;}
    .fieldlabel {display:flex; flex-direction: row; flex-wrap: wrap;}
}

/* WIDTH IN PX: 540 */
@media all and (min-width:27em) {
    .wrapper {max-width:90%;}
    .left {float:left;}
    img.left {padding:.5em 1em .5em 0;}
    .right {float:right;}
    img.right {padding:.5em 0 .5em 1em;}
    #logo {max-width:250px; width:30%; margin:0 .5em 0 0; float:left;}
    .sidemenu {width:48%; float:left;}
    .fieldcontent {width:48%; float:right;}
    .fieldlabel.half-width {margin:.5em auto; width:47%;}
    .fieldlabel-twothird {width: 62%; margin: 0 0 0 1%;}
    .fieldgroup {width:30%; margin:.25em 1.5%; float:left;}
    #togglebox .fieldlabel {width:30%; display:inline-block; margin:0 .25em; text-align:left;}
    #togglebox .btn {margin:1.625em 0 0;}
    ul.sidenav {display:block;}
    .dashrow-qs-name:before, .dashrow-qs-cid:before, .dashrow-qs-sid:before, .dashrow-qs-status:before, .dashrow-qs-atn:before, .dashrow-qs-dob:before {font-family: 'chameronbold', serif; float:left; display:inline-block; width:35%; border-right:thin solid #25356E; margin-right:.5em;}
    .show {display:none;}
    .error {width:80%;}
    .footbox {width:45%;}
}

/* WIDTH IN PX: 800 */
@media all and (min-width:40em) {
    body {line-height:1.55em;}
    .wrapper {max-width:90%;}
    .btn, button, .btnbox {width:auto;}
    #logo {display:block;}
    #name-and-slogan {width:auto; margin:0 auto; float:left; text-align:left;}
    .login-home {width:30%;}
    #logbox {float:right; clear:none}
    section#mainc {min-height:100%;}
    .sidemenu, .dash-admin {width:27%;}
    .dash-admin.dashbox.summary-report {width:44%; margin:0 0 0 1%;}
    .dash-admin.dashbox.recent-accessed {width:26%; margin:0 0 0 .5%;}
    .fieldcontent, .dash-results {width:63%;}
    .show {display:none;}
    ul.sidenav {display:block;}
    .paging .btn {display:inline-block; margin:.25em;}
    .fieldbox {display:flex; flex-flow:row wrap;}
    .full-width span.check-title {
        display:flex; 
        flex:0 1 32%; 
        width:32%; 
        max-width:32%; 
        float:none; 
        clear:none; 
        margin:0.25em 0.5%; 
        align-items:center;
    }
    .error {width:60%;}
    .footbox {width:30%;}
}

/* WIDTH IN PX: 1040 */
@media all and (min-width:52em) {
    .wrapper {width:100%; max-width:95%;}
    .fieldcontent, .dash-results {width:70%;}
    .fieldbox .fieldlabel {display:inline-block; display:inline-flex; flex:47.5%; width:47.5%; max-width:47.5%; margin:0 1%; vertical-align:top;}
    .fieldlabel-full-width {margin:0 0 0 1.25%;width:97%;}
    .dashrow-head {display:block;}
    .dashrow-qs-name {width:40%;}
    .dashrow-qs-cid, .dashrow-qs-sid, .dashrow-qs-status, .dashrow-qs-atn, .dashrow-qs-dob {width:20%;}
    .dashrow-qs-name:before, .dashrow-qs-cid:before, .dashrow-qs-sid:before, .dashrow-qs-status:before, .dashrow-qs-atn:before, .dashrow-qs-dob:before {display:none;}
    .suminfo {width:100%; display:inline-block;}
    .fieldbox .fieldlabel.full-width {flex:100%; max-width:100%; width:100%;}
}

/* WIDTH IN PX: 1400 */
@media all and (min-width:70em) {
    .suminfo {width:24%; display:inline-block;}
}

/* WIDTH IN PX: 1640 */
@media all and (min-width:85em) {
    .wrapper {max-width:90%;}
    .fieldbox .fieldlabel {flex:30%; width:30%; max-width:30%;}
    .reportheader < .suminfo i[class*="fa fa-"] {width:100%; clear:both;}
    body.super-admin .suminfo i[class*="fa fa-"] {clear:none;}
}

/* User Management Nav - Better Mobile Handling */
@media all and (max-width: 39.99em) {
    .sidemenu.userManageNav {
        width: 100% !important;
        float: none;
        margin-bottom: 1em;
    }
    
    /* FIX: Reduce header padding and allow wrapping on mobile */
    .userManageNav .headerPDF {
        padding: 15px 10px 15px 10px !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .sidemenu.userManageNav ul {
        width: 100%;
    }
    
    .sidemenu.userManageNav ul li {
        width: 100%;
        display: block;
    }
    
    .sidemenu.userManageNav a {
        display: block;
        padding: 0.75em;
        width: 100%;
    }
}

/* Prevent awkward wrapping at all sizes */
.sidemenu.userManageNav a {
    word-break: break-word;
}
/* ==================== */
/* HELP RESOURCES LAYOUT */
/* ==================== */

/* Mobile first - stack vertically */
section#mainc.help-resources-layout {
    display: block;
}

section#mainc.help-resources-layout > form,
section#mainc.help-resources-layout > .dashBoardContent {
    width: 100% !important;
    margin: 0 0 1em 0;
    display: block;
    float: none;
}

section#mainc.help-resources-layout > .clearfix {
    display: none;
}

/* Prevent mid-word breaks and contain overflow */
section#mainc.help-resources-layout .dashBoardContent {
    overflow: hidden;
    box-sizing: border-box;
}

section#mainc.help-resources-layout p,
section#mainc.help-resources-layout label,
section#mainc.help-resources-layout span {
    word-break: normal;
    overflow-wrap: break-word;
}

section#mainc.help-resources-layout input,
section#mainc.help-resources-layout textarea,
section#mainc.help-resources-layout select {
    max-width: 100%;
    box-sizing: border-box;
}

/* Desktop - three column layout */
@media all and (min-width: 52em) {
    section#mainc.help-resources-layout {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }

    section#mainc.help-resources-layout > form {
        flex: 0 0 28% !important;
        width: 28% !important;
        max-width: 28% !important;
        margin: 0;
        overflow: hidden;
        display: block;
        float: none;
        box-sizing: border-box;
    }

    section#mainc.help-resources-layout > form .dashBoardContent.dash-admin.left {
        width: 100% !important;
        float: none;
        display: block;
        box-sizing: border-box;
    }

    section#mainc.help-resources-layout > .dashBoardContent.dash-admin.dashbox.summary-report {
        flex: 0 0 43% !important;
        width: 43% !important;
        max-width: 43% !important;
        float: none;
        display: block;
        margin: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    section#mainc.help-resources-layout > .dashBoardContent.dash-admin.dashbox.recent-accessed {
        flex: 0 0 26% !important;
        width: 26% !important;
        max-width: 26% !important;
        float: none;
        display: block;
        margin: 0;
        overflow: hidden;
        box-sizing: border-box;
    }
}
/* ==================== */
/* ROLE/SITE/PROGRAM BUTTONS */
/* ==================== */

.program-type-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.program-type-field label {
    width: 100%;
}

.program-type-field select {
    flex: 1;
    min-width: 0;
}

.program-type-field .role-action-buttons {
    display: flex;
    gap: 0.25em;
    margin-left: 0.5em;
    flex-shrink: 0;
}

.program-type-field .role-action-buttons .btn-icon {
    padding: 0.25em;
}