/**
 * Global styles for all of Medaxcess
 * @author Thomas Howe, Scott Rycroft
 * @date September 2017
 */

 /* CSS Variables */
 :root {
    --header-height: 0px; /* Initial value */
}

input[type="button"] {
	cursor: pointer;
}

@media (min-width: 576px) {
	.modal-xl {
		max-width: 90%;
	}
}

@media (min-width: 992px) {
	.modal-xl {
		max-width: 90%;
	}
}

@media (min-width: 1200px) {
	.modal-xl {
		max-width: 1150px;
	}
}

@media print {
	.noprint {
		display: none;
	}

	.printonly {
		display: inline !important;
	}

	.printonlyblock {
		display: block !important;
	}

	.print_section_start:not(:first-child) {
		page-break-before: always;
	}
}

.topNavWrapper {
	width: 100%;
	max-width: calc(100% - 200px);
}

ul.navPriority .dropdown-menu {
	min-width: 100px;
	margin-top: 11px;
}

nav.navbar .menu-btn span,
nav.navbar .menu-btn span:nth-of-type(2)::before,
nav.navbar .menu-btn span:nth-of-type(2)::after {
	background: #292b2c;
}

nav.side-navbar ul a:hover {
	background-color: hsl(212, 95%, 35%);
}

nav.navbar {
	background: white;
	color: #292b2c;
	z-index: 1000;
}

/** This allows the down caret to fit on the same line as the 'more text'
 *  Previously this caused a page render jank when the menu finished size detection
 */
.navMoreLabel {
	min-width: 50px;
}

.is_IPad nav.navbar .nav-item > a {
	text-align: center;
}

.is_IPad ul.dropdown-menu .nav-item > a {
	text-align: left;
}

.is_IPad .topNav .nav-item {
	min-width: 125px;
}

a, button.nav-link {
	color: hsl(212, 95%, 26%);
}

a:focus,
a:hover {
	color: hsl(212, 95%, 40%);
}

.entitySelection .nav-link,
.measureSelection .nav-link {
	color: hsl(212, 95%, 26%);
	cursor: pointer;
}

.entitySelection .nav-link:focus,
.entitySelection .nav-link:hover {
	color: hsl(212, 95%, 40%) !important;
}

.nav-link.active, nav.side-navbar ul li.active a, nav.side-navbar ul li.active a:hover {
	background-color: hsl(212, 95%, 26%);
	color: white;
}

select option {
	color: #4d4d4d;
}

.hover-underline {
    position: relative;
    color: #333; /* Default color */
    transition: color 0.3s ease; /* Smooth color transition */
}

.hover-underline:focus {
    color: #333; /* Default color */
}

.hover-underline:hover:not(.active) {
    color: hsl(212, 95%, 26%); /* Hover color */
}

