@charset "UTF-8";
@media (min-width: 576px) {
  .w-sm-25 {
    width: 25% !important; }

  .w-sm-50 {
    width: 50% !important; }

  .w-sm-75 {
    width: 75% !important; }

  .w-sm-100 {
    width: 100% !important; } }
@media (min-width: 768px) {
  .w-md-25 {
    width: 25% !important; }

  .w-md-50 {
    width: 50% !important; }

  .w-md-75 {
    width: 75% !important; }

  .w-md-100 {
    width: 100% !important; } }
@media (min-width: 992px) {
  .w-lg-25 {
    width: 25% !important; }

  .w-lg-50 {
    width: 50% !important; }

  .w-lg-75 {
    width: 75% !important; }

  .w-lg-100 {
    width: 100% !important; } }
@media (min-width: 1200px) {
  .w-xl-25 {
    width: 25% !important; }

  .w-xl-50 {
    width: 50% !important; }

  .w-xl-75 {
    width: 75% !important; }

  .w-xl-100 {
    width: 100% !important; } }
@media (min-width: 1400px) {
  .w-xxl-25 {
    width: 25% !important; }

  .w-xxl-50 {
    width: 50% !important; }

  .w-xxl-75 {
    width: 75% !important; }

  .w-xxl-100 {
    width: 100% !important; } }
/*
 =====================================================================================================================
 globale Styles
 =====================================================================================================================
*/
@media (max-width: 768px) {
  body {
    font-size: 0.875rem; } }

.card-body {
  padding: 0.75rem !important; }

