/*To avoid display of angular templates during initialization*/
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}
/*#region Main */

@font-face {
    font-family: 'KPIDashboard';
    src: url('../fonts/KPIDashboard.woff') format('woff'), 
         url('../fonts/KPIDashboard.ttf') format('truetype');
         /*url('../fonts/KPIDashboard.svg') format('svg');*/
}

/* Remove Terumo font for now, but leave references in fallback lists - Calibri will be first choice
  @font-face {
    font-family: 'TerumoRegular';
    src: url('../fonts/terumobct_rg-webfont.eot');
    src: url('../fonts/terumobct_rg-webfont.eot?#iefix') format('embedded-opentype'), 
        url('../fonts/terumobct_rg-webfont.woff2') format('woff2'), 
        url('../fonts/terumobct_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}*/

.icon {
    font-family: 'KPIDashboard';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-KPI-Dashboard-icon-procmetrics:before {
    content: "\e60D";

}

.icon-KPI-Dashboard-icon-benchmarks:before {
    content: "\e60E";

}

.icon-KPI-Dashboard-icon-alerts:before {
    content: "\e60F";
}

.icon-KPI-Dashboard-icon-productflags:before {
    content: "\e610";
}



.icon-KPI-Dashboard-icon-config:before {
    content: "\e600";
}

.icon-KPI-Dashboard-icon-customdoses:before {
    content: "\e601";
}

.icon-KPI-Dashboard-icon-dasboard:before {
    content: "\e602";
}

.icon-KPI-Dashboard-icon-devicedata:before {
    content: "\e603";
}

.icon-KPI-Dashboard-icon-events:before {
    content: "\e604";
}

.icon-KPI-Dashboard-icon-facilitycomparison:before {
    content: "\e605";
}

.icon-KPI-Dashboard-icon-goals:before {
    content: "\e606";
}

.icon-KPI-Dashboard-icon-MAIN:before {
    content: "\e607";
}

.icon-KPI-Dashboard-icon-metricsovertime:before {
    content: "\e608";
}

.icon-KPI-Dashboard-icon-metrictotals:before {
    content: "\e609";
}

.icon-KPI-Dashboard-icon-notifications:before {
    content: "\e60a";
}

.icon-KPI-Dashboard-icon-yearoveryear:before {
    content: "\e60b";
}

.icon-Trima-KPI-Dashboard:before {
    content: "\e60c";
}

.icon-codepen:before {
    content: "\eae4";
}

.app-icon{
    font-size:32px;
}

.app-name {
    font-family: TerumoRegular, Calibri, Arial, Helvetica, sans-serif;
    font-size: 24px;
    text-align: center;
}

.custom-dose-indicator {
    margin-left: 10px;
    font-size: 18px;
    color: #447EBC;
    vertical-align: middle;
}

.pointer{
    cursor:pointer;
}

html, body {
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
}

.layout-container {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

#main {
    padding-left: 0;
    padding-right: 0;
    padding-top: 90px;
    padding-bottom: 70px;
    height: 100%;
    background-color: white;
    overflow-y: hidden;
}

.main {
    padding-top: 55px;
    height: 100%;
    padding-bottom: 70px;
}
/**/


.maincontent {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-left: 15px;
}

#mainNavBar {
    font-family: TerumoRegular, Calibri, Arial, Helvetica, sans-serif;
}


#topSubMenu {
    width: 100%;
    height: 40px;
    background-color: #f5f5f5;
    margin-top: 55px;
    padding-top: 3px;
    padding-left: 4px;
    border-bottom: #D0D0CE;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    font-family: TerumoRegular, Calibri, Arial, Helvetica, sans-serif;
}

footer {
    border-top: #D0D0CE;
    border-top-style: solid;
    border-top-width: 1px;
    background-color: white;
}

.copyright {
    font-size: x-small;
    margin-left: 20px;
    margin-top: -15px;
}


#leftSidePanel {
    width: 50px;
    text-align: center;
    background: #D0D0CE;
    color: white;
    height: 100%;
}

.k-header, .k-footer, .k-footer-template td {
    background-image: none;
    background-color: #dadbdc;
}



#rightSidePanel {
    padding-right: 5px;
    padding-left: 5px;
    width: 340px;
    background-color: #f5f5f5;
    border-right: #D0D0CE;
    border-right-style: solid;
    border-right-width: 1px;
    height: 100%;
    overflow-x: scroll;
    padding-bottom: 20px;
}

#alignRight{
	margin-left: auto;
        margin-top: 30px;
}
.modal-prompt-small {
    width: 700px;
    height: 500px;
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%)

}

.filterpanel {
}

