/* Bootstrap Validation Summary Override */
.validation-summary-valid {
  display: none;
}

.validation-summary-errors ul {
  margin-bottom: 0;
  padding-left: 1rem;
}

.alert.validation-summary-errors {
  margin-bottom: 1rem;
}

.col-0 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 4.166665%;
  flex: 0 0 4.166665%;
  max-width: 4.166665%;
  width: 4.166665%;
}

.col-1 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 8.33333%;
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
  width: 8.33333%;
}

.col-2 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 16.66666%;
  flex: 0 0 16.66666%;
  max-width: 16.66666%;
  width: 16.66666%;
}

/* Reference classes, no implementation */
.base,
.needs-validation,
.flex-start,
.text-faded,
.app-container-demo,
.lang-js,
.lang-csharp,
.has-tooltip,
.has-popover {
}

/* Keeps analyzers happy */
.js-waves-off,
.js-waves-on,
.js-get-date,
.js-collapse,
.js-modal-settings,
.js-filter-message,
.js-buttons,
.js-icon-class,
.js-icon-copy,
.js-bg-color,
.js-bg-gradient,
.js-bg-gradient-demo,
.js-bg-target {
}

/* Small word wrap correction */
section > ol > li {
  word-break: break-all;
}

code {
  border: 1px solid silver;
  padding: 0.03rem 0.2rem !important;
}

pre.prettyprint {
  border-radius: 0.2rem;
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
}

.documentation h2 {
  color: var(--primary);
}

.documentation th:first-child,
.documentation th:nth-child(3) {
  width: 16%;
}

.documentation blockquote {
  margin-left: 1rem;
  padding: 1rem 1rem 0.01rem 1rem;
  font-weight: 400;
  border-radius: 0 4px 4px 0;
  background: #edf2f9;
  border-left: 3px solid var(--primary);
}

  .documentation blockquote.info {
    background: #edf2f9;
    border-left: 3px solid var(--info);
  }

  .documentation blockquote.warning {
    background: #fff4db;
    border-left: 3px solid var(--warning);
  }

  .documentation blockquote.danger {
    background: #fadeeb;
    border-left: 3px solid var(--danger);
  }

/* EOL: Page Header */

.page-logo img {
  height: 28px;
  width: auto;
}

/* Company Structure page, Active users section */

/* EOL: Company Structure page, Active users section */

/*User Management*/

.form-floating, .form-check label {
  font-weight: 600;
}

.form-check-input {
  width: 1.3rem;
  height: 1.3rem;
}

  .form-check-input:focus-visible {
    outline: 1px solid mediumpurple !important;
  }

/* TimeTracker specifics */
body {
  min-width: 600px;
  min-height: 600px;
  overflow-x: auto;
}

html body a {
  color: #4679cc;
  background-color: transparent;
}

  html body a:hover {
    color: #5a87d2;
  }

/* 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;
}

.brand-custom {
  margin-left: 11px;
  margin-top: 5px;
}

.nav-custom {
  margin-right: 5px;
}


.tree-scroll {
  overflow-y: auto;
  overflow-x: auto;
}

  .tree-scroll::-webkit-scrollbar-track-piece,
  .tree-scrollbar::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }

  .tree-scroll::-webkit-scrollbar-thumb:vertical,
  .tree-scrollbar::-webkit-scrollbar-thumb:vertical {
    background-color: #666;
  }

  .tree-scroll::-webkit-scrollbar,
  .tree-scrollbar::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }

  .tree-scroll::-webkit-scrollbar-corner,
  .tree-scrollbar::-webkit-scrollbar-corner {
    width: 40px;
  }

  .tree-scroll::-webkit-scrollbar-thumb:vertical,
  .tree-scrollbar::-webkit-scrollbar-thumb:vertical {
    background-color: #666;
  }

.tree-container {
  width: 100%;
  height: 99%;
  position: relative;
}

.tree-loading {
  width: 100%;
  height: 99%;
  position: absolute;
  z-index: 1;
}

.bordered {
  border: 1px solid #ededed;
}

.tree-panel-height {
  height: 600px;
  box-sizing: content-box;
}

.tree-widget-height {
  height: 362px;
  box-sizing: content-box;
}

.tree-button-panel {
  display: inline;
  position: absolute;
  right: 1%
}

.form-horizontal .form-group {
  margin-right: 0;
}

.to-right {
  float: right;
}

.form-group input.form-control, select.form-control {
  display: inline-block;
  min-width: 100px;
}

.checkbox input.check-box {
  margin-left: 0;
}

.btn {
  font-size: 1rem;
}

  .btn.focus, .btn.active.focus {
    outline: none;
    outline-offset: 0;
  }

  .btn-default:focus, .btn.focus {
    background-color: #fff;
  }

.btn-group[data-toggle="buttons"] {
  z-index: 1;
  margin-top: 10px;
  margin-bottom: 10px;
}

.form-inline-margin {
  margin-top: 10px;
  margin-bottom: 10px;
}

.btn-group[data-toggle="buttons"] > label {
  margin-right: 4px;
}

.btn-group>label.btn.active {
  background-color: #68c2dd;
  color: white;
  /*content: "✔";*/
}

