body {
    background-color: #e3f8fd;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

#preventClickOverlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999999;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Tighten up the nav bars */
.navbar {
    padding: 0px !important;
}

.navbar-brand {
    padding: 0px !important;
}

/* Change the background color */
.navbar-custom {
    background-color: #56b9b9;
}

/* Change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: #dfe4d2;
}

/* Change the link color */
.navbar-custom .navbar-nav .nav-link {
    font-weight: 500;
    font-size: 1.0em;
    color: #dfe4d2;
}

/* Change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    font-weight: 500;
    color: black;
}

/* Styles for using SVG buttons on grid rows (and elsewhere I suppose) */
.button-svg {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.button-svg:hover {
    border: 1px solid blue;
}

/* Kendo grid adjustments */
.k-grid td {
    padding: 0.5rem 0.5rem 0.5rem 0.5rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Remove all vertical scroll bars from kendo grids and make headers bold */
.k-grid-header {
    font-weight: bold;
    padding: 0 !important;
}

.k-grid-footer {
    padding: 0 !important;
}

.k-grid-content {
    overflow: auto
}

/* Min height for grid content area so initial loading image always visible */
.k-grid-content {
    min-height: 30px;
}

/* Kendo validator styles */
.k-invalid-msg {
    color: red;
    font-size: 10px;
}

/* This one puts the red border around kendo dropdownlist */
.k-widget > span.k-invalid,
input.k-invalid {
    border: 1px solid red !important;
}

.k-checkbox {
    -webkit-appearance: checkbox;
}

.k-checkbox::before {
    display: none;
}

/* 
    Setup z-index for mulitiple modals and their backdrops 
    Keep in mind, all modals that need to overlap must be in
    the same parent element and must be in order, where
    the frontmost modal is last in the parent element.
    Supports up to 5 modal showing at the same time, if we have more than that then we probably have bigger problems
*/
.modal-backdrop.show {
    z-index: 9000 !important;
}

.modal.show {
    z-index: 9001 !important;
}

.modal-backdrop.show ~ .modal-backdrop.show {
    z-index: 9002 !important;
}

.modal.show ~ .modal.show {
    z-index: 9003 !important;
}

.modal-backdrop.show ~ .modal-backdrop.show ~ .modal-backdrop.show {
    z-index: 9004 !important;
}

.modal.show ~ .modal.show ~ .modal.show {
    z-index: 9005 !important;
}

.modal-backdrop.show ~ .modal-backdrop.show ~ .modal-backdrop.show ~ .modal-backdrop.show {
    z-index: 9006 !important;
}

.modal.show ~ .modal.show ~ .modal.show ~ .modal.show {
    z-index: 9007 !important;
}

.modal-backdrop.show ~ .modal-backdrop.show ~ .modal-backdrop.show ~ .modal-backdrop.show ~ .modal-backdrop.show {
    z-index: 9008 !important;
}

.modal.show ~ .modal.show ~ .modal.show ~ .modal.show ~ .modal.show {
    z-index: 9009 !important;
}

/* 
    Prioritize the calico dialogs
    TODO: fix the backdrops for overlapping dialogs
*/
#calico-dialogs .modal.show {
    z-index: 10001 !important;
}

#calico-dialogs .modal.show ~ .modal.show {
    z-index: 10003 !important;
}

#calico-dialogs .modal.show ~ .modal.show ~ .modal.show {
    z-index: 10005 !important;
}

#calico-dialogs .modal.show ~ .modal.show ~ .modal.show ~ .modal.show {
    z-index: 10007 !important;
}

#calico-dialogs .modal-backdrop.show ~ .modal-backdrop.show ~ .modal-backdrop.show ~ .modal-backdrop.show ~ .modal-backdrop.show {
    z-index: 10008 !important;
}

#calico-dialogs .modal.show ~ .modal.show ~ .modal.show ~ .modal.show ~ .modal.show {
    z-index: 10009 !important;
}

#calico-toast {
    position: fixed;
    top: 20px;
    background-color: rgba(255,255,255,0.95);
    right: 35px;
    z-index: 1000000;
    min-width: 230px;
    border: solid #7fbcff 2px;
    pointer-events: none;
}