/* basic layout */ 
html, body, div#contentcolumn
{
    min-height: 100%;
}
div#content
{
    height: 82%;
}

#version {
    width: 100%;
    height: 3em;
}

#version p {
    margin: 0;
    line-height: 3em;
    text-align: center;
}
div#contentcenter
{
    min-height: 100%;
}

tr:hover td
{
    background-color: #F5F5F5;
}

.nohover:hover td {
    background-color: transparent !important;
}

body 
{
    margin: 0;
    padding: 0;
    line-height: 1.5em;
    background-color: #f5f5f5; 
    text-align:left;
    color:Black;
    font-size: 12pt;
    font-family: Arial;
    width: 100%;
}

label.with-top-margin
{
    margin-top: .4rem;
}

input.styled 
{ 
    display: none; 
} 

.disabled 
{ 
   opacity: 0.5; 
   filter: alpha(opacity=50);
}

/* all texts */
p, .bold-regular {
    text-align:left;
    color:Black;
    font-size: 12pt;
    font-family: Arial;
}

/* tier 1 header */
h1 {
    font-weight: bold;
    text-align: left;
    font-size: 20pt;
    font-family: Arial;
    color: #583184;
}

/* tier 2 header */
h2 
{
    text-align:left;
    font-size:16pt;
    font-family: Arial;
    color: #333333;
}

/* tier 3 header */
h3 
{
    text-align:left;
    font-weight:bold;
    font-size:14pt;
    font-family: Arial;
    color: #333333;
}

.bold-regular
{
    font-weight: bold;
}

/* links */
a {
    color: #583184;
    text-decoration: none;
}

a span :hover {
    cursor: pointer;
}

a.table-link span {
    color: #583184 !important;
}


/* links hover */
a:hover {
    color: #432366;
    text-decoration: underline;
}

b 
{
    font-size: 110%;
}

em 
{
    color: #B50000;
}

.bold 
{
    font-weight: bold;
}

.smaller
{
    font-size: 0.9em;
}

hr 
{
    width: 100%;
    background-color: #7F7F7F;
    height: 1px;
    color: #7F7F7F;
    border:none;
    height:1px;

}

img
{
    border:none;
}

/* All the content */
#maincontainer 
{
    margin: 0 auto;
}


#content
{
    margin-top: 67px;
    max-width: 1030px; /*Max width is hard coded (group menu + actual page widths + and paddings)*/
    margin-left: auto;
    margin-right: auto;
}

/* Main content column */
#contentcolumn
{
    float:left;
    width: 98%;
    background: white;
    margin: 16px 1% 0 1%;
    
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 2px 2px 4px #666666;
    box-shadow: 2px 2px 4px #666666;
}

/* Main content column top (top of the actual view)*/
#contenttop
{
    min-height:30px;
    width: 100%;
}

/* The actual content container */
#contentcenter
{
    background-repeat:repeat;
    overflow:hidden;
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 8px;
}

/* Main content column bottom*/
#contentbottom
{
    min-height:30px;
    width: 100%;
}

.clear
{
    clear: both;
}

.bar-wrapper {
    min-height: 2rem;
    line-height: 2rem;
}
.bar-wrapper > * {
    display: inline-block;
}
.bar-wrapper .corner-button .stylish-button {
    display: inline-block;
}
.bar-wrapper h2 {
    margin-bottom: 0;
}

/*Short alarm list in the alarm list layout*/
#shortAlarmList
{

    height:85px;
    padding-bottom:100px; /*Some padding so that actual content is not too close to the active alarms short list. If changed, change #status-colors padding too.*/
}

#short-list-active-alarms
{
    max-height:167px;
    overflow: auto;
}

#short-list-active-alarms-footer
{
    margin-top:2px;
}

#show-all-link
{
    text-align: right;
    float: right;
}

.view-all-link-container
{
    float: right;
}

.view-all-link-container a
{
    font-style: italic;
    color: #7F7F7F;
}

#alert
{
    text-align:left;
    font-weight:bolder;
}

#medicationComplianceReportModel {
    padding-bottom: 18px;
    border: 1px dotted #583184;
}

/* local service specific site tree styles */
#site-tree li[id^="node-ClientOrganization"] {
    border: 1px dotted #583184;
    margin-bottom: 2px;
}