@media (max-width:979px) {
  html.hidden-menu-mobile-lock {
    overflow-x: auto
  }
}

.notBillableWorkItem {
  background-color: #ffffec !important
}

.small-gutters > [class*='col-'] {
  padding-right: 5px;
  padding-left: 5px;
}

.resizible-raw {
  padding-right: 10px;
  padding-left: 10px;
}

.jarviswidget {
  margin-bottom: 10px;
}

.widget-details-legend {
  margin-bottom: 10px;
}

  .widget-details-legend h3 {
    margin-top: 0;
  }

  .widget-details-legend label span {
    position: relative;
    padding: 6px 20px;
    border-radius: 13px;
    color: white;
  }

.widget-body .no-min-height {
  min-height: 0;
}

.widget-table-no-margin {
  margin: 0;
}

.main-banner-img {
  width: 100%;
  background: url('../img/time-tracker-banner.jpg') no-repeat;
  height: 400px;
  background-size: cover;
}

#extr-page .login-text-box {
  width: 70%;
}

#extr-page #main {
  padding-top: 0px;
}

#extr-page .display-image {
  margin-top: 20px;
}

.product-header {
  background-image: url('../img/time-tracker-icon.jpg');
  background-repeat: no-repeat;
  height: 40px;
  padding-top: 6px;
  padding-left: 50px;
  display: block;
}

.extr-header {
  background-image: url('../img/time-tracker-icon-lg.png');
  background-repeat: no-repeat;
  height: 100px;
}

.video-content {
  margin-top: 40px;
}

#extr-page #header {
  overflow: visible;
}

.title {
  color: #a90329;
  font-style: italic;
}

#extr-page .hero {
  background-position: 0 130px;
  height: auto;
}

#extr-page .login-content {
  margin-top: 10%;
}

.title-container-lg {
  margin-bottom: 20px;
}

#extr-page .register-block {
  background-image: none;
}

.smart-form .validation-summary-errors {
  padding-left: 30px;
  padding-top: 10px;
}

.title-with-icon-content-lg {
  vertical-align: middle;
}

.title-with-icon-lg {
  padding-right: 35px;
}

.flag-button {
  pointer-events: none;
}

.register-button {
  border-radius: 4px;
  background-color: #a90329;
  border: none;
  height: 50px;
  color: #FFFFFF;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

  .register-button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
    color: white;
  }

    .register-button span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -10px;
      transition: 0.5s;
    }

  .register-button:hover span {
    padding-right: 25px;
  }

    .register-button:hover span:after {
      opacity: 1;
      right: 0;
    }

.validation-summary-errors ul {
  margin-left: 12px
}

.company-logo {
  height: 40px;
  max-width: 400px;
}

