/*
    Copyright (c) 2001 Envision Technology Partners, Inc. All rights reserved.
*/
html {
    scroll-padding-top: 80px;
}

.imageOrange-t {
    background: url('images/icons/orange-t.png') no-repeat center;
    display: inline-block;
    height: 18px;
    width: 18px;
    margin-left: 5px;
    *display: inline;
}

.icon-shield-fill-exclamation {
    background: url('images/icons/shield_fill_exclamation.svg') no-repeat center;
    height: 18px;
    width: 18px;
    display: inline-block;
}

.tagGone{
    display:none !important;
}
.tagHidden{
    visibility: hidden;
}
.tagVisible {
    visibility:visible;
}

.notification-div{
    margin:5px 25px;
    color:rgb(255, 174, 0);
    font-weight:bold;
    font-size:20px;
    text-align:center;
}

.multiline-textbox{
    width:100%;
    height:135px;
}

.blink_me {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 6;
    
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 6;
    
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 6;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
.push {
  clear: both;
  height: 100px;
}

.daterange-style {
    background: #fff; 
    cursor: pointer; 
    padding: 5px 10px;
    border: 1px solid #ccc;
}
@font-face {
  font-family: 'Amaranth';
  src: url('fonts/Amaranth-Regular.eot');
  src: url('fonts/Amaranth-Regular.eot?#iefix') format('embedded-opentype'), 
       url('fonts/Amaranth-Regular.woff') format('woff'), 
      url('fonts/Amaranth-Regular.ttf') format('truetype'), 
      url('fonts/Amaranth-Regular.svg#Amaranth-Regular') format('svg');
}

@font-face {
    font-family: 'Droid Sans Monoregular';
    src: url('fonts/DroidSansMono-webfont.eot');
    src: url('fonts/DroidSansMono-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/DroidSansMono-webfont.woff') format('woff'),
         url('fonts/DroidSansMono-webfont.ttf') format('truetype'),
         url('fonts/DroidSansMono-webfont.svg#droid_sans_monoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.env-error-page-text, .env-error-page-text-red {
    font-family: Amaranth; 
   font-size: 54px;
    text-align: center; 
    width: 570px;
}

.env-error-page-text-red {
     font-size: 18px; 
    color: rgb(226, 106, 106); 
}

.radio-button-label {
    margin-top: -4px;
    margin-left: 4px;
    padding-left: 7px !important;
    padding-right: 15px !important;
}

#note-text-view {
    margin-top: 3px;
    max-height: 260px;
    overflow-y: auto;
}
#note-text-add, #note-text-edit, #case-description-add {
    min-height: 180px;
    overflow-x: auto;
}

.block {
    display: block;
}
.pointer, .pointer-text {
    cursor: pointer;
}
.pointer-text:hover {
    color: #333333;
    text-decoration: underline;
}

.caret-up{
    color:#838383;
    transform:rotate(-180deg);
    -webkit-transform:rotate(-180deg);
    -ms-transform:rotate(-180deg);
    margin-top: 0;
    cursor:pointer;
}
.caret-down{
    color:#838383;
    margin-top:0;
    cursor:pointer;
}
.expanded-note-height {
    min-height: 117px;
}
.flex-space {
    width: 50%;
}
.btn-top-right {
    position: absolute;
    top: 90px;
    right: 0;
}

#MainNotificationHeaderDiv ul {
    max-height: 335px;
    overflow-x: auto;
}
#MainNotificationHeaderDiv .notification-info {
    min-height: 10px;
}

#AnchorNotificationHeader {
    margin: 4px;
}

#AnchorNotificationHeader.btn{
    border:1px solid #ccc;
    padding: 1px 5px!important;
    font-size: 12px;
    line-height: 2;
    border-radius: 3px;
    background:#f6f6f6; 
}

#AnchorNotificationHeader.btn:hover{
    background:#f1f1f1; 
}

#ClearAllNotificationHeader{
    margin: 4px;
}

