.loading-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -88px;
  margin-top: -24px;
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

/* Login page*/
.login-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 40px;
  /* background-color: #f5f5f5; */
  /* height:100%; */
  width: 100%;
  align-content: center;
}

.login-title {
  align-self: center;
  padding-bottom: 20px;
}

.login-subtitle {
  align-self: center;
  padding-bottom: 114px;
}

.login-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}

.form-signin .form-control:focus {
  z-index: 2;
}

.form-signin input {
  margin-bottom: 5px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type=password] {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.message-card-container {
  width: 600px;
  margin: 1rem auto !important;
}

@media (max-width: 768px) {
  .message-card-container {
    width: 300px;
  }
}
/* animations */
@keyframes slidein {
  from {
    width: 70px;
  }
  to {
    width: 250px;
  }
}
@keyframes slideout {
  from {
    width: 250px;
  }
  to {
    width: 70px;
  }
}
.sidebar {
  background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #212529 70%);
  width: 250px;
  height: 100vh;
  position: sticky;
  top: 0;
  animation-duration: 0.5s;
  animation-name: slidein;
}
.sidebar .top-row {
  background-color: rgba(0, 0, 0, 0.4);
}
.sidebar .navbar-brand {
  font-size: 1.1rem;
}
.sidebar .oi {
  width: 2rem;
  font-size: 1.1rem;
  vertical-align: text-top;
  top: -2px;
}
.sidebar .nav-group {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #a7a7a7;
  padding: 1rem 0.75rem;
  font-weight: 800;
}
.sidebar .nav-group .shrink {
  display: none;
}
.sidebar .nav-item {
  font-size: 0.9rem;
  padding-bottom: 0.5rem;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}
.sidebar .nav-item:first-of-type {
  padding-top: 1rem;
}
.sidebar .nav-item:last-of-type {
  padding-bottom: 1rem;
}
.sidebar .nav-item .nav-link {
  color: #d7d7d7;
  border-radius: 4px;
  height: 3rem;
  display: flex;
  align-items: center;
  line-height: 3rem;
}
.sidebar .nav-item .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.sidebar .nav-item a.active {
  background-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.shrink {
  animation-duration: 0.5s;
  animation-name: slideout;
  width: 70px;
}
.shrink .nav-group {
  display: none;
}
.shrink .nav-item {
  width: 68px;
  padding: 5px 10px !important;
}
.shrink .nav-link {
  margin-left: 3px;
  padding-left: 0.75rem;
}
.shrink span {
  display: none;
}

.navbar-toggler {
  display: none;
}

@media (max-width: 768px) {
  @keyframes slidein {
    from {
      width: 70px;
    }
    to {
      width: 0px;
    }
  }
  @keyframes slideout {
    from {
      width: 0px;
    }
    to {
      width: 70px;
    }
  }
  .sidebar {
    position: sticky;
    z-index: 9999;
    width: 0px;
  }
  .sidebar * {
    display: none;
  }
  .shrink {
    animation-duration: 0.5s;
    animation-name: slideout;
    width: 70px;
  }
  .shrink * {
    display: block;
  }
  .shrink .nav-group {
    display: none;
  }
  .shrink .nav-item {
    width: 68px;
    padding: 5px 10px !important;
  }
  .shrink .nav-link {
    margin-left: 3px;
    padding-left: 0.75rem;
  }
  .shrink span {
    display: none;
  }
  .shrink .sidebar {
    width: 75px;
  }
}
/* TaskView.razor */
/* TODO: needed better solution to deal with colors (e,g Sass) */
.timer-text, .timer-text-title {
  /*    color: #fff;
  */
  font-weight: 400;
  font-size: 1rem;
}

.timer-text {
  margin-bottom: 0.5rem;
}

.timer-text-title {
  vertical-align: sub;
}

.timer-text-timespan, .timer-text-timespan-lg {
  font-weight: 600;
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  .timer-text-timespan-lg {
    font-size: 5rem;
  }
  .timer-text-timespan-frame {
    width: 310px;
  }
}
@media (max-width: 767.98px) {
  .timer-text-timespan-lg {
    font-size: 3rem;
  }
  .timer-text-timespan-frame {
    width: 180px;
  }
}
.timer-text-timespan-sm {
  font-size: 3rem;
}

.timer-text-timespan-frame-sm {
  width: 180px;
}

.timer-button, .small-timer-button {
  padding: 0px;
  color: #757575;
}

.timer-button a {
  text-decoration: none;
}

.timer-item-background {
  transition: all 0.5s;
  /*cursor: pointer;*/
}

.timer-item-background:hover {
  background: rgba(255, 0, 0, 0.1);
}

.timer-card, .timer-card-active {
  margin: 1em 1em !important;
  box-shadow: 0 0 1rem 0rem rgba(50, 50, 50, 0.3);
}

.timer-card {
  max-width: 12rem;
  min-width: 12rem;
}

.timer-card-active {
  min-width: 87%;
  border: 1px solid #b0b0b0;
  border-radius: 3px;
  /*    background-color: #ffb4b4;
  */
}

.small-timer-button {
  font-size: 14px !important;
}

.timer-list-item {
  font-size: 14px !important;
}

/*ColorDropdown.razor*/
/*Colors.razor*/
.dot, .small-dot {
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

.dot, .square {
  height: 25px;
  width: 25px;
}

.small-dot, .small-square {
  height: 12px;
  width: 12px;
}

.square, .small-square {
  background-color: #bbb;
  border-radius: 0%;
  display: inline-block;
}

div.clear, span.clear {
  background-color: transparent !important;
  fill: transparent;
  color: #000000 !important;
  stroke: rgba(0, 0, 0, 0.5);
}
div.clear:hover, span.clear:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
  fill: rgba(255, 255, 255, 0.3);
  color: rgb(76.5, 76.5, 76.5) !important;
}
div.clear:focus, span.clear:focus {
  background-color: rgba(0, 0, 0, 0.5) !important;
  fill: rgba(0, 0, 0, 0.5);
  color: black !important;
}

/*No highligh styles*/
a.clear, div.clear-nh, span.clear-nh {
  background-color: transparent !important;
  fill: transparent;
  color: #000000 !important;
  stroke: rgba(0, 0, 0, 0.5);
}
a.clear:hover, div.clear-nh:hover, span.clear-nh:hover {
  color: rgb(76.5, 76.5, 76.5) !important;
}
a.clear:focus, div.clear-nh:focus, span.clear-nh:focus {
  color: black !important;
}

/*No background styles*/
a.clear-nb, div.clear-nb, span.clear-nb {
  color: #000000 !important;
  stroke: rgba(0, 0, 0, 0.5);
}
a.clear-nb:hover, div.clear-nb:hover, span.clear-nb:hover {
  color: rgb(76.5, 76.5, 76.5) !important;
}
a.clear-nb:focus, div.clear-nb:focus, span.clear-nb:focus {
  color: black !important;
}

div.black, span.black {
  background-color: #000000 !important;
  fill: #000000;
  color: #f0f0f0 !important;
  stroke: black;
}
div.black:hover, span.black:hover {
  background-color: rgb(76.5, 76.5, 76.5) !important;
  fill: rgb(76.5, 76.5, 76.5);
  color: rgb(244.5, 244.5, 244.5) !important;
}
div.black:focus, span.black:focus {
  background-color: black !important;
  fill: black;
  color: #787878 !important;
}

/*No highligh styles*/
a.black, div.black-nh, span.black-nh {
  background-color: #000000 !important;
  fill: #000000;
  color: #f0f0f0 !important;
  stroke: black;
}
a.black:hover, div.black-nh:hover, span.black-nh:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.black:focus, div.black-nh:focus, span.black-nh:focus {
  color: #787878 !important;
}

/*No background styles*/
a.black-nb, div.black-nb, span.black-nb {
  color: #f0f0f0 !important;
  stroke: black;
}
a.black-nb:hover, div.black-nb:hover, span.black-nb:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.black-nb:focus, div.black-nb:focus, span.black-nb:focus {
  color: #787878 !important;
}

div.white, span.white {
  background-color: #f0f0f0 !important;
  fill: #f0f0f0;
  color: #f0f0f0 !important;
  stroke: #787878;
}
div.white:hover, span.white:hover {
  background-color: rgb(244.5, 244.5, 244.5) !important;
  fill: rgb(244.5, 244.5, 244.5);
  color: rgb(244.5, 244.5, 244.5) !important;
}
div.white:focus, span.white:focus {
  background-color: #787878 !important;
  fill: #787878;
  color: #787878 !important;
}

/*No highligh styles*/
a.white, div.white-nh, span.white-nh {
  background-color: #f0f0f0 !important;
  fill: #f0f0f0;
  color: #f0f0f0 !important;
  stroke: #787878;
}
a.white:hover, div.white-nh:hover, span.white-nh:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.white:focus, div.white-nh:focus, span.white-nh:focus {
  color: #787878 !important;
}

/*No background styles*/
a.white-nb, div.white-nb, span.white-nb {
  color: #f0f0f0 !important;
  stroke: #787878;
}
a.white-nb:hover, div.white-nb:hover, span.white-nb:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.white-nb:focus, div.white-nb:focus, span.white-nb:focus {
  color: #787878 !important;
}

div.red, span.red {
  background-color: #ff0000 !important;
  fill: #ff0000;
  color: #f0f0f0 !important;
  stroke: rgb(127.5, 0, 0);
}
div.red:hover, span.red:hover {
  background-color: rgb(255, 76.5, 76.5) !important;
  fill: rgb(255, 76.5, 76.5);
  color: rgb(244.5, 244.5, 244.5) !important;
}
div.red:focus, span.red:focus {
  background-color: rgb(127.5, 0, 0) !important;
  fill: rgb(127.5, 0, 0);
  color: #787878 !important;
}

/*No highligh styles*/
a.red, div.red-nh, span.red-nh {
  background-color: #ff0000 !important;
  fill: #ff0000;
  color: #f0f0f0 !important;
  stroke: rgb(127.5, 0, 0);
}
a.red:hover, div.red-nh:hover, span.red-nh:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.red:focus, div.red-nh:focus, span.red-nh:focus {
  color: #787878 !important;
}

/*No background styles*/
a.red-nb, div.red-nb, span.red-nb {
  color: #f0f0f0 !important;
  stroke: rgb(127.5, 0, 0);
}
a.red-nb:hover, div.red-nb:hover, span.red-nb:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.red-nb:focus, div.red-nb:focus, span.red-nb:focus {
  color: #787878 !important;
}

div.orange, span.orange {
  background-color: #ffa500 !important;
  fill: #ffa500;
  color: #f0f0f0 !important;
  stroke: rgb(127.5, 82.5, 0);
}
div.orange:hover, span.orange:hover {
  background-color: rgb(255, 192, 76.5) !important;
  fill: rgb(255, 192, 76.5);
  color: rgb(244.5, 244.5, 244.5) !important;
}
div.orange:focus, span.orange:focus {
  background-color: rgb(127.5, 82.5, 0) !important;
  fill: rgb(127.5, 82.5, 0);
  color: #787878 !important;
}

/*No highligh styles*/
a.orange, div.orange-nh, span.orange-nh {
  background-color: #ffa500 !important;
  fill: #ffa500;
  color: #f0f0f0 !important;
  stroke: rgb(127.5, 82.5, 0);
}
a.orange:hover, div.orange-nh:hover, span.orange-nh:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.orange:focus, div.orange-nh:focus, span.orange-nh:focus {
  color: #787878 !important;
}

/*No background styles*/
a.orange-nb, div.orange-nb, span.orange-nb {
  color: #f0f0f0 !important;
  stroke: rgb(127.5, 82.5, 0);
}
a.orange-nb:hover, div.orange-nb:hover, span.orange-nb:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.orange-nb:focus, div.orange-nb:focus, span.orange-nb:focus {
  color: #787878 !important;
}

div.yellow, span.yellow {
  background-color: #ffff00 !important;
  fill: #ffff00;
  color: #f0f0f0 !important;
  stroke: rgb(127.5, 127.5, 0);
}
div.yellow:hover, span.yellow:hover {
  background-color: rgb(255, 255, 76.5) !important;
  fill: rgb(255, 255, 76.5);
  color: rgb(244.5, 244.5, 244.5) !important;
}
div.yellow:focus, span.yellow:focus {
  background-color: rgb(127.5, 127.5, 0) !important;
  fill: rgb(127.5, 127.5, 0);
  color: #787878 !important;
}

/*No highligh styles*/
a.yellow, div.yellow-nh, span.yellow-nh {
  background-color: #ffff00 !important;
  fill: #ffff00;
  color: #f0f0f0 !important;
  stroke: rgb(127.5, 127.5, 0);
}
a.yellow:hover, div.yellow-nh:hover, span.yellow-nh:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.yellow:focus, div.yellow-nh:focus, span.yellow-nh:focus {
  color: #787878 !important;
}

/*No background styles*/
a.yellow-nb, div.yellow-nb, span.yellow-nb {
  color: #f0f0f0 !important;
  stroke: rgb(127.5, 127.5, 0);
}
a.yellow-nb:hover, div.yellow-nb:hover, span.yellow-nb:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.yellow-nb:focus, div.yellow-nb:focus, span.yellow-nb:focus {
  color: #787878 !important;
}

div.chartreusegreen, span.chartreusegreen {
  background-color: #7fff00 !important;
  fill: #7fff00;
  color: #f0f0f0 !important;
  stroke: rgb(63.5, 127.5, 0);
}
div.chartreusegreen:hover, span.chartreusegreen:hover {
  background-color: rgb(165.4, 255, 76.5) !important;
  fill: rgb(165.4, 255, 76.5);
  color: rgb(244.5, 244.5, 244.5) !important;
}
div.chartreusegreen:focus, span.chartreusegreen:focus {
  background-color: rgb(63.5, 127.5, 0) !important;
  fill: rgb(63.5, 127.5, 0);
  color: #787878 !important;
}

/*No highligh styles*/
a.chartreusegreen, div.chartreusegreen-nh, span.chartreusegreen-nh {
  background-color: #7fff00 !important;
  fill: #7fff00;
  color: #f0f0f0 !important;
  stroke: rgb(63.5, 127.5, 0);
}
a.chartreusegreen:hover, div.chartreusegreen-nh:hover, span.chartreusegreen-nh:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.chartreusegreen:focus, div.chartreusegreen-nh:focus, span.chartreusegreen-nh:focus {
  color: #787878 !important;
}

/*No background styles*/
a.chartreusegreen-nb, div.chartreusegreen-nb, span.chartreusegreen-nb {
  color: #f0f0f0 !important;
  stroke: rgb(63.5, 127.5, 0);
}
a.chartreusegreen-nb:hover, div.chartreusegreen-nb:hover, span.chartreusegreen-nb:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.chartreusegreen-nb:focus, div.chartreusegreen-nb:focus, span.chartreusegreen-nb:focus {
  color: #787878 !important;
}

div.green, span.green {
  background-color: #00ff00 !important;
  fill: #00ff00;
  color: #f0f0f0 !important;
  stroke: rgb(0, 127.5, 0);
}
div.green:hover, span.green:hover {
  background-color: rgb(76.5, 255, 76.5) !important;
  fill: rgb(76.5, 255, 76.5);
  color: rgb(244.5, 244.5, 244.5) !important;
}
div.green:focus, span.green:focus {
  background-color: rgb(0, 127.5, 0) !important;
  fill: rgb(0, 127.5, 0);
  color: #787878 !important;
}

/*No highligh styles*/
a.green, div.green-nh, span.green-nh {
  background-color: #00ff00 !important;
  fill: #00ff00;
  color: #f0f0f0 !important;
  stroke: rgb(0, 127.5, 0);
}
a.green:hover, div.green-nh:hover, span.green-nh:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.green:focus, div.green-nh:focus, span.green-nh:focus {
  color: #787878 !important;
}

/*No background styles*/
a.green-nb, div.green-nb, span.green-nb {
  color: #f0f0f0 !important;
  stroke: rgb(0, 127.5, 0);
}
a.green-nb:hover, div.green-nb:hover, span.green-nb:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.green-nb:focus, div.green-nb:focus, span.green-nb:focus {
  color: #787878 !important;
}

div.springgreen, span.springgreen {
  background-color: #00ff7f !important;
  fill: #00ff7f;
  color: #f0f0f0 !important;
  stroke: rgb(0, 127.5, 63.5);
}
div.springgreen:hover, span.springgreen:hover {
  background-color: rgb(76.5, 255, 165.4) !important;
  fill: rgb(76.5, 255, 165.4);
  color: rgb(244.5, 244.5, 244.5) !important;
}
div.springgreen:focus, span.springgreen:focus {
  background-color: rgb(0, 127.5, 63.5) !important;
  fill: rgb(0, 127.5, 63.5);
  color: #787878 !important;
}

/*No highligh styles*/
a.springgreen, div.springgreen-nh, span.springgreen-nh {
  background-color: #00ff7f !important;
  fill: #00ff7f;
  color: #f0f0f0 !important;
  stroke: rgb(0, 127.5, 63.5);
}
a.springgreen:hover, div.springgreen-nh:hover, span.springgreen-nh:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.springgreen:focus, div.springgreen-nh:focus, span.springgreen-nh:focus {
  color: #787878 !important;
}

/*No background styles*/
a.springgreen-nb, div.springgreen-nb, span.springgreen-nb {
  color: #f0f0f0 !important;
  stroke: rgb(0, 127.5, 63.5);
}
a.springgreen-nb:hover, div.springgreen-nb:hover, span.springgreen-nb:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.springgreen-nb:focus, div.springgreen-nb:focus, span.springgreen-nb:focus {
  color: #787878 !important;
}

div.darkgreen, span.darkgreen {
  background-color: #28a745 !important;
  fill: #28a745;
  color: #f0f0f0 !important;
  stroke: rgb(20, 83.5, 34.5);
}
div.darkgreen:hover, span.darkgreen:hover {
  background-color: rgb(104.5, 193.4, 124.8) !important;
  fill: rgb(104.5, 193.4, 124.8);
  color: rgb(244.5, 244.5, 244.5) !important;
}
div.darkgreen:focus, span.darkgreen:focus {
  background-color: rgb(20, 83.5, 34.5) !important;
  fill: rgb(20, 83.5, 34.5);
  color: #787878 !important;
}

/*No highligh styles*/
a.darkgreen, div.darkgreen-nh, span.darkgreen-nh {
  background-color: #28a745 !important;
  fill: #28a745;
  color: #f0f0f0 !important;
  stroke: rgb(20, 83.5, 34.5);
}
a.darkgreen:hover, div.darkgreen-nh:hover, span.darkgreen-nh:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.darkgreen:focus, div.darkgreen-nh:focus, span.darkgreen-nh:focus {
  color: #787878 !important;
}

/*No background styles*/
a.darkgreen-nb, div.darkgreen-nb, span.darkgreen-nb {
  color: #f0f0f0 !important;
  stroke: rgb(20, 83.5, 34.5);
}
a.darkgreen-nb:hover, div.darkgreen-nb:hover, span.darkgreen-nb:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.darkgreen-nb:focus, div.darkgreen-nb:focus, span.darkgreen-nb:focus {
  color: #787878 !important;
}

div.cyan, span.cyan {
  background-color: #00ffff !important;
  fill: #00ffff;
  color: #f0f0f0 !important;
  stroke: rgb(0, 127.5, 127.5);
}
div.cyan:hover, span.cyan:hover {
  background-color: rgb(76.5, 255, 255) !important;
  fill: rgb(76.5, 255, 255);
  color: rgb(244.5, 244.5, 244.5) !important;
}
div.cyan:focus, span.cyan:focus {
  background-color: rgb(0, 127.5, 127.5) !important;
  fill: rgb(0, 127.5, 127.5);
  color: #787878 !important;
}

/*No highligh styles*/
a.cyan, div.cyan-nh, span.cyan-nh {
  background-color: #00ffff !important;
  fill: #00ffff;
  color: #f0f0f0 !important;
  stroke: rgb(0, 127.5, 127.5);
}
a.cyan:hover, div.cyan-nh:hover, span.cyan-nh:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.cyan:focus, div.cyan-nh:focus, span.cyan-nh:focus {
  color: #787878 !important;
}

/*No background styles*/
a.cyan-nb, div.cyan-nb, span.cyan-nb {
  color: #f0f0f0 !important;
  stroke: rgb(0, 127.5, 127.5);
}
a.cyan-nb:hover, div.cyan-nb:hover, span.cyan-nb:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.cyan-nb:focus, div.cyan-nb:focus, span.cyan-nb:focus {
  color: #787878 !important;
}

div.dodgerblue, span.dodgerblue {
  background-color: #1e90ff !important;
  fill: #1e90ff;
  color: #f0f0f0 !important;
  stroke: rgb(15, 72, 127.5);
}
div.dodgerblue:hover, span.dodgerblue:hover {
  background-color: rgb(97.5, 177.3, 255) !important;
  fill: rgb(97.5, 177.3, 255);
  color: rgb(244.5, 244.5, 244.5) !important;
}
div.dodgerblue:focus, span.dodgerblue:focus {
  background-color: rgb(15, 72, 127.5) !important;
  fill: rgb(15, 72, 127.5);
  color: #787878 !important;
}

/*No highligh styles*/
a.dodgerblue, div.dodgerblue-nh, span.dodgerblue-nh {
  background-color: #1e90ff !important;
  fill: #1e90ff;
  color: #f0f0f0 !important;
  stroke: rgb(15, 72, 127.5);
}
a.dodgerblue:hover, div.dodgerblue-nh:hover, span.dodgerblue-nh:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.dodgerblue:focus, div.dodgerblue-nh:focus, span.dodgerblue-nh:focus {
  color: #787878 !important;
}

/*No background styles*/
a.dodgerblue-nb, div.dodgerblue-nb, span.dodgerblue-nb {
  color: #f0f0f0 !important;
  stroke: rgb(15, 72, 127.5);
}
a.dodgerblue-nb:hover, div.dodgerblue-nb:hover, span.dodgerblue-nb:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.dodgerblue-nb:focus, div.dodgerblue-nb:focus, span.dodgerblue-nb:focus {
  color: #787878 !important;
}

div.blue, span.blue {
  background-color: #0000ff !important;
  fill: #0000ff;
  color: #f0f0f0 !important;
  stroke: rgb(0, 0, 127.5);
}
div.blue:hover, span.blue:hover {
  background-color: rgb(76.5, 76.5, 255) !important;
  fill: rgb(76.5, 76.5, 255);
  color: rgb(244.5, 244.5, 244.5) !important;
}
div.blue:focus, span.blue:focus {
  background-color: rgb(0, 0, 127.5) !important;
  fill: rgb(0, 0, 127.5);
  color: #787878 !important;
}

/*No highligh styles*/
a.blue, div.blue-nh, span.blue-nh {
  background-color: #0000ff !important;
  fill: #0000ff;
  color: #f0f0f0 !important;
  stroke: rgb(0, 0, 127.5);
}
a.blue:hover, div.blue-nh:hover, span.blue-nh:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.blue:focus, div.blue-nh:focus, span.blue-nh:focus {
  color: #787878 !important;
}

/*No background styles*/
a.blue-nb, div.blue-nb, span.blue-nb {
  color: #f0f0f0 !important;
  stroke: rgb(0, 0, 127.5);
}
a.blue-nb:hover, div.blue-nb:hover, span.blue-nb:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.blue-nb:focus, div.blue-nb:focus, span.blue-nb:focus {
  color: #787878 !important;
}

div.violet, span.violet {
  background-color: #ee82ee !important;
  fill: #ee82ee;
  color: #f0f0f0 !important;
  stroke: #774177;
}
div.violet:hover, span.violet:hover {
  background-color: rgb(243.1, 167.5, 243.1) !important;
  fill: rgb(243.1, 167.5, 243.1);
  color: rgb(244.5, 244.5, 244.5) !important;
}
div.violet:focus, span.violet:focus {
  background-color: #774177 !important;
  fill: #774177;
  color: #787878 !important;
}

/*No highligh styles*/
a.violet, div.violet-nh, span.violet-nh {
  background-color: #ee82ee !important;
  fill: #ee82ee;
  color: #f0f0f0 !important;
  stroke: #774177;
}
a.violet:hover, div.violet-nh:hover, span.violet-nh:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.violet:focus, div.violet-nh:focus, span.violet-nh:focus {
  color: #787878 !important;
}

/*No background styles*/
a.violet-nb, div.violet-nb, span.violet-nb {
  color: #f0f0f0 !important;
  stroke: #774177;
}
a.violet-nb:hover, div.violet-nb:hover, span.violet-nb:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.violet-nb:focus, div.violet-nb:focus, span.violet-nb:focus {
  color: #787878 !important;
}

div.magneta, span.magneta {
  background-color: #ff00ff !important;
  fill: #ff00ff;
  color: #f0f0f0 !important;
  stroke: rgb(127.5, 0, 127.5);
}
div.magneta:hover, span.magneta:hover {
  background-color: rgb(255, 76.5, 255) !important;
  fill: rgb(255, 76.5, 255);
  color: rgb(244.5, 244.5, 244.5) !important;
}
div.magneta:focus, span.magneta:focus {
  background-color: rgb(127.5, 0, 127.5) !important;
  fill: rgb(127.5, 0, 127.5);
  color: #787878 !important;
}

/*No highligh styles*/
a.magneta, div.magneta-nh, span.magneta-nh {
  background-color: #ff00ff !important;
  fill: #ff00ff;
  color: #f0f0f0 !important;
  stroke: rgb(127.5, 0, 127.5);
}
a.magneta:hover, div.magneta-nh:hover, span.magneta-nh:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.magneta:focus, div.magneta-nh:focus, span.magneta-nh:focus {
  color: #787878 !important;
}

/*No background styles*/
a.magneta-nb, div.magneta-nb, span.magneta-nb {
  color: #f0f0f0 !important;
  stroke: rgb(127.5, 0, 127.5);
}
a.magneta-nb:hover, div.magneta-nb:hover, span.magneta-nb:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.magneta-nb:focus, div.magneta-nb:focus, span.magneta-nb:focus {
  color: #787878 !important;
}

div.deeppink, span.deeppink {
  background-color: #ff1493 !important;
  fill: #ff1493;
  color: #f0f0f0 !important;
  stroke: rgb(127.5, 10, 73.5);
}
div.deeppink:hover, span.deeppink:hover {
  background-color: rgb(255, 90.5, 179.4) !important;
  fill: rgb(255, 90.5, 179.4);
  color: rgb(244.5, 244.5, 244.5) !important;
}
div.deeppink:focus, span.deeppink:focus {
  background-color: rgb(127.5, 10, 73.5) !important;
  fill: rgb(127.5, 10, 73.5);
  color: #787878 !important;
}

/*No highligh styles*/
a.deeppink, div.deeppink-nh, span.deeppink-nh {
  background-color: #ff1493 !important;
  fill: #ff1493;
  color: #f0f0f0 !important;
  stroke: rgb(127.5, 10, 73.5);
}
a.deeppink:hover, div.deeppink-nh:hover, span.deeppink-nh:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.deeppink:focus, div.deeppink-nh:focus, span.deeppink-nh:focus {
  color: #787878 !important;
}

/*No background styles*/
a.deeppink-nb, div.deeppink-nb, span.deeppink-nb {
  color: #f0f0f0 !important;
  stroke: rgb(127.5, 10, 73.5);
}
a.deeppink-nb:hover, div.deeppink-nb:hover, span.deeppink-nb:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.deeppink-nb:focus, div.deeppink-nb:focus, span.deeppink-nb:focus {
  color: #787878 !important;
}

div.purple, span.purple {
  background-color: #7005fd !important;
  fill: #7005fd;
  color: #f0f0f0 !important;
  stroke: rgb(56, 2.5, 126.5);
}
div.purple:hover, span.purple:hover {
  background-color: rgb(154.9, 80, 253.6) !important;
  fill: rgb(154.9, 80, 253.6);
  color: rgb(244.5, 244.5, 244.5) !important;
}
div.purple:focus, span.purple:focus {
  background-color: rgb(56, 2.5, 126.5) !important;
  fill: rgb(56, 2.5, 126.5);
  color: #787878 !important;
}

/*No highligh styles*/
a.purple, div.purple-nh, span.purple-nh {
  background-color: #7005fd !important;
  fill: #7005fd;
  color: #f0f0f0 !important;
  stroke: rgb(56, 2.5, 126.5);
}
a.purple:hover, div.purple-nh:hover, span.purple-nh:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.purple:focus, div.purple-nh:focus, span.purple-nh:focus {
  color: #787878 !important;
}

/*No background styles*/
a.purple-nb, div.purple-nb, span.purple-nb {
  color: #f0f0f0 !important;
  stroke: rgb(56, 2.5, 126.5);
}
a.purple-nb:hover, div.purple-nb:hover, span.purple-nb:hover {
  color: rgb(244.5, 244.5, 244.5) !important;
}
a.purple-nb:focus, div.purple-nb:focus, span.purple-nb:focus {
  color: #787878 !important;
}

/* ToolBar.razor section */
.toolbar-item span {
  padding-left: 1rem;
}

/*TimeLogPanel section*/
.first-tl-item {
  width: 3rem;
}

.task-tl-item {
  width: 5rem;
  max-width: 7rem;
}

/*@media (max-width: 376.98px) {

    .first-tl-item {
        width: 2rem;
        max-width: 2rem;
    }

    .task-tl-item {
        width: 2rem;
        max-width: 3rem;
    }
}
*/
@media (max-width: 767.98px) {
  .task-tl-item {
    width: 3rem;
    max-width: 5rem;
  }
}
@media (max-width: 767.98px) {
  .task-tl-comment {
    display: none;
  }
}
/*EditableLabel.razor.scss*/
ul.editable-label {
  list-style-type: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin: 0;
}

.editable-clickable {
  cursor: pointer;
}

.limited-label {
  max-width: 250px;
}

@media (min-width: 925px) {
  .limited-label {
    max-width: 500px;
  }
}
@media (min-width: 1200px) {
  .limited-label {
    max-width: 700px;
  }
}
@media (min-width: 1600px) {
  .limited-label {
    max-width: 1200px;
  }
}
/*Main.scss*/
/*Colors.razor*/
html, body {
  /*    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  */
  background-color: #f5f4f8;
}

a, .btn-link {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

app {
  position: relative;
  display: flex;
  flex-direction: column;
}

.oi {
  position: relative;
  font-size: 20px;
  vertical-align: 0 !important;
  top: -1px;
}

.oi-large {
  font-size: 32px !important;
}

.oi-small {
  font-size: 14px !important;
}

.flex-fill {
  min-width: 1px;
  display: block;
}

.top-row {
  height: 3.5rem;
  display: flex;
  align-items: center;
  z-index: 99;
}

.component-background {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 1rem;
  height: 100%;
}

.col {
  margin: 5px;
  padding: 0px;
}

.component-background-clear {
  background: linear-gradient(180deg, transparent, transparent 10px, #ffffff 10px, #ffffff);
}

.component-background-black {
  background: linear-gradient(180deg, #000000, #000000 10px, #ffffff 10px, #ffffff);
}

.component-background-white {
  background: linear-gradient(180deg, #f0f0f0, #f0f0f0 10px, #ffffff 10px, #ffffff);
}

.component-background-red {
  background: linear-gradient(180deg, #ff0000, #ff0000 10px, #ffffff 10px, #ffffff);
}

.component-background-orange {
  background: linear-gradient(180deg, #ffa500, #ffa500 10px, #ffffff 10px, #ffffff);
}

.component-background-yellow {
  background: linear-gradient(180deg, #ffff00, #ffff00 10px, #ffffff 10px, #ffffff);
}

.component-background-chartreusegreen {
  background: linear-gradient(180deg, #7fff00, #7fff00 10px, #ffffff 10px, #ffffff);
}

.component-background-green {
  background: linear-gradient(180deg, #00ff00, #00ff00 10px, #ffffff 10px, #ffffff);
}

.component-background-springgreen {
  background: linear-gradient(180deg, #00ff7f, #00ff7f 10px, #ffffff 10px, #ffffff);
}

.component-background-darkgreen {
  background: linear-gradient(180deg, #28a745, #28a745 10px, #ffffff 10px, #ffffff);
}

.component-background-cyan {
  background: linear-gradient(180deg, #00ffff, #00ffff 10px, #ffffff 10px, #ffffff);
}

.component-background-dodgerblue {
  background: linear-gradient(180deg, #1e90ff, #1e90ff 10px, #ffffff 10px, #ffffff);
}

.component-background-blue {
  background: linear-gradient(180deg, #0000ff, #0000ff 10px, #ffffff 10px, #ffffff);
}

.component-background-violet {
  background: linear-gradient(180deg, #ee82ee, #ee82ee 10px, #ffffff 10px, #ffffff);
}

.component-background-magneta {
  background: linear-gradient(180deg, #ff00ff, #ff00ff 10px, #ffffff 10px, #ffffff);
}

.component-background-deeppink {
  background: linear-gradient(180deg, #ff1493, #ff1493 10px, #ffffff 10px, #ffffff);
}

.component-background-purple {
  background: linear-gradient(180deg, #7005fd, #7005fd 10px, #ffffff 10px, #ffffff);
}

.item-color-clear {
  background: linear-gradient(90deg, transparent, transparent 10px, #ffffff 10px, #ffffff);
}

.item-color-black {
  background: linear-gradient(90deg, #000000, #000000 10px, #ffffff 10px, #ffffff);
}

.item-color-white {
  background: linear-gradient(90deg, #f0f0f0, #f0f0f0 10px, #ffffff 10px, #ffffff);
}

.item-color-red {
  background: linear-gradient(90deg, #ff0000, #ff0000 10px, #ffffff 10px, #ffffff);
}

.item-color-orange {
  background: linear-gradient(90deg, #ffa500, #ffa500 10px, #ffffff 10px, #ffffff);
}

.item-color-yellow {
  background: linear-gradient(90deg, #ffff00, #ffff00 10px, #ffffff 10px, #ffffff);
}

.item-color-chartreusegreen {
  background: linear-gradient(90deg, #7fff00, #7fff00 10px, #ffffff 10px, #ffffff);
}

.item-color-green {
  background: linear-gradient(90deg, #00ff00, #00ff00 10px, #ffffff 10px, #ffffff);
}

.item-color-springgreen {
  background: linear-gradient(90deg, #00ff7f, #00ff7f 10px, #ffffff 10px, #ffffff);
}

.item-color-darkgreen {
  background: linear-gradient(90deg, #28a745, #28a745 10px, #ffffff 10px, #ffffff);
}

.item-color-cyan {
  background: linear-gradient(90deg, #00ffff, #00ffff 10px, #ffffff 10px, #ffffff);
}

.item-color-dodgerblue {
  background: linear-gradient(90deg, #1e90ff, #1e90ff 10px, #ffffff 10px, #ffffff);
}

.item-color-blue {
  background: linear-gradient(90deg, #0000ff, #0000ff 10px, #ffffff 10px, #ffffff);
}

.item-color-violet {
  background: linear-gradient(90deg, #ee82ee, #ee82ee 10px, #ffffff 10px, #ffffff);
}

.item-color-magneta {
  background: linear-gradient(90deg, #ff00ff, #ff00ff 10px, #ffffff 10px, #ffffff);
}

.item-color-deeppink {
  background: linear-gradient(90deg, #ff1493, #ff1493 10px, #ffffff 10px, #ffffff);
}

.item-color-purple {
  background: linear-gradient(90deg, #7005fd, #7005fd 10px, #ffffff 10px, #ffffff);
}

.card-group {
  background-color: #ffffff;
}

.main {
  flex: 1;
}
.main .top-row {
  background-color: #ffffff;
  border-bottom: 1px solid #d6d5d5;
  justify-content: flex-end;
}
.main .top-row > a, .main .top-row .btn-link {
  white-space: nowrap;
  margin-left: 1.5rem;
}
.main .top-row a:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.content {
  padding-top: 1.1rem;
}

.navbar-toggler {
  background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid red;
}

.validation-message {
  color: red;
}

.notification-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.notification-container-alert {
  margin: 0 auto;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

/*@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}*/
/*@media (min-width: 768px) {
*/
app {
  flex-direction: row;
}

.main .top-row {
  position: sticky;
  top: 0;
}

/*.main > div {
    padding-left: 2rem !important;
    padding-right: 1.5rem !important;
}
*/ /*}
*/
ul {
  list-style: none;
}

.new-timer-edit {
  margin: 10px;
}

.page-progress {
  width: 9rem !important;
  margin: 3rem auto !important;
}

/* ActiveQ */
ul.quote-title {
  list-style-type: none;
  overflow: hidden;
}

li.quote-title {
  display: inline-block;
}

.quote-title-button {
  cursor: pointer;
  font-size: 1.5rem;
}

.pie-lg {
  width: 160px;
  z-index: -1;
}

.pie-sm {
  width: 100px;
  z-index: -1;
}

.daily-report-container {
  padding-bottom: 80px;
}

.cursor-pointer {
  cursor: pointer;
}

.drag-handle {
  cursor: grab;
  text-decoration: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.card-header:hover {
  background-color: #e9ecef !important;
}

.bg-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.timelog-can-drop {
  border: 2px dashed #2f2929;
}

.timelog-draggable {
  /*    cursor: grab;
  */
}

.timelog-draggable:active {
  cursor: grabbing;
}

.timelog-dragging {
  cursor: grabbing;
  background-color: #808080;
}

.timelog-handle {
  cursor: grab;
}

.entry-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: black;
  border-radius: 50%;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.entry-badge-new {
  background: linear-gradient(135deg, #3333ff 0%, #884ba2 100%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.entry-header {
  /*    background-color: #667eea;
  */
}

.entry-header-new {
  background-color: #ffe6ac;
}