/*----------------------------------------TABLE OF CONTENTS----------------------------------------
A. BASE STYLES
    1. Body
    2. Navigation
B. LAYOUT STYLES
    1. Columns
    2. Positioning
    3. Spacing
C. MODULES STYLES
    1. Cards
    2. Key-value Pairs
    3. Checkboxes
D. STATE STYLES
    1. Hover Effects
    2. Click Effects
    3. Clicked Effects
E. THEME STYLES
    1. Colors
    2. Text
    3. Buttons
    4. Div
--------------------------------------END TABLE OF CONTENTS----------------------------------------*/
#display-none {
    display:none;
}

/*----------------------------------------A. BASE STYLES----------------------------------------
    /*--------------------1. Body-------------------*/
    body {
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-weight:lighter;
        font-size:15px;
    }
    .content { /*keeps fixed nav from covering scrollbar*/
        z-index: 1;
        position: relative;
    }
    /*--------------------2. Navigation-------------------*/
    .nav-sticky {
        position:fixed;
        z-index:100;
        padding:0;
        max-height: 3em;
        list-style:none;

        /*min-height:3em;*/
    }
    .nav-right {
        width:100%;
        text-align:right;
    }
    .nav-right > li {
        display:inline-block;
        font-size:180%;
        margin-left:3vw;
    }
    .nav-right a {
        color:white;
        margin:0;
        padding:0;
    }
    .nav-right li:last-of-type {
        margin-right:1vw;
    }
    .nav-left {
        width:100%;
        list-style:none;
        margin:0px 1vw;
    }
    .nav-left > li {
        margin-right:3vw;
        display:inline-block;
    }
/*----------------------------------------B. LAYOUT STYLES----------------------------------------
    /*--------------------1. Columns-------------------*/
    .container-row-height {
        height:100vh;
        overflow-y: auto;
    }
    .row-full {
        height:100%;
    }
    .row-1 {
        height: 4.16%;
        max-height: 4.26%;
    }
    .row-3 {
        max-height: 25%;
        height: 25%;
    }
    .row-6 {
        max-height: 50%;
        min-height: 50%;
    }
    .row-10 {
        max-height:83.333%;
        height: 83.333%;
    }
    .row-11 {
        max-height:91.66%;
        height: 91.66%;
    }
    .row-12 {
        max-height:100%;
        height:100%;
    }
    .row-1-offset-top {
        margin-top: 4.16%;
    }
    .row-1-offset-bottom {
        margin-bottom: 4.16%;
    }
    @media only screen and (min-width:768px) and (max-width: 1200px) {
        .hide-md {
            display:none;
        }
        .col-md-6-forced {
            width:50%;
            float:left;
            height:100%;
        }
        .height-md-54 {
            height:54rem;
        }
    }

    @media only screen and (min-width: 768px) {
        .show-md {
            visibility:visible;
        }
        .row-md-1 {
            height: 4.16%;
            max-height: 4.16%;
        }
        .row-md-4 {
            max-height:33.3%;
            height:33.3%;
            min-height:33.3%;
        }
        .row-md-5 {
            max-height:41.6%;
            height:41.6%;
            min-height:41.6%;
        }
        .row-md-6 {
            max-height: 50%;
            height: 50%;
        }
        .row-md-8 {
            max-height:66.66%;
            height:66.66%;
        }
        .row-md-10 {
            max-height:83.333%;
            height: 83.333%;
        }
        .row-md-11 {
            max-height:91.66%;
            height: 91.66%;
        }
        .row-md-12 {
            max-height:100%;
            height:100%;
        }
        .row-md-0-offset-top {
            margin-top: 0%;
        }
    }

    @media only screen and (min-width: 1200px) {
        .row-xl-1 {
            height: 4.16%;
            max-height: 4.16%;
        }
        .row-xl-2 {
            height: 8.333%;
            max-height: 8.333%;
        }
        .row-xl-4 {
            max-height: 16.667%;
            height: 16.667%;
        }
        .row-xl-5 {
            max-height: 20.83%;
            height: 20.83%;
            min-height: 20.83%;
        }
        .row-xl-6 {
            max-height: 25%;
            min-height: 25%;
        }
        .row-xl-7 {
            max-height: 29.16%;
            height: 29.16%;
            min-height: 29.16%;
        }
        .row-xl-9 {
            max-height: 37.5%;
            height: 37.5%;
            min-height: 37.5%;
        }
        .row-xl-10 {
            max-height:41.6%;
            height:41.6%;
            min-height:41.6%;
        }
        .row-xl-11 {
            max-height:45.83%;
            height:45.83%;
            min-height:45.83%;
        }
        .row-xl-12 {
            max-height: 50%;
            min-height: 50%;
        }
        .row-xl-20 {
            max-height:83.333%;
            height: 83.333%;
        }
        .row-xl-22 {
            max-height:91.66%;
            height: 91.66%;
        }
        .row-xl-23 {
            max-height:95.83%;
            height: 95.83%;
        }
        .row-xl-24 {
            max-height:100%;
            height:100%;
        }
        .row-xl-0-offset {
            margin-bottom: initial;
        }
        .col-xl-none {
            -webkit-box-flex: 0;
            -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            max-width: auto;
        }
    }
    @media only screen and (min-width: 1600px) {
        .row-xxl-12 {
            min-height: 50%;
            height:50%;
        }
    }