#ClearAllNotificationHeader.btn{
    border:1px solid #ccc;
    padding: 1px 5px!important;
    font-size: 12px;
    line-height: 2;
    border-radius: 3px;
    background:#f6f6f6;
    width: 98%;
}

#ClearAllNotificationHeader.btn:hover{
    background:#f1f1f1; 
}

#SpanHasNotifications {
    vertical-align: inherit;
    border-bottom: none;
    padding-top: 5px;
    padding-right: 0.4em;
    padding-bottom: 0.2em;
    padding-left: 0.4em;
    border-radius: 10px;
}

.dismiss-alert-button {
    margin-top: -30px;
    padding-right: 5px !important;
    font-size: 14px;
    opacity: .6
}

.notification-info span,
a.dismiss-wrapper div span,
a.dismiss-wrapper div,
a.dismiss-wrapper {
    white-space:normal!important;
}

a.dismiss-wrapper {
    position:relative;
}

.dismiss-wrapper span.h5 {
    font-weight:bold;
    line-height:18px;
    margin:0 0 2px 0;
    font-size:12px;
}

.bg-danger .dismiss-wrapper span.h5 {
    color: #721c24;
}

.bg-warning .dismiss-wrapper span.h5 {
    color: #856404;
}

.dropdown-alerts>li.bg-danger>a:hover {
  background-color:#ebcccc;
}

.dropdown-alerts>li.bg-warning>a:hover {
    background-color:#fff3cd;
}

.dropdown-menu-xs {
    min-width: 85px !important;
    padding: 0px !important;
    margin: 0px !important;
}

.dropdown-toggle-xs {
    padding-top: .5px !important;
    padding-bottom: .5px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.dropdown-btn-xs {
    border-width: inherit !important;
    text-align: left !important;
    padding-left: 10px !important;
}

#MainNotificationHeaderDiv .notification-dismiss {
    position: absolute; 
    z-index: 500;
    top:8px;
    right:4px;
    color: #8a6d3b;
    border: 5px solid transparent;
    font-size:18px;
}

#MainNotificationHeaderDiv .notification-danger {
    position: absolute; 
    z-index: 500;
    top:8px;
    left:4px;
    color: #721c24;
    border: 5px solid transparent;
    font-size:18px;
}

.dropdown-alerts > li > a {
    padding: 10px 40px 10px 20px!important;
}

.dropdown-alerts > li.bg-danger > a {
    padding: 10px 20px 10px 40px!important;
}

.padding-top-0 {
    padding-top: 0;
}

.padding-top-2 {
    padding-top: 2px;
}

.margin-top-0 {
    margin-top: 0 !important;
}

.margin-top-5 {
    margin-top: 5px;
}

.margin-top-10 {
    margin-top: 10px;
}
.margin-top-15 {
    margin-top: 15px;
}
.margin-top-20 {
    margin-top: 20px;
}
.margin-top-25 {
    margin-top: 25px !important;
}
.margin-bottom-15 {
    margin-bottom: 15px;
}
.margin-left-15 {
    margin-left: 15px;
}
.margin-left-35 {
    margin-left: 35px !important;
}
.pat-info {
    font-size: 13px;
}

.pat-name {
    font-size: 18px;
    display: inline-block;
    font-weight: 300;
    margin: 6px 0 6px 0;
}

    .pat-name a {
        font-size: 18px;
        margin-left: 7px;
        cursor: pointer;
        min-width: 50px;
        max-width: 400px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 0.8;
    }

