/*===== VARIABLES CSS =====*/
:root{
    --ctblue: rgb(90, 120, 222); /* place "!important" on individual usage of this variable */
}

body form{
    height:100%;
    min-height:100%; 
}
#pageMain{
    height:100%;
    /* height:calc(100vh - 35px); */
    min-height:75%; 
}
#main_SiteFooter{
    height:22%;
    min-height:22%; 
}
body{
    font-family: "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, Helvetica, Verdana, sans-serif !important;
}

.main{
   min-height: calc(100vh - 50px);
   flex-direction: column;
}
h1:not(#SupportNotificationDesc > h1){
    color: white;
    font-size: 1.8em;
    font-weight: normal;
    font-variant-caps:all-petite-caps;
}

.CT-Primary-Blue{ 
    background-color: var(--ctblue)!important;
}

.CT-Secondary-Blue{
	background-color:rgb(232 240 254) !important;
}

.CT-Secondary-Blue-Text {
    color: rgb(232 240 254) !important;
}

.BT-Primary-Green-Text {
    color: rgb(61, 183, 75) !important;
}

.CT-muted-gray{
    background-color: #9e9e9e !important;
}
.CT-muted-red{
    background-color:rgb(255 200 205) !important;
}

.bg_light_gray{
    background-color: rgb(248 249 250) !important;
}

.bg_drak_gray{
    background-color: rgb(225 225 225) !important;
}

.bg_gray{
    background-color: rgb(112 112 113) !important;
}

.bg_light_amber{
    background-color: rgb(253 126 20 / 20%) !important;
}

.bg_amber{
    background-color: rgb(253 126 20) !important;
}

.bg_white{
    background-color: white !important;
}

.bg_light_red{
    background-color: rgb(240 128 128) !important;
}

.bg_yellow{
    background: hsl(54deg 100% 62%) !important;
}

.bg_indigo{
    background: rgb(121 82 179)!important;
}

.font_indigo{
    color: rgb(121 82 179)!important;
}

.font_black{
    color: black!important;
}

.font_light_gray{
    color: rgb(175 175 175) !important;
}

.font_ctBlue{
    color: rgb(90, 120, 222) !important;
}
.font_ctBlueLinked{
    color: #546e7a !important;
}

.font_ctBlue_muted{
    color: rgb(90 120 222 / 80%) !important
}

.font_amber{
    color: rgb(253 126 20) !important;
}

.font_amber_muted{
    color: rgb(253 126 20 / 80%) !important;
}

.font_light_red{
    color: rgb(240 128 128) !important;
}

.font_white{
    color: white !important;
}

.bt_green{
    background : rgb(61, 183, 75) !important;
}

.border_bt_green{
    border-color: rgb(61, 183, 75) !important;
}

.bt_light_green{
    background: rgb(61 183 75 / 25%) !important;
}

.font_btGreen{
    color:rgb(61, 183, 75) !important;
}

.font_success{
    color: rgb(50 216 139)!important;
}

.font_danger{
    color: rgb(255 78 95)!important;
}

.btnDownload_Green{
    background: rgb(46 193 125) !important;
}

.font_btnDownload_Green{
    color: rgb(46 193 125) !important;
}

.btnDownload_Green:hover, .btnDownload_Green:focus{
    box-shadow: 0 0 0 0.15rem rgb(90 222 118 / 25%);
}

.hover_green:hover, .hover_green:focus{
    box-shadow: 0 0 0 0.15rem rgb(61 183 75 / 40%);
}


#BtnMyProfileSettings{
    font-size: 2em;
    color: white;
    cursor: pointer;
}

#NavigationMenu{
    border-bottom-style: solid;
    border-color: rgb(90 120 222);
    padding-top: 2px !important;
}

#NavigationMenu.linked{
    border-bottom-style: solid;
    border-color: #546e7a !important;
    padding-top: 2px !important;
}

#NavigationMenu a{
    padding: 7px;
    padding-bottom: 3px;
}


#NavigationMenu li{
    margin-left: 2px;
    margin-right: 2px;
}


#NavigationMenu .active{
    font-weight: 400;
    border-bottom-style: solid;
    border-color:rgb(90, 120, 222);
    color: white;
    background: rgb(90, 120, 222);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

#NavigationMenu .nav-link.linked.active{
    border-color: #546e7a !important;
    background:  #546e7a !important;
    color: white !important;
}

.CT-LinkedProfiles{
    background: #546e7a !important;
}

.CT-LinkedProfiles-light{
    background: #cfd8dc !important;
}

.font_ctLinkedProfileMuted{
    color: #cfd8dc !important;
}