/*-------------------2. Positioning-------------------*/
    .absolute {
        position:absolute;
    }
    .relative {
        position:relative;
    }
    .abs-bottom-center {
        position:absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        text-align: center;
    }
    .right {
        right:0;
    }
    .bottom {
        bottom:0;
    }
    .top {
        top:0;
    }
    .above {
        z-index:3;
    }
    .behind {
        z-index:-1;
    }
    .float-none{
        float:none;
    }
    .float-right {
        float:right;
    }
    .inline-block {
        display:inline-block;
    }
    .block {
        display:inline-block;
        float:left;
    }
    .display-block {
        display:block;
    }
    .clear {
        clear:both;
    }
    .overflow-y {
        overflow-y: auto;
    }
    .overflow-hidden {
        overflow:hidden;
    }
    .overflow-x-hidden {
        overflow-x:hidden;
    }
    .height-auto {
        height:auto;
    }
    .hidden {
        display:none;
    }
    .center-abs {
        text-align:center;
        position:fixed;
        bottom:0;
        left:10%
    }
    @media only screen and (min-width: 768px) {
        .hidden-md {
            display: none;
        }
    }
    @media only screen and (min-width: 1200px) {
        .overflow-xl-y {
            overflow-y: auto;
        }
        .height-xl-auto {
            height:auto;
        }
        .display-xl-flex {
            display:flex;
        }
    }