.patient-grid-name {
    min-width: 50px;
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

ul.pat-info-teaser {
	color:#606060;
	margin-bottom:8px;
	padding-left: 0px;
}

ul.pat-info-teaser li {
	display: inline;
list-style-type: none;
padding-right: 20px;

}

ul.pat-info {
    display:inline-block;
    padding-left: 0px;
    margin-bottom: 4px;
}

ul.pat-info li {
    display: inline;
    list-style-type: none;
    padding-right: 10px;
    color: #606060;
    padding-left: 10px;
}

ul.pat-info li:not(:last-child) {
    border-right: solid 2px #333;
}

.pat-header {
    background-color:#eae9e9;
}

span.prfx {
    color: #333333;
    padding-right: 3px;
    font-weight: 700;
}

span.prfx2 {
    padding-right:2px;
}

ul.pat-info a:hover {
text-decoration:none;
}

.pat-info span {
    font-size: 13px;
}

.pat-info.nav-pills > li > a {
/*    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;*/
    margin-top: 0px;
    margin-bottom: 0px;
}

.patient-teaser .nav.nav-pills {
    margin-bottom: 0px;
}

/*.pat-icons li:first-child a{
	padding-left:0px;
}*/

.patient-teaser .pat-name a {
    margin-bottom: 10px;
}

.modal-header h3, h4.modal-title {
margin: 0;
line-height: 19px;
font-size: 14px;

}

.modal-header .close {
    margin-top: 0px;
    line-height: 17px;
}

.modal-dialog {
    max-width: 98vw;
}


.help-demographics .modal-body {
  height: 400px;
  overflow: auto;
}

.wide-modal {
    width: 80%;
}


a.btn-admin {
	padding:0px;
	color:#606060;
	font-size:18px;
}

.btn-pat-search {
    color: #fff;
    text-align: center;
    font-weight: 400;
    display: block;
}

    .btn-pat-search span {
        margin-right: 5px;
    }

.pat-name a:hover {
    text-decoration: none;
}

.no-left-padding {
    padding-left: 0px !important;
}

/********ERROR PAGE************/
.error {
    width: 1000px;
    text-align: center;
    margin: 0 auto;
}

.error img {
    width: 150px;
}

.error h1 {
    font-size: 152px;
    color: #333;
}

.error h3 {
    font-size: 28px;
    margin: 30px 0 20px 0;
    font-weight: 700;
    color: #333;
}


.error p, .error div p, .error div span {
    font-size: 16px;
    color: #909090;
}

.error .divider {
      margin: 20px auto;
  border-bottom: 4px dotted #e5e5e5;
  width: 200px;
}

.no-provider-clinic {
    font-weight: bold;
    color: White;
    background: #ce4844;
    border-top: white solid 1px;
    border-bottom: white solid 1px;
    margin: 0 -15px 25px;
}
.modal-content {
    -ms-border-radius: 6px !important;
    border-radius: 6px !important; 
}

  .modal-header{
	border-top-left-radius:6px;
    border-top-right-radius:6px;

  }
  .modal-footer button{
	font-size:12px !important;
  }

.input-difference {
    background-color: #FDEFEF !important;
    border: 2px rgb(215, 130, 130) solid !important;
}

.public-portal-logo {
    margin: 15px;
}
/*
    The empty were created for the public portal. Any changes to these you will need
    to make sure nothing weird is happening with the scroll bar for the popup when it is small.
*/
.iz-main-empty {
    left: 0 !important;
    min-height: inherit !important;
}
.iz-body-empty {
    background-color: white;
    overflow-x: hidden;
    overflow-y: auto;
}
.iz-wrapper-empty {
    height: inherit !important;
}
/*@media(max-width:767px) { 
    .iz-body-empty {
        overflow-y: auto;  
    }
}*/
.std-cell-style{
    border: 1px black solid;
}
.bold{
    font-weight: bold;
}
.not-bold {
    font-weight: normal !important;
}
.phone-extension {
    width: 200px;
}

.pat-icons {
  display: inline-block;
  padding-left: 0px;
  margin-bottom: 4px;
}

.pat-icons li {
  display: inline;
  list-style-type: none;
  cursor: default;
}

.pat-icons li span {
  white-space: nowrap;
}

.pat-icons li a {
  padding: 5px 2px;
}

.pat-icons li button {
    padding: 5px 2px;
}

.control-x {
    right: 0px;
    position: absolute;
    font-size: 12px;
    margin: 6px 2px 6px 6px;
    z-index: 8;
}

div[data-notify="container"] {
    font-size: 15px;
}

span.datepickerbutton[readonly] {
    color: gray;
    cursor: default;
}
.noty-alert {
    z-index: 10000 !important;
}
.close-popover {
    margin: 7px 15px;
    font-size: 14px;
}

.PanelBodyMain, .env-panel-main {
  padding: 8px;
  border: 1px solid #cccccc;
  border-top: 3px solid #cccccc;
}
.env-panel-main, .env-data-table {
    margin: 0 !important;
    /*Counter acting bs rows*/
}
tr[data-highlight] {
    background-color: #E7E5FF !important;
}
td.center {
    text-align: center;
}

th.left {
    text-align: left;
}

.no-padding{
    padding: 0 !important;
}

.cell-sub {
    padding: 8px;
    line-height: 1.4285;
    vertical-align: top;
}
/*Consider getting these colors inline with what we have in app styles*/
.cell-1 {
    border-left: 4px green solid;
}

.cell-sub-1 {
    border-left: 4px lightgray solid;
}

.cell-sub-fail {
    border-left: 4px #E53F3F solid;
}

.row-sub-fail {
    background-color: #F4DEE1;
}
.control-label {
    color: black;
}
.default-cursor {
    cursor: default !important;
}
.file-uploader-container {
    background-color: #eaeaea;
    padding: 12px;
    margin: 0 15px;
    border: solid 1px #b9b8b8;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.noty-alert {
    z-index: 20001 !important;
}
.top .dataTables_paginate {
    display: none;
}
.btn-entry {
    border-color: #b1b1b1;
}
.btn-entry:hover {
    border-color: #888;
}
.env-grid-header td, .env-grid-row td {
    padding: 3px;
}
.env-grid-row:hover {
    background-color: #CCCCCC;
}
.gray-text{
    color:gray !important;
}

/*------------------------------------*\
    HL7 colors
\*------------------------------------*/

.hl7-column {
    width: 36px;
    height: 20px;
    text-align: center;
    padding-top: 2px;
    font-weight: bolder;
    color: white;
} 
.hl7-column-AA,  p.aa:before {
    background-color: #3dc17c;
}
.hl7-column-AI, p.ai:before {
    background-color: #77d4a3;
    /*background-color: #4CACE3;*/
}
.hl7-column-AW, p.aw:before {
    background-color: #F9BD8B; 
    /*background-color: #F8A154;*/
}
.hl7-column-AE, p.ae:before {
    background-color: #f8a154;
    /*background-color: #3DC17C;*/
}
.hl7-column-AF,  p.af:before {
    background-color: #F6858D;
    /* background-color: #31373E;*/  
}
.hl7-column-AR,  p.ar:before {
    background-color: #f65b64;
    /* background-color: #F65B64;*/
}
p.blue:before {
    background-color:#3daae0;
}
p.light-blue:before {
    background-color: #7bc4e9;
}


/*------------------------------------*\
    Traffic Analyzer
\*------------------------------------*/


.tabbed-header ul > li {
     padding: 12px 0 7px;
}


.iz-main.design-update .tabbed-header ul li.active a, 
.iz-main.design-update .tabbed-header ul li a:hover, 
.iz-main.design-update .tabbed-header ul li a:active, 
.iz-main.design-update .tabbed-header ul li a:focus {
     background-color: transparent;
     border: none;
    outline: none;
}
.table-wrap {
    display: inline-block;
    width: 100%;
}
.env-validation-error {
    visibility: hidden;
    color: #a94442 !important;
    padding: 0 5px;
}
.has-error .env-validation-error {
    visibility: visible;
}
.error-outline + .env-validation-error {
    visibility: visible;
}
.show-error > .env-validation-error {
    visibility: visible;
}

.env-validation-error-inline-right {
    position: absolute;
    right: 0;
    top: 7px;   
}
.inline-row-delete-button {
    margin-top: -2px;
    margin-left: 10px;
}

.bootbox-confirm .btn-space {
    margin-left: 7px;
}

.btn-space {
    margin-left: 7px;
}

.no-bullets {
    list-style: none;
    padding-left: 0 !important;
}

.display-inline {
    display: inline !important;
}
 .small-intbox {
        width: 60px !important;
        display: inline-block !important;
        float: left;
        font-size: 12px;
    }
	
.fa-sm {
     font-size: small !important;
 }


/***********Conversation Stuff***********/
.conversation-wrapper {
    width: 395px;
    border-left: 5px solid #ECECEC;
    overflow: hidden;
    float: right;
}

#conversation {
    height: 100%; }