.hidden-field
{
    visibility:hidden;
}

/* additional information's text */
#viewbag-info, #added-message, #removed-message, #modifications-detected, #travelModeModalErrors > span {
    font-weight: bold;
    color: Black;
    padding-left: 0.5em;
    border: 1px solid #E5E6BD;
    background-color: #FCFEDE;
    clear: both;
}

/* medication comlieance summary printer image */
.print-link-image img
{
    width: auto;
    height: 28px;
}

.print-link-image
{
    float:left;
}

/* medication comlieance summary print link */
#print-link 
{
    float: left;
    margin-left:0.3em;
}

/* medication comlieance summary fieldset */
#medicationComplianceReportModel 
{
    clear: left;
}

/* system event log date time options */
#system-event-datetime-pickers
{
    float: left;
    clear: right;
}

/* system event log filter options */
.system-event-log-filter-options
{
    float: left;
    clear: left;
}

/* system event log top pager */
#system-event-log-top-pager
{
    float: right;
    clear: left;
    clear: right;
}



/* Buttons */
input[type="submit"]:active, .ui-dialog-buttonset .ui-button, button.button:active, input[type="button"]:active {
    background-position: bottom right;
}

button.button * {
    color: #444;
}

button.button a, button.button a:hover {
    text-decoration: none;
}


input[type="submit"], .ui-dialog-buttonset .ui-button, button.button, input[type="button"], a.button
{
    background: #ededed;
    background-image: -webkit-linear-gradient(top, #ededed, #ffffff);
    background-image: -ms-linear-gradient(top, #ededed, #ffffff);
    background-image: -o-linear-gradient(top, #ededed, #ffffff);
    background-image: linear-gradient(to bottom, #ededed, #ffffff);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 2px 2px 4px #666666;
    box-shadow: 2px 2px 4px #666666;
    padding: 8px 25px 8px 25px;
    cursor: pointer;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    font-weight: 600;
    margin-right: 8px;
    text-decoration: none;
    margin-bottom: 1em;
    min-width: 105px;
    border: 1px grey solid;
    height: auto;
    width: auto;
    text-align: center;
}

a.button {
    min-width: 55px;
}

input[type="submit"]:focus,  
input[type="button"]:focus, 
button.button:focus, 
a.button:focus, 
.ui-dialog-buttonset .ui-button:focus {
    outline: none;
}

.image-max-800
{
    width: 800px;
}

.ui-dialog-buttonset .ui-button {
    height: 28px;
}

.ui-dialog-buttonset .ui-button span {
    padding: 0;
}

input[type="submit"]:hover, 
.ui-dialog-buttonset .ui-button:hover, 
button.button:hover, 
input[type="button"]:hover,
a.button:hover
{
    text-decoration: none;
    background: #e8e8e8;
}

input[type="submit"]:disabled, button.button:disabled, input[type="button"]:disabled 
{
    background-image: none;
    background-color: #a0a0a0;
}

/* Patient details */
#patient-information-header #profile-picture
{
    float: left;
    margin-right: 2em;
}

#patient-information-header #name
{
    float: left;
}

#patient-information-header h1
{
    margin-top: 0;
    padding: 0.2em 0 0;
    line-height: 1.1em;
}

#patient-information-header p
{
    margin-top: 0;
    margin-bottom: 0.2em;
    line-height: 1em;
    font-size: 0.9em;
}

#patient-information-header #detail-view-administrator-buttons
{
    float: right;
    clear: right;
}

#patient-information-header {
    margin-top: 8px;
    margin-right: 0;
}

#detail-view-administrator-buttons button
{
    text-align: left;
}

#detail-view-administrator-buttons #video-call-assist img {
    height: 15.5px;
}

#patient-information-header {
    clear: right;
}

.gray label
{
    color: #555555;
}

.gray p
{
    color: #555555;
}

.gray
{
    color: #555555;
}

.gray-bold
{
    color: #555555;
    font-weight: bold;
}

.delete-edit-td
{
    width: 11em;
}

#active-alarms-and-warnings
{
    clear: left;
}

#messages-lists-links a
{
    margin-right: 1em;
    color: #7F7F7F;
}

#back-link
{
    float: right;
}

#back-link a
{
    color: #7F7F7F;
}

/* Group menu */
.monitored-group {
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
    background-color: #583184;
    margin-top: 5px;
    cursor: pointer;
}

.unmonitored-group 
{
    color: #333333;
    text-align: center;
    background-color: #D9D9D9;
    margin: 5px 0 2px 0;
    cursor: pointer;
}

.unmonitored-group, .monitored-group 
{   
    padding-top:0.5em;
    text-align:center;
    min-height: 30px;
    max-height: 90px;
    overflow: hidden;
    width: 150px;
    clear:both;
}

#active-groups
{
    margin-top:2em;
}
#passive-groups
{
    margin-top:3em;
}

.ui-dialog-titlebar {
    display: none;
}

.checkbox {
    width: 25px;
    height: 25px;
    padding: 0 5px 0 0;
    background: url('../images/icons/checkbox.png') no-repeat;
    display: block;
    clear: left;
    float: left;
    cursor: pointer;
    margin: 0;
}

#phone-number-validation-dialog + div > .ui-dialog-buttonset {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
}