.xlsDownloadButton {
    color: #3C454F;
}

    .xlsDownloadButton:hover {
        color: #FFFFFF;
        text-shadow: 0 0 5px #3C454F;
    }


.filterButton {
    color: #3C454F;
}

    .filterButton:hover {
        color: #FFFFFF;
        text-shadow: 0 0 5px #3C454F;
    }

.activeFilter {
    color: #FFFFFF;
    text-shadow: 0 0 5px #3C454F;
}

.btn-primary {
    color: #fff;
    background-color: #009A44;
    border-color: #D0D0CE;
    border-radius: 0;
    min-width: 80px;
    max-width: 150px;
    white-space: normal;
    word-wrap: break-word;
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
        color: #fff;
        background-color: #008A24;
        border-color: #D0D0CE;
        border-radius: 0;
        word-wrap: break-word;
    }

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    border-radius: 0;
    min-width: 80px;
    max-width: 150px;
    white-space: normal;
    word-wrap: break-word;
}

.btn-default-dropdown {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    border-radius: 0;
    min-width: 300px;
    max-width: 300px;
    white-space: normal;
    word-wrap: break-word;
}

    .btn-default-dropdown:hover, .btn-default-dropdown:focus, .btn-default-dropdown:active, .btn-default-dropdown.active, .open > .dropdown-toggle.btn-default-dropdown {
        color: #fff;
        background-color: #008A24;
        border-color: #D0D0CE;
        border-radius: 0;
        min-width: 300px;
        max-width: 300px;
        white-space: normal;
        word-wrap: break-word;
    }

.terumoGreen-background {
    background: #009A44;
}

.validationError {
    color: red;
    font-weight: bold;
}

.whitefont {
    color: white;
}

.checkboxChildren {
    margin-left: 10px;
}

.loginForm {
    text-align: center;
    width: 350px;
    margin-top: 100px;
}

.slideout-fromright {
    height: 120px;
    width: 70%;
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 10px;
}

#applicationName {
    margin-top: 1px;
    margin-left: 20px;
    margin-right: 50px;
    color: white;
}

.page-title-icon {
    font-size: 42px;
}

.page-kpi-error {
    margin-top: 100px;
}

.page-kpi-nodata {
    margin-top: 100px;
}

.page-kpi-select-account {
    margin-top: 200px;
}


#accountSelectionModal .modal-body {
    max-height: 600px;
    overflow: auto;
}

.kpi-chartContainer {
    display: inline-block;
    background-color: white;
    margin: 5px;
    text-align: center;
}

.kpi-chart {
    height: 200px;
    width: 400px;
}

.kendoGrid {
    display: inline-block;
}

.addButton {
    color: #009a44;
}

.addLabel{
    cursor:pointer;
}
.addLabel:hover {
    color:#009a44;
}

.removeButton {
    color: red;
}

#notificationEditor .modal-dialog {
    width: 80%;
}


.scrollable-div {
    border: 2px solid #ccc;
    height: 150px;
    overflow-y: scroll;
    overflow-x: scroll;
    padding: 3px;
}

.form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline {
    padding-top: 3px;
    margin-top: 0;
    margin-bottom: 0;
}

.lastModifiedText {
    font-size: .8em;
}

.ng-modal-overlay {
    /* A dark translucent div that covers the whole screen */
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: aquamarine;
    opacity: 0.4;
}

.ng-modal-dialog {
    /* A centered div above the overlay with a box shadow. */
    z-index: 10000;
    position: absolute;
    width: 50%; /* Default */
    /* Center the dialog */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 4px 4px 80px #000;
    border-radius: 5px;
}

.ng-modal-dialog-content {
    padding: 10px;
    text-align: left;
    font-family: TerumoRegular, Calibri, Arial, Helvetica, sans-serif;
}

/* Tab Navigation */
.nav-tabs-terumo {
    margin: 0;
    padding: 0;
    border: 1px;
}

    .nav-tabs-terumo > li > a {
        color: #000000;
        background: #DADADA;
        border-radius: 0;
        /*box-shadow: inset 0 -8px 7px -9px rgba(0,0,0,.4),-2px -2px 5px -2px rgba(0,0,0,.4);*/
    }

    .nav-tabs-terumo > li.active > a,
    .nav-tabs-terumo > li.active > a:hover {
        background: #ffffff;
        /*box-shadow: inset 0 0 0 0 rgba(0,0,0,.4),-2px -3px 5px -2px rgba(0,0,0,.4);*/
    }

/* Tab Content */
.tab-pane-terumo {
    background: #ffffff;
    /*box-shadow: 0 0 1px #000;*/
    border: 1px solid #DADADA;
    text-align: left;
    padding: 10px;
}

.select {
    max-width: 200px;
    overflow: hidden;
}

.tab-content {
    border: thin;
    border-color: a;
}