#conversation h1 {
    margin: 0;
    /*background-color: #E45857;*/
    background-color: #676767;
    color: white;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFE;
    line-height: 21px;
    padding: 10px 20px;
    overflow: hidden;
    *zoom: 1; }

#conversation .chat-count {
    display: inline-block;
    float: right;
    background-image: url("images/icon-conversation.png");
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 25px;
    font-weight: normal;
    font-size: 0.8em; }
  
#conversation textarea {
    background: #FFFFFF;
    border: 1px solid #999999;
    width: 100%;
    height: 100px;
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1); }
  
#conversation .content-wrapper {
    padding: 15px 20px; }
  
#conversation .button {
    display: inline-block;
    /*background-color: #E45857;*/
    background-color: #676767;
    color: white;
    font-size: 14px;
    line-height: 16px;
    padding: 10px 15px 10px 40px;
    background-image: url('images/icon-chat.png');
    background-position: 10px center;
    background-size: 18px;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-top: 10px; }
    
#conversation .button:hover {
    color: white;
    text-decoration: none;
    /*background-color: #e66564;*/ 
    background-color: #4f4f4f; }

#conversation .conversation-list {
    /*position: absolute;*/
    top: 210px;
    bottom: 1px;
    width: 370px; /*Added this because LI weren't taking up the whole width when a short message was entered*/
    overflow-y: auto;
    list-style-type: none;
    margin: 15px 0 0;
    padding: 0; 
    height: 64vh;
}

