/** Darker Header **/
/* .cclogo {
  height: 80px;
  -webkit-filter: drop-shadow(5px 5px 5px #e8e8e8);
  filter: drop-shadow(-2px 1px 1px #e8e8e8);
}
.navbar-inverse {
  background-color: #c8c8c8;
  border-color: #F0F0F0 !important;
}
.side-nav {
  background-color:#F0F0F0;
} */
/** Lighter Header **/
.cclogo {
  height: 65px;
  padding-left: 40px;
  -webkit-filter: drop-shadow(5px 5px 5px gray);
  filter: drop-shadow(0px 1px 1px gray);
}
.navbar-inverse {
  background-color:#f0f0f0;
  border-color:#e0e0e0 !important;
}
.side-nav {
  background-color:#c8c8c8;
}

.header-search {
  margin-bottom: 20px;
}

.navbar-inverse .navbar-toglle:focus, .navbar-inverse .navbar-toggle:hover {
  background-color: #1976d2;
}

.navbar-toggle {
  margin-top: 20px;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
  border-top-color: #1976d2;
}

.navbar-inverse .navbar-brand {
  color: #dfdfdf;
}

.top-nav>li>a:hover, .top-nav>li>a:focus, .top-nav>.open>a, .top-nav>.open>a:hover, .top-nav>.open>a:focus {
  background-color: #1976d2;
  color: #fff;
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
  background-color: #1976d2;
  color: #fff;
}

.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover {
  color: #fff;
}

.navbar-inverse .navbar-nav>li>a {
  color:#404040  ;
}

.side-nav li a:hover, .side-nav li a:focus {
  background-color: #1976d2 !important;
  outline-color: -moz-use-text-color;
  outline-style: none;
  outline-width: medium;
  color: #fff;
}

.side-nav>li>ul>li>a {
  /* color: #333; */
  color:#404040
}

.navbar-inverse .navbar-toggle {
  border-bottom-color: #fff;
  border-left-color: #fff;
  border-right-color: #fff;
  border-top-color: #fff;
}

.top-nav>li>a {
  color:#404040;
}

#message-handler {
  position: fixed;
  bottom: 0;
  right: 0;
  max-width: 50%;
  z-index: 99999999999 !important;
}

#message-handler>#alert-type {
  margin: 0 auto;
}

body {
  background: #fff;
}

.h1, h1 {
  font-size: 28px;
}

.search-holder {
  background-color: #f5f5f5;
  border-radius: 4px;
  margin-bottom: 20px;
  padding-bottom: 8px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 8px;
}

.btn-primary {
  background-color: #1976d2;
}

.table-tr-pointer tr {
  cursor: pointer;
}

.modal-dialog {
  background: #fff;
  border-radius: 4px;
}

.modal-dialog>.modal-header {
  border-radius: 4px 4px 0 0;
  background-color: #2196f3;
  border: 1px solid #2196f3;
  color: #fff;
  padding-bottom: 0;
  padding-top: 10px;
}

.modal-dialog .modal-footer {
  padding-bottom: 10;
  padding-top: 10px;
}

.modal-form-header>i {
  margin-right: 20px;
  margin-left: 5px;
  color: #008000;
}

.modal-form-header {
  background-color: #dfdfdf;
  padding: 10px 15px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 2px;
  border: 1px solid #ddd;
}

.modal-body-content {
  padding: 20px;
}

.vresize {
  resize: vertical;
}

#mktg-spinner-icon p {
  color: #fff;
}

#mktg-spinner-icon {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 100%);
  z-index: 99999999;
  color: #1976d2;
}

#mktg-spinner {
  /* background-color: rgba(0, 0, 0, 0.4); */
  z-index: 999999999;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

​ .ticket-message-holder {
  padding-left: 10px;
  padding-right: 10px;
}

thead {
  background: #1976d2;
  color: rgb(255, 255, 255);
  vertical-align: middle;
}

thead th {
  vertical-align: middle !important;
}

table.dataTable thead th, table.dataTable thead td {
  border-bottom: #1976d2;
}

.row-input {
  margin-top: 10px;
}

.haserror {
  border: 1px solid #f44336;
  box-shadow: 0px 0px 6px -1px #ef5350;
  border-radius: 4px;
}

.haserror>span {
  color: #ef5350;
}

.lbl-info {
  color: #008000;
}

.lbl-info-error {
  color: #ef5350;
}

#add-button {
  height: 60px;
  width: 60px;
  background-color: #1976d2;
  border-radius: 50%;
  color: #fff;
  padding-left: 13px;
  padding-top: 0px;
  box-shadow: 1px 1px 2px 1px #666;
  position: fixed;
  bottom: 20px;
  right: 20px;
}

#comment-button {
  height: 60px;
  width: 60px;
  background-color: #1976d2;
  border-radius: 50%;
  color: #fff;
  padding-left: 13px;
  padding-top: 0px;
  box-shadow: 1px 1px 2px 1px #666;
  position: fixed;
  bottom: 20px;
  right: 100px;
}

#add-button:hover, #comment-button:hover {
  background-color: #1e88e5;
  box-shadow: 0 1px 10px 0 #666;
}

