.classic-table
{
    table-layout: fixed;
    width: 100%;
}

.classic-table td, .classic-table th {
    border: 1px solid lightgrey;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    padding: 2px;
}


.clocking-encoding-table
{
    table-layout: fixed;
    width: 100%;
}

.clocking-encoding-table td, .clocking-encoding-table th {
    border: 1px solid lightgrey;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    padding: 3px;
}

/* Override bootstrap.css
    Check the ui-select's ass in the message creation form without this' 
    Check also the date picker.

    Everything seem to render ok, but I don't understand shit about what I did.
*/
@media (min-width: 768px) {
  .form-inline .form-control {
    width: 100%; /* originally auto */
  }
  .form-inline .input-group .input-group-addon,
  .form-inline .input-group .input-group-btn,
  .form-inline .input-group .form-control {
    width: auto;/* originally auto */
  }
  .form-inline .input-group > .form-control {
    width: 100%;/* originally auto */
  }
}


.table {
    margin-bottom: 0;
}


.orange-warning 
{
    background-color: #f0ad4e;
}

.red-danger
{
    background-color: #c9302c;
}

.green-ok
{
    background-color: #5cb85c; /*#449d44*/
}

.dark-green-ok
{
    background-color: #3c763d;
}


.badge.small-badge {
  padding: 1px 5px 2px;
  font-size: 10.5px;
  border-radius: 6px;
}

/* Better bootstrap badges */
.badge {
  padding: 1px 9px 2px;
  font-size: 12.025px;
  font-weight: bold;
  white-space: nowrap;
  color: #ffffff;
  background-color: #999999;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}
.badge:hover {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}
.badge-error {
  background-color: #b94a48;
}
.badge-error:hover {
  background-color: #953b39;
}
.badge-warning {
  background-color: #f89406;
}
.badge-warning:hover {
  background-color: #c67605;
}
.badge-success {
  background-color: #468847;
}
.badge-success:hover {
  background-color: #356635;
}
.badge-info {
  background-color: #3a87ad;
}
.badge-info:hover {
  background-color: #2d6987;
}
.badge-inverse {
  background-color: #333333;
}
.badge-inverse:hover {
  background-color: #1a1a1a;
}

/* For multiline bootstrap tooltips. */
.tooltip-inner {
    white-space:pre-wrap;
}

/* ---- Loader ------------*/
.spinner {
   position: absolute;
   left: 50%;
   top: 50%;
   height:60px;
   width:60px;
   margin:0px auto;
   -webkit-animation: rotation .6s infinite linear;
   -moz-animation: rotation .6s infinite linear;
   -o-animation: rotation .6s infinite linear;
   animation: rotation .6s infinite linear;
   border-left:6px solid rgba(0,174,239,.15);
   border-right:6px solid rgba(0,174,239,.15);
   border-bottom:6px solid rgba(0,174,239,.15);
   border-top:6px solid rgba(0,174,239,.8);
   border-radius:100%;
}

@-webkit-keyframes rotation {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
   from {-o-transform: rotate(0deg);}
   to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}


.loader {
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease;
  animation: load6 1.7s infinite ease;
}
@-webkit-keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em #d9edf7, 0 -0.83em 0 -0.42em #d9edf7, 0 -0.83em 0 -0.44em #d9edf7, 0 -0.83em 0 -0.46em #d9edf7, 0 -0.83em 0 -0.477em #d9edf7;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em #d9edf7, 0 -0.83em 0 -0.42em #d9edf7, 0 -0.83em 0 -0.44em #d9edf7, 0 -0.83em 0 -0.46em #d9edf7, 0 -0.83em 0 -0.477em #d9edf7;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em #d9edf7, -0.087em -0.825em 0 -0.42em #d9edf7, -0.173em -0.812em 0 -0.44em #d9edf7, -0.256em -0.789em 0 -0.46em #d9edf7, -0.297em -0.775em 0 -0.477em #d9edf7;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em #d9edf7, -0.338em -0.758em 0 -0.42em #d9edf7, -0.555em -0.617em 0 -0.44em #d9edf7, -0.671em -0.488em 0 -0.46em #d9edf7, -0.749em -0.34em 0 -0.477em #d9edf7;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em #d9edf7, -0.377em -0.74em 0 -0.42em #d9edf7, -0.645em -0.522em 0 -0.44em #d9edf7, -0.775em -0.297em 0 -0.46em #d9edf7, -0.82em -0.09em 0 -0.477em #d9edf7;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em #d9edf7, 0 -0.83em 0 -0.42em #d9edf7, 0 -0.83em 0 -0.44em #d9edf7, 0 -0.83em 0 -0.46em #d9edf7, 0 -0.83em 0 -0.477em #d9edf7;
  }
}
@keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em #d9edf7, 0 -0.83em 0 -0.42em #d9edf7, 0 -0.83em 0 -0.44em #d9edf7, 0 -0.83em 0 -0.46em #d9edf7, 0 -0.83em 0 -0.477em #d9edf7;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em #d9edf7, 0 -0.83em 0 -0.42em #d9edf7, 0 -0.83em 0 -0.44em #d9edf7, 0 -0.83em 0 -0.46em #d9edf7, 0 -0.83em 0 -0.477em #d9edf7;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em #d9edf7, -0.087em -0.825em 0 -0.42em #d9edf7, -0.173em -0.812em 0 -0.44em #d9edf7, -0.256em -0.789em 0 -0.46em #d9edf7, -0.297em -0.775em 0 -0.477em #d9edf7;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em #d9edf7, -0.338em -0.758em 0 -0.42em #d9edf7, -0.555em -0.617em 0 -0.44em #d9edf7, -0.671em -0.488em 0 -0.46em #d9edf7, -0.749em -0.34em 0 -0.477em #d9edf7;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em #d9edf7, -0.377em -0.74em 0 -0.42em #d9edf7, -0.645em -0.522em 0 -0.44em #d9edf7, -0.775em -0.297em 0 -0.46em #d9edf7, -0.82em -0.09em 0 -0.477em #d9edf7;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em #d9edf7, 0 -0.83em 0 -0.42em #d9edf7, 0 -0.83em 0 -0.44em #d9edf7, 0 -0.83em 0 -0.46em #d9edf7, 0 -0.83em 0 -0.477em #d9edf7;
  }
}
/* ------------------------*/

.dropdown-menu {
    z-index: 1500 !important;
}

/* Center the modal dialog both vertically and horizontally... */
.modal {
  text-align: center;
}

.modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}


/* xs buttons and fields in forms... */
.input-xs {
height: 22px;
padding: 2px 5px;
font-size: 12px;
line-height: 1.5; /*If Placeholder of the input is moved up, rem/modify this.*/
border-radius: 3px;
}

/* Message creation form... */
.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

/* Sometimes, I want the split bar to be hidden (ex: menu) */
.hide-split-bar > .ui-splitbar {
    display: none;
}

/* visible popup (specifically for when I want to open a date picker that extend outside the layout) */
.layout-visible-popup {
    overflow: visible !important;
    /*z-index: 9999 !important;*/
}

.collapsible-panel-heading a:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";
    float: right;
    color: grey;
}
.collapsible-panel-heading a.collapsed:after {
    content:"\e079";
}


/* Full calendar overrides */
.fc-event{
    cursor: pointer !important;
}

/* For a better button focus */

.viewPane {
    padding-top: 10px;
}

.btn:focus {
  outline: none !important;
}

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Set width on the form input elements since they're 100% wide by default 
input,
select,
textarea {
    max-width: 280px;
}
    */