#conversation .conversation-list li:not(.edit-menu) {
    margin: 0;
    padding: 20px 15px;
    background-size: 22px 18px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-image: url("images/indicator-gray.png");
    border: 2px solid #ECECEC;
}

#conversation .conversation-list li:not(.edit-menu):nth-child(odd) {
    background-color: #ECECEC;
}

#conversation .conversation-list li:not(.edit-menu):nth-child(even) {
    border-bottom: none;
}

#conversation .conversation-list li[data-role=me] {
    background-image: url("images/indicator-green.png"); }
    
#conversation .conversation-list li[data-role=manager] {
    background-image: url("images/indicator-blue.png"); }

#conversation .conversation-list li[data-role=supervisor] {
    background-image: url("images/indicator-orange.png"); }

#conversation .conversation-list .name, #conversation .conversation-list .date-time {
    display: inline-block; }

#conversation .conversation-list .name {
    font-weight: bold;
    float: left; }

#conversation .conversation-list .date-time {
    float: right;
    padding-right: 2px;
}

#conversation .conversation-list .metadata {
    margin-bottom: 15px;
    overflow: hidden;
    *zoom: 1; }

#conversation .conversation-list .metadata * {
    color: #777;
    vertical-align: middle;
}

.conversation-linked {
    display: inline;
    margin-top: -19px;
    margin-left: 10px;
    color: #428bca;
    cursor: pointer !important;
}
/***********Conversion requires these classes*/
 

.fa-sigma:before {
    content: "\03a3";
    font-weight: bold;
    font-size: 18px;
    color: white;
}

.rounded {
    border: 2px solid #000;
    padding: 3px 2px 3px 4px;
    width: 25px !important;
    border-radius: 5px;
    background-color: #000;
    margin-left: auto;
    margin-right: auto;
}