.hover-underline:not(.active)::after {
    content: '';
    position: absolute;
    left: 5%;
    bottom: -2px;
    width: 90%;
    height: 2px;
    background-color: hsl(212, 95%, 26%); /* Underline color */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.hover-underline:hover:not(.active)::after {
    transform: scaleX(1); /* Show underline on hover */
}





/* Theme overrides this with a weird calc() statement that cut off text below line eg. with y, p, j, etc */

select.form-control:not([size]):not([multiple]) {
	height: auto;
	margin-bottom: 0;
}

.pageControls {
	position: sticky;
    top: calc(var(--header-height) - 10px);
    z-index: 99;
}

section.pageControls div[class*='col-'] .item {
	padding: 10px 0;
}

section.pageControls .title {
	margin-left: 0;
	margin-right: 10px;
}

.medaxIcon {
	cursor: pointer;
	font-size: 1.5em;
	padding: 0 0 0 10px;
}

button.form-control .medaxIcon {
	padding: 0;
}

section .title {
	font-size: 1.1em;
	font-weight: 300;
	margin: 0 15px;
}

nav.side-navbar.shrinked a, nav.side-navbar.shrinked .card-title {
	color: black;
	background-color: white;
}

body.dashboardPage nav.side-navbar.shrinked a {
	padding: 15px 0px;
	font-size: 14px;
}

section {
	padding: 10px 0;
}

section .card {
	margin-bottom: 0;
}

header .navbar {
	padding: 5px 0;
}

header.page-header {
	padding: 10px 0;
	position: sticky;
    top: 0;
    z-index: 100;
	margin: 5px 5px 0 5px;
}

section>.container-fluid {
	padding: 0 15px;
}

footer.main-footer {
	background-color: white;
	color: black;
	box-shadow: -2px -1px 3px 2px rgba(0, 0, 0, 0.1), -1px 0 2px rgba(0, 0, 0, 0.05);
}

.page-header-title {
	margin-top: 10px;
}

.dropdown-item:focus,
.dropdown-item:hover {
	background-color: hsl(212, 95%, 26%);
	color: white;
}

.dropdown-item.disabled:focus,
.dropdown-item.disabled:hover {
	background-color: white;
	color: grey;
	cursor: not-allowed;
}

.dropdown-item,
.dropdown-item i {
	transition: unset;
}

.btn-primary, .alert-primary {
	color: hsl(0, 0%, 100%);
	background-color: hsl(212, 95%, 26%);
	border-color: hsl(212, 95%, 26%);
}

.btn-primary:hover {
	color: hsl(0, 0%, 100%);
	background-color: hsl(212, 95%, 40%);
	border-color: hsl(212, 95%, 40%);
}

.btn-primary.disabled,
.btn-primary:disabled {
	background-color: #0275d8;
	border-color: #0275d8;
}

.card-block {
	padding: 1.25rem;
}

.card-close {
	z-index: 101;
}

.cardMinMax {
	top: 18px;
}

.cardTitleBlock {
	padding: 0;
}

.minimizeShow h4 {
	margin: 0;
}

section.pageControls div[class*='col-'] .item {
	border-right: none;
}

nav.side-navbar ul a.active {
	background-color: hsl(212, 95%, 39%);
	color: white;
}

nav.side-navbar ul .nav-filter-item
{
	border-bottom: 1px solid lightgray;
}

nav.side-navbar ul .nav-item #bench-option-math.disabled {
	pointer-events: none;
	color: #999;
	text-decoration: line-through;
	opacity: 0.6;
}

.iconLegend {
	margin-bottom: 10px;
	margin-right: 23px;
}

.iconLegend i {
	margin-left: 3px;
	margin-right: 3px;
}

.legendTitle {
	font-style: italic;
}

.legendItem {
	margin-left: 9px;
}

body {
	overflow-y: scroll;
}

.cardOptions {
	position: absolute;
	right: 10px;
	top: 10px;
}

.pageControls button {
	padding: 8px 0;
}

.btn {
	border-radius: 0.2rem;
}

.loadingSpinner {
	font-size: 2.5rem;
}

.percentile_legend_span {
	padding: 0 10px;
}

.chart_count_span {
	padding-right: 20px;
}

.page-link {
	color: hsl(212, 95%, 26%);
}

.page-item.active .page-link {
	background-color: #0275d8;
	border-color: #0275d8;
}

button.list-group-item {
	font-weight: normal !important;
	color: #292b2c;
}

.alignright {
	text-align: right;
}

.form-check-inline .form-check-label {
	padding-right: 1rem;
}

table.chartOutlFltText td {
	font-size: 15px !important;
}

table#fltlgd td, .trendingChartTable td {
	font-size: 14px;
}

.form-select {
	margin-bottom: 0;
}

/* Begin Chart Controls */
select[name="denomcode"] {
	width: calc(100% - 1em);
}

.pageControls .form-select {
	width: 100%;
}

.slct_month {
	min-width: 111px;
}

.denominatorControl:not(#powerpointModal .denominatorControl, #customPDFModal .denominatorControl) {
	width: 100%;
}

.denomNotApplicable
{
	height: calc(2.25rem + 2px);
	padding: 0.38rem 0 .375rem 0;
}

.slct_timegrain, .slct_month, .slct_year {
	margin-right: 2px;
}

/* End Chart Controls */

.lgditm {
	display: inline-block;
	margin-bottom: 2px;
	margin-right: 10px;
}

.lgditm span {
	vertical-align: middle;
}

.ent_prac_span {
    display: inline-block;
    padding-right: 20px;
}

span.ent_lgd_text {
	padding-left: 5px;
}

.cumulative_no_data_drilldown {
	cursor: pointer;
}

.cumulative_no_data_title {
	margin-bottom: 0;
}

.hidden {
	display: none;
}

.dropdown-menu.show {
	display: block;
	max-height: 95vh;
	overflow-y: auto;
}

.colorswatch {
	height: 10px;
	width: 10px;
	margin-bottom: 3px;
	border-style: solid;
    border-width: 0px 5px;
}