#pinCodeInvalidErrorMessage, #pinCodeVerificationErrorMessage {
    display: none;
    color: red;
}

#validatePhoneNumberWithPinVerify {
    background-color: #583184;
    color: white;
}

#resendPhoneNumberConfirmationCode, #resendPhoneNumberConfirmationCodeUsingVoiceCall {
    text-decoration: none;
}

#confirm-dialog-header {
    float: left;
    clear: both;
    width: 100%;
}

#confirm-dialog-header img {
    float: left;
}

#confirm-dialog-header .dialog-header-groupname 
{
    font-weight: bold;
    margin-left: 85px;
}

#confirm-dialog-header .dialog-header-title {
    font-weight: bold;
    clear: right;
    margin-left: 85px;
}

#confirm-dialog p {
    clear: both;
    margin-left: 85px;
    margin-top: 10px;
}

#top-hr
{
    margin-left: 16px;
    width:97%;
    clear:both;
}

div.empty
{
    height: 1px;
}

.nav-item.active
{
    font-weight: bold;
}

.homeInfoContainer a:hover
{
    text-decoration: none;
}

.alarm-chain-row
{
    font-weight: bold;
}

h2.alarm-chain
{
    margin-top: 3em;
    clear: both;
    overflow: hidden;
}

.create-alarm-chain-button
{
    margin-top: 0.5em;
    float: none !important;
    width: fit-content !important;
}

.no-groups-monitored 
{
    font-size: 0.9em;
    color: #808080;
    font-style: italic;   
}

.no-clear
{
    clear: none;
}

.notification-acknowledgement-buttons 
{
    clear:both;
}

.right
{
    float: right;
}

.userlist-addnewuser 
{
    float: right;
}

.almost-half-size
{
    width: 45%
}

.error-additional-information
{
    width:100%;
    clear:both;
    background-color: #FFB9B3;
    border: 1px solid #A90E0E;
    height: 54px;
    margin-bottom: 1em;
}

.error-additional-information img
{
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 4px;
    margin-right: 20px;
}

.error-additional-information div
{
    font-weight: bold;
    font-size: 0.9em;
    padding: 0;
}

.left
{
    float:left;
}

.overflow-hidden
{
    overflow: hidden;
}

.edit-dropdown
{
    width: 155px;
}

.edit-dropdown-wider
{
    width: 200px;
}

.client-organization-select
{
    width: 200px;
}

.org-name-in-edit
{
    width: 450px;
}

.dont-show
{
    display: none;
}

.org-ribbon
{
    max-width: 99%;
    min-width: 3em;
    overflow:hidden;
}

.linkCursor
{
    cursor: pointer;
}

#sub-menu
{
    width: 100%;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid gray;
}

#sub-menu:empty
{
    display: none;
    border-bottom: none;
}

.sub-menu-item
{
    margin-right: 1.2em;
    display: inline-block;
    *display: inline;
    zoom: 1;
    clear: none;
    font-size: 15px;
}

.sub-menu-item a {
    color: gray ! important;
}