.fa-stack-customized {
    position: relative;
    display: inline-block;
    width: 2em;
    /* height: 2em; */
    /* line-height: 2em; */
    vertical-align: top;
}

.float-clear {
    float: none;
}

   
.panel-toggle .accordion-toggle:after {
    font-family: 'Glyphicons Halflings';
    content: "\2212";
    float: right;
    color: #FFFFFF;
}

.panel-toggle .accordion-toggle.collapsed:after {
    content: "\002b";
}

/* Datatables column filter text inputs */
.col-filter {
    position: relative;
    display: inline-block;
    width: 95%;
}

.col-filter input[type=text] {
    padding-right: 24px;
    width: 100%;
    box-sizing: border-box;
}

.col-filter__clear {
    display: none;
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 3px 3px;
    font-style: normal;
    font-size: 1.75em;
    user-select: none;
    cursor: pointer;
}

.col-filter__search {
    display: block;
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 3px 3px;
    font-style: normal;
}

.col-filter input::-ms-clear { /* Remove IE default X */
    display: none;
}

.table-noborder {
    border: 0 !important;
}

.table-noborder th, .table-noborder td {
    border: 0 !important;
}

.table-vertical-scroll tbody {
    display: block;
    max-height: 480px; /* Change max height as needed to accomodate desired number of rows - This default is about 10 rows */
    overflow-y: auto;
    overflow-x: hidden;
}

.table-vertical-scroll thead {
    display: table;
    width: 100%;
}

.table-vertical-scroll tr {
    display: table;
    width: 100%;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9 !important;
}

/* Text transforms */
.no-transform {
    text-transform: none !important;
}

.all-caps {
    text-transform: uppercase !important;
}

.all-lower {
    text-transform: lowercase !important;
}

input[type=number] {
    -moz-appearance:textfield;
}

.address-validation-info > span {
    font-family: Arial;
    font-size: 9pt;
    line-height: 13px;
    color: #606060;
    font-style: italic;
    margin-top: 2px;
}

.modal-body-table {
    border-top: 2px solid #B9B9B9;
}

.simple-hyperlink {
    color: #3c3cf5;
    text-decoration: underline;
}

.simple-hyperlink:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: 2px;
}

/*The normal popover has a max-width of 350px. This allows it to be a bit larger. i.e. Death Info. You will need to add the class to the template when you create the popover.*/
.popover-medium {
    max-width: 500px !important;
}

#HeaderText {
    min-width: 50px;
    max-width: 90%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/*This will make the Date Picker boxes all the same width. Wide enough for a date YYYY/MM/DD and not take up the entire width of the container.*/
div.date.input-group {
    max-width: 145px !important;
}

div.date.input-group.bs-datetime {
    max-width: 100% !important;
}

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

span.patient-tag {
    margin: 1px;
}

.margin-bottom-0 {
    margin-bottom: 0 !important;
}

/* Styles for Switchlist control */
.switchlist-buttons > button {
    margin: 5px;
    width: 30px;
    height: 30px;
}

@media only screen and (max-width: 995px) {
     .switchlist-buttons {
         display: flex;
         flex-direction: row;
         justify-content: center;
     }

     .switchlist-buttons > button {
         transform: rotate(90deg);
     }
 }

@media only screen and (min-width: 996px) {
     .switchlist-buttons {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         margin-top: 25px;
     }
 }
/* End styles for Switchlist control */

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    color: #000000;
}

.radio-legend {
    border-bottom: none;
    width: auto;
}

.legend-inline {
    float: left;
    padding-right: 10px;
}

.legend-label-inline {
    display: inline !important;
}

input[type=radio].readonly {
    cursor: not-allowed;
    opacity: .5;
}

div.age-range-picker > #ageInputOption_container > div > fieldset {
    border-bottom: 1px solid #e5e5e5;
}

div.age-range-picker > #ageInputOption_container > div > fieldset label.radio-button-label {
    font-size: 12px !important;
    font-weight: bold;
}