#add-button>span, #comment-button>span {
  font-size: 40px;
  padding: 0px;
  margin: 0px;
}

.comment-header {
  border-bottom: 1px solid #ddd;
  padding-bottom: 3px;
  font-weight: bold;
  margin-bottom: 10px;
}

.comment-content {
  background-color: #f5f5f5;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
}

.upload {
  cursor: pointer;
  margin-right: 10px;
}

.attachment-holder {
  border-top: 1px solid #ddd;
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.attachment-holder>.badge:hover {
  background-color: #1976d2;
}

.attachment-holder a {
  text-decoration: none !important;
  color: inherit;
}

.delete-file {
  cursor: pointer;
}

.delete-file:hover {
  color: red;
}

.attachmenturl:hover {
  background-color: #008000;
}

.badge-commenttype {
  background-color: #DFDFDF;
}

.badge-internal {
  background-color: #ff0000;
}

/* .badge-external {
  
} */

.fileUpload {
  position: relative;
  overflow: hidden;
  margin: 0px;
}

.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

.status {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-weight: bold;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.status.closed {
  background-color: tomato;
  color: #fff;
}

.status.pending {
  background-color: #008000;
  color: #fff;
}

.sla-pass {
  color: #008000;
  font-weight: bold;
}

.sla-alert {
  color: #ff9933;
  font-weight: bold;
}

.sla-fail {
  color: #fff;
  background-color: #ff0000;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-weight: bold;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.ui-widget-header {
  background-color: #1976d2;
  color: #fff;
}

.ui-datepicker {
  position: relative;
  z-index: 100000 !important;
}

/*list group item changed from A to DIV START*/

div.list-group-item-success, button.list-group-item-success {
  color: #3c763d;
}

div.list-group-item-success .list-group-item-heading, button.list-group-item-success .list-group-item-heading {
  color: inherit;
}

div.list-group-item-success:hover, button.list-group-item-success:hover, div.list-group-item-success:focus, button.list-group-item-success:focus {
  color: #3c763d;
  background-color: #d0e9c6;
}

div.list-group-item-success.active, button.list-group-item-success.active, div.list-group-item-success.active:hover, button.list-group-item-success.active:hover, div.list-group-item-success.active:focus, button.list-group-item-success.active:focus {
  color: #fff;
  background-color: #3c763d;
  border-color: #3c763d;
}

div.list-group-item-info, button.list-group-item-info {
  color: #31708f;
}

div.list-group-item-info .list-group-item-heading, button.list-group-item-info .list-group-item-heading {
  color: inherit;
}

div.list-group-item-info:hover, button.list-group-item-info:hover, div.list-group-item-info:focus, button.list-group-item-info:focus {
  color: #31708f;
  background-color: #c4e3f3;
}

div.list-group-item-info.active, button.list-group-item-info.active, div.list-group-item-info.active:hover, button.list-group-item-info.active:hover, div.list-group-item-info.active:focus, button.list-group-item-info.active:focus {
  color: #fff;
  background-color: #31708f;
  border-color: #31708f;
}

div.list-group-item-warning, button.list-group-item-warning {
  color: #8a6d3b;
}

div.list-group-item-warning .list-group-item-heading, button.list-group-item-warning .list-group-item-heading {
  color: inherit;
}

div.list-group-item-warning:hover, button.list-group-item-warning:hover, div.list-group-item-warning:focus, button.list-group-item-warning:focus {
  color: #8a6d3b;
  background-color: #faf2cc;
}

div.list-group-item-warning.active, button.list-group-item-warning.active, div.list-group-item-warning.active:hover, button.list-group-item-warning.active:hover, div.list-group-item-warning.active:focus, button.list-group-item-warning.active:focus {
  color: #fff;
  background-color: #8a6d3b;
  border-color: #8a6d3b;
}

div.list-group-item-danger, button.list-group-item-danger {
  color: #a94442;
}

div.list-group-item-danger .list-group-item-heading, button.list-group-item-danger .list-group-item-heading {
  color: inherit;
}

div.list-group-item-danger:hover, button.list-group-item-danger:hover, div.list-group-item-danger:focus, button.list-group-item-danger:focus {
  color: #a94442;
  background-color: #ebcccc;
}

div.list-group-item-danger.active, button.list-group-item-danger.active, div.list-group-item-danger.active:hover, button.list-group-item-danger.active:hover, div.list-group-item-danger.active:focus, button.list-group-item-danger.active:focus {
  color: #fff;
  background-color: #a94442;
  border-color: #a94442;
}

div.list-group-item, button.list-group-item {
  color: #555;
}

div.list-group-item .list-group-item-heading, button.list-group-item .list-group-item-heading {
  color: #333;
}

div.list-group-item:hover, button.list-group-item:hover, div.list-group-item:focus, button.list-group-item:focus {
  color: #555;
  text-decoration: none;
  background-color: #f5f5f5;
}

/*list group item changed from A to DIV END*/

/*ADDED Datatable date highlight*/

.prio-low {
  padding: 5px;
  background-color: #008000;
  color: white;
  border-radius: 5px;
  font-weight: bold;
}

.prio-med {
  padding: 5px;
  background-color: #FF9900;
  color: white;
  border-radius: 5px;
  font-weight: bold;
}

.prio-high {
  padding: 5px;
  background-color: #dc3545;
  color: white;
  border-radius: 5px;
  font-weight: bold;
}

.prio-vhigh {
  padding: 5px;
  background-color: #FF2B2B;
  color: white;
  border-radius: 5px;
  font-weight: bold;
  white-space: nowrap;
}

/* .clientStatus */

.clientStatus {
  width: 140px;
  height: 35px;
  background: whitesmoke;
  margin: 5px 0px 5px auto;
  position: relative;
  border-radius: 50px;
  -webkit-box-shadow: inset 0px 0px 2px 2px rgba(191, 191, 191, 1);
  -moz-box-shadow: inset 0px 0px 2px 2px rgba(191, 191, 191, 1);
  box-shadow: inset 0px 0px 2px 2px rgba(191, 191, 191, 1);
}

.clientStatus:after {
  padding-top: 7px;
  content: 'Inactive';
  color: #ff2323;
  position: absolute;
  right: 8px;
  z-index: 0;
  /*font: 14px Arial, sans-serif;*/
  font-weight: bold;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}

.clientStatus:before {
  padding-top: 7px;
  content: 'Active';
  color: green;
  position: absolute;
  left: 14px;
  z-index: 0;
  /*font: 14px Arial, sans-serif;*/
  font-weight: bold;
}

.clientStatus label {
  display: block;
  width: 70px;
  height: 29px;
  cursor: pointer;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
  background: #3399FF;
  border-radius: 50px;
  background: -webkit-gradient(linear, left top, left bottom, from(#3399FF), color-stop(40%, rgb(25, 118, 210)), to(#3399FF));
  background: linear-gradient(to bottom, #3399FF 0%, rgb(25, 118, 210) 40%, #3399FF 100%);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}

.clientStatus input[type=checkbox] {
  visibility: hidden;
}

.clientStatus input[type=checkbox]:checked+label {
  left: 67px;
}

/* #tbl-ts tbody tr, #tbl-cr tbody tr, #tbl-ts tfoot tr, #tbl-cr tfoot tr {
  font-size: 16px;
}

#tbl-ts tbody tr:hover, #tbl-cr tbody tr:hover, #tbl-ts tfoot tr:hover, #tbl-cr tfoot tr:hover {
  font-size: 18.5px;
  transition: 0.2s;
}

#tbl-ts tbody tr.text-success:hover,
#tbl-cr tbody tr.text-success:hover {
  background:#3c763d;
  color: white;
  color: white;
}

#tbl-ts tbody tr.text-danger:hover,
#tbl-cr tbody tr.text-danger:hover {
  background:#a94442;
  color: white;
}

#tbl-ts tbody tr.text-warning:hover,
#tbl-cr tbody tr.text-warning:hover {
  background:#8a6d3b;
  color: white;
}

#tbl-ts tbody tr.text-info:hover,
#tbl-cr tbody tr.text-info:hover {
  background:#31708f;
  color: white;
} */

#tbl-ts tbody tr, #tbl-cr tbody tr, #tbl-ts tfoot tr, #tbl-cr tfoot tr {
  font-size: 14px;
  /* transition: 1s; */
}

#tbl-ts .tsrow:hover, #tbl-cr .crrow:hover, #tbl-ts tfoot tr:hover, #tbl-cr tfoot tr:hover {
  font-size: 18.5px;
  transition: 0.2s;
}

/*list group item changed from A to DIV END*/

.indent-5:before {
  content: "\25b6";
  padding-right: 10px;
  font-size: 10px;
}

.resetBtn {
  color: #fff !important;
  background-color: #d9534f !important;
  border-color: #d43f3a !important;
}

/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.5);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 50px;
  height: 50px;
  margin-top: -0.5em;

  border: 5px solid rgba(33, 150, 243, 1.0);
  border-radius: 100%;
  border-bottom-color: transparent;
  -webkit-animation: spinner 1s linear 0s infinite;
  animation: spinner 1s linear 0s infinite;

}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.ui-dialog-titlebar-close {
  visibility: hidden;
}

.ui-widget-overlay {
  background: #AAA url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
  opacity: .30;
  filter: Alpha(Opacity=30);
}

.ui-dialog { z-index: 99999 !important ;}

.input-group-addon {
  width: 150px;
  text-align: left;
 }

 .input-group {
  margin: 10px 0;
 }

 .bg-light {
  background-color: #fff;
 }

 #implem-table-container table thead th,  #implem-table-container table thead td {
  vertical-align: middle;
  text-align: center;
 }

 #implem-table-container table tfoot th,  #implem-table-container table tfoot td {
  vertical-align: middle;
  text-align: center;
 }

 #implem-table-container table tbody td {
  vertical-align: middle;
  text-align: center;
 }

 #implem-table-container table tbody th,  #implem-table-container table tbody td {
  padding: 5px !important;
 }

 .navbar-brand-no-padding {
   padding: 0px;
 }