body::-webkit-scrollbar { display: none; }

body {
    /*max-width: 1280px;*/
    margin: auto;
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-overflow-scrolling: touch;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.mobile {
    padding-top: 70px;   /* padding for top navbar */
    font-size: 16px;
    padding-bottom: 80px;
}

.mobile .btn {

    font-weight: bold;
}

.btn-muted {
    color: #ffffff;
    background-color: #87b5dd;
    border-color: #87b5dd;
}

.well-noborder {
    border: none;
}

.col-padding-5px {
    padding: 5px;
}

.padding-right-10px {
    padding-right: 10px;
}

.navbar-center {
    text-align: center;
    float: none;
}

.navbar-brand {
    padding-top: 5px;
}

.sidebar {
    /*border-right: 1px solid #eee;*/
    border-right: none;
}

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -60px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 60px;
}
#footer {
    background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* home page fonts */
.homepage {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 16px !important;
    line-height: 24px !important;
}
.homepage img {
    margin: auto;
    height:200px;
    width:100%;
}


/* adjust modal width */
body .modal {
    /* new custom width
    max-width: 85%;
    /* must be half of the width, minus scrollbar on the left (30px)
    left: 15%;
    width: auto; */
    margin-left: auto;
    margin-right: auto;
}

.modal {
    display: block;
}

.hide {
    display: none;
}

.no-float {
    float:none;
}

/* Multiselect styles
-------------------------------------------------- */
.multiselect {
    width: 200px;
    max-height: 300px;
    position: relative;
}
.multiselect-wrapper {
    margin: 0;
    background: #fff;
    border: 1px solid #aaa;
    box-shadow: 0 4px 5px rgba(0,0,0,.15);
    z-index: 1010;
    width: 100%;
    padding: 5px;
    border-radius: 4px;
    margin-top: 1px;
    position: absolute;

}
.multiselect ul{
    list-style-type: none;
    overflow: auto;
    max-height: 200px;
}
.multiselect input[type="text"]{
    width: 100%;
    box-sizing: border-box;
    height: 25px;
}
.multiselect .btn {
    width: 210px;
}

.select-xs {
    height: 20px;
    padding: 2px 2px;
    font-size: 10px;
    line-height: 1.5;
    border-radius: 2px;
}

.dropdown-menu {
    z-index: 2000;
    max-height: 300px; /*Provide height in pixels or in other units as per your layout*/
    overflow-y: auto; /*Provide an auto overflow to diaply scroll*/
}

.letter-box {
    width: 64px;
    height: 64px;
    background: lightskyblue;
    text-align: center;
    font-size: 32px;
    line-height: 64px;
    color: #f8f8ff;
    text-decoration: none !important;
}

.letter-box-small {
    width: 32px;
    height: 32px;
    background: lightskyblue;
    text-align: center;
    font-size: 16px;
    line-height: 32px;
    color: #f8f8ff;
}


img.media-object:before {
    content: ' ';
    display: block;
    position: absolute;
    height: 64px;
    width: 64px;
    background-image: url("/app/img/placeholder.png");
    border-radius: 6px;
}
img.placeholder40:before {
    content: ' ';
    display: block;
    position: absolute;
    height: 40px;
    width: 40px;
    background-image: url("/app/img/placeholder40.png");
    border-radius: 6px;
}

.media-object {
    width: 64px;
    height: 64px;
}

.media-object-small {
    width: 32px;
    height: 32px;
}

.placeholder40 {
    width: 40px;
    height: 40px;
}



/* for file input deisgn */
.upload_file_container{
    width:50px;
    height:50px;
    position:relative;
    background-image: url(../img/upload_clip.png);
    background-color: #f5f5f5;
}

.upload_file_container input{
    width:50px;
    height:50px;
    position:absolute;
    right:0;
    bottom:0;
    cursor:pointer;
}

.upload_file_containerlarge{
    position:relative;
}

.upload_file_containerlarge input{
    position:absolute;
    right:0;
    bottom:0;
    cursor:pointer;
}

.message-show-animation.ng-hide-remove {
    -webkit-transition:1s linear all;
    transition:1s linear all;

    /* remember to add this */
    display:block!important;
    opacity:1;
}
.message-show-animation.ng-hide {
    opacity: 0;
}

