/*!
 * Start Bootstrap - SB Admin Bootstrap Admin Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Changes made by Christian Short for custom styling and sizing
 */

/* Global Styles */

.custom-logo {
    background: #fff !important;
    padding: 10px 10px;
    position: absolute;
    bottom: 18px;
    width: 203px;
}

@media print {
    a[href]:after {
      content: "" !important;
    }
  }

html {
    background: #fff;
    font-size: 88%;
}

.h3,
h3 {
    margin-bottom: 0px;
    font-size: 1.25rem;
}

.vdp-custom-calendar-pos {
    top: -285px;
    right: 0px;
}


.button-links {
    float: right
}

.referral-button {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0271b5+11,0060a0+100 */
    background: #0271b5; /* Old browsers */
    background: -moz-linear-gradient(top, #0271b5 11%, #0060a0 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #0271b5 11%,#0060a0 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #0271b5 11%,#0060a0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0271b5', endColorstr='#0060a0',GradientType=0 ); /* IE6-9 */
    color: white;
    border: none !important;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 15px;
    margin-top: -7px;
}

.referral-image {
    max-width: 60px;
margin-left: 10px;
}

.referral-button:hover, .referral-button:active {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0060a0+0,0271b5+100 */
    background: #0060a0; /* Old browsers */
    background: -moz-linear-gradient(top, #0060a0 0%, #0271b5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #0060a0 0%,#0271b5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #0060a0 0%,#0271b5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0060a0', endColorstr='#0271b5',GradientType=0 ); /* IE6-9 */
    color: white;
}

.referral-button:focus {
    color: white;
}

.referral-button i {
    color: #fecd05;
}
/* When side bar nav tabs get too close together, use relevant
   positioning to prevent overlapping */
@media (max-height: 550px) {
    .float-to-bottom {
        position: relative !important;
    }
    .sidebar-info {
        position: relative !important;
        bottom: -46px;
    }
    .sidebar-dropdown > a {
        display: block;
    }
    .sidebar-submenu,
    .sidebar-submenu > div {
        display: none;
    }
}
@media (min-height: 551px) {
    .float-to-bottom {
        bottom: 240px;
    }
    .sidebar-info {
        bottom: 0;
    }
    .sidebar-dropdown > a {
        display: none;
    }
    .sidebar-submenu,
    .sidebar-submenu > div {
        display: block !important;
    }
}

.float-to-bottom {
    position: absolute;
    left: 0;
    width: 100%;
}

.float-to-bottom ul li{
    display: block;
    width: 225px;
}

.sidebar-info {
    position: absolute;
    left: 0;
    width: 100%;
    height: 200px;
    margin-bottom: 40px;
    background: #222222; /* Old browsers */
    background: -moz-linear-gradient(top, #222222 0%, #404040 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #222222 0%,#404040 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #222222 0%,#404040 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#404040',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid #484848;
    padding: 10px;
    border-right: 1px solid;
}

.summary-title {
    font-size: 18px;
    color: #fff;
    display: block;
    /*margin-bottom: 10px;*/
}

.summary-details {
    color: #848484;
}

.max-height-sidebar {
    height: 100vh;
}

.logo {
    margin-top: -4px;
}

/* .logo-thirdparty {
    margin-right: 15px;

} */

.text-bad {
    color:crimson;
}

.text-good {
    color:forestgreen;
}

.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.btn-primary:hover {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}

.nav-link {
    color: #337ab7;
}

a {
    color: #337ab7;
    text-decoration: none; /* Bootstrap v5 removed this style by default, so added it back */
}
a:hover {
    color: #23527c;
    text-decoration:underline
}

.clicked-state {
    background-color: #286090; border-color: #204d74;
}

.bs-calltoaction{
    position: relative;
    width:auto;
    padding: 15px 25px;
    border: 1px solid black;
    margin-top: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.bs-calltoaction > .row{
    display:table;
    width: calc(100% + 30px);
}

.bs-calltoaction > .row > [class^="col-"],
.bs-calltoaction > .row > [class*=" col-"]{
    float:none;
    display:table-cell;
    vertical-align:middle;
}

/*.cta-contents{
    padding-top: 10px;
    padding-bottom: 10px;
}*/

.cta-title{
    margin: 0 auto 15px;
    padding: 0;
    font-size: 19px !important;
}

.cta-desc{
    padding: 0;
}

.cta-desc p:last-child{
    margin-bottom: 0;
}

.cta-button{
    padding-top: 10px;
    padding-bottom: 10px;
}

@media (max-width: 991px){
    .bs-calltoaction > .row{
        display:block;
        width: auto;
    }

        .bs-calltoaction > .row > [class^="col-"],
        .bs-calltoaction > .row > [class*=" col-"]{
            float:none;
            display:block;
            vertical-align:middle;
            position: relative;
        }

        .cta-contents{
            text-align: center;
        }
}



.bs-calltoaction.bs-calltoaction-default{
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.bs-calltoaction.bs-calltoaction-primary{
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}

.bs-calltoaction.bs-calltoaction-secondary{
    color: #383d41;
    background-color: #e2e3e5;
    border-color: #d6d8db;
}

.bs-calltoaction.bs-calltoaction-info{
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.bs-calltoaction.bs-calltoaction-success{
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.bs-calltoaction.bs-calltoaction-warning{
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.bs-calltoaction.bs-calltoaction-danger{
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.bs-calltoaction.bs-calltoaction-light{
    color: #818182;
    background-color: #fefefe;
    border-color: #fdfdfe;
}

.bs-calltoaction.bs-calltoaction-dark{
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca;
}

body {
    margin-top: 50px; /* Was 100px */
    background-color: #222;
    /* font-size: 0.9rem !important; */
}

#wrapper {
    padding-left: 0;
}

#page-wrapper {
    width: 100%;
    padding: 0;
    background-color: #fff;
}

.huge {
    font-size: 50px;
    line-height: normal;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 225px;
    }
    #page-wrapper {
        padding: 10px;
    }
}

@media print {
    #wrapper {
        padding: 0;
    }
    body {
        margin-top: 0 !important; /* Remove margin from navbar when printing */
    }
}

.navbar-brand {
    padding: 15px 15px;
    height: 50px;
}

/* Top Navigation */

.top-nav {
    display: inline;
    padding: 0; /* Was 0 15px*/
}

.top-nav>li {
    float: left;
}

.top-nav>li>a {
    padding: 15px 5px !important; /* Was 15px */
    line-height: 20px;
    color: #999;
}

.top-nav>li>a:hover,
.top-nav>li>a:focus,
.top-nav>.show>a,
.top-nav>.show>a:hover,
.top-nav>.show>a:focus {
    color: #fff;
    background-color: #000;
}

.top-nav>.show>.dropdown-menu {
    float: left;
    position: absolute;
    margin-top: 0;
    border: 1px solid rgba(0,0,0,.15);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: #fff;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.top-nav>.show>.dropdown-menu>a,
.top-nav>.show>.dropdown-menu>li>a {
    white-space: normal;
    color: #333;
}

.dropdown-menu>a:focus,
.dropdown-menu>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover{
    color:#262626;
    text-decoration:none;
    background-color:#f5f5f5
}

.bg-dark {
    background-color: #222 !important;
}

ul.message-dropdown {
    padding: 0;
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
}

li.message-preview {
    width: 275px;
    border-bottom: 1px solid rgba(0,0,0,.15);
}

li.message-preview>a {
    padding-top: 15px;
    padding-bottom: 15px;
}

li.message-footer {
    margin: 5px 0;
}

ul.alert-dropdown {
    width: 200px;
}

/* Side Navigation */

@media(min-width:768px) {
    .side-nav {
        position: fixed;
        top: 51px;
        left: 225px;
        width: 225px;
        margin-left: -225px;
        border: none;
        border-radius: 0;
        overflow-y: auto;
        background-color: #222;
        bottom: 0;
        overflow-x: hidden;
        padding-bottom: 40px;
    }

    .side-nav>a {
        width: 225px;
        color: #9d9d9d;
    }

    .side-nav a:hover,
    .side-nav a:focus {
        outline: none;
        background-color: #000 !important;
    }
}

.side-nav>ul {
    padding: 0;
}

.side-nav>ul>a {
    display: block;
    padding: 10px 15px 10px 38px;
    text-decoration: none;
    color: #999;
}

.side-nav>ul>a:hover {
    color: #fff;
}

.side-nav>.float-to-bottom>ul>a {
    color: #9d9d9d;
}

/* Flot Chart Containers */

.flot-chart {
    display: block;
    height: 400px;
}

.flot-chart-content {
    width: 100%;
    height: 100%;
}

/* Branded styles */

.bg-branded {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0271b5+11,0060a0+100 */
    background: #0271b5; /* Old browsers */
    background: -moz-linear-gradient(top, #0271b5 11%, #0060a0 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #0271b5 11%,#0060a0 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #0271b5 11%,#0060a0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0271b5', endColorstr='#0060a0',GradientType=0 ); /* IE6-9 */
    /* Was background-color: rgba(0, 96, 160, 1); */
}
.title-branded {
    background-color: white;    /* Was background-color: #0060A0 */
    border-radius: 5px;
    border-top: #0271b5 6px solid;  /* Was rgb(0, 96, 160) #0060A0 */
    border-bottom: #0271b5 6px solid;
}

/* Custom Colored Panels */

.huge {
    font-size: 40px;
}

.card-green {
    border-color: #5cb85c;
}

.card-green > .card-header {
    border-color: #5cb85c;
    color: #fff;
    background-color: #5cb85c;
}

.card-green > a {
    color: #5cb85c;
}

.card-green > a:hover {
    color: #3d8b3d;
}

.card-red {
    border-color: #d9534f;
}

.card-red > .card-header {
    border-color: #d9534f;
    color: #fff;
    background-color: #d9534f;
}

.card-red > a {
    color: #d9534f;
}

.card-red > a:hover {
    color: #b52b27;
}

.card-yellow {
    border-color: #f0ad4e;
}

.card-yellow > .card-header {
    border-color: #f0ad4e;
    color: #fff;
    background-color: #f0ad4e;
}

.card-yellow > a {
    color: #f0ad4e;
}

.card-yellow > a:hover {
    color: #df8a13;
}

.card-title > a {
    color: inherit;
}

/* BP: Fix for BS4 cant print in Landscape - fixed in BS5? */
/* https://stackoverflow.com/questions/36322109/chrome-printing-website-missing-layout-options */
@page { size: auto }

/* Added classes by Christian */
@media(max-width: 400px) {
    .small-navbar {
        max-width: 47% !important;
    }
}
.progress {
    background-color: #ced4da !important; /* Make white centered text visible on progress bar */
}
/* Tooltip max-width wider - Note: needs to be global css since tooltips appear as a direct child in the body */
.tooltip-inner {
    max-width: 350px;
}
/* d-sm-none max width */
@media (max-width:576px) {
    .breadcrumb > li + li:before {
        display: none !important;
    }
}
/* global css moved from vue files */
.pac-container { /* Dont delete!!! Used for google autocomplete dropdown */
    z-index: 1551 !important;
}
.velmld-parent {
  position: relative !important;
}
.form-control {
  background-color: #FFFFFF;
  border: 2px solid #ced4da;
  padding: 8px 16px;
  height: 40px;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: Roboto,Helvetica Neue,Open Sans,Arial,sans-serif;
}

.table>:not(:first-child) {
    border-top: 0;
}

.popover { /* Used to ensure all popovers are on top */
    z-index: 2000;
}

/*----------------show sidebar button----------------*/
.sidebar-dropdown > a:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\25BE";
    display: inline-block;
    transform: rotate(-90deg);
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background: 0 0;
    position: static;
    right: 15px;
    top: auto;
}

.sidebar-dropdown.active > a:after {
    transform: rotate(0deg);
    right: 17px;
    top: auto;
}

.picker-selected {
    outline: deepskyblue solid 2px;
    outline-offset: -2px;
}

/**
 * ==============================================
 * Dot Flashing
 * ==============================================
 */
.dot-flashing {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #0d6efd;
  color: #0d6efd;
  animation: dot-flashing 1s infinite linear alternate;
  animation-delay: 0.5s;
}
.dot-flashing::before, .dot-flashing::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-flashing::before {
  left: -15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #0d6efd;
  color: #0d6efd;
  animation: dot-flashing 1s infinite alternate;
  animation-delay: 0s;
}
.dot-flashing::after {
  left: 15px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #0d6efd;
  color: #0d6efd;
  animation: dot-flashing 1s infinite alternate;
  animation-delay: 1s;
}

@keyframes dot-flashing {
  0% {
    background-color: #0d6efd;
  }
  50%, 100% {
    background-color: rgba(13, 110, 253, 0.2);
  }
}

@media (max-width: 992px) { /* Hack for mobile to prevent icons from wrapping on nav top */
    .dropdown-toggle-small::after {
        margin-left: 0;
    }
}