div.dop-bg {
  background: url(/template_dop/gfx/dop_background.jpg) no-repeat center; }
  div.dop-bg div.dop-bg-overlay {
    background: rgba(34, 34, 34, 0.6);
    padding: 50px 0px 50px 0px; }
    div.dop-bg div.dop-bg-overlay > div:nth-child(1) {
      background: #fff; }

button.btn {
  border-radius: 1.25rem; }
  button.btn.btn-primary {
    background-color: #eea22c;
    border-color: #eea22c; }
    button.btn.btn-primary:hover {
      background-color: #eea22c;
      border-color: #eea22c; }
  button.btn.btn-secondary {
    background-color: #fff;
    border-color: #000;
    color: #000; }
    button.btn.btn-secondary:hover {
      background-color: #000;
      border-color: #000;
      color: #fff; }
  button.btn.btn-transition-left {
    position: relative; }
    button.btn.btn-transition-left * {
      transition: all 0.5s ease; }
    button.btn.btn-transition-left .btn-text {
      opacity: 1;
      padding-left: 0.5rem; }
    button.btn.btn-transition-left:hover {
      text-align: center; }
      button.btn.btn-transition-left:hover .btn-text {
        opacity: 0;
        width: 0;
        overflow: hidden; }
      button.btn.btn-transition-left:hover i {
        position: absolute;
        top: 10px;
        right: 50%;
        transform: translateX(50%); }
  button.btn.btn-transition-right {
    position: relative; }
    button.btn.btn-transition-right * {
      transition: all 0.5s ease; }
    button.btn.btn-transition-right .btn-text {
      opacity: 1;
      padding-right: 0.5rem; }
    button.btn.btn-transition-right:hover {
      text-align: center; }
      button.btn.btn-transition-right:hover .btn-text {
        opacity: 0;
        width: 0;
        overflow: hidden; }
      button.btn.btn-transition-right:hover i {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%); }

a {
  color: #000;
  text-decoration: underline;
  cursor: pointer; }
  a:hover {
    color: #faa01b;
    text-decoration: underline; }

.table th {
  color: #888888;
  text-transform: uppercase;
  font-weight: normal; }
  .table th.table-actions {
    width: 40px; }
    .table th.table-actions-2 {
      width: 80px; }
    .table th.table-actions-3 {
      width: 120px; }
    .table th.table-actions-m {
      width: 30px; }
.table tbody {
  border-radius: 10px;
  border: 1px solid #FFF;
  box-shadow: 0px 3px 4px #22222233;
  background: #FFFFFF 0% 0% no-repeat padding-box; }

span.required::after {
  content: "*";
  color: red;
  position: relative;
  left: 0.5rem; }
span.required.required2::after {
  content: "**"; }

/*
 =====================================================================================================================
 Styles für einzelne Bereiche / Elemente
 =====================================================================================================================
*/
@media (min-width: 992px) {
  div#LOGIN div#CONTENT div.orderStatusContainer {
    width: 75% !important;
    margin-right: auto !important;
    margin-left: auto !important; } }
@media (min-width: 1400px) {
  div#LOGIN div#CONTENT div.orderStatusContainer {
    width: 50% !important; } }

div.statusContainer {
  background-image: url(/gfx/dop_statusbadge_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: white; }
  div.statusContainer .row {
    background: linear-gradient(180deg, #eea22c 0%, #eea22c 20%, rgba(238, 162, 44, 0.5) 100%); }
  div.statusContainer .statusBadge {
    height: 10rem; }

div.headerRow {
  background: #000; }
  div.headerRow a {
    color: #fff;
    text-transform: none; }

div.cmsArea {
  background-image: url(/gfx/dop_cms_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  color: black; }
  div.cmsArea .card-body {
    height: 100%;
    background: linear-gradient(180deg, rgba(238, 162, 44, 0.5) 0%, rgba(238, 162, 44, 0.5) 20%, #eea22c 100%); }

.orderStepsContainer {
  background-color: white; }
  .orderStepsContainer ul.progressSteps {
    padding-inline-start: 0.75rem; }
    .orderStepsContainer ul.progressSteps li {
      list-style: none;
      position: relative;
      z-index: 0; }
      .orderStepsContainer ul.progressSteps li.open {
        color: #999999;
        opacity: 20%; }
      .orderStepsContainer ul.progressSteps li:not(:first-child) {
        margin-top: 1.5rem; }
      .orderStepsContainer ul.progressSteps li .col-1 {
        font-size: 1.5rem;
        position: relative; }
      .orderStepsContainer ul.progressSteps li:not(:last-child) div.col-1:after {
        width: 6px;
        height: calc(100% + 0.6rem);
        content: "";
        background: #DBDBDB;
        position: absolute;
        z-index: -1;
        top: 1rem;
        left: calc(50% - 0.2rem); }
      .orderStepsContainer ul.progressSteps li i.far {
        background: white;
        z-index: 1; }
      .orderStepsContainer ul.progressSteps li.completed div.col-1:after {
        background: #00cc36; }
      .orderStepsContainer ul.progressSteps li.completed i.far {
        color: #00cc36; }
      .orderStepsContainer ul.progressSteps li.active div.col-1:after {
        background: #00cc36; }
      .orderStepsContainer ul.progressSteps li.active i.far {
        color: #00cc36; }

div.footer {
  background-color: #000;
  display: flex;
  flex-direction: column; }
  @media (min-width: 768px) {
    div.footer {
      flex-direction: row;
      align-items: center; } }
  div.footer div.footer-links {
    display: flex;
    flex-direction: column; }
    div.footer div.footer-links div {
      flex: 1 0 auto; }
    @media (min-width: 576px) {
      div.footer div.footer-links {
        flex-direction: row; } }
  div.footer div.footer-element {
    text-align: center;
    padding: 0.5rem 1rem; }
    div.footer div.footer-element img {
      height: 1.5rem; }
    div.footer div.footer-element.footer-logo {
      border-top: 1px solid #f8f9fa; }
      @media (min-width: 768px) {
        div.footer div.footer-element.footer-logo {
          border-top: none; } }
    @media (min-width: 768px) {
      div.footer div.footer-element.language {
        text-align: end;
        flex-grow: 1; } }
  div.footer a {
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 300; }
  div.footer a.dropdown-item {
    color: black; }

div#WRAPPER {
  display: flex;
  width: 100%;
  align-items: stretch; }
  div#WRAPPER div.orderStatusContainer ul.progressSteps li:not(:last-child) div.col-1:after {
    left: calc(50% - 0.4rem); }
    @media (min-width: 576px) {
      div#WRAPPER div.orderStatusContainer ul.progressSteps li:not(:last-child) div.col-1:after {
        left: calc(50% - 0.4rem); } }
  div#WRAPPER nav#sidebar {
    min-width: 250px;
    max-width: 250px;
    min-height: 90vh;
    transition: all 0.3s; }
    @media (max-width: 991px) {
      div#WRAPPER nav#sidebar {
        z-index: 999;
        position: fixed;
        top: 0;
        left: -250px;
        min-height: 100vh;
        background-color: #FFF; }
        div#WRAPPER nav#sidebar.active {
          left: 0px; } }
    div#WRAPPER nav#sidebar div.sidebar-header {
      height: 70px;
      align-items: center;
      padding-left: 0.5em; }
    div#WRAPPER nav#sidebar ul li {
      text-transform: uppercase;
      padding: 1rem;
      color: #000; }
      div#WRAPPER nav#sidebar ul li.active {
        background-color: #000; }
        div#WRAPPER nav#sidebar ul li.active * {
          color: #FFF; }
      div#WRAPPER nav#sidebar ul li a {
        text-decoration: none; }
        div#WRAPPER nav#sidebar ul li a:hover {
          color: #faa01b; }
          div#WRAPPER nav#sidebar ul li a:hover i {
            color: #faa01b; }
        div#WRAPPER nav#sidebar ul li a i {
          padding-right: 0.5em; }
    div#WRAPPER nav#sidebar ul.inner-nav li {
      padding: 0.5rem 1rem; }
      div#WRAPPER nav#sidebar ul.inner-nav li.active {
        font-weight: bold; }
  @media (max-width: 768px) {
    div#WRAPPER div.content-area {
      max-width: 100vw; } }
  div#WRAPPER div.content-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    background-color: #000;
    padding: 1em; }
    div#WRAPPER div.content-header > * {
      margin-left: 0.5em;
      margin-right: 0.5em; }
  div#WRAPPER div.content-header-second-row > button {
    margin: 0.5rem 0.25rem 0.5rem 0.25rem; }
    div#WRAPPER div.content-header-second-row > button:first-of-type {
      margin: 0.5rem 0.25rem 0.5rem 0.5rem; }
    div#WRAPPER div.content-header-second-row > button:last-of-type {
      margin: 0.5rem 0.5rem 0.5rem 0.25rem; }
  div#WRAPPER div#CONTENT {
    background-color: #F9F9F9;
    min-height: 88vh;
    padding: 1rem 0.5rem; }
    div#WRAPPER div#CONTENT div.container-fluid:first-of-type {
      background-color: transparent; }
    div#WRAPPER div#CONTENT i.fas, div#WRAPPER div#CONTENT i.far, div#WRAPPER div#CONTENT i.fa {
      padding-right: 0.5rem; }

