/* Variable declarations */
:root {
    /* base colors */
    --dark-blue: #004877;
    --milliman-blue: #004877;
    --milliman-green: #9DB290; /* color being retired */
    --old-mid-blue: #496290;
    --old-dark-blue: #395270;
    /* contrast, along with white and black */
    /* Accent colors */
    --milliman-vibrant-blue: #0080e2; /* deprecated */
    --milliman-ocean: #0078D4;
    --mcolor-sky: #50bde1;
    --mcolor-gold: #FFA100;
    --mcolor-emerald: #00A562;
    --mcolor-spring: #74BF60;
    --mcolor-sun: #FFC800;
    /* neutral colors */
    --milliman-charcoal: #39414d;
    --milliman-slate: #727a7d;
    --milliman-steel: #c6c9ca;
    /* Brand illustration colors */
    /* Chart use only */
    --mcolor-pine: #006B3F; /* deprecated */
    --mcolor-lava: #C02126;
    --mcolor-spruce: #006941;
    --mcolor-orange: #FF6400;
    --mcolor-turquoise: #00989F;
    /* non-brand additional colors */
    --mid-blue: #125d9a;
    --rust: #b31;
    /* entity selector colors */
    --search-bg: rgba(243,246,248, 1);
    --drilldown-bg: rgba(170,187,204, 0.5);
    --filter-bg: rgba(232, 213, 153, 1);
    /* Bootstrap colors */
    --bootstrap-blue: #0d6efd;
    /* Generic named colors */
    --light-green: #dff0d8;
    --light-red: #f2dede;
}