.company-logo-edit {
  height: 80px;
  max-width: 400px;
  margin-bottom: 15px;
}
/* Set width on the form input elements since they're 100% wide by default */
select,
.form-group > input:not(#forgotPassword),
.form-group > div > input,
.form-group > div > div {
  max-width: 280px;
}

.btn-flag {
  background-color: ghostwhite;
}

  .btn-flag:hover {
    border: 8px solid;
    border-color: whitesmoke;
    padding-right: -1px;
    padding-top: 1px;
  }

.custom_tickbox {
  width: 9%;
}

.disabled_element {
  pointer-events: none;
}

.custom-form-control {
  width: 100%;
}

.jarviswidget > header > h2 {
  margin-right: 10px;
}

.error-panel {
  margin-bottom: 20px;
  margin-left: 15px;
}

.grid-divider {
  position: relative;
  padding: 0;
}

  .grid-divider [class*='col-']:nth-child(2n):before {
    content: "";
    border-left: 1px solid #DDD;
    position: absolute;
    top: 0;
    bottom: 0;
  }

.col-padding {
  padding: 0 15px;
}

.input {
  position: relative;
}

.widget-toolbar input[class*="custom-datepicker"] {
  padding: 5px 7px;
  width: 110px;
}

input[type=file] {
  cursor: pointer;
}

  input[type=file]::-webkit-file-upload-button {
    cursor: pointer;
  }

.btn-grid {
  width: 26px;
  height: 26px;
  margin-right: 0.1em;
}

.form-input-group {
  display: flex;
  margin-right: -13px !important;
}

.page-logo-text {
  font-size: 2rem;
}

.dropdown-icon-menu > ul > li .btn:hover, .header-btn:hover {
  border-color: #4679cc;
  background: #6e96d7;
  color: #fff;
}

.nav-menu li a > [class*='fa-'], .nav-menu li a > .ni {
  color: #4a78c2;
}

.nav-menu li a {
  color: #97b1dc;
}

.nav-menu li b.collapse-sign {
  color: #5a87d2;
}

.nav-menu li.active > a {
  color: white;
  background-color: rgba(255, 255, 255, 0.04);
  -webkit-box-shadow: inset 3px 0 0 #4679cc;
  box-shadow: inset 3px 0 0 #4679cc;
}

.nav-menu li > ul li a {
  color: #84a3d6;
}

.mod-nav-link:not(.nav-function-top):not(.nav-function-minify):not(.mod-hide-nav-icons) ul.nav-menu:not(.nav-menu-compact) > li > ul:before {
  border-left: 1px solid #305590;
}

.mod-nav-link:not(.nav-function-top):not(.nav-function-minify):not(.mod-hide-nav-icons) ul.nav-menu:not(.nav-menu-compact) > li > ul > li a:after {
  background-color: #4a78c2;
}

.page-logo, .page-sidebar, .nav-footer, .bg-brand-gradient {
  background-color: #2b4c81;
}

.login-page-logo {
  width: auto;
}

.fa-chart-user:before {
  content: "\f6a3";
}

.fa-user-crown:before {
  content: "\f6a4";
}

.fa-calendar-days:before {
  content: "\f073";
}

.fa-pen:before {
  content: "\f304";
}

body:not(.mod-pace-custom) .pace .pace-progress {
  background: #4679cc;
}

.page-content-wrapper {
  background-color: #edf2f9;
}

.has-length .input-group-text:not([class^="bg-"]):not([class*=" bg-"]) {
  background: #305590;
  color: #fff !important;
}

.form-control:focus {
  border-color: #305590;
}

div.tree-scroll .custom-scroll {
  position: relative;
  overflow: auto;
  width: auto;
  height: 100%;
}

@media (min-width: 992px) {
  .nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a + ul {
    background-color: #2b4c81;
  }

  .nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav:hover .nav-menu > li:hover > a {
    background: #305590;
  }

  .nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a + ul:before {
    color: #305590;
  }

  .nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav:hover .nav-menu > li:hover > a > .nav-link-text:last-child {
    background: #305590;
  }

    .nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav:hover .nav-menu > li:hover > a > .nav-link-text:last-child:before {
      color: #305590;
    }
}

button[class*="js-checked"] {
  background-color: #68c2dd !important;
  color: white !important;
}

.input-group > .form-control, .date-range-picker {
  width: 14em;
}

/* SmartAdmin nav expand/collapse (replaces JS plugin) */
.nav-menu li.open > ul {
  display: block;
}

/* Explicit user collapse must win over the theme's .active auto-open rule (Bug #420) */
.nav-menu li.active:not(.open) > ul {
  display: none;
}

/* Fix subheader-title expanding in page-content flex column */
.page-content > .subheader-title {
  flex: none;
}
/* Fix font size for MudBlazor controls in DataGrid rows (filter + edit) */
.mud-table-head .mud-input,
.mud-table-body .mud-input {
  font-size: 14px;
}

/* Match filter row height to data rows */
.mud-table-head .filter-header-cell .mud-input-control {
  margin-top: 0;
  margin-bottom: 0;
}

/* Match filter row underline distance to edit row */
.mud-table-head .filter-header-cell .mud-input-slot {
  padding-top: 0 !important;
  padding-bottom: 1px;
}

/* Fix font size for MudSelect dropdown list items */
.mud-popover .mud-list-item-text .mud-typography {
  font-size: 14px;
}

/* Scale down the clear (×) button in dense selects to match the font size */
.mud-input-margin-dense .mud-input-clear-button {
  width: 20px;
  height: 20px;
}

.mud-input-margin-dense .mud-input-clear-button .mud-icon-root {
  font-size: 1rem;
}

/* Allow DataGrid columns to be resized below their content width */
.mud-data-grid .mud-table-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* #472: Time Board inline date-edit calendar icon. Scale it down to the 14px row font and drop
   the adornment button padding so it stops crowding the date text; nudge it up off the text
   underline; let the input shrink and trim the Date column's right padding so the date keeps
   room next to the icon (and the icon is not clipped) when the column is narrowed. */
.tt-date-edit .mud-input-adornment .mud-icon-root {
  font-size: 16px;
}

.tt-date-edit .mud-input-adornment-icon-button {
  padding: 0;
  /* MudIconButton is a circular button with overflow:hidden for its ripple, which shaves the
     square calendar icon's edges (the right border line disappears). Drop the round clip. */
  border-radius: 0;
  overflow: visible;
}

/* The real clipper: .mud-input-control has overflow-x:hidden and its right edge sits a few px
   inside the end-adornment, cutting the icon's right border line off. Let the icon show; the
   grid cell (overflow:hidden) is still the outer boundary. */
.tt-date-edit .mud-input-control {
  overflow: visible !important;
}

.tt-date-edit .mud-input-adornment {
  transform: translateY(-2px);
  margin-left: 3px;
}

.tt-date-edit input {
  min-width: 0;
}

.mud-data-grid .tt-col-date {
  padding-right: 8px !important;
}