div#loginContainer button.btn {
  width: 100%; }

.overlay {
  display: none;
  position: fixed;
  /* full screen */
  width: 100vw;
  height: 100vh;
  /* transparent black */
  background: rgba(0, 0, 0, 0.7);
  /* middle layer, i.e. appears below the sidebar */
  z-index: 998;
  opacity: 0;
  /* animate the transition */
  transition: all 0.5s ease-in-out; }

/* display .overlay when it has the .active class */
.overlay.active {
  display: block;
  opacity: 1; }

table.serviceorder-table .statusBadge {
  height: 2rem; }

table.tablesorter .header {
  cursor: pointer; }
  table.tablesorter .header:before {
    font-family: 'Font Awesome 5 Free';
    content: '\f0dc';
    font-weight: 900;
    margin-right: 10px; }
  table.tablesorter .header.headerSortDown:before {
    content: '\f0de'; }
  table.tablesorter .header.headerSortUp:before {
    content: '\f0dd'; }

#chooseServiceDiv .btn.reportTypeSelector {
  padding: 0px;
  border-radius: 0.5rem;
  border: 1px solid #999999;
  padding-bottom: 1rem; }
  #chooseServiceDiv .btn.reportTypeSelector div {
    background: linear-gradient(180deg, #888888 0%, #222222 100%, black 100%);
    padding: 20px 0px;
    margin-bottom: 1rem; }
    #chooseServiceDiv .btn.reportTypeSelector div img {
      height: 5rem; }
  #chooseServiceDiv .btn.reportTypeSelector:hover {
    background: linear-gradient(180deg, #eea22c 0%, #eea22c 100%, #eea22c 100%);
    border-color: transparent; }
    #chooseServiceDiv .btn.reportTypeSelector:hover div {
      background: transparent; }
    #chooseServiceDiv .btn.reportTypeSelector:hover i {
      bottom: 1.25rem;
      top: auto;
      color: #FFF; }

