/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Table data styles */
td.datetime {
    width: 180px;
}
td.ellipsis200 {
    width: 200px;
    /*display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;*/
}

/* Images / Thumbnails */
.img-2x {
    transform: scale(2,2);
}
.img-3x {
    transform: scale(3,3);
}
.img-4x {
    transform: scale(4,4);
    z-index: 1 !important;
}
.img-5x {
    transform: scale(5,5);
}
.img-6x {
    transform: scale(6,6);
}

/* Font stuff */
.strikeout {
    text-decoration: line-through;
}

/* Spinner
---------------------------------------------------*/
#cover-spin {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.7);
    z-index: 9999;
    display: none;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#cover-spin::after {
    content: '';
    display: block;
    position: absolute;
    left: 48%;
    top: 40%;
    width: 40px;
    height: 40px;
    border-style: solid;
    border-color: black;
    border-top-color: transparent;
    border-width: 4px;
    border-radius: 50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}
body {
    /*margin-bottom: 70px;*/ /* Margin bottom by footer height */
}
.footer {
    /*position: fixed;*/
    /*bottom: 0;*/
    width: 100%;
    /*height: 70px;*/ /* Set the fixed height of the footer here */
    /*line-height: 60px;*/ /* Vertically center the text there */
    background-color: #fff;
}

/* Image Upload Overlay
-------------------------------------------------- */
.imagebox {
    padding: 0px;
    position: relative;
    text-align: center;
    width: 100%;
}

.imagebox .imagebox-desc {
    background-color: rgba(0, 0, 0, 0.4);
    bottom: 0px;
    color: white;
    left: 0px;
    position: absolute;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 100%;
    display: none;
}

.imagebox:hover {
    cursor: pointer;
}

.imagebox:hover .imagebox-desc {
    display: block;
}

/* Browse Button Style
-------------------------------------------------- */
.fileContainer {
    overflow: hidden;
    position: relative;
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    /*font-size: 999px;*/
    filter: alpha(opacity=0);
    /*min-height: 100%;
    min-width: 100%;*/
    opacity: 0;
    position: absolute;
    /*right: 0;
    text-align: right;*/
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* Text Overflow Formatting
----------------------------------- */
.twoLineEllipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* number of lines to show */
    /*line-height: X;*/ /* fallback */
    /*max-height: X*N;*/ /* fallback */
}

.squished {
  width: 1px;
  height: 1px;
  display:none;
}

.widget:hover {
    box-shadow: 0px 0px 0px 0.5px rgba(0,0,0,0.3);
}
/* Button choices control formatting
----------------------------------- */

/* Override .active/:active visual styles for button groups (_ButtonChoicesControlPartial).
   We don't need them, because if .btnGroupActiveOverride is used, we're already applying a 
   different color to indicate which of the buttons is active. */
.btnGroupActiveOverride > .btn-info:not(:disabled):not(.disabled):active,
.btnGroupActiveOverride > .btn-info:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.btnGroupActiveOverride > .btn-success:not(:disabled):not(.disabled):active,
.btnGroupActiveOverride > .btn-success:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #0DBF5F;
    border-color: #0DBF5F;
}

.btnGroupActiveOverride > .btn-light:focus,
.btnGroupActiveOverride > .btn-light.focus {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}
.btnGroupActiveOverride > .btn-danger:focus,
.btnGroupActiveOverride > .btn-danger.focus {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}

/* remove the inset styles when using .btnGroupInsetOverride. For buttons with [null, yes, no] states,
   it behaves better without them. Currently only need for btn-success (may need to add more later). */
.btnGroupInsetOverride > .btn-success:not(:disabled):not(.disabled):active,
.btnGroupInsetOverride > .btn-success:not(:disabled):not(.disabled).active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}

.no-click {
    pointer-events: none;
}

.summaryEllipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* number of lines to show */
}

.fillout {
    background-color: #F5F6F7;
}


/* This CSS allows actually changing the size of the Bootstrap custom switch control (https://getbootstrap.com/docs/4.3/components/forms/#switches)
   The custom-switch-md class appears to correspond with the form-control-sm (for normal Bootstrap form controls).
   https://stackoverflow.com/questions/55593229/increasing-the-size-of-a-bootstrap-checkbox 
*/

/* for md */
.custom-switch.custom-switch-md .custom-control-label {
    padding-left: 2rem;
    padding-bottom: 1.5rem;
}

.custom-switch.custom-switch-md .custom-control-label::before {
    height: 1.5rem;
    width: calc(2rem + 0.75rem);
    border-radius: 3rem;
}

.custom-switch.custom-switch-md .custom-control-label::after {
    width: calc(1.5rem - 4px);
    height: calc(1.5rem - 4px);
    border-radius: calc(2rem - (1.5rem / 2));
}

.custom-switch.custom-switch-md .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(1.5rem - 0.25rem));
}

/* for lg */
.custom-switch.custom-switch-lg .custom-control-label {
    padding-left: 3rem;
    padding-bottom: 2rem;
}

.custom-switch.custom-switch-lg .custom-control-label::before {
    height: 2rem;
    width: calc(3rem + 0.75rem);
    border-radius: 4rem;
}

.custom-switch.custom-switch-lg .custom-control-label::after {
    width: calc(2rem - 4px);
    height: calc(2rem - 4px);
    border-radius: calc(3rem - (2rem / 2));
}

.custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(2rem - 0.25rem));
}

/* for xl */
.custom-switch.custom-switch-xl .custom-control-label {
    padding-left: 4rem;
    padding-bottom: 2.5rem;
}

.custom-switch.custom-switch-xl .custom-control-label::before {
    height: 2.5rem;
    width: calc(4rem + 0.75rem);
    border-radius: 5rem;
}