/* Comparison POD section uses this. */
.colorSwath {
	height: 21px;
	width: 31px;
	margin-bottom: 3px;
	border-style: solid;
    border-width: 0px 16px;
}

body div.page.notAdmin .adminOnly {
	display: none;
}

.trending_opts {
	min-height: 40px;
}

#entitySelectionModal .modal-dialog
{
	width: 530px;
	max-width: calc(100% - 20px);
}

/* Color boxes are still used in some older legends.
May all get replaced to match Benchmarking chart legend eventually. */
/*
  Legend module for chart legends. HTML structure should be:
    <div class="legend">
      <ul>
        <li class="legend-item">
          <div class="color-box" style="border-color: #FF0000"></div>
          My Practice
	</li>
      </ul>
    </div>
*/
.legend {
	margin: 0 auto;
	width: 90%;
}

.legend-centered {
	float: right;
	left: -50%;
	position: relative;
	width: auto;
}

.legend ul {
	float: left;
}

.legend-centered ul {
	left: 50%;
	position: relative;
}

.legend-item {
	margin: 0 4px 4px;
	float: left;
}

.legend-item-stacked {
	clear: left;
}

.with-cb { /* with color-box to the left, must increase margin. */
	margin-left: 6px;
}

/* Color boxes are often used in legends but are used elsewhere.  Usually as a div. */
.color-box {
	border: 5px solid transparent;
	float: left;
	margin-right: 6px;
	height: 0;
	width: 0;
}

.content-inner {
	min-height: 80vh;
}

span.btn:empty {
	display: none;
}

/* Generic notification styling */
.popup-notification {
	display: inline-block;
	position: fixed;
	z-index: 10000;
	top: 20px;
	padding: .75rem 1.25rem;
	right: -500px;
	color: #0c5460;
    background-color: #d1ecf1;
	border: 1px solid #bee5eb;
	border-radius: 0.2rem;
	opacity: 0;
	animation: slidein .5s forwards;
	-webkit-animation: slidein .5s forwards;
}

@-webkit-keyframes slidein {
	100% {
		right: 30px;
		opacity: 1;
	}
}

@keyframes slidein {
	100% {
		right: 30px;
		opacity: 1;
	}
}

.popup-notification.removing {
	right: 30px;
	opacity: 1;
	animation: slideout .5s forwards;
	-webkit-animation: slideout .5s forwards;
}

@-webkit-keyframes slideout {
	100% {
		right: -300px;
		opacity: 0;
	}
}

@keyframes slideout {
	100% {
		right: -300px;
		opacity: 0;
	}
}

.popup-notification > .message {
	margin-left: 5px;
}

/* Begin Print Table Styles */
.table-print {
	background-color: #ffffff;
	margin-top: 15px;
	overflow-x: unset;
}

.table-print tr {
	background-color: #ffffff;
	border: 0;
}

.table-print td {
	border: 0;
	padding: 0 5px;
}

.table-print th {
	border-top: 0;
	border-bottom: 1px solid;
}

.filter-container h5 {
	margin-bottom: 5px;
}

.bench-print-table {
	margin: 40px 0 0 150px;
}
/* End Print Table Styles */

/* These styles are for the entity selection modal */
#entitySelectionModal .entityChartOptionButton
{
    width: 11rem;
    font-weight: 500 !important;
}

/* These styles are for the filter action buttons */
.myPhysiciansButton button:not(.activeButton) {
	color: hsl(212, 95%, 40%);
}

.white-space-normal {
    white-space: normal;
}

#labelSkipWarningHTML {
	color: red;
}

.unspecifiedSubspecialtyWarningHTML {
	color: red;
	font-size: 0.9rem;
}

/* The selectpicker() plugin has some display issues on long lists that this solves */
.bootstrap-select .dropdown-menu.inner {
	max-height: 500px !important;
}

/* Modal header styling */
.medax-modal-header {
	background-color: hsl(212, 95%, 26%);
	color: white;
	border-bottom: 2px solid #dee2e6;
	padding: 1.25rem 1.5rem;
}

.medax-modal-title {
	font-size: 1.25rem;
	font-weight: 600;
}

/* Modal footer */
.medax-modal-footer {
	border-top: 1px solid #dee2e6;
	padding: 1rem 1.5rem;
	display: flex;
	/* justify-content: space-between; */
	align-items: center;
}