#createServiceDiv div.progressSteps {
  display: flex;
  flex-direction: row;
  justify-content: space-between; }
  #createServiceDiv div.progressSteps .step {
    flex: 1 0;
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative; }
    #createServiceDiv div.progressSteps .step .icon {
      color: #FFF;
      background-color: #999999;
      border: 1px solid #999999;
      border-radius: 100%;
      margin: 0px auto 10px auto;
      width: 2.5rem;
      height: 2.5rem;
      z-index: 3; }
      #createServiceDiv div.progressSteps .step .icon i.fa, #createServiceDiv div.progressSteps .step .icon i.fas {
        position: relative;
        transform: translateY(43%);
        padding: 0px !important; }
        @media (max-width: 768px) {
          #createServiceDiv div.progressSteps .step .icon i.fa, #createServiceDiv div.progressSteps .step .icon i.fas {
            transform: translateY(50%); } }
      #createServiceDiv div.progressSteps .step .icon i.fontFF {
        width: 1.25rem;
        height: 1.25rem;
        position: relative;
        transform: translateY(50%); }
      #createServiceDiv div.progressSteps .step .icon.current, #createServiceDiv div.progressSteps .step .icon.completed {
        background-color: #000;
        border-color: #000; }
        #createServiceDiv div.progressSteps .step .icon.current i.fa, #createServiceDiv div.progressSteps .step .icon.current i.fas, #createServiceDiv div.progressSteps .step .icon.completed i.fa, #createServiceDiv div.progressSteps .step .icon.completed i.fas {
          background-color: #000; }
      #createServiceDiv div.progressSteps .step .icon .badge {
        display: none;
        z-index: 99;
        background-color: #33DD33;
        position: absolute;
        top: 1.5rem;
        right: 50%;
        border-radius: 100%;
        padding: 0.2rem;
        transform: translateX(130%); }
        #createServiceDiv div.progressSteps .step .icon .badge i.fa, #createServiceDiv div.progressSteps .step .icon .badge i.fas {
          top: -0.2rem;
          position: relative;
          background-color: transparent; }
      #createServiceDiv div.progressSteps .step .icon.completed {
        cursor: pointer; }
        #createServiceDiv div.progressSteps .step .icon.completed .badge {
          display: inline-block; }
    @media (max-width: 768px) {
      #createServiceDiv div.progressSteps .step span.progressStepText {
        display: none; } }
    #createServiceDiv div.progressSteps .step:not(:first-child) .icon::before {
      content: "";
      position: absolute;
      height: 0.5rem;
      width: calc(50% - 20px);
      top: 1rem;
      background: #999999;
      z-index: 0;
      left: 0px; }
      @media (max-width: 768px) {
        #createServiceDiv div.progressSteps .step:not(:first-child) .icon::before {
          top: 30%; } }
    #createServiceDiv div.progressSteps .step:not(:first-child) .icon.current::before, #createServiceDiv div.progressSteps .step:not(:first-child) .icon.completed::before {
      background: #000; }
    #createServiceDiv div.progressSteps .step:not(:last-child) .icon:after {
      content: "";
      position: absolute;
      height: 0.5rem;
      width: 50%;
      top: 1rem;
      background: #999999;
      z-index: 2; }
      @media (max-width: 768px) {
        #createServiceDiv div.progressSteps .step:not(:last-child) .icon:after {
          top: 30%; } }
    #createServiceDiv div.progressSteps .step:not(:last-child) .icon.current::after, #createServiceDiv div.progressSteps .step:not(:last-child) .icon.completed::after {
      background: #000; }