.custom-switch.custom-switch-xl .custom-control-label::after {
    width: calc(2.5rem - 4px);
    height: calc(2.5rem - 4px);
    border-radius: calc(4rem - (2.5rem / 2));
}

.custom-switch.custom-switch-xl .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(2.5rem - 0.25rem));
}

.rotate {
    animation: rotation 4s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(180deg);
    }

    to {
        transform: rotate(539deg);
    }
}

.bg-clinician {
    background-color: #d9dde2;
    padding: 5px 10px;
    margin-bottom: 10px;
    border: solid 1px #98a5bb;
    box-shadow: 0px 3px 8px rgb(0 0 0 / 15%);
}

.bg-clinician-sublist {
    padding: 5px 10px;
    margin-bottom: 10px;
    border: solid 1px #98a5bb;
    box-shadow: 0px 3px 8px rgb(0 0 0 / 15%);
}

.bg-sublist {
    border-radius: 12px;
    background: #d9dde2;
    padding: 10px;
    border: solid 1px #98a5bb;
}

.bg-sublist-light {
    background: #e9ecf0;
}

.pipes {
    margin-left: 7px;
    margin-right: 7px;
    color: #585858;
}

.smaller-profile {
    display: block;
    width: 175px;
    margin: 0 auto;
}

.copyable {
    transition: all linear 0.3s;
}

.copyable:hover {
    cursor:pointer;
    background:#ddd;
}

.copyable-animate {
    color: #0DBF5F;
}

.copyable:hover:after, .copyable.icon:after {
    content: "\f0c5"; /* FontAwesome copy icon */
    font-family: "FontAwesome", serif;
    display: inline-block;
    font-size: 0.75em;
    margin-left: 2px;
}

.summary-value {
    border-bottom: dotted 1px #F17528;
    max-width: 33ch;
    text-overflow: ellipsis;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: top;
    position: relative;
    top: 3px;
}

/* Bootstrap Overrides */
/* Override active button toggle settings */
.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle {
    color: #fff;
    background-color: #3a4757;
    border-color: #4e6480;
}

/* Makes Module Summary Pills not overflow off module border */
.widget .badge {
    white-space: normal;
    text-align: left;
}

.badge.size-80 {
    font-size: 80%;
}
.badge.size-85 {
    font-size: 85%;
}
.badge.size-90 {
    font-size: 90%;
}
.badge.size-100 {
    font-size: 100%;
}

/* End Bootstrap Overrides */

.required-field {
    border: solid 2px #e81b12;
     transition: all 0.2s linear; 
    padding: 3px 0px 3px 7px;
    border-radius: 5px;
}

.toast {
    max-width:500px;
}


/* Carousel */

@media (max-width: 768px) {
    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(100%);
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-100%);
    }
}

@media (max-width: 992px) {
    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(50%);
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-50%);
    }
}
    


    

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* display 3 */
@media (min-width: 992px) {

    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(33.333%);
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-33.333%);
    }
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
    transform: translateX(0);
}


/*Admin Pages*/
.admin-labels-bold .control-label, .admin-labels-bold .col-label {
    font-weight: bold;
}

.allowOverflow {
    overflow: visible !important;
}

/*Chart Alerts*/
.flex-chart-alert::before {
    content: "FLEX";
    font-style: normal;
    font-weight: bold;
}
.personnel-contact-popover{
    max-width: fit-content;
}

/*Sublists*/
/*Disable toggle buttons in sublists*/
.module-sublist-edit-form fieldset:disabled .btn-toggle { 
    pointer-events: none;
    opacity: 0.65;
    box-shadow: none;
}

/*Datepicker UI*/
.hasDatepicker .ui-datepicker-inline.ui-datepicker {
    font-size: 13px;
    width: 100%;
}

/* MemberTitleBar - chart alerts and buttons */
#memberChartTitleBar #chartAlerts .fa-stack {
    display: block;
    height: 1.5em;
    width: 1.5em;
    vertical-align: top;
}

#memberChartTitleBar #chartAlerts .fa-stack-1x, .fa-stack-2x {
    line-height: normal;
}

#memberChartTitleBar #chartAlerts .fa-stack-2x {
    font-size: 1.5em;
    opacity: .5
}

#memberChartTitleBar #chartAlerts .actionRequiredAlerts, .noActionRequiredAlerts {
    padding: 5px;
    margin: 0;
    width: 100%;
    min-width: fit-content;
    max-width: fit-content;
}

#memberChartTitleBar #chartAlerts .row {
    margin: 0;
}

#memberChartTitleBar #chartButtons .dropdown {
    display: contents;
}

#memberChartTitleBar #chartButtons .btn {
    margin-bottom: 0.5rem;
    margin-left: 0.625rem;
    min-width: 8rem;
    max-width: 8rem;
    width: 100%;
}

/* Primarily used for important hoverable content, like names - similar to tooltip */
.popover-hover-custom > .popover-body, .popover-hover-custom > .popover-header {
    padding: 0.25rem 0.5rem;
}

/* Tooltips */
.tooltip-custom > .popover-body, .tooltip-custom > .popover-header {
    padding: 0.25rem 0.5rem;
    font-size: 80%;
}

/* Used for detailed content, which is a clickable element */
.popover-custom > .popover-body, .popover-custom > .popover-header {
    padding: 0.25rem 0.5rem;
    font-size: 90%;
} 

.popover-hover-custom, .tooltip-custom, .popover-custom {
    min-width: min-content;
}

.popover-hover-custom > .popover-header, .tooltip-custom > .popover-header, .popover-custom > .popover-header {
    text-wrap: nowrap;
}