body{
  background-color:#71726A;
  padding-top:60px;
}

#sortableFields{
  padding-left:0px;
}

#sortableFields li{
  display:block;
  border:1px #c0c0c0 solid;
  margin:2px;
  padding:5px;
  background-color:#fff;
  cursor:move;
  max-width:200px;
}

.form-control, button, input[type=button], .modal-content, .btn, .modal-header, .input-group-addon, .dropdown-menu{
  /* border-radius */
}

/* needed to fix overlapping bootstrapdialog windows and scrolling bug */
.modal {
  overflow: auto !important; 
}


.navbar-default .navbar-toggle{
  border:1px #000 solid !important;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
  background-color:inherit;
}

.navbar-default{
  background-color:#000;
  box-shadow:0px 0px 5px #000;
  margin-bottom:15px;
}

.navbar-default .navbar-brand{
  color:#f1f1f1;
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover{
  color:#ccc;
}

.navbar-default .navbar-nav > li > a{
  color:#f1f1f1;
}

.navbar-default .navbar-nav > li > a:hover{
  color:#CCCCCC;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
  color:#f1f1f1;
  background-color:#444;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover{
  background-color:#444;
  color:#f1f1f1;
}

.dropdown-menu > li > a:hover{
  background-color:#337AB7;
  color:#fff;
}

.bootstrap-switch{
  margin-right:20px;
}

.activeFiltersMessage{
  font-size:12px;
  display:block;
  float:right;
  margin-top:7px;
}

.checkbox label{

}

.statusActive{
  color:#CC0000;
}

.statusDone{
  color:#0066FF;
}

span.activeFieldColor{
  color:#0066FF;
}

span.notActiveColor{
  color:#999999;
}

/* tables */
table.tablesorter {
	/*font-family:arial;
	background-color: #CDCDCD;
	margin:10px 0pt 15px;
	font-size: 8pt;
	width: 100%;
	text-align: left;*/
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	/*background-color: #e6EEEE;
	border: 1px solid #FFF;
	font-size: 8pt;
	padding: 4px;*/
}
table.tablesorter thead tr .header {
	background-repeat: no-repeat;
	background-position: center right;

}

table.tablesorter thead tr .headerSortUp {
	background-image: url(../js/tablesorter/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(../js/tablesorter/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
  background-color:aliceblue;
}

.y {background-color:yellow;}

@media (max-width: 767px) {
  .btn {
    padding: 5px 8px;
  }
  #tPageInfo {
    font-size: 12px;
    margin: 0 5px !important;
  }
}

.notification-container {
  position: fixed !important;
  z-index: 9999 !important;
  width: auto !important;
  max-width: 95% !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  overflow-x: auto !important;
}
.notification-container.top-right { top: 20px; right: 20px; }
.notification-container.top-left { top: 20px; left: 20px; }
.notification-container.bottom-right { bottom: 20px; right: 20px; }
.notification-container.bottom-left { bottom: 20px; left: 20px; }
.success-notification {
  background: #d4edda !important;
  color: #155724 !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
  min-width: 250px !important;
  max-width: 350px !important;
  height: 36px !important;
  transform: translateY(0) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  margin-right: 10px !important;
}
.success-notification.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
}
.notification-icon {
  margin-right: 8px !important;
  font-size: 1em !important;
  display: flex !important;
  align-items: center !important;
}
.notification-content {
  flex-grow: 1 !important;
  font-size: 1em !important;
  line-height: 1.1 !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.notification-close {
  margin-left: 8px !important;
  cursor: pointer !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s !important;
  font-size: 1em !important;
  display: flex !important;
  align-items: center !important;
}
.notification-close:hover { opacity: 1 !important; }

#coloringForm .table-body-container {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-top: none;
}

#coloringForm .color-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

#coloringForm .color-table thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

#coloringForm .color-table thead   { display: table-header-group; }
#coloringForm .color-table tbody   { display: table-row-group; }
#coloringForm .color-table tbody tr{ display: table-row; }

#coloringForm .color-table th,
#coloringForm .color-table td {
    padding: 8px;
    text-align: left;
    border-top: 1px solid #ddd;
    vertical-align: middle;
}

#coloringForm .color-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

#coloringForm .color-swatch {
    width: 30px;
    height: 30px;
    display: inline-block;
    border: 1px solid #ccc;
    cursor: pointer;
}

#coloringForm .tab-pane { display: none; }
#coloringForm .tab-pane.active { display: block; }