#createServiceDiv .step-content {
  margin-top: 2rem; }
  #createServiceDiv .step-content div#calendar a, #createServiceDiv .step-content .free-hours-div a {
    color: #000 !important; }
  #createServiceDiv .step-content .fc.fc-toolbar.fc-header-toolbar {
    margin-bottom: 0.5em; }
  #createServiceDiv .step-content .fc.fc-toolbar-title {
    padding: 0.4em 0.65em; }
  #createServiceDiv .step-content .fc-day.fc-day-today {
    background-color: transparent; }
  #createServiceDiv .step-content .fc-day.selected {
    background: #faa01b; }
  #createServiceDiv .step-content .fc-day:not(.fc-day-disabled) {
    cursor: pointer; }
  #createServiceDiv .step-content .fc .fc-button-primary {
    background-color: black; }
  #createServiceDiv .step-content .time-col {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ddd;
    cursor: pointer; }
    #createServiceDiv .step-content .time-col:hover a {
      text-decoration: underline; }
    #createServiceDiv .step-content .time-col.selected {
      background: #faa01b; }
    #createServiceDiv .step-content .time-col.disabled {
      background: #ededed; }
      #createServiceDiv .step-content .time-col.disabled a {
        color: #ddd !important; }
  #createServiceDiv .step-content .form-select, #createServiceDiv .step-content .form-control, #createServiceDiv .step-content .form-check-input {
    margin: 0.5rem 0rem; }
  #createServiceDiv .step-content .form-select, #createServiceDiv .step-content .form-control {
    border-radius: 2rem;
    box-shadow: 0px 8px 5px -4px rgba(213, 213, 213, 0.75);
    -webkit-box-shadow: 0px 8px 5px -4px rgba(213, 213, 213, 0.75);
    -moz-box-shadow: 0px 8px 5px -4px rgba(213, 213, 213, 0.75); }
  #createServiceDiv .step-content .form-check-input {
    width: 1.5em;
    height: 1.5em; }
  #createServiceDiv .step-content .form-select.tireDimCombo {
    width: 30%; }
  #createServiceDiv .step-content #map_canvas {
    width: 100%;
    min-height: 300px; }
  #createServiceDiv .step-content tr.chosen {
    background: #faa01b; }

a.logoutBtn {
  color: #fff; }
  a.logoutBtn:hover {
    color: #faa01b; }

@media (min-width: 992px) {
  div.page-header.service-times {
    height: 75vh; }
    div.page-header.service-times > h4 {
      position: relative;
      top: 40%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); } }
div.page-header.service-times > h4 {
  display: flex;
  flex-direction: column;
  justify-content: center; }
  div.page-header.service-times > h4 > * {
    text-align: center; }
  @media (min-width: 992px) {
    div.page-header.service-times > h4 {
      flex-direction: row; }
      div.page-header.service-times > h4 > * {
        text-align: start; } }

.input-group > .form-control {
  border-radius: 2rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }
.input-group > .input-group-append .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }

/*
 =====================================================================================================================
 Font FleetFox
 =====================================================================================================================
*/
i.fontFF.branchType {
  content: url(/gfx/Branch-Service-Order-Icon.svg); }
i.fontFF.mobileType {
  content: url(/gfx/Mobile-Service-Order-Icon.svg); }
i.fontFF.breakdownType {
  content: url(/gfx/Breakdown-Service-Order-Icon.svg); }

.drop-animation {
  animation: dropIn 0.6s ease-out;
}

.bounce-animation {
  animation: bounce 0.5s infinite
}

@keyframes dropIn {

  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }

}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}