html,
body {
  width: 100%;
  height: 100%
}

body {
  background-color: #f3f2ef;
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  margin: 0
}

@media (min-width: 1024px) {
  .layout-outer-content {
    padding: 72px 20px 20px 80px;
    min-height: calc(100% - 85px)
  }
}

@media (min-width: 1024px) {
  .anchor-offset-by-navigation-height {
    padding-top: 95px;
    position: absolute;
    top: -95px;
    visibility: hidden
  }
}

@media (max-width: 1023px) {
  .layout-outer-content-mobile {
    padding-top: 4.5rem;
    padding-bottom: 1rem;
    min-height: calc(100% - 20px)
  }
}

@media (min-width: 1024px) {
  .layout-outer-content.has-alert {
    padding-top: 7rem !important
  }
}

@media (min-width: 1024px) {
  .layout-inner-content {
    margin: auto;
    width: 1170px
  }
}

@page {
  .print-page {
    size: auto;
    margin: 0
  }
}

@media (min-width: 1024px) {
  .footer {
    width: calc(100% - 73px);
    margin-left: 73px
  }
}

.top-menu {
  z-index: 50
}

@media (max-width: 1023px) {
  .dixa-placement-generator {
    left: 0.875rem;
    bottom: 0.875rem !important
  }
}

.generator-horizontal-scrollbar {
  overflow-x: auto;
  overflow-y: hidden
}

.generator-horizontal-scrollbar::-webkit-scrollbar {
  height: 14px;
  background: #f1f1f1;
  border-radius: 9999px
}

.generator-horizontal-scrollbar::-webkit-scrollbar-thumb {
  background: orange;
  background-size: 14px;
  border-radius: 9999px
}

.generator-horizontal-scrollbar::-webkit-scrollbar-button:start:decrement {
  position: absolute;
  top: 0;
  display: block;
  height: 14px;
  width: 20px;
  background: #ccc;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="14" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>');
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px
}

.generator-horizontal-scrollbar::-webkit-scrollbar-button:end:increment {
  position: absolute;
  top: 0;
  display: block;
  height: 14px;
  width: 20px;
  background: #ccc;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="14" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>');
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px
}

@-moz-document url-prefix() {
  .generator-horizontal-scrollbar {
    scrollbar-color: orange #f1f1f1
  }
}


.top-menu {
  background-color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  position: fixed;
  left: 72px;
  width: calc(100% - 72px);
  height: 68px
}

.top-menu.has-alert {
  height: 110px
}

.top-menu .edit-next-free-times-button {
  margin-left: 10px;
  margin-right: 10px
}

.top-menu .user-name-container {
  font-weight: bold;
  flex-grow: 1
}

.top-menu .search-text-field-container {
  position: relative
}

.top-menu .search-text-field-container .search-text-field {
  background-color: #eeeeee;
  border: none;
  border-radius: 3px;
  outline: none;
  padding: 9px 30px 9px 9px
}

.top-menu .search-text-field-container .search-text-field-icon {
  position: absolute;
  right: 6px;
  top: 9px
}

.left-menu {
  background-color: #000054;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  position: fixed;
  height: 100%;
  padding: 6px;
  width: 72px
}

.left-menu .left-menu-mechanic-logo {
  background-color: #fff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: calc(100% - 8px);
  border-radius: 4px;
  box-sizing: border-box;
  width: 58px;
  height: 58px
}

.left-menu .left-menu-item .svg-image {
  padding: 24px
}

.left-menu .left-menu-item .svg-image:hover svg {
  fill: #fff
}

.left-menu .left-menu-item svg {
  fill: rgba(255, 255, 255, 0.5)
}

.left-menu .left-menu-item.active {
  background-color: #34346e
}

.left-menu .left-menu-item.active svg {
  fill: #fff
}

.mobile-menu .mobile-menu-mechanic-logo {
  background-color: #fff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: calc(100% - 8px);
  border-radius: 4px;
  box-sizing: border-box;
  width: 58px;
  height: 58px
}

.mobile-menu .mobile-menu-item .svg-image {
  padding: 24px
}

.mobile-menu .mobile-menu-item .svg-image:hover svg {
  fill: #fff
}

.mobile-menu .mobile-menu-item svg {
  fill: rgba(255, 255, 255, 0.5)
}

.mobile-menu .mobile-menu-item.active {
  background-color: #34346e;
  font-weight: 700
}

.mobile-menu .mobile-menu-item.active svg {
  fill: #fff
}

.generator-nav {
  border-top: 1px solid #d9dbd5;
  border-bottom: 1px solid #d9dbd5
}

.generator-nav>a:link,
.generator-nav>a:visited {
  border-bottom: 3px solid transparent;
  color: #777;
  display: inline-block;
  font-weight: bold;
  padding: 1.4em 0;
  text-transform: uppercase
}

.generator-nav>a:link+a:link,
.generator-nav>a:link+a:visited,
.generator-nav>a:visited+a:link,
.generator-nav>a:visited+a:visited {
  margin-left: 1.5em
}

.generator-nav>a:link.active,
.generator-nav>a:visited.active {
  border-bottom: 3px solid #333;
  color: #333
}

.active-settings-page {
  font-weight: bold;
  background-color: #f7fafc;
  color: #fcb034
}

