/* COMMON */
@font-face {
    font-family: GlyphIcons;
    src: url(../fonts/ui-only/glyphicons-halflings-regular.woff);
}

.brand-icon {
    width: 186px !important;
    margin-left: 16px !important;
}

.breadcrumb {
    display: none;
}

.dashboard-color-bar {
    margin:0;
    padding: 2px 6px;
    
}

/* COMMON */

/* NAV BAR \/  */
ul#mainnav-menu > li,
.popover-title,
.page-header {
    text-transform: capitalize;
}

.profile-wrap {
    padding-top:12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
#mainnav-menu > li {
    cursor: pointer !important;
}
#mainnav-menu {
    margin-top:20px;
}

.list-group-item {
    text-transform: none !important;
}

.profile-wrap > .pad-btm {
    /*padding-left: 58px;*/
}

.avatar-circle {
    width: 64px;
    height: 64px;
    background: radial-gradient(circle, rgba(64, 211, 91, 1) 0%, rgba(0, 103, 172, 1) 100%);
    opacity:0;
    transition: opacity .25s linear;
    text-align: center;
    border-radius: 50%;
    padding-left: 58px;
    margin-left: 58px;
    background-size: cover;
    background-repeat: no-repeat;
    border:4px solid #25476a; 
    box-sizing:border-box;
    background-position: 100%;
}

.avatar-initials {
    position: relative;
    top: 14px;
    /* 25% of parent */
    font-size: 52px;
    /* 50% of parent */
    line-height: 32px;
    /* 50% of parent */
    color: #fff;
    font-family: "Segoe UI", "Verdana";
    font-weight: 800;
    letter-spacing: -5px;
    /*text-shadow: 4px 4px 2px rgba(0, 0, 0, .25); */
    margin-left:-58px;
}

.mnp-name,
.mnp-desc {
    text-transform: capitalize;
}

.pop-in > li {
    text-transform: capitalize;
}

#mainnav .mainnav-profile .list-group-item {
    padding:10px 0;
}
.mainnav-profile {
    margin-bottom:0;
}

/* NAV BAR \/  */


/* LOGIN PAGE \/  */
#bg-overlay {

    background-color: #e8c345;
    background-image: url(../img/dmitri-popov-367732-unsplash.jpg) !important;
}

.panel-body {
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.75);
}

#login-help {
    padding-bottom: 0px;
    padding-top: 30px;
}

.cls-content {
    padding-top: 15vh;
}

/*  ^^^ LOGIN PAGE */





/* tables \/  */

.popover {
    z-index: 10001 !important;
}

.editable-input > textarea {
    height: 95px;
}

.card-view {
    line-height: 2em;
}

.card-view > span.title:after {
    content: ": ";
}

tr.selected > td {
    background-color: beige !important;
}

button[disabled] {
    opacity: .2 !important;
}

/* tables \/  */


/*
Ticket Counters
*/
#button-clear-filter {
    padding: 4px 8px !important;
    margin-top: -2px;
    margin-left: -6px;
    line-height: 1.8;
}

.noUi-marker-large,
.noUi-marker {
    background: #CCC !important;
}

.noUi-marker-horizontal.noUi-marker-large {
    height: 10px !important;
}

#slider {
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 50px;
    margin-top: 30px;
}


/* emergency flash */
.emergency-mode-enabled {
    animation-name: emergency;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes emergency {
    0% {
        background-color: #f45344;
    }

    50% {
        background-color: #25476a;
    }

    100% {
        background-color: #f45344;
    }
}

.navbar-top-links:nth-child(2) {
    color: #fff;
    padding: 10px;
    font-weight: 800;
}

.navbar-top-links:nth-child(2) > button {
    margin-left: 10px;
    font-weight: bold;

}

/* DASHBOARD */

.panel-body {
    box-shadow: none;
}

.media {
    cursor: pointer;
}

.donut-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height:100%;
}

.health-donut {
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height:100%;
    opacity: 0;
    transition: opacity .5s linear;
}

.donut-header {
    font-size:7px;
    margin-top:19px;
    letter-spacing: 1px;
}

.donut-number {
    font-size:42px; 
    line-height: .95em;
}

.donut-remark {
    font-size:5px;
    margin-top:4px;
}

.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation-name: dash;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode:forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 700;
  }
}

.software-name {
    cursor: crosshair;
}

.panel-colorful {
    opacity: 0;
}
#health-panel {
    height:100%;
    opacity: 0;
}
#health-container {
    min-height:200px;
} 
#messages-panel {
    opacity: 0;
}