/*-------------------3. Spacing-------------------*/
    .vertical-center {
        height:100%;
        display:flex;
        align-items:center;
    }
    .vertical-horizontal-center {
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .center-center {
        display:flex;
        align-items:center;
        justify-content:center;
        height:100%;
    }
    .horizonal-center {
        position:absolute;
        width:99%;
        margin:auto;
    }
    .horizontal-space-around {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .horizontal-space-between {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .flex-end {
        justify-content:flex-end;
    }
    .space-none {
        padding:0;
        margin:0;
    }
    .pad-2 {
        padding:2rem;
    }
/*----------------------------------------C. MODULES STYLES----------------------------------------
    /*--------------------1. Cards-------------------*/
    .card {
        padding:2em;
        display:inline-block;
    }
    .card-title {
        margin-bottom:1.5em;
    }
    .card-i {
        font-size: 2em;
    }
    .card-offset {
        padding-right:2em;
        padding-left:2em;
    }
    .card-textarea {
        width: 100%;
        height: 55%;
        overflow-y: auto;
        min-height:18rem;
        /*margin-bottom:0.3em;*/
    }
    @media only screen and (min-width: 1600px) {
        .card-textarea {
            min-height: 24rem;
        }
    }
    /*--------------------2. Key-Value Pairs-------------------*/
    .key-value-pair-container {
        font-size:95%;
        line-height:120%;
        clear:both;
    }
    .key-value-pair-key{
        width:30%;
        text-align:right;
        display:inline-block;
        margin:0;
    }
    .key-value-pair-value {
        width:65%;
        padding-left: 0.5em;
        display:inline-block;
        box-sizing:border-box;
        margin:0;
    }
    .key-value-pair-emphasis-container {
        display: inline;
        line-height: 0.3em;
        float: left;
        box-sizing: border-box;
        padding-right: 1em;
        margin: 0.5em 0em;
    }
    .key-value-pair-emphasis-key{
        font-size: 75%;
        font-weight: bold;
    }
    .key-value-pair-emphasis-value {
        font-size: 125%;
        letter-spacing: 0.1em;
    }

    /*--------------------3. Checkboxes-------------------*/

.styled-checkbox {
  position: absolute;
  opacity: 0;
}
.styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
}
.styled-checkbox + label:before {
  content: '';
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 20px;
  height: 20px;
  background: grey;
}
.styled-checkbox:hover + label:before {
  background: #f35429;
}
.styled-checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
  background: #f35429;
}
.styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.styled-checkbox:disabled + label:before {
  box-shadow: none;
  background: #ddd;
}
.styled-checkbox:checked + label:after {
  content: '';
  position: absolute;
  left: 5px;
  top: 9px;
  background: white;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

/*----------------------------------------D. STATE STYLES----------------------------------------
    /*--------------------1. Hover Effects-------------------*/
    .txt-white:hover {
        color:white;
        text-decoration:none;
    }
    .icon-link {
        display:inline-block;
    }
    .icon-link:hover {
        cursor:pointer;
        text-decoration:none;
        animation: rotate-back 0.4s ease-out;
        transform:rotate(0deg);
        transition-delay:0.1s;
    }
    /*--------------------2. Click Effects-------------------*/
    .txt-white:active {
        color:white;
    }
    .icon-link:active {
        opacity:0.7;
    }
    /*.icon-link-container li{
        width:auto;
        position:relative;
    }
    .icon-link:after {
        display:inline;
        content: '';
        position: absolute;
        top: 50%;
        left:50%;
        width: 10px;
        height: 10px;
        background: rgba(255, 255, 255, .5);
        opacity: 0;
        border:none;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%, -50%);
        transform-origin: 50% 50%;
        text-decoration:none;
    } 
    .icon-link:focus:not(:active)::after {
        animation: ripple-sm 0.4s ease-out;
    }*/
    /*--------------------3. Clicked Effects-------------------*/
    .txt-white:visited {
        color:#eee;
    }
/*----------------------------------------E. THEME STYLES----------------------------------------
    /*--------------------1. Colors-------------------*/
    .bg-off-black {
        background-color:#1b1b1b;
        color:white;
    }
    .bg-off-white {
        background-color:#fefefe;
        color:black;
    }
    .bg-black-grey {
        background-color: #141414;
        color:white;
    }
    .bg-grey {
        background-color:grey;
        color:white;
    }
    .bg-darker-grey {
        background-color:#292929;
        color:white;
    }
    .bg-dark-grey {
        background-color:#333;
        color:white;
    }
    .bg-med-grey {
        background-color: #4a4a4a;
        color:white;
    }
    .bg-light-grey {
        background-color:#ccc;
        color:white;
    }
    .bg-light-veil {
        background-color:rgba(255,255,255,0.05);
    }
    .bg-dark-red {
        background-color:darkred;
        color:white;
    }
    .bg-maroon {
        background-color: rgba(112,0,6,1);
        color:white;
    }
    .bg-dark-maroon {
        background-color: #450b00;
        color:white;
    }
    .bg-dark-brown {
        background-color:#261714;
        color:white;
    }
    .txt-black {
        color:black;
    }
    .txt-white {
        color:white;
    }
    .txt-red {
        color:red;
    }
    .txt-dark-red {
        color:darkred;
    }
    .txt-light-red {
        color: #e95342;
    }
    .txt-light-grey {
        color:#ccc;
    }
    a.txt-visited-white:visited {
        color:white;
    }

    /*--------------------2. Text Styling-------------------*/
    .txt-style-caps {
        text-transform:uppercase;
        letter-spacing:0.3em;
    }
    .txt-style-bold {
        font-weight:bold;
    }
    .txt-style-less-bold {
        font-weight: 500;
    }
    .txt-style-regular {
        font-weight:normal;
    }
    .txt-small {
        font-size: 0.8rem;
    }
    .txt-faint {
        color: rgba(255,255,255,0.8);
        font-size: 1.4rem;
    }
    .txt-faint2 {
       color: rgba(255,255,255,0.4);
    }
    .txt-smaller {
        font-size:0.8em;
    }
    .txt-larger {
        font-size:1.2em;
    }
    .txt-plain-underline {
        font-family: 'Open Sans', sans-serif;
        text-decoration: underline;
        text-transform:unset;
        letter-spacing:normal;
    }
    @media only screen and (max-width: 768px) {
    .txt-xs-unset {
        font-size: 1em;
    }
}
    /*--------------------3. Buttons Styling-------------------*/
    .button {
        border:none;
        padding:1.5em 1em;
        font-size:0.7em;
    }
    .button-full {
        width: 100%;
        margin:0.5em 0em;
    }
    /*--------------------4. Div Styling-------------------*/
    .border-thick-dark-gray {
        border: #212121  solid 3em;
    }
    .corners-sharp {
        border-radius:0;
        border: none;
    }
    .gradient-diag-grey {
        background-image: -ms-linear-gradient(top right, rgba(0,0,0,0) 0%, #6D6E73 100%);
        background-image: -moz-linear-gradient(top right, rgba(0,0,0,0)  0%, #6D6E73 100%);
        background-image: -o-linear-gradient(top right, rgba(0,0,0,0)  0%, #6D6E73 100%);
        background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, rgba(0,0,0,0) ), color-stop(100, #6D6E73));
        background-image: -webkit-linear-gradient(top right, rgba(0,0,0,0)  0%, #6D6E73 100%);
        background-image: linear-gradient(to bottom left, rgba(0,0,0,0)  0%, #6D6E73 100%);
    }
    .gradient-diag-dark-grey {
        background-image: -ms-linear-gradient(top right, rgba(0,0,0,0) 0%, #3d3d3d 100%);
        background-image: -moz-linear-gradient(top right, rgba(0,0,0,0)  0%, #3d3d3d 100%);
        background-image: -o-linear-gradient(top right, rgba(0,0,0,0)  0%, #3d3d3d 100%);
        background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, rgba(0,0,0,0) ), color-stop(100, #3d3d3d));
        background-image: -webkit-linear-gradient(top right, rgba(0,0,0,0)  0%, #3d3d3d 100%);
        background-image: linear-gradient(to bottom left, rgba(0,0,0,0)  0%, #3d3d3d 100%);
    }
   .gradient-diag-light-red {
        background-image: -ms-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(233,83,66,0.3) 100%);
        background-image: -moz-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(233,83,66,0.3) 100%);
        background-image: -o-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(233,83,66,0.3) 100%);
        background-image: -webkit-gradient(linear, right top, left top, color-stop(0, rgba(0,0,0,0)), color-stop(100, rgba(233,83,66,0.3)));
        background-image: -webkit-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(233,83,66,0.3) 100%);
        background-image: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(233,83,66,0.3) 100%);
    }
   .gradient-diag-brown {
        background-image: -ms-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(87,0,5,1) 100%);
        background-image: -moz-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(87,0,5,1) 100%);
        background-image: -o-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(87,0,5,1) 100%);
        background-image: -webkit-gradient(linear, right top, left top, color-stop(0, rgba(0,0,0,0)), color-stop(100, rgba(87,0,5,1)));
        background-image: -webkit-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(87,0,5,1) 100%);
        background-image: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(87,0,5,1) 100%);
    }


/*--------------------INPUTS-------------------*/
.button-link {
    text-transform:uppercase;
    letter-spacing:0.2em;
    padding:1.3em 10em;
    margin:2em;
    display:inline-block;
    transition:0.3s ease;
    text-decoration:none;
}
.button-link.sm {
    padding: 0.8em 4em;
    margin:1em;
    line-height:1em;
    font-size:0.8em;
    line-height:2em;
    text-decoration:none;
}
.button-link:hover {
    text-decoration:none;
    cursor:pointer;
    background-color:#292929;
}
.button-link:active {
    background-color:black;
    text-decoration:none;
}
.button-link:visited {
    text-decoration:none;
    /*color:initial;*/
}

/*--------------------ICONS-------------------*/
.icon.large {
    font-size:8em;
    margin-bottom:-0.2em;
}

/*--------------------EFFECTS-----------------*/
.nav-left .button-ripple {
    line-height: 6em;
    width: 100%;
    border-radius: 0em;
    font-size: 0.9em;
    color:white;
    transition:0.2s ease;
    transition-delay:0.1s;
    text-transform:uppercase;
    box-shadow:none;
    border:none;
}

.button-ripple:active, .button-ripple:focus, .button-ripple:hover {
    box-shadow:none;
    border:none;
    color:white;
    outline:0;
    filter:brightness(115%);
}

.nav-left .button-ripple:hover {
    /*line-height:8.5em;*/
    padding:1.5em 0em;
}

.button-ripple{
  position: relative;
  overflow: hidden;
}

.button-ripple:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, .5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1);
  transform-origin: 50% 50%;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  20% {
    transform: scale(25, 25);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(80, 80);
  }
}