.active-sub-menu-setting {
  font-weight: bold;
  color: black;
  border-bottom-width: 2px;
  border-color: #fcb034
}

.generator--pagination {
  display: flex
}

.generator--pagination .generator--pagination--pages {
  display: flex
}

.generator--pagination .generator--pagination--pages .generator--pagination--page {
  border-top: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
  border-left: 1px solid #d7d7d7;
  padding: 9px 12px
}

.generator--pagination .generator--pagination--pages .generator--pagination--page.current-page {
  background-color: #0a6aab;
  color: #fff
}

.generator--pagination .generator--pagination--pages .generator--pagination--page:hover:not(.current-page) {
  background-color: #d7d7d7
}

.generator--pagination .generator--pagination--pages .generator--pagination--page:last-child {
  border-right: 1px solid #d7d7d7
}

.generator--pagination .generator--pagination--previous-page,
.generator--pagination .generator--pagination--next-page {
  padding: 9px 12px
}

@media (min-width: 1024px) {
  .generator-table {
    width: 100%
  }

  .generator-table>.table-row-group>.table-row>.table-cell:not(.p-0) {
    padding: 15px
  }

  .generator-table>.table-row-group>.table-row:not(:first-child)>.table-cell {
    border-top: 1px solid #ecedea
  }
}

.button {
  background-color: #e2e8f0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  color: #2c4066;
  font-weight: bold;
  padding: .625em 1em;
  text-transform: uppercase;
  cursor: pointer
}

.button:hover {
  background-color: #cbd5e0
}

.button.button-primary {
  background-color: #000054;
  color: #ffffff
}

.button.button-primary:hover {
  background-color: #1a1a65
}

.button.button-orange {
  background-color: #f0ad4e;
  color: #ffffff
}

.button.button-orange:hover {
  background-color: #f99c04
}

.button.button-danger {
  background-color: #dc2626;
  color: #ffffff
}

.button.button-danger:hover {
  background-color: #b91c1c
}

.button.button-success {
  background-color: #6abf45;
  color: #333333
}

.button.button-success:hover {
  background-color: #549b36
}

.button.button-neutral {
  background-color: #ecedea;
  color: #000054
}

.button.button-neutral:hover {
  background-color: #bfc0bc !important
}

.button.button-disabled {
  cursor: not-allowed;
  opacity: 0.65
}

.button:link,
.button:visited {
  text-decoration: none
}

.switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px
}

.switch input {
  display: none
}

.slider {
  background-color: #ef4444;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 26px
}

input:checked+.slider {
  background-color: #66bb6a
}

input:checked+.slider:before {
  transform: translateX(26px)
}

.slider.round {
  border-radius: 34px
}

.slider.round:before {
  border-radius: 50%
}

.checkbox-component {
  position: relative;
  display: inline-block
}

.checkbox-component label {
  cursor: pointer;
  font-weight: 500;
  margin: 0;
  height: 1.7142857143em
}

.checkbox-component label.disabled {
  cursor: not-allowed;
  color: #777777
}

.checkbox-component label>span {
  display: inline-block
}

.checkbox-component label>span.checkbox-label-left {
  margin-right: 1em
}

.checkbox-component label>span.checkbox-label-right {
  margin-left: 1em
}

.checkbox-component label input {
  position: absolute;
  top: 0.25em;
  width: 1em;
  height: 1em;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
  outline: 0;
  opacity: 0;
  cursor: pointer
}

.checkbox-component label input+i {
  box-shadow: 0 0 0 0.12em #d7d7d7;
  color: #fff;
  transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
  border-radius: 1px;
  font-weight: bold
}

.checkbox-component label input:focus+i {
  box-shadow: 0 0 0 0.12em #000054
}

.checkbox-component label input:focus:checked+i {
  box-shadow: 0 0 0 0.12em #000054, 0 0 0.12em 0.25em #000054
}

.checkbox-component label input:checked+i {
  background-color: #000054;
  box-shadow: 0 0 0 0.12em #000054
}

.checkbox-component label input:disabled+i {
  opacity: 0.4;
  cursor: not-allowed
}

.checkbox-autobid input {
  display: none
}

.checkbox-autobid label input+i {
  color: #d7d7d7;
  transition: color 0.2s ease-out, box-shadow 0.2s ease-out;
  font-weight: bold
}

.checkbox-autobid label input:checked+i {
  color: #000054
}

.icon-font {
  vertical-align: middle;
  line-height: 0.7142857147em
}

.icon-font-sm {
  font-size: 18px;
  line-height: 1
}

.icon-font-xs {
  font-size: 10px;
  line-height: 1
}

select {
  appearance: none;
  background: #fff image_url("generator/angle-down-solid.svg");
  background-position: calc(100% - 14px) center;
  background-repeat: no-repeat;
  background-size: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 11px 30px 11px 14px
}

.tooltip {
  display: none;
  position: relative
}

.tooltip-body {
  display: block;
  background-color: black;
  color: white;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  position: fixed;
  text-align: center;
  border-radius: 0.5rem;
  width: 12rem
}

footer a {
  color: #1a1a65;
  text-decoration: none
}

footer a:hover {
  color: #0a0a28;
  text-decoration: underline
}