.checkbox-legend {
    border-bottom: none;
    width: auto;
}

.legend-inline {
    float: left;
    padding-top: 5px;
}

.legend-label-inline {
    display: inline !important;
}

input[type=checkbox].readonly {
    cursor: not-allowed;
    opacity: .5;
    pointer-events: none;
}

.checkbox-label {
    user-select: none;
}

.checkbox-label-readonly {
    cursor: not-allowed;
    user-select: none;
}

th[scope="row"] {
    border: none !important;
    font-weight: normal !important;
}

select.readonly {
    cursor: not-allowed;
    pointer-events: none;
    background-color: #eee;
}

/*This is for the Accessible Datepicker to limit the width of the textbox */
.date-input > div.input-group {
    max-width: 145px !important;
}

/*This is to style the time picker Bootstrap add-on to match the corresponding input */
input[type=time] + div.input-group-addon {
    background-color: #ddd;
    padding: 0;
    border-bottom: none;
    border-top: none;
    border-left: 0;
    line-height: 0;
}

input[type=datetime-local] + div.input-group-addon {
    background-color: #ddd;
    padding: 0;
    border-bottom: none;
    border-top: none;
    border-left: 0;
    line-height: 0;
}

/* This overrides the .env-icon class that has it as 18px. Just needed to decrease it by 1 pixel. */
.timepicker-btn {
    font-size: 17px !important;
}

/*This is for the Accessible timepicker to limit the width of the textbox */
.time-input {
    max-width: 145px !important;
}

/*This is to remove the clock icon that is displayed in the Chrome/Edge input since we are using a Bootstrap add-on instead*/
input[type=time]::-webkit-calendar-picker-indicator {
    display: none;
}

input[type=datetime-local]::-webkit-calendar-picker-indicator {
    display: none;
}


/* Date Range styles.  */
/* This wil ignore the Boostrap col widths and just always make the container be 375px wide. This will keep an div.col-* to the right form having to much space.*/
div[class^='col-']:has(div > fieldset > div.date-range-container) {
    width: 375px;
    max-width: 375px;
    min-width: 375px;
}

.date-range-container {
    width: 375px;
    max-width: 375px;
    min-width: 375px;
}

/*I f you go over 45ish letters than it will wrap to next line. */
.date-range-legend {
    width: 320px;
    max-width: 320px;
    min-width: 320px;
}

.date-range-input {
    width: 175px;
    max-width: 175px;
    min-width: 175px;
}

/* This will let the error messages beneath the input to go past the input right edge. Less wrapping. */
div.date-range-container > div > div > span.field-validation-error {
    white-space: nowrap;
}

/* On a REALLY small screen the date inputs will stack. */
@media only screen and (max-width: 399px) {
    .date-range-container {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }
}

/*End Date Range */

#skiptocontent a {
    padding: 6px;
    position: absolute;
    top: -40px;
    left: 0px;
    color: #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    background: #FFFFFF;
    -webkit-transition: top 1s ease-out;
    transition: top 1s ease-out;
    z-index: 1000000;
}

#skiptocontent a:focus {
    position: absolute;
    left: 0px;
    top: 0px;
    outline-color: transparent;
    -webkit-transition: top .1s ease-in;
    transition: top .1s ease-in;
}

@media (prefers-reduced-motion: reduce) {
    #skiptocontent a {
        transition-duration: 0.001ms !important;
    }
}

/*
    This is to allow us to set focus on something like a results table. e.g. COVID-19 Vaccination Record screen.
    The div will have the focus when there are results, but we don't want to see the whole thing with a black outline.
    DO NOT EVER use this on a visible input field because someone did not want to see the black outline.
    DO NOT USE THIS if you do not know why you are using it. In fact pretend like you never even saw it. This is not for you. GO AWAY!
*/
.no-focus-outline:focus {
    outline: none !important;
}

fieldset[disabled] *.input-group-btn {
    background-color: #eee !important;
    cursor: not-allowed !important;
}