@keyframes ripple-sm {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  20% {
    transform: scale(2, 2);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(8, 8);
  }
}

@keyframes rotate-back {
  0% {
    transform: rotate(0deg);
  }
  50% {
     transform: rotate(40deg);
  }
  100% {
    transform:rotate(0deg);
  }
}
.button-ripple:focus:not(:active)::after {
  animation: ripple 0.5s ease-out;
}



/*--------------------BACKGROUND IMAGE IN SEPARATE DIV EFFECT (blur looks good on chrome, bad on IE/EDGE, color shift looks good on Edge vice versa----------*/
.bg-img {
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
    background-size:cover;
}

.filter-red {
    /*background: rgba(199,39,18,0.81);
    background: -moz-linear-gradient(-45deg, rgba(199,39,18,0.81) 0%, rgba(141,13,10,1) 67%, rgba(112,0,6,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(199,39,18,0.81)), color-stop(67%, rgba(141,13,10,1)), color-stop(100%, rgba(112,0,6,1)));
    background: -webkit-linear-gradient(-45deg, rgba(199,39,18,0.81) 0%, rgba(141,13,10,1) 67%, rgba(112,0,6,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(199,39,18,0.81) 0%, rgba(141,13,10,1) 67%, rgba(112,0,6,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(199,39,18,0.81) 0%, rgba(141,13,10,1) 67%, rgba(112,0,6,1) 100%);
    background: linear-gradient(135deg, rgba(199,39,18,0.81) 0%, rgba(141,13,10,1) 67%, rgba(112,0,6,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c72712', endColorstr='#700006', GradientType=1 );*/

    background: rgba(156,55,43,0.81);
    background: -moz-linear-gradient(-45deg, rgba(156,55,43,0.81) 0%, rgba(127,18,18,1) 67%, rgba(112,0,6,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(156,55,43,0.81)), color-stop(67%, rgba(127,18,18,1)), color-stop(100%, rgba(112,0,6,1)));
    background: -webkit-linear-gradient(-45deg, rgba(156,55,43,0.81) 0%, rgba(127,18,18,1) 67%, rgba(112,0,6,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(156,55,43,0.81) 0%, rgba(127,18,18,1) 67%, rgba(112,0,6,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(156,55,43,0.81) 0%, rgba(127,18,18,1) 67%, rgba(112,0,6,1) 100%);
    background: linear-gradient(135deg, rgba(156,55,43,0.81) 0%, rgba(127,18,18,1) 67%, rgba(112,0,6,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c372b', endColorstr='#700006', GradientType=1 );    
    transition: 0.5s ease;
}

.filter-white {
    background:rgba(255,255,255,0.85);
    transition: 0.5s ease;
}

.filter-white.more-trans {
    background:rgba(255,255,255,0.75);
}

.filter-red.more-trans {
    background: rgba(156,55,43,0.71);
    background: -moz-linear-gradient(-45deg, rgba(156,55,43,0.71) 0%, rgba(127,18,18,0.9) 67%, rgba(112,0,6,0.9) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(156,55,43,0.71)), color-stop(67%, rgba(127,18,18,0.9)), color-stop(100%, rgba(112,0,6,0.9)));
    background: -webkit-linear-gradient(-45deg, rgba(156,55,43,0.71) 0%, rgba(127,18,18,0.9) 67%, rgba(112,0,6,0.9) 100%);
    background: -o-linear-gradient(-45deg, rgba(156,55,43,0.71) 0%, rgba(127,18,18,0.9) 67%, rgba(112,0,6,0.9) 100%);
    background: -ms-linear-gradient(-45deg, rgba(156,55,43,0.71) 0%, rgba(127,18,18,0.9) 67%, rgba(112,0,6,0.9) 100%);
    background: linear-gradient(135deg, rgba(156,55,43,0.71) 0%, rgba(127,18,18,0.9) 67%, rgba(112,0,6,0.9) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c372b', endColorstr='#700006', GradientType=1 ); 
}

.filter-blur {
    -webkit-filter:blur(10px);
            filter:blur(10px);
}


/*---------------------------------------------------SHAME CSS----------------------------------------*/
    .nav-right > li.txt-small {
        font-size:1.5rem;
    }
    .navbar2 {
        top:0;
        left:0;
    }

    #patientSummaryContainer {
        overflow:visible;
    }
    @media only screen and (min-width:1200px) {
        #patientSummaryContainer {
            overflow-y:auto;
        }
    }

    @media only screen and (min-width: 0px) and (max-width: 368px) {
         #ecg .navbar2 {
            position: absolute;
            transform: translate(0, 112%);
            background-color: #5a0000;
            justify-content: end;
            padding: 0.5em 2em;
            overflow-x:auto;
        }
        #patientSummaryContainer{
            padding-top: 2em;
        } 
        #navBarName {
            padding-right:0;
        }
        #toolbar-bottom{
            display:block;
            font-size:80%;
        }
        #toolbar-bottom span.nav-right{
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size:0.7em;
        }
        .container-row-height{
            padding-bottom:3%;
        }
        .hidden-xs {
            display:none;
        }
        .pad-xs-lg-bottom {
            padding-bottom:9em;
        }
        .border-xs-none {
            border: none;
        }
    }
    @media only screen and (min-width: 368px) and (max-width: 768px) {
        .container-row-height{
            padding-bottom:2%;
        }
    }

    @media only screen and (min-width: 368px) and (max-width: 1200px) {
        #ecg .navbar2 {
            position: absolute;
            transform: translate(0, 112%);
            background-color: #5a0000;
            justify-content: end;
            padding: 0.5em 2em;
            overflow-x:auto;
        }
        #patientSummaryContainer {
            padding-top:3%;
        }
        #ecg .navbar2 div {
            margin-left: 2em;
        }
        #ecg .navbar2 div:first-of-type{
            margin:0;
        }
    }
    .card {
        padding:2em;
    }
@media only screen and (min-width: 1200px) and (max-height: 968px) and (orientation:landscape) {
    .card {
        padding: 1em;
    }
    .key-value-pair-emphasis-value {
        letter-spacing:0;
    }
}