.font_ctLinkedProfile{
    color: #546e7a !important;
}

.ActiveNavigationLinksSmallScreens{
    border-radius: 5px !important;
}

#NavigationMenu li .active{
    border-bottom:none;
}

.HoverNavigationBtns{
    border-color:rgb(90, 120, 222);
    background: rgb(90, 120, 222);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.HoverNavigationBtns.linked{
    border-color:#546e7a !important;
    background: #546e7a !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.HoverNavigationBtnsSmallScreens{
    border-color:rgb(90, 120, 222);
    background: rgb(90, 120, 222);
    border-radius: 5px !important;
}

.HoverNavigationLinks{
    font-weight: 400 !important;
    color: white !important;
}

.HoverNavigationLinksSmallScreens{
    font-weight: 400 !important;
    color: white !important;
}

#MyProfileSettingsMenu{
	position: absolute;
	top: 41px;
	right: 0px;
	float: right;
}

/*This helps thin the outlines by adjusting the shadows for the below elements*/
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
	/*Defult*/
    /*box-shadow: 0 0 0 0.025rem;*/
    /*Custom*/
    box-shadow: 0 0 0 0.1rem;
}

#MyProfileSettingsMenu a{
    display: flex;
    align-items: center;
}

#MyProfileSettingsMenu a{
    display: flex;
    align-items: center;
}

#MyProfileSettingsMenu .material-icons{
	padding-right: 10px;
}

#BtnLogin{
    cursor: pointer;
}

.dropdown-item:hover{
    cursor:pointer;
}

.FontSizeRanger:hover {
    cursor:pointer;
    color: #1e2125;
    background-color: #f7f9fa;
}

.langDropdown{
    position: absolute;
    right: 2em;
    top: .5em;
}

.display-5{
    font-size: 2.5em;
}

.form-label {
    margin-bottom: .1rem;
}

#main_SiteFooter{
    font-size: .9em;
    /*Making sure footer is always pushed to the bottom of the page*/
    /*position: fixed;*/
    bottom: 0;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
    padding: 0px !important;
}

table.dataTable thead th, table.dataTable thead td, 
table.dataTable tbody th, table.dataTable tbody td{
    padding: 5px 5px !important;
}

table.dataTable tbody tr:hover{
    /* --bs-table-hover-bg: var(--bs-ct-lightblue) !important; */
    cursor: pointer;
}

.dataTables_length  select{
    padding: 0px !important;
}

.ct_Statment{
    background: red !important;
}

.btn-outline-success{
    color: rgb(61, 183, 75) !important;
    border-color: rgb(61, 183, 75) !important;
}

.btn-outline-success:active{
    color: white !important;
    border-color: rgb(61, 183, 75) !important;
}


.btn-outline-success:hover{
    color: white !important;
    border-color: rgb(61, 183, 75) !important;
}

table.dataTable td{
     max-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}

.fs-7{
    font-size: .9em !important;
}
.fs-8{
    font-size: .8em !important;
}
.fs-9{
    font-size: .7em !important;
}
.fs-10{
    font-size: .6em !important;
}
.fs-11{
    font-size: .5em !important;
}
.mr-1{
    margin-right: .25em !important;
}
.mr-2{
    margin-right: .5em !important;
}
.mr-3{
    margin-right: 1em !important;
}
.mr-4{
    margin-right: 1.5em !important;
}
.mr-5{
    margin-right: 3em !important;
}

.ml-1{
    margin-left: .25em !important;
}
.ml-2{
    margin-left: .5em !important;
}
.ml-3{
    margin-left: 1em !important;
}
.ml-4{
    margin-left: 1.5em !important;
}
.ml-5{
    margin-left: 3em !important;
}

.confirm_join_yes:hover{
    cursor: pointer;
    background: rgb(90 120 222)!important;
    border: 1px solid #5a78de!important;
}

.confirm_join_yes.font_ctBlue:hover{
    background: none !important;
    cursor: default;
}

.confirm_join_no:hover{
    cursor: pointer;
    background: rgb(90 120 222)!important;
    border: 1px solid #5a78de!important;
}

.bgconfirm_join_yes{
    background: rgb(50 216 139 / 25%)!important;
}

.bgconfirm_join_no{
    background: rgb(255 78 97 / 25%)!important;
}

.text-muted-0{
    color: rgb(206 206 206)!important;
}

.eventBlock_muted{
    border-style: dashed;
    border-width: 2px;
    box-shadow: none;
}

.eventBlock_muted .card-header{
    border-bottom-style: dashed;
    border-bottom-width: 2px;
}

.eventBlock_muted .card-footer{
    border-top-style: dashed;
    border-top-width: 2px;
}