.age-range-label {
    font-size: 12px;
    line-height: 13px;
    color: #000000;
    margin-bottom: 0;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}
.audit-button {
    padding-top:     6px !important;
    padding-left:    3px !important;
    padding-right:   3px !important;
    padding-bottom:  3px !important;
    background-color: transparent;
    border: none;
}

.auditinfo {
    padding: 0 !important;
    margin: 0 !important;
}

tfoot.column-filter {
    display: table-header-group;
}

.search-result-icon {
    outline-offset: 3px !important;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 2px !important;
    padding-top: 2px !important;
    margin: 3px !important;
}

#helpButton {
    margin-top: -15px !important;
    padding-right: 8px !important;
    padding-left: 4px !important;
    padding-top: 5px !important;
    padding-bottom: 2px !important;
    text-decoration: none;
}

#learnMoreLink {
    margin-top: -5px !important;
}

#learnMoreLink > a:focus {
    outline-offset: 2px !important;
}

/*
    This was added so that disabled buttons would have the "Read-Only" look. 
    But we don't want the primary buttons to lose their color so we will exclude those.
*/
button[disabled]:not(.btn-primary){
    pointer-events: none !important;
    cursor: not-allowed !important;
    background-color: #eee !important;
}

#ButtonBarContainerBottom {
     margin-bottom: 50px !important;
}

.striped > div.row:nth-child(odd) {
    background: #ddd;
}

.borderless {
    border: none !important;
}

.brand-text {
    max-width: 100px;
}

.column-text-truncate {
    max-width: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.column-text-allow-word-break {
    word-break: break-all;
    word-wrap: break-word;
}

.pl-10 {
    padding-left: 10px !important;
}

.section-status {
    height: 20px;
    width: 20px;
    display: block;
}

.status-none {
    height: 0;
    width: 0;
    display: none;
}

.status-none ~ h2 {
    padding-left: 0 !important;
}

/*
    This is used to make format the * in the message/legend ...
    All fields marked with <span class="text-danger-dark bold required-asterisk-text">*</span> are required.
    Only on the onboarding page for now, but may make its way on to more screens.
*/
.required-asterisk-text {
    display: inline-block;
    vertical-align: bottom;
    height: 20px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 24px;
}

.padded {
    padding: 2px;
}
.title-bar-button {
    padding-top: 6px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    padding-bottom: 3px !important;
    background-color: transparent;
    border: none;
}


@media only screen and (max-width: 991px) {
    body:not(.toggle-menu) > div.iz-wrapper > nav {
        display: none;
    }
}

.GridViewGroup {
    background: #808080;
    color: #ffffff !important;
    font-weight: bold;
}

.env-icon-required {
    color: #721c24;
    font-weight: bold;
    font-size: large;
}

a:focus {
    outline-offset: 3px !important;
}

a[data-toggle]:focus {
    outline-offset: -2px !important;
}

.side-sub-menu a {
    outline-offset: -2px !important;
}

.patient-icon-button {
    padding-top: 6px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    padding-bottom: 3px !important;
    background-color: transparent;
    border: none;
}

caption {
    font-size: 16px;
}


/* This gives the +/- button on a panel a larger click target so that user can click on the grey bar and not just the button. */
.fa-env-collapser:after {
    content: "";
    position: absolute;
    right: 20px;
    top: 0;
    width: var(--targetWidth);
    height: 30px;
    background: transparent;
}
/* End click grey bar styles */


.auto-width {
    width: auto !important;
}

/*
    Update placeholders for accessibility color contrast.
    Made them darker and italic so that they do not look like real values.
*/
input[type=text]::placeholder, input.date::placeholder {
    color: #555;
    opacity: 1; /* Firefox */
    font-style: italic;
}

input[type=text]::-ms-input-placeholder, input.date::placeholder { 
    /* Edge 12 -18 */
    color: #555;
    font-style: italic;
}

.expiring-icon {
    color: #721c24 !important;
}

.env-icon-help {
    color: #1F64E5 !important;
}