/* Sub menu hilight */
.configurations-page #configurations-page a,
.profile-page #profile-page a,
.monitored-groups-page #monitored-groups-page a,
.my-group-page #my-group-page a,
.groups-page #groups-page a,
.users-page #users-page a,
.alarm-chain-page #alarm-chain-page a,
.organization-notification-chain-page #organization-notification-chain-page a,
.service-notification-chain-page #service-notification-chain-page a,
.templates-page #templates-page a,
.alarms-page #alarms-page a,
.pouch-read-errors-page #pouch-read-errors-page a,
.client-organization-info-page #client-organization-info-page a,
.sent-messages-page #sent-messages-page a,
.scheduled-messages-page #scheduled-messages-page a,
.active-surveys-page #active-surveys-page a,
.survey-history-page #survey-history-page a,
.nutrition-guidelines-page #nutrition-guidelines-page a,
.integrations-page #integrations-page a,
.devices-page #devices-page a {
    font-weight: bold;
    color: #583184 !important;
}

button.important-right,
a.important-right {
    float: right;
    display: block;
}

select {
    height: 24px;
    max-width: 100%;
}

.dispenser-inactive {
    color: lightgray;
}

#password-change-header {
    font-weight: bold;
    text-align: center;
    font-size: 20pt;
    font-family: Arial;
    color: #583184;
}

#password-change-info {
    text-align: center;
    font-size: 10pt;
    margin-bottom: 1em;
}

#password-change-content {
    display: block;
    text-align: center;
    margin-top: 2em;
}

#password-change-form {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#password-change-buttons {
    float: right;
    margin-right: 14.8em;
    width: 15em;
    margin-bottom: 1em;
}

.field-validation-error {
    color: #B50000;
}

.refill-field-validation-error {
    color: #B50000;
    margin-left: 10px;
    font-weight: normal;
    vertical-align: middle;
}

td.table-icon-column-smaller,
th.table-icon-column-smaller
{
    width: 1.2em;
    min-width: 1.2em;
}

th.table-icon-column-smaller .sort-not-used-icon,
th.table-icon-column-smaller .sort-ascending-icon,
th.table-icon-column-smaller .sort-descending-icon
{
    overflow: visible;
}

/* Prevent script tags messing with Bootstrap input group stylings */
.input-group>.form-control:not(:last-child):last-of-type
{
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}
.input-group>.form-control:not(:first-child):first-of-type
{
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

.role-edit-field {
    padding-top: 5px;
}

.vue-treeselect__placeholder, .vue-treeselect__control-arrow {
    color: black !important;
}

#mini-dispenser-log-datetime-pickers input {
    display: inline;
}

.flexbox {
    display: flex;
}

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

.flex-col {
    flex: 1;
}

.text-right {
    text-align: right;
}

.text-align-end {
    text-align: end;
}

.cursor-pointer {
    cursor: pointer;
}

.shadow-box {
    box-shadow: rgba(0, 0, 0, 0.4) 0 3px 8px;
}

.shadow-top {
    box-shadow: rgba(0, 0, 0, 0.4) 0 -2px 6px;
}

.shadow-right {
    box-shadow: rgba(0, 0, 0, 0.4) 2px 0 6px;
}

.shadow-bottom {
    box-shadow: rgba(0, 0, 0, 0.4) 0 2px 6px;
}

.shadow-left {
    box-shadow: rgba(0, 0, 0, 0.4) -2px 0 6px;
}

.no-float {
    float: none !important;
}

.smooth-corners {
    border-radius: 4px;
}

@media (max-width: 767px) {
    .hide-in-sm {
        display: none;
    }
}

.other-medication-input-group {
    padding-bottom: 20px;
}

#browser-support-banner {
    display: flex;
    border: solid #583184 7px;
    padding: 20px;
    align-items: center;
}
#browser-info {
    display: flex;
    margin-bottom: 1em;
}

#browser-support-banner img {
    height: 4.5em;
    margin-right: 1em;
}

#browser-support-banner p, #browser-support-banner ul {
    margin: 0;
}

#supported-browsers {
    width: 50%;
}

#travelModalDisplayCharactersLeft {
    position: absolute;
    left: 420px;
    color: var(--secondary);
    top: -23px;
}

.help-with-title {
    display: flex;
    gap: .5rem;
    margin-bottom: .5rem;
    align-items: center;
    clear: both;
}

.help-with-title h1 {
    margin-bottom: 0;
}

.grid-client-organization {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}