.homepage-icon-color {
    background-color: #e5e5e5;
    border-color: #cccccc;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notify{
    background-color:#f9edbe;
    padding:2px;
}

.deleted{
    background-color: #f2dede;
}

input.ng-invalid, button.ng-invalid
{
    border:1px solid #c66;
}

.mobile .progress{
    margin-bottom:2px;
}

@media (max-width: 767px) {   
    .listtxt {
        font-size:15px;   
    }
    #infomsg > h3{
        font-size:17px;  
    }
    input[type=checkbox]{
        width:20px !important;
        height:20px !important;
    }
    #noticeform label{
        font-size: 16px;
    }
}
#graphId .nv-bar{
    width:2px !important;
}

.subtle-text {
    color: #b8b8b8 !important;
}

/* lato-regular - latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'),
    url('../fonts/lato-v11-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/lato-v11-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* lato-italic - latin */
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: local('Lato Italic'), local('Lato-Italic'),
    url('../fonts/lato-v11-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/lato-v11-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

.categories {
    max-height: 300px;
    overflow: auto;
}

.drop-notification {
    position: fixed;
    z-index: 10;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    background-color:#111;
    color:#fff;
    padding:30px;
}
.dim {
    opacity: 0.5;
}

.modal-content > .panel {
    margin-bottom: 0px;
}

.group-multiselect {
    width: 160px;
    font-size: 12px;
    padding-left: 3px;
    padding-right: 3px;
}

.text-left {
    text-align: left;
}

.text-white {
    color:#fff;
}

.text-lightorange {
    color:lightgreen;
}

.text-lightyellow {
    color:yellow;
}

.text-lightgreen {
    color:green;
}

.text-cec-not-supported {
    color: #90eee0;
}

.text-storage-full {
    color: rgb(7, 196, 240)
}

.bg-default {
    background-color: #f5f5f5;
}

.pl-duration {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid lightgrey;

    -webkit-box-shadow: none;
    box-shadow: none;
}

.pl-duration-icon {
    border: 0;
    background:transparent;
}

.pl-5 {
    padding-left: 5px;
}
.pl-10 {
    padding-left: 10px;
}
.pr-5 {
    padding-right: 5px;
}
.pr-10 {
    padding-right: 10px;
}
.mb-5 {
    margin-bottom: 5px;
}
.mb-30 {
    margin-bottom: 30px;
}
.pb-5 {
    padding-bottom: 5px;
}

.hc-list {
    border: none;
    padding-bottom: 5px;
    padding-top: 5px;
    text-align: center;
}

#preview-window,
.scale-down {
    zoom: 0.5;
    transform: scale(0.5);
    transform-origin: 0 0;
}

.statcard-light-danger {
    background-color:#eba1a9;
}

/*IOS bug navbar-fixed*/
body {
    padding-top: 0px;
}
.pt-50 {
    padding-top: 50px;
}

.portrait img {
    transform: scale(0.56)  rotate(-90deg) ;
}

.portrait270 img{
    transform: scale(0.56)  rotate(90deg) ;
}

.panel>.list-group .list-group-item.selected {
    background-color: #f8f8ff;
}

.list-group-item.selected + .list-group-item:not(.selected) {
    border-top: thick ridge ghostwhite;
}

.deleted-bg {
    background-color: #ffe0e0 !important;
}

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop into it once it's empty
 */
ul[dnd-list] {
    min-height: 42px;
}

/**
 * An element with .dndPlaceholder class will be
 * added to the dnd-list while the user is dragging
 * over it.
 */
.dndPlaceholder {
    background-color: #ddd;
    display: block;
    min-height: 42px;
}

/**
 * Show selected elements in green
 */
#unassigned li.dragSelected {
    background-color: #dff0d8;
    color: #3c763d;
}
#assigned li.dragSelected {
    background-color: #dff0d8;
    color: #3c763d;
}

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

span.ellipsed-span {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.date-picker {
    position: relative;
    display: table;
}

.date-picker-label {
    display: table-cell;
    padding-right: 10px;
}

.time-input {
    margin: 0 auto;
    max-width: 110px;
}

.weekday-label {
    min-width: 114px;
    padding-left: 10px;
}