.ng-modal-close {
    position: absolute;
    top: 3px;
    right: 5px;
    padding: 5px;
    cursor: pointer;
    font-size: 120%;
    display: inline-block;
    font-weight: bold;
    font-family: TerumoRegular, Calibri, Arial, sans-serif;
}

label {
    min-width: 100px;
    max-width: 400px;
    white-space: normal;
}

table.tableSection {
    display: table;
    width: 100%;
    overflow-y: auto;
}

    table.tableSection thead, table.tableSection tbody {
        float: left;
        width: 100%;
        overflow-y: auto;
    }

    table.tableSection tbody {
        overflow: auto;
        height: 100%;
        overflow-y: auto;
    }

    table.tableSection tr {
        width: 100%;
        display: table;
        text-align: left;
    }

.wrapTDSelected {
    color: white;
    background-color: lightgray;
    white-space: normal;
    word-wrap: break-word;
}

.wrapTD {
    white-space: normal;
    word-wrap: break-word;
}

.wrapTable {
    overflow-x: auto;
    background-image: linear-gradient(left, #ffffff, rgba(255, 255, 255, 0)), linear-gradient(right, #ffffff, rgba(255, 255, 255, 0)), linear-gradient(left, #c3c3c5, rgba(195, 195, 197, 0)), linear-gradient(right, #c3c3c5, rgba(195, 195, 197, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 4em 100%, 4em 100%, 1em 100%, 1em 100%;
    background-attachment: local, local, scroll, scroll;
}

    .wrapTable > td {
        white-space: normal;
        word-wrap: break-word;
    }


.profileScroll {
    overflow: auto;
    min-height: initial;
    max-height: 600px;
}

.invalid-account-icon {
    background-color: transparent;
}

.save-profile-btn{
    margin-left:5px;
}

.saveProfileModalPartialScroll {
    overflow: auto;
    min-height: initial;
    max-height: 400px;
}

.adminTable {
    table-layout: fixed;
}

.adminTD {
}

.adminScroll {
    overflow: auto;
    min-height: initial;
    max-height: 65%;
}

.metricDescriptionHeader {
    min-width: 200px;
    max-width: 400px;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
}

.axis-label {
    font-size: small;
    font-weight: normal;
}

.center {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.companyLogo {
    display: inline-block;
    vertical-align: middle;
    margin-top: 25px;
    float: left;
    margin-bottom: 25px;
    height: 24.01px
    margin-left: -8px
    width: 136.79px

}

.copy-right {
    font-size: 12px;
    color: #444B52;
    text-align: center;
    margin-top: 2%;
}

.customerLogo {
    display: inline-block;
    height: 100%;
    max-height: 65px;
    margin-top: 5px;
    margin-bottom: 5px;
    float: right;
}

.terumoFontLabel {
    min-width: 100px;
    max-width: 700px;
    white-space: normal;
    font-family: TerumoRegular, Calibri, Arial, Helvetica, sans-serif;
}

.dropdown-menu {
    min-width: 300px;
}

.kendoClickable g, .kendoClickable g path, .kendoClickable path[id*=_outline], .kendoClickable path[stroke-width="1"], .kendoClickable text {
    cursor: pointer;
}


.bubble 
{
position: absolute;
width: 270px;
height: 85px;
color: #31708f;
background-color: #d9edf7;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: #bce8f1 solid 2px;
z-index: 99;
display: flex;
padding: 10px;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 20px 15px 0;
border-color: transparent #d9edf7;
display: block;
width: 0;
z-index: 100;
margin-top: -15px;
left: -20px;
top: 50%;
}

.bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 16px 21px 16px 0;
border-color: transparent #bce8f1;
display: block;
width: 0;
z-index: 99;
margin-top: -16px;
left: -23px;
top: 50%;
}

.bubble-text
{
    margin: auto 8px auto 20px;
}
.bubble-text:before {
  position:absolute;
  top: 33px;
  left: 5px;
  display: block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e086";
}

.info-expanded {
    color: #b3c3fa;
}
.info-expanded:hover {
    color: #4ba5ff;
}

.legend-item-label {
    font: 12px;
    font-weight: normal;
    margin: 2px;
    color: gray;
    max-width: 100%;
    width: 100%;
}

.legend-item {
    font: 12px;
    font-weight: normal;
    margin: 2px;
    cursor: pointer;
    min-width: 250px;
    color: gray;
}

.legend-marker {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-left: 3px;
    margin-right: 3px;
}

.leftAlignedTooltip {
    display: inline-block;
    text-align: left;
}
    
/************ share profiles *****************/
/*override the height of multiselect list items*/
    .share-profile .multiSelect .checkBoxContainer{
    max-height: 200px;
}