@font-face {
    font-family: 'BentonSans-Medium';
    src: url('fonts/BentonSans-Medium.eot?#iefix') format('embedded-opentype'), url('fonts/BentonSans-Medium.otf') format('opentype'), url('fonts/BentonSans-Medium.woff') format('woff'), url('fonts/BentonSans-Medium.ttf') format('truetype'), url('fonts/BentonSans-Medium.svg#BentonSans-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BentonSans-Regular';
    src: url('fonts/BentonSans-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/BentonSans-Regular.otf') format('opentype'), url('fonts/BentonSans-Regular.woff') format('woff'), url('fonts/BentonSans-Regular.ttf') format('truetype'), url('fonts/BentonSans-Regular.svg#BentonSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
  font-size: 14px;
  font-family: 'BentonSans-Regular', 'Segoe UI', Verdana, Helvetica, sans-serif
}

@media (min-width: 768px) {
  html {
    font-size: 1rem;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.errorText{
    color: var(--rust);
    font-style: italic;
}

.mainContentUseImage {
    background-color: rgb(59,63,74);
    background: linear-gradient(90deg, rgba(59,63,74,1) 0%, rgba(48,73,80,1) 35%, rgba(23,109,142,1) 65%, rgba(61,200,111,1) 100%);
    background-image: url(/images/hpi-bg-1200.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
}

.mainContentUseImage .searchListWrap{
    color: black;
}

.mainContentWrapper {
    min-height: 80vh;
}

h1.dashboardTitle{
    font-weight: 300;
    font-size: 2.5rem;
    margin: 0.5rem 0;
    background-color: rgba(20,20,20,0.35);
    padding-left: .5rem;
}
h1.pageTitle {
    line-height: 2.9rem;
    font-weight: 300;
    font-size: 2.1rem;
    margin: 0.5rem 0;
    padding-left: .5rem;
}

.titleBox{
    align-items: baseline;
}

.hide {
    display: none;
}

.mcgLogoWrap {
    height: auto;
    width: 7.5rem;
    margin-right: 1.2rem;
    vertical-align: baseline;
    max-height: 48px;
    overflow: visible;
    transform: translate(0,-.3rem);
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.resizable {
  resize: both;
  overflow: auto;
}

.nowrap{
    white-space: nowrap;
}

.inlineBlock {
    display: inline-block; /*  !important */
}

.flexrow-nowrap {
    display: flex;
    flex-flow: row nowrap;
    /*
                    flex-direction: row;
                    flex-wrap: nowrap;
                        */
}

.flexrow-reverse {
    display: flex;
    flex-direction: row-reverse;
}


.databaseInternalWrap{
    padding-left: .75rem;
}
.databaseSelectDropdown{
    display: inline-block;
    width: unset;
    margin-top: 0.5rem;
    background-color: rgba(60,60,10,0.7);
    color: white;
    opacity: .7;
}

.databaseSelectDropdown:hover, .databaseSelectDropdown:focus {
    background-color: var(--dark-blue);
    opacity: 1;
}

.flexrow {
    display: flex;
    flex-direction: row;
}
.gapBoxes{
    gap: .3rem;
 }

.gapBoxes-large {
    gap: 1rem;
}

.flexstack {
    display: flex;
    flex-direction: column;
}

/* Opportunity widget */
.headerRow{
    font-weight: 600;
    gap: .2rem;
    margin-bottom: .2rem;
}

.topQuartile{
    background-color: var(--light-green);
}
.bottomQuartile{
    background-color: var(--light-red);
}


@media (max-width: 767px) {
    .flexrow.wrapFlexOnSmall {
        flex-direction: column;
    }
}


.flexbox {
    display: flex;
}

.flexgap-small{
    gap: 0.3rem;
}
.flexgap-large {
    gap: 1rem;
}

.flexgrow-fill{
    flex-grow: 99;
}

/* Flex utils */
.flex-1 {
    flex: 1 !important;
}
.flex-2 {
    flex: 2 !important;
}
.flex-3 {
    flex: 3 !important;
}
.flex-4 {
    flex: 4 !important;
}
.flex-5 {
    flex: 5 !important;
}
.flex-6 {
    flex: 6 !important;
}
.flex-auto {
    flex: auto !important;
}

/* Use these three for fade out/in effects */
.fadeOpacity{
    transition: opacity .5s ease-out;
}

.fadeOut{
    opacity: 0;
}
.fadeIn{
    opacity: 1;
}

.floatRight{
    float: right;
}
.floatLeft{
    float: left;
}

.relativeItem {
    position: relative;
}

.navbarMessage {
    color: white;
    padding-left: 1rem!important;
    /* text-align: center;*/
}

@media (min-width: 768px) {
    .navbarMessage {
        padding-left: 6rem;
        /* text-align: center;*/
    }
}

/* Message Box */


.msgboxWrap {
    background-color: white;
    color: black;
    overflow: auto;
}

    .msgboxWrap .msgboxTitle{
        padding: 1rem;
        border-bottom: 1px solid #ccc;
        background-color: #ddd;
        font-weight: bold;
    }
    .msgboxWrap .msgboxBody {
        padding: 1rem;
        border-bottom: 1px solid #ccc;
    }
    .msgboxWrap .msgboxMessage {
        margin-bottom: 1rem;
    }

.drgPopup {
    box-shadow: 3px 3px 5px #888888;
    position: absolute;
    z-index: 150;
    background-color: #efefef;
    border: 1px solid #999;
    border-radius: 6px;
    padding: 10px;
    min-width: 400px;
    max-width: 60%;
}

.popupTitlebar{
    font-weight: 600;
    font-style: italic;
    color: #888;
    font-size: 1.2rem;
    padding-left: .5rem;
}

.controlTab{
    display: block;
    position: relative;
    height: 2.5rem;
    width: 6rem;
    cursor: pointer;
    border-radius: 0 0  6px 6px;
    border: 1px solid #999;
    background-color: #bbb;
}

.controlTab div{
    height: 2px;
    background-color: white;
    border-bottom: 1px solid black;
    margin: .5rem;
}


.scrollList {
    max-height: 70vh;
    overflow: auto;
    padding: 10px;
}
    .scrollList .closeButtonWrap{
        display: flex;
    }
    
    .scrollList ul {
        list-style: none;
        margin: 0;
    }

        .scrollList ul > li {
            margin-bottom: 3px;
            margin-left: 0;
            padding: 2px 4px 4px 0;
            border-bottom: 1px dashed #bcd3db;
            cursor: pointer;
        }

            .scrollList ul > li:hover, .scrollList ul > li[aria-selected="true"] {
                background-color: #70a1ae;
                color: #fff;
            }

.selectedItemWrap
{

}

.selectedItemWrap > label {
    font-weight: 600;
}


.panelBody label {
    font-weight: 600;
}

    .selectedItemWrap > .pickedItemList {
        position: relative;
        max-height: 70vh;
        min-width: 400px;
        min-height: 8rem;
        overflow: auto;
        padding: 10px;
        border: 1px solid #CCC;
        border-radius: 6px;
        background-color: #fff;
    }

.selectedItemWrap > .pickedItemList.areaList {
    height: 17rem;
}

.selectedItemWrap > .pickedItemList ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
        .selectedItemWrap > .pickedItemList li {
            margin: 0;
            position: relative;
            border: 1px solid #7ac0da;
            border-radius: 4px;
            padding: 2px .5rem;
            display: block;
            margin-bottom: 3px;
        }
            .selectedItemWrap > .pickedItemList li .desc {
                display: inline-block;
                max-width: calc(100% - 2rem);
                text-overflow: ellipsis;
            }

            .selectedItemWrap > .pickedItemList li button.removeItemButton {
                width: 1.2rem;
                height: 1.2rem;
                position: absolute;
                top: 4px;
                right: 6px;
                border: 1px solid black;
                font-weight: bold;
                padding: 0;
            }


                .selectedItemWrap > .pickedItemList li button.removeItemButton:hover {
                    cursor: pointer;
                    background-color: #0088cc;
                    color: #FFF;
                }

            
                .selectedItemWrap > .pickedItemList li button.removeItemButton span {
                    font-size: 1.5rem;
                    position: relative;
                    top: -.75rem;
                }


/* Search related styles */

.mySpinnerDiv.searchSpinner {
    position: absolute;
    left: 6.5rem;
    min-height: 1.5rem;
    min-width: 1.5rem;
    display: none;
}

.searching .searchSpinner{
    display: block;
}

.searchListWrap .resultBlock{
    margin-bottom: 1rem;
}

.searchListWrap a.resultLink {
    text-decoration: none;
    color: var(--dark-blue);
    cursor: pointer;
}

.searchListWrap a.resultLink:hover{
    text-decoration: underline;
    color: var(--milliman-blue);
}

.searchListWrap .resultBlock .titleRow h3{
    color: #555;
    font-size: 1rem;
    margin-bottom: .3rem;
}

.searchListWrap .hospResults .titleRow .resultSummary {
    font-style: italic;
    color: #555;
}

.searchListWrap .hospResults .resultRow:hover {
    background-color: rgba(220,220,220,0.5);
}


.searchListWrap .hospResults .headerRow {
    position: sticky;
    background: #eee;
    top: 0;
    font-size: 1.15rem
}

.searchOutputOverlay {
    position: absolute;
    z-index: 2000;
    padding-bottom: 1rem;
    left: 5%;
    margin-right: 2rem;
    background-color: white;
    border: 1px solid #333;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 2px 2px 2px var(--milliman-charcoal);
}

.searchResultScroll {
    max-height: calc(65vh - 3rem);
    overflow: auto;
    padding-right: .6rem;
    text-overflow: ellipsis;
}

    .searchResultScroll ul {
        list-style-type: none;
        padding-left: .5rem;
    }

@media(max-height: 600px;) {
    .searchResultScroll {
        max-height: calc(85vh - 3rem);
    }
}
    .searchOutputOverlay:not(.showResults) {
        display: none;
    }

.searchOutputOverlay.showResults .searchResultScroll {
    padding: 1.5rem;
    padding-top: 0;
}

    @media (min-width: 768px) {
        .searchOutputOverlay {
            left: 25%;
            margin-left: 1.7rem;
            margin-right: 1.7rem;
        }
}

.floatingToolPanel{
    position: absolute;
    transition: height .3s ease, opacity .3s ease;
    z-index: 200;
}

.collapsePanel:not(.allowGrow){
    transition: all .5s ease;
    overflow: hidden;
    max-height: 100vh;
}

.collapsePanel.allowGrow {
    max-height: initial;
}
.collapsePanel:not(.allowGrow):not(.searchResultsVisible)[aria-expanded="true"] {
    overflow: auto;
}

.collapsePanel[aria-expanded="false"] {
    overflow: hidden;
    max-height: .5rem;
}

.collapsePanel.topBorder{
    border-top: .5px solid #fff;
}
.collapsePanel.topBorder[aria-expanded="false"]{
    max-height: .5rem;
    background-color: #bbb;
    border-bottom: 1px solid #aaa;
    border-top: 3px solid #555;
}


.controlPanel .panelBody.collapsing {
        transition: height 0.8s;
        overflow: hidden;
    }

.controlPanel {
    border-radius: 3px;
    margin: 6px 0px;
    border: 1px solid #dbdbdb;
}

    .controlPanel > .panel-heading {
        display: block;
        padding: 8px 15px;
    }

.controlPanel > .panel-heading .headerText {
    font-weight: bold;
    font-size: 1.1em;
}

.controlPanel > .panelBody {
    padding: 8px 15px;
}

.controlPanel.headingGray > .panel-heading {
    background-color: #dbdbdb;
}


.blackNum{
    color: black;
    font-size: 0.75rem;
    text-decoration: none!important;
}

.casemixIcon {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: 3px;
    background-image: url(/images/icons/icon_casemix.png);
}

.descCaseMix{
    margin-left: 1rem;
    margin-right: 1rem;
    vertical-align: text-bottom;
    cursor: help;
}
.confidenceIntervalIcon {
    display: inline-block;
    float: right;
    width: 16px;
    height: 16px;
    margin: 3px;
    background-image: url(/images/icons/icon_confidence.png);
}

.confidenceIntervalDataIcon {
    display: inline-block;
    float: right;
    width: 22px;
    height: 22px;
    margin: 3px;
    background-image: url(/images/icons/icon_ci.png);
}
.metricsGridRoot .confidenceIntervalDataIcon {
    margin-left: 1rem;
    margin-right: 1rem;
    vertical-align: text-bottom;
    cursor: help;
}

/* Drag window styles */
.winDragBar {
    cursor: move;
    color: white;
    background-color: var(--milliman-blue);
    line-height: 1.2rem;
    padding: .4rem;
    position: sticky;
    top: 0;
}
.winContentBox {
    background-color: white;
    height: calc(95% - 1.2rem);
}



/* Tab styles */

.tabs [role="tablist"] {
    margin-top: .7rem;
    border-bottom: 1px solid #EEE
}

    .tabs [role="tablist"] button[role=tab] {
        outline: none;
        border-top-left-radius: .4rem;
        border-top-right-radius: .4rem;
        border: 1px;
        border-color: #888888;
        background-color: #BBB;
        padding: .3rem 1.3rem .1rem 1.3rem;
    }
        .tabs [role="tablist"] button[role=tab][aria-selected=true] {
            border-bottom: 0;
            background-color: #EEE;
        }


table td.heavyLeftBorder, table th.heavyLeftBorder {
    border-left: 1.6px solid #333;
}


.reportDefaultColors h2 {
    font-size: 1.1rem;
    color: #333;
}

.reportDefaultColors table > thead th {
    background-color: #395270;
    color: #fff;
    text-shadow: 1px 1px 2px #333;
}

.sumAdditionalData {
    font-style: italic;
    color: #b31;
    font-size: 1.1em;
}

a span.greenDot {
    cursor: pointer;
}

span.greenDot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #BB3;
}



/* Add the processing overlay styles */

.mySpinnerDiv {
    position: relative;
    min-width: 1rem;
    min-height: 1rem;
}

.mySpinnerDiv.center {
    display: block;
    width: 5rem;
    height: 5rem;
    margin-left: auto;
    margin-right: auto;
}


.mySpinnerDiv div {
    position: absolute;
    border: 4px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: mySpinnerAnimation 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.mySpinnerDiv.dark div {
    border-color: #333;
}


        .mySpinnerDiv div:nth-child(2) {
            animation-delay: -0.5s;
        }

    @keyframes mySpinnerAnimation {
        0% {
            top: 36px;
            left: 36px;
            width: 0;
            height: 0;
            opacity: 1;
        }

        100% {
            top: 0px;
            left: 0px;
            width: 72px;
            height: 72px;
            opacity: 0;
        }
    }