body {
    overflow-x: hidden;
    font-weight: 200;
    padding-top: 3.2rem;
    font-size: .9em;
    background-color: #f8f9fa;
    overscroll-behavior-y: none;
}
H3 { font-size: 25px; padding: 0px; margin-bottom: 1px; font-weight:400;}
H4 { font-size: 20px; padding: 0px; margin-bottom: 1px; font-weight:200;}
H5 { font-size: 18px; padding: 2px 0px 0px; margin-bottom: 10px; font-weight:200;}
p { margin-bottom: .5em; line-height: 1.3em; }
.t5 { padding-top:5px; }
.b5 { padding-bottom:5px; }
.t10 { padding-top:10px; }
.b10 { padding-bottom:10px; }
.b15 { padding-bottom:15px; }
.t20 { padding-top:20px; }
.b20 { padding-bottom:20px; }
.t30 { padding-top:30px; }
.b30 { padding-bottom:30px; }
.w40p { width:40%; }
.w45p { width:45%; }
.w50p { width:50%; }
.w100p { width:100%; }
.w50 { width:50px; }
.w75 { width:75px; }
.w100 { width:100px; }
.w125 { width:125px; }
.w150 { width:150px; }
.w200 { width:200px; }
.w300 { width:300px; }
.w400 { width:400px; }
.padr { margin-right: 10px; }
.pad { margin-left: 10px; }
.boxpad {padding: 10px; }
.clear { clear:both; }
.red { color: #CC0000; }
.small { font-size: .8em }
.big { font-size: 1.3em; font-weight:800; }
.huge { font-size: 2.1em; font-weight:800; }
.hide { display:none; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: darkblue; }
.ctr { text-align: center; }
.hand { cursor: pointer; }
.linktext { color: #0033aa; }
.redtext { color: #CC0000; }
.greentext { color: #008800; }
.lightgreentext { color: #7CB342; }
.graytext { color: #888888; }
.ltgraytext { color: #cccccc; }
.orangetext { color: darkorange; }
.bluetext { color: darkblue; }
.gap20 { padding-right: 20px; }
.box { width:100%; border: 1px silver solid; }
.alwayswrap { word-break: break-all }
.yellowbox { background-color: #ffeeaa !important; }
.graybox { background-color: #eee !important; }
.whitebox { background-color: #fff !important; }
li { text-align:left; }
hr { margin: .75rem 0 .25rem }
.border-right { border-right:1px silver solid; }
.nomargin { margin:0px !important; }
.error { color:red; font-size:.9em; }
.fleft { float:left; }
.fright { float:right; }
.fnone { float:none; }
.clear { clear:both; }
.text-muted { color: #333333 !important; }
.text-normal { font-size:1.0rem !important; color: #000; }

.noalert {
    font-size: 18px;
    color: white;
    cursor: pointer;
}

.isalert {
    font-size: 18px;
    color: orange;
    cursor: pointer;
}

.logoblock {
    width:140px;
    margin: -4px 10px 0px 8px;
}

.titlelayer {
    padding-top: 5px;
    /*background-color: #fff;*/
    position:relative;
    z-index:100;
}

.select-picker-container {
    z-index: 1000; /* Adjust this value as needed */
}

.aibox {
    padding:2px 10px;
    height:20px;
    background-color:#ddd;
}

.boundingbox {
    padding:0px;
    margin: 0px;
    overflow-y: hidden;
    overflow-x: hidden;
    height: 730px;
    /*border: 1px red solid;*/
}

.index-graph {
    margin-top: 0px;
    position: relative;
}

.trend-graph {
    margin-top: 0px;
    position: relative;
}

.whitemask {
    position: relative;
    padding-top: 10px;
    background-color: #f1f1f1;
    z-index:5;
}

.sleep-graph-top {
    position: relative;
    border-top-left-radius: .35rem;
    border-top-right-radius: .35rem;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ddd;
    border-bottom: none;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    background-color: #fff;
    margin-left: 20px;
    padding-bottom: 10px;
}

.sleep-graph-bottom {
    border-bottom-left-radius: 0.35rem;
    border-bottom-right-radius: 0.35rem;
    border: 1px #ddd solid;
    border-top: none;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    background-color: #fff;
    margin: 0px 15px;
}

.sleep-graph {
    position: relative;
    padding: 10px;
    height: 175px;
}

.sleep-parameters {
    padding: 10px 25px 0px;
    background-color: white;
    position: relative;
    z-index: 4;
}

.spinner {
    top: 50%;
    left: 50%;
    margin-top: -18px;
    margin-left: -50%;
    width: 100%;
    position: fixed;
    z-index:1000;
}

.titletext {
    font-size: 1.5em;
    font-weight: 400;
    margin-bottom: 10px;
    margin-left: 0px;
}

.hover-text:hover {
    font-weight:400;
    text-decoration:none;
}

.rainbowbar {
    position: relative;
    height:20px;
    margin: 0px 15px;
    background-image: linear-gradient(to right, red,orange,yellow,green);
    opacity: .5;
}

.marker-container {
    margin-top:5px;
    position:relative;
    width: calc(100% - 30px);
}

.marker-text {
    position: relative;
    top:0;
    left: 0px;
    width: 30px;
    height: 20px;
    font-size:1.0em;
    font-weight:500;
    text-align: center;
}

.top-marker {
    position: relative;
    top:0;
    left:0;
    width: 30px;
    height: 0px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #bbb;
}

.bottom-marker {
    position: relative;
    top:0;
    left:0;
    width: 30px;
    height: 0px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #AAA;
}

.mycontainer {
    padding:10px;
}

.bgcontainer {
    background-color: #f8f9fa;
}

.dygraph-axis-label { font-size: 11px; }

.dygraph-legend {
    margin-top:-15px;
    width:90% !important;
    text-align:right;
    font-size:.8em;
}

.dygraph-ylabel, .dygraph-y2label { font-size:13px; }

.dygraph-axis-label-y { margin-top:-3px; }

.dashbtn {
    font-size: .9em;
    padding: 3px;
    width: 100px !important;
    border: 1px silver solid !important;
    margin-left: 3px;
}

.dashbtn:hover {
    border: 1px black solid !important;
}

.bootstrap-select .dropdown-toggle {
    border-radius: 0.25rem;
    padding: 3px 8px;
    margin: 0 3px;
    font-size: .825rem;
    background-color: white;
    border: 1px silver solid !important;
}

.bootstrap-select .dropdown-toggle:hover {
    border: 1px black solid !important;
}

.bootstrap-select .dropdown-menu.inner {
    max-height: 290px !important;
    overflow-y: auto !important;
}


.dropstyle {
    margin-top: 1px;
    border-radius: 0.25rem;
    width: 125px !important;
    border: 1px silver solid !important;
}

/** bootstrap overrides **/
#tz .btn-light {
    background-color: white !important;
    border: 1px silver solid !important;
}
.card {
    border-radius: 0.35rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    background-color: #fff;
}

.card-header-hide { color: rgba(0, 0, 0, .03); }

.card-height { height:150px;}
.card-height2 { height:105px;}
.card-height3 { height:158px;}

.card-speed {
    position:relative;
    width:100%;
    height: 95px;
    padding-top: 3px;
    text-align: center;
}

.card-canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.card-pie {
    position:relative;
    width:100%;
    height: 110px;
    text-align: center;
}

.card-temp {
    margin: 0px auto;
    width: 170px;
    padding-top: 5px;
}

.card-body {
    padding: 0 !important;
}

.card-header {
    padding: .2rem
}

.card-footer {
    padding: .1rem
}

.card-graph { height:200px; }
.card-graph-style {
    width:100%;
    height:94px;
    margin-top:20px;
}

.nav-link.active { color: #c00; }

.logout_text {
    float: right;
    width: 100%;
    margin-right: 20px;
    color:#fff;
    text-decoration:none;
}

/* smaller text in table */
.table-condensed{
    font-size: 13px;
}

.table>:not(caption)>*>* {
    padding:.3rem .5rem;
}


.dropdown-item.active {
    background-color:#bbbbbb;
}

div.dt-container select.dt-input { margin-right:5px; }
table.dataTable>thead>tr>th, table.dataTable>tbody>tr>td { padding: 2px; font-size: .8em; }

.modal-backdrop.show {
    background-color: rgba(128, 128, 128, 0.2); /* same gray */
    opacity: 1 !important;                      /* ensure it's not dimmed further */
    z-index: 999 !important;                    /* optional: keep above main content */
}

.modal-overlay {
    position: fixed; /* Positioning and size */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(128,128,128,0.2); /* color */
    z-index: 999;
}

.modal-no-bottom-radius {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.modal-box {
    width:340px;
    max-height: 510px;
    overflow: auto;
    background-color: #ffffff;
    border: 2px silver solid;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    border-radius: 0.35rem;
    position: fixed;
    top: 47vh;
    left: 50vw;
    transform: translate(-50%,-50%);
}

.modal-graph {
    width:340px;
    max-height: 500px;
    overflow: auto;
    background-color: #ffffff;
    border: 2px silver solid;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    border-radius: 0.35rem;
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%,-50%);
}

.modal-messages {
    width: 600px;
    max-height: 510px;
    overflow: auto;
    background: #fff;
    border: 2px solid silver;
    box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 3px 10px rgba(0,0,0,.19);
    border-radius: .35rem;
}

#widget-graph {
    height:200px;
}

.dialog-box {
    width: 600px;
}

.ai-box {
    width: 800px;
}

.help-box {
    width: 600px;
    font-size: 1.0rem;
}


.modal-head { background-color: #eee; padding: 3px 10px; border-bottom: 1px silver solid; margin-bottom: 5px; font-size: .8em }
.modal-body { max-height: 470px; overflow: auto; padding-bottom: 20px;}
.modal-title { font-size: 16px; padding: 0px 10px; padding-bottom: 10px;}
.modal-message { font-size: 0.9em; padding: 0px 10px; line-height: 1.3em}
.modal-button { padding: 10px 10px; }

.reportframe { border: 1px silver solid; padding:5px; width:730px; margin: 20px auto; background-color:white; }
.reportframe2 { width:880px; background-color:white; }

#reportcontainer {
    width: 715px;
    min-height:300px;
    height: 100%;
    padding: 10px 15px;
    background-color:#ffffff;
}

#reportcontainer2 {
    width: 860px;
    min-height:300px;
    height: 100%;
    padding: 10px 15px;
    background-color:#ffffff;
}

.aireporttitle {
    font-size:22px;
    font-weight: 600;
}

.aireporthead {
    font-size:18px;
    font-weight: 400;
}

.reportlabel {
    font-weight: 400;
    width: 13%;
}
.reportdata {
    width: 20%;
}
td.reportdata, td.reportlabel { border: none; padding: 0em .1em; }

.reportgraph { width: 100%; height: 130px; }
.trendreportgraph { width: 100%; height: 125px; }

.trendgraph {
    position: relative;
    z-index: 2;
    height: 115px;
    padding-top: 10px;
}

.trendcanvas {
    width: 100%;
}

.sleepreportframe { padding: 0px; }
.sleepreport { margin: .3em 0em; }

.introjs-tooltip { min-width: 350px; max-width: 350px; }
.introjs-button { padding: .2em; width:60px; text-align:center; }
.introjs-tooltiptext { padding:10px 20px 0px; }

.title-bar { vertical-align:top; }

.btn-report { padding: .45rem .8rem; margin-left: 10px; background-color:#25327B; }
.btn-arrow {
    cursor: pointer;
}

.btn-modal-close {
    font-size: .96em;
    padding: 0px !important;
}

.btn-more { padding: .10rem .5rem; background-color:#25327B; }
.btn-drop { padding: .10rem .5rem; border: 1px silver solid; font-size: 12px; font-weight: 200; text-align: center; margin-top:2px;}
.btn-drop:hover { border: 1px black solid; }

.dropright .dropdown-menu{
    left:auto!important;
    right:0!important;
}

#physiological {
    position: relative;
    top: 0px;
}

.apptitle {
    color:#fff;
    font-size:24px;
    font-weight: 600;
}

.printicons {
    height:40px;
    width:40px;
}

.printtables td {
    font-size: .88em;
    margin: 0px 4px;
}

.cgraphlabel {
    width: 20%;
    font-weight: 700;
}

.mylabel {
    font-weight:200;
    margin-bottom:2px;
}

/*  support for pdf printing */
.pdf-break-before { break-before: page; page-break-before: always; }
.pdf-avoid-break { break-inside: avoid; page-break-inside: avoid; }


/* Always safe for PDF export */
.data-table { width: 100%; }
.data-table-striped tr:nth-child(even) {
    background-color: #f1f1f1;
}
.data-table-spaced td {
    padding:2px 4px;
}

/* custom css for charGPT docs */

.doccard {
    border: 1px silver solid;
    border-radius: 0.35rem;
    background-color: #fff;
    padding:10px;
    margin-bottom:10px;
}

.kicker {

    font-size: 1.2rem;
    font-weight: 400;
}

.aireporthead { text-align: center; }
.aireport { text-align: left; }
.aireport h1 { margin: 0 0 12px 0; font-size: 24px; }
.aireport h2 { margin: 16px 0 8px 0;  font-size: 20px; }
.aireport h3 { margin: 16px 0 6px 0;  font-size: 16px; }
.aireport ul { margin: 8px 0 12px 22px; list-style-position: outside; padding-left: 1.0em;}
.aireport li { margin: 4px 0;}
.aireport li::marker { content: "- "; font-weight: normal; }
/* Overall Assessment layout */
.aireport .oa-item {
    margin-bottom: 14px;
}

.aireport .oa-bullet {
    display: inline-block;
    width: 16px;          /* controls indent */
    vertical-align: top;
}

.aireport .oa-content {
    display: inline-block;
    width: calc(100% - 16px);
    vertical-align: top;
}

.aireport .m-item {
    margin: 6px 0;
}

.aireport .m-bullet {
    display: inline;
    margin-right: 6px;
    margin-left: 16px;
}

.aireport .m-content {
    display: inline;
}

.oa-summary-item { display: none; }

#print-area {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.4;
    letter-spacing: 0;
    word-spacing: 0;
    width: 715px;
    min-height:300px;
    height: 100%;
    padding: 10px 15px;
    background-color:white;
}

#print-area b,
#print-area strong {
    display: inline;
    line-height: inherit;
    vertical-align: baseline;
    font-weight: 700;
}