.btnIconLbl{
    margin-top: .20em !important;   
}

.justify{
    text-align: justify !important;
}

.highlight{
    background: yellow !important;
}

.dragover{
    background: rgb(253 126 20 / 15%);
}

.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 45%;
}

.dataTables_empty{
    color: rgb(240 128 128) !important;
}

/* Messaging */
#AssociatedPatientList{
    max-height: 75px;
    height: 75px;
    overflow: auto;
}

#ScrollToTopBtn{
    padding: 5px 5px;
    position: fixed;
    bottom: 25px;
    right: 35px;
    background: white;
    color: black;
    height: 50px;
    width: 50px;
    border-radius: 50px !important;
    box-shadow: 0.1em 0.1rem 0.5rem 0 rgb(0 0 0 / 20%);
    z-index: 999999;
    cursor: pointer;
    background: #79ace9;
}

#ScrollToTopBtn:hover{
    opacity: 100 !important;
}

.newCellInput{
    width: 100% !important;
}

.text-wrap{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.border_dashed{
    border-style: dashed !important;
}

.border-btgreen{
    border-color: rgb(50 216 139)!important;
}

#btnBackToMyProfileLink:hover{
    cursor: pointer;
    background-color: rgb(90, 120, 222) !important;
    color: white !important;
    font-weight: bold;
}

#BtnUserGuide{
    cursor: pointer;
}

/*Found that for some clinic logos the height was just too down and it looked like it was stretching the images, need to hard code the styling here*/
#ClinicLogo{
    max-width: 360px !important;
    max-height: 100px !important;
    width: auto !important;
}

.langselected{
    border-color: #dcdbdb !important;
    background: #e9ecef !important;
}

.TimeoutPanel
{
    text-align: center;
    background-color: #FFFFFF;
    width: 500px;
    padding-bottom: 10px;
    border-radius: 5px;
}

.TimeoutBackground
{
   background-color: #DDDDDD;
   opacity: 0.7;
   filter: alpha(opacity=70);
}
.TimeoutTitle
{   
    display: block;
    float: left;
    background: red !important;
    border-radius: 4px;
    text-align: left;
    width: 100%;
}

.TimeoutMessage
{
    display: block;
    float: left;
    width: 100%;
    margin: 10px 0 10px;
    font-size: 1em;
    color: black;
}

.TimeoutPanel input {
    border-radius: 5px;
    border-width: thin;
    padding: 5px;
    cursor: pointer;
    border: solid 1px black;
}

legend, fieldset, #PermissionOptionsList{
    border-radius: 5px;
}

#msgCompose_FileAdd{
    cursor: pointer;
}
#msgCompose_FileAdd:hover{
    box-shadow: 0 0 0 0.15rem rgb(13 110 253 / 25%)
}


/*.form-switch.linked .form-check-input.linked {
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e);
}    */

.form-check-input.linked:checked{
    background-color: #607d8b;
    border-color: #607d8b;
}
.form-check-input.linked:focus{
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e) !important;
}

.form-check-input.linked:focus{
    border-color: #607d8b;
    outline: 0;
    box-shadow: 0 0 0 0.15rem #607d8b4f
}


:focus-visible { outline: none !important; }

.material-symbols-outlined, .material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 24
}

.material-symbols-outlined.solid, .material-symbols-rounded.solid {
  font-variation-settings:
  'FILL' 1,
  'wght' 300,
  'GRAD' 0,
  'opsz' 20
}

.material-symbols-outlined.solid.bold, .material-symbols-rounded.solid.bold {
    font-variation-settings:
    'FILL' 1,
    'wght' 500,
    'GRAD' 0,
    'opsz' 20
}

.material-symbols-outlined.outline-white, .material-symbols-rounded.outline-white {
    text-shadow: 
    -1px -1px 0 white, 
    1px -1px 0 white, 
    -1px 1px 0 white, 
    1px 1px 0 white; /* Outline color */
}
.material-symbols-outlined.outline-black, .material-symbols-rounded.outline-black {
    text-shadow: 
    -1px -1px 0 black, 
    1px -1px 0 black, 
    -1px 1px 0 black, 
    1px 1px 0 black; /* Outline color */
}

/*OVERRIDES TO NEW SP NAV UI*/
.ListCheckBox > label > input{
    margin: revert;
}

.ui-button-text{
    font-size: .80rem;
}

/* .modal:nth-of-type(even):not(.custom-modal) {
    z-index: 1056 !important;
}

.modal-backdrop.show:nth-of-type(even):not(.custom-modal) {
    z-index: 1051 !important;
} */