/* CSS for LDAP Tool Box Service Desk */

html, body {
  background: #eee;
  font-size: 12pt;
}

a, a:hover {
  text-decoration: none;
}

.panel, .alert, .navbar-wrapper {
  box-shadow:0 3px 6px rgba(0,0,0,.25);
}

.inset-1 {
  padding: 1rem;
}

.inset-2 {
  padding: 2rem;
}

.inset-3 {
  padding: 3rem;
}

.inset-4 {
  padding: 4rem;
}

.inset-5 {
  padding: 5rem;
}

@media (max-width: 720px) {
  .inset-2 {
    padding: .5rem;
  }
  
  .inset-3 {
    padding: .5rem;
  }
  
  .inset-4 {
    padding: .5rem;
  }
  
  .inset-5 {
    padding: .5rem;
  }
}

.panel {
  background-color:#fff;
  background-color:rgba(255,255,255,0.8);
}

img.menu-logo {
  height: 50px;
  width: auto;
  display: block;
}

.centered {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.display img {
  margin-bottom: 20px;
}

.bg-blurred {
  background-color: rgba(255, 255, 255, 0.75);/* Lighten background */
  backdrop-filter: blur(8px);
}

.fg-blurred {
  -webkit-filter: blur(4px);
  filter: blur(4px);
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='4');
}

/* Navigational Menu */
.navbar-brand {
  float: left;
  height: 50px;
  padding: 0px;
  font-size: 18px;
  line-height: 20px;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: white;
  background-color: #4a4a4a;
  border: 1px solid #4a4a4a;
}

.nav-link {
  display: block;
  padding: .5rem 1rem;
  color: #4a4a4a;
  text-decoration: none;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

.nav-tabs .nav-link {
  margin-bottom: -1px;
  background: 0 0;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}

.nav-link:focus, .nav-link:hover {
  color: #0a58ca;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
  border: 1px solid #4a4a4a;
  isolation: isolate;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Cards */
.card-header {
  padding: .5rem 1rem;
  margin-bottom: 0;
  background-color: rgba(0, 174, 255, 0.432);
  border-bottom: 1px solid rgba(0,0,0,.125);
}

/* Datepicker */
.lightpick__day.is-available {
  font-weight: bold;
  background-color: rgba(0, 255, 13, 0.253);
  /* border-radius: 25px; */
}

/* Data Tables */
table.dataTable th {
  /* font-size: 12px;
  font-size: 1.1vw; */
}

.transpose tbody tr {
  margin-right: -.27em;
}

.transpose th,
.transpose td {
  padding: .1rem .1rem;
  border-bottom-color: black;
  /* width: 20vw; */
}

.transpose tr.odd {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.05);
}

.transpose .no-data {
  color: #868686;
  border-bottom-color: black !important;
  font-style: italic;
}

.table tr.highlight-salmon, td.highlight-salmon {
  background-color: #fa807246;
}

.table tr.highlight-yellow, td.highlight-yellow {
  background-color: #fbff00c0;
}

/* FA icons with no background */
.inline-icon {
  border: none;
  background: none;
  font-size: 18px;
}

/* Hide edit button until hover */
.hover-edit {
  visibility: hidden;
}

/* when .hover-editable class is hovered, show .hover-edit */
.hover-editable:hover,
.hover-editable:hover .hover-edit,
.hover-editable .hover-edit:hover {
  color: blue;
  visibility: visible;
}

/*  Colors */

.red {
  color: red;
}

.green {
  color: green;
}

.hover-red:hover {
  color: red;
}
.hover-green:hover {
  color: green;
}

.fade-green {
  animation: bgcolor 2s 0s linear;
}

@keyframes bgcolor{
from   {background-color:rgba(0, 255, 13, 0.253);}
to     {background-color:inherit;}
}

/* Select2 container height (matches Bootstrap) */
.select2-container .select2-search--inline .select2-search__field {
  height: 28px;
}

.select2-container {
  padding: 0px;
}

.select2-container .select2-selection--single
{
  height: 38px !important;
  line-height: 30px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px !important;
}

/* Checkbox */
.big-checkbox {
  height: 30px;
  width: 60px !important;
}

.med-checkbox {
  height: 20px;
  width: 50px !important;
}