@import url(https://fonts.googleapis.com/css?family=Lato&display=swap);
.AddUpdateAppointmentNote .add-update-appointment-note-textare-field {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  width: 100%;
  margin-bottom: 5px;
  padding: 10px;
  display: block;
}

.AddUpdateAppointmentNote .add-update-appointment-note-textare-field:focus {
  border-color: inherit;
  outline: none;
}

.AddUpdateAppointmentNote .required.field.add-update-appointment-note-form-field {
  width: 100%;
  margin-bottom: 10px;
  display: block;
}

.AddUpdateAppointmentNote .add-update-appointment-note-input-field {
  width: 100%;
  display: block;
}

.AddUpdateAppointmentNote .add-update-appointment-note-input-field input {
  width: 100%;
}

.AddUpdateAppointmentNote .add-update-appointment-note-checkbox-field {
  text-align: right;
  margin: 15px 0;
  display: block;
}

.AddUpdateAppointmentNote .add-update-appointment-center-container {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.AddUpdateAppointmentNote .add-update-appointment-note-phone-options-dropdown {
  width: 50%;
  margin-top: 15px;
}

.AddUpdateAppointmentNote .add-update-appointment-note-phone-input {
  width: 45%;
  height: 38px;
}

.AddUpdateAppointmentNote .add-appointment-note-modal-actions {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  display: flex;
}

.AddUpdateAppointmentNote .add-appointment-note-modal-actions button:first-child {
  margin-right: 5px;
}

.AddUpdateAppointmentNote .update-appointment-note-modal-actions {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.AddUpdateAppointmentNote .update-appointment-note-modal-actions div:nth-child(2) button:first-child {
  margin-right: 5px;
}

.AddUpdateAppointmentNote .attachment-uploaded {
  text-align: center;
  border: 1px solid #e2e2e3;
  width: 100%;
  padding: 50px 30px;
  display: block;
}

.AddUpdateAppointmentNote .add-update-appointment-attachments-container {
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  display: flex;
}

.AddUpdateAppointmentNote .add-update-appointment-attachments-container i {
  margin-right: 0;
}

.AddUpdateAppointmentNote .add-update-appointment-attachments-container i:first-child {
  color: gray;
  margin-right: 3px;
  font-size: 14px;
}

.AddUpdateAppointmentNote .add-update-appointment-attachments-container i:nth-child(2) {
  cursor: pointer;
  color: gray;
  font-size: 14px;
}

.AddUpdateAppointmentNote .add-update-appointment-attachments-container .attachment-name, .AddUpdateAppointmentNote .attachment-container {
  color: #4183c4;
}

.AddUpdateAppointmentNote .attachment-uploaded-by {
  color: gray;
  margin-right: 3px;
  font-style: italic;
}

.AddUpdateAppointmentNote .attachment-uploaded-date {
  color: gray;
  margin-right: 3px;
}

.Add-update-appointment-note-header span {
  font-family: Lato, sans-serif;
  font-size: 18px;
}

.Add-update-appointment-note-header i {
  margin-right: 5px;
}

.Add-update-appointment-note-header .backorder-icon {
  color: #6c0699;
  margin-right: 5px;
  display: inline-block;
}

.datepicker-wrapper {
  cursor: pointer;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 180px;
  height: 36px;
  padding: 9px 12px;
  display: flex;
}

.datepicker-wrapper.disabled {
  cursor: not-allowed;
}

.datepicker-wrapper.disabled .datepicker-row .date {
  color: #b5b5b5;
}

.datepicker-wrapper.fluid {
  max-width: 100%;
}

.datepicker-wrapper .datepicker-row {
  z-index: 2;
  white-space: nowrap;
  background-color: #fff;
  flex-direction: row;
  width: 100%;
  display: flex;
}

.datepicker-wrapper .datepicker-row .label {
  color: #b5b5b5;
  margin: 0;
}

.datepicker-wrapper .datepicker-row .date {
  color: #000;
  margin: 0 9px;
}

.datepicker-wrapper .react-datepicker-wrapper {
  z-index: 1;
  visibility: hidden;
  margin-left: -15px;
  position: absolute;
}

.datepicker-wrapper .datepicker-icons {
  gap: 4px;
  display: flex;
}

.datepicker-wrapper .datepicker-icons .icon.dropdown {
  position: relative;
  bottom: 5px;
}

.datepicker-wrapper .clear-button {
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  transition: background-color .2s;
  display: flex;
}

.datepicker-wrapper .clear-button:hover {
  background-color: #0000001a;
}

.datepicker-wrapper .clear-button .icon {
  justify-content: center;
  align-items: center;
  margin: 0;
  font-size: 12px;
  display: flex;
}

.datepicker-container, .datepicker-container .react-datepicker__header {
  background-color: #fff;
}

.react-datepicker__day--range, .react-datepicker__day--in-range {
  color: #fff !important;
  background-color: #b5b5b5 !important;
}

.react-datepicker__day--in-selecting-range {
  color: #fff;
  background-color: #b5b5b5 !important;
}

.react-datepicker__day--range-start {
  color: #fff !important;
  background-color: #21ba45 !important;
}

.react-datepicker__day--today {
  background-color: #2d84ce;
  border-radius: 4px;
  color: #fff !important;
}

.react-datepicker__day--selected:not(.react-datepicker__day--range-start):not(.react-datepicker__day--in-range):not(.react-datepicker__day--today) {
  color: #fff !important;
  background-color: #21ba45 !important;
}

.react-datepicker__day:focus-visible {
  border: none !important;
  outline: none !important;
}

.react-datepicker__portal {
  position: absolute;
}

.react-datepicker__children-container {
  width: 100% !important;
  margin: .4rem 0 !important;
}

.react-datepicker-clear-date-container {
  text-align: center;
  cursor: default;
}

.react-datepicker-clear-date-button {
  margin: 10px 0 20px !important;
}

.AppointmentDate .datepicker-wrapper {
  border: none;
  height: auto;
  padding: 0;
}

.AppointmentDate .datepicker-wrapper input {
  caret-color: #0000;
  color: #0000;
  text-shadow: 0 0 #000;
  border: none;
  border-bottom: 1px solid #ccc;
  width: auto;
  min-width: auto;
  max-width: 80px;
}

.AppointmentDate .datepicker-wrapper input:active, .AppointmentDate .datepicker-wrapper input:focus, .AppointmentDate .datepicker-wrapper input:focus-visible {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  outline: 0 !important;
}

.DMSNotes {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  margin-top: 10px;
}

.DMSNotes .dms-note-row {
  border-bottom: 1px solid #e2e2e3;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  padding: 9px 13px;
  display: flex;
}

.DMSNotes .dms-note-row:last-child {
  border-bottom: none;
}

.DMSNotes .dms-note-row .dms-note-info {
  font-style: italic;
  font-weight: 600;
  font-size: 12.6px !important;
}

.DMSNotes .dms-note-row .dms-note-type {
  flex: 1;
  padding: 0 10px;
  font-size: 12.6px !important;
}

.DMSNotes .dms-note-row .dms-note-type strong {
  text-transform: capitalize;
  margin: 0 3px;
}

.CarReplacement {
  margin: 2px 0;
}

.CarReplacement i {
  color: #fff;
  font-size: 12px;
  transform: translate(10px, -5.5px);
}

.CarReplacement__iconContainer {
  align-items: center;
  justify-content: centerw;
  background-color: #009fb4;
  border-radius: 4px;
  width: 35px;
  height: 25px;
  display: flex;
}

.CarReplacement__leftWrapper {
  align-items: stretch;
  gap: 8px;
  display: flex;
}

.CarReplacement__licensePlate {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  height: 25px;
  padding: 0 12px;
  font: bold 11px / 15px Lato;
  display: flex;
}

.CarReplacement__pickupTime {
  margin-left: 10px;
}

.AppointmentNoteEditBtn {
  text-align: center;
  cursor: pointer;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  width: 35px;
  height: 25px;
}

.AppointmentNoteEditBtn i {
  margin-right: 0;
  font-size: .7em;
}

.AppointmentNoteEditBtn i.icon:before {
  position: relative;
  bottom: 1px;
}

.UserInfo {
  white-space: nowrap;
  margin-left: auto;
  font-size: 12.6px;
  font-weight: 600;
}

.UserInfo__data .user-name {
  margin-right: 5px;
  font-style: italic;
}

.AppointmentNoteRow {
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  padding: 9px 13px;
  display: flex;
}

.AppointmentNoteRow:not(:last-child) {
  border-bottom: 1px solid #e2e2e3;
}

.AppointmentNoteRow .note-details-info-container {
  align-items: center;
  gap: 8px;
  width: 100%;
  display: flex;
}

.AppointmentNoteRow .note-details-info-container .icon-btn-container {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.AppointmentNoteRow .note-details-info-container .icon-btn-container div {
  display: inline-block;
}

.AppointmentNoteRow .note-details-info-container .appointment-note-label {
  white-space: nowrap;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  padding: 0 5px;
  font-size: 11px;
}

.AppointmentNoteRow .note-details-info-container .appointment-note-text {
  cursor: pointer;
  letter-spacing: 0;
  color: #000c;
  width: 60%;
  margin-right: 10px;
  font: 13px / 15px Lato;
}

.AppointmentNoteRow .note-user-date-info-container {
  white-space: nowrap;
  font-size: 12.6px;
  font-weight: 600;
}

.AppointmentNoteRow .note-user-date-info-container .note-user-date-info .user-name {
  margin-right: 5px;
  font-style: italic;
}

.appointment-note-info-type-icon {
  margin-right: 9px !important;
}

.appointment-note-type-icon {
  margin-right: 5px !important;
}

.AppointmentNoteTypeIconLabel {
  text-align: center;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  width: 35px;
  height: 25px;
}

.AppointmentNoteTypeIconLabel i {
  margin-right: 0;
}

.AppointmentNoteTypeIconLabel .carNoteIcon {
  color: #fff;
  position: relative;
  top: .5px;
}

.AppointmentActions {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 76px;
  margin: 0 10px;
  display: flex;
}

.AppointmentActions__status-identifiers {
  margin-left: 20px;
}

.AppointmentActions-wrapper {
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

.AppointmentActions-wrapper .status-filters-wrapper {
  margin-left: 20px;
}

.AppointmentActions-wrapper > button.button {
  color: #000;
  cursor: pointer;
  height: 36px;
  margin-left: 20px;
  font-size: 14px;
  font-weight: 600;
}

.AppointmentActions-wrapper > button.button i.icon {
  font-size: 14px;
  font-weight: 600;
}

.AppointmentActions-wrapper .datepicker-wrapper {
  width: 256px;
  max-width: 256px;
}

.AppointmentActions-wrapper .datepicker-wrapper .react-datepicker__month-container {
  float: none !important;
}

.AppointmentActions .react-datepicker-popper {
  z-index: 2;
}

.AppointmentsTableContainer {
  min-height: calc(100vh - 118px);
  margin: 0;
  padding-bottom: 2em;
  position: relative;
}

.AppointmentsTableContainer .AppointmentsInnerContainer {
  margin: 0 auto !important;
  padding: 0 10px !important;
  overflow: visible !important;
}

.AppointmentsTableContainer .AppointmentsTableWrapper {
  width: 100%;
}

.AppointmentsTableContainer .AppointmentsTableContainer-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

i.icon.arrow.down.a.z:before {
  content: "" !important;
}

i.icon.arrow.up.a.z:before {
  content: "" !important;
}

.AppointmentsTableContainer {
  scroll-behavior: scroll;
  scrollbar-width: thin;
  height: calc(100vh - 39px);
  position: relative;
  overflow: auto;
}

.carret-header-wrapper {
  align-items: baseline;
  gap: 4px;
  display: flex;
}

.arrow-header-wrapper {
  gap: 4px;
  display: flex;
}

.ReactTable.AppointmentsTable .model-text {
  min-width: 140px !important;
}

.ReactTable.AppointmentsTable thead {
  z-index: 1;
  table-layout: fixed;
  background: #f9fafb;
  width: 100%;
  padding: 0;
  display: table;
  top: 0;
}

.ReactTable.AppointmentsTable tr {
  table-layout: fixed;
  width: 100%;
  height: 36px;
  display: table;
}

.ReactTable.AppointmentsTable td, .ReactTable.AppointmentsTable th, .ReactTable.AppointmentsTable .th .appointment-table-wrapper {
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  vertical-align: middle;
  overflow: visible;
}

.ReactTable.AppointmentsTable td[style*="width"], .ReactTable.AppointmentsTable th[style*="width"], .ReactTable.AppointmentsTable .th .appointment-table-wrapper[style*="width"] {
  width: var(--width) !important;
}

.ReactTable.AppointmentsTable th.date_th, .ReactTable.AppointmentsTable td.date_td {
  width: 140px !important;
}

.ReactTable.AppointmentsTable th.reg_nr_th, .ReactTable.AppointmentsTable td.reg_nr_td {
  width: 100px !important;
}

.ReactTable.AppointmentsTable th.apk_th, .ReactTable.AppointmentsTable td.apk_td {
  width: 90px !important;
}

.ReactTable.AppointmentsTable th.customer_name_th, .ReactTable.AppointmentsTable td.customer_name_td {
  width: 170px !important;
}

.ReactTable.AppointmentsTable th.circle_th, .ReactTable.AppointmentsTable td.circle_td {
  width: 210px !important;
}

.ReactTable.AppointmentsTable th.model_th, .ReactTable.AppointmentsTable td.model_td {
  width: 150px !important;
}

.ReactTable.AppointmentsTable th.location_th, .ReactTable.AppointmentsTable td.location_td {
  width: 90px !important;
}

.ReactTable.AppointmentsTable tbody {
  scroll-behavior: auto;
  width: 100%;
  display: block;
  position: relative;
}

.ReactTable.AppointmentsTable tbody tr {
  z-index: 0;
  width: 100%;
  position: absolute;
  left: 0;
}

.ReactTable.AppointmentsTable th:last-child, .ReactTable.AppointmentsTable td:last-child {
  text-align: right;
  padding-right: 10px;
}

.appointment-table-wrapper {
  flex-direction: row;
  align-items: center;
  gap: 4px;
  display: flex;
  position: relative;
}

.appointment-table-wrapper .appointment-table-checklist {
  background-color: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  font-size: 16px;
  font-weight: 900;
  display: flex;
}

.appointment-table-wrapper P {
  width: max-content;
  margin: 0;
  font-size: 12.6px;
}

.appointment-table-wrapper i.icon.margin {
  margin-top: -10px;
}

.appointment-table-wrapper.pointer {
  cursor: pointer;
}

.appointment-table-wrapper.end {
  justify-content: flex-end;
}

.appointment-table-flex {
  cursor: pointer;
  align-items: center;
  display: flex;
}

.appointment-table-flex.divider .menu {
  min-width: 220px !important;
}

.appointment-table-flex.divider .ui.dropdown .menu .item {
  border-bottom: 1px solid #e2e2e3;
}

.appointment-table-flex.divider .ui.dropdown .menu .item.selected {
  letter-spacing: 0;
  color: #000;
  background-color: #f8f9fa;
  font: bold 14px / 16px Lato;
}

.appointment-table-flex.divider .ui.dropdown {
  padding-left: 0;
}

.appointment-table-last-user-dropdown {
  color: #707070;
  border: 1px solid #707070;
  border-radius: 360px;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  display: flex;
}

.appointment-table-last-user-dropdown .text {
  font-size: 11px;
}

.appointment-table-user-popup {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5px;
  display: flex;
}

.appointment-table-user-popup-top {
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  display: flex;
}

.appointment-table-user-popup-top-initials {
  color: #767676;
  border: 1px solid #767676;
  border-radius: 360px;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  font-size: 10px;
  font-weight: normal;
  display: flex;
  font-family: Lato !important;
}

.appointment-table-user-popup-top-initials-image {
  object-fit: cover;
  border: 1px solid #767676;
  border-radius: 360px;
  width: 25px;
  height: 25px;
}

.appointment-table-user-popup-top-name {
  color: #000;
  font-size: 14px;
  font-weight: bold;
  font-family: Lato !important;
}

.appointment-table-user-popup-bottom {
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  display: flex;
}

.appointment-table-user-popup-bottom-name, .appointment-table-user-popup-bottom-status {
  color: #000;
  font-size: 14px;
  font-weight: normal;
  font-family: Lato !important;
}

.ReactTable.AppointmentsTable {
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  width: 100%;
}

.customer-ellipsis {
  width: 100% !important;
  max-width: 150px !important;
}

.ReactTable.AppointmentsTable tr {
  table-layout: fixed;
  width: 100%;
  display: table;
}

.last-user-dropdown-selection {
  cursor: pointer;
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.appointment-table-full {
  justify-content: center;
  width: 100%;
  display: flex;
}

.appointment-table-user-container {
  align-items: center;
  display: flex;
}

.appointemnt-table-user-head {
  margin-left: -2px;
}

.appointment-table-user {
  color: #2185d0;
  border: 1px solid #2185d0;
  border-radius: 360px;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  display: flex;
}

.appointment-table-user .text {
  font-size: 11px;
}

.appointment-table-user .image {
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
  object-fit: cover;
}

.panicRow {
  background-color: #fef0e7 !important;
}

.panicRow:hover {
  background-color: #f2d5c8 !important;
}

.panicRow .appointment-table-last-user {
  color: #ff0202 !important;
  border: 1px solid #ff0202 !important;
}

.last-user-dropdown-item {
  color: #707070;
  border: 1px solid #707070;
  border-radius: 360px;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  display: flex;
}

.AppointmentsTable {
  border-spacing: 0;
  text-align: left;
  table-layout: fixed;
  border-top: 1px solid #e2e2e3;
  border-left: 1px solid #e2e2e3;
  border-right: 1px solid #e2e2e3;
  border-radius: 4px;
  width: 100%;
}

.AppointmentsTable .wo-nr-container {
  align-items: center;
  display: flex;
}

.AppointmentsTable .ellipsis-wo-nr {
  direction: rtl;
  width: 105px;
  display: inline-block !important;
}

.AppointmentsTable .ellipsis-wo-nr span:nth-child(2) {
  margin-left: 5px;
}

.AppointmentsTable tbody .AppointmentTableRow {
  display: contents;
}

.AppointmentsTable tbody .AppointmentTableRow:hover {
  color: gray;
}

.AppointmentsTable thead {
  background-color: #f9fafb;
  padding: 0 10px;
}

.AppointmentsTable tr {
  cursor: pointer;
  vertical-align: middle;
  height: 36px;
}

.AppointmentsTable tr:hover {
  color: #000;
  background-color: #f9fafb;
}

.AppointmentsTable th {
  border-bottom: 1px solid #e2e2e3;
  min-width: 75px;
  padding-left: 12px;
}

.AppointmentsTable th:last-child {
  text-align: right;
  padding-right: 10px;
}

.AppointmentsTable td {
  padding-left: 10px;
  border-bottom: 1px solid #e2e2e3 !important;
}

.AppointmentsTable td.text-center {
  text-align: center;
  display: table-cell !important;
}

.AppointmentsTable td:last-child {
  justify-content: flex-end;
  padding: 2.5px 10px;
  display: flex;
}

.AppointmentsTable td .-panic-user {
  color: #ff0202;
  background-color: #fef0e7;
  padding: 0 8px;
}

.AppointmentsTable td .-customer-sign-wo {
  color: #2d85d0;
  background-color: #e1ecf3;
  border-radius: 4px;
  padding: 0 8px;
}

.AppointmentsTable td .-warranty-signature-missing {
  color: #ff0202;
  background-color: #fef0e7;
  border-radius: 4px;
  padding: 0 8px;
}

.AppointmentsTable td .ellipsis-wo-nr {
  width: 105px;
  display: inline-block !important;
}

.AppointmentsTable td .ellipsis-wo-nr span:nth-child(2) {
  margin-left: 5px;
}

.AppointmentsTable td .ellipsis-model {
  min-width: 150px;
  max-width: 230px;
}

.AppointmentsTable td .internal-wo {
  text-align: left;
  color: #ff0202;
  padding: 5px 0;
  font-weight: 600;
  position: relative;
  right: 5px;
}

.AppointmentsTable td .internal-wo-text {
  background-color: #fef0e7;
  padding: 6px;
}

a {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

i.icon.appointment-pin {
  cursor: pointer;
}

i.icon.appointment-pin.appointment-pin-disabled {
  cursor: default;
  pointer-events: none;
}

.small-status .button.ui.button {
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 30px;
  display: flex;
}

.pin-grey {
  color: #584a4a;
  margin-right: 8.5px;
}

.expired-apk {
  color: #db2828;
  background: #fbe8e8;
  border-radius: 4px;
  padding: 6px;
}

.apk-expire-soon {
  color: #6d0699;
  background: #efe4f4;
  border-radius: 4px;
  padding: 6px;
}

.AppointmentTableDateColumnCellTimeCarApp .date-diff-value {
  margin-left: 5px;
  font-weight: 600;
}

.past-car-return-time {
  color: red;
}

#new-intervention .field {
  padding-left: 0;
  padding-right: 0;
}

#new-intervention .withdropdown {
  width: 100%;
  position: relative;
}

#new-intervention .dropdownTrigger {
  background-color: #0000;
  align-items: center;
  margin: 0 7px 5px 0;
  padding: 0;
  display: flex;
}

#new-intervention .transition {
  right: -7px;
}

#new-intervention .withdropdownButton.black {
  color: #000;
}

#new-intervention .withdropdownButton.grey {
  color: #767676;
}

#new-intervention .no-label {
  color: #767676 !important;
}

.ui.visible.dimmer .InterventionModal {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.intervention-modal-title {
  font-size: 18px;
}

.new-attachment-container {
  flex-direction: column;
  gap: 5px;
  width: 100%;
  margin-top: 13.5px;
  display: flex;
}

.new-attachment-container .attachment-view {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 2px;
  display: flex;
}

.new-attachment-container .attachment-view .attachment-name {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: 5px;
  max-width: 75%;
  display: flex;
}

.new-attachment-container .attachment-view .attachment-name p {
  color: #3175c6;
  margin: 0;
  font-size: 14px;
}

.new-attachment-container .attachment-view .attachment-name i.icon {
  height: auto;
  margin-right: 0;
  font-size: 14px;
  color: #414141 !important;
}

.new-attachment-container .attachment-view .attachment-delete {
  justify-content: center;
  align-items: center;
  gap: 5px;
  display: flex;
}

.new-attachment-container .attachment-view .attachment-delete p {
  color: #000;
  margin: 0;
  font-size: 12px;
  font-style: italic;
  font-weight: bold;
}

.new-attachment-container .attachment-view .attachment-delete i.icon {
  cursor: pointer;
  height: auto;
  margin-right: 0;
  font-size: 14px;
  color: #414141 !important;
}

.PinModal__modal-header p {
  margin: 0;
  font-size: 18px;
}

.PinModal__modal-header p i.icon {
  margin-right: 10px;
}

.PinModal__modal-header {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 24px 0 0;
  display: flex !important;
}

.PinModal__modal-footer {
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
  width: 100%;
  display: flex !important;
}

.PinModal__delete-button {
  align-items: center !important;
  display: flex !important;
}

.PinModal__checkbox-container {
  white-space: nowrap;
  border: 1px solid #22242626;
  border-radius: 3px;
  justify-content: center;
  gap: 10px;
  padding: 9px 6px 9px 10px;
  display: flex;
}

.PinModal__checkbox-box {
  align-self: flex-end;
  margin: 0 !important;
}

.PinModal__checkbox-container-align {
  width: 100% !important;
}

.PinModal__checkbox-fields {
  margin-bottom: 0 !important;
}

.PinModal__checkbox-fields-group {
  align-self: flex-end;
}

.PinModal .appointment-note-attachments i.icon {
  margin-top: 0;
}

.PinModal .attachment-container .attachment-view .attachment-name i.icon {
  margin-top: -2px;
}

.Attachments {
  padding: 0 13.5px;
}

.Attachments .ui.menu {
  box-shadow: unset;
  border: 0;
  margin-bottom: 0;
}

.Attachments .ui.menu .active.item {
  color: #fff;
  background-color: #21ba45;
}

.Attachments .ui.menu .item {
  border: 1px solid #70707029;
  height: 25px;
  padding-left: 10px;
  padding-right: 10px;
}

.Attachments .ui.menu .item:last-child {
  border-radius: 0 .285714rem .285714rem 0;
}

.Attachments .ui.menu .item:before {
  content: unset;
}

.Attachments .ui.attached.segment {
  border: none;
  padding: 0;
}

.Attachments .attachment-container {
  flex-direction: column;
  gap: 5px;
  width: 100%;
  display: flex;
}

.Attachments .attachment-container .attachment-view {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 2px 0;
  display: flex;
}

.Attachments .attachment-container .attachment-view .attachment-name {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: 5px;
  max-width: 75%;
  display: flex;
}

.Attachments .attachment-container .attachment-view .attachment-name p {
  color: #3175c6;
  font-size: 14px;
}

.Attachments .attachment-container .attachment-view .attachment-name i.icon {
  margin-top: -10px;
  margin-right: 0;
  font-size: 14px;
  color: #414141 !important;
}

.Attachments .attachment-container .attachment-view .attachment-delete {
  justify-content: center;
  align-items: center;
  gap: 5px;
  display: flex;
}

.Attachments .attachment-container .attachment-view .attachment-delete p {
  color: #000;
  font-size: 12px;
  font-style: italic;
  font-weight: bold;
}

.Attachments .attachment-container .attachment-view .attachment-delete i.icon {
  cursor: pointer;
  margin-top: -10px;
  margin-right: 0;
  font-size: 14px;
  color: #414141 !important;
}

.ui.basic.label.customer-comm-answer-declined-intervention-label {
  justify-content: center;
  align-items: center;
  display: flex;
}

.GeneralInfo .ui.buttons.withdropdown {
  background-color: #f9fafb;
  border: 1px solid #dededf;
  border-radius: 4px;
}

.GeneralInfo .ui.buttons.withdropdown .button {
  background-color: inherit;
  padding: 5px 10px 5px 5px;
}

.GeneralInfo .ui.buttons.withdropdown .icon.button {
  margin-top: 5px;
}

.GeneralInfo .ui.buttons.withdropdown .withdropdownButton {
  width: auto;
}

.GeneralInfo .ui.buttons.withdropdown .withdropdownButton.black {
  color: #000;
}

.GeneralInfo .ui.buttons.withdropdown .withdropdownButton.grey {
  color: #767676;
}

.GeneralInfo .fields {
  justify-content: space-between;
  display: flex;
  margin: 0 !important;
}

.GeneralInfo .fields button {
  width: 100%;
}

.GeneralInfo .pin.dropdown:hover {
  border-color: #22242659;
  box-shadow: 0 0 2px #0000000d;
}

.GeneralInfo .pin.dropdown {
  cursor: pointer;
  color: #000000de;
  min-height: 2.7em;
  box-shadow: none;
  background: #fff;
  border: 1px solid #22242626;
  border-radius: .28rem;
  padding: .78em 2.1em .78em 1em;
  line-height: 1em;
  transition: box-shadow .1s, width .1s;
  display: inline-block;
}

.GeneralInfo .no-label {
  color: #767676 !important;
}

.GeneralInfo .one.wide.field.mt-28.user-approved-icon {
  margin: 0;
  padding: 0;
  width: 38px !important;
  height: 38px !important;
}

.GeneralInfo .one.wide.field.mt-28.user-approved-icon button {
  justify-content: center;
  align-items: center;
  font-size: 18px;
  display: flex;
  height: 38px !important;
}

.GeneralInfo .input-row-equal-spacing .field {
  margin-right: 10px !important;
  padding: 0 !important;
}

.GeneralInfo .input-row-equal-spacing .field:last-child {
  margin-right: 0 !important;
}

.GeneralInfo .label-dropdown-container {
  width: 58px !important;
}

.printModal {
  text-align: center;
  color: #0460b5;
  background-color: #ffffffe8;
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  font-size: 30px;
  font-weight: 300;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.printClose {
  position: absolute;
  top: 10px;
  right: 10px;
}

.printClose:before {
  content: "×";
  text-indent: 1px;
  text-align: center;
  cursor: pointer;
  width: 1.25em;
  height: 1.25em;
  padding-top: .5em;
  font-family: Helvetica Neue, sans-serif;
  font-size: 2em;
  font-weight: 100;
  line-height: 1px;
  display: block;
  overflow: hidden;
}

.AcsesReceiverCommunicationLog {
  cursor: pointer;
  background-color: #f9fafb;
}

.AcsesReceiverCommunicationLog .DetailsCards-container {
  padding: 11px 21px;
}

.AcsesReceiverCommunicationLog .column {
  padding-left: 0 !important;
}

.header.AcsesReceiverCommunicationLogHeader {
  justify-content: space-between;
  padding: 25px !important;
}

.header.AcsesReceiverCommunicationLogHeader .header-title {
  align-items: center;
  display: flex;
}

.header.AcsesReceiverCommunicationLogHeader .header-title div {
  margin: 5px 0 0 5px;
}

#AcsesReceiverCommunicationLog-Content {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

@media print {
  #AcsesReceiverCommunicationLog-Content {
    padding: 1rem;
  }
}

#AcsesReceiverCommunicationLog-Content .ui.secondary.menu {
  width: 100%;
  display: table;
}

#AcsesReceiverCommunicationLog-Content .ui.secondary.menu a.item {
  display: inline-block;
}

#AcsesReceiverCommunicationLog-Content .acses-comm-section-container {
  border: 2px solid #bbc2c6bf;
  margin: 1rem 0;
}

#AcsesReceiverCommunicationLog-Content .acses-comm-section-container .ui.grid {
  margin: 0;
}

#AcsesReceiverCommunicationLog-Content .acses-comm-section-container .column {
  padding-left: 1em !important;
}

#AcsesReceiverCommunicationLog-Content .acses-comm-section-container .event-info-rows {
  margin-top: 5px;
}

#AcsesReceiverCommunicationLog-Content .acses-comm-section-container .section-rows {
  margin: 10px 0;
  padding: 0 0 0 1em;
}

#AcsesReceiverCommunicationLog-Content .acses-comm-section-container .section-rows .column {
  padding-left: 0 !important;
}

#AcsesReceiverCommunicationLog-Content .acses-comm-section-container .services-header, #AcsesReceiverCommunicationLog-Content .acses-comm-section-container .service {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

#AcsesReceiverCommunicationLog-Content .acses-comm-section-container .services-header {
  margin-bottom: 20px;
  font-weight: bold;
}

#AcsesReceiverCommunicationLog-Content .acses-comm-section-container .service {
  border-bottom: 1px solid #f3f5f7;
  margin-bottom: .8rem;
  padding-bottom: .8rem;
}

#AcsesReceiverCommunicationLog-Content .acses-comm-section-container .service .service-title-remark-container {
  white-space: normal;
  word-wrap: break-word;
  flex-direction: column;
  width: 88%;
  display: flex;
}

#AcsesReceiverCommunicationLog-Content .acses-comm-section-container .service .service-title-remark-container span:first-child {
  white-space: normal;
  word-wrap: break-word;
  flex: 1;
  font-weight: bold;
}

#AcsesReceiverCommunicationLog-Content .acses-comm-section-container .service .service-price-container {
  white-space: nowrap;
  margin-left: 10px;
}

#AcsesReceiverCommunicationLog-Content .acses-comm-section-container .service:last-child {
  border-bottom: none;
}

#AcsesReceiverCommunicationLog-Content .acses-comm-section-container .agreements-row {
  cursor: pointer;
  align-items: flex-start;
  margin-bottom: 10px;
  display: flex;
}

#AcsesReceiverCommunicationLog-Content .acses-comm-section-container .agreements-row div:first-child {
  margin-right: 10px;
}

#AcsesReceiverCommunicationLog-Content .acses-comm-section-container .signature-img-container {
  background-color: #f3f5f7;
  border: 2px solid #bbc2c6bf;
  margin-left: 1rem;
}

#AcsesReceiverCommunicationLog-Content .acses-comm-section-header {
  background-color: #f3f5f7;
  padding: 1em;
  font-weight: 700;
}

.actions.AcsesReceiverCommunicationLogActions {
  justify-content: flex-end !important;
}

#CommunicationLog-Content {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

@media print {
  #CommunicationLog-Content {
    padding: 1rem;
  }
}

#CommunicationLog-Content .ui.secondary.menu {
  display: table;
  width: 100% !important;
}

#CommunicationLog-Content .ui.secondary.menu a.item {
  display: inline-block;
  padding: 1.2% !important;
}

#CommunicationLog-Content .info-section {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  margin: 1rem 0;
}

#CommunicationLog-Content .info-section:first-child {
  margin-top: 0;
}

#CommunicationLog-Content .info-section .section-header {
  background-color: #f3f5f7;
  padding: 1em;
  font-weight: 700;
}

#CommunicationLog-Content .info-section .section-content .ui.grid {
  margin: 0;
}

#CommunicationLog-Content .info-section .section-content .agreements-label {
  margin-bottom: 4px;
  display: block;
}

#CommunicationLog-Content .info-section .section-content .agreements-label span, #CommunicationLog-Content .info-section .section-content .agreements-label .ui.label {
  cursor: pointer;
}

#CommunicationLog-Content .info-section .section-content .agreements-label .ui.label i.icon {
  margin: auto;
}

#CommunicationLog-Content .info-section .section-content .signature-img {
  background-color: #f3f5f7;
  padding: 17px 15px;
}

#CommunicationLog-Content .info-section .section-content .event-timestamp {
  text-align: right;
}

#CommunicationLog-Content .info-section .section-content .services-header {
  justify-content: space-between;
  margin-bottom: 1.8rem;
  font-weight: 700;
  display: flex;
}

#CommunicationLog-Content .info-section .section-content .service {
  border-bottom: 1px solid #f3f5f7;
  justify-content: space-between;
  margin-bottom: .8rem;
  padding-bottom: .8rem;
  display: flex;
}

#CommunicationLog-Content .info-section .section-content .service .service-title-remark-container {
  white-space: normal;
  word-wrap: break-word;
  flex-direction: column;
  width: 88%;
  display: flex;
}

#CommunicationLog-Content .info-section .section-content .service .service-title-remark-container span:first-child {
  white-space: normal;
  word-wrap: break-word;
  flex: 1;
  font-weight: bold;
}

#CommunicationLog-Content .info-section .section-content .service .service-price-container {
  white-space: nowrap;
  margin-left: 10px;
}

#CommunicationLog-Content .info-section .section-content span.icon-text {
  color: #21ba45;
  font-weight: 700;
}

#CommunicationLog-Content .info-section .section-rows {
  margin-top: .5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

#CommunicationLog-Content .info-section .section-rows > span:not(:first-child), #CommunicationLog-Content .ml-10 {
  margin-left: 10px;
}

.CommunicationLog-Modal.ui.modal > .actions {
  display: flex;
}

.CommunicationLog-Modal.ui.modal > .header {
  justify-content: space-between;
  align-items: center;
  padding: 25px 24px;
  display: flex;
}

.CommunicationLog-Modal.ui.modal .action-btn {
  margin-left: auto;
}

.CommunicationLog-Modal.ui.modal .action-btn:hover {
  color: inherit;
  background-color: #e0e1e2;
}

.CommunicationLog-Modal.ui.modal .CommunicationLog-ModalActions {
  width: 100%;
  display: flex;
}

.CommunicationLog-Modal.ui.modal .CommunicationLog-ModalActions button.ui.button {
  margin-left: auto;
}

.CommunicationLog-Modal.ui.modal .close-icon-container {
  text-align: center;
  cursor: pointer;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  margin-left: 5px;
  line-height: 18px;
  display: inline-flex;
}

.CommunicationLog-Modal.ui.modal .close-icon-container i {
  margin: 0 0 2px;
  font-size: 16px;
}

.CommunicationLog-AgreementModal {
  cursor: pointer;
}

.CommunicationLog-AgreementModal.ui.modal > .header {
  width: 100%;
  padding: 25px 24px;
  display: flex;
}

.CommunicationLog-AgreementModal span {
  margin-right: 15px;
}

.CommunicationLog-button {
  cursor: pointer;
}

.CommunicationLog-button .DetailsCards-container {
  padding: 11px 21px;
}

.CommunicationLog-AgreementModal .header {
  justify-content: space-between;
  display: flex;
}

.CommunicationLogReplacementCar {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  margin: 1rem 0;
}

.CommunicationLogReplacementCar:first-child {
  margin-top: 0;
}

.CommunicationLogReplacementCar .section-header {
  background-color: #f3f5f7;
  padding: 1em;
  font-weight: 700;
}

.CommunicationLogReplacementCar .section-content .ui.grid {
  margin: 0;
}

.CommunicationLogReplacementCar .section-content .event-timestamp {
  text-align: right;
}

.CommunicationLogReplacementCar .section-content span.icon-text {
  color: #21ba45;
  font-weight: 700;
}

.CommunicationLogReplacementCar .section-rows {
  margin-top: .5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.CommunicationLogReplacementCar .section-rows > span:not(:first-child) {
  margin-left: 10px;
}

.Activitylog-filter {
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
  display: flex;
}

.Activitylog-filter label {
  letter-spacing: 0;
  color: #000;
  font-size: 13px;
  font-weight: bold;
  font-family: Lato !important;
}

.Activitylog-filter .ui.selection.dropdown {
  min-width: 124px;
}

.activity-step-icon-color {
  color: #21ba45 !important;
}

.activity-step-icon-color.svg-face-icon {
  display: inline-flex;
}

.activity-step-icon-color.svg-face-icon svg {
  width: 1.1em;
  height: auto;
  margin-right: 5px;
  fill: #21ba45 !important;
}

.bo-icon {
  color: #21ba45;
  margin-right: 1px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  position: relative;
  left: -1px;
}

.activity-appointment-log-type-icon-container {
  align-items: center;
  gap: 7px;
  display: flex;
}

.activity-appointment-log-type-icon-container .customer-owner-icon {
  color: #21ba45;
  font-size: 11px;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions {
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  display: flex;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions p {
  font-size: 12.6px;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions p strong {
  margin-right: 12px;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions p small {
  color: #767676;
  margin-left: 3px;
  font-size: 9px;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: flex-end;
  align-items: center;
  width: fit-content;
  height: 25px;
  display: flex;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container .status-dropdown {
  border-right: none;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container .status-dropdown i.icon.size-m {
  margin-top: -12px;
  font-size: 12px;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container .status-dropdown .menu {
  box-shadow: none;
  display: none;
  border: none !important;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container .status-dropdown .visible.transition {
  margin-top: 2px;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container .status-dropdown .visible.transition div {
  box-shadow: none;
  background: #fff;
  border: 1px solid #e2e2e3;
  display: flex;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container .status-dropdown .visible.transition div i.icon {
  margin-right: 0;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container .status-dropdown .visible.transition div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container .status-dropdown .visible.transition div:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container .action-dropdown {
  border-right: none;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container .action-dropdown i.icon {
  height: auto;
  margin: 0;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container .action-dropdown .menu {
  box-shadow: none;
  display: none;
  border: none !important;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container .action-dropdown .visible.transition {
  width: fit-content;
  margin-top: 2px;
  box-shadow: none !important;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container .action-dropdown .visible.transition :hover {
  background-color: #fafafa;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container .action-dropdown .visible.transition div {
  width: 100%;
  box-shadow: none;
  background-color: #fff;
  border: 1px solid #e2e2e3;
  justify-content: left;
  align-items: center;
  height: 29px;
  font-weight: bold;
  display: flex;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container .action-dropdown .visible.transition div i.icon {
  margin: 10px 10px 10px 0;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container .action-dropdown .visible.transition div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container .action-dropdown .visible.transition div:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container i.icon {
  margin: 0;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container i.icon.pointer {
  cursor: pointer;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container div {
  border-left: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 100%;
  display: flex;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container div:first-child {
  border-left: none;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsHistoryActions .status-container svg {
  height: auto;
  margin: 0;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsTable .ReactTable thead th:last-child {
  text-align: right;
  padding-right: 14px;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsTable .ReactTable .td-action {
  padding-right: 14px;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsTable .ReactTable .header-action-buttons {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsTable .ReactTable .hidden-items-button {
  cursor: pointer;
  color: #fff;
  background-color: #fff;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 25px;
  display: flex;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsTable .ReactTable .hidden-items-button i {
  height: auto;
  margin: 0;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsTable .ReactTable td.text-center {
  text-align: center;
  display: table-cell !important;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsTable .ReactTablePagination {
  justify-content: flex-end;
}

.AppointmentDetails-AdvisedCriticalItemsHistory-AdvisedCriticalItemsTable .ReactTablePagination .pagination-info {
  display: none;
}

.AppointmentDate.isEditable span {
  border-bottom: 1px solid #ccc;
}

.ui.modal.AppointmentDateModal {
  width: auto;
}

.ui.modal.AppointmentDateModal .content {
  flex-direction: column;
  align-items: center;
  padding: 10px 0 0;
  display: flex;
}

.ui.modal.AppointmentDateModal .AppointmentDateModal-heading {
  letter-spacing: 0;
  color: #000000de;
  opacity: 1;
  text-align: center;
  padding: 0 10px 10px;
  font-size: 18px;
  font-weight: bold;
  font-family: Lato !important;
}

.ui.modal.AppointmentDateModal .react-datepicker {
  border: 0;
}

.ui.modal.AppointmentDateModal .react-datepicker__header {
  background-color: #fff;
}

.ui.modal.AppointmentDateModal .react-datepicker__day-names {
  background-color: #f0f0f0;
}

.ui.modal.AppointmentDateModal .react-datepicker__header__dropdown {
  padding: 10px 0;
}

.ui.modal.AppointmentDateModal .react-datepicker__current-month {
  margin-top: -7px;
}

.ui.modal.AppointmentDateModal .react-datepicker__day-name, .ui.modal.AppointmentDateModal .react-datepicker__day, .ui.modal.AppointmentDateModal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}

.ui.modal.AppointmentDateModal .react-datepicker__current-month, .ui.modal.AppointmentDateModal .react-datepicker-time__header {
  font-size: 1.44rem;
}

@media (width <= 400px), (height <= 550px) {
  .ui.modal.AppointmentDateModal .react-datepicker__day-name, .ui.modal.AppointmentDateModal .react-datepicker__day, .ui.modal.AppointmentDateModal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}

.AddUpdateCarNote .add-update-car-note-textare-field {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  width: 100%;
  margin-bottom: 5px;
  padding: 10px;
  display: block;
}

.AddUpdateCarNote .add-update-car-note-textare-field:focus {
  border-color: inherit;
  outline: none;
}

.AddUpdateCarNote .required.field.add-update-car-note-form-field {
  width: 100%;
  margin-bottom: 10px;
  display: block;
}

.AddUpdateCarNote .add-update-car-note-input-field {
  width: 100%;
  display: block;
}

.AddUpdateCarNote .add-update-car-note-input-field input {
  width: 100%;
}

.AddUpdateCarNote .add-update-car-note-checkbox-fields {
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  display: flex;
}

.AddUpdateCarNote .add-update-car-note-checkbox-field {
  text-align: right;
  margin-top: 10px;
  display: block;
}

.AddUpdateCarNote .add-update-car-center-container {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.AddUpdateCarNote .add-update-car-note-phone-options-dropdown {
  width: 50%;
  margin-top: 15px;
}

.AddUpdateCarNote .add-update-car-note-phone-input {
  width: 45%;
  height: 38px;
}

.AddUpdateCarNote .add-car-note-modal-actions {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  display: flex;
}

.AddUpdateCarNote .add-car-note-modal-actions button:first-child {
  margin-right: 5px;
}

.AddUpdateCarNote .update-car-note-modal-actions {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.AddUpdateCarNote .update-car-note-modal-actions div:nth-child(2) button:first-child {
  margin-right: 5px;
}

.AddUpdateCarNote .attachment-uploaded {
  text-align: center;
  border: 1px solid #e2e2e3;
  width: 100%;
  padding: 50px 30px;
  display: block;
}

.AddUpdateCarNote .add-update-car-attachments-container {
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  display: flex;
}

.AddUpdateCarNote .add-update-car-attachments-container i {
  margin-right: 0;
}

.AddUpdateCarNote .add-update-car-attachments-container i:first-child {
  color: gray;
  margin-right: 3px;
  font-size: 14px;
}

.AddUpdateCarNote .add-update-car-attachments-container i:nth-child(2) {
  cursor: pointer;
  color: gray;
  font-size: 14px;
}

.AddUpdateCarNote .add-update-car-attachments-container .attachment-name, .AddUpdateCarNote .attachment-container {
  color: #4183c4;
}

.AddUpdateCarNote .attachment-uploaded-by {
  color: gray;
  margin-right: 3px;
  font-style: italic;
}

.AddUpdateCarNote .attachment-uploaded-date {
  color: gray;
  margin-right: 3px;
}

.AppointmentNotes .appointment-notes-header {
  width: 20%;
  display: flex;
}

.AppointmentNotes .appointment-notes-header .appointment-notes-header-title {
  text-transform: capitalize;
  font-size: 18px;
  font-weight: 600;
}

.AppointmentNotes .appointment-notes-header .appointment-notes-header-title .appointment-notes-chevron-icon {
  cursor: pointer;
  margin-left: 5px;
  font-size: 18px;
}

.AppointmentNotes .car-note-container {
  border-top: 1px solid #e2e2e3;
}

.AppointmentNotes .appointment-notes-content {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  margin-top: 20px;
}

.AppointmentNotes .appointment-notes-content .receptionist-remarks-header {
  width: 20%;
  margin-bottom: 10px;
  display: flex;
}

.AppointmentNotes .appointment-notes-content .receptionist-remarks-header .receptionist-remarks-header-title {
  text-transform: capitalize;
  margin-right: 5px;
  font-size: 14px;
  font-weight: 600;
}

.AppointmentNotes .appointment-notes-content .dms-remarks-header {
  align-items: center;
  width: 20%;
  margin-bottom: 10px;
  display: flex;
}

.AppointmentNotes .appointment-notes-content .dms-remarks-header .dms-remarks-header-title {
  text-transform: capitalize;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 18px;
  font-weight: 600;
}

.AppointmentStatus {
  align-items: center;
  gap: 60px;
  width: fit-content;
  display: flex;
  position: relative;
}

.AppointmentStatus .horizontal-line {
  z-index: -1;
  background-color: #e3e3e4;
  height: 2px;
  position: absolute;
  left: 0;
  right: 0;
}

.AppointmentStatus .bo-icon {
  margin-right: 0;
  font-size: 14px;
  left: 0;
}

.car-mileage-action-container {
  justify-content: flex-end !important;
}

.car-mileage-input {
  width: 100%;
}

.CarMileageModal__asterisk {
  color: #ff0202;
}

.CarMileageModal__title {
  margin-bottom: 5px;
}

.CarDetails {
  gap: 20px;
  margin-top: 9px;
  display: flex;
}

.CarDetails .car-image-container {
  background-color: #e8e8e8;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 218px;
  max-height: 182px;
  margin-left: 5px;
  display: flex;
}

.CarDetails .car-image-container .car-image {
  border-radius: 4px;
  width: 218px;
  max-height: 182px;
}

.CarDetails .car-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  flex: auto;
}

.CarDetails .car-container .car-header {
  background-color: #f9fafb;
  border-top: 1px solid #e2e2e3;
  border-bottom: 1px solid #e2e2e3;
  justify-content: space-between;
  align-items: center;
  height: 36px;
  padding: 0 17px;
  display: flex;
}

.CarDetails .car-container .car-header .car-items {
  align-items: center;
  gap: 8px;
  display: flex;
}

.CarDetails .car-container .car-header .car-items i.icon {
  font-size: 16px;
  margin-top: -5px !important;
  margin-right: -2px !important;
}

.CarDetails .car-container .car-header .car-items p {
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: bold;
}

.CarDetails .car-container .car-header .car-items .button {
  height: 25px;
  padding: 0 12px;
  font-size: 11px;
  position: relative;
}

.CarDetails .car-container .car-header .car-items .button i.icon {
  font-size: 11px;
  margin-top: -2px !important;
  margin-left: -2px !important;
}

.CarDetails .car-container .car-header .car-items .button i.icon.arrow.rotate {
  padding-left: 5.6px;
  padding-right: 9px;
  margin-top: 0 !important;
}

.CarDetails .car-container .car-header .car-items .button .divider {
  background-color: #e2e2e3;
  width: 1px;
  height: 25px;
  position: absolute;
  top: 0;
  right: 25px;
}

.CarDetails .car-container .car-info {
  justify-content: start;
  gap: 55px;
  padding: 5px 17px;
  display: flex;
}

.CarDetails .car-container .car-info .info-data {
  text-wrap: nowrap;
}

.CarDetails .car-container .car-info .info-data .flex-row {
  align-items: center;
  gap: 19px;
  display: flex;
}

.CarDetails .car-container .car-info .info-data .flex-row .button {
  height: 25px;
  padding: 0 5px;
  font-size: 11px;
  position: relative;
}

.CarDetails .car-container .car-info .info-data .flex-row .button i.icon {
  margin: -2px 0 0 !important;
  font-size: 11px !important;
}

.CarDetails .car-container .car-info .info-data p, .CarDetails .car-container .car-info .info-data > div {
  margin: 0;
  font-size: 14px;
}

.CarDetails .car-container .car-info .info-data i.icon {
  cursor: pointer;
}

.CarDetails .car-container .car-info .info-data .info-wo {
  color: #ff0202;
  background-color: #fef0e7;
  padding: 0 5.5px;
}

.CarDetails .car-container .car-info .info-data .info-link {
  font-weight: 600;
  text-decoration: none;
}

.CarDetails .car-container .car-info .info-data .info-link:hover {
  color: #21ba45;
  text-decoration: none;
}

.CarDetails .car-container .car-info .info-data.AppointmentDate .react-datepicker__input-container {
  align-items: center;
  height: 24px;
  display: flex;
}

.CarDetails .car-container .car-info .info-data.AppointmentDate .react-datepicker__input-container input {
  color: #414141;
  max-width: 90px;
  text-shadow: none;
  border-bottom: none;
  padding: 0;
  font: bold 14px / 24px Lato;
  position: relative;
  bottom: 1px;
}

.CarDetails .car-container .car-info .info-data.AppointmentDate .extendedCarDetailsDatePicker input {
  width: 100%;
  max-width: 135px;
}

.CarDetails .car-container .car-info .more-info {
  cursor: pointer;
  color: #21ba45;
  align-items: center;
  display: none;
}

.CarDetails .car-container .car-info .more-info i {
  position: relative;
  bottom: 3px;
}

@media (width <= 1850px) {
  .CarDetails .car-container .car-info .more-info {
    margin-left: auto;
    display: flex;
  }
}

.CarDetails .car-container .customer-details-info {
  justify-content: space-between;
  align-items: center;
  gap: 50px;
  padding: 5px 17px;
  display: flex;
}

.CarDetails .car-container .customer-details-info .info-data-container {
  display: block;
}

.CarDetails .car-container .customer-details-info .info-data-container div {
  margin-right: 5px;
  display: inline-block;
}

.CarDetails .car-container .customer-details-info .customer-owner-container {
  align-items: center;
  display: flex;
}

.CarDetails .car-container .customer-details-info .customer-owner-name-text {
  margin-left: 35px;
}

.CarDetails .car-container .customer-details-info .customer-owner-name-placeholder {
  color: #bfbfbfde;
}

.CarDetails .car-container .customer-details-info .customer-owner-icon {
  color: #2185d0;
  border: 1px solid #2185d0;
  border-radius: 360px;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  font-size: 11px;
  font-weight: normal;
  display: flex;
  position: absolute;
}

.CarDetails .car-container .customer-details-info .info-data {
  margin-right: 10px;
}

.CarDetails .car-container .customer-details-info .info-data p, .CarDetails .car-container .customer-details-info .info-data > div {
  color: #414141;
}

.CarDetails .car-container .customer-details-info .info-data p div, .CarDetails .car-container .customer-details-info .info-data > div div {
  cursor: pointer;
  margin-left: 10px;
  font-size: 15px;
  font-weight: bold;
  display: inline-block;
}

.CarDetails .car-container .customer-details-info .customer-checked-in {
  color: #2d85d0;
  background-color: #e1ecf3;
  border-radius: 4px;
  padding: 0 8px;
}

.CarDetails .car-container .customer-details-info .warranty-signature-missing {
  color: #ff0202;
  background-color: #fef0e7;
  border-radius: 4px;
  padding: 0 8px;
}

.CarDetails .car-info-value {
  text-align: left;
  text-wrap: nowrap;
  letter-spacing: 0;
  color: #414141;
  font: bold 15px / 24px Lato;
}

.CarDetails .display-car-info-container {
  display: none;
}

@media (width >= 1851px) {
  .CarDetails .display-car-info-container {
    display: flex;
  }
}

.CarDetails .car-make-max-width-column {
  max-width: 100px;
}

.CarDetails .car-model-max-width-column {
  max-width: 200px;
}

.CarDetails .ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.CarDetails__mode-engine-container {
  flex-direction: row;
  gap: 36px;
  width: fit-content;
  padding: 1px 8px;
  display: flex;
}

.CarDetails__mode-engine-container .info-column {
  flex-direction: column;
  display: flex;
}

.CarDetails__mode-engine-container .info-column p:first-child {
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.CarDetails__mode-engine-container .info-column .car-info-value {
  text-align: left;
  letter-spacing: 0;
  color: #414141;
  font: bold 14px / 24px Lato;
}

.ui.basic.label.CustomerInfo {
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 25px;
  display: inline-flex !important;
}

.appointment-info {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  display: flex;
}

.appointment-info__column {
  align-items: baseline;
  gap: 1px;
  min-width: fit-content;
  display: flex;
}

.appointment-info__label {
  color: #21ba45;
  font-weight: bold;
}

.appointment-info .hashtag, .appointment-info .clock, .appointment-info .calendar {
  color: #21ba45;
}

.DeskCommunicationLog {
  cursor: pointer;
  background-color: #f9fafb;
}

.DeskCommunicationLog .DetailsCards-container {
  padding: 11px 21px;
}

.DeskCommunicationLog .column {
  padding-left: 0 !important;
}

.ui.modal.transition.visible.active.CommunicationLogs .header.CommunicationLogs-Header {
  justify-content: space-between;
  padding: 25px;
}

.ui.modal.transition.visible.active.CommunicationLogs .header.CommunicationLogs-Header .header-title {
  display: flex;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

@media print {
  .ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content {
    padding: 1rem;
  }
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .ui.secondary.menu {
  width: 100%;
  display: table;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .ui.secondary.menu a.item {
  display: inline-block;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  margin: 1rem 0;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container .ui.grid {
  margin: 0;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container .column {
  padding-left: 1em;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container .event-info-rows {
  margin-top: 5px;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container .event-timestamp {
  text-align: right;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container .section-rows {
  margin: 10px 0;
  padding: 0 0 0 1em;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container .section-rows .column {
  padding-left: 0;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container .services-header, .ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container .service {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container .services-header {
  margin-bottom: 20px;
  font-weight: bold;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container .service {
  border-bottom: 1px solid #f3f5f7;
  margin-bottom: .8rem;
  padding-bottom: .8rem;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container .service .service-title-remark-container {
  white-space: normal;
  word-wrap: break-word;
  flex-direction: column;
  width: 88%;
  display: flex;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container .service .service-title-remark-container span:first-child {
  white-space: normal;
  word-wrap: break-word;
  flex: 1;
  font-weight: bold;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container .service .service-price-container {
  white-space: nowrap;
  margin-left: 10px;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container .service:last-child {
  border-bottom: none;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container .agreements-row {
  cursor: pointer;
  align-items: flex-start;
  margin-bottom: 10px;
  display: flex;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container .agreements-row div:first-child {
  margin-right: 10px;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-container .signature-img-container {
  background-color: #f3f5f7;
  border: 2px solid #bbc2c6bf;
  margin-left: 1rem;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .desk-comm-section-header {
  background-color: #f3f5f7;
  padding: 1em;
  font-weight: 700;
}

.ui.modal.transition.visible.active.CommunicationLogs .header.CommunicationLogsHeader {
  justify-content: space-between;
  padding: 25px;
}

.ui.modal.transition.visible.active.CommunicationLogs .header.CommunicationLogsHeader .header-title {
  align-items: center;
  display: flex;
}

.ui.modal.transition.visible.active.CommunicationLogs .header.CommunicationLogsHeader .header-title div {
  margin: 5px 0 0 5px;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .kiosk-comm-section-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  margin: 1rem 0;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .kiosk-comm-section-container .ui.grid {
  margin: 0;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .kiosk-comm-section-container .column {
  padding-left: 1em;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .kiosk-comm-section-container .event-info-rows {
  margin-top: 5px;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .kiosk-comm-section-container .section-rows {
  margin: 10px 0;
  padding: 0 0 0 1em;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .kiosk-comm-section-container .section-rows .column {
  padding-left: 0;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .kiosk-comm-section-container .services-header, .ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .kiosk-comm-section-container .service {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .kiosk-comm-section-container .services-header {
  margin-bottom: 20px;
  font-weight: bold;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .kiosk-comm-section-container .service {
  border-bottom: 1px solid #f3f5f7;
  margin-bottom: .8rem;
  padding-bottom: .8rem;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .kiosk-comm-section-container .service:last-child {
  border-bottom: none;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .kiosk-comm-section-container .agreements-row {
  cursor: pointer;
  align-items: flex-start;
  margin-bottom: 10px;
  display: flex;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .kiosk-comm-section-container .agreements-row div:first-child {
  margin-right: 10px;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .kiosk-comm-section-container .signature-img-container {
  background-color: #f3f5f7;
  border: 2px solid #bbc2c6bf;
  margin-left: 1rem;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .kiosk-comm-section-container .icon-text {
  color: #21ba45;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .kiosk-comm-section-container:first-child {
  margin: 0 0 1rem;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .kiosk-comm-section-header {
  background-color: #f3f5f7;
  padding: 1em;
  font-weight: 700;
}

.ui.modal.transition.visible.active.CommunicationLogs #CommunicationLogs-Content .event-timestamp {
  text-align: right;
}

.CopyContent.container {
  align-items: "center";
  flex-direction: row;
  display: flex;
}

.CopyContent.icon {
  cursor: pointer;
  color: #21ba45;
  margin-right: 5px;
}

.CheckInCustomerInfo {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  margin: 15px 0 0;
  padding: 9px 13px;
}

.CheckInCustomerInfo .address-card-label {
  color: #fff;
  background-color: #c11;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  margin-right: 12px;
  display: inline-flex;
}

.CheckInCustomerInfo .address-card-label i {
  color: #fff;
}

.CheckInCustomerInfo .label:nth-child(2), .CheckInCustomerInfo .label:nth-child(3) {
  margin-right: 10px;
}

.checkin-price {
  margin-right: 87px !important;
}

.checkin-price.placeholder {
  padding-right: 32px;
}

.notificationEmailActive {
  background-color: #21ba45;
}

.changeHandleStatus {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  display: flex;
}

.changeHandleStatus i {
  margin-top: -10px !important;
}

.mailTriggerWrapper i {
  color: #fff;
  top: 2px;
}

.mailTriggerWrapper i.icon {
  color: #fff;
}

.CustomerActions .popup-heading {
  letter-spacing: 0;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  font-family: Lato !important;
}

.CustomerActions .CustomerActions-items {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
}

.CustomerActions .CustomerActions-items:first-child {
  margin-top: 15px;
}

.CustomerActions {
  flex-direction: column;
  display: flex;
}

.CustomerActions .actions-container {
  height: fit-content;
  min-height: 44px;
  margin-top: 0 !important;
}

.CustomerActions .actions-container:not(:last-child) {
  border-bottom: 1px solid #e2e2e3;
}

.CustomerActions .actions-container .icon-container {
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  display: flex;
}

.CustomerActions .actions-container .icon-container i.icon {
  color: #fff;
  margin-top: -13px;
  margin-left: 3px;
  font-size: 10px;
}

.CustomerActions .actions-container .icon-container.skyblue {
  background-color: #78b3e5;
}

.CustomerActions .actions-container .icon-container.blue {
  background-color: #5279d1;
}

.CustomerActions .actions-container .icon-container.purple {
  background-color: #a333c8;
}

.CustomerActions .actions-container .icon-container.green {
  background-color: #21ba45;
}

.CustomerActions .actions-container .icon-container.disabled {
  background-color: gray;
}

.CustomerActions .actions-container .heading, .CustomerActions .actions-container .title {
  color: #000c;
  margin-left: 8px;
  font-size: 12.6px;
  font-weight: 700;
}

.CustomerActions .actions-container .description {
  color: #000c;
  margin-left: 5px;
  font-size: 12.6px;
}

.CustomerActions .actions-container .end-grid {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  display: flex;
}

.CustomerActions .actions-container .end-grid .status-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  align-items: center;
  height: 27px;
  display: flex;
}

.CustomerActions .actions-container .end-grid .status-container p {
  font-size: 12.6px;
}

.CustomerActions .actions-container .end-grid .status-container p strong {
  margin-right: 12px;
}

.CustomerActions .actions-container .end-grid .status-container p small {
  color: #767676;
  margin-left: 3px;
  font-size: 9px;
}

.CustomerActions .actions-container .end-grid .status-container .status-dropdown {
  border-right: none;
}

.CustomerActions .actions-container .end-grid .status-container .status-dropdown i.icon.size-m {
  margin-top: -12px;
  font-size: 12px;
}

.CustomerActions .actions-container .end-grid .status-container .status-dropdown .menu {
  box-shadow: none;
  display: none;
  border: none !important;
}

.CustomerActions .actions-container .end-grid .status-container .status-dropdown .visible.transition {
  margin-top: 2px;
}

.CustomerActions .actions-container .end-grid .status-container .status-dropdown .visible.transition div {
  box-shadow: none;
  background: #fff;
  border: 1px solid #e2e2e3;
}

.CustomerActions .actions-container .end-grid .status-container .status-dropdown .visible.transition div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.CustomerActions .actions-container .end-grid .status-container .status-dropdown .visible.transition div:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.CustomerActions .actions-container .end-grid .status-container .action-dropdown {
  border-right: none;
}

.CustomerActions .actions-container .end-grid .status-container .action-dropdown i.icon {
  margin-top: -8px;
}

.CustomerActions .actions-container .end-grid .status-container .action-dropdown .menu {
  box-shadow: none;
  display: none;
  border: none !important;
}

.CustomerActions .actions-container .end-grid .status-container .action-dropdown .visible.transition {
  width: fit-content;
  margin-top: 2px;
  box-shadow: none !important;
}

.CustomerActions .actions-container .end-grid .status-container .action-dropdown .visible.transition :hover {
  background-color: #fafafa;
}

.CustomerActions .actions-container .end-grid .status-container .action-dropdown .visible.transition div {
  width: 100%;
  box-shadow: none;
  background-color: #fff;
  border: 1px solid #e2e2e3;
  justify-content: left;
  align-items: center;
  height: 29px;
  font-weight: bold;
  display: flex;
}

.CustomerActions .actions-container .end-grid .status-container .action-dropdown .visible.transition div i.icon {
  margin: 10px 10px 10px 0;
}

.CustomerActions .actions-container .end-grid .status-container .action-dropdown .visible.transition div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.CustomerActions .actions-container .end-grid .status-container .action-dropdown .visible.transition div:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.CustomerActions .actions-container .end-grid .status-container i.icon {
  margin: 0;
}

.CustomerActions .actions-container .end-grid .status-container i.icon.pointer {
  cursor: pointer;
}

.CustomerActions .actions-container .end-grid .status-container div {
  border-left: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 100%;
  display: flex;
}

.CustomerActions .actions-container .end-grid .status-container div:first-child {
  border-left: none;
}

.CustomerActions .grid {
  margin: 0;
}

.CustomerActions .grid .column:not(.row) {
  align-items: center;
  padding: 9px 13px;
  display: flex;
}

.InfoPopup .InfoTitle {
  letter-spacing: 0;
  color: #000;
  align-items: center;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  font-family: Lato !important;
}

.InfoPopup .InfoTitle svg {
  margin-right: 7px;
  position: relative;
  bottom: 1px;
}

.InfoPopup .InfoDescription, .InfoPopup .InfoContent {
  letter-spacing: 0;
  color: #000;
  font-size: 12.6px;
  font-weight: normal;
  font-family: Lato !important;
}

.InfoPopup .InfoDescription span, .InfoPopup .InfoContent span {
  text-transform: capitalize;
}

.InfoPopup .InfoContent {
  margin-top: 7px;
}

.image-action {
  cursor: pointer;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 32px;
  height: 27px;
  margin-right: 6px;
  display: flex;
}

.image-action i.icon {
  margin: 2.4px 0 0;
  font-size: .75em;
}

.image-action small {
  color: #767676;
  font-size: 9px;
}

.customer-communication-icon {
  border: none !important;
  align-items: center !important;
  gap: 10px !important;
  height: 23px !important;
  display: flex !important;
}

.customer-communication-icon.border {
  border-right: 1px solid #22242626 !important;
}

.customer-communication-icon i.icon.envelope {
  position: relative;
  left: 1px !important;
}

.external-link-btn {
  border: none !important;
  height: 23px !important;
}

.CustomerCommunicationInterventions-section {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  margin-top: 14px;
}

.CustomerCommunicationInterventions-section p {
  margin: 0;
}

.CustomerCommunicationInterventions-section-group:not(:first-child) {
  border-top: 1px solid #e2e2e3;
}

.CustomerCommunicationInterventions-section-group:empty + .CustomerCommunicationModal-section-group {
  border: none;
}

.CustomerCommunicationInterventions-section-group:empty {
  display: none;
}

.CustomerCommunicationInterventions-section-group_header {
  background-color: #f9fafb;
  border-bottom: 1px solid #e2e2e3;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 14px;
  display: flex;
}

.CustomerCommunicationInterventions-section-group_header p {
  font-size: 14px;
  font-weight: bold;
}

.CustomerCommunicationInterventions-section-group_header i {
  height: auto;
}

.CustomerCommunicationInterventions-section-group .Intervention {
  border-bottom: 1px solid #e2e2e3;
  padding: 0 14px;
}

.CustomerCommunicationInterventions-section-group .Intervention .ui.label {
  height: 25px;
}

.CustomerCommunicationInterventions-section-group .Intervention .ui.grid .column:first-child {
  padding-left: 14px;
}

.CustomerCommunicationInterventions-section-group .Intervention .title-container {
  align-items: center;
  gap: 10px;
  min-height: 44px;
  display: flex;
}

.CustomerCommunicationInterventions-section-group .Intervention .title-container p {
  font-size: 12.6px;
  font-weight: bold;
  display: inline-block;
}

.CustomerCommunicationInterventions-section-group .Intervention .title-container .dmsIcon {
  margin-right: 10px;
}

.CustomerCommunicationInterventions-section-group .Intervention .title-container i {
  font-size: 10px;
}

.CustomerCommunicationInterventions-section-group .Intervention .title-container i:not(:last-of-type) {
  margin-right: 10px;
}

.CustomerCommunicationInterventions-section-group .Intervention .title-container .title-container-button {
  cursor: default;
}

.CustomerCommunicationInterventions-section-group .Intervention .column-container {
  align-items: center;
  height: 44px;
  display: flex;
}

.CustomerCommunicationInterventions-section-group .Intervention .column-container .ui.label {
  cursor: pointer;
}

.CustomerCommunicationInterventions-section-group .Intervention .column-container .ui.label.green {
  background-color: #48913d;
}

.CustomerCommunicationInterventions-section-group .Intervention .column-container .ui.label.blue {
  background-color: #5279d1;
}

.CustomerCommunicationInterventions-section-group .Intervention .column-container .ui.label.red {
  background-color: #ee3113;
}

.CustomerCommunicationInterventions-section-group .Intervention .column-container .ui.label.teal {
  background-color: #02b5ad;
}

.CustomerCommunicationInterventions-section-group .Intervention .column-container .ui.label.skyblue {
  color: #fff;
  background-color: #21a1d0;
}

.CustomerCommunicationInterventions-section-group .Intervention .column-container.gap {
  gap: 6px;
  margin-right: 20px;
}

.CustomerCommunicationInterventions-section-group .Intervention .column-container.float-right {
  justify-content: flex-end;
}

.CustomerCommunicationInterventions-section-group .Intervention .question-status-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  min-width: 32px;
  height: 26px;
  display: flex;
}

.CustomerCommunicationInterventions-section-group .Intervention .question-status-container .view-only i.icon {
  font-size: 13px;
  position: relative;
  left: 1px;
}

.CustomerCommunicationInterventions-section-group .Intervention .question-status-container .visible.menu.transition {
  margin-top: 2px;
}

.CustomerCommunicationInterventions-section-group .Intervention .question-status-container .visible.menu.transition > .item {
  border-top: 1px solid #e2e2e3;
  border-bottom: 1px solid #e2e2e3;
  padding: 10px !important;
}

.CustomerCommunicationInterventions-section-group .Intervention .question-status-container .visible.menu.transition > .item > i.icon {
  margin-right: 0;
  font-size: 12px;
}

.CustomerCommunicationInterventions-section-group .Intervention .question-status-container .visible.menu.transition > .item:first-child {
  border-top: none;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.CustomerCommunicationInterventions-section-group .Intervention .question-status-container .visible.menu.transition > .item:last-child {
  border-bottom: none;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.CustomerCommunicationInterventions-section-group .Intervention .question-status-container .status-dropdown > div > i.icon {
  font-size: 12px;
  position: relative;
  left: 3px;
}

.CustomerCommunicationInterventions-section-group .Intervention .question-status-container .status-dropdown > div > i.icon.caret.down {
  font-size: 6px;
  position: relative;
  top: -2px;
}

.CustomerCommunicationInterventions-section-group .Intervention .status-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  align-items: center;
  height: 27px;
  display: flex;
}

.CustomerCommunicationInterventions-section-group .Intervention .status-container i.icon {
  margin: 0;
  font-size: small;
}

.CustomerCommunicationInterventions-section-group .Intervention .status-container i.icon.pointer {
  cursor: pointer;
}

.CustomerCommunicationInterventions-section-group .Intervention .status-container div {
  border-right: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 100%;
  display: flex;
}

.CustomerCommunicationInterventions-section-group .Intervention .status-container div i.icon {
  cursor: pointer;
}

.CustomerCommunicationInterventions-section-group .Intervention .status-container div:last-child {
  border-right: none;
}

.CustomerCommunicationInterventions-section-group .Intervention .tabs .tab {
  cursor: pointer;
  align-items: center;
  gap: 10px;
  display: flex;
}

.CustomerCommunicationInterventions-section-group .Intervention .tabs .tab.green.active {
  color: #21ba45;
}

.CustomerCommunicationInterventions-section-group .Intervention .tabs .tab.darkgreen.active {
  color: #48913d;
}

.CustomerCommunicationInterventions-section-group .Intervention .tabs .tab.red.active {
  color: #ee3113;
}

.CustomerCommunicationInterventions-section-group .Intervention .tabs .tab.blue.active {
  color: #5279d1;
}

.CustomerCommunicationInterventions-section-group .Intervention .tabs .tab.teal.active {
  color: #02b5ad;
}

.CustomerCommunicationInterventions-section-group .Intervention .tabs .tab.skyblue.active {
  color: #21a1d0;
}

.CustomerCommunicationInterventions-section-group .Intervention .tabs i.icon.xmark {
  color: #000c;
}

.CustomerCommunicationInterventions-section-group .Intervention .tabs .ui.tabular.menu {
  border-bottom: none;
  height: 36px;
  margin-bottom: 0;
}

.CustomerCommunicationInterventions-section-group .Intervention .tabs-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  min-height: 50px;
  margin-bottom: 10px;
  padding: 10px 0;
}

.CustomerCommunicationInterventions-section-group .Intervention .tabs-container .ui.form {
  padding: 0 13.5px;
}

.CustomerCommunicationInterventions-section-group .Intervention .tabs-container .ui.form .ui.grid {
  margin-top: 0;
}

.CustomerCommunicationInterventions-section-group .Intervention .tabs-container .ui.labeled.input > .label:not(.corner) {
  background-color: #f9fafb;
  height: 38px;
}

.CustomerCommunicationInterventions-section-group .Intervention .nodata {
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.CustomerCommunicationInterventions-section-group .Intervention:last-child {
  border-bottom: none;
}

.CustomerCommunicationInterventions-section-group .Interventions .Interventions-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  margin-top: 14px;
}

.CustomerCommunicationInterventions-section-group .InterventionModal .ui.buttons.withdropdown {
  background-color: #f9fafb;
  border: 1px solid #dededf;
  border-radius: 4px;
}

.CustomerCommunicationInterventions-section-group .InterventionModal .ui.buttons.withdropdown .button {
  background-color: inherit;
  padding: 5px 10px 5px 5px;
}

.CustomerCommunicationInterventions-section-group .InterventionModal .ui.buttons.withdropdown .icon.button {
  margin-top: 5px;
}

.CustomerCommunicationInterventions-section-group .InterventionModal .actions {
  justify-content: flex-end !important;
}

.CustomerCommunicationInterventions-section-group .InterventionModal .button.customer {
  height: 38px;
  position: relative;
  bottom: 1px;
}

.CustomerCommunicationInterventions-section-group .InterventionModal .ui.form .fields {
  justify-content: space-between;
  gap: 20px;
  padding: 0 7px;
  display: flex;
}

.CustomerCommunicationInterventions .total-amount-container {
  background-color: #fcfff5;
  border: 1px solid #a8c599;
  border-radius: 4px;
  align-items: center;
  gap: 50px;
  margin-top: 15.7px;
  padding: 10px;
  display: flex;
  justify-content: flex-end !important;
}

.CustomerCommunicationInterventions .total-amount-container p {
  color: #1e561fcc;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  display: inline-flex;
}

.CustomerCommunicationInterventions .total-amount-container p strong {
  color: #1e561f;
  font-size: 18px;
  font-weight: bold;
}

.CustomerCommunicationInterventions_attachment-container {
  flex-direction: column;
  gap: 5px;
  width: 100%;
  margin-top: -20px;
  padding-bottom: 25px;
  display: flex;
}

.mechanic-fixed-status-container {
  position: relative;
}

.mechanic-fixed-status-container .wrench-check-icon {
  font-size: 8px;
  position: absolute;
  bottom: -2px !important;
  right: -1px !important;
}

.TyreReplacements {
  width: 100%;
  margin-top: 14px;
  display: flex;
}

.TyreReplacements-container {
  width: 100%;
}

.TyreReplacements-section {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  width: 100%;
}

.TyreReplacements-section:not(:last-child) {
  margin-bottom: 14px;
}

.TyreReplacements-section-group:not(:first-child) {
  border-top: 1px solid #e2e2e3;
}

.TyreReplacements-section-group .ui.grid .row.header {
  background-color: #f9fafb;
  border: 1px solid #e2e2e3;
  border-top: none;
  flex-wrap: nowrap;
  align-items: center;
  height: 36px;
  padding: 0 7px;
  font-weight: 600;
  border-left: none !important;
  border-right: none !important;
}

.TyreReplacements-section-group_header {
  background-color: #f9fafb;
  border-bottom: 1px solid #e2e2e3;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  display: flex;
}

.TyreReplacements-section-group_header p {
  margin-left: 7px;
  font-size: 14px;
  font-weight: bold;
}

.TyreReplacements-section-group_header i {
  height: auto;
}

.TyreReplacements-section-group .ui.grid {
  width: 100%;
  margin: 0;
}

.TyreReplacements .tyre-position-container {
  align-items: center;
  display: flex;
}

.TyreReplacements .tyre-season-container {
  align-items: center;
  gap: 5px;
  display: flex;
}

.TyreReplacements .tyre-season-container i.icon {
  margin: 0;
  font-size: 16px;
}

.TyreReplacements .tyre-season-container p {
  margin: 0;
  display: inline;
}

.TyreReplacements .-truncated-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
  overflow: hidden;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__row {
  border-bottom: 1px solid #e2e2e3;
  height: 42px;
  border-left: none !important;
  border-right: none !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  padding: 0 7px !important;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__row.is-last {
  border-bottom: none !important;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column {
  justify-content: flex-end !important;
  align-items: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column.-delete-icon {
  color: #767676;
  cursor: pointer;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column.-delete-icon i.icon.trash {
  font-size: 12px;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action p {
  font-size: 12.6px;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action p strong {
  margin-right: 12px;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action p small {
  color: #767676;
  margin-left: 3px;
  font-size: 9px;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: flex-end;
  align-items: center;
  width: fit-content;
  height: 27px;
  display: flex;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .icon-container {
  margin: 0;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container i.icon {
  font-size: 12px;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .status-dropdown {
  border-right: none;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .status-dropdown i.icon {
  font-size: 12px;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .status-dropdown i.icon.tiny {
  font-size: 8px;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .status-dropdown i.icon.size-m {
  margin-top: -12px;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .status-dropdown .menu {
  box-shadow: none;
  display: none;
  border: none !important;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .status-dropdown .visible.transition {
  margin-top: 2px;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .status-dropdown .visible.transition div {
  box-shadow: none;
  background: #fff;
  border: 1px solid #e2e2e3;
  display: flex;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .status-dropdown .visible.transition div i.icon {
  margin-right: 0;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .status-dropdown .visible.transition div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .status-dropdown .visible.transition div:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .action-dropdown {
  border-right: none;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .action-dropdown i.icon {
  margin-top: -8px;
  font-size: 14px;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .action-dropdown .menu {
  box-shadow: none;
  display: none;
  border: none !important;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .action-dropdown .visible.transition {
  width: fit-content;
  margin-top: 2px;
  box-shadow: none !important;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .action-dropdown .visible.transition :hover {
  background-color: #fafafa;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .action-dropdown .visible.transition div {
  width: 100%;
  box-shadow: none;
  background-color: #fff;
  border: 1px solid #e2e2e3;
  justify-content: left;
  align-items: center;
  height: 29px;
  font-weight: bold;
  display: flex;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .action-dropdown .visible.transition div i.icon {
  margin: 10px 10px 10px 0;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .action-dropdown .visible.transition div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container .action-dropdown .visible.transition div:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container i.icon {
  margin: 0;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container i.icon.pointer {
  cursor: pointer;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container div {
  border-left: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 100%;
  display: flex;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column .tyre-action .tyre-container div:first-child {
  border-left: none;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column > .visible-to-customer, .TyreReplacements .CustomerCommunicationTyreTableItem__action-column .delete-icon {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 27px;
  margin-left: 6px;
  display: flex;
}

.TyreReplacements .CustomerCommunicationTyreTableItem__action-column > .visible-to-customer i.icon, .TyreReplacements .CustomerCommunicationTyreTableItem__action-column .delete-icon i.icon, .TyreReplacements .CustomerCommunicationTyreTableItem__action-column > i.icon {
  margin: 0;
  font-size: 13px;
}

.TyreReplacements .CustomerCommunicationTyreTableItem .media-row {
  padding: 5px 10px 20px;
}

.CustomerCommunicationModal .invalid-phone-num {
  margin-top: 5px;
  display: block;
  color: red !important;
}

.CustomerCommunicationModal {
  overflow-x: hidden;
}

.CustomerCommunicationModal-phoneField {
  width: 100%;
}

.CustomerCommunicationModal-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.CustomerCommunicationModal-header h1 {
  color: #000000de;
  margin: 0;
  font-family: Lato;
  font-size: 18px;
  font-weight: bold;
  line-height: 23px;
}

.CustomerCommunicationModal-header span {
  cursor: pointer;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
}

.CustomerCommunicationModal-header span i.icon {
  color: #767676;
  width: unset !important;
  height: unset !important;
  margin: 0 !important;
}

.CustomerCommunicationModal .field {
  align-items: center;
  gap: 10px;
  width: 100%;
  display: flex;
}

.CustomerCommunicationModal .email-field label {
  color: #000c;
  width: 100px;
  font: bold 14px / 15px Lato;
}

.CustomerCommunicationModal .email-field.three, .CustomerCommunicationModal .email-field.two {
  width: 100%;
}

.CustomerCommunicationModal .email-field.two label {
  width: 200px;
}

.CustomerCommunicationModal .email-field.note-field label {
  width: 7%;
}

.CustomerCommunicationModal .email-field.note-field .error input {
  color: #9f3a38;
  background: #fff6f6;
  border-color: #e0b4b4;
}

.CustomerCommunicationModal .DetailsCards-container:not(:first-child) {
  margin-top: 20px;
}

.CustomerCommunicationModal-input-field label {
  color: #000c;
  width: 100%;
  font: bold 14px / 15px Lato;
  max-width: 140px !important;
}

.CustomerCommunicationModal-note-field .error input {
  color: #9f3a38;
  background: #fff6f6;
  border-color: #e0b4b4;
}

.CustomerCommunicationModal-divider {
  background-color: #e2e2e3;
  width: 200%;
  height: 1px;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: -50%;
}

.CustomerCommunicationModal-container {
  background: #fff no-repeat padding-box padding-box;
  border: 1px solid #e0e1e2;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 3px 6px #00000029;
}

.CustomerCommunicationModal-action .inner {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  display: flex;
}

.CustomerCommunicationModal-action .inner .download-btn, .CustomerCommunicationModal-action .inner .save-btn {
  background: #21ba45 no-repeat padding-box padding-box;
  border-radius: 4px;
  height: 36px;
}

.CustomerCommunicationModal-action .inner .download-btn {
  margin-right: 10px;
}

.CustomerCommunicationModal .DetailsCards-container .end {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  width: 100%;
  display: flex;
}

.CustomerCommunicationModal .DetailsCards-container .end p {
  color: #000c;
  margin: 0;
  font-family: Lato;
  font-size: 13px;
  font-weight: normal;
}

.CustomerCommunicationModal .DetailsCards-container.error {
  border-color: #e0b4b4;
}

.CounterTabletModal__content h3 {
  text-align: center;
}

.CounterTabletModal__content .ui.loader:before {
  border-color: #0008 !important;
}

.CounterTabletModal__content .ui.loader:after {
  border-color: #767676 #0000 #0000;
}

.CounterTabletModal__header {
  text-align: right;
  justify-content: space-between;
  display: flex;
  padding-right: 24px !important;
}

.CounterTabletModal__header button.ui.large.basic {
  padding-left: 12px;
  padding-right: 12px;
}

.CounterTabletModal__actions.actions {
  display: flex;
  justify-content: flex-end !important;
}

.DeskCommunicationModal__header {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.DeskCommunicationModal__header button {
  width: 35px;
  margin-right: 20px;
}

.DeskCommunicationModal__header button i.icon {
  margin-top: -4px !important;
}

.DeskCommunicationModal__content .notes-container {
  border-bottom: 1px solid #e2e2e3;
  padding-bottom: 23px;
}

.DeskCommunicationModal__content .notes-container-input {
  flex: 1;
  align-items: center;
  width: 100%;
  margin-bottom: 9px;
  display: inline-flex;
}

.DeskCommunicationModal__content .notes-container-input i.icon {
  font-size: 14px;
  position: relative;
  bottom: 2px;
  margin-right: 10px !important;
}

.DeskCommunicationModal__content .notes-container-input .clickable-input-wrapper {
  cursor: pointer;
  flex: 1;
}

.DeskCommunicationModal__content .notes-container-input .clickable-input-wrapper .ui.input {
  flex: 1;
  width: 100%;
}

.DeskCommunicationModal__content .notes-container-input .clickable-input-wrapper input {
  cursor: pointer;
}

.DeskCommunicationModal__content .notes-container-checkbox {
  align-items: center;
  column-gap: 10px;
  margin-top: 10px;
  font-weight: 700;
  display: inline-flex;
}

.DeskCommunicationModal__content .notes-container-checkbox i.icon {
  color: #a5673f;
  margin-right: 10px;
}

.DeskCommunicationModal__content .interventions-container {
  padding-top: 20px;
}

.DeskCommunicationModal__content .interventions-container .full.end {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  width: 100%;
  display: flex;
}

.DeskCommunicationModal__content .interventions-container .full.end p {
  color: #000c;
  margin: 0;
  font-size: 13px;
  font-weight: normal;
}

.DeskCommunicationModal__actions > button.ui.button.save-btn {
  margin-left: auto;
}

.IndicatorsAction {
  align-items: center;
  gap: 8px;
  height: 25px;
  display: flex;
}

.IndicatorsAction .IndicatorsAction-kiosk-label {
  cursor: pointer;
  align-items: center;
  gap: 10px;
  height: 25px;
  padding: 7.78px;
  display: flex;
  color: #fff !important;
  background-color: #21ba45 !important;
}

.IndicatorsAction .IndicatorsAction-kiosk-label i.icon.tag {
  font-size: 13px;
  margin-top: 0 !important;
}

.IndicatorsAction .IndicatorsAction-kiosk-label span {
  font-size: 12.6px;
}

.IndicatorsAction button.ui {
  height: 25px;
}

.IndicatorsAction .ui.icon.button {
  padding: 0 7px !important;
}

.IndicatorsAction i.icon {
  font-size: 12px;
  margin-top: -2px !important;
  margin-right: -2px !important;
}

.IndicatorsAction p {
  margin: 0;
  font-size: 11px;
  font-weight: bold;
}

.IndicatorsAction .container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 25px;
  padding: 0 10px;
  display: flex;
}

.IndicatorsAction .container .ui.toggle.checkbox input:focus:checked ~ label:before {
  background-color: #21ba45 !important;
}

.IndicatorsAction .container .ui.toggle.checkbox input:focus ~ label:before, .IndicatorsAction .container .ui.toggle.checkbox label:hover:before {
  background-color: #0000000d;
  border: none;
}

.IndicatorsAction .container .dropdown .list-container {
  align-items: baseline;
  gap: 8px;
  display: flex;
  margin-top: -3px !important;
}

.IndicatorsAction .container .dropdown .list-container .yellow-shop {
  color: #cc0 !important;
}

.IndicatorsAction .container .dropdown .menu {
  top: 23px;
  left: -5px;
}

.IndicatorsAction .container i.icon.shopping.cart.yellow-shop {
  color: #cc0 !important;
}

.IndicatorsAction .container .checkbox {
  width: 24px !important;
  height: 11px !important;
  min-height: 11px !important;
}

.IndicatorsAction .container .checkbox.checked label:after {
  left: 13px !important;
}

.IndicatorsAction .container .checkbox label:before {
  width: 24px;
  height: 11px;
}

.IndicatorsAction .container .checkbox label:after {
  width: 11px;
  height: 11px;
}

.IndicatorsAction .dms-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  align-items: center;
  gap: 8.5px;
  padding: 0 8px;
  display: flex;
}

.IndicatorsAction .dms-container strong {
  margin-right: 3px;
}

.IndicatorsAction .dms-container i.icon {
  cursor: pointer;
  margin-top: -12px !important;
}

#car_in_shop_a4_content {
  width: 100% !important;
  margin: 0 !important;
  padding: 25px !important;
}

@page {
}

#car_in_shop_a4_content div {
  text-align: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px !important;
  font-size: 16px !important;
  line-height: 18px !important;
}

#car_in_shop_a4_content .car_in_shop_print_large {
  font-size: 34px !important;
  line-height: 36px !important;
}

#car_in_shop_a4_content .car_in_shop_print_bold {
  font-weight: bold !important;
}

#car_in_shop_label_content {
  width: 62mm !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

@media print {
  #car_in_shop_label_content {
    height: 29mm !important;
  }
}

@media screen {
  #car_in_shop_label_content {
    margin: 25px auto !important;
  }
}

@page {
}

#car_in_shop_label_content div {
  text-align: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 17px !important;
}

@page {
}

@media screen {
  #car_in_shop_keytag_content {
    width: 100% !important;
    margin: 25px auto !important;
    padding: 20px !important;
  }
}

@media print {
  #car_in_shop_keytag_content {
    align-items: center;
    display: flex;
    position: absolute;
    left: 50%;
    overflow: visible;
    transform: translate(-50%);
    width: 109mm !important;
    height: 35mm !important;
    margin: 0 auto !important;
    padding: 25mm 2mm 0 !important;
  }
}

#car_in_shop_keytag_content div {
  text-align: center !important;
  margin: 5px 0 !important;
  padding: 5px !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

@media print {
  #car_in_shop_keytag_content div {
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    display: flex;
    break-inside: avoid !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    text-align: center !important;
    width: 100% !important;
    height: fit-content !important;
    margin: 1mm auto !important;
    padding: 0 0 0 1.5mm !important;
    font-size: 5.5mm !important;
    font-weight: 900 !important;
    line-height: 1.4 !important;
    overflow: hidden !important;
  }

  #car_in_shop_keytag_content .car_in_shop_print_large {
    font-size: 7mm !important;
    font-weight: 900 !important;
  }
}

.ui.modal.IndicatorsActionModal .actions {
  justify-content: flex-end;
  gap: 16px;
  display: flex;
}

.ui.modal.IndicatorsActionModal .actions .button {
  color: #414141;
  margin: 0;
  padding: 0 15px 0 10px;
}

.ui.modal.IndicatorsActionModal .actions .button i.icon {
  margin-right: 20px;
}

.ui.modal.IndicatorsActionModal .actions .button.light {
  color: #414141;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
}

.ui.modal.IndicatorsActionModal .actions .button.light i.icon {
  margin: -4px 0 0 -18px !important;
}

.Intervention {
  border-bottom: 1px solid #e2e2e3;
}

.Intervention .intervention-main {
  cursor: pointer;
  padding: 0 14px;
  margin: 0 !important;
}

.Intervention .intervention-container {
  margin: 0 !important;
  padding: 0 !important;
}

.Intervention .wrench-check-icon {
  position: absolute;
  bottom: 11px;
  right: 7px;
  font-size: .6rem !important;
}

.Intervention .wrench-check-icon:before {
  border: 1px solid #fff;
  border-radius: 50%;
}

.Intervention .ui.label {
  height: 25px;
}

.Intervention .ui.grid .column:first-child {
  padding-left: 12px;
}

.Intervention .title-container {
  align-items: center;
  gap: 10px;
  min-height: 44px;
  display: flex;
}

.Intervention .title-container .title-container-intervention-title, .Intervention .title-container .title-container-intervention-description {
  font-family: Lato;
  font-size: 13px;
  display: inline-block;
}

.Intervention .title-container .title-container-intervention-title-container {
  display: flex;
}

.Intervention .title-container p.title-container-intervention-title {
  white-space: nowrap;
  font-weight: bold;
}

.Intervention .title-container .title-container-button {
  cursor: pointer;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  width: 100%;
  display: flex;
}

.Intervention .title-container i {
  font-size: 9px;
}

.Intervention .title-container i.chevron {
  font-size: 14px;
}

.Intervention .column-container {
  align-items: center;
  height: 44px;
  display: flex;
}

.Intervention .column-container .ui.label {
  cursor: pointer;
}

.Intervention .column-container .ui.label.green {
  background-color: #48913d;
}

.Intervention .column-container .ui.label.blue {
  background-color: #5279d1;
}

.Intervention .column-container .ui.label.red {
  background-color: #ee3113;
}

.Intervention .column-container .ui.label.teal {
  background-color: #02b5ad;
}

.Intervention .column-container .ui.label.skyblue {
  color: #fff;
  background-color: #21a1d0;
}

.Intervention .column-container.gap {
  gap: 3px;
  margin-right: 10px;
}

.Intervention .column-container.float-right {
  justify-content: flex-end;
}

.Intervention .column-container.float-right .paperclip-gap {
  padding-right: 8px;
}

.Intervention .active-connected-checklist-item {
  background-color: #f9fafb;
}

.Intervention .question-status-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  min-width: 32px;
  height: 100%;
  display: flex;
}

.Intervention .question-status-container:hover {
  background-color: #f9fafb;
}

.Intervention .question-status-container .note.sticky.blue.icon {
  color: #5279d1 !important;
}

.Intervention .question-status-container .view-only svg {
  margin: 0;
}

.Intervention .question-status-container .view-only .icon {
  margin: 0;
  font-size: 1rem;
}

.Intervention .question-status-container .visible.menu.transition {
  margin-top: 2px;
}

.Intervention .question-status-container .visible.menu.transition > .item {
  border-top: 1px solid #e2e2e3;
  border-bottom: 1px solid #e2e2e3;
  padding: 10px !important;
}

.Intervention .question-status-container .visible.menu.transition > .item > i.icon {
  margin-right: 0;
  font-size: 12px;
}

.Intervention .question-status-container .visible.menu.transition > .item:first-child {
  border-top: none;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.Intervention .question-status-container .visible.menu.transition > .item:last-child {
  border-bottom: none;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.Intervention .question-status-container .status-dropdown > div > i.icon {
  font-size: 12px;
  position: relative;
  left: 3px;
}

.Intervention .question-status-container .status-dropdown > div > i.icon.caret.down {
  font-size: 6px;
  position: relative;
  top: -2px;
}

.Intervention .status-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  align-items: center;
  height: 27px;
  display: flex;
}

.Intervention .status-container.diagnose-overview-icon {
  margin-right: 6px;
}

.Intervention .status-container i.icon {
  margin: 0;
  font-size: small;
}

.Intervention .status-container i.icon.pointer {
  cursor: pointer;
}

.Intervention .status-container i.icon.plus {
  width: 32px;
  height: 100%;
}

.Intervention .status-container .action-icon-container {
  border-right: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 100%;
  display: flex;
}

.Intervention .status-container div:last-child {
  border-right: none;
}

.Intervention .tabs {
  margin-top: 20px;
  padding: 0 14px;
}

.Intervention .tabs .tab {
  cursor: pointer;
  align-items: center;
  gap: 10px;
  display: flex;
}

.Intervention .tabs .tab.green.active {
  color: #21ba45;
}

.Intervention .tabs .tab.darkgreen.active {
  color: #48913d;
}

.Intervention .tabs .tab.red.active {
  color: #ee3113;
}

.Intervention .tabs .tab.blue.active {
  color: #5279d1;
}

.Intervention .tabs .tab.orange.active {
  color: #ffba39;
}

.Intervention .tabs .tab.teal.active {
  color: #02b5ad;
}

.Intervention .tabs .tab.skyblue.active {
  color: #21a1d0;
}

.Intervention .tabs i.icon.xmark {
  color: #000c;
}

.Intervention .tabs .ui.tabular.menu {
  border-bottom: none;
  height: 36px;
  margin-bottom: 0;
}

.Intervention .tabs-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  min-height: 50px;
  margin-bottom: 10px;
  padding: 10px 0;
}

.Intervention .tabs-container .ui.form {
  padding: 0 13.5px;
}

.Intervention .tabs-container .ui.form .ui.grid {
  margin-top: 0;
}

.Intervention .tabs-container .ui.labeled.input > .label:not(.corner) {
  background-color: #f9fafb;
  height: 38px;
}

.Intervention .nodata {
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.Intervention .snooze-intervention-action .action-dropdown .visible.transition {
  box-shadow: none !important;
  border: none !important;
}

.Intervention .snooze-intervention-action .action-dropdown .visible.transition :hover {
  background-color: #fafafa;
}

.Intervention .snooze-intervention-action .action-dropdown .visible.transition div {
  width: 100%;
  box-shadow: none;
  background-color: #fff;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: left;
  align-items: center;
  height: 29px;
  font-weight: bold;
  display: flex;
}

.Intervention .snooze-intervention-action .action-dropdown .visible.transition div:first-child {
  border-top-width: 1px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.Intervention:last-child {
  border-bottom: none;
}

.Interventions .Interventions-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  margin-top: 14px;
}

.Interventions .total-amount-container {
  background-color: #fcfff5;
  border: 1px solid #a8c599;
  border-radius: 4px;
  align-content: center;
  height: 44px;
  margin: 15.7px 0 0;
  display: flex;
}

.Interventions .total-amount-container div.total-amount.column {
  padding-right: 0;
}

.Interventions .total-amount-container p {
  color: #1e561fcc;
  float: right;
  font-size: 14px;
}

.Interventions .total-amount-container p strong {
  color: #1e561f;
  font-weight: bold;
}

.InterventionModal .ui.buttons.withdropdown {
  background-color: #f9fafb;
  border: 1px solid #dededf;
  border-radius: 4px;
}

.InterventionModal .ui.buttons.withdropdown .button {
  background-color: inherit;
  padding: 5px 10px 5px 5px;
}

.InterventionModal .ui.buttons.withdropdown .icon.button {
  margin-top: 5px;
}

.InterventionModal .actions {
  justify-content: space-between;
  align-items: center;
}

.InterventionModal .button.customer {
  height: 38px;
  position: relative;
  bottom: 1px;
}

.InterventionModal .ui.form .fields {
  justify-content: space-between;
  gap: 20px;
  padding: 0 7px;
  display: flex;
}

.checklist-label {
  color: #fff !important;
  background-color: #21ba45 !important;
}

.not-fixed-wrench {
  color: #ff0202;
}

.KeylockerCommunicationLog {
  cursor: pointer;
  background-color: #f9fafb;
}

.KeylockerCommunicationLog .DetailsCards-container {
  padding: 11px 21px;
}

.KeylockerCommunicationLog .column {
  padding-left: 0 !important;
}

.header.KeylockerCommunicationLogHeader {
  justify-content: space-between;
  padding: 25px !important;
}

.header.KeylockerCommunicationLogHeader .header-title {
  align-items: center;
  display: flex;
}

.header.KeylockerCommunicationLogHeader .header-title div {
  margin: 5px 0 0 5px;
}

.KeylockerCommunicationLogContent {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.KeylockerCommunicationLogContent .keylocker-comm-section-container {
  border: 2px solid #bbc2c6bf;
  margin: 1rem 0;
}

.KeylockerCommunicationLogContent .keylocker-comm-section-container .ui.grid {
  margin: 0;
}

.KeylockerCommunicationLogContent .keylocker-comm-section-container .column {
  padding-left: 1em !important;
}

.KeylockerCommunicationLogContent .keylocker-comm-section-container .event-info-rows {
  margin-top: 5px;
}

.KeylockerCommunicationLogContent .keylocker-comm-section-container .section-rows {
  margin: 10px 0;
  padding: 0 0 0 1em;
}

.KeylockerCommunicationLogContent .keylocker-comm-section-container .section-rows .column {
  padding-left: 0 !important;
}

.KeylockerCommunicationLogContent .keylocker-comm-section-container .services-header, .KeylockerCommunicationLogContent .keylocker-comm-section-container .service {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.KeylockerCommunicationLogContent .keylocker-comm-section-container .services-header {
  margin-bottom: 20px;
  font-weight: bold;
}

.KeylockerCommunicationLogContent .keylocker-comm-section-container .service {
  border-bottom: 1px solid #f3f5f7;
  margin-bottom: .8rem;
  padding-bottom: .8rem;
}

.KeylockerCommunicationLogContent .keylocker-comm-section-container .service:last-child {
  border-bottom: none;
}

.KeylockerCommunicationLogContent .keylocker-comm-section-container .agreements-row {
  cursor: pointer;
  align-items: flex-start;
  margin-bottom: 10px;
  display: flex;
}

.KeylockerCommunicationLogContent .keylocker-comm-section-container .agreements-row div:first-child {
  margin-right: 10px;
}

.KeylockerCommunicationLogContent .keylocker-comm-section-container .signature-img-container {
  background-color: #f3f5f7;
  border: 2px solid #bbc2c6bf;
  margin-left: 1rem;
}

.KeylockerCommunicationLogContent .keylocker-comm-section-container .event-timestamp {
  text-align: right;
}

.KeylockerCommunicationLogContent .keylocker-comm-section-container .event-info-rows > span:not(:first-child) {
  margin-left: 10px;
}

.KeylockerCommunicationLogContent .keylocker-comm-section-container:first-child {
  margin: 0 0 1rem;
}

.KeylockerCommunicationLogContent .keylocker-comm-section-header {
  background-color: #f3f5f7;
  padding: 1em;
  font-weight: 700;
}

.actions.KeylockerCommunicationLogActions {
  justify-content: flex-end !important;
}

.KioskCommunicationLog {
  cursor: pointer;
  background-color: #f9fafb;
}

.KioskCommunicationLog .DetailsCards-container {
  padding: 11px 21px;
}

.KioskCommunicationLog .column {
  padding-left: 0 !important;
}

.actions.KioskCommunicationLogActions {
  justify-content: flex-end !important;
}

.kiosk-comm-answered-event {
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  display: flex;
}

.Logs p {
  margin: 0;
}

.Logs table tbody tr td {
  vertical-align: baseline;
  position: relative;
}

.Logs table tbody tr td div {
  position: absolute;
  top: 7px;
}

.Logs table tbody tr td .description {
  position: unset;
  word-wrap: break-word;
  width: 500px;
  margin: 7px 0;
}

.Logs .actions {
  justify-content: flex-end !important;
}

.Logs .car-check {
  align-items: flex-end;
  gap: 10px;
  display: flex;
}

.Logs .attachments-list {
  word-wrap: break-word;
  flex-direction: column;
  gap: 15px;
  display: flex;
}

.Logs .logs-title {
  justify-content: space-between;
  align-items: center;
  display: flex;
  padding-right: 25px !important;
}

.Logs .logs-title .ui.small.button {
  justify-content: center;
  align-items: center;
  padding: 0;
  line-height: 18px;
  display: flex;
}

.Logs .logs-title .ui.small.button i.icon {
  padding: 0;
  font-size: 16px;
  margin: 0 !important;
}

.Logs .logs-title .ui.small.button.-appointment-status {
  width: 36px;
  height: 36px;
}

.Logs .log-modal-title {
  font-size: 18px;
}

.OCW {
  color: #000000de !important;
}

.OCW .OCW-label {
  margin-right: 2px;
}

.OCW .OCW-icon {
  margin-right: 10px;
  padding-right: 20px;
}

.OCW .red-ocw-button {
  color: #000000de !important;
  background-color: #fef0e7 !important;
  border: 1px solid #ff0202 !important;
}

.OCW .grey-ocw-button {
  cursor: default;
  background-color: #e2e2e2;
  border: 1px solid #e2e2e2;
  color: #000000de !important;
}

.OCW .grey-ocw-button:hover, .OCW .grey-ocw-button:focus {
  background-color: #e2e2e2 !important;
}

.OCW .green-ocw-button {
  color: #000000de !important;
  background-color: #ccebd6 !important;
  border: 1px solid #21ba45 !important;
}

.ui.modal.ovis-modal {
  width: 30%;
}

.ui.modal.ovis-modal .header {
  justify-content: space-between;
  padding: 25px;
}

.ui.modal.ovis-modal .PONOvisData {
  opacity: 1;
  background: #f9fafb no-repeat padding-box padding-box;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  padding: 1.5rem;
  box-shadow: 0 0 3px #00000029;
}

.ui.modal.ovis-modal .PONOvisData .data-row {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
  display: flex;
}

.ui.modal.ovis-modal .PONOvisData .data-row .label {
  color: #000c;
  flex: 1;
  font-size: 14px;
  font-weight: bold;
}

.ui.modal.ovis-modal .PONOvisData .data-row .value {
  text-align: left;
  flex: 1;
  font-size: 14px;
}

.ui.modal.ovis-modal .nav-controls {
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  display: flex;
}

.ui.modal.ovis-modal .nav-controls button {
  width: 27px;
  height: 27px;
  box-shadow: none;
  border-radius: 4px;
  padding: 5px;
  background: #fff !important;
  border: 1px solid #e6e6e6 !important;
}

.ui.modal.ovis-modal .nav-controls button.prev {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none !important;
}

.ui.modal.ovis-modal .nav-controls button.next {
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.ui.modal.ovis-modal .nav-controls button > i.icon.angle {
  transform: none;
  margin: 0 !important;
}

.ui.modal.ovis-modal .no-data {
  text-align: center;
}

button.ui.button.pon-ovis-button-has-data, button.ui.button.pon-ovis-button-has-data:hover {
  background-color: #ccebd6;
  border-color: #21ba45;
}

.Appointment-SnoozedItems {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  margin-top: 13px;
}

.Appointment-SnoozedItems .column {
  align-items: center;
  margin: 0;
  padding: 0 !important;
  display: flex !important;
}

.Appointment-SnoozedItems .column p:first-child {
  padding-left: 14px;
}

.Appointment-SnoozedItems .column p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.Appointment-SnoozedItems .column.header {
  background-color: #f9fafb;
  height: 36px;
}

.Appointment-SnoozedItems .column.header p {
  font-size: 14px;
  font-weight: bold;
}

.Appointment-SnoozedItems .column.header p:first-child {
  padding-left: 14px;
}

.Appointment-SnoozedItems .column.content {
  height: 36px;
}

.Appointment-SnoozedItems .column.content.last {
  padding-right: 14px !important;
}

.Appointment-SnoozedItems .column.content p {
  font-size: 12.6px;
}

.Appointment-SnoozedItems .column.content p:first-child {
  padding-left: 14px;
}

.Appointment-SnoozedItems .column .snooze-images {
  width: 100%;
  padding-bottom: 20px;
}

.Appointment-SnoozedItems .column .divider {
  background-color: #e2e2e3;
  width: 100%;
  height: 1px;
}

.Appointment-SnoozedItems .column .divider.no-border {
  display: none;
}

.Appointment-SnoozedItems .snooze-action, .SnoozeTable .snooze-action {
  justify-content: flex-end;
  width: 100%;
  display: flex;
}

.Appointment-SnoozedItems .snooze-action p, .SnoozeTable .snooze-action p {
  font-size: 12.6px;
}

.Appointment-SnoozedItems .snooze-action p strong, .SnoozeTable .snooze-action p strong {
  margin-right: 12px;
}

.Appointment-SnoozedItems .snooze-action p small, .SnoozeTable .snooze-action p small {
  color: #767676;
  margin-left: 3px;
  font-size: 9px;
}

.Appointment-SnoozedItems .snooze-action .status-container, .SnoozeTable .snooze-action .status-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: flex-end;
  align-items: center;
  width: fit-content;
  height: 27px;
  display: flex;
}

.Appointment-SnoozedItems .snooze-action .status-container .status-dropdown, .SnoozeTable .snooze-action .status-container .status-dropdown {
  border-right: none;
}

.Appointment-SnoozedItems .snooze-action .status-container .status-dropdown i.icon.size-m, .SnoozeTable .snooze-action .status-container .status-dropdown i.icon.size-m {
  margin-top: -12px;
  font-size: 12px;
}

.Appointment-SnoozedItems .snooze-action .status-container .status-dropdown .menu, .SnoozeTable .snooze-action .status-container .status-dropdown .menu {
  box-shadow: none;
  display: none;
  border: none !important;
}

.Appointment-SnoozedItems .snooze-action .status-container .status-dropdown .visible.transition, .SnoozeTable .snooze-action .status-container .status-dropdown .visible.transition {
  margin-top: 2px;
}

.Appointment-SnoozedItems .snooze-action .status-container .status-dropdown .visible.transition div, .SnoozeTable .snooze-action .status-container .status-dropdown .visible.transition div {
  box-shadow: none;
  background: #fff;
  border: 1px solid #e2e2e3;
  display: flex;
}

.Appointment-SnoozedItems .snooze-action .status-container .status-dropdown .visible.transition div i.icon, .SnoozeTable .snooze-action .status-container .status-dropdown .visible.transition div i.icon {
  margin-right: 0;
}

.Appointment-SnoozedItems .snooze-action .status-container .status-dropdown .visible.transition div:first-child, .SnoozeTable .snooze-action .status-container .status-dropdown .visible.transition div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.Appointment-SnoozedItems .snooze-action .status-container .status-dropdown .visible.transition div:last-child, .SnoozeTable .snooze-action .status-container .status-dropdown .visible.transition div:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.Appointment-SnoozedItems .snooze-action .status-container .action-dropdown, .SnoozeTable .snooze-action .status-container .action-dropdown {
  border-right: none;
}

.Appointment-SnoozedItems .snooze-action .status-container .action-dropdown i.icon, .SnoozeTable .snooze-action .status-container .action-dropdown i.icon {
  margin-top: -8px;
}

.Appointment-SnoozedItems .snooze-action .status-container .action-dropdown .menu, .SnoozeTable .snooze-action .status-container .action-dropdown .menu {
  box-shadow: none;
  display: none;
  border: none !important;
}

.Appointment-SnoozedItems .snooze-action .status-container .action-dropdown .visible.transition, .SnoozeTable .snooze-action .status-container .action-dropdown .visible.transition {
  width: fit-content;
  margin-top: 2px;
  box-shadow: none !important;
}

.Appointment-SnoozedItems .snooze-action .status-container .action-dropdown .visible.transition :hover, .SnoozeTable .snooze-action .status-container .action-dropdown .visible.transition :hover {
  background-color: #fafafa;
}

.Appointment-SnoozedItems .snooze-action .status-container .action-dropdown .visible.transition div, .SnoozeTable .snooze-action .status-container .action-dropdown .visible.transition div {
  width: 100%;
  box-shadow: none;
  background-color: #fff;
  border: 1px solid #e2e2e3;
  justify-content: left;
  align-items: center;
  height: 29px;
  font-weight: bold;
  display: flex;
}

.Appointment-SnoozedItems .snooze-action .status-container .action-dropdown .visible.transition div i.icon, .SnoozeTable .snooze-action .status-container .action-dropdown .visible.transition div i.icon {
  margin: 10px 10px 10px 0;
}

.Appointment-SnoozedItems .snooze-action .status-container .action-dropdown .visible.transition div:first-child, .SnoozeTable .snooze-action .status-container .action-dropdown .visible.transition div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.Appointment-SnoozedItems .snooze-action .status-container .action-dropdown .visible.transition div:last-child, .SnoozeTable .snooze-action .status-container .action-dropdown .visible.transition div:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.Appointment-SnoozedItems .snooze-action .status-container i.icon, .SnoozeTable .snooze-action .status-container i.icon {
  margin: 0;
}

.Appointment-SnoozedItems .snooze-action .status-container i.icon.pointer, .SnoozeTable .snooze-action .status-container i.icon.pointer {
  cursor: pointer;
}

.Appointment-SnoozedItems .snooze-action .status-container div, .SnoozeTable .snooze-action .status-container div {
  border-left: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 100%;
  display: flex;
}

.Appointment-SnoozedItems .snooze-action .status-container div:first-child, .SnoozeTable .snooze-action .status-container div:first-child {
  border-left: none;
}

.Appointment-SnoozedItems .snooze-action .empty-status-container, .SnoozeTable .snooze-action .empty-status-container {
  width: 32px;
}

.SnoozeTable {
  margin-top: 13px;
}

.SnoozeTable .snooze-action .status-container {
  height: 25px;
}

.SnoozeTable .snooze-action .status-container .action-dropdown i.icon {
  margin-top: -2px;
}

.SnoozeTable-header {
  background: #f9fafb no-repeat padding-box padding-box;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  padding: 10px;
  display: flex;
}

.SnoozeTable-header h3 {
  margin: 0;
}

.SnoozeTable-header .icon {
  height: auto;
  margin: 0;
}

.SnoozeTable-header.expanded {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.SnoozeTable.withPagination .ReactTable {
  border-radius: 0;
}

.SnoozeTable .ReactTable {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.SnoozeTable .ReactTable .td-action {
  padding-right: 14px;
}

.SnoozeTable .ReactTable .td-action .action-container {
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  display: flex;
}

.SnoozeTable .ReactTable .td-action .action-container .snooze-action {
  width: auto;
}

.SnoozeTable .ReactTablePagination {
  background: #f9fafb no-repeat padding-box padding-box;
  border: 1px solid #e2e2e3;
  border-radius: 0 0 4px 4px;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 14px;
}

.SnoozeTable .ReactTablePagination .pagination-info {
  display: none;
}

.StandardList-title {
  align-items: center;
  display: flex;
}

.StandardList-title .mechanic-info {
  text-transform: capitalize;
  white-space: nowrap;
  align-items: center;
  margin-left: 6px;
  font-size: 18px;
  display: flex;
}

.StandardList-title .mechanic-info .separator {
  margin-left: 7px;
  margin-right: 3px;
}

.StandardList-title .mechanic-info .first-date {
  margin: 0 3px;
}

.StandardList-title .mechanic-info .second-date {
  margin-left: 2px;
}

.StandardList-title .mechanic-info i.icon {
  margin-top: -10px;
  margin-left: 3px;
  font-size: 12px;
}

.ui.very.wide.popup.transition.StandardList-title-popup {
  white-space: pre-wrap;
}

.StatusIcon {
  cursor: pointer;
  background-color: #e3e3e4;
  border: 1px solid;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 30px;
  transition: all .2s ease-in-out;
  display: flex;
}

.StatusIcon i.icon {
  color: #000;
  margin: -10px 0 0;
}

.StatusIcon .svg-face-icon {
  align-items: center;
  display: flex;
}

.StatusIcon.disabled {
  cursor: not-allowed;
}

.StatusIcon.disabled i.icon {
  color: #afafaf;
}

.StatusIcon:not(.disabled):hover, .StatusIcon.active:hover {
  box-shadow: 0 3px 6px #00000029;
}

.StatusIcon-content .grid-container {
  grid-gap: 15px;
  grid-template-columns: 1fr 8fr;
  align-items: center;
  padding-top: 4px;
  padding-bottom: 2px;
  display: grid;
}

.StatusIcon-content .grid-container .left-section {
  align-items: center;
  display: flex;
}

.StatusIcon-content .grid-container .left-section .bo-icon {
  color: #000;
}

.StatusIcon-content .grid-container .right-section {
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.StatusIcon-content .grid-container .right-section .status-time {
  font-size: 14px;
  font-weight: bold;
}

.StatusIcon-content .grid-container .right-section .status-time span:first-child {
  margin-right: 4px;
}

.StatusIcon-content .grid-container .right-section span {
  text-align: left;
  font-size: 1rem;
}

.TyreReplacementModal .header {
  justify-content: space-between;
}

.TyreReplacementModal .modal-content-container {
  height: 70vh;
}

.TyreReplacementModal .in-stock-form-field {
  text-align: center;
}

.TyreReplacementModal .in-stock-checkbox {
  text-align: "center";
  margin-top: 7px;
}

.TyreReplacementModal .fields {
  margin: 0 !important;
}

.TyreReplacementModal .fields .no-padding-right {
  padding-right: 0 !important;
}

.TyreReplacementModal .action-buttons {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  display: flex;
}

.TyreReplacementModal .ui.grid {
  border: 1px solid #e2e2e3;
  margin-top: 30px;
}

.TyreReplacementModal .ui.grid > .row {
  align-items: center;
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
}

.TyreReplacementModal .ui.grid > .row:not(:last-child) {
  border-bottom: 1px solid #e2e2e3;
}

.TyreReplacementModal .ui.grid > .row.header {
  background-color: #f9fafb;
  height: 36px;
}

.TyreReplacementModal .search-button {
  color: #414141;
}

.TyreReplacementModal .search-form-label {
  visibility: hidden;
}

.TyreReplacementModal .replacement-tyre-ean {
  text-wrap: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
  width: 50%;
  display: inline-block;
  overflow: hidden;
}

.TyreReplacementModal i.order-ref-icon {
  color: #600bff;
  opacity: 1 !important;
  width: 35px !important;
  font-size: 25px !important;
}

.TyreReplacementModal .pagination-container {
  justify-content: center;
  margin-top: 55px;
  display: flex;
}

.TyreReplacementModal__discount-dropdown {
  margin-bottom: 11px !important;
}

.TyreReplacementModal .tyre-team-list {
  flex-direction: column;
  width: 100%;
  display: flex;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.TyreReplacementModal .tyre-team-list .tyre-row {
  border-bottom: 1px solid #e0e0e0;
  align-items: center;
  padding: 8px 0;
  display: flex;
}

.TyreReplacementModal .tyre-team-list .tyre-row.header {
  background-color: #f9fafb;
  font-weight: bold;
}

.TyreReplacementModal .tyre-team-list .tyre-row.tyre-order-row {
  padding: 4px 0;
}

.TyreReplacementModal .tyre-team-list .tyre-col {
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 8px;
  overflow: hidden;
}

.TyreReplacementModal .tyre-team-list .tyre-col.season {
  text-align: center;
  width: 3%;
  overflow: visible;
}

.TyreReplacementModal .tyre-team-list .tyre-col.description {
  width: 20%;
}

.TyreReplacementModal .tyre-team-list .tyre-col.brand, .TyreReplacementModal .tyre-team-list .tyre-col.gross, .TyreReplacementModal .tyre-team-list .tyre-col.neto {
  width: 7%;
}

.TyreReplacementModal .tyre-team-list .tyre-col.artean {
  width: 10%;
}

.TyreReplacementModal .tyre-team-list .tyre-col.customer {
  width: 6%;
}

.TyreReplacementModal .tyre-team-list .tyre-col.load, .TyreReplacementModal .tyre-team-list .tyre-col.speed {
  width: 4%;
}

.TyreReplacementModal .tyre-team-list .tyre-col.flat-tire, .TyreReplacementModal .tyre-team-list .tyre-col.stock, .TyreReplacementModal .tyre-team-list .tyre-col.add, .TyreReplacementModal .tyre-team-list .tyre-col.status {
  width: 5%;
}

.TyreReplacementModal .tyre-team-list .tyre-col.quantity {
  width: 4%;
}

.TyreReplacementModal .tyre-team-list .tyre-col.delivery {
  width: 10%;
}

.TyreReplacementModal .tyre-team-list .tyre-col.channel {
  width: 7%;
}

.TyreReplacementModal .tyre-team-list .tyre-col.add, .TyreReplacementModal .tyre-team-list .tyre-col.status, .TyreReplacementModal .tyre-team-list .tyre-col.flat-tire {
  text-align: center;
  margin: 0 auto;
}

.TyreReplacementModal .tyre-team-list .tyre-col.quantity {
  overflow: visible;
}

.TyreReplacementModal .tyre-team-list .tyre-col.quantity .ui.dropdown {
  min-width: 60px;
}

.TyreReplacementModal .tyre-team-list .tyre-col.quantity .ui.dropdown .menu {
  max-height: 200px;
  overflow-y: auto;
  min-width: fit-content !important;
}

.TyreReplacementModal .tyre-team-list .lower-customer-price {
  color: #ff0202;
  background-color: #fef0e7;
  width: fit-content;
}

.TyreReplacementModal .tyre-team-list .check {
  margin: 0 auto !important;
}

.TyreReplacementModal.ui.modal > .actions {
  justify-content: flex-end;
}

.TyreReplacementModal.ui.modal > .actions .tyre-team-order-button.-order-disabled {
  opacity: .5;
}

.TyreReplacementModal .invalid-quantity.ui.selection.dropdown {
  background-color: #fff6f6 !important;
  border-color: #e0b4b4 !important;
}

.TyreReplacementModal .three-pmsf-icon {
  margin-left: 2px;
  display: inline-block;
}

.TyreReplacementModal .three-pmsf-icon img {
  width: 16px;
  height: 16px;
  position: relative;
  top: 1px;
}

.TyreReplacementModal .tyre-team-list-loading, .TyreReplacementModal .no-results-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 180px;
  padding: 20px;
  display: flex;
}

.TyreReplacementModal .tyre-team-list-loading p, .TyreReplacementModal .no-results-container p {
  font-size: 16px;
}

.DBBLabelsModal .dbb_actions {
  gap: 10px;
  display: flex;
}

.DBBLabelsModal .dbb_label_dropdown {
  display: inline-block;
}

.DBBLabelsModal .dbb_label_dropdown span {
  color: #5d5d5d;
  vertical-align: middle;
  margin-right: 10px;
  font-size: 14px;
}

#dbb_label_content_container {
  margin: 0;
  padding: 20px;
  width: 100% !important;
}

@media print {
  #dbb_label_content_container {
    padding: 0 !important;
  }
}

#dbb_label_content_container * {
  font-family: Arial, Helvetica, sans-serif;
}

#dbb_label_content_container div {
  font-size: 20px;
  line-height: 32px;
}

#dbb_label_content_container .dbb_wrapper {
  grid-template-columns: repeat(2, 1fr);
  display: grid;
  width: 100% !important;
}

@media print {
  #dbb_label_content_container .dbb_wrapper_label_size {
    height: 100% !important;
    display: block !important;
  }

  #dbb_label_content_container .dbb_wrapper_label_size > div {
    height: fit-content !important;
  }

  #dbb_label_content_container .dbb_wrapper_label_size > div div {
    height: 100% !important;
  }
}

#dbb_label_content_container .dbb_label_box {
  margin: 0 35px 242px;
}

#dbb_label_content_container .dbb_label_box:nth-last-child(-n+2) {
  margin-bottom: 0;
}

#dbb_label_content_container .dbb_label_box .dbb_label_content {
  padding-right: 40px;
}

#dbb_label_content_container .dbb_label_box .dbb_label_content .dbb_label_section div {
  line-height: 27px;
}

#dbb_label_content_container .dbb_label_box .dbb_label_content .mb-28 {
  margin-bottom: 28px;
}

@media print {
  #dbb_label_content_container .dbb_label_box .dbb_label_content .mb-28_label_size {
    height: 30px !important;
    margin-bottom: 14px !important;
  }
}

#dbb_label_content_container .dbb_label_box .dbb_label_content .mb-26 {
  margin-bottom: 25px;
}

@media print {
  #dbb_label_content_container .dbb_label_box .dbb_label_content .mb-26_label_size {
    margin-bottom: 0 !important;
  }
}

#dbb_label_content_container .dbb_label_box .dbb_label_content .mb-24 {
  margin-bottom: 20px;
}

@media print {
  #dbb_label_content_container .dbb_label_box .dbb_label_content .mb-24_label_size {
    margin-bottom: 0 !important;
  }

  #dbb_label_content_container .dbb_label_box .dbb_label_content_label_size {
    width: auto !important;
    padding-right: 0 !important;
  }
}

#dbb_label_content_container .dbb_label_box .dbb_label_name {
  color: #4e4e4e;
}

#dbb_label_content_container .dbb_label_box .dbb_label_comment {
  justify-content: space-between;
  height: 60px;
  display: flex;
  overflow: hidden;
}

#dbb_label_content_container .dbb_label_box .dbb_section_mid {
  line-height: 27px;
}

#dbb_label_content_container .dbb_label_box .dbb_location_name {
  height: 65px;
  max-height: 65px;
  margin-bottom: 85px;
  font-size: 20px;
  font-weight: 600;
  display: inline-block;
}

#dbb_label_content_container .dbb_label_box:nth-child(2n) {
  margin-right: 0;
}

#dbb_label_content_container .dbb_label_box:nth-child(2n) .dbb_label_tyre_position span {
  margin-right: 3px;
}

#dbb_label_content_container .dbb_label_box:nth-child(odd) {
  margin-left: 0;
}

#dbb_label_content_container .dbb_label_box:nth-child(odd) .dbb_label_tyre_position span {
  margin-right: 1ch;
}

@media print {
  #dbb_label_content_container .dbb_label_box_label_size {
    page-break-after: always;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
}

#dbb_label_content_container h1 {
  text-align: center;
  margin: 10px 0 20px;
  font-size: 68px;
  font-weight: 900;
  width: 100% !important;
}

@media print {
  #dbb_label_content_container .h1_label_size {
    margin-bottom: 0 !important;
  }
}

#dbb_label_content_container .dbb_label_tyre {
  grid-template-areas: "a b"
                       "c b";
  display: grid;
}

#dbb_label_content_container .dbb_label_tyre_position {
  grid-area: a;
  font-size: 24px;
  font-weight: 600;
}

#dbb_label_content_container .dbb_label_tyre_position span {
  text-decoration: underline;
}

#dbb_label_content_container .dbb_label_tyre_size {
  grid-area: c;
  font-size: 20px;
  font-weight: 400;
}

#dbb_label_content_container .dbb_label_tyre_description {
  grid-area: b;
  margin-left: 20px;
  font-size: 24px;
  font-weight: 600;
}

#dbb_label_content_container .float-right {
  float: right;
  text-align: right;
  width: auto !important;
}

.Tyre .TyreCheckList .TyreHeader {
  background-color: #f9fafb;
  border-bottom: 1px solid #e2e2e3;
  align-items: center;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  display: flex;
}

.Tyre .TyreCheckList .TyreHeader p {
  width: 100%;
  font-size: 14px;
  font-weight: bold;
}

.Tyre .TyreCheckList .TyreTable {
  margin-bottom: 12px;
}

.Tyre .TyreCheckList .TyreTable:not(:first-child) {
  border-top: 1px solid #e2e2e3;
}

.Tyre .TyreCheckList .TyreTable .ui.grid {
  margin-left: 0;
  margin-right: 0;
}

.Tyre .TyreCheckList .TyreTable .button.af {
  height: 25px;
}

.Tyre .TyreCheckList .TyreTable .button.af i.icon {
  font-size: 14px;
}

.Tyre .TyreCheckList .TyreTable .media-row {
  height: fit-content !important;
}

.Tyre .TyreCheckList .TyreTable .media-row .checklist-media {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  display: flex;
}

.Tyre .TyreCheckList .TyreTable .row {
  border-bottom: 1px solid #e2e2e3;
  align-items: center;
  height: 36px;
  padding: 0 0 0 7px;
  border-left: none !important;
  border-right: none !important;
}

.Tyre .TyreCheckList .TyreTable .row:last-child {
  border-bottom: none;
}

.Tyre .TyreCheckList .TyreTable .row .column {
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 5px;
  padding-right: 5px;
}

.Tyre .TyreCheckList .TyreTable .row .column P {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.Tyre .TyreCheckList .TyreTable .row .column .tyre-season-container {
  align-items: center;
  gap: 5px;
  display: flex;
}

.Tyre .TyreCheckList .TyreTable .header {
  background-color: #f9fafb;
  border: 1px solid #e2e2e3;
}

.Tyre .TyreCheckList .TyreTable .header p {
  font-size: 14px;
  font-weight: bold;
}

.Tyre .TyreCheckList .TyreTable .axle-header {
  background-color: #f2f2f2;
  height: 30px;
}

.Tyre .TyreCheckList .TyreTable .axle-header p {
  font-size: 14px;
  font-weight: bold;
}

.Tyre .TyreCheckList .TyreTable .tyre-title-container {
  background-color: #f9fafb;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 48px;
  margin-bottom: 12px;
  padding: 0 14px;
  display: flex;
}

.Tyre .TyreCheckList .TyreTable .tyre-title-container .ui.tiny.basic.button {
  height: 25px;
  background-color: #fff !important;
}

.Tyre .TyreCheckList .TyreTable .tyre-title-container .ui.tiny.basic.button p {
  font-size: 11px;
}

.Tyre .TyreCheckList .TyreTable .tyre-title-container .tyre-title {
  align-items: center;
  gap: 8px;
  display: flex;
}

.Tyre .TyreCheckList .TyreTable .tyre-title-container .tyre-title__wrapper {
  font-size: 18px;
  display: flex;
}

.Tyre .TyreCheckList .TyreTable .tyre-title-container .tyre-title__wrapper__storage {
  color: #21ba45;
  padding-left: 10px;
}

.Tyre .TyreCheckList .TyreTable .tyre-title-container .tyre-title__wrapper__locationName {
  color: #767676;
  padding: 0 8px 0 3px;
}

.Tyre .TyreCheckList .TyreTable .tyre-title-container .tyre-title i.icon {
  margin-top: -7px;
}

.Tyre .TyreCheckList .TyreTable .tyre-title-container .tyre-title p {
  font-size: 18px;
  font-weight: bold;
}

.Tyre .TyreCheckList .TyreTable .tyre-title-container .tyre-dbb-label p {
  color: #21ba45;
  cursor: pointer;
  font-size: 12.6px;
  font-weight: bold;
}

.Tyre .TyreCheckList .TyreTable .tyre-action {
  justify-content: flex-end;
  width: 100%;
  display: flex;
}

.Tyre .TyreCheckList .TyreTable .tyre-action p {
  font-size: 12.6px;
}

.Tyre .TyreCheckList .TyreTable .tyre-action p strong {
  margin-right: 12px;
}

.Tyre .TyreCheckList .TyreTable .tyre-action p small {
  color: #767676;
  margin-left: 3px;
  font-size: 9px;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: flex-end;
  align-items: center;
  width: fit-content;
  height: 27px;
  display: flex;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container i.icon {
  font-size: 12px;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .status-dropdown {
  border-right: none;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .status-dropdown i.icon {
  font-size: 12px;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .status-dropdown i.icon.tiny {
  font-size: 8px;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .status-dropdown i.icon.size-m {
  margin-top: -12px;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .status-dropdown .menu {
  box-shadow: none;
  display: none;
  border: none !important;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .status-dropdown .visible.transition {
  margin-top: 2px;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .status-dropdown .visible.transition div {
  box-shadow: none;
  background: #fff;
  border: 1px solid #e2e2e3;
  display: flex;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .status-dropdown .visible.transition div i.icon {
  margin-right: 0;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .status-dropdown .visible.transition div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .status-dropdown .visible.transition div:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .action-dropdown {
  border-right: none;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .action-dropdown i.icon {
  margin-top: -8px;
  font-size: 14px;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .action-dropdown .menu {
  box-shadow: none;
  display: none;
  border: none !important;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .action-dropdown .visible.transition {
  width: fit-content;
  margin-top: 2px;
  box-shadow: none !important;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .action-dropdown .visible.transition :hover {
  background-color: #fafafa;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .action-dropdown .visible.transition div {
  width: 100%;
  box-shadow: none;
  background-color: #fff;
  border: 1px solid #e2e2e3;
  justify-content: left;
  align-items: center;
  height: 29px;
  font-weight: bold;
  display: flex;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .action-dropdown .visible.transition div i.icon {
  margin: 10px 10px 10px 0;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .action-dropdown .visible.transition div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container .action-dropdown .visible.transition div:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container i.icon {
  margin: 0;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container i.icon.pointer {
  cursor: pointer;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container div {
  border-left: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 100%;
  display: flex;
}

.Tyre .TyreCheckList .TyreTable .tyre-action .tyre-container div:first-child {
  border-left: none;
}

.Tyre i.icon {
  margin: 0;
}

.Tyre i.icon.pointer {
  cursor: pointer;
}

.TyreReplacementTableItem__customer-ok-icon-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  width: 32px;
  height: 25px;
  margin-right: 5px;
  padding: 0 7px;
}

.TyreReplacementTableItem__customer-ok-icon {
  font-size: 14px !important;
}

.TyreReplacementTableItem__actions {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.TyreReplacementTableItem__actions .ui.button.customer-approved {
  margin-right: 6px;
}

.TyreReplacementTableItem__actions.-composite-button button.ui.button {
  width: 32.5px;
  padding: 0;
}

.TyreReplacementTableItem__actions.-composite-button button:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.TyreReplacementTableItem__actions.-composite-button button.tyre-team-order-button {
  background-color: #fff;
  border-color: #e2e2e3 #e2e2e3 #e2e2e3 currentColor;
  border-left-style: none;
  border-left-width: medium;
  border-radius: 0 4px 4px 0;
}

.TyreReplacementTableItem__actions.-composite-button button.tyre-team-order-button.-order-disabled {
  cursor: default;
}

.TyreReplacementTableItem .replace-with {
  margin-left: 37px;
}

.TyreReplacementTableItem .tyre-team-order-button {
  border-left: none;
}

.TyreReplacementTableItem .tyre-team-order-button.-order-disabled {
  cursor: default;
}

.TyreTableItem {
  font-size: 14px;
}

.TyreTableItem .tyre-position-container {
  align-items: center;
  display: flex;
}

.TyreTableItem .tyre-replacement-icon-container {
  cursor: pointer;
  margin: 4px 10px 0 5px;
}

.TyreTableItem .customer-ok-container {
  justify-content: flex-end;
  gap: 5px;
  width: 100%;
  display: flex;
}

.TyreTableItem .customer-ok-icon-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  width: 32px;
  height: 27px;
  padding: 0 7px;
}

.TyreTableItem .customer-ok-icon {
  font-size: 14px !important;
}

.Images {
  padding: 0 13.5px;
}

.Images .image-container {
  align-items: center;
  gap: 12px;
  display: flex;
  overflow: auto hidden;
}

.Images .image-container .image-view {
  border: 1px solid #e2e2e3;
  width: 231px;
  height: 130px;
  margin-top: 20px;
  padding: 1px;
  position: relative;
  overflow: hidden;
}

.Images .image-container .image-view img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.Images .image-container .image-view .image-controls {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  padding: 0 10px;
  display: flex;
  position: absolute;
  bottom: 10.5px;
}

.Images .image-container .image-view .image-delete {
  cursor: pointer;
  background-color: #fff;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 33px;
  height: 25px;
  display: flex;
}

.Images .image-container .image-view .image-delete i.icon {
  height: auto;
  margin: 0;
}

.ImportantNotesContainer .container {
  background-color: #fcfff5;
  border: 1px solid #e9e9ea;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 5px;
  display: flex;
}

.ImportantNotesContainer .note-content {
  color: #000c;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin: 2px 0 0 3px;
  display: inline-block;
  overflow: hidden;
}

.ImportantNotesContainer .ui.basic.label {
  align-items: center;
  gap: 5px;
  display: flex;
}

.ImportantNotesContainer .label-text {
  color: #5c5c5c;
  position: relative;
  top: .5px;
}

.ImportantNotesContainer .keep-parts-icon {
  margin-right: 1px !important;
}

.connected-checklists-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  margin: 15px;
}

.connected-checklists-container .connected-checklist {
  gap: 3px;
  padding: 10px 15px;
  display: flex;
}

.connected-checklists-container .connected-checklist:not(:last-of-type) {
  border-bottom: 1px solid #e2e2e3;
}

.NoteAttachments .ui.menu {
  box-shadow: unset;
  border: 0;
}

.NoteAttachments .ui.menu .active.item {
  color: #fff;
  background-color: #21ba45;
}

.NoteAttachments .ui.menu .item {
  border: 1px solid #70707029;
  height: 25px;
  padding-left: 10px;
  padding-right: 10px;
}

.NoteAttachments .ui.menu .item:last-child {
  border-radius: 0 .285714rem .285714rem 0;
}

.NoteAttachments .ui.menu .item:before {
  content: unset;
}

.NoteAttachments .ui.attached.segment {
  border: none;
  padding: 0;
}

.NoteAttachments .attachment-container {
  flex-direction: column;
  gap: 5px;
  width: 100%;
  margin: 5px 0 13.5px;
  display: flex;
}

.NoteAttachments .attachment-container .attachment-view {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 2px;
  display: flex;
}

.NoteAttachments .attachment-container .attachment-view .attachment-name {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: 5px;
  max-width: 75%;
  display: flex;
}

.NoteAttachments .attachment-container .attachment-view .attachment-name p {
  color: #3175c6;
  font-size: 14px;
}

.NoteAttachments .attachment-container .attachment-view .attachment-name i.icon {
  margin-top: -6px;
  margin-right: 0;
  font-size: 14px;
  color: #414141 !important;
}

.NoteAttachments .attachment-container .attachment-view .attachment-delete {
  justify-content: center;
  align-items: center;
  gap: 5px;
  display: flex;
}

.NoteAttachments .attachment-container .attachment-view .attachment-delete p {
  color: #000;
  font-size: 12px;
  font-style: italic;
  font-weight: bold;
}

.NoteAttachments .attachment-container .attachment-view .attachment-delete i.icon {
  cursor: pointer;
  margin-top: -6px;
  margin-right: 0;
  font-size: 14px;
  color: #414141 !important;
}

.PinType .items-center {
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  display: flex;
}

.PinType .items-center div {
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.PinType .checkbox-container {
  white-space: nowrap;
  border: 1px solid #22242626;
  border-radius: 3px;
  justify-content: center;
  gap: 10px;
  padding: 6px 6px 6px 10px;
  display: flex;
}

.PinType .checkbox-container i {
  margin: 0;
  position: relative;
  left: 5px;
}

.PinType .checkbox-container .checkbox-form-field {
  align-items: center;
  display: flex;
}

.PinType .checkbox-container .checkbox-box {
  margin: 0 !important;
}

.PinType p {
  font-size: 12.6px;
}

.PinType .warranty-actions {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 2rem;
  display: flex;
}

.PinType .orderStatusTitle {
  padding-left: 10px;
}

.ChecklistSectionContent {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.ChecklistSectionContent .checklist-notes {
  margin-bottom: 14px;
}

.ChecklistSectionContent .section-header {
  color: #1d3d52;
  background: #2184d04a;
  padding: 14px;
  font-size: 1.25rem;
  font-weight: 600;
}

.ChecklistSectionContent .section-header span {
  font-size: 12px;
}

.ChecklistSectionContent .checklist-item {
  color: #1d3d52;
  border-color: #bbc2c6bf;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 0 14px;
  display: flex;
}

.ChecklistSectionContent .checklist-item-title {
  font-size: 17px;
  font-weight: bold;
}

.ChecklistSectionContent .checklist-item-description {
  margin-top: 6px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: normal;
}

.ChecklistSectionContent .checklist-item-text-image-letter {
  align-items: center;
  display: flex;
}

.HeaderSectionContent {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.HeaderSectionContent .icon-container {
  padding-right: 3px;
}

.HeaderSectionContent .text-icon-container {
  color: #5c7c8d;
  align-content: center;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  display: flex;
}

.HeaderSectionContent .grid-header-container {
  background: #f3f5f7;
}

.HeaderSectionContent .grid-title-text {
  color: #234357;
  font-weight: 700;
}

.HeaderSectionContent .header-section {
  border: 2px solid #bbc2c6bf;
  margin-bottom: 14px;
  padding-top: 14px;
  font-size: 15px;
}

.HeaderSectionContent .appointment-section {
  margin-bottom: 14px;
}

.HeaderSectionContent .reg-container {
  border: 2px solid #234457;
  border-radius: .15em;
  width: 130px;
  height: 24px;
  margin-bottom: 8px;
}

.HeaderSectionContent .reg-country {
  float: left;
  text-align: center;
  background-color: #40a7ff;
  width: 20%;
  height: 100%;
  padding-top: 3px;
  line-height: 100%;
  display: block;
  position: relative;
}

.HeaderSectionContent .reg-country > div {
  color: #fff;
  width: 100%;
  font-size: 10px;
  position: absolute;
  bottom: 0;
}

.HeaderSectionContent .reg-nr {
  float: right;
  text-align: center;
  width: 80%;
  height: 100%;
  padding-top: 2px;
  font-size: 16px;
  font-weight: 500;
  line-height: 100%;
}

.HeaderSectionContent .BE .reg-nr {
  color: #ac1713;
  background-color: #fff;
}

.HeaderSectionContent .NL .reg-nr, .HeaderSectionContent .LU .reg-nr {
  color: #234457;
  background-color: #efe24c;
}

.HeaderSectionContent .FR .reg-nr {
  color: #000;
  background-color: #fff;
}

.ImageGallery .images-container {
  margin-top: 1rem;
  display: table;
}

.ImageGallery .images-container .image-container-row {
  display: table-row;
  line-height: 0 !important;
}

.ImageGallery .images-container .image-container, .ImageGallery .images-container .image-container-row {
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}

.ImageGallery .images-container .image-container {
  padding-right: 3px;
  display: table-cell;
  position: relative;
  width: 25% !important;
}

.ImageGallery .images-container .image-container .img-label {
  color: #234457;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  background-color: #fffc;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 35px;
  display: flex;
  position: absolute;
  top: 0;
  right: 3px;
}

.ImageGallery .images-container .img-label .img-icon-wrapper {
  color: #5d7c8c;
  border: 2px solid #5d7c8c;
  border-radius: 2px;
  align-items: center;
  gap: 5px;
  width: fit-content;
  height: 27px;
  padding: 2px 5px;
  font-family: monospace;
  display: flex;
}

.ImageGallery .images-container .report-car-images-letter {
  vertical-align: top;
  font-weight: 700;
  line-height: 19px;
  display: inline-block;
}

.ImageGallery .images-container .image-container .image-style {
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  border-bottom: 3px solid #fff;
  height: 124px;
  width: 100% !important;
}

.ImageLetters .img-icon-wrapper {
  color: #5d7c8c;
  border: 2px solid #5d7c8c;
  border-radius: 2px;
  align-items: center;
  gap: 5px;
  height: 27px;
  margin-right: 5px;
  padding: 2px 5px;
  font-family: monospace;
  display: flex;
}

.ImageLetters .img-icon-wrapper .report-car-images-letter {
  vertical-align: top;
  font-weight: 700;
  line-height: 19px;
  display: inline-block;
}

.ImportantNotes {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.ImportantNotes .title {
  color: #1d3d52;
  background: #f8e89e;
  padding: 14px;
  font-size: 17.5px;
  font-weight: 700;
}

.ImportantNotes .icon-text-container {
  color: #1d3d52;
  align-items: center;
  gap: 5px;
  padding: 10px;
  display: flex;
}

.ImportantNotes .ui.basic.label.label-container {
  align-items: center;
  display: inline-flex;
}

.ImportantNotes .ui.basic.label.label-container svg {
  margin-right: 3px;
}

.intervention-section {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  margin: 14px 0;
}

.intervention-section .title {
  color: #1d3d52;
  background: #bdf0c3;
  padding: 14px;
  font-size: 17.5px;
  font-weight: 700;
}

.intervention-section .status-name-container {
  justify-content: space-between;
  margin: 14px 0;
  padding: 0 14px;
  display: flex;
}

.intervention-section .name-text {
  margin: 0;
  font-size: 18px;
}

.intervention-section .description {
  padding: 0 14px;
}

.PinSectionContent {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.PinSectionContent .pin-section {
  border: 2px solid #bbc2c6bf;
  margin-bottom: 14px;
  padding-top: 14px;
  font-size: 15px;
}

.PinSectionContent .grid-header-container {
  background: #f3f5f7;
}

.PinSectionContent .grid-title-text {
  color: #234357;
  font-weight: 700;
}

.PinSectionContent .grid-field-text {
  color: #5c7c8d;
  font-size: 15.6px;
  font-weight: 400;
}

.PinSectionContent .results-grid {
  margin-bottom: 1px;
}

.PinOverviewContent {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.PinOverviewContent .modal-header-container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.PinOverviewContent .buttons-container {
  gap: 14px;
  margin-right: 40px;
  display: flex;
}

.PinOverviewContent .cancel-icon {
  color: #767676;
}

.log-section {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  margin: 14px 0;
}

.log-section .title {
  color: #1d3d52;
  background: #f7f7f7;
  padding: 14px;
  font-size: 1.25rem;
  font-weight: 600;
}

.SubitemsTable {
  margin: 10px 0;
}

.SubitemsTable th {
  padding-right: 5px;
}

.SubitemsTable tr {
  height: 48px;
}

.SubitemsTable .subitem-action {
  cursor: pointer;
  background-color: #fff;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 35px;
  height: 35px;
  display: flex;
}

.SubitemsTable .subitem-action i.icon {
  margin-top: -7px;
  margin-right: 0;
}

.SubitemsTable__actions {
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  display: flex;
}

.Subitems {
  margin: 3.5px 13.5px;
}

.CarExternalDataModal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.CarExternalDataModal.ui.large.modal.transition.visible.active {
  min-width: 1000px;
}

.CarExternalDataModal .ui.table {
  table-layout: fixed;
  width: 100%;
}

.CarExternalDataModal .ui.table th, .CarExternalDataModal .ui.table td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.CarExternalDataModal .ui.table thead th {
  border-bottom: none;
}

.CarExternalDataModal .no-data {
  text-align: center;
  width: 100%;
}

.CarExternalDataModal .header-wrapper {
  align-items: center;
  gap: 12px;
  min-width: 120px;
  display: flex;
}

.CarExternalDataModal .header-wrapper .header-tag {
  color: #5c5c5c;
  white-space: nowrap;
  background-color: #e5e5e5;
  border-radius: 4px;
  flex-shrink: 0;
  height: 26px;
  padding: 6px;
  line-height: 1;
}

.CarExternalDataModal .header-wrapper .select-all-wrapper {
  align-items: center;
  gap: 12px;
  display: flex;
}

.CarExternalDataModal .checkbox-wrapper {
  gap: 14px;
  display: flex;
}

.CarExternalDataModal .modal-content.content {
  justify-content: center;
  align-items: center;
  min-height: 200px;
  display: flex;
}

.CarExternalDataModal .modal-actions {
  display: flex;
  justify-content: flex-end !important;
}

.CustomerExternalDataModal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.CustomerExternalDataModal .modal-content {
  justify-content: space-between;
  display: flex;
}

.CustomerExternalDataModal .modal-content .ui.table thead th {
  border-bottom: none;
}

.CustomerExternalDataModal .modal-content .no-data {
  text-align: center;
  width: 100%;
}

.CustomerExternalDataModal .modal-content th {
  font-size: 14px;
  padding-top: 4px !important;
}

.CustomerExternalDataModal .modal-content .checkbox-wrapper {
  align-items: center;
  gap: 12px;
  display: flex;
}

.CustomerExternalDataModal .modal-content .checkbox-wrapper .header-tag {
  color: #5c5c5c;
  background-color: #e5e5e5;
  border-radius: 4px;
  margin-right: 10px;
  padding: 6px;
}

.CustomerExternalDataModal .modal-content tbody .checkbox-wrapper {
  gap: 14px;
}

.CustomerExternalDataModal .modal-content .select-all-wrapper {
  align-items: center;
  gap: 12px;
  display: flex;
}

.CustomerExternalDataModal .modal-content.content {
  justify-content: center;
  align-items: center;
  min-height: 200px;
  display: flex;
}

.CustomerExternalDataModal .modal-actions {
  display: flex;
  justify-content: flex-end !important;
}

.NewAppointment {
  max-width: 1350px !important;
}

.NewAppointment .ml-0 {
  margin-left: 0 !important;
}

.NewAppointment .ui.basic.button {
  width: 38px;
  margin-right: 20px;
}

.NewAppointment .ui.basic.button i {
  color: #21ba45;
}

.NewAppointment button.button {
  color: #000;
  cursor: pointer;
  height: 36px;
  font-size: 14px;
  font-weight: 600;
}

.NewAppointment button.button i.icon {
  font-size: 14px;
  font-weight: 600;
}

.NewAppointment button.add-recalls {
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  margin-left: 10px !important;
}

.NewAppointment button.add-recalls i {
  font-size: 14px;
  transform: translateX(15px) !important;
}

.NewAppointment button.add-recalls.loading.green {
  background-color: #21ba45 !important;
}

.NewAppointment div.content {
  overflow-y: scroll;
  height: 80vh !important;
}

.NewAppointment label.big {
  font-size: 19px !important;
  font-weight: 400 !important;
}

.NewAppointment label.big i.icon {
  margin-right: 5px;
  font-size: 19px;
}

.NewAppointment .action-buttons {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  display: flex;
}

.NewAppointment .ui.form .fields .react-datepicker-wrapper, .NewAppointment .ui.form .fields .rc-time-picker {
  width: 100%;
}

.NewAppointment .ui.form .fields .rc-time-picker input {
  height: 36px;
}

.NewAppointment .ui.form .fields .dropdown-search {
  width: 100% !important;
}

.NewAppointment .ui.form .fields .search {
  align-items: center;
  width: 100%;
  display: flex;
}

.NewAppointment .ui.form .fields .search .search-wrapper {
  width: 100%;
  max-width: 500px;
  position: relative;
}

.NewAppointment .ui.form .fields .search .search-wrapper .customer-tags {
  gap: 6px;
  display: flex;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.NewAppointment .ui.form .fields .search .search-wrapper .customer-tag {
  color: #5c5c5c;
  text-transform: uppercase;
  background-color: #e5e5e5;
  border-radius: 4px;
  padding: 4px 8px;
  font: bold 14px / 15px Lato;
}

.NewAppointment .ui.form .fields .search .search-wrapper .absolute-tag {
  color: #5c5c5c;
  text-transform: uppercase;
  background-color: #e5e5e5;
  border-radius: 4px;
  padding: 4px 8px;
  font: bold 14px / 15px Lato;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.NewAppointment .ui.form .fields .search .search-wrapper input {
  padding-left: 36px;
}

.NewAppointment .ui.form .fields .search .search-wrapper .ui.search i {
  opacity: .25;
  margin-right: auto;
  transition: none;
  position: absolute;
  left: 0;
}

.NewAppointment .ui.form .fields .search .search-wrapper .ui.search i:after {
  opacity: 1;
  border-color: #fff #21ba45 #21ba45;
}

.NewAppointment .ui.form .fields .search .search-wrapper .ui.search.loading i {
  opacity: 1;
}

.NewAppointment .ui.form .fields .search button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  flex: none;
  height: 38px;
  padding: 0 12.3px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 0 !important;
}

.NewAppointment .ui.form .fields .search button:not(:disabled) {
  color: #fff;
  background-color: #21ba45;
}

.NewAppointment .ui.form .fields .search button i.icon {
  opacity: 1;
}

.NewAppointment .ui.form .fields .search input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.NewAppointment .ui.form .fields .search.rounded input {
  border-radius: 4px;
}

.NewAppointment .ui.form .fields .wide.field:last-child {
  padding-right: 12px;
}

.NewAppointment .ui.form .fields .car-dropdown {
  text-align: left;
  border: 1px solid #dededf;
  border-radius: 4px;
  min-width: 300px;
  height: 36px;
  box-shadow: none !important;
  background-color: #0000 !important;
}

.NewAppointment .ui.form .fields .car-dropdown.active {
  background-color: #fff !important;
  border: 1px solid #3498db !important;
}

.NewAppointment .ui.form .fields .car-dropdown .icon {
  background-color: #0000 !important;
  font-size: 13px !important;
}

.NewAppointment .ui.form .fields .car-dropdown .text {
  color: #414141;
  font-size: 12.6px;
  font-weight: 400 !important;
}

.NewAppointment .ui.form .fields .intervention-actions {
  width: 70px !important;
}

.NewAppointment .results.transition.visible {
  height: auto;
  max-height: 300px;
  overflow-y: scroll;
}

.appointment-info-checkbox-container {
  gap: 14px;
  margin-left: 14px;
  display: flex;
}

.appointment-info-checkbox-container > * {
  background-color: #fff;
  border: 1px solid #dededf;
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  display: flex;
}

.appointment-info-checkbox-container > * div {
  white-space: nowrap;
  gap: 8px;
  display: flex;
}

.appointment-info-checkbox-container > * div i.icon {
  margin-left: 3px;
}

.CustomerWaitingIcon {
  color: #a5673f;
}

.NewAppointment .results {
  overflow: auto !important;
}

.NewAppointment .results > * {
  padding: 0 !important;
}

.NewAppointment .message.empty {
  padding: 8px 12px !important;
}

.NewAppointment__customer-group {
  padding: 0 30px;
}

.NewAppointment__GrayGroup {
  background-color: #f9fafb;
  border-bottom: 1px solid #e2e2e3;
  padding: 20px 30px;
}

.NewAppointment__no-margin {
  border-bottom: none;
  margin-bottom: 0 !important;
}

.NewAppointment__Menu {
  padding: 0 23px;
  background-color: #f9fafb !important;
  margin-top: 0 !important;
}

.NewAppointment__CarDetails {
  padding-left: 30px;
  padding-right: 30px;
}

.NewAppointment__ModalContent {
  overflow-x: hidden;
  padding: 0 !important;
}

.NewAppointment__ModalContent .input.disabled {
  opacity: 1 !important;
}

.NewAppointment__ModalContent .input.disabled input {
  opacity: 1 !important;
  background-color: #f9fafb !important;
}

.NewAppointment__ModalContent input:disabled {
  opacity: 1 !important;
  color: #b5b5b5 !important;
  background-color: #f9fafb !important;
}

.NewAppointment__SearchResult {
  justify-content: space-between;
  padding: 5px 10px;
  display: flex;
  align-items: center !important;
}

.NewAppointment__SearchResult:hover {
  background-color: #e8f3fa;
}

.NewAppointment__SearchResult p {
  margin: 0 !important;
}

.NewAppointment__SearchResult__tag {
  color: #5c5c5c;
  text-transform: uppercase;
  background-color: #e5e5e5;
  border-radius: 4px;
  padding: 4px 8px;
  font: bold 14px / 15px Lato;
}

.NewAppointment__SearchResult__tag-container {
  text-transform: uppercase;
  gap: 5px;
  display: flex;
}

.SpecialIndicators {
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  display: flex;
}

.carts-dropdown {
  text-align: center;
  background-color: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  padding: 0 5px;
}

.carts-dropdown i.icon {
  font-size: 12px;
}

.cart-all-option {
  text-align: center !important;
}

.cart-selected-option {
  background-color: #e8f3fa !important;
}

.cart-filter-icon {
  font-size: 10px !important;
}

.shoppingCartIcon {
  color: #6b6b6b;
}

.dropdown-menu-container > :not(:last-child) {
  border-bottom: 1px solid #edeeef !important;
}

.orange-cart {
  color: #f2711c !important;
}

.yellow-cart {
  color: #cc0 !important;
}

.yellow-cart-border {
  border: 1px solid #cc0 !important;
}

.yellow-cartbg {
  background-color: #cc03;
}

i.icon.shopping.cart.yellow {
  color: #cc0 !important;
}

.Timer {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  flex-direction: row;
  height: 36px;
  display: flex;
}

.Timer .Timerslot {
  text-align: center;
  color: #000c;
  float: left;
  background-color: #fcfff5;
  border-color: #e2e2e3;
  border-left-style: solid;
  border-left-width: 1px;
  min-width: 40px;
  margin: 0;
  padding: 5px 15px;
  font-size: 14px;
  font-weight: 600;
}

.Timer .Timerslot:first-child {
  border-left: none;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.Timer .Timerslot:last-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.Timer .Timerslot.blue {
  background-color: #e7f2fb;
}

.Timer .Timerslot.red {
  background-color: #ffecea;
}

.AppointmentNotesIcons-wrapper {
  gap: 2px;
  display: inline-flex;
}

.AppointmentNotesIcons-wrapper .ui.red.label {
  color: #ff0202 !important;
  background-color: #ff020233 !important;
  border-color: #ff0202 !important;
}

.AppointmentNotesIcons-wrapper .ui.green.label {
  color: #48913d !important;
  background-color: #48913d33 !important;
  border-color: #48913d !important;
}

.AppointmentNotesIcons-wrapper .ui.orange.label {
  color: #ffba39 !important;
  background-color: #ffba3933 !important;
  border-color: #ffba39 !important;
}

.AppointmentNotesIcons-wrapper .ui.blue.label {
  color: #2185d0 !important;
  background-color: #2185d033 !important;
  border-color: #2185d0 !important;
}

.AppointmentNotePopup .AppointmentNoteTitle {
  align-items: center;
  margin-bottom: 3px;
  display: flex;
}

.AppointmentNotePopup .AppointmentNoteTitle svg {
  margin-right: 7px;
  position: relative;
  bottom: 1px;
}

.AppointmentNotePopup .AppointmentNoteTitle i.note.sticky.red {
  color: #db2828;
}

.AppointmentNotePopup .AppointmentNoteDescription {
  color: #767676;
  font-size: 12px;
  font-style: italic;
}

.AppointmentNotePopup .AppointmentNoteContent {
  white-space: break-spaces;
  margin-top: 10px;
  font-size: 14px;
}

.AppointmentNotePopup .AppointmentNoteContent .CallCustomerPhoneNr {
  margin-bottom: 6px;
}

.StatusCellIcon {
  width: 36px;
  height: 30px;
  color: "#000000";
  border: 1px solid #0000;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  display: flex;
  position: relative;
}

.StatusCellIcon .svg-face-icon {
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  display: flex;
  overflow: hidden;
}

.StatusCellIcon .svg-face-icon img {
  width: 18px;
  height: 18px;
}

.StatusCellIcon .small-icon {
  position: absolute;
  bottom: 4px;
  left: 0;
  font-size: 9px !important;
}

.StatusCellIcon .bo-icon {
  color: #000;
  font-weight: 600;
}

.StatusCellIcon .top-right {
  z-index: 1;
  position: absolute;
  top: -3px;
  right: -2px;
  font-size: 10px !important;
}

.StatusCellIcon .top-right.envelope {
  top: -4px;
  right: 0;
  font-size: 9px !important;
}

.StatusCellIcon i {
  color: #000;
  font-size: 14px !important;
}

.StatusCellIcon i.icon {
  margin: 0;
}

.StatusCellIcon svg {
  color: #000;
  font-size: 16px !important;
}

.AttachmentPreview-Container {
  align-items: center;
  gap: 12px;
  display: flex;
  overflow-x: auto;
}

.AttachmentPreview-Container .media-view {
  background-color: #f9fafb;
  border: 1px solid #e2e2e3;
  margin-top: 10px;
  position: relative;
}

.AttachmentPreview-Container .media-view .ui.divider {
  margin: 0;
}

.AttachmentPreview-Container .media-view.file-view {
  background-color: #e2e2e3;
}

.AttachmentPreview-Container .media-view img, .AttachmentPreview-Container .media-view video {
  object-fit: cover;
  border: 3px solid #f9fafb;
  width: 225px;
  height: 130px;
  display: block;
}

.AttachmentPreview-Container .media-view .media-other {
  text-align: center;
  background-color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 225px;
  height: 130px;
  display: flex;
}

.AttachmentPreview-Container .media-view .media-other p {
  color: #acacac;
  margin-top: 8px;
  font-size: 12px;
  font-weight: bold;
}

.AttachmentPreview-Container .media-view .media-other i.icon.file {
  color: #acacac;
}

.AttachmentPreview-Container .media-view .media-download {
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  margin: 5px;
  display: flex;
}

.AttachmentPreview-Container .media-view .media-download .media-wrapper {
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #d4d4d5;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 25px;
  display: flex;
}

.AttachmentPreview-Container .media-view .media-download .media-wrapper:hover {
  background-color: #ccc;
}

.AttachmentPreview-Container .media-view .media-download .media-wrapper i.icon {
  height: auto;
  margin-right: 0;
}

.FilePreviewModal {
  position: relative;
  width: 90% !important;
}

.FilePreviewModal .FilePreviewHeader {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 5px;
  display: flex;
}

.FilePreviewModal .FilePreviewHeader > div:first-child {
  flex: 1;
  align-items: center;
  max-width: 70%;
  display: flex;
}

.FilePreviewModal .FilePreviewHeader > div:nth-child(2) {
  flex: 0 0 30%;
  justify-content: flex-end;
  display: flex;
}

.FilePreviewModal .FilePreviewHeader .Actions {
  align-items: center;
  gap: 10px;
  padding-right: 10px;
  display: flex;
}

.FilePreviewModal .FilePreviewHeader .FilePreviewName {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 80%;
  margin-left: 5px;
  font-size: 16px;
  font-weight: 400;
  overflow: hidden;
}

.FilePreviewModal .FilePreviewContent {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vh - 200px);
  display: flex;
}

.FilePreviewModal .FilePreviewContent iframe {
  border: none;
  width: 100%;
  height: calc(100vh - 200px);
}

.FilePreviewModal .FilePreviewContent img {
  width: auto;
  max-width: 100%;
  height: fit-content;
  max-height: 100%;
}

.FilePreviewModal .FilePreviewContent:focus {
  outline: none;
}

.FilePreviewModal .left-arrow {
  z-index: 1000;
  color: #d3d3d3;
  cursor: pointer;
  font-size: 40px;
  position: absolute;
  top: 50%;
  left: calc(15px - 5%);
  transform: translateY(-50%);
}

.FilePreviewModal .right-arrow {
  z-index: 1000;
  color: #d3d3d3;
  cursor: pointer;
  font-size: 40px;
  position: absolute;
  top: 50%;
  right: calc(15px - 5%);
  transform: translateY(-50%);
}

.Bounce-Loader-Placeholder {
  text-align: center;
  width: 100%;
  padding-top: .5em;
}

.Bounce-Loader-Placeholder > div {
  background-color: gray;
  border-radius: 100%;
  width: 14px;
  height: 14px;
  animation: 1.4s ease-in-out infinite both sk-bouncedelay;
  display: inline-block;
}

.Bounce-Loader-Placeholder .bounce1 {
  animation-delay: -.32s;
}

.Bounce-Loader-Placeholder .bounce2 {
  animation-delay: -.16s;
}

.Bounce-Loader-Placeholder section {
  margin-top: 20px;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

.react-datepicker__input-container .react-datepicker__close-icon:after {
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 14px;
  padding: 0;
  font-size: 10px;
  display: flex;
}

.CalendarInput {
  color: #000000de;
  border: 1px solid #dededf;
  border-radius: .285714rem;
  width: 100%;
  padding: 8px 16px;
}

.CalendarInput:active, .CalendarInput:focus, .CalendarInput:focus-visible {
  border: 1px solid #96c8da;
  outline: none;
}

.CalendarDatepicker {
  border: 1px solid #e2e2e3;
  border-radius: 6px;
  box-shadow: 0 3px 6px #00000029;
}

.CalendarDatepicker .react-datepicker__day--keyboard-selected {
  color: inherit;
  background: none;
}

.CalendarDatepicker .react-datepicker__day--keyboard-selected:focus {
  color: #000;
  background-color: #e1e1e1;
}

.CalendarDatepicker .react-datepicker__day {
  width: 1.7rem;
  margin: .25rem;
  font-size: 12px;
}

.CalendarDatepicker .react-datepicker__day--today {
  color: #fff !important;
  background-color: #2d84ce !important;
}

.CalendarDatepicker .react-datepicker__navigation {
  top: 10px;
}

.CalendarDatepicker .react-datepicker__navigation .react-datepicker__navigation-icon:before {
  border-width: 1px 1px 0 0;
  border-color: #000;
}

.CalendarDatepicker .react-datepicker__header {
  background-color: #fff;
  border: none;
  padding-top: 8px;
}

.CalendarDatepicker .react-datepicker__header .react-datepicker__current-month {
  padding-top: 6px;
  font-size: 14px;
}

.CalendarDatepicker .react-datepicker__header .react-datepicker__day-names {
  text-transform: uppercase;
  background-color: #f9fafb;
  margin-top: 6px;
  padding: 4px;
}

.CalendarDatepicker .react-datepicker__header .react-datepicker__day-names .react-datepicker__day-name {
  width: 2.15rem;
}

.CalendarDatepicker .react-datepicker__day--selected, .CalendarDatepicker .react-datepicker__day--range-start, .CalendarDatepicker .react-datepicker__day--in-range {
  background-color: #1678c2;
  border-radius: 5px;
}

.CalendarDatepicker .react-datepicker__day--outside-month {
  color: #aaa;
}

.CalendarDatepicker .react-datepicker__month {
  padding: 8px;
}

.CalendarDatepicker .react-datepicker__triangle {
  display: none;
}

.CalendarDatepicker .react-datepicker__today-button {
  color: #333333de;
  background-color: #f9fafb;
  border: none;
  padding: 6px;
}

.NoAccess {
  text-align: center;
  background: #f7f7f7;
  height: 100vh;
}

.NoAccess h1 {
  padding-top: 33vh;
  font-weight: 300;
}

.CategoryLicenseModal {
  margin: 0;
  padding-top: 0;
}

.CategoryLicenseModal.ui.modal .content {
  background: #fff;
  width: 100%;
  padding: 2rem;
  font-size: 1em;
  line-height: 1.4;
  display: block;
}

.CategoryLicenseModal.ui.modal .content .addLicenseButton {
  color: #fff;
  cursor: pointer;
  background-color: #21ba45;
  border: none;
}

.CategoryLicenseModal.ui.modal .content .addLicenseButton:hover {
  background-color: #21ba45;
}

.CategoryLicenseModal.ui.modal .content .addLicenseButton i {
  color: #fff !important;
  background-color: #1fb142 !important;
}

.CategoryLicenseModal.ui.modal .actions {
  text-align: right;
  background: #fff;
  border-top: 1px solid #e2e2e3;
  justify-content: space-between;
  padding: 18px 24px;
  display: flex;
}

.CategoryLicenseModal .ui.form .fields {
  align-items: flex-end;
}

.CategoryLicenseModal .search {
  align-items: center;
  width: 100%;
  display: flex;
}

.CategoryLicenseModal .search button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  flex: none;
  height: 38px;
  padding: 0 12.3px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 0 !important;
}

.CategoryLicenseModal .search button i.icon {
  opacity: 1;
}

.CategoryLicenseModal .search input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.CategoryLicenseModal .search.rounded input {
  border-radius: 4px;
}

.CategoryLicenseModal .action-buttons {
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  width: 100%;
  display: flex;
}

.CategoryLicenseModal .radio-button {
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  border: 1px solid #dededf !important;
  padding: 10px !important;
}

.CategoryLicenseModal .radio-button label {
  font-weight: normal !important;
}

.CategoryLicenseModal .react-datepicker__portal {
  width: 100%;
  height: 100%;
}

.CheckList {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  margin-top: 14px;
}

.CheckList.no-border {
  border: none;
  border-bottom: 1px solid #e2e2e3;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  margin-top: 0;
}

.CheckList p {
  margin: 0;
}

.CheckList .CheckList-group:not(:first-child) {
  border-top: 1px solid #e2e2e3;
}

.CheckList .CheckList-group:empty + .CheckList-group {
  border: none;
}

.CheckList .CheckList-group:empty {
  display: none;
}

.CheckList .CheckList-group .CheckList-group_header {
  background-color: #f9fafb;
  border-bottom: 1px solid #e2e2e3;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  display: flex;
}

.CheckList .CheckList-group .CheckList-group_header p {
  font-size: 14px;
  font-weight: bold;
}

.CheckList .CheckListItem {
  flex-direction: column;
  gap: 3px;
  padding: 7px 14px;
  display: flex;
}

.CheckList .CheckListItem-actions {
  align-items: flex-end;
  gap: 5px;
  display: flex;
}

.CheckList .CheckListItem-actions .WarrantyPinType__pin-type-container {
  cursor: pointer;
}

.CheckList .CheckListItem-item-status {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  width: 32px;
  height: 27px;
  padding-left: 7px;
}

.CheckList .CheckListItem:not(:last-child) {
  border-bottom: 1px solid #e2e2e3;
}

.CheckList .CheckListItem .title-row {
  flex-grow: 2;
  padding-left: 8px;
  display: flex;
}

.CheckList .CheckListItem p {
  font-size: 12.6px;
}

.CheckList .CheckListItem p strong {
  margin-right: 12px;
}

.CheckList .CheckListItem p small {
  color: #767676;
  margin-left: 3px;
  font-size: 9px;
}

.CheckList .CheckListItem .checklist-media {
  align-items: center;
  gap: 12px;
  display: flex;
}

.CheckList .CheckListItem .title-container {
  grid-template-columns: 200px 1fr max-content;
  gap: 20px;
  display: grid;
}

.CheckList .CheckListItem .title-container .status-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  align-items: center;
  height: 27px;
  display: flex;
}

.CheckList .CheckListItem .title-container .status-container .checklist-item-status i.icon {
  height: auto;
  margin-right: 0;
}

.CheckList .CheckListItem .title-container .status-container .status-dropdown {
  border-right: none;
}

.CheckList .CheckListItem .title-container .status-container .status-dropdown i.icon.size-m {
  margin-top: -12px;
  font-size: 12px;
}

.CheckList .CheckListItem .title-container .status-container .status-dropdown .menu {
  box-shadow: none;
  display: none;
  border: none !important;
}

.CheckList .CheckListItem .title-container .status-container .status-dropdown .visible.transition {
  margin-top: 2px;
}

.CheckList .CheckListItem .title-container .status-container .status-dropdown .visible.transition div {
  box-shadow: none;
  background: #fff;
  border: 1px solid #e2e2e3;
}

.CheckList .CheckListItem .title-container .status-container .status-dropdown .visible.transition div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.CheckList .CheckListItem .title-container .status-container .status-dropdown .visible.transition div:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.CheckList .CheckListItem .title-container .status-container .action-dropdown {
  opacity: 1;
  border-right: none;
}

.CheckList .CheckListItem .title-container .status-container .action-dropdown i.icon {
  margin-top: -8px;
}

.CheckList .CheckListItem .title-container .status-container .action-dropdown .menu {
  box-shadow: none;
  background-color: #0000;
  display: none;
  border: none !important;
}

.CheckList .CheckListItem .title-container .status-container .action-dropdown .visible.transition {
  width: fit-content;
  margin-top: 2px;
  box-shadow: none !important;
}

.CheckList .CheckListItem .title-container .status-container .action-dropdown .visible.transition :hover {
  background-color: #fafafa;
}

.CheckList .CheckListItem .title-container .status-container .action-dropdown .visible.transition div {
  width: auto;
  min-width: 80px;
  box-shadow: none;
  white-space: nowrap;
  background-color: #fff;
  border: 1px solid #e2e2e3;
  justify-content: left;
  align-items: center;
  height: 29px;
  padding: 0 10px;
  font-weight: bold;
  display: flex;
}

.CheckList .CheckListItem .title-container .status-container .action-dropdown .visible.transition div i.icon {
  margin: 10px 10px 10px 0;
}

.CheckList .CheckListItem .title-container .status-container .action-dropdown .visible.transition div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.CheckList .CheckListItem .title-container .status-container .action-dropdown .visible.transition div:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.CheckList .CheckListItem .title-container .status-container i.icon {
  margin: 0;
}

.CheckList .CheckListItem .title-container .status-container i.icon.pointer {
  cursor: pointer;
}

.CheckList .CheckListItem .title-container .status-container div {
  border-left: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 100%;
  display: flex;
}

.CheckList .CheckListItem .title-container .status-container div:first-child {
  border-left: none;
}

.CheckList-question-result-ok, .CheckList-question-result-ok-with-remarks {
  color: #48913d !important;
}

.ActionModalSelector .ui.disabled.dropdown, .ActionModalSelector .ui.dropdown .menu > .disabled.item {
  pointer-events: none;
  opacity: 1;
  color: #979797;
}

.ActionModalSelector .action-disconnect-checklist-item-radius {
  border-radius: 0 0 4px 4px;
}

.ActionModalSelector .action-disconnect-checklist-other-item-radius {
  border-radius: 4px 4px 0 0;
}

.circle-icon-container .circle-icon {
  border-radius: 360px;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
}

.circle-icon-container .circle-icon.disabled {
  background-color: #70707029;
}

.circle-icon-container .circle-icon.disabled i.small.icon {
  color: #767676 !important;
}

.circle-icon-container .circle-icon i.small.icon {
  margin: 0;
  font-size: 12px;
}

.circle-icon-container .blue {
  color: #2185d0;
}

.circle-icon-container .bluebg {
  background-color: #2185d033;
}

.circle-icon-container .blue-border {
  border: 2px solid #2185d033;
}

.circle-icon-container .orange {
  color: #f2711c;
}

.circle-icon-container .orangebg {
  background-color: #f2711c33;
}

.circle-icon-container .orange-border {
  border: 2px solid #f2711c33;
}

.circle-icon-container .cup-brown {
  color: #a5673f;
}

.circle-icon-container .cup-brownbg {
  background-color: #a5673f33;
}

.circle-icon-container .green {
  color: #21ba45;
}

.circle-icon-container .greenbg {
  background-color: #21ba4533;
}

.circle-icon-container .green-border {
  border: 2px solid #21ba4533;
}

.circle-icon-container .red {
  color: #db2828;
}

.circle-icon-container .redbg {
  background-color: #db282833;
}

.circle-icon-container .red-border {
  border: 2px solid #db282833;
}

.circle-icon-container i.small.icon.shopping.cart.yellow {
  color: #cc0 !important;
}

.circle-icon-container .circle-icon.yellowbg.yellow-border.disabled i.small.icon.shopping.cart.yellow {
  color: #767676 !important;
}

.circle-icon-container .yellowbg {
  background-color: #cc03;
}

.circle-icon-container .yellow-border {
  border: 2px solid #cc03;
}

.ConnectInterventionModal > div.header.ConnectInterventionModal__header {
  justify-content: space-between;
  padding: 25px;
}

.ConnectInterventionModal__intervention {
  padding: 8px 0;
}

.ConnectInterventionModal__intervention:not(:last-of-type) {
  border-bottom: 1px solid #dedede;
}

.ConnectInterventionModal__intervention {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.ConnectInterventionModal__linkButton {
  max-width: 30px;
}

.ConnectInterventionModal__linkButton i {
  transform: translateX(-5px) !important;
}

.CopyToClipboard__container {
  flex-direction: row;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.CopyToClipboard__text {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.CopyToClipboard__icon {
  cursor: pointer;
  color: #21ba45;
  opacity: 0;
  transition: opacity .2s;
  display: none;
}

.CopyToClipboard__icon.visible {
  opacity: 1;
  display: inline-block;
}

.CopyToClipboard__content {
  word-break: break-all;
  max-width: 100%;
  max-height: inherit;
}

.ui.tiny.modal.transition.visible.active.CustomConfirm .header {
  color: #fff;
}

.ui.tiny.modal.transition.visible.active.CustomConfirm .header.danger {
  background-color: #ff0202;
}

.ui.tiny.modal.transition.visible.active.CustomConfirm .header.warning {
  background-color: #ffba39;
}

.ui.tiny.modal.transition.visible.active.CustomConfirm .content {
  color: #000c;
  text-align: left;
  font-size: 14px;
}

.ui.tiny.modal.transition.visible.active.CustomConfirm .content div.error {
  color: #ff0202;
  margin-top: 10px;
}

.ui.tiny.modal.transition.visible.active.CustomConfirm .content .CustomConfirm-section {
  justify-content: space-around;
  align-items: center;
  display: flex;
}

.ui.tiny.modal.transition.visible.active.CustomConfirm .content.danger form {
  margin-top: 10px;
}

.ui.tiny.modal.transition.visible.active.CustomConfirm .content.danger form .ui.selection.dropdown {
  width: 100%;
}

.ui.tiny.modal.transition.visible.active.CustomConfirm .actions {
  justify-content: flex-end;
}

.ui.tiny.modal.transition.visible.active.CustomConfirm .actions .danger, .ui.tiny.modal.transition.visible.active.CustomConfirm .actions .warning {
  color: #fff;
}

.ui.tiny.modal.transition.visible.active.CustomConfirm .actions .danger {
  background-color: #ff0202;
}

.ui.tiny.modal.transition.visible.active.CustomConfirm .actions .warning {
  background-color: #ffba39;
}

.CustomerCard__customer-card-container {
  justify-content: flex-end;
  display: flex;
}

.CustomerCard__customer-card-user {
  color: #fff;
  background-color: #e6d0e6;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 25px;
  display: flex;
}

.CustomerCard__customer-card-icon {
  color: #801280;
  margin: 4px auto auto !important;
}

.CustomerCard__customer-card-no-box-shadow {
  box-shadow: none !important;
}

.CustomerDetail {
  padding: 0 1em;
}

.CustomerDetail .row {
  border-bottom: 1px solid #eee;
}

.CustomerDetail .row strong {
  margin-right: 1em;
}

.CustomerDetail .preferred-channel-button {
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  min-width: 70px;
  padding: 5px 8px;
}

.CustomerDetail .preferred-channel-button .icon {
  margin-right: 1px;
  font-size: 20px;
}

.CustomerDetail .preferred-channel-button span {
  vertical-align: 2px;
}

.CustomerDetail .preferred-channel-button:first-child {
  margin-right: 10px;
}

.CustomerDetail .active-preferred-channel {
  color: #fff;
  background-color: #55aa0d;
}

.CustomerEntities {
  margin-top: 20px;
}

.CustomerEntities .tab {
  padding: 0 !important;
}

.CustomerEntities .ReactTable .rt-tbody {
  overflow-y: hidden;
}

.CustomerModal .CustomerModal-header {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.CustomerModal .CustomerModal-header button {
  width: 35px;
  margin-right: 20px;
}

.CustomerModal .CustomerModal-header button i.icon {
  margin-top: -4px !important;
}

.CustomerModal .content {
  padding: 0 1.3rem !important;
}

.CustomerModal .CustomerModal-footer {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  display: flex;
}

.CustomerModal .Loader-Placeholder {
  color: #9f9f9f;
  text-align: center;
  margin-top: 2em;
  padding: 50px 0;
  font-size: 1.3em;
  font-weight: 700;
}

.CustomerModal .Loader-Placeholder section {
  margin-top: 25px;
}

.CustomerModal .Loader-Placeholder .icon {
  margin-bottom: 15px;
  font-size: 3em;
}

.CustomerModal .customer_detail_dialog .customer_sys_info {
  background-color: #efefef;
  border: 1px solid #e4e4e4;
  margin-bottom: 10px;
  margin-right: 10px;
  padding: 7px 14px;
  font-size: 14px;
  display: inline-block;
}

.CustomerModal .customer_sys {
  margin: 1em 0 1em 0;
}

.CustomerModal .customer_sys .customer_sys_info {
  background-color: #eee;
  margin-right: 1em;
  padding: .5em 1em;
  display: inline-block;
}

.CustomerModal .CustomerDetail .lease-company-tag {
  color: #fff;
  background-color: #43ba45;
  border-radius: 3px;
  padding: 5px;
  font-size: 12px;
  margin-right: 10px !important;
}

.CustomerModal .CustomerDetail .lease-company-tag i {
  margin-left: 3.5px !important;
}

.DBB {
  color: #000 !important;
}

.DBB .DBB-secondary-button {
  border-left: 1px solid #e2e2e3;
  align-items: center;
  height: 100%;
  display: flex;
}

.DBB .DBB-label {
  margin-right: 2px;
}

.DBB .checkedTire {
  border-radius: 50%;
  width: 15px;
  height: 15px;
  margin-right: 3px;
  display: inline-block;
  position: relative;
}

.DBB .checkedTire i.icon.circle.check {
  transform-origin: 100% 100%;
  background-color: #ffffffb3;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  bottom: 3px;
  right: 2px;
  transform: scale(.5);
  padding: 1px 0 0 1px !important;
}

.DBB .checkedTire i.icon.tire {
  padding-top: 4px !important;
}

.DBB .checkedTire.red {
  background-color: #ff020233;
  outline: 2px solid #ff020233;
}

.DBB .checkedTire.green {
  background-color: #8cc34a99;
  outline: 2px solid #8cc34a99;
}

.DBB .checkedTire.orange {
  background-color: #ffc00899;
  outline: 2px solid #ffc00899;
}

.DBB i.icon.arrow.rotate {
  padding-left: 8px !important;
}

.DBB i.icon.arrow.up.right.from.square {
  margin-right: 4px !important;
}

.DBB.green {
  background: #ccecd6 !important;
  border: 1px solid #21ba45 !important;
}

.DBB.green .DBB-secondary-button {
  border-left: 1px solid #21ba45;
}

.DBB.orange {
  background: #fff5ee !important;
  border: 1px solid #ffc300 !important;
}

.DBB.orange .DBB-secondary-button {
  border-left: 1px solid #ffc300;
}

.DBB.red {
  background: #fef0e7 !important;
  border: 1px solid #ff0202 !important;
}

.DBB.red .DBB-secondary-button {
  border-left: 1px solid #ff0202;
}

.ui.wide.popup.DBBbutton {
  max-width: 500px;
  padding: 8px 10.5px;
}

.ui.wide.popup.DBBbutton.red, .ui.wide.popup.DBBbutton.red:before {
  background-color: #fef0e7 !important;
}

.ui.wide.popup.DBBbutton.orange, .ui.wide.popup.DBBbutton.orange:before {
  background-color: #fff5ee !important;
}

.ui.wide.popup.DBBbutton .DBBPopup {
  letter-spacing: 0;
  color: #000;
  font-size: 13px;
  font-family: Lato !important;
}

.ui.wide.popup.DBBbutton .DBBPopup span {
  font-weight: bold;
}

.DetailsCards-container {
  border: 1px solid #e0e1e2;
  border-radius: 10px;
  padding: 15px 21px;
}

.DetailsCards-container .ui.button.icon.new-intervention i.icon {
  margin: -2.2px 0 0 !important;
}

.DetailsCards-container .cancel-appointment {
  justify-content: center;
  width: 50px;
  background-color: #c11 !important;
  border-color: #c11 !important;
  align-items: center !important;
  display: flex !important;
}

.DetailsCards-container .cancel-appointment img {
  width: 16px;
  height: 16px;
}

.DetailsCards-container .expand-bar {
  border-radius: 4px;
  flex: 1;
  align-items: center;
  gap: 5px;
  padding: 5px;
  display: flex;
}

.DetailsCards-container .checklist-title {
  max-width: calc(100vw - 280px) !important;
}

.DetailsCards-container.button {
  background-color: #f9fafb;
}

.DetailsCards-container.button .row h3 {
  text-transform: none;
  font-size: 14.5px;
  font-weight: 500;
}

.DetailsCards-container .row {
  align-items: center;
  gap: 13px;
  display: flex;
}

.DetailsCards-container .row h3 {
  text-transform: uppercase;
  flex: none;
  max-width: calc(100vw - 350px);
  margin: 0;
}

.DetailsCards-container .row i.icon {
  margin-top: -5px;
  font-size: 18px;
}

.DetailsCards-container .show {
  height: auto;
}

.DetailsCards-container .hide {
  height: 0;
  position: relative;
  overflow: hidden;
}

.DetailsCards-container .pointer {
  cursor: pointer;
}

.car-card-container.small {
  padding: 17px 19px;
}

.Editable {
  width: 100%;
  font-size: 12.6px;
}

.Editable.disabled p:hover {
  cursor: default;
  background-color: inherit !important;
}

.Editable.placeholder {
  color: #ccc;
}

.Editable p {
  min-height: 24px;
}

.Editable p:hover {
  cursor: text;
  background-color: #f9fafb;
  border-radius: 4px;
}

.Editable input {
  background-color: #f9fafb;
  border: 1px solid #96c8da;
  border-radius: 4px;
  width: 100%;
  padding: 2px;
  font-family: Lato;
  font-size: 12.6px;
}

.Editable input:focus {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  outline: 0 !important;
}

.EllipsisText {
  text-overflow: ellipsis;
  overflow: hidden;
}

.ErrorFallback {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  overflow-y: auto;
}

.ErrorFallback-overlay {
  background: #134e5e;
  background: -webkit-linear-gradient(to right, #71b280, #134e5e);
  background: linear-gradient(to right, #71b280, #134e5e);
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.ErrorFallback-container {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 790px;
  display: flex;
}

.ErrorFallback-car-repair {
  position: relative;
}

.ErrorFallback-car-repair img {
  width: 100%;
}

.ErrorFallback-svg-icon {
  max-height: 93px;
  position: absolute;
  bottom: 15px;
  right: 0;
  box-shadow: 0 8px 10px #2f2c36;
}

.ErrorFallback-error-text {
  letter-spacing: 0;
  color: #fff;
  background: #000;
  border-radius: 5px;
  padding: 8px 30px;
  font: bold 21px Lato;
  position: absolute;
  bottom: -8px;
  right: 0;
  box-shadow: 8px 8px 10px #2f2c36;
}

.ErrorFallback-action-buttons {
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin-top: 25px;
  margin-bottom: 60px;
  display: flex;
}

.ErrorFallback-action-buttons .ui.button {
  letter-spacing: 0;
  opacity: 1;
  border-radius: 10px;
  height: 63px;
  font: 600 30px / 16px Lato;
  box-shadow: 0 3px 6px #00000029;
}

.ErrorFallback-action-buttons .ui.button.icon.labeled {
  color: #fff;
  background-color: #1dc05f;
}

.ErrorFallback-action-buttons .ui.button.icon.labeled:hover {
  background-color: #1dc05f;
}

.ErrorFallback-action-buttons .ui.button.icon.labeled i {
  color: #fff !important;
  background-color: #46b245 !important;
}

.ErrorFallback-action-buttons .ui.button.light {
  color: #1ec05f;
  padding: 0 50px;
}

.ErrorFallback-logo h1 {
  color: #fff;
  letter-spacing: -5.9px;
  margin: 0;
  font-family: Arial;
  font-size: 118px;
  font-weight: 700;
}

.ErrorFallback-logo h1 span {
  color: #1fbf5f;
}

.ErrorFallback-logo h3 {
  color: #fff;
  letter-spacing: -1.75px;
  margin: 0;
  padding: 35px 0 0 8px;
  font-family: Arial;
  font-size: 35px;
  font-weight: 300;
}

.ExportDataModal__export-file-container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 24px;
  display: flex;
}

.ExportDataModal__export-modal-download-button-container {
  gap: 16px;
  display: flex;
}

.ExportDataModal__export-modal-download-button {
  background-color: #e0e1e2 !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 11px !important;
  display: flex !important;
}

.ExportDataModal__export-modal-close-button-container {
  margin: 1px 1px 0 5px !important;
}

.ExportDataModal__export-modal-close-button {
  justify-content: center !important;
  align-items: center !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
}

.ExportDataModal__export-modal-download-text {
  color: #414141 !important;
  font-weight: 500 !important;
}

.ExportDataModal__export-modal-content-text {
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 19px 0;
  font-size: 17px;
  display: flex;
}

.FileDragDrop {
  text-align: center;
  border: 1px dotted #dededf;
  width: 100%;
  height: 61px;
  padding-top: 6px;
  overflow: hidden;
}

.FileDragDrop.active {
  opacity: .3;
  border: 2px dotted #1f1f1f;
}

.FileDragDrop input {
  visibility: hidden;
  height: 0;
}

.FileDragDrop span {
  font-size: 14px;
  font-weight: 600;
}

.FileDragDrop .browse-text {
  color: #2185d0;
  cursor: pointer;
  text-decoration: underline;
}

.FileDragDrop .max-file-size {
  color: #b5b5b5;
}

.FileDragDrop.error {
  border-color: red;
}

.AppointmentNoteAttachments .appointment-note-attachments {
  text-align: center;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  height: 25px;
  padding: 0 6px;
  display: flex;
}

.AppointmentNoteAttachments .appointment-note-attachments i.icon {
  height: auto;
  margin-right: 3px;
  font-size: .8em;
}

.AppointmentNoteAttachments .appointment-note-attachments div {
  color: #5d5d5d;
  font-size: 11px;
  display: inline-block;
  position: relative;
}

.AppointmentNoteAttachments .ui.floating.multiple.dropdown.action-dropdown {
  padding: 0;
}

.AppointmentNoteAttachments .ui.floating.multiple.dropdown.action-dropdown .menu {
  max-height: 350px;
  overflow-y: auto;
}

.AppointmentNoteAttachments .ui.floating.multiple.dropdown.action-dropdown i.icon.image {
  margin-top: 1px !important;
}

.AppointmentNoteAttachments .ui.floating.multiple.dropdown.action-dropdown .dropdown-title {
  color: #5281bf;
  direction: rtl;
}

.AppointmentNoteAttachments .ui.floating.multiple.dropdown.action-dropdown .dropdown-info {
  margin-top: 5px;
}

.AppointmentNoteAttachments .ui.floating.multiple.dropdown.action-dropdown .dropdown-info p {
  color: #726c6c;
  font-size: 12.6px;
  line-height: 16px;
}

.AppointmentNoteAttachments .dropdown-item-name-container {
  align-items: center;
  max-width: 300px;
  display: flex;
}

.AppointmentNoteAttachments .file-drop-select-all-container {
  align-items: center;
  display: flex;
}

.AppointmentNoteAttachments .files-url-checkbox {
  margin-right: 10px;
}

.AppointmentNoteAttachments button.ui.green.button.files-url-download-btn {
  width: 90%;
  margin: 5px auto;
  display: block;
}

.AppointmentSpecialIndicators-container {
  justify-content: flex-end;
  column-gap: 4px;
  display: flex;
}

.AppointmentSpecialIndicators-container .ui.red.label {
  color: #ff0202 !important;
  background-color: #ff020233 !important;
  border-color: #ff0202 !important;
}

.AppointmentSpecialIndicators-container .ui.green.label {
  color: #48913d !important;
  background-color: #48913d33 !important;
  border-color: #48913d !important;
}

.AppointmentSpecialIndicators-container .ui.orange.label {
  color: #ffba39 !important;
  background-color: #ffba3933 !important;
  border-color: #ffba39 !important;
}

.AppointmentSpecialIndicators-container .ui.blue.label {
  color: #2185d0 !important;
  background-color: #2185d033 !important;
  border-color: #2185d0 !important;
}

.AppointmentSpecialIndicators-container .FilterIcon-kiosk-label {
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 5px;
  display: flex;
  color: #fff !important;
  background-color: #21ba45 !important;
}

.AppointmentSpecialIndicators-container i.icon.circle.check {
  transform-origin: 100% 100%;
  background-color: #fff;
  border-radius: 5px;
  position: absolute;
  right: 4px;
  transform: scale(.6);
}

.AppointmentSpecialIndicators-container .checkedTire {
  position: relative;
}

.form-checkbox-wrapper {
  cursor: pointer;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  display: flex;
}

.form-checkbox-wrapper.disabled {
  cursor: not-allowed;
}

.aceEditorContainer {
  width: "100%";
  border: 1px solid #f0f0f0;
}

.aceEditorContainerInvalid {
  border: 1px solid red;
}

.aceEditor {
  width: "100%";
  height: "300px";
  font-size: 14px;
  line-height: 2;
}

.ace-github .ace_print-margin, .ace_layer.ace_print-margin-layer {
  display: none;
}

.ace_placeholder {
  color: gray !important;
}

.ace-github .ace_gutter {
  color: #000c;
}

.ace_editor.ace_hidpi.ace-tm textarea {
  line-height: 2;
  font-size: 14px !important;
}

.UploadImage .preview-btn {
  margin-left: 5px;
}

.upload-container .ui.input {
  position: absolute;
}

.upload-container .UploadImage.new {
  border: 1px solid #dededf;
  border-radius: 4px;
  align-items: center;
  height: 36px;
  display: flex;
}

.upload-container .UploadImage.new .button {
  cursor: pointer;
  background-color: #e0e1e2;
  align-items: center;
  height: 36px;
  padding: 0 15px;
  display: flex;
}

.upload-container .UploadImage.new .button .btn-text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.upload-container .UploadImage.new .fileInput-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 178px;
  max-width: 400px;
  margin-left: 16px;
  font-size: 14px;
  overflow: hidden;
}

.upload-container .upload-view {
  background-color: #e8e8e8;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 240px;
  margin-top: 24px;
  display: flex;
  position: relative;
}

.upload-container .upload-view img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.upload-container .upload-view .delete-container {
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 25px;
  display: flex;
  position: absolute;
  bottom: 1px;
  right: 1px;
}

.upload-container .upload-view .delete-container i.icon {
  margin: -10px 0 0;
}

.upload-container .ui.input > input {
  display: none;
}

.Snooze-Images {
  align-items: center;
  gap: 12px;
  display: flex;
  overflow-x: auto;
}

.Snooze-Images .image-view {
  background-color: #f9fafb;
  border: 1px solid #e2e2e3;
  flex-direction: column;
  max-width: 225px;
  display: flex;
  overflow: hidden;
}

.Snooze-Images .image-view .ui.divider {
  margin: 0;
}

.Snooze-Images .image-view img {
  object-fit: cover;
  border: 3px solid #f9fafb;
  width: 100%;
  height: 130px;
}

.Snooze-Images .image-view .btn-group {
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  margin: 5px;
  display: flex;
}

.Snooze-Images .image-view .btn-group .image-wrapper {
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #d4d4d5;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 25px;
  display: flex;
}

.Snooze-Images .image-view .btn-group .image-wrapper:hover {
  background-color: #ccc;
}

.Snooze-Images .image-view .btn-group .image-wrapper i.icon {
  height: auto;
  margin-right: 0;
}

.InterventionSubitemsModal .actions {
  justify-content: flex-end !important;
}

.InterventionSubitemsModal .ui.form .fields {
  justify-content: space-between;
  padding: 0 7px;
  display: flex;
}

.ui.visible.dimmer .InterventionSubitemsModal {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.DealerLocationDropdown-wrapper {
  display: flex;
}

.DealerLocationDropdown-wrapper .labeled.icon.button {
  padding-left: 2.5em !important;
}

.DealerLocationDropdown-wrapper .labeled.icon.button i {
  font-size: 15px;
  margin-top: 2px !important;
  margin-left: 10px !important;
}

.DealerLocationDropdown-wrapper .location-placeholder-icon {
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  position: absolute;
  left: 0;
}

.DealerLocationDropdown-wrapper .LocationDropdown {
  text-align: left;
  margin: 0 10px;
  box-shadow: none !important;
  background-color: #0000 !important;
}

.DealerLocationDropdown-wrapper .LocationDropdown .active {
  background-color: #f7f7f7 !important;
  font-weight: 600 !important;
}

.DealerLocationDropdown-wrapper .LocationDropdown input {
  padding-top: 5px !important;
}

.DealerLocationDropdown-wrapper .LocationDropdown .locationItem .icon {
  background-color: #0000 !important;
  font-size: 13px !important;
}

.DealerLocationDropdown-wrapper .LocationDropdown .locationItem span {
  color: #414141;
  font-size: 12.6px;
  font-weight: 400;
}

.last-location-item {
  border-bottom: 1px solid #d9d9da !important;
}

.dealer-dropdown-option {
  font-weight: 600 !important;
}

.Login__gate__container {
  margin-top: 150px !important;
}

.Login__gate__container .Login__gate__container__inner {
  background: #fff;
  width: 525px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 30px;
}

.Login__gate__container .Login__gate__container__inner h1 {
  color: #646464;
  text-align: center;
  font-size: 1.8em;
  font-weight: 300;
}

.Login__gate__container .Login__gate__container__inner h1 span {
  color: #22ba45;
  font-weight: 500;
}

.Login__gate__container .Login__gate__container__inner .Login__gate__container__inner__actions {
  justify-content: space-between;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
}

.Login__gate__container .Login__gate__container__inner .Login__gate__container__inner__actions h2 {
  color: #4b4b4b;
  font-size: 1.5em;
  font-weight: 300;
}

.Login__gate__container .Login__gate__container__inner .Login__gate__container__inner__actions input:focus {
  border-color: #7ab47a;
}

.Login__gate__container .Login__gate__container__inner .Login__gate__container__form {
  padding: 0 30px 30px;
}

.LoginContainer .ui.input.icon-green i {
  color: #48913d !important;
}

.Login__language_container {
  padding: 0 50px 50px;
}

.google-login {
  color: #000;
  cursor: pointer;
  background-color: #fff;
  background-position: 3rem;
  background-repeat: no-repeat;
  background-size: 1.5em;
  border: 1px solid #cacaca;
  border-radius: 5px;
  padding: 1em;
  font-size: 16px;
}

.google-login:hover {
  background-color: #fcfcfc;
}

.reset-password-container {
  text-align: right;
}

.reset-password-container a {
  display: inline !important;
}

.warning-message {
  background: #ffffef no-repeat padding-box padding-box;
  border: 1px solid #a5673f;
  border-radius: 4px;
  padding: 12px;
}

.warning-message p {
  letter-spacing: 0;
  color: #a5673f;
  font: 14px Lato;
}

.QRCodeContainer {
  margin-bottom: 10px;
}

.QRCodeContainer .qr-login {
  background-color: #2348b0;
  height: 43px;
}

.QRCodeContainer .qr-container {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  display: flex;
}

.QRCodeContainer .code-expired-text {
  color: #e03f3f;
}

.QRCodeContainer .code-expiration-text {
  color: gray;
}

.LoginModal {
  max-width: 403px;
}

.LoginModal .dropdown {
  align-items: center;
  min-height: 36px;
  padding: 0 2.1em 0 1em;
  display: flex;
}

.LoginModal .dropdown.icon {
  top: 6px !important;
}

.LoginModal .button {
  height: 42px;
}

.LoginModal .button.light {
  background-position: 12px;
  background-repeat: no-repeat;
  background-size: 20px;
}

.LoginModal #google-login-button .button.light {
  background-image: url(/static/image/g-logo.da6f9c98.png);
}

.LoginModal #microsoft-login-button .button.light {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIyMSIgdmlld0JveD0iMCAwIDIxIDIxIj48dGl0bGU+TVMtU3ltYm9sTG9ja3VwPC90aXRsZT48cmVjdCB4PSIxIiB5PSIxIiB3aWR0aD0iOSIgaGVpZ2h0PSI5IiBmaWxsPSIjZjI1MDIyIi8+PHJlY3QgeD0iMSIgeT0iMTEiIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIGZpbGw9IiMwMGE0ZWYiLz48cmVjdCB4PSIxMSIgeT0iMSIgd2lkdGg9IjkiIGhlaWdodD0iOSIgZmlsbD0iIzdmYmEwMCIvPjxyZWN0IHg9IjExIiB5PSIxMSIgd2lkdGg9IjkiIGhlaWdodD0iOSIgZmlsbD0iI2ZmYjkwMCIvPjwvc3ZnPg==);
  color: #3c4043 !important;
  font-weight: 500 !important;
}

.LoginModal .mt-10 {
  margin-top: 10px;
}

.LoginModal .mt-15 {
  margin-top: 15px;
}

.LoginModal .mt-25 {
  margin-top: 25px;
}

.LoginModal a {
  color: #b5b5b5;
  text-align: right;
  cursor: pointer;
  width: 100%;
  text-decoration: none;
  display: block;
}

.LoginModal h1 {
  color: #fff;
  font-family: Arial;
  font-size: 90px;
  font-weight: bold;
}

.LoginModal h1 span {
  color: #1fbf5f;
}

.LoginModal h3 {
  color: #fff;
  margin: 5px 0 0;
  font-family: Arial;
  font-size: 27px;
  font-weight: bold;
}

.LoginModal .password {
  position: relative;
}

.LoginModal .password .password-icon {
  position: absolute;
  top: 9px;
  right: 10px;
  color: #b5b5b5 !important;
}

.LoginModal .warning-message {
  background: #ffffef no-repeat padding-box padding-box;
  border: 1px solid #a5673f;
  border-radius: 4px;
  padding: 12px;
}

.LoginModal .warning-message p {
  letter-spacing: 0;
  color: #a5673f;
  font: 14px Lato;
}

.mcc-status-0 {
  color: #000;
  background: #fff !important;
}

.mcc-status-1 {
  color: #c6c6c6;
  background: #eaeaea !important;
}

.mcc-status-2 {
  color: red;
  background: #fee !important;
}

.mcc-status-3 {
  color: #0f0;
  background: #efe !important;
}

.mcc-status-4 {
  color: #00f;
  background: #eef !important;
}

.mcc-status-5 {
  color: #ff0;
  background: #ffe !important;
}

.mcc-status-6 {
  color: #f0f;
  background: #fef !important;
}

.mcc-status-default {
  color: #fff;
  background: red !important;
}

.MenuView.ui.vertical.menu {
  scrollbar-width: none;
  background-color: #f9fafb;
  width: 250px;
  overflow-y: auto;
}

.MenuView.ui.vertical.menu .item {
  text-transform: capitalize;
  cursor: pointer;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  font-size: 12px;
  color: #767676 !important;
}

.MenuView.ui.vertical.menu .item .icon, .MenuView.ui.vertical.menu .item .icon:not(.dropdown) {
  margin: 0 .75rem 0 0 !important;
  padding: 0 !important;
  font-size: 1em !important;
}

.MenuView.ui.vertical.menu .item:hover {
  background-color: #0000000d !important;
}

.MenuView.ui.vertical.menu .item.menu-view-item {
  border-bottom: 1px solid #22242626;
  justify-content: flex-start;
  align-items: center;
  padding: .928571em 1.14286em .928571em .5em;
  font-size: 14px;
  display: flex;
  color: #000c !important;
}

.MenuView.ui.vertical.menu .item.menu-view-item.heading {
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #767676 !important;
  background-color: #0000000d !important;
}

.MenuView.ui.vertical.menu .item.menu-view-item.heading .icon, .MenuView.ui.vertical.menu .item.menu-view-item.heading .icon:not(.dropdown) {
  margin: 0 0 0 .75rem !important;
  padding: 0 !important;
  font-size: 1em !important;
}

.MenuView .text-icon {
  margin-left: 1px;
  margin-right: 9px;
  font-size: .75rem;
  font-weight: 600;
}

.Message {
  margin: 0 10px;
}

.Message span {
  font-size: 12.6px;
}

.Message .centered {
  justify-content: center;
  align-items: center;
  gap: 3px;
  display: flex;
}

.nav-bar-wrapper {
  z-index: 6;
  background-color: #f9fafb;
  align-content: center;
  height: 39px;
  margin: auto;
  position: sticky;
  top: 0;
  box-shadow: 0 3px 6px #00000029;
}

.nav-bar-wrapper .route-text {
  align-items: center;
  gap: 5px;
  font-weight: bold;
  display: flex;
}

.nav-bar-wrapper .total-amount {
  font-size: 12.6px;
  margin-top: 2px !important;
}

.nav-bar-wrapper .nav-bar-content {
  justify-content: space-between;
  max-width: 1920px;
  margin: auto;
  padding: 0 20px;
  display: flex;
}

.nav-bar-wrapper .nav-bar-start {
  align-items: center;
  gap: 15px;
  display: flex;
}

.nav-bar-wrapper .nav-bar-start i {
  margin-top: -7px;
}

.nav-bar-wrapper .nav-bar-start h4 {
  margin: 0;
}

.nav-bar-wrapper .nav-bar-start .button {
  cursor: pointer;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  align-items: center;
  height: 26px;
  padding: 0 8px;
  display: flex;
  box-shadow: 0 0 2px #00000029;
}

.nav-bar-wrapper .nav-bar-start .button i.icon {
  margin: -7px 0 0;
}

.nav-bar-wrapper .nav-bar-start .pointer {
  cursor: pointer;
  padding: 1px 0 0 5px;
}

.nav-bar-wrapper .nav-bar-start .pointer .small_profile_icon {
  border: 1px solid #323232;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  margin-top: 8px;
}

.nav-bar-wrapper .nav-bar-start .pointer .small_icon {
  width: 18px;
  height: 18px;
}

.nav-bar-wrapper .nav-bar-start .pointer .menu {
  top: 135% !important;
}

.nav-bar-wrapper .nav-bar-start .pointer .account_dropdown {
  opacity: 1;
  background: #fff no-repeat padding-box padding-box;
  border: 1px solid #e2e2e3;
  border-radius: 10px;
  width: 225px;
  box-shadow: 0 3px 6px #00000029;
}

.nav-bar-wrapper .nav-bar-start .pointer .account_dropdown .item:nth-child(7) {
  border-radius: 0 0 10px 10px;
  background: #f9fafb !important;
}

.nav-bar-wrapper .nav-bar-start .pointer .account_dropdown .divider {
  border-color: #e2e2e3;
  margin: 0;
}

.nav-bar-wrapper .nav-bar-start .pointer .account_dropdown .item {
  color: #000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  line-height: 17px;
  display: flex;
}

.nav-bar-wrapper .nav-bar-start .pointer .account_dropdown .item:not(:first-child) {
  height: 41px;
}

.nav-bar-wrapper .nav-bar-start .pointer .account_dropdown .profile_details {
  pointer-events: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 146px;
  background: #f9fafb !important;
  padding: 1rem !important;
}

.nav-bar-wrapper .nav-bar-start .pointer .account_dropdown .profile_details .huge.icon {
  margin-right: 0;
}

.nav-bar-wrapper .nav-bar-start .pointer .account_dropdown .profile_details .profile_avatar {
  opacity: 1;
  border: 1px solid #767676;
  border-radius: 50%;
  width: 58px;
  height: 58px;
  max-height: unset !important;
  margin: 0 !important;
}

.nav-bar-wrapper .nav-bar-start .pointer .account_dropdown .profile_details h1 {
  letter-spacing: 0;
  color: #000;
  opacity: 1;
  margin: 0;
  font-size: 16px;
  line-height: 19px;
}

.nav-bar-wrapper .nav-bar-start .pointer .account_dropdown .profile_details p {
  letter-spacing: 0;
  color: #414141;
  opacity: 1;
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 17px;
}

.nav-bar-wrapper .nav-bar-dp {
  justify-self: flex-start;
  align-items: center;
  gap: 5px;
  width: auto;
  display: flex;
}

.nav-bar-wrapper .nav-bar-dp .mr-10 {
  margin-right: 10px;
}

.nav-bar-wrapper .nav-bar-dp .dp-container {
  border-radius: 4px;
  align-items: center;
  gap: 2px;
  height: 21px;
  padding: 1px 1px 1px 5.5px;
  display: flex;
}

.nav-bar-wrapper .nav-bar-dp .dp-container .white {
  color: #fff;
}

.nav-bar-wrapper .nav-bar-dp .dp-container i.small.icon {
  margin-top: 0;
}

.nav-bar-wrapper .nav-bar-dp .dp-container .count {
  background-color: #fff;
  border-radius: 0 4px 4px 0;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 100%;
  display: flex;
}

.nav-bar-wrapper .nav-bar-dp .orange {
  background-color: #f49523;
}

.nav-bar-wrapper .nav-bar-dp .pale-yellow {
  background-color: #efc56b;
}

.nav-bar-wrapper .nav-bar-dp .red {
  background-color: #db2828;
}

.nav-bar-wrapper .nav-bar-dp .grey {
  background-color: #5f7d8b;
}

.nav-bar-wrapper .nav-bar-dp .yellow {
  background-color: #f8c02b;
}

.nav-bar-wrapper .nav-bar-dp .sky {
  background-color: #69bec0;
}

.nav-bar-wrapper .nav-bar-dp .pink {
  background-color: #ea2d62;
}

.nav-bar-wrapper .nav-bar-dp .blue {
  background-color: #2d85d0;
}

.nav-bar-wrapper .nav-bar-dp .purple {
  background-color: #6c0699;
}

.nav-bar-wrapper #navbar-portal-container {
  grid-gap: 5px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: auto;
  display: flex;
}

.nav-bar-wrapper .search-container {
  position: relative;
}

.nav-bar-wrapper .search-container .nav-bar-search {
  width: 100%;
  min-width: 500px;
  max-width: 600px;
  height: 26px;
}

.nav-bar-wrapper .search-container .nav-bar-search input {
  background-color: #f9fafb;
  font-size: 12.6px;
}

.nav-bar-wrapper .search-container .nav-bar-search i.icon {
  font-size: 10px;
}

.nav-bar-wrapper .search-container .list-view {
  cursor: pointer;
  position: absolute;
  top: 2px;
  right: 5px;
}

.nav-bar-wrapper .nav-bar-map {
  width: auto;
  min-width: 200px;
  max-width: 600px;
  height: 26px;
}

.nav-bar-wrapper .nav-bar-map input {
  background-color: #f9fafb;
  padding-left: 12px;
  font-size: 12.6px;
}

.nav-bar-wrapper .nav-bar-map i.icon {
  font-size: 10px;
  opacity: 1 !important;
}

.nav-bar-wrapper .manufacturer-link-wrapper {
  position: relative;
}

.nav-bar-wrapper .manufacturer-link-wrapper .manufacturer-count {
  color: #fff;
  background-color: #c83627;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 15px;
  height: 15px;
  font: bold 7px / 12px Lato;
  display: flex;
  position: absolute;
  bottom: 0;
  right: -5px;
}

.status-filters-wrapper {
  flex-direction: row;
  gap: 4px;
  display: flex;
}

.status-filters-wrapper .StatusFilters-buttons {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  display: flex;
}

.status-filters-wrapper .StatusFilters-buttons .filter-status-face-icon {
  margin-top: 2px;
}

.status-filters-wrapper .StatusFilters-buttons .filter-status-face-icon img {
  width: 18px;
  height: 18px;
}

.status-filters-wrapper .StatusFilters-buttons button {
  cursor: pointer;
  width: 34px;
  height: 30px;
  transition: opacity .1s ease-in-out;
  color: #000 !important;
}

.status-filters-wrapper .StatusFilters-buttons button:hover {
  opacity: .5;
}

.status-filters-wrapper .StatusFilters-buttons button.ui.button.af i.outOfShop {
  margin-left: -20px !important;
}

.CreateUserModal .lease-toggle {
  margin-left: -10px;
  display: flex;
  transform: scale(.7);
}

.CreateUserModal .dpo-disabled {
  background: #2185d08a !important;
}

.CreateUserModal .strength-meter {
  background: #ddd;
  border-radius: 2px;
  height: 3px;
  margin: 7px 0;
  position: relative;
}

.CreateUserModal .strength-meter:before, .CreateUserModal .strength-meter:after {
  content: "";
  height: inherit;
  z-index: 10;
  background: none;
  border: 0 solid #fff;
  border-width: 0 6px;
  width: calc(20% + 6px);
  display: block;
  position: absolute;
}

.CreateUserModal .strength-meter:before {
  left: calc(20% - 3px);
}

.CreateUserModal .strength-meter:after {
  right: calc(20% - 3px);
}

.CreateUserModal .strength-meter .strength-meter-fill {
  height: inherit;
  border-radius: inherit;
  background: none;
  width: 0;
  transition: width .5s ease-in-out, background .25s;
  position: absolute;
}

.CreateUserModal .strength-meter .strength-meter-fill[data-strength="0"] {
  background: #8b0000;
  width: 20%;
}

.CreateUserModal .strength-meter .strength-meter-fill[data-strength="1"] {
  background: #ff4500;
  width: 40%;
}

.CreateUserModal .strength-meter .strength-meter-fill[data-strength="2"] {
  background: orange;
  width: 60%;
}

.CreateUserModal .strength-meter .strength-meter-fill[data-strength="3"] {
  background: orange;
  width: 80%;
}

.CreateUserModal .strength-meter .strength-meter-fill[data-strength="4"] {
  background: green;
  width: 100%;
}

.CreateUserModal .padding-container {
  padding: 2rem;
}

.CreateUserModal .header-container {
  justify-content: space-between;
  display: flex;
}

.CreateUserModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.CreateUserModal .header-checkbox-container {
  gap: 10px;
  font-weight: bold;
  display: flex;
}

.CreateUserModal .password-checkmark-icon-container {
  padding: 2px 15px 2px 2px;
}

.CreateUserModal .action-buttons-container {
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.CreateUserModal .delete-and-dpo-container {
  align-items: center;
  gap: 12px;
  display: flex;
}

.CreateUserModal .delete-and-dpo-container.with-actions {
  justify-content: space-between;
}

.CreateUserModal .delete-and-dpo-container.no-actions {
  justify-content: flex-end;
}

.CreateUserModal .actions-right {
  gap: 8px;
  display: flex;
}

.FilterDatePicker {
  flex: 1;
}

.FilterDatePicker .react-datepicker-wrapper {
  width: 100% !important;
}

.FilterDatePicker__custom-input-container {
  cursor: pointer;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  height: 100%;
  padding: 6px 0;
}

.FilterDatePicker__custom-input-container:hover {
  box-shadow: none;
  border-color: #22242659;
}

.FilterDatePicker__custom-input-text {
  white-space: nowrap;
  color: #b5b5b5;
  margin-left: 14px;
}

.FilterDatePicker__custom-input-selected-value {
  color: #000000de;
}

.PairUsers .action-buttons-container {
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  display: flex;
}

.PairUsers .paired-options-container {
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 15px 0;
  display: flex;
}

.PairUsers .paired-options-container-dropdowns {
  gap: 10px;
  width: 100%;
  display: flex;
}

.PairUsers .add-new-paired-option {
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  display: flex;
}

.UsersDashboardFilters__first-toolbar-container {
  align-items: flex-end;
  display: flex;
}

.UsersDashboardFilters__first-toolbar-container .ui.grid > .column:not(.row) {
  padding-bottom: 0;
}

.UsersDashboardFilters__second-toolbar-container {
  display: flex;
}

.UsersDashboardFilters__second-toolbar-container .ui.grid > .column:not(.row) {
  padding-top: 0;
}

.UsersDashboardFilters__toolbar-reset-button-container {
  align-self: flex-start;
  margin-top: 15px;
  margin-right: 12px;
}

.UsersDashboardFilters__toolbar-grid {
  width: 100% !important;
  margin: 0 9px 0 22px !important;
}

.UsersDashboardFilters__right-gutter {
  padding-right: 4.5px !important;
}

.UsersDashboardFilters__left-gutter {
  padding-left: 4.5px !important;
}

.UsersDashboardFilters__no-right-gutter {
  padding-right: 0 !important;
}

.UsersDashboardFilters__no-left-gutter {
  padding-left: 0 !important;
}

.UsersDashboardFilters__action-button-container {
  height: 38px !important;
}

.UsersDashboardFilters__pair-user-text {
  white-space: nowrap;
  color: #000;
  margin-right: 11px;
}

.UsersDashboardFilters__add-user-text {
  white-space: nowrap;
  color: #000;
  align-items: center;
  margin-left: 11px;
  display: flex;
}

.UsersDashboardFilters__add-user-text-container {
  border-left: 1px solid #e2e2e3;
  height: 36px;
  margin-left: 6px;
  display: flex;
  position: relative;
  top: -10px;
}

.UsersDashboardFilters__add-user-icon {
  border-right: 0 !important;
  margin-top: 2px !important;
  margin-left: 11px !important;
}

.UsersDashboardFilters__add-user-icon-text-container {
  margin-right: 11px;
  display: flex;
}

.UsersDashboardFilters__pair-add-users-container {
  align-self: stretch;
  align-items: flex-start;
  gap: 10px;
  margin-left: 20px;
  margin-right: -20px;
  padding-top: 1rem;
  display: flex;
}

.UsersDashboardFilters__pair-users-container {
  flex-direction: row;
  height: 38px;
  display: flex;
}

.UsersDashboardFilters__pair-users-container .ui.fluid[class*="left labeled"].icon.button, .UsersDashboardFilters__pair-users-container .ui.fluid[class*="right labeled"].icon.button {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.UsersDashboardFilters__pair-users-container .action-button {
  border-right: none !important;
  border-radius: 4px 0 0 4px !important;
  justify-content: center !important;
  height: 100% !important;
  display: flex !important;
}

.UsersDashboardFilters__pair-users-container .icon-text-container {
  white-space: nowrap;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  display: flex;
}

.UsersDashboardFilters__pair-users-container .pair-icon {
  border-right: none !important;
  margin-left: 11px !important;
}

.UsersDashboardFilters__pair-users-container .ui.disabled.dropdown, .UsersDashboardFilters__pair-users-container .ui.dropdown .menu > .disabled.item {
  cursor: default;
  pointer-events: none;
  opacity: .45;
  border: 1px solid #c4c4c4 !important;
}

.UsersDashboardFilters__pair-users-container .pair-users-dropdown {
  justify-content: center;
  align-items: center;
  width: 36px;
  display: flex;
  border-radius: 0 4px 4px 0 !important;
  padding-top: 4px !important;
}

.UsersDashboardFilters__dates-container {
  gap: 10px;
  display: flex;
}

.PasswordCheckmarkIcon .icon-style {
  margin-top: 8px !important;
  font-size: 1.15em !important;
  position: absolute !important;
}

.UserForm .password-outer-container {
  display: flex;
}

.UserForm .password-inner-container {
  flex: 1;
}

.UserForm .password-show-icon-container {
  cursor: pointer;
  position: relative;
}

.UserForm .password-icon {
  color: #b5b5b5;
  position: absolute;
  top: 11px;
  left: -30px;
}

.UsersDashboardTable {
  padding: 0 10px 55px;
}

.UsersDashboardTable .username-container {
  width: 190px;
}

.UsersDashboardTable .users-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}

.UsersDashboardTable__table-user-container {
  border-top: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 31px;
  margin-top: -5px;
  margin-left: -12px;
  display: flex;
}

.UsersDashboardTable__table-index {
  margin-left: 4px;
}

.UsersDashboardTable__table-user-name-container {
  gap: 5px;
  display: flex;
}

.UsersDashboardTable__table-active-user-container {
  background: #d2f1da;
  box-shadow: 0 4px #d2f1da;
}

.UsersDashboardTable__table-active-user-text {
  color: #00c12d;
  font-size: 16px;
  font-weight: bold;
}

.UsersDashboardTable__table-inactive-user-container {
  background: #fff2d9;
  box-shadow: 0 4px #fff2d9;
}

.UsersDashboardTable__table-inactive-user-text {
  color: orange;
  font-size: 16px;
  font-weight: bold;
}

.UsersDashboardTable__table-active-user-name-text {
  color: #000c;
  font-size: 13px;
  font-weight: bold;
}

.UsersDashboardTable__table-inactive-user-name-text {
  color: orange;
  font-size: 13px;
  font-weight: bold;
}

.UsersDashboardTable__table-header-text {
  color: #000c;
  font-size: 13px;
  font-weight: 900;
}

.UsersDashboardTable__table-lease-container {
  color: #21ba45;
  padding-left: 10px;
}

.UsersDashboardTable__table-dpo-container {
  align-self: center;
}

.NavBarSearch {
  position: relative;
}

.NavBarSearch .nav-bar-search {
  width: 100%;
  min-width: 500px;
  height: 26px;
}

.NavBarSearch .nav-bar-search input {
  background-color: #f9fafb;
  font-size: 12.6px;
}

.NavBarSearch .nav-bar-search i.icon {
  font-size: 10px;
}

.NavBarSearch .list-view {
  cursor: pointer;
  z-index: 1;
  position: absolute;
  top: 2px;
  right: 5px;
}

.SearchDropdown-wrapper {
  background: #fff;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  width: 700px;
  min-height: auto;
  max-height: 250px;
  position: absolute;
  top: 35px;
  left: 50%;
  overflow-y: auto;
  transform: translate(-50%);
}

.SearchDropdown-wrapper p {
  margin: 0;
  font-size: 12.6px;
}

.SearchDropdown-wrapper .StatusCellIcon {
  height: 25px;
}

.SearchDropdown-wrapper .StatusCellIcon i.icon {
  margin-top: -16px !important;
  font-size: 10px !important;
}

.SearchDropdown-wrapper .StatusCellIcon i.icon.small-icon {
  font-size: 8px !important;
  top: 22px !important;
}

.SearchDropdown-wrapper .StatusCellIcon i.icon.top-right {
  top: 9px;
}

.SearchDropdown-wrapper .no-result {
  justify-content: center;
  align-items: center;
  height: 70px;
  display: flex;
}

.SearchDropdown-wrapper .no-result p {
  font-size: 14px;
}

.SearchDropdown-wrapper .search-list {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 10px;
  font-size: 12.6px;
  display: flex;
}

.SearchDropdown-wrapper .search-list:hover {
  background-color: #f9fafb;
}

.SearchDropdown-wrapper .search-list .search-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: auto;
  overflow: hidden;
}

.SearchDropdown-wrapper .search-list .search-row {
  align-items: center;
  gap: 10px;
  display: flex;
}

.SearchDropdown-wrapper .search-list .search-row i.icon {
  margin-top: -10px;
}

.other-locations-container {
  flex-direction: column;
  justify-content: center;
  width: 100%;
  display: flex;
}

.other-locations-container span {
  cursor: default;
  color: #767676;
  font-weight: bold;
}

.other-locations-divider {
  border-top: 1px solid #cececf;
}

.other-locations-text-container {
  align-self: center;
  padding: 6px 0;
}

.NewsModal.ui.modal > .actions {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.NewsModal.ui.modal > .actions .left-actions {
  align-items: center;
  display: flex;
}

.NewsModal.ui.modal > .actions .left-actions button.ui.button.basic {
  box-shadow: none;
  background-color: #0000;
  border: none;
  padding: 0;
}

.NewsModal.ui.modal > .actions .left-actions button.ui.button.basic.disabled {
  box-shadow: none;
  background-color: #0000 !important;
  border: none !important;
}

.NewsModal.ui.modal > .actions .left-actions button.ui.button.basic i.icon {
  color: #000;
  font-size: 18px;
}

.NewsModal.ui.modal > .actions .left-actions .pagination-info {
  margin: 0 4px;
  font-size: 14px;
  font-weight: 900;
  position: relative;
  bottom: 2px;
}

.NewsModal.ui.modal > .actions .right-actions {
  gap: 10px;
  display: flex;
}

.NewsModal .header {
  padding-right: 25px !important;
}

.NewsModal .header .header-container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.NewsModal .header .header-title-container {
  flex: 1;
  align-items: center;
  gap: 10px;
  display: flex;
}

.NewsModal .header .header-title {
  font-size: 18px;
  font-weight: bold;
}

.NewsModal .category-label.ui.label {
  color: #000;
  background: none;
  border: 1px solid #e2e2e3;
  font-weight: normal;
}

.NewsModal .navigation-info {
  margin-left: 1rem;
  font-size: 14px;
}

.NewsModal .article-container {
  max-height: 480px;
  margin-bottom: 10px;
}

.NewsModal .article-container .article-subtitle {
  margin-top: 10px;
  font-size: 14px;
  font-weight: normal;
}

.NewsModal .article-container .article-content-wrapper {
  border: 1px solid #dededf8a;
  border-radius: 4px;
  max-height: 400px;
  margin-bottom: 8px;
  padding: 13px 12px;
  overflow-y: auto;
}

.NewsModal .article-container .article-author-container {
  align-items: center;
  gap: 10px;
  display: flex;
}

.NewsModal .article-container .article-author-container .profile-circle {
  color: #2185d0;
  border: 1px solid #2185d0;
  border-radius: 360px;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  margin-right: 4px;
  display: flex;
}

.NewsModal .article-container .article-author-container .author {
  font-weight: 600;
}

.NewsModal .article-container .article-author-container .updated-label {
  font-size: 12px;
}

.NewsModal .article-container .article-content {
  font-size: 14px;
  line-height: 1.6;
}

.NewsModal .article-container .article-content img {
  max-width: 100%;
}

.NewsStripe {
  color: #fff;
  z-index: 4;
  background-color: #20ba45;
  width: calc(100% + 2px);
  height: 36px;
  padding: 0;
  position: relative;
  top: -1px;
  left: -1px;
}

.NewsStripe .stripe {
  justify-content: center;
  align-items: center;
  height: 35px;
  padding: 12px 20px;
  display: flex;
  position: relative;
}

.NewsStripe .stripe .stripe-content {
  text-align: center;
  color: #000;
  justify-content: center;
  font-size: 12.6px;
  font-weight: 400;
  display: flex;
}

.NewsStripe .stripe .stripe-content .link {
  cursor: pointer;
  margin-left: 10px;
  font-weight: 900;
  text-decoration: none;
}

.NewsStripe .stripe .stripe-content .link:hover {
  opacity: .8;
  text-decoration: none;
}

.NewsStripe .stripe .close {
  cursor: pointer;
  background-color: #48913d;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  display: flex;
  position: absolute;
  right: 0;
}

.NewsStripe .stripe .close i.icon {
  color: #fff;
  margin: 0;
  font-size: 18px;
  position: relative;
  top: -3px;
}

.NotFoundPage {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  overflow-y: auto;
}

.NotFoundPage-overlay {
  background: #134e5e;
  background: -webkit-linear-gradient(to left, #71b280, #134e5e);
  background: linear-gradient(to left, #71b280, #134e5e);
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.NotFoundPage-container {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 790px;
  display: flex;
}

.NotFoundPage-car-repair {
  position: relative;
}

.NotFoundPage-car-repair img {
  width: 100%;
}

.NotFoundPage-svg-icon {
  max-height: 93px;
  position: absolute;
  bottom: 15px;
  right: 0;
  box-shadow: 0 8px 10px #2f2c36;
}

.NotFoundPage-error-text {
  letter-spacing: 0;
  color: #fff;
  background: #000;
  border-radius: 5px;
  padding: 8px 30px;
  font: bold 21px Lato;
  position: absolute;
  bottom: -8px;
  right: 0;
  box-shadow: 8px 8px 10px #2f2c36;
}

.NotFoundPage-action-buttons {
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin-top: 25px;
  margin-bottom: 60px;
  display: flex;
}

.NotFoundPage-action-buttons .ui.button {
  letter-spacing: 0;
  opacity: 1;
  border-radius: 10px;
  height: 63px;
  font: 600 30px / 16px Lato;
  box-shadow: 0 3px 6px #00000029;
}

.NotFoundPage-action-buttons .ui.button.icon.labeled {
  color: #fff;
  background-color: #1dc05f;
}

.NotFoundPage-action-buttons .ui.button.icon.labeled:hover {
  background-color: #1dc05f;
}

.NotFoundPage-action-buttons .ui.button.icon.labeled i {
  color: #fff !important;
  background-color: #46b245 !important;
}

.NotFoundPage-action-buttons .ui.button.light {
  color: #1ec05f;
  padding: 0 50px;
}

.NotFoundPage-logo h1 {
  color: #fff;
  letter-spacing: -5.9px;
  margin: 0;
  font-family: Arial;
  font-size: 118px;
  font-weight: 700;
}

.NotFoundPage-logo h1 span {
  color: #1fbf5f;
}

.NotFoundPage-logo h3 {
  color: #fff;
  letter-spacing: -1.75px;
  margin: 0;
  padding: 35px 0 0 8px;
  font-family: Arial;
  font-size: 35px;
  font-weight: 300;
}

.OverlayLoader__container {
  z-index: 10;
  background-color: #0000004d;
  width: 100%;
  height: 100dvh;
  position: absolute;
  top: 0;
  left: 0;
}

.OverlayLoader__container .loader:before {
  width: 60px;
  height: 60px;
  border-width: 3px !important;
  border-color: #fff !important;
}

.OverlayLoader__container .loader:after {
  width: 60px;
  height: 60px;
  border-width: 3px !important;
}

.pagination-container {
  align-items: center;
  gap: 1rem;
  display: flex;
}

.pagination-container .pagination-controls {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.pagination-container .pagination-controls button {
  cursor: pointer;
  color: #374151;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  min-width: 32px;
  height: 36px;
  padding: .25rem .75rem;
  font-size: .875rem;
  transition: background-color .2s;
  display: flex;
}

.pagination-container .pagination-controls button:not(:last-child) {
  border-right: 1px solid #e5e7eb;
}

.pagination-container .pagination-controls button:hover:not(:disabled) {
  background-color: #f9fafb;
}

.pagination-container .pagination-controls button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.pagination-container .pagination-controls button.active {
  background-color: #f3f4f6;
  font-weight: 500;
}

.pagination-container .pagination-controls button.nav-button {
  padding: .25rem .75rem;
  font-size: 1.25rem;
  line-height: 1;
}

.pagination-container .pagination-info {
  color: #6b7280;
  font-size: .875rem;
}

.Pin .modal-header p {
  margin: 0;
}

.Pin .modal-header {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 24px 0 0;
  display: flex !important;
}

.Pin .modal-footer {
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
  width: 100%;
  display: flex !important;
}

.Pin .grid {
  margin-top: 0 !important;
}

.icon-count-wrapper {
  justify-content: center;
  align-items: center;
  gap: 2px;
  display: flex;
}

.icon-count-wrapper i.icon {
  margin: 0 !important;
}

.PinLog .PinLogHistoryHeading {
  margin-top: 10px;
}

.PinLog .PinLogHistoryHeading .right-align {
  text-align: right;
}

.PinLog .PinLogHistoryHeading p {
  text-transform: capitalize;
  font-size: 14px;
  font-weight: 600;
}

.PinLog .PinLogHistoryHeading > div {
  align-items: center;
  gap: 5px;
  margin-left: 5px;
  display: flex !important;
}

.PinLog .PinLogHistory {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  margin-top: 8px;
  padding: 5px;
}

.PinLog .PinLogHistory .pin-log-item {
  background-color: #fcfff5;
  border: 1px solid #e9e9ea;
  border-radius: 4px;
  align-items: center;
  width: fit-content;
  display: flex;
}

.PinLog .PinLogHistory .pin-log-item .pin-note {
  white-space: pre-wrap;
  flex: 1;
  margin-bottom: 2px;
  padding-top: 2px;
  display: inline-flex;
}

.PinLog .PinLogHistory .eye {
  cursor: default;
}

.PinLog .PinLogHistory .pin-info {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 3px;
  margin-right: 10px;
  font-size: 12.6px;
  font-weight: 400;
  display: inline-flex;
}

.PinLog .PinLogHistory .pin-info strong {
  font-weight: 700;
}

.PinLog .PinLogHistory .pin-info .important-container {
  align-items: center;
  margin-right: 2px;
  display: flex;
}

.PinLog .PinLogHistory .pin-info .important-container i {
  margin-right: 5px;
}

.PinLog .PinLogHistory .pin-info .important-container .ui.fitted.checkbox {
  margin-left: 5px;
}

.PinLog .PinLogHistory .pin-info > * {
  align-items: center;
  height: 25px;
  display: flex;
}

.PinLog .PinLogHistory .pin-info > span {
  word-break: break-all;
  height: auto;
}

.PinLog .PinLogHistory .ui.grid {
  margin: 5px 0 !important;
}

.PinLog .PinLogHistory .column {
  padding: 5px 10px !important;
}

.PinLog .PinLogHistory .logInfo .log-label {
  margin-bottom: 5px;
}

.PinLog .PinLogHistory .icons-right {
  justify-content: right;
  align-items: center;
  height: 100%;
  margin-right: 10px;
  display: flex;
}

p.logHistoryParagraph .ui.basic.label.label-container {
  align-items: center;
  margin: 0 1px;
  display: inline-flex;
}

p.logHistoryParagraph .ui.basic.label.label-container svg {
  margin-right: 3px;
}

.NotificationWrapper {
  box-sizing: border-box;
  border-radius: 8px;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 10px;
  display: flex;
}

.NotificationWrapper .content-column {
  flex-direction: column;
  padding-left: 10px;
  display: flex;
}

.NotificationWrapper .content-column div {
  line-height: 1;
  display: flex;
}

.NotificationWrapper .content-column div .title {
  margin: 0;
  padding-right: 5px;
  font-size: 14px;
}

.NotificationWrapper .content-column div .value {
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 230px;
  font-size: 14px;
  overflow: hidden;
}

.ui.label.dms-bg-color {
  background-color: #5c5c5c;
}

.ui.label.mechanic-color {
  color: #f2711c;
}

.ui.label.mechanic-bg-color {
  background-color: #f2711c1a;
}

.ui.label.chief-mechanic-color {
  color: #21ba45;
}

.ui.label.chief-mechanic-bg-color {
  background-color: #21ba451a;
}

.ui.label.default-colors {
  color: #2084ce;
}

.ui.label.receptionists-bg-color {
  background-color: #2084ce1a;
}

.ui.label.warranty-color {
  color: #ee3113;
}

.ui.label.chief-mechanic-color {
  color: #21ba45;
  background-color: #21ba451a;
}

.ui.label.warranty-bg-colors {
  background-color: #ee31131a;
}

.pin-user-label-container {
  gap: 5px;
}

.PlanITModal__sectionLabel {
  color: #000c;
  margin-bottom: 9px;
  font: 900 14px / 24px Lato;
  display: block;
}

.PlanITModal-FieldLabel {
  font-weight: 700;
}

.PlanITModal-noData {
  text-align: center;
}

.PlanITModal-actionButton {
  width: 36px;
}

.PlanITModal-actionButton i {
  transform: translateX(-4px) !important;
}

.PlanITModal .header {
  justify-content: space-between;
  align-items: center;
  display: flex;
  padding-right: 25px !important;
}

.PlanITModal__content-wrapper {
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.PlanITModal__content-wrapper > * {
  background: #f9fafb;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  flex-grow: 1;
  padding: 16px;
  box-shadow: 0 0 3px #00000029;
}

.PlanITModal .divider {
  background-color: #e2e2e3;
  width: 100%;
  height: 1px;
  margin: 15px 0;
}

.PlanITModal__gridContainer {
  grid-template-columns: 1fr max-content;
  row-gap: 3px;
  display: grid;
}

.PlanITModal__gridContainer > :nth-child(2n) {
  text-align: right;
}

.ui.basic.button.PlanITButton {
  border-right: none;
  background-color: #fff !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.ui.basic.button.PlanITButton i {
  margin-right: 20px;
}

.PlanITButton-container {
  align-items: center;
  display: flex;
}

.PlanITButton-container .-appointment-status.planITData {
  background: #ccecd6 !important;
  border: 1px solid #21ba45 !important;
}

.ProgressBar-container {
  opacity: 0;
  z-index: 5;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translate(0%);
}

.ProgressBar-container .indicator {
  background: #2185d0;
  height: 5px;
}

.RDW .-appointment-status.expired {
  background: #fef0e7 !important;
  border: 1px solid #ff0202 !important;
}

.ui.modal.RDWDetails .header.RDWDetailsHeading {
  justify-content: space-between;
  display: flex;
  padding: 25px !important;
}

.ui.modal.RDWDetails .header.RDWDetailsHeading .controls {
  align-items: center;
  display: flex;
}

.ui.modal.RDWDetails .header.RDWDetailsHeading .controls .icon-container {
  text-align: center;
  cursor: pointer;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  line-height: 18px;
  display: flex;
}

.ui.modal.RDWDetails .header.RDWDetailsHeading .controls .icon-container i {
  margin: 0 0 2px;
  font-size: 16px;
}

.ui.modal.RDWDetails .header.RDWDetailsHeading .controls .icon-container:first-child {
  margin-right: 5px;
}

.ui.modal.RDWDetails .RDWDetailsContent.content {
  grid-template-columns: repeat(2, 1fr);
  min-height: 680px;
  display: grid;
}

.ui.modal.RDWDetails .RDWDetailsContent.content.NoData {
  grid-template-columns: auto;
}

.ui.modal.RDWDetails .RDWDetailsContent.content div {
  border-bottom: 1px solid #e2e2e3;
  padding: 10px 0;
  display: flex;
}

.ui.modal.RDWDetails .RDWDetailsContent.content div span:first-child {
  font-weight: 600;
}

.ui.modal.RDWDetails .RDWDetailsContent.content div span:nth-child(2) {
  margin-left: 1em;
  margin-right: 1em;
}

.ui.modal.RDWDetails .RDWDetailsContent.content p {
  text-align: center;
  letter-spacing: 0;
  color: #000;
  font: 14px / 23px Lato;
}

.ui.modal.RDWDetails .RDWDetailsContent.content div:last-child {
  border-bottom: none;
}

.ReactTable {
  border-spacing: 0;
  text-align: left;
  border-top: 1px solid #e2e2e3;
  border-left: 1px solid #e2e2e3;
  border-right: 1px solid #e2e2e3;
  border-radius: 4px;
  width: 100%;
}

.ReactTable thead {
  background-color: #f9fafb;
  padding: 0 10px;
}

.ReactTable thead th {
  font-size: 12.6px;
}

.ReactTable thead tr, .ReactTable tbody tr {
  height: 36px;
}

.ReactTable tbody tr:hover {
  cursor: pointer;
  background-color: #f9fafb;
}

.ReactTable th {
  border-bottom: 1px solid #e2e2e3;
  padding-left: 12px;
}

.ReactTable td {
  padding-left: 12px;
  border-bottom: 1px solid #e2e2e3 !important;
}

.ReactTable td p {
  font-size: 12.6px;
}

.ReactTable td .ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 80px;
  font-size: 12.6px;
  overflow: hidden;
}

.ReactTable .no-results {
  text-align: center !important;
  color: #000c !important;
  padding: 25px 0 !important;
}

.ReactTable .expanded {
  padding: 10px 15px 10px 5px;
}

.ReactTablePagination {
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 20px;
  display: flex;
  bottom: 0;
}

.ReactTablePagSize {
  justify-content: space-between;
  align-items: center;
  gap: 11px;
  margin-right: 20px;
  display: flex;
}

.NoData {
  justify-content: center;
  align-items: center;
  padding: 50px 0;
  display: flex;
}

.OpenRecalls {
  border-bottom: 1px solid #e2e2e3;
}

.OpenRecalls-title {
  place-items: center start;
  gap: 40px;
  width: 100%;
  margin-top: 20px;
  padding: 12px 2rem;
  font-size: 14px;
  font-weight: bold;
  display: grid;
}

.OpenRecalls-title-layout-convert {
  grid-template-columns: 1fr 70px minmax(75px, max-content) max-content;
}

.OpenRecalls-title-layout-select {
  grid-template-columns: 1fr max-content max-content;
}

.OpenRecalls-layout-2 {
  grid-template-columns: 1fr 145px max-content;
}

.OpenRecalls-layout-3 {
  grid-template-columns: 1fr 70px minmax(75px, max-content) max-content;
}

.OpenRecalls-item {
  border-bottom: 1px solid #e2e2e3;
  place-items: center start;
  gap: 40px;
  width: 100%;
  padding: 15px 2rem;
  font-size: 14px;
  display: grid;
}

.OpenRecalls-item span:first-child {
  margin-right: 5px;
}

.OpenRecalls-item button.ui.basic.icon.button {
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 27px;
  padding: 0;
  display: flex;
}

.OpenRecalls-filler {
  width: 32px;
}

.OpenRecalls-item:last-child {
  border-bottom: none;
}

.OpenRecalls-dropdown {
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  grid-column: 4;
  padding: 3px 3px 3px 6px;
}

.OpenRecalls-selectAll {
  align-items: center;
  gap: 20px;
  display: flex;
}

.PreviousRecalls-title {
  margin-top: 10px;
  padding: 5px 2rem;
  font-size: 16px;
  font-weight: bold;
}

.PreviousRecalls-item {
  border-bottom: 1px solid #e2e2e3;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px 2rem;
  display: flex;
}

.PreviousRecalls-item-code-name {
  font-size: 14px;
}

.PreviousRecalls-item-code-name span:first-child {
  margin-right: 5px;
}

.PreviousRecalls-item:last-child {
  border-bottom: none;
}

.RecallsModal-header {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.RecallsModal-actions {
  border: none !important;
  justify-content: flex-end !important;
  padding-top: 8px !important;
}

.RecallsModal-actions--confirm {
  color: #fff !important;
  background-color: #21ba45 !important;
}

.ui.large.modal.transition.visible.active.RecallsModal .header {
  padding: 15px 2rem;
}

.ui.large.modal.transition.visible.active.RecallsModal .content {
  padding: 0 0 10px;
}

.ui.page.modals.dimmer.transition.visible.active:has(.ui.large.modal.transition.visible.active.RecallsModal) {
  justify-content: center !important;
}

.Recalls button.ui.basic.button.Recalls-button {
  text-transform: uppercase;
  border: inherit;
  font-size: 11px;
  font-weight: 400;
  color: #000 !important;
  background-color: #fff !important;
}

.Recalls button.ui.basic.button.Recalls-button.open-recalls {
  background: #fef0e7 !important;
  border: 1px solid #ff0202 !important;
}

.ROBListData .section-title {
  color: #000c;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: bold;
}

.ROBListData .data_row {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
  display: flex;
}

.ROBListData .data_row .title {
  color: #000c;
  flex: 1;
  font-size: 14px;
  font-weight: bold;
}

.ROBListData .data_row .value {
  text-align: right;
  flex: 1;
  font-size: 14px;
}

.ROBListData .controls {
  justify-content: center;
  align-items: center;
  display: flex;
}

.ROBListData .controls button {
  width: 27px;
  height: 27px;
  box-shadow: none;
  border-radius: 4px;
  padding: 5px;
  background: #fff !important;
  border: 1px solid #e6e6e6 !important;
}

.ROBListData .controls button i {
  margin: 0 !important;
  transform: none !important;
}

.RobSection .segment_title {
  color: #000c;
  border: 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  padding-bottom: 10px;
  font-size: 14px;
  font-weight: bold;
}

.RobSection .section_title {
  color: #000c;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: bold;
}

.RobSection .data_row {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
  display: flex;
}

.RobSection .data_row .title {
  color: #000c;
  flex: 1;
  font-size: 14px;
  font-weight: bold;
}

.RobSection .data_row .value {
  text-align: right;
  flex: 1;
  font-size: 14px;
}

.RobModal .header {
  justify-content: space-between;
  align-items: center;
  display: flex;
  padding-right: 25px !important;
}

.RobModal .header .close_button {
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  line-height: 18px;
  display: flex;
}

.RobModal .header .close_button i.icon {
  font-size: 16px;
  margin: 0 0 0 2px !important;
  transform: translateX(0) !important;
}

.RobModal .ui.segment {
  background-color: #f9fafb;
  border-color: #e2e2e3;
}

.RobModal .divider {
  border: 0;
  border-top: 1px solid #ccc;
  height: 1px;
  margin: 15px 0;
  padding: 15px 0 10px;
}

.ROB .-appointment-status {
  background: #fff !important;
  border: 1px solid #ccc !important;
}

.ROB .-appointment-status.Contract {
  background: #ccecd6 !important;
  border: 1px solid #21ba45 !important;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: .4;
  }

  100% {
    opacity: 1;
  }
}

.SkeletonTable {
  padding: 20px;
}

.SkeletonTable__thead {
  background-color: #ededed;
  animation: 1s infinite pulse;
}

.SkeletonTable__row {
  background-color: #ededed;
  border-radius: 2px;
  height: 20px;
  margin: 8px 10px;
  animation: 1s infinite pulse;
}

.Snooze {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.Snooze .owner-info .owner-name {
  color: red;
  font-size: 14px;
  font-weight: 900;
}

.Snooze .owner-info .owner-title {
  font-size: 12.6px;
  color: #767676 !important;
}

.Snooze .owner-info .owner-email {
  color: #414141;
  font-size: 12.6px;
}

.LogHistory {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  min-height: 54px;
  padding: 11px;
  display: flex;
}

.LogHistory .ui.grid {
  margin-top: 0;
  margin-bottom: 0;
}

.LogHistory .ui.grid > .row {
  padding-top: 1rem;
}

.LogHistory .ui.grid > .row:first-child {
  padding-top: 0;
}

.LogHistory .ui.grid .row .column .row {
  margin-top: 5px;
}

.LogHistory p {
  margin: 0;
  padding: 0;
}

.LogHistory.empty {
  justify-content: center;
  align-items: center;
}

.LogHistory .log-item {
  background-color: #e2e2e3;
  border-radius: 4px;
  height: min-content;
  padding: 0 5px;
}

.LogHistory .label i.icon {
  margin-right: 5px;
}

.LogHistory .row.log_values {
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  display: flex;
}

.log-history-heading-container {
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  display: flex;
}

.log-history-heading-container span {
  color: #000000de;
  text-transform: capitalize;
  margin: 0 0 .285714rem;
  font-size: 14px;
  font-weight: 700;
}

.LogHistory-Container .AppointmentNoteAttachments .appointment-note-attachments {
  gap: 3px;
}

.LogHistory-Container .AppointmentNoteAttachments .appointment-note-attachments i.icon {
  height: auto;
  margin-top: 0;
  margin-right: 0;
}

.LogHistory-Container .log-history-container {
  max-height: 25vh;
  overflow: hidden auto;
}

.snooze-item-title {
  font-size: 18px;
}

.SnoozeModal .add-snooze-modal-actions {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  display: flex;
}

.SnoozeModal .add-snooze-modal-actions button:first-child {
  margin-right: 5px;
}

.SnoozeModal .update-snooze-modal-actions {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.SnoozeModal .update-snooze-modal-actions div:nth-child(2) button:first-child {
  margin-right: 5px;
}

.TableDatePickerInput .filter-button {
  box-shadow: none;
  cursor: pointer;
  background-color: #0000;
  border: none;
  outline: none;
  padding: 0;
}

.TableDatePickerInput .filters-icon {
  margin-top: 7px;
  margin-left: 1px;
}

.TableDropdownSelector .item-width {
  max-width: 257px;
  background-color: #fff !important;
  border-bottom: .5px solid #e2e2e3 !important;
}

.TableDropdownSelector .icon-item {
  background-color: #e8f3fa !important;
}

.TableDropdownSelector .item-width:hover {
  background-color: #f9fafb !important;
}

.TableDropdownSelector .custom-dropdown {
  padding: 0 !important;
}

.TableDropdownSelector .selected-text-color {
  color: #b5b5b5cc;
}

.TableDropdownSelector .icon-selected-text-color {
  color: #000c;
}

.TableDropdownSelector .table-dropdown-filters-icon {
  margin-top: 3px;
  padding: 0;
}

.TableDropdownSelector .group-title {
  cursor: default;
  border: 1px solid #e2e2e3;
  border-radius: .285714rem;
  padding: 13px 16px;
  box-shadow: 0 2px 4px #2224261f, 0 2px 6px #22242626;
}

.TableDropdownSelector .group-title__text {
  color: #a4a4a4;
  white-space: pre-line;
  text-transform: uppercase;
  font-size: .785714em;
  font-weight: bold;
}

.table-question-status-card-user {
  background-color: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 25px;
  display: flex;
}

.table-question-status-card-icon {
  margin: auto !important;
}

.table-view .ui.celled.table td {
  height: 30px;
  padding: 0 0 0 16px !important;
}

.table-view .row {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.table-view .row p {
  margin: 0;
}

.table-view .clipboard-copy {
  cursor: pointer;
  color: #21ba45;
}

.tabs-container {
  width: 100%;
  overflow: visible;
}

.tabs-container.hideBorder {
  margin-left: -15px;
}

.tabs-container.hideBorder .pointing.menu {
  border-radius: 0;
  overflow: visible;
  border: none !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
}

.tabs-container.hideBorder .pointing.menu .item {
  padding: 15px 17.5px !important;
}

.tabs-container .pointing.menu {
  background-color: #fff;
  width: 100%;
  padding-right: 50px;
  display: flex;
  position: relative;
  overflow: visible !important;
}

.tabs-container .pointing.menu i.icon {
  margin: 0 !important;
}

.tabs-container .pointing.menu span {
  margin-left: 5px;
}

.tabs-container .pointing.menu .item {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: none;
  max-width: 300px;
  display: block;
  overflow: hidden;
}

.tabs-container .pointing.menu .item.overflow-dropdown {
  background: #fff;
  width: 50px;
  position: absolute;
  top: 0;
  right: 0;
  overflow: visible;
}

.tabs-container .pointing.menu .item.overflow-dropdown.active.item {
  color: inherit !important;
  border: none !important;
  margin: 0 !important;
}

.tabs-container .pointing.menu .dropdown-menu-item {
  max-width: none;
}

.tabs-container .pointing.menu .overflow-dropdown .menu {
  right: 0;
  left: auto !important;
  overflow: visible !important;
}

@media screen and (width >= 768px) {
  .tabs-container .pointing.menu .overflow-dropdown .menu.visible {
    transform-origin: 100% 0;
  }
}

.tabs-container .secondary.pointing.menu .active.item {
  color: #21ba45 !important;
  border-width: 4px !important;
  border-color: #21ba45 !important;
  padding: 15px 17.5px !important;
}

.tabs-container .menu:after {
  display: none;
}

.tabs-container a:hover, .tabs-container a {
  text-decoration: none;
}

.TextareaEditable {
  width: 100%;
  font-size: 12.6px;
}

.TextareaEditable.showAsInfo textarea {
  resize: none;
  background-color: #fff;
  border: none;
  border-radius: 0;
  overflow: hidden;
}

.TextareaEditable.showAsInfo textarea:hover {
  cursor: text;
  background-color: #f9fafb;
}

.TextareaEditable.disabled textarea:hover {
  cursor: default !important;
  background-color: #fff !important;
}

.TextareaEditable.placeholder {
  color: #ccc;
}

.TextareaEditable textarea {
  background-color: #f9fafb;
  border: 1px solid #96c8da;
  border-radius: 4px;
  margin-top: 4px;
  padding: 2px 5px;
  font-family: Lato;
  font-size: 12.6px;
  line-height: 1;
  width: 100% !important;
}

.TextareaEditable textarea:focus {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  outline: 0 !important;
}

.question-status-card-user {
  background-color: #fff;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 25px;
  display: flex;
}

.question-status-card-icon {
  margin: auto !important;
}

.question-status-card-icon-ok {
  transform: scaleX(-1);
}

.question-status-card-icon-ok-container {
  margin-top: 3px;
}

.ResetFiltersButton__toolbar-button {
  color: #21ba45;
  flex: auto;
  justify-content: center;
  align-items: center;
  display: flex;
  width: 38px !important;
  height: 38px !important;
  box-shadow: none !important;
  border: 1px solid #22242626 !important;
}

.ResetFiltersButton__limegreen-color {
  color: #21ba45 !important;
}

.ResetFiltersButton__reset-button-icons-container {
  justify-content: center;
  display: flex;
}

.ResetFiltersButton__reset-button-icon-circle-xmark {
  margin: 3px 0 0 -10px !important;
  font-size: .7em !important;
}

.add-update-attachments-container {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-top: 15px;
  display: flex;
}

.add-update-attachments-container i {
  margin-right: 0;
}

.add-update-attachments-container i:first-child {
  color: gray;
  margin-right: 3px;
  font-size: 14px;
}

.add-update-attachments-container i:nth-child(2) {
  cursor: pointer;
  color: gray;
  font-size: 14px;
}

.add-update-attachments-container .attachment-name-container {
  max-width: 38rem;
}

.add-update-attachments-container .attachment-name {
  color: #4183c4;
}

.add-update-attachments-container > div {
  word-break: break-all;
}

.attachment-container {
  color: #4183c4;
}

.attachment-uploaded-by {
  color: gray;
  margin-right: 3px;
  font-style: italic;
}

.attachment-uploaded-date {
  color: gray;
  margin-right: 3px;
}

.UploadFilesZone {
  text-align: center;
  border: 1px dotted #ccc;
  border-radius: 4px;
  flex-direction: column;
  gap: 5px;
  height: 61px;
  margin-top: 20px;
  padding-top: 10px;
  display: flex;
}

.UploadFilesZone input {
  visibility: hidden;
  height: 0;
}

.UploadFilesZone .browse-text {
  color: #2185d0;
  cursor: pointer;
  text-decoration: underline;
}

.UploadFilesZone .max-file-size {
  color: #b5b5b5;
}

.UploadFilesZone.error {
  border-color: red;
}

.upload__profile {
  cursor: pointer;
  width: 119px;
  height: 119px;
  position: relative;
}

.upload__profile input {
  display: none;
}

.upload__profile:hover > .avatar-action-container {
  display: block;
}

.upload__profile .upload__profile-button {
  background: #f7f7f7 no-repeat padding-box padding-box;
  border: 3px solid #b5b5b5;
  border-radius: 100%;
  height: 100%;
}

.upload__profile .upload__profile-button .button {
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}

.upload__profile .upload__profile-button .button:hover > .add-avatar {
  z-index: 1;
}

.upload__profile .upload__profile-button .button:hover i.icon.no-avatar {
  display: none;
}

.upload__profile .upload__profile-button .button:hover > .avatar-action-container {
  display: block;
}

.upload__profile .upload__profile-button .button .add-avatar {
  z-index: -1;
  background: #0009 no-repeat padding-box padding-box;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.upload__profile .upload__profile-button .button .add-avatar i.icon {
  color: #fff;
  margin-right: 0;
}

.upload__profile .upload__profile-button i.icon.no-avatar {
  text-align: unset;
  width: unset;
  color: #b5b5b5;
  margin: 0;
}

.upload__profile .upload__profile-button img {
  object-fit: cover;
  border: 3px solid #b5b5b5;
  border-radius: 100%;
  width: 119px;
  height: 119px;
}

.upload__profile .avatar-action-container {
  opacity: 1;
  z-index: 10;
  background: #fff no-repeat padding-box padding-box;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  width: 175px;
  display: none;
  position: absolute;
  top: 105%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 3px 6px #00000029;
}

.upload__profile .avatar-action-container .action {
  align-items: center;
  gap: 1rem;
  padding: 4px 10px;
  display: flex;
}

.upload__profile .avatar-action-container .action.upload-section {
  border-bottom: 1px solid #e2e2e3;
}

.upload__profile .avatar-action-container .action span {
  font: 14px / 16px Lato;
  position: unset !important;
}

.upload__profile .avatar-action-container .action span.remove {
  color: red;
}

.upload__profile .avatar-action-container .action i.icon {
  height: unset;
  margin: 0 !important;
  padding: 0 !important;
}

.upload-container .ui.input {
  position: absolute;
}

.upload-container .ui.input > input {
  display: none;
}

.Snooze-Videos {
  align-items: center;
  gap: 12px;
  display: flex;
  overflow-x: auto;
}

.Snooze-Videos .video-view {
  background-color: #f9fafb;
  border: 1px solid #e2e2e3;
  flex-direction: column;
  max-width: 225px;
  display: flex;
  overflow: hidden;
}

.Snooze-Videos .video-view .ui.divider {
  margin: 0;
}

.Snooze-Videos .video-view video {
  object-fit: cover;
  border: 3px solid #f9fafb;
  width: 100%;
  height: 130px;
  padding-bottom: 1px;
}

.Snooze-Videos .video-view .video-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  margin: 5px;
  display: flex;
}

.Snooze-Videos .video-view .video-action-button {
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #d4d4d5;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 25px;
  display: flex;
}

.Snooze-Videos .video-view .video-action-button:hover {
  background-color: #ccc;
}

.Snooze-Videos .video-view .video-action-button i.icon {
  vertical-align: middle;
  margin: 0;
  font-size: 14px;
  line-height: 1;
}

.WebsocketStatus {
  justify-content: center;
  height: 7px;
  display: flex;
}

.WebsocketStatus i.icon {
  font-size: 10px;
}

#zohohc-asap-web-button {
  left: -100px;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  height: 100dvh;
  margin: auto;
  font-family: Lato, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  overflow: hidden;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
}

p {
  font-size: 14px;
}

a {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: opacity .15s;
}

a:hover {
  color: inherit;
  opacity: .65;
  text-decoration: none;
}

.Loader {
  color: #767676 !important;
}

.Loader:before {
  border-color: #00000026 !important;
}

.Loader:after {
  border-color: #767676 #0000 #0000 !important;
}

p.small {
  font-size: 12.6px;
}

button.ui.button:disabled {
  color: #767676;
  background-color: #e2e2e3 !important;
}

button.ui.left-icon i.icon {
  margin-left: -15px !important;
  margin-right: 20px !important;
}

.afBrownBg {
  background-color: #795647 !important;
}

.afBrownBg:hover {
  background-color: #79564799 !important;
}

.afPinkBg {
  background-color: #ea1e62 !important;
}

.afPinkBg:hover {
  background-color: #ea1e6299 !important;
}

.afTomatoBg {
  background-color: #ff5621 !important;
}

.afTomatoBg:hover {
  background-color: #ff562199 !important;
}

.afOrangeBg {
  background-color: #ffc008 !important;
}

.afOrangeBg:hover {
  background-color: #ffc00899 !important;
}

.afYellowBg {
  background-color: #ffeb3b !important;
}

.afYellowBg:hover {
  background-color: #ffeb3b99 !important;
}

.afLemonBg {
  background-color: #bfde1b !important;
}

.afLemonBg:hover {
  background-color: #bfde1b99 !important;
}

.afGreenBg {
  background-color: #8cc34a !important;
}

.afGreenBg:hover {
  background-color: #8cc34a99 !important;
}

.afGrassBg {
  background-color: #4caf4f !important;
}

.afGrassBg:hover {
  background-color: #4caf4f99 !important;
}

.afSpaceBg {
  background-color: #5f7d8b !important;
}

.afSpaceBg:hover {
  background-color: #5f7d8b99 !important;
}

.afBlueBg {
  background-color: #4050b5 !important;
}

.afBlueBg:hover {
  background-color: #4050b599 !important;
}

.afGreyBg {
  background-color: #607d8b !important;
}

.afGreyBg:hover {
  background-color: #607d8b99 !important;
}

.afPurpleBg {
  background-color: #6c0699 !important;
}

.afPurpleBg:hover {
  background-color: #6c069999 !important;
}

.tiGreenBg {
  color: #21ba45 !important;
  background-color: #21ba4533 !important;
  border: 1px solid #21ba45 !important;
}

.tiGreenBg.off {
  color: #767676 !important;
  background-color: #fff !important;
  border-color: #70707029 !important;
}

.tiBlueBg {
  color: #4050b5 !important;
  background-color: #4050b599 !important;
  border: 1px solid #4050b5 !important;
}

.tiBlueBg.off {
  color: #767676 !important;
  background-color: #fff !important;
  border-color: #70707029 !important;
}

.tiRedBg {
  color: #ff0202 !important;
  background-color: #ff020233 !important;
  border: 1px solid #ff0202 !important;
}

.tiRedBg.off {
  color: #767676 !important;
  background-color: #fff !important;
  border-color: #70707029 !important;
}

.tiOrangeBg {
  color: #ffba39 !important;
  background-color: #ffba3933 !important;
  border: 1px solid #ffba39 !important;
}

.tiOrangeBg.off {
  color: #767676 !important;
  background-color: #fff !important;
  border-color: #70707029 !important;
}

.wdSkyblue {
  background-color: #2084ce !important;
}

.wdRed {
  background-color: #ff0202 !important;
}

.wdLightGrey {
  background-color: #f9fafb !important;
}

.centerIcon i.icon {
  margin-left: -10px !important;
}

.greyBorder {
  border: 1px solid #dededf !important;
}

.tiLightPurple {
  color: #6c0699 !important;
  background-color: #e7d0e6 !important;
}

.i-maroon {
  color: #db2828;
}

.i-grey {
  color: #767676;
}

.i-yellow {
  color: #ffba39;
}

.i-blue {
  color: #2084ce;
}

.i-green {
  color: #21ba45;
}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ellipsis.small {
  width: 80px;
  font-size: 12.6px;
}

.refresh-button {
  border-left: 1px solid #e2e2e3;
  align-items: center;
  height: 100%;
  padding: 0 0 0 10px;
  display: flex;
}

.ml-12 {
  margin-left: 12px;
}

.ml-5 {
  margin-left: 5px;
}

.mr-5 {
  margin-right: 5px !important;
}

.mt-28 {
  margin-top: 28px !important;
}

.mt-25 {
  margin-top: 25px !important;
}

.mt-24 {
  margin-top: 24px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mt-15 {
  margin-top: 15px !important;
}

.mt-14 {
  margin-top: 14px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-8 {
  margin-top: 8px !important;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.rotate-270 {
  transform: rotate(270deg);
}

.position-relative {
  position: relative;
}

.flex-end {
  justify-content: flex-end;
  display: flex;
}

.flex-space-between {
  justify-content: space-between;
  display: flex;
}

.flex-row {
  flex-direction: row;
  display: flex;
}

.flex {
  display: flex;
}

.flex-align-center {
  align-items: center;
  display: flex;
}

.icon-container {
  width: 1em;
  margin: 0 .25em 0 0;
}

.ui.dropdown > .clear.icon:before {
  content: "";
}

.ui.checkbox.check input.hidden {
  position: initial;
  opacity: 1 !important;
}

.ui.checkbox.check label {
  display: none;
}

.location-info-popup {
  margin-top: 10px;
}

.location-info-popup p {
  margin: 0;
}

.keylocker-icon {
  background-color: #ecd6f4 !important;
}

.keylocker-icon i.icon {
  color: #a333c8;
}

.no-wrap-text {
  white-space: nowrap;
}

.-cursor-pointer {
  cursor: pointer;
}

.no-size {
  width: 0;
  height: 0;
}

.bold-text {
  font-weight: bold !important;
}

.modal-header-actions {
  align-items: center;
  gap: 15px;
  display: flex;
}

button.ui.grey.button.modal-print-btn {
  color: #000;
  background-color: #e0e1e2;
  margin-left: auto;
}

button.ui.grey.button.modal-print-btn:hover {
  color: #000;
  background-color: #e0e1e2;
}

button.ui.basic.button.modal-close-btn {
  width: 36px;
  height: 36px;
  box-shadow: none;
  border: 1px solid #e2e2e3;
  outline: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

button.ui.basic.button.modal-close-btn i.icon.xmark {
  margin: 1px 0 0;
  font-size: 16px;
  transform: none;
}

button.ui.basic.button.modal-close-btn:hover {
  background-color: #f9fafb;
  color: #0009 !important;
}

.filters-toolbar-container {
  margin: 9px 9px 5px 0;
}

.main-container-segment {
  margin: 0 !important;
  padding: 0 !important;
}

.main-container-pushable {
  min-height: 100vh !important;
  overflow-x: visible !important;
}

.main-container-pusher-dimmed {
  min-height: 100vh !important;
  overflow: visible !important;
}

.main-container .content-container {
  max-width: 1920px;
  height: calc(100dvh - 39px);
  margin: auto;
  overflow: hidden scroll;
}

.main-container .content-container.with-news-stripe {
  height: calc(100dvh - 75px);
}

.main-container .appointments-container {
  max-width: 100%;
}

.main-container .appointments-container .AppointmentsInnerContainer {
  max-width: 1920px;
  margin: auto;
  overflow: hidden scroll;
}

.pushable:not(body) {
  transform: none;
}

.pushable:not(body) > .ui.sidebar, .pushable:not(body) > .fixed, .pushable:not(body) > .pusher:after {
  position: fixed;
}

.AccountSetting {
  background-color: #f7f7f7;
  max-width: 1920px;
  height: 100%;
  padding: 80px 20px 15px;
}

.AccountSetting .cursor-pointer {
  cursor: pointer;
}

.AccountSetting .setting_section {
  background: #fff;
  border: 1px solid #e0e1e2;
  border-radius: 10px;
  max-width: 1440px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
  box-shadow: 0 3px 6px #00000029;
}

.AccountSetting .setting_section .statuses-wrapper {
  margin-top: 24px;
}

.AccountSetting .setting_section.equal {
  padding: 30px;
}

.AccountSetting .setting_section.role_order {
  gap: 3rem;
  display: flex;
}

.AccountSetting .setting_section.role_order .divider {
  opacity: 1;
  border: 1px solid #e2e2e3;
}

.AccountSetting .setting_section.role_order .user-role {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  font-family: Lato !important;
}

.AccountSetting .setting_section.role_order .FormSection {
  gap: 130px;
  display: flex;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container {
  flex-direction: column;
  margin-bottom: 0;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field {
  align-items: center;
  gap: 10px;
  display: flex;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field:not(:last-of-type) {
  margin-bottom: 10px;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field label {
  color: #000 !important;
  margin-bottom: 0 !important;
  font-family: Lato !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 17px !important;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field .checkbox-content-container {
  cursor: pointer;
  align-items: center;
  gap: 10px;
  display: flex;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field .icon {
  margin: 0;
  font-size: 1.1em;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field .to-order {
  color: #3586ed;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field .same-day {
  color: #21ba45;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field .tomorrow {
  color: #f05b28;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field .backorder {
  color: #c83628;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field .arrived {
  color: #cc0;
}

.AccountSetting .setting_section label.input-label {
  color: #000c;
  margin-bottom: 8px;
  font-family: Lato !important;
  font-size: 14px !important;
  font-weight: bold !important;
  line-height: 15px !important;
  display: block !important;
}

.AccountSetting .setting_section .ui.disabled > input {
  background: #f7f7f7 !important;
}

.AccountSetting .setting_section .personal_setting {
  margin-bottom: 30px;
  display: flex;
  position: relative;
}

.AccountSetting .setting_section .personal_setting span {
  position: absolute;
  top: -400%;
}

.AccountSetting .setting_section .personal_setting h1 {
  color: #000000de;
  margin: 0 0 0 150px;
  font-family: Lato;
  font-size: 28px;
  font-weight: bold;
  line-height: 23px;
}

.AccountSetting .setting_section .profile_pic_button {
  position: absolute;
}

.AccountSetting .setting_section h2, .AccountSetting .setting_section .section-title {
  color: #000000de;
  font-size: 18px;
  font-weight: bold;
  line-height: 23px;
  font-family: Lato !important;
}

.AccountSetting .setting_section .section-subtitle {
  text-align: left;
  letter-spacing: 0;
  color: #000000de;
  font: 14px / 23px Lato;
}

.AccountSetting .setting_section .DesktopNotifications-row .column:nth-child(2) .DesktopNotifications .grouped.fields {
  grid-column-gap: 50px;
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}

.AccountSetting .setting_section .DesktopNotifications.single, .AccountSetting .setting_section .PinNotifications.single {
  width: 28%;
  max-width: 330px;
}

.AccountSetting .setting_section .DesktopNotifications h4, .AccountSetting .setting_section .PinNotifications h4 {
  font-size: 16px;
}

.AccountSetting .setting_section .DesktopNotifications .field label, .AccountSetting .setting_section .PinNotifications .field label {
  flex: 1;
  align-items: center;
  gap: 5px;
  display: inline-flex !important;
}

.AccountSetting .setting_section .DesktopNotifications .field label:before, .AccountSetting .setting_section .PinNotifications .field label:before {
  position: relative !important;
}

.AccountSetting .setting_section .DesktopNotifications .field label span, .AccountSetting .setting_section .PinNotifications .field label span {
  flex: 1;
  font: 600 14px / 23px Lato !important;
}

.AccountSetting .setting_section .DesktopNotifications .field label .circular-icon, .AccountSetting .setting_section .PinNotifications .field label .circular-icon {
  cursor: pointer;
  text-align: center;
  background-color: #fff;
  border: 1px solid #d4d4d5;
  border-radius: 50%;
  width: 25px;
  min-width: 25px;
  height: 25px;
  margin: 0 6px 0 0;
  line-height: 1em;
  position: relative;
  transform: none;
  justify-content: center !important;
  align-items: center !important;
  display: flex !important;
}

.AccountSetting .setting_section .DesktopNotifications .field label .circular-icon i.icon:first-of-type, .AccountSetting .setting_section .PinNotifications .field label .circular-icon i.icon:first-of-type {
  margin: 0;
  font-size: 12px;
}

.AccountSetting .setting_section .DesktopNotifications .field label .circular-icon .subIcon, .AccountSetting .setting_section .PinNotifications .field label .circular-icon .subIcon {
  position: absolute;
  top: -3px;
  right: -3px;
}

.AccountSetting .setting_section .DesktopNotifications .field label p, .AccountSetting .setting_section .PinNotifications .field label p {
  text-align: left;
  letter-spacing: 0;
  color: #000;
  font: 14px / 23px Lato;
}

.AccountSetting .setting_section .DesktopNotifications .notification-checkbox-toggle, .AccountSetting .setting_section .PinNotifications .notification-checkbox-toggle {
  display: flex;
}

.AccountSetting .setting_section .DesktopNotifications .notification-checkbox-toggle .notifications-icons-container, .AccountSetting .setting_section .PinNotifications .notification-checkbox-toggle .notifications-icons-container {
  align-items: flex-end;
  gap: 10px;
  display: flex;
}

.AccountSetting .setting_section .DesktopNotifications .notification-checkbox-toggle.single, .AccountSetting .setting_section .PinNotifications .notification-checkbox-toggle.single {
  max-width: 330px;
  width: auto !important;
}

.AccountSetting .setting_section .DesktopNotifications .notification-checkbox-toggle.dynamic, .AccountSetting .setting_section .PinNotifications .notification-checkbox-toggle.dynamic {
  margin-top: 0;
  margin-bottom: 15px;
}

.AccountSetting .setting_section .DesktopNotifications .notification-checkbox-toggle .ui.checkbox.toggle, .AccountSetting .setting_section .PinNotifications .notification-checkbox-toggle .ui.checkbox.toggle {
  vertical-align: middle;
}

.AccountSetting .setting_section .DesktopNotifications .ui.dropdown .ui.label, .AccountSetting .setting_section .PinNotifications .ui.dropdown .ui.label {
  height: 28px;
}

.AccountSetting .setting_section .DesktopNotifications .ui.dropdown .ui.label svg.svg-inline--fa, .AccountSetting .setting_section .DesktopNotifications .ui.dropdown .ui.label i.material-icons.-notification-status-icon, .AccountSetting .setting_section .PinNotifications .ui.dropdown .ui.label svg.svg-inline--fa, .AccountSetting .setting_section .PinNotifications .ui.dropdown .ui.label i.material-icons.-notification-status-icon {
  vertical-align: middle;
  width: 18px;
  margin-right: 6px;
  font-size: 18px;
}

.AccountSetting .setting_section .DesktopNotifications .ui.dropdown .ui.basic.label.notification-entity-label, .AccountSetting .setting_section .PinNotifications .ui.dropdown .ui.basic.label.notification-entity-label {
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  width: 46px;
  display: inline-flex;
}

.AccountSetting .setting_section .DesktopNotifications .ui.dropdown .ui.basic.label.notification-entity-label svg, .AccountSetting .setting_section .DesktopNotifications .ui.dropdown .ui.basic.label.notification-entity-label i, .AccountSetting .setting_section .PinNotifications .ui.dropdown .ui.basic.label.notification-entity-label svg, .AccountSetting .setting_section .PinNotifications .ui.dropdown .ui.basic.label.notification-entity-label i {
  justify-content: center;
  display: inline-flex;
  margin: 0 !important;
  padding: 0 !important;
}

.AccountSetting .setting_section .DesktopNotifications .ui.dropdown .visible.menu .item svg, .AccountSetting .setting_section .DesktopNotifications .ui.dropdown .visible.menu .item i.material-icons.-notification-status-icon, .AccountSetting .setting_section .PinNotifications .ui.dropdown .visible.menu .item svg, .AccountSetting .setting_section .PinNotifications .ui.dropdown .visible.menu .item i.material-icons.-notification-status-icon {
  vertical-align: middle;
  width: 18px;
  margin-right: 6px;
  font-size: 16px;
}

.FixedButtonSection {
  z-index: 1000;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 1920px;
  height: 67px;
  padding: 0 20px;
  display: flex;
  position: sticky;
  bottom: 0;
  left: 0;
}

.FixedButtonSection:before {
  content: "";
  z-index: -1;
  background: #fff no-repeat padding-box padding-box;
  border: 1px solid #e0e1e2;
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.FixedButtonSection-inner {
  gap: 1rem;
  display: flex;
}

.FixedButtonSection-inner .cancel-btn {
  background: #fff no-repeat padding-box padding-box;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  height: 36px;
  color: #000 !important;
}

.FixedButtonSection-inner .cancel-btn .icon.cancel {
  color: #000;
}

.FixedButtonSection-inner .save-btn {
  opacity: 1;
  background: #21ba45 no-repeat padding-box padding-box;
  border-radius: 4px;
  height: 36px;
}

.location-visibility-wrapper {
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  display: flex;
}

.selected-locations-container {
  flex-wrap: wrap;
  gap: 12px;
  display: flex;
}

.selected-locations-container > * {
  border: 1px solid #e2e2e3;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  display: flex;
}

.grouped-locations-container {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.grouped-location-container {
  flex-direction: column;
  gap: 13px;
  display: flex;
}

.my_role {
  max-width: 300px;
  margin-top: 30px;
}

.my_role .change-password {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
}

.ChangePasswordModal .header {
  letter-spacing: 0;
  color: #000;
  font: bold 18px / 23px Lato;
}

.ChangePasswordModal .checkIcon {
  color: green;
  margin-top: 15px;
  font-size: 1.15em;
}

.ChangePasswordModal .crossIcon {
  color: #f54545;
  margin-top: 15px;
  font-size: 1.15em;
}

.ChangePasswordModal-description {
  letter-spacing: 0;
  color: #000;
  font: 14px / 23px Lato;
}

.ChangePasswordModal-action .inner {
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  width: 100%;
  display: flex;
}

.ChangePasswordModal-action .inner .cancel-btn {
  background: #fff no-repeat padding-box padding-box;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  height: 36px;
  color: #000 !important;
}

.ChangePasswordModal-action .inner .cancel-btn .icon.cancel {
  color: #000;
}

.ChangePasswordModal-action .inner .save-btn {
  opacity: 1;
  background: #21ba45 no-repeat padding-box padding-box;
  border-radius: 4px;
  height: 36px;
}

.ChangePasswordModal .strength-meter {
  background: #ddd;
  border-radius: 2px;
  height: 3px;
  margin: 7px 0;
  position: relative;
}

.ChangePasswordModal .strength-meter:before, .ChangePasswordModal .strength-meter:after {
  content: "";
  height: inherit;
  z-index: 10;
  background: none;
  border: 0 solid #fff;
  border-width: 0 6px;
  width: calc(20% + 6px);
  display: block;
  position: absolute;
}

.ChangePasswordModal .strength-meter:before {
  left: calc(20% - 3px);
}

.ChangePasswordModal .strength-meter:after {
  right: calc(20% - 3px);
}

.ChangePasswordModal .strength-meter .strength-meter-fill {
  height: inherit;
  border-radius: inherit;
  background: none;
  width: 0;
  transition: width .5s ease-in-out, background .25s;
  position: absolute;
}

.ChangePasswordModal .strength-meter .strength-meter-fill[data-strength="0"] {
  background: #8b0000;
  width: 20%;
}

.ChangePasswordModal .strength-meter .strength-meter-fill[data-strength="1"] {
  background: #ff4500;
  width: 40%;
}

.ChangePasswordModal .strength-meter .strength-meter-fill[data-strength="2"] {
  background: orange;
  width: 60%;
}

.ChangePasswordModal .strength-meter .strength-meter-fill[data-strength="3"] {
  background: orange;
  width: 80%;
}

.ChangePasswordModal .strength-meter .strength-meter-fill[data-strength="4"] {
  background: green;
  width: 100%;
}

.ChangePasswordModal .required.password {
  position: relative;
}

.ChangePasswordModal .required.password i.icon {
  position: absolute;
  bottom: 15px;
  right: 12px;
  color: #b5b5b5 !important;
}

.ChangePasswordModal .equal.width.fields.password-group {
  gap: .5rem !important;
}

.ChangePasswordModal-success {
  opacity: 1;
  letter-spacing: 0;
  color: #21ba45;
  background: #def5e3 no-repeat padding-box padding-box;
  border: 1px solid #21ba45;
  border-radius: 4px;
  padding: 10px 13px;
  font-size: 14px;
  font-family: Lato !important;
}

.Dayplanner-AppointmentBrandsFilter {
  justify-self: flex-start;
  align-items: center;
  gap: 5px;
  width: auto;
  margin-right: 10px;
  display: flex;
}

.Dayplanner-AppointmentBrandsFilter .multiple.dropdown {
  padding: 0;
}

.Dayplanner-AppointmentBrandsFilter .menu {
  max-height: 400px;
  overflow-y: auto;
  min-width: 220px !important;
}

.Dayplanner-AppointmentBrandsFilter-Dropdown {
  background: #f8f9fa no-repeat padding-box padding-box;
  border: 2px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.Dayplanner-AppointmentBrandsFilter-Dropdown:hover {
  box-shadow: 0 2px 4px #00000029;
}

.Dayplanner-AppointmentBrandsFilter-Dropdown i {
  height: auto;
  margin: 0;
}

.Dayplanner-AppointmentBrandsFilter-Dropdown-Selection p.text {
  letter-spacing: 0;
  color: #000c;
  font: 14px / 16px Lato;
}

.Dayplanner-AppointmentBrandsFilter-Dropdown .composite-icons {
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 21px;
  display: flex;
  position: relative;
}

.Dayplanner-AppointmentBrandsFilter-Dropdown .composite-icons i {
  color: #21ba45;
}

.Dayplanner-AppointmentBrandsFilter-Dropdown .composite-icons i.tag {
  height: 12px;
  font-size: 8px;
  position: absolute;
  bottom: 8.5px;
  right: 3px;
}

.Dayplanner-AppointmentBrandsFilter-Dropdown .composite-icons i.car {
  font-size: 10px;
}

.Dayplanner-AppointmentBrandsFilter-Dropdown .filter-length {
  letter-spacing: 0;
  color: #414141;
  border-left: 2px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 21px;
  font: bold 9px / 11px Lato;
  display: flex;
}

.Dayplanner-AppointmentBrandsFilter .item {
  border-bottom: 1px solid #e2e2e3;
}

.Dayplanner-AppointmentBrandsFilter .item.selected p.text {
  font-weight: bold;
}

.Dayplanner-AppointmentBrandsFilter .dropdown.icon {
  display: none;
}

.AppointmentCard {
  direction: ltr;
}

.AppointmentCard:not(.-mechanic) {
  width: 100%;
}

.AppointmentCard.-mechanic {
  width: auto;
}

.AppointmentCard .BoardItem-appointment-status.-expanded {
  position: absolute;
  top: -3px;
  right: -3px;
}

.AppointmentCard .BoardItem-appointment-status.-collapsed .fa-layers, .AppointmentCard .BoardItem-appointment-status.-collapsed .StatusCellIcon i.icon {
  height: auto;
}

.AppointmentCard .BoardItem-appointment-status.-collapsed .StatusCellIcon .small-icon {
  bottom: -7px;
}

.AppointmentCard .BoardItem-appointment-status.-collapsed .StatusCellIcon .top-right {
  top: -7px;
}

.AppointmentCard .BoardItem-appointment-status .AppointmentStatusIcon {
  box-shadow: -1px 1px 3px #00000029;
}

.AppointmentCard .BoardItem-appointment-status i.icon {
  margin: 0;
}

.AppointmentCard .icon-vertical-align {
  margin-top: 1px !important;
}

.CarQuickView-container {
  box-sizing: border-box;
  background: #fff;
  border-radius: 4px;
  align-items: center;
  width: 534px;
  height: 178.48px;
  padding: 29px 29px 29px 22px;
  display: flex;
}

.CarQuickView-container__inner {
  align-items: flex-start;
  height: 126px;
  display: flex;
}

.CarQuickView-container__inner .car-image-container {
  flex-direction: column;
  justify-content: center;
  height: 100%;
  margin-right: 35px;
  display: flex;
  position: relative;
}

.CarQuickView-container__inner .car-image-container i.car.icon {
  color: #ccc;
  font-size: 6em;
  position: relative;
  top: 27px;
}

.CarQuickView-container__inner .car-image-container img {
  border-radius: 4px;
  width: 197px;
  height: 100%;
}

.CarQuickView-container__inner .car-details {
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 35px;
  height: 100%;
  display: grid;
}

.CarQuickView-container__inner .car-details .detail-item {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-direction: column;
  font-size: 12.6px;
  line-height: 15px;
  display: flex;
  overflow: hidden;
}

.CarQuickView-container__inner .car-details .detail-item .detail-title {
  margin-bottom: 3px;
  font-weight: bold;
}

.CarQuickView-container__inner .car-details .detail-item span.detail-value {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.InterventionQuickView-content {
  width: 700px;
  max-width: 700px;
  max-height: 300px;
  overflow-y: auto;
}

.InterventionQuickView-interventions-container {
  border-bottom: 1px solid #d4d4d5;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px;
  display: flex;
}

.InterventionQuickView-interventions-container .title-container {
  width: 80%;
  display: flex;
}

.InterventionQuickView-interventions-container .title-container .title {
  word-wrap: break-word;
  word-break: break-all;
  width: 100%;
  font-size: 13px;
  display: inline-block;
}

.InterventionQuickView-interventions-container .special-indicators-container {
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 0;
  display: flex;
}

.InterventionQuickView-interventions-container .special-indicators-container .labor-minutes {
  margin-right: 25px;
  font-style: italic;
}

.InterventionQuickView-interventions-container .special-indicators-container .labor-minutes i.icon {
  margin-right: 5px;
  font-size: 9.5px;
  position: relative;
  bottom: 1px;
}

.InterventionQuickView-interventions-container .AnswerReadyStatus {
  align-items: center;
  gap: 5px;
  margin-right: 5px;
  display: flex;
}

.InterventionQuickView-interventions-container:last-child {
  border-bottom: none;
}

.mechanic-fixed-status-container {
  position: relative;
}

.mechanic-fixed-status-container .wrench-check-icon {
  font-size: 8px;
  position: absolute;
  bottom: 3px;
  right: 0;
}

.MechanicBox {
  background-color: #fff;
  border: 1px solid #d4d4d5;
  border-radius: 4px;
  width: 100%;
  padding: 10px;
  display: flex;
}

.MechanicBox-pinned {
  cursor: pointer;
}

.MechanicBox-pinned i {
  margin-right: 0;
}

.MechanicBox.-no-appointments {
  justify-content: flex-end;
}

.MechanicBox.-no-appointments .MechanicBox-side {
  flex-direction: row;
  column-gap: 10px;
}

.MechanicBox.-no-appointments .mechanic-name {
  font-family: Lato;
  font-size: 12.6px;
  font-weight: 700;
  line-height: 15px;
}

.MechanicBox-side {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  row-gap: 4px;
  height: 100%;
  margin-left: 12px;
  display: flex;
}

.MechanicBox-profile img {
  vertical-align: top;
  border-radius: 50px;
  width: 25px;
  max-width: 100%;
  height: 25px;
}

.MechanicBox-profile > div {
  color: #fff;
  background-color: gray;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  font-size: 12px;
  display: flex;
}

.MechanicBox-name {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 600;
}

.MechanicBox-appointmentCards {
  direction: rtl;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  display: grid;
}

@media only screen and (width <= 1750px) {
  .MechanicBox-appointmentCards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (width <= 1500px) {
  .MechanicBox-appointmentCards {
    grid-template-columns: 1fr;
  }
}

.MechanicBox-placeholder {
  width: auto;
  height: 88px;
  padding: 8px 12px;
  position: relative;
}

.MechanicBox-placeholder:not(.-empty) {
  background-color: #f2f2f2;
  background-image: url(/static/svg/dayplanner-placeholder.12f948dd.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 125px;
  border: 1px dashed #d4d4d5;
  border-radius: 4px;
  transition: border .1s ease-in-out;
}

.MechanicBox-placeholder:not(.-empty).-on-drag-hover {
  background-image: none;
  border: 1.5px dashed #000;
}

.MechanicBox-placeholder:not(.-empty).-on-drag-hover .MechanicBox-placeholder__number {
  display: none;
}

.MechanicBox-placeholder:not(.-empty).-disabled {
  pointer-events: none;
  cursor: no-drop;
}

.MechanicBox-placeholder:not(.-empty).-no-pointer {
  pointer-events: none;
  cursor: default;
  background-color: red !important;
}

.MechanicBox-placeholder:not(.-empty).-inactive {
  opacity: .45;
}

.MechanicBox-placeholder__number {
  color: #707070;
  cursor: default;
  background-color: #c7c7c7;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 29px;
  height: 29px;
  font-size: .9rem;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px #00000029;
}

.MechanicBox-appointments {
  height: 100%;
}

.MechanicBox-appointments .ui.basic.label.extend-appointments-button {
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 27px;
  height: 30px;
  padding-top: 5px;
  padding-bottom: 2px;
  display: flex;
  box-shadow: 0 0 2px #00000029;
}

.MechanicBox-appointments .ui.basic.label.extend-appointments-button.-disabled {
  cursor: default;
  background-color: #f9fafb;
  padding-top: 2px;
}

.MechanicBox-appointments .ui.basic.label.extend-appointments-button.-disabled > span:first-child {
  color: #d4d4d5;
}

.MechanicBox-appointments .ui.basic.label.extend-appointments-button.-border-green {
  border: 1px solid #21ba45;
}

.MechanicBox-appointments .ui.basic.label.extend-appointments-button:not(.-no-pointer) > span:first-child {
  margin-top: 3px;
}

.MechanicBox-appointments .ui.basic.label.extend-appointments-button > span:first-child {
  color: #000000de;
  font-size: 12.6px;
  font-weight: 700;
}

.MechanicBox-appointments .ui.basic.label.extend-appointments-button .extend-appointments {
  display: block;
}

.MechanicBox-appointments .ui.basic.label.extend-appointments-button .extend-appointments i.ellipsis {
  margin: 0;
}

.MechanicBox-toggle {
  height: 100%;
}

.MechanicBox-toggle .ui.basic.label {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 27px;
  display: flex;
  box-shadow: 0 0 2px #00000029;
}

.MechanicBox .-no-pointer {
  pointer-events: none;
  cursor: default;
}

.-column-not-allowed-to-drop {
  opacity: .5;
}

@media (width <= 1440px) {
  .Dayplanner-board {
    overflow-x: auto;
  }

  .Dayplanner-columnContainer {
    min-width: auto !important;
  }

  .Dayplanner-columnContainer.-mechanic-tasks {
    width: auto;
  }

  .Dayplanner-columnContainer.-collapsed .Dayplanner-column {
    width: 50px !important;
  }

  .Dayplanner-column.-mechanic-tasks {
    scroll-behavior: smooth;
    width: 100% !important;
  }
}

.DayplannerStatusFilter {
  cursor: pointer;
  border: 2px solid;
  border-radius: 5px;
  align-items: center;
  height: 24px;
  display: flex;
}

.DayplannerStatusFilter:hover {
  box-shadow: 0 3px 6px #00000029;
}

.DayplannerStatusFilter.disabled {
  border-color: #767676 !important;
}

.DayplannerStatusFilter.disabled .DayplannerStatusFilter-icon {
  color: #e2e2e3;
  background-color: #767676 !important;
}

.DayplannerStatusFilter.disabled .DayplannerStatusFilter-count {
  background-color: #e2e2e3;
}

.DayplannerStatusFilter.active {
  box-shadow: 0 4px 8px #0000001a;
}

.DayplannerStatusFilter-icon {
  color: #fff;
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 100%;
  padding: 5px 6px;
  font-size: 10px;
  display: flex;
}

.DayplannerStatusFilter-icon i.icon {
  width: auto;
  height: auto;
  margin: 0;
}

.DayplannerStatusFilter-icon .backorder-icon span {
  font-size: 10px;
  line-height: 10px;
}

.DayplannerStatusFilter-count {
  background-color: #fff;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 100%;
  font-size: 9px;
  font-weight: bold;
  display: flex;
}

.DayplannerStatusFilters {
  flex-wrap: nowrap;
  gap: 5px;
  display: flex;
}

.AgreementsDashboard .add-button-container {
  width: 100%;
  padding: 20px 22px;
}

.AgreementsDashboard .add-agreements-text {
  white-space: nowrap;
  color: #000;
  align-items: center;
  font-weight: bold;
  display: flex;
}

.AgreementsModal .padding-container {
  padding: 18px 24px;
}

.AgreementsModal .label-padding {
  padding-bottom: 8px;
}

.AgreementsModal .grid-padding {
  padding: 10px 0 14px;
}

.AgreementsModal .checkbox-title, .AgreementsModal .header-title {
  font-weight: bold;
}

.AgreementsModal .actions-buttons-main-container {
  justify-content: space-between;
  display: flex;
}

.AgreementsModal .actions-buttons-main-container .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.AgreementsEditor .ql-toolbar.ql-snow {
  border: 1px solid #dededf;
  border-radius: 4px 4px 0 0;
}

.AgreementsEditor .ql-container.ql-snow {
  border: 1px solid #dededf;
  border-radius: 0 0 4px 4px;
}

.AgreementsTable {
  padding: 0 10px 20px;
}

.AgreementsTable table {
  table-layout: fixed;
  width: 100%;
}

.AgreementsTable th, .AgreementsTable td {
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 50%;
  max-width: 50%;
  padding: 10px 12px;
  overflow: hidden;
}

.AgreementsTable .header-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
  overflow: hidden;
}

.AgreementsTable .text-container, .AgreementsTable .text-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.AppointmentDetails {
  padding-bottom: 30px;
}

.AppointmentDetails p {
  margin: 0;
  padding: 0;
}

.AppointmentDetails .tabs-row-container .tabs-container {
  flex: 0 2 40%;
  max-width: 40%;
}

.AppointmentDetails .AppointmentDetails-tabs {
  z-index: 2;
  position: sticky;
  top: 39px;
}

.AppointmentDetails .AppointmentDetails-container {
  margin: 0 20px;
}

.AppointmentDetails .AppointmentDetails-container .auto-width {
  width: auto !important;
}

.AppointmentDetails .AppointmentDetails-container .active-user {
  color: #2185d0;
  border: 1px solid #2185d0;
  border-radius: 360px;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  display: flex;
}

.AppointmentDetails .AppointmentDetails-container .active-user .text {
  font-size: 11px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-NavigationHeader {
  z-index: 2;
  background-color: #fff;
  align-items: center;
  padding-top: 22px;
  padding-bottom: 5px;
  display: flex;
  position: sticky;
  top: 0;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-NavigationHeader .AppointmentDetails-NavigationHeader-container {
  border: 1px solid #e0e1e2;
  border-radius: 10px;
  flex-direction: column;
  gap: 13px;
  width: 100%;
  padding: 10px 20px 0;
  display: flex;
  box-shadow: 0 3px 6px #00000029;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-NavigationHeader .AppointmentDetails-NavigationHeader-container .row {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-NavigationHeader .AppointmentDetails-NavigationHeader-container .row .sub-row {
  flex: 0 0 60%;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  height: 25px;
  display: flex;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-NavigationHeader .AppointmentDetails-NavigationHeader-container .row .sub-row button.ui {
  height: 25px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-NavigationHeader .AppointmentDetails-NavigationHeader-container .row .sub-row .ui.icon.button {
  padding: 0 7px !important;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-NavigationHeader .AppointmentDetails-NavigationHeader-container .row .sub-row i.icon {
  font-size: 12px;
  margin-top: -2px !important;
  margin-right: -2px !important;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-NavigationHeader .AppointmentDetails-NavigationHeader-container .row .sub-row .Appointment-time {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  align-items: center;
  gap: 24px;
  padding: 0 8px;
  display: flex;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-NavigationHeader .AppointmentDetails-NavigationHeader-container .row .sub-row .Appointment-time.small-gap {
  gap: 8.5px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-NavigationHeader .AppointmentDetails-NavigationHeader-container .row .sub-row .Appointment-time > div {
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 12.6px;
  display: flex;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-NavigationHeader .AppointmentDetails-NavigationHeader-container .row .sub-row .Appointment-time > div strong {
  margin-right: 4px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-NavigationHeader .AppointmentDetails-NavigationHeader-container .row .sub-row .Appointment-time i.icon {
  cursor: pointer;
  margin-top: -12px !important;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-NavigationHeader .AppointmentDetails-NavigationHeader-container .row .sub-row .Appointment-time .info-wo {
  color: #ff0202;
  background-color: #fef0e7;
  padding: 0 5.5px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-NavigationHeader .AppointmentDetails-NavigationHeader-container .row .sub-row .appointment-pin {
  margin-left: 2px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentStatus-container {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentStatus-container .AppointmentStatus-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  height: 25px;
  display: flex;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentStatus-container .AppointmentStatus-actions button.ui {
  height: 25px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentStatus-container .AppointmentStatus-actions .ui.icon.button {
  padding: 0 7px !important;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentStatus-container .AppointmentStatus-actions i.icon {
  font-size: 12px;
  margin-top: -2px !important;
  margin-right: -2px !important;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentStatus-container .AppointmentStatus-actions .cancel-appointment {
  background-color: #c11;
  border-color: #c11;
  justify-content: center;
  align-items: center;
  width: 50px;
  display: flex;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentStatus-container .AppointmentStatus-actions .cancel-appointment img {
  width: 16px;
  height: 16px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentStatus-container .appointment-pin {
  margin-left: 2px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-tabs {
  z-index: 2;
  position: sticky;
  top: 39px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .full {
  width: 100%;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .full button.ui {
  height: 25px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .full .ui.icon.button {
  padding: 0 7px !important;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .full i.icon {
  font-size: 12px;
  margin-top: -2px !important;
  margin-right: -2px !important;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .full .button {
  position: relative;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .full .button i.icon {
  font-size: 12px !important;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .full .button i.icon.arrow.up {
  padding-left: 5px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .full .button .secondary-button {
  border-left: 1px solid #e2e2e3;
  align-items: center;
  height: 100%;
  display: flex;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .end {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .end .Appointment-time {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  align-items: center;
  gap: 24px;
  padding: 0 8px;
  display: flex;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .end .Appointment-time.small-gap {
  gap: 8.5px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .end .Appointment-time p {
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 12.6px;
  display: flex;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .end .Appointment-time p strong {
  margin-right: 4px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .end .Appointment-time i.icon {
  cursor: pointer;
  margin-top: -12px !important;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .end .Appointment-time .info-wo {
  color: #ff0202;
  background-color: #fef0e7;
  padding: 0 5.5px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .between {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .between .button i.icon {
  font-size: 14px !important;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-cards .between .row {
  align-items: center;
  gap: 8px;
  display: flex;
}

.add-note-container {
  text-align: center;
  cursor: pointer;
  color: #21ba45;
  border: 1px solid #e0e1e2;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 30.52px;
  height: 25px;
  line-height: 22px;
  display: flex;
}

.add-note-container:hover {
  background-color: #f9fafb;
}

.add-note-container i.icon {
  margin: -8.2px 0 0 !important;
  font-size: 14px !important;
}

.custom-back-order-dropdown-icon {
  color: #fff;
  background-color: #6c0699;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  margin-left: 0;
  margin-right: 5px;
  padding: 5px;
  display: inline-flex;
}

.CancelAppointmentModal.ui.modal {
  border: 1px solid #e2e2e3;
}

.CancelAppointmentModal.ui.modal div.header {
  letter-spacing: 0;
  opacity: 1;
  font-weight: bold;
  color: #fff !important;
  font-family: Lato !important;
  font-size: 18px !important;
}

.CancelAppointmentModal.ui.modal .CustomConfirm-section i.triangle {
  font-size: 48px;
}

.CancelAppointmentModal.ui.modal .CustomConfirm-inner-section-heading {
  font-size: 14px;
}

.CancelAppointmentModal.ui.modal .CustomConfirm-section {
  justify-content: center !important;
  gap: 20px !important;
}

.AppointmentDetails-loader {
  justify-content: center;
  align-items: center;
  height: calc(100vh - 38px);
  display: flex;
}

.BackordersDashboardFilters__toolbar-container {
  align-items: center;
  margin: 9px 9px 5px 0;
  display: flex;
}

.BackordersDashboardFilters__toolbar-grid {
  width: 100% !important;
  margin: 0 9px 0 22px !important;
}

.BackordersDashboardFilters__toolbar-reset-export-buttons-container {
  gap: 9px;
  margin-right: 12px;
  display: flex;
}

.BackordersDashboardFilters__no-left-gutter {
  padding-left: 0 !important;
}

.BackordersDashboardTable {
  padding: 0 10px 55px;
}

.BackordersDashboardTable__bo-note-container {
  max-width: 700px;
}

.BackordersDashboardTable__table-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}

.BackordersDashboardTable__table-action-buttons-container {
  padding-right: 10px;
}

.BackordersDashboardTable__table-header-text {
  color: #000c;
  font-size: 13px;
  font-weight: 900;
}

.BackordersDashboardTable__header-filters {
  align-items: center;
  gap: 5px;
  display: flex;
}

.BackordersDashboardTable__content {
  min-width: 160px;
}

.BackordersDashboardTable__vin-container {
  align-items: baseline;
  display: flex;
}

.BackordersDashboardTable__vin-container i {
  display: none;
}

.BackordersDashboardTable__vin-container:hover i {
  display: block;
}

.carDetail-container {
  flex-direction: column;
  padding: 0 20px 22px;
  display: flex;
}

.carDetail-container .carDetail-NavigationHeader {
  z-index: 2;
  background-color: #fff;
  align-items: center;
  padding-top: 22px;
  padding-bottom: 5px;
  display: flex;
  position: sticky;
  top: 0;
}

.carDetail-container .carDetail-NavigationHeader .carDetail-NavigationHeader-container {
  border: 1px solid #e0e1e2;
  border-radius: 10px;
  flex-direction: column;
  gap: 13px;
  width: 100%;
  padding: 0 20px;
  display: flex;
  box-shadow: 0 3px 6px #00000029;
}

.carDetail-container .carDetail-NavigationHeader .carDetail-NavigationHeader-container .row {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.carDetail-container .carDetail-NavigationHeader .carDetail-NavigationHeader-container .row .sub-row {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 25px;
  display: flex;
}

.carDetail-container .carDetail-NavigationHeader .carDetail-NavigationHeader-container .row .sub-row button.ui {
  height: 25px;
}

.carDetail-container .carDetail-NavigationHeader .carDetail-NavigationHeader-container .row .sub-row .ui.icon.button {
  padding: 0 7px !important;
}

.carDetail-container .carDetail-NavigationHeader .carDetail-NavigationHeader-container .row .sub-row i.icon {
  font-size: 12px;
  margin-top: -2px !important;
  margin-right: -2px !important;
}

.carDetail-container .carDetail-tabs {
  z-index: 2;
  position: sticky;
  top: 39px;
}

.carDetail-container .full {
  width: 100%;
}

.carDetail-container .end {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.carDetail-container .button {
  position: relative;
  height: 25px !important;
  padding: 0 12px !important;
  font-size: 11px !important;
}

.carDetail-container .button i.icon {
  font-size: 11px !important;
}

.carDetail-container .button i.icon.arrow.rotate {
  padding-left: 7px;
}

.carDetail-container .button .divider {
  background-color: #e2e2e3;
  width: 1px;
  height: 25px;
  position: absolute;
  top: 0;
  right: 25px;
  padding-right: 0 !important;
}

.carDetail-container .button.-appointment-status.button-note {
  height: 25px;
  padding: 0 4px !important;
}

.carDetail-container .button.-appointment-status.button-note i.icon {
  margin: -3px 0 0 !important;
  padding: 0 !important;
  font-size: 22px !important;
}

.carDetail-container .pointing.menu .item {
  padding: 15px 12.5px !important;
}

.carDetail-container .ReactTable {
  margin: 0;
}

.carDetail-container thead th {
  padding-left: 10px;
  font-size: 14px;
  font-weight: bold;
}

.carDetail-container thead th:first-child {
  padding-left: 17px;
}

.carDetail-container tbody td {
  padding-left: 10px;
  font-size: 12.6px;
}

.carDetail-container tbody td div {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding-right: 17px;
  display: flex;
}

.carDetail-container tbody td div button.ui.button.af {
  height: 25px;
}

.carDetail-container tbody td div.StatusCellIcon {
  justify-content: center;
  height: 25px;
  padding: 0;
}

.carDetail-container tbody td:first-child {
  padding-left: 17px;
}

.AppointmentHistory {
  padding-top: 16px;
}

.AppointmentHistory .date-wo {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.AppointmentHistory span.weak {
  margin-right: 5px;
  font-weight: 400;
}

.AppointmentHistory table:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.AppointmentHistory table:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.AppointmentHistory table {
  border-top: 2px solid #1dbf5e;
  border-radius: 0;
  position: relative;
}

.AppointmentHistory table .divider {
  background-color: #e2e2e3;
  height: 1px;
  margin-top: -41px;
  position: absolute;
  left: 0;
  right: 0;
}

.AppointmentHistory table th:last-child {
  text-align: right;
  width: 180px;
}

.AppointmentHistory table th {
  text-align: center;
  padding: 10px 0;
}

.AppointmentHistory table td {
  text-align: center;
  padding: 0;
}

.AppointmentHistory table .empty {
  height: 37px;
}

.AppointmentHistory table .workorder {
  flex-direction: column;
  align-items: flex-end;
  text-decoration: none;
  display: flex;
}

.AppointmentHistory table .item-buttons {
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.AppointmentHistory table .item-buttons .small-status {
  margin-right: 10px;
  padding: 0 !important;
}

.AppointmentHistory table .item-buttons .small-status .StatusCellIcon {
  height: 25px;
}

.AppointmentHistory table .item-buttons .small-status .StatusCellIcon i.icon {
  margin-top: -10px;
}

.AppointmentHistory table .item-buttons .button-icon {
  margin-right: 10px;
  padding: 0 !important;
}

.AppointmentHistory table .item-buttons .button-icon button {
  width: 32px;
  padding: 0 5px !important;
}

.AppointmentHistory table .item-buttons .button-icon .circle-icon {
  width: 25px;
  height: 25px;
}

.AppointmentHistory .name-cell {
  margin: auto;
}

.CarDrivingTrend {
  margin-top: 20px;
}

.CarDrivingTrend .MileageChart-Wrapper {
  border: 1px solid #eee;
  margin-bottom: 1em;
  padding: .75em;
}

.CarDrivingTrend .MileageChart-Wrapper .MileageChart .MileageChart__Legend {
  margin-bottom: 1em;
}

.CarDrivingTrend .MileageChart-Wrapper .MileageChart .MileageChart__Legend .MileageChart__Legend__Text {
  text-align: center;
  width: 19%;
  margin-right: 1%;
  padding: .15em 0;
  display: inline-block;
}

.CarDrivingTrend .MileageChart-Wrapper .MileageChart .MileageChart__Legend .MileageChart__Legend__Text.thirtyKM {
  background-color: #87ceeb66;
  border: 3px solid #87ceeb;
}

.CarDrivingTrend .MileageChart-Wrapper .MileageChart .MileageChart__Legend .MileageChart__Legend__Text.thirtyFiftyKM {
  background-color: #afc48366;
  border: 3px solid #afc483;
}

.CarDrivingTrend .MileageChart-Wrapper .MileageChart .MileageChart__Legend .MileageChart__Legend__Text.fiftySeventyKM {
  background-color: #fca24e66;
  border: 3px solid #fca24e;
}

.CarDrivingTrend .MileageChart-Wrapper .MileageChart .MileageChart__Legend .MileageChart__Legend__Text.seventyHunderdKM {
  background-color: #e07e6066;
  border: 3px solid #e07e60;
}

.CarDrivingTrend .MileageChart-Wrapper .MileageChart .MileageChart__Legend .MileageChart__Legend__Text.hunderdKM {
  background-color: #bf3b3b66;
  border: 3px solid #bf3b3b;
}

.CarNotes .car-notes-header {
  width: 20%;
  display: flex;
}

.CarNotes .car-notes-header .car-notes-header-title {
  text-transform: capitalize;
  font-size: 18px;
  font-weight: 600;
}

.CarNotes .car-notes-header .car-notes-header-title .car-notes-chevron-icon {
  cursor: pointer;
  margin-left: 5px;
  font-size: 18px;
}

.CarNotes .car-notes-content > div:first-child {
  margin-top: 20px;
}

.CarNotes .car-notes-content .receptionist-remarks-header {
  width: 20%;
  margin-bottom: 10px;
  display: flex;
}

.CarNotes .car-notes-content .receptionist-remarks-header .receptionist-remarks-header-title {
  text-transform: capitalize;
  margin-right: 5px;
  font-size: 14px;
  font-weight: 600;
}

.CarNotes .car-notes-content .dms-remarks-header {
  align-items: center;
  width: 20%;
  margin-bottom: 10px;
  display: flex;
}

.CarNotes .car-notes-content .dms-remarks-header .dms-remarks-header-title {
  text-transform: capitalize;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 18px;
  font-weight: 600;
}

.CustomerInfo {
  padding-top: 16px;
}

.CustomerInfo .ReactTable {
  margin: 0;
}

.CustomerInfo thead th {
  padding-left: 40px;
  font-size: 14px;
  font-weight: bold;
}

.CustomerInfo tbody td {
  padding-left: 40px;
  font-size: 12.6px;
}

.CustomerInfo tbody td span {
  cursor: pointer;
}

.CustomerInfo tbody td:first-child {
  text-transform: capitalize;
  background-color: #f9fafb;
  border-right: 1px solid #e3e3e4;
  padding-left: 17px;
  font-weight: bold;
}

.Details {
  align-items: center;
  gap: 21px;
  margin-top: 20px;
  display: flex;
}

.Details .Details-img {
  background-color: #e8e8e8;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 214px;
  height: 138px;
  display: flex;
}

.Details .Details-container {
  border: 1px solid #e0e1e2;
  border-radius: 4px;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 45px;
  width: 100%;
  height: 138px;
  padding: 17px 19px;
  display: flex;
}

.Details .Details-container .group {
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  display: flex;
}

.Details .Details-container .group p {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 300px;
  margin: 0;
  font-size: 16px;
  overflow: hidden;
}

.Details .Details-container .group p.title {
  font-size: 12px;
}

.Details .Details-container .group p.title-data {
  height: 20px;
}

.ItemsNotRepaired {
  padding-top: 16px;
}

.ItemsNotRepaired .item-buttons {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  align-items: center;
  height: 25px;
  padding: 0 9.25px;
  display: flex;
}

.ItemsNotRepaired .item-buttons i.icon {
  margin: -5px 0 0 !important;
}

.ItemsNotRepaired .item-buttons div {
  height: 25px;
  padding: 0;
}

.ItemsNotRepaired .item-buttons div:not(:first-child) {
  border-left: 1px solid #e2e2e3;
  padding: 0 1px 0 7px;
}

.PinItems {
  padding-top: 16px;
}

.PinItems .small-status {
  margin-right: 10px;
  padding: 0 !important;
}

.PinItems .small-status .bo-icon {
  gap: 0;
  padding-right: 0;
}

.PinItems .ui.button i.icon {
  margin-left: -13px !important;
}

.PinItems .pin-status {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 25px;
  padding: 0;
  display: flex;
}

.PinItems .pin-status i.icon {
  margin: -3px 0 0;
}

.PinItems .pin-type {
  cursor: pointer;
  padding-right: 0;
}

.PinItems .pin-type .label {
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 25px;
  display: flex;
}

.PinItems .pin-type .label i.icon {
  margin: 0;
}

.PinItems .pin-type .icon-count-wrapper {
  gap: 0;
  padding-right: 0;
}

.SnoozedItems {
  padding-top: 16px;
}

.SnoozedItems .ui.button i.icon {
  margin-left: -13px !important;
}

.SnoozedItems thead th, .SnoozedItems tbody td {
  padding-left: 40px;
}

.Tyres h4 {
  margin-top: 20px;
}

.Tyres p {
  margin: 0;
}

.Tyres .flex-row {
  justify-content: space-between;
  align-items: center;
  gap: 70px;
  display: flex;
}

.Tyres .flex-row .tyre-container {
  width: 100%;
}

.Tyres .flex-row .tyre-container .header {
  background-color: #f8f8f8;
  justify-content: center;
  align-items: center;
  height: 38px;
  display: flex;
}

.Tyres .flex-row .tyre-container .header h4 {
  margin-top: 0;
}

.Tyres .flex-row .tyre-container .tyre-indicator {
  background-color: #e8f1e3;
  border: 2px solid #188d45;
  border-radius: 23px;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  display: flex;
}

.Tyres .flex-row .tyre-container .tyre-indicator.red {
  border-color: #eb1f1f;
}

.Tyres .flex-row .tyre-container .tyre-indicator.red p {
  color: #eb1f1f;
}

.Tyres .flex-row .tyre-container .tyre-indicator.orange {
  border-color: #eb7a1f;
}

.Tyres .flex-row .tyre-container .tyre-indicator.orange p {
  color: #eb7a1f;
}

.Tyres .flex-row .tyre-container .tyre-indicator p {
  color: #188d45;
  font-size: 23px;
  font-weight: 500;
}

.Tyres .flex-row.row-reverse {
  flex-direction: row-reverse;
}

.Tyres .tyre-details-font {
  color: #556e80;
  font-size: 16px;
  font-weight: 600;
}

.Tyres .flex-row.padding {
  padding: 12px;
}

.Tyres .flex-row.small-gap {
  gap: 14px;
}

.Tyres .flex-row.start {
  justify-content: start;
}

.Tyres .flex-row.end {
  justify-content: end;
}

.Tyres .tyre-details {
  width: 100%;
  margin-top: 20px;
}

.Tyres .tyre-details.right {
  text-align: right;
}

.Tyres h4 {
  margin-top: 20px;
}

.Tyres p {
  margin: 0;
}

.Tyres .flex-row {
  justify-content: space-between;
  align-items: center;
  gap: 70px;
  display: flex;
}

.Tyres .flex-row .tyre-container {
  align-self: flex-start;
  width: 100%;
}

.Tyres .flex-row .tyre-container .header {
  background-color: #f8f8f8;
  justify-content: center;
  align-items: center;
  height: 38px;
  display: flex;
}

.Tyres .flex-row .tyre-container .header h4 {
  margin-top: 0;
}

.Tyres .flex-row .tyre-container .tyre-indicator {
  background-color: #e8f1e3;
  border: 2px solid #188d45;
  border-radius: 23px;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  display: flex;
}

.Tyres .flex-row .tyre-container .tyre-indicator p {
  color: #188d45;
  font-size: 23px;
  font-weight: 500;
}

.Tyres .flex-row .tyre-container .tyre-indicator.red {
  background-color: #eb1f1f33;
  border-color: #eb1f1f;
}

.Tyres .flex-row .tyre-container .tyre-indicator.red p {
  color: #eb1f1f;
}

.Tyres .flex-row .tyre-container .tyre-indicator.orange {
  background-color: #eb7a1f33;
  border-color: #eb7a1f;
}

.Tyres .flex-row .tyre-container .tyre-indicator.orange p {
  color: #eb7a1f;
}

.Tyres .flex-row .tyre-container .tyre-indicator.green {
  border-color: #188d45;
}

.Tyres .flex-row .tyre-container .tyre-indicator.green p {
  color: #188d45;
}

.Tyres .tyre-details-font {
  color: #556e80;
  font-size: 16px;
  font-weight: 600;
}

.Tyres .flex-row.padding {
  padding: 12px;
}

.Tyres .flex-row.small-gap {
  gap: 8px;
}

.Tyres .flex-row.start {
  justify-content: start;
}

.Tyres .flex-row.end {
  justify-content: flex-end;
}

.Tyres .tyre-details {
  width: 100%;
  margin-top: 20px;
}

.Tyres .tyre-details.right {
  text-align: right;
}

.delete-tyre-btn i.icon {
  margin-left: -13px !important;
}

.delete-tyre-title-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.delete-tyre-title-wrapper__h4 {
  margin-bottom: 10px !important;
}

.delete-tyre-title-wrapper__inStorage {
  align-items: baseline;
  display: flex;
}

.delete-tyre-title-wrapper__storage {
  color: #21ba45;
  padding-left: 10px;
}

.delete-tyre-title-wrapper__locationName {
  color: #767676;
  padding: 0 8px 0 3px;
}

.CommunicationTemplatesTable {
  padding: 21px 10px 55px;
}

.CommunicationTemplatesTable__message-container {
  max-width: 690px;
  margin-right: 22px;
}

.CommunicationTemplatesTable__subject-container {
  min-width: 255px;
  max-width: 255px;
}

.CommunicationTemplatesTable__table-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}

.CommunicationTemplatesTable__table-header-text {
  color: #000c;
  font-size: 13px;
  font-weight: 900;
}

.CommunicationTemplatesTable__table-message-duplicate-container {
  justify-content: space-between;
  align-items: center;
  margin-right: 12px;
  display: flex;
}

.CommunicationTemplatesTable__table-expand-button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.CommunicationTemplatesTable__placeholder-button {
  width: 32px;
  height: 25px;
}

.duplicate-template-button {
  cursor: pointer;
  color: #fff;
  background-color: #21ba45;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 25px;
  margin-right: 10px;
  display: flex;
}

.duplicate-template-button-icon {
  margin: auto !important;
}

.DuplicateMediumModal .padding-container {
  padding: 18px 24px;
}

.DuplicateMediumModal .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.DuplicateMediumModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.DuplicateMediumModal .header-container {
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  display: flex;
}

.CommunicationTemplateInfoPopup__content {
  width: 300px;
}

.EmailTemplateEditorModal .padding-container {
  padding: 18px 24px;
}

.EmailTemplateEditorModal .actions-buttons-main-container {
  justify-content: space-between;
  display: flex;
}

.EmailTemplateEditorModal .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.EmailTemplateEditorModal .show-design-revert-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  margin-right: 10px;
  display: flex;
}

.EmailTemplateEditorModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.EmailTemplateEditorModal .header-container {
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  display: flex;
}

.EmailTemplateEditorModal .file-url-container {
  gap: 20px;
  width: 100%;
  display: flex;
}

.EmailTemplateEditorModal .file-url-input {
  width: 100%;
}

.SmsEditorModal .padding-container {
  padding: 18px 24px;
}

.SmsEditorModal .actions-buttons-main-container {
  justify-content: space-between;
  display: flex;
}

.SmsEditorModal .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.SmsEditorModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.SmsEditorModal .header-container {
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  display: flex;
}

.customer-com-container {
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
  padding: 0 40px 24px;
  display: flex;
}

.customer-com-container .fields {
  margin: 0 !important;
}

.customer-com-container h3 {
  text-transform: uppercase;
  margin: 0;
}

.customer-com-container .field .title {
  margin: 0 0 .285714rem;
  font-size: 15px;
  font-weight: 700;
}

.customer-com-container .customer-com-tabs {
  z-index: 2;
  position: sticky;
  top: 39px;
}

.customer-com-container .customer-com-tabs .ui.secondary.pointing.menu {
  border: 0;
  justify-content: space-between;
}

.customer-com-container .customer-com-header {
  z-index: 5;
  background: #fff;
  padding-top: 24px;
  position: sticky;
  top: 0;
}

.customer-com-container .customer-com-header .row.center {
  border: 1px solid #e2e2e3;
  border-radius: 10px;
  box-shadow: 0 3px 6px #00000029;
}

.customer-com-container .full {
  width: 100%;
}

.customer-com-container .save {
  margin-right: 20px;
}

.customer-com-container .save button {
  justify-content: center;
  align-items: center;
  display: flex;
}

.customer-com-container .row {
  flex-direction: row;
  justify-content: space-between;
  gap: 24px;
  display: flex;
}

.customer-com-container .row .field {
  width: 100%;
}

.customer-com-container .row.center {
  align-items: center;
}

.customer-com-wrapper {
  border: 1px solid #e0e1e2;
  border-radius: 10px;
  padding: 19px 24px;
}

.customer-com-wrapper .field > label.small {
  align-items: center;
  display: flex;
}

.customer-com-wrapper .field > label.small i.icon {
  margin: -10px 0 0 11px;
}

.customer-com-wrapper .row {
  flex-direction: row;
  justify-content: space-between;
  gap: 24px;
  display: flex;
  margin: 18px 0 0 !important;
}

.customer-com-wrapper .file .field {
  margin: 0;
}

.customer-com-wrapper .full {
  width: 100%;
}

.customer-com-wrapper .full .field {
  margin: 0;
}

.customer-com-wrapper .auto {
  align-items: flex-end;
  gap: 38px;
  width: 100%;
  display: flex;
}

.customer-com-wrapper .auto .field {
  margin: 0;
}

.customer-com-wrapper .auto .toggle-test {
  width: 190px;
  min-width: 140px;
  padding-bottom: 5px;
}

.customer-com-wrapper .items-center {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin: 0;
  display: flex;
}

.customer-com-wrapper .items-center .ui.fitted.toggle.checkbox {
  margin: 7px 6px 0 0;
}

.customer-com-wrapper .mt-25 {
  margin-top: 25px !important;
}

.customer-com-wrapper .mt-24 {
  margin-top: 24px !important;
}

.customer-com-wrapper .mt-22 {
  margin-top: 22px !important;
}

.customer-com-wrapper .mt-20 {
  margin-top: 20px !important;
}

.customer-com-wrapper .mt-18 {
  margin-top: 18px !important;
}

.customer-com-wrapper .mt-16 {
  margin-top: 16px !important;
}

.customer-com-wrapper .mt-14 {
  margin-top: 14px !important;
}

.customer-com-wrapper .mt-12 {
  margin-top: 12px !important;
}

.customer-com-wrapper .mt-0 {
  margin-top: 0 !important;
}

.customer-com-wrapper .pr-12 {
  padding-right: 12px !important;
}

.customer-com-wrapper .row.half {
  width: calc(50% - 12px);
}

.customer-com-wrapper .ui.form .field {
  width: 100%;
}

.color-picker input[type="color"] {
  appearance: none;
  cursor: pointer;
  background-color: #0000;
  border: none;
  width: 80px;
  height: 30px;
}

.color-picker input[type="color"]::-webkit-color-swatch-wrapper {
  border: 1px solid #b6b4b4;
  border-radius: 4px;
  padding: 4px;
}

.color-picker input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.checkbox-label {
  padding-left: 8px;
}

.CustomerFilters__lease_company_label {
  margin: 10px 0 10px 10px;
}

.CustomerFilters__toolbar-grid {
  width: 100% !important;
  margin: 0 9px 0 22px !important;
}

.CustomerFilters__no-left-gutter {
  padding-left: 0 !important;
}

.CustomersTable {
  padding: 0 10px 55px;
}

.CustomersTable .company-name-container {
  align-items: center;
  gap: 5px;
  display: flex;
}

.CustomersTable .text-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.CustomersTable button.ui.basic.icon.button.delete-btn {
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 25px;
  display: flex;
  padding: 0 !important;
}

.CustomersTable button.ui.basic.icon.button.delete-btn i {
  font-size: 12px;
  position: relative;
  bottom: 2px;
}

.CustomersTable .column-size-100 {
  width: 100px;
}

.CustomersTable .column-size-150 {
  width: 150px;
}

.CustomersTable .column-size-250 {
  width: 250px;
}

.Dayplanner {
  grid-template-columns: auto 265px minmax(1px, 1fr) auto auto;
  column-gap: 8px;
  width: 100%;
  max-width: 1920px;
  height: calc(100dvh - 39px);
  margin: 0 auto;
  padding: 23px 13px 13px;
  display: grid;
}

.Dayplanner-columnHeader {
  justify-content: space-between;
  width: 100%;
  font-family: Lato;
  display: inline-flex;
  position: relative;
}

.Dayplanner-columnHeader h4 {
  margin-bottom: 14px;
  font-size: 14px;
}

.Dayplanner-columnHeader .collapse-column-label:hover {
  background-color: #f9fafb;
}

.Dayplanner-columnHeader .filter-menu-header-text {
  text-transform: capitalize;
  font-size: 14px;
  font-weight: bold;
}

.Dayplanner-columnHeader .filter-menu-option-text {
  font-size: 14px;
}

.Dayplanner-columnHeader .sort-btn {
  all: unset;
  text-align: center;
  cursor: pointer;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  width: 37px;
  height: 29px;
}

.Dayplanner-columnHeader .sort-btn .sort-btn-icon-container {
  justify-content: center;
  display: flex;
}

.Dayplanner-columnHeader .sort-btn .sort-btn-icon {
  width: 30px;
  height: 20px;
}

.Dayplanner-columnHeader div.label {
  cursor: pointer;
  background-color: #fff;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  display: flex;
  position: relative;
  right: 5px;
  box-shadow: 0 0 2px #00000029;
}

.Dayplanner-columnHeader .dropdown.button.icon.wo-mechanic-btn {
  background-color: #fff;
  border: 1px solid #70707029;
  font-weight: 600;
}

appointment .Dayplanner-columnHeader .dropdown.button.icon.wo-mechanic-btn.active {
  background-color: #f0f0f0;
}

.Dayplanner-columnHeader .dropdown.button.icon.wo-mechanic-btn i.filter.icon, .Dayplanner-columnHeader .dropdown.button.icon.wo-mechanic-btn i.filters.icon {
  color: #4caf50;
  background-color: #fff;
}

.Dayplanner-columnHeader .dropdown.button.icon.wo-mechanic-btn i.filter.icon:before, .Dayplanner-columnHeader .dropdown.button.icon.wo-mechanic-btn i.filters.icon:before {
  background-color: #fff;
}

.Dayplanner-columnContainer {
  min-width: 60px;
  height: calc(100vh - 75px);
}

.Dayplanner-columnContainer:not(.-mechanic-tasks) {
  width: 265px;
}

.Dayplanner-columnContainer.-collapsed {
  cursor: pointer;
  width: auto !important;
}

.Dayplanner-columnContainer.-mechanic-tasks .Dayplanner-columnHeader {
  align-items: center;
  margin-top: -4px;
  margin-bottom: 5px;
}

.Dayplanner-columnContainer.-mechanic-tasks .Dayplanner-columnHeader h4 {
  margin-bottom: 0;
}

.Dayplanner-columnContainer.-mechanic-tasks .Dayplanner-columnHeader .dropdown.button.icon.labeled {
  min-width: auto;
  position: relative;
  top: 0;
  right: 0;
}

.Dayplanner-columnContainer.-mechanic-tasks .Dayplanner-columnHeader-section {
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  display: flex;
}

.Dayplanner-columnContainer.-mechanic-tasks .wo-filter-active, .Dayplanner-columnContainer.-mechanic-tasks .mechanic-filter-active {
  background-color: #f9fafb !important;
}

.Dayplanner-column {
  scrollbar-width: thin;
  background-color: #f2f2f2;
  border-radius: 4px;
  flex-direction: column;
  row-gap: 10px;
  width: 100%;
  height: calc(100dvh - 112px);
  margin-bottom: 0;
  padding: 10px;
  display: flex;
  overflow: hidden scroll;
}

.with-news-stripe .Dayplanner-column {
  height: calc(100dvh - 148px);
}

.Dayplanner-column.-on-drag-hover {
  border: 1px dashed #d4d4d5;
}

.nav-bar-wrapper.Dayplanner-Navbar #navbar-portal-container {
  justify-content: flex-start;
  width: 100%;
  padding-left: 10px;
}

.nav-bar-wrapper.Dayplanner-Navbar .NavBarSearch {
  width: 100%;
}

.nav-bar-wrapper.Dayplanner-Navbar .NavBarSearch .nav-bar-search {
  min-width: 250px;
}

.BoardItem {
  cursor: default;
  background-color: #fff;
  border: 1px solid #d4d4d5;
  border-radius: 4px;
  flex: none;
  width: 100%;
  height: 88px;
  padding: 10px 12px 9px;
  font-size: 12.6px;
  line-height: 15px;
  position: relative;
}

.BoardItem .BoardItem-kiosk-label {
  align-items: center;
  gap: 3px;
  height: 20px;
  margin-top: 5px;
  padding: 0 5px;
  display: flex;
  position: absolute;
  right: 0;
  color: #fff !important;
  background-color: #21ba45 !important;
}

.BoardItem.-popup {
  width: 254px;
}

.BoardItem.-popup .-expanded {
  position: absolute;
  top: -3px;
  right: -3px;
}

.BoardItem.-cursor-move {
  cursor: move;
}

.BoardItem.-appointment-internal .wo-nr {
  color: #fe0202;
  background-color: #fef0e7;
}

.BoardItem.-panic {
  border: 1.5px solid #db2828;
}

.BoardItem.-inactive {
  opacity: .4;
}

.BoardItem.-bg-color-red {
  background-color: #db28281a;
}

.BoardItem.-bg-color-yellow {
  background-color: #fbbd081a;
}

.BoardItem-info {
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 24px);
  margin-bottom: 5px;
  font-size: 12.6px;
  font-weight: 700;
  line-height: 15px;
  overflow: hidden;
}

.BoardItem-last-update {
  column-gap: 7px;
  display: flex;
}

.BoardItem-last-update span.labor-minutes {
  font-style: italic;
}

.BoardItem-last-update span.labor-minutes i.icon {
  margin-right: 2.6px;
  font-size: 9.5px;
  position: relative;
  bottom: 1px;
}

.BoardItem-bottom-elements {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  min-height: 25px;
  max-height: 40px;
  margin-top: 3px;
  display: flex;
}

.BoardItem .Mechanics-Notifications-Container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.BoardItem .Mechanics-Notifications-Container .NotificationIcons {
  flex-wrap: wrap;
  column-gap: 1px;
  display: inline-flex;
}

.BoardItem .Mechanics-Notifications-Container .NotificationIcons .bigTire {
  font-size: 1.2em;
  padding: 3px 0 0 !important;
}

.BoardItem .Mechanics-Notifications-Container .NotificationIcons .bigTire svg {
  width: 25px;
}

.BoardItem .Mechanics-Notifications-Container .NotificationIcons .ui.circular.label, .BoardItem .Mechanics-Notifications-Container .NotificationIcons .circle-icon-container .circle-icon {
  text-align: center;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  font-size: 8px;
  display: flex;
  transform: none;
  padding: 0 4px !important;
}

.BoardItem .Mechanics-Notifications-Container .NotificationIcons .ui.circular.label.checkedTire, .BoardItem .Mechanics-Notifications-Container .NotificationIcons .circle-icon-container .circle-icon.checkedTire {
  position: relative;
  overflow: hidden;
}

.BoardItem .Mechanics-Notifications-Container .NotificationIcons .ui.circular.label.checkedTire .checkedTire-tire, .BoardItem .Mechanics-Notifications-Container .NotificationIcons .circle-icon-container .circle-icon.checkedTire .checkedTire-tire {
  font-size: 10px;
}

.BoardItem .Mechanics-Notifications-Container .NotificationIcons .ui.circular.label.checkedTire .checkedTire-check, .BoardItem .Mechanics-Notifications-Container .NotificationIcons .circle-icon-container .circle-icon.checkedTire .checkedTire-check {
  font-size: 9px;
  position: absolute;
  bottom: 0;
  right: 1px;
}

.BoardItem .Mechanics-Notifications-Container .NotificationIcons .ui.circular.label i, .BoardItem .Mechanics-Notifications-Container .NotificationIcons .circle-icon-container .circle-icon i {
  font-size: 9px;
}

.BoardItem .Mechanics-Notifications-Container .NotificationIcons .ui.circular.label i.icon, .BoardItem .Mechanics-Notifications-Container .NotificationIcons .circle-icon-container .circle-icon i.icon {
  margin: 0;
}

.BoardItem .Mechanics-Notifications-Container .NotificationIcons .customer-com .smile.icon {
  font-size: 1.3em;
  transform: translateY(1px);
}

.BoardItem .Mechanics-Notifications-Container .NotificationIcons-Header {
  font-size: 12.6px;
  font-weight: 600;
  position: relative;
  right: 3px;
}

.BoardItem .Mechanics-Notifications-Container .NotificationIcons .mechanic-info-profile-picture-fallback {
  color: #fff;
  background-color: gray;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  font-size: 12px;
  display: flex;
}

.BoardItem .Mechanics-Notifications-Container .NotificationIcons .AppointmentSpecialIndicators-AppointmentNotePopup .AppointmentNoteTitle {
  align-items: center;
  margin-bottom: 3px;
  display: flex;
}

.BoardItem .Mechanics-Notifications-Container .NotificationIcons .AppointmentSpecialIndicators-AppointmentNotePopup .AppointmentNoteTitle svg {
  margin-right: 7px;
  position: relative;
  bottom: 1px;
}

.BoardItem .Mechanics-Notifications-Container .NotificationIcons .AppointmentSpecialIndicators-AppointmentNotePopup .AppointmentNoteDescription {
  color: #767676;
  font-size: 12px;
  font-style: italic;
}

.BoardItem .Mechanics-Notifications-Container .NotificationIcons .AppointmentSpecialIndicators-AppointmentNotePopup .AppointmentNoteContent {
  margin-top: 10px;
  font-size: 14px;
}

.BoardItem .Mechanics-Notifications-Container .NotificationIcons .AppointmentSpecialIndicators-AppointmentNotePopup .AppointmentNoteContent .CallCustomerPhoneNr {
  margin-bottom: 6px;
}

.BoardItem .Mechanics-Notifications-Container-planning-mechanic {
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  display: flex;
  position: relative;
  top: 10px;
  left: 8px;
}

.BoardItem .Mechanics-Notifications-Container-planning-mechanic .initials-fallback {
  color: #fff;
  background-color: gray;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  font-size: 12px;
  display: flex;
}

.BoardItem .Mechanics-Notifications-Container .Working-On-Mechanics {
  justify-content: flex-end;
  align-items: center;
  display: inline-flex;
}

.BoardItem .Mechanics-Notifications-Container .Working-On-Mechanics img, .BoardItem .Mechanics-Notifications-Container .Working-On-Mechanics .initials-fallback {
  color: #fff;
  background-color: gray;
  border: 1px solid #21ba45;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 8px;
  display: flex;
}

.BoardItem .Mechanics-Notifications-Container .Working-On-Mechanics.margin-right-10 {
  margin-right: 10px;
}

.BoardItem .Mechanics-Notifications-Container .Working-On-Mechanics.margin-right-negative-8 {
  margin-right: -8px;
}

.BoardItem .Mechanics-Notifications-Container .Working-On-Mechanics.initials-fallback-margin-right .initials-fallback {
  margin-right: 2px;
}

.dayplanner-disabled {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 90px;
  font-size: 18px;
  display: flex;
}

.mechanic-filter-dropdown .divider {
  font-weight: 700 !important;
}

.mechanic-filter-dropdown:hover, .mechanic-filter-dropdown:hover i {
  background-color: #f9fafb !important;
}

.checkbox-is-visible {
  transform: scale(.7);
}

.pin-container {
  gap: 5px;
  box-shadow: none !important;
  align-items: center !important;
  display: flex !important;
}

.cancel-save-btn-wrapper {
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.documentation-modal-title {
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.status-message {
  border: 1px dotted #ccc;
  justify-content: center;
  align-items: center;
  height: 61px;
  display: flex;
}

.image-url-delete {
  justify-content: space-between;
  gap: 3px;
  margin-top: 20px;
  display: flex;
}

.image-url-delete i {
  cursor: pointer;
}

.image-url-delete div {
  gap: 3px;
  display: flex;
}

.image-url-delete div a {
  color: #6789c4;
}

.DealerDocumentationReadingModal .modal-first-row {
  align-items: center;
  gap: 13px;
  margin-bottom: 15px;
  display: flex;
}

.DealerDocumentationReadingModal .img-name-wrapper {
  align-items: center;
  gap: 10px;
  display: flex;
}

.DealerDocumentationReadingModal .img-name-wrapper .publisher-initials {
  color: #fff;
  background-color: #dadfe9;
  border-radius: 100px;
  padding: 10px;
  font-weight: 600;
}

.DealerDocumentationReadingModal .img-name-wrapper .profilePic {
  border-radius: 100px;
  object-fit: cover !important;
  width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  max-height: 40px !important;
}

.DealerDocumentationReadingModal .dealer-modal-content {
  border: 1px solid #dededf8a;
  margin-top: 30px;
  padding: 12px;
}

.DealerDocumentationReadingModal .dealer-modal-content img {
  width: 100%;
}

.DealerDocumentationReadingModal .exitModal {
  padding: relative;
  cursor: pointer;
  background-color: #0000;
  border: 1px solid #e2e2e3;
  border-radius: 6px;
  margin-left: auto;
  margin-right: 25px;
  padding: 20px;
  position: relative;
}

.DealerDocumentationReadingModal .exitModal i {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.DealerDocumentationReadingModal .dealer-modal-header {
  justify-content: space-between;
  display: flex;
}

.DealerDocumentationReadingModal .dealer-modal-header button {
  margin-right: 25px !important;
}

.DealerDocumentationReadingModal .document-info {
  align-items: center;
  gap: 10px;
  display: flex;
}

.DealerDocumentationReadingModal .category-info {
  padding: 2px;
}

.DealerDocumentationReadingModal .category-name-dealer {
  color: #000 !important;
  background: none !important;
  border: 1px solid #e2e2e3 !important;
  font-weight: normal !important;
}

.url-to-preview {
  color: #6789c4;
}

.DealerDocumentationTable .doc-table-category {
  color: #000 !important;
  background: none !important;
  border: 1px solid #e2e2e3 !important;
  font-weight: normal !important;
}

.DealerDocumentationTable .edit-button-container {
  justify-content: flex-end;
  padding-right: 10px;
  display: flex;
}

.DealerDocumentationTable .edit-button {
  cursor: pointer;
  background: #c7eed0;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  display: flex;
}

.DealerDocumentationTable .edit-icon {
  color: #32bf53 !important;
  margin: 0 !important;
  font-size: 14px !important;
}

.DealerDocumentationTable .no-data {
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.dealer-documentations-container {
  flex-direction: column;
  padding: 20px 20px 22px;
  display: flex;
}

.dealer-toolbar-container {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 0 0 20px;
  display: flex;
}

.dealer-toggle-container {
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  display: flex;
}

.dealer-invoice-disabled-message-link-text {
  cursor: pointer;
  color: #2185d0;
  text-decoration: underline;
}

.InvoiceHistoryTable .pagination-controls .nav-button i {
  margin: 0;
}

.InvoiceHistoryTable .pagination-container {
  margin-top: 44px;
  margin-bottom: 55px;
}

.InvoiceHistoryTable table {
  overflow: hidden;
  border-radius: 6px !important;
}

.LocationLicense-Navbar #navbar-portal-container {
  justify-content: flex-start;
  padding-left: 30px;
}

.LocationLicenseOverview-Navbar {
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
  display: flex;
}

@media (width <= 1500px) {
  .LocationLicenseOverview-Navbar {
    gap: 15px;
  }
}

.LocationLicenseOverview-Navbar-Item {
  letter-spacing: 0;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  display: flex;
}

.LocationLicenseOverview-Navbar-Item span {
  color: #000c;
  font: 900 13px / 24px Lato;
}

.LocationLicenseOverview-Navbar-Item:last-child {
  flex: 1;
  width: 35em;
  min-width: 0;
}

.LocationLicenseOverview-Navbar-Item .span-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  font-weight: 400;
  overflow: hidden;
}

.LocationLicenseOverview-Header {
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  display: flex;
}

.LocationLicenseOverview-Header-Actions {
  justify-content: center;
  align-items: center;
  gap: 20px;
  display: flex;
}

.LocationLicenseOverview-container {
  padding: 0 10px;
}

.LocationLicenseOverview-toggle-container {
  opacity: 1;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  gap: 15px;
  height: 36px;
  padding: 10px 20px;
  display: flex;
}

.LocationLicenseOverview-toggle-container span {
  letter-spacing: 0;
  color: #000;
  font: 14px / 24px Lato;
}

.LocationLicenseOverview-add-container button {
  font: 600 14px / 17px Lato;
  letter-spacing: 0 !important;
  color: #000 !important;
}

.LocationLicenseOverview .MonthlyTable table {
  overflow: hidden;
  border-radius: 6px !important;
}

.LocationLicenseOverview .MonthlyTable tbody td.td-code {
  padding: 0 !important;
}

.LocationLicenseOverview .MonthlyTable tbody td.td-actions .subitem-delete {
  justify-content: flex-end;
  align-items: center;
  padding-right: 17px;
  display: flex;
}

.LocationLicenseOverview .MonthlyTable tbody td.td-actions .subitem-delete div {
  text-align: center;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  height: 25px;
  padding: 0 6px;
  display: flex;
}

.LocationLicenseOverview .MonthlyTable tbody td.td-actions .subitem-delete div i {
  margin: 0 0 3px;
}

.LocationLicenseOverview .license-code {
  color: #00c12d;
  background: #d2f1da no-repeat padding-box padding-box;
  border: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  max-width: 40px;
  height: 36px;
  display: flex;
}

.LocationLicenseOverview .no-license-code {
  color: red;
  background: #ffd9d9 no-repeat padding-box padding-box;
  border: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  max-width: 40px;
  height: 36px;
  display: flex;
}

.LocationLicenseOverview .checkbox-automatic-licenses {
  transform: scale(.7);
}

.location-overview-header-tab {
  border: 1px solid #e6e6e6 !important;
  font-weight: bold !important;
}

.ui.wide.popup {
  white-space: nowrap;
  color: #414141;
}

.InvoiceModal .InvoiceModal-header {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.InvoiceModal .InvoiceModal-header button {
  width: 35px;
  margin-right: 20px;
}

.InvoiceModal .InvoiceModal-header button i.icon {
  margin-top: -4px !important;
}

.InvoiceModal .InvoiceModal-Content {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vh - 200px);
  display: flex;
}

.InvoiceModal .InvoiceModal-Content iframe {
  border: none;
  width: 100%;
  height: calc(100vh - 200px);
}

.InvoiceModal .InvoiceModal-Content:focus {
  outline: none;
}

.InvoiceTable .pagination-controls .nav-button i {
  margin: 0;
}

.InvoiceTable table {
  overflow: hidden;
  border-radius: 6px !important;
}

.StandaloneLicenseModal {
  margin: 0;
  padding-top: 0;
}

.StandaloneLicenseModal.ui.modal .content {
  background: #fff;
  width: 100%;
  padding: 2rem;
  font-size: 1em;
  line-height: 1.4;
  display: block;
}

.StandaloneLicenseModal.ui.modal .actions {
  text-align: right;
  background: #fff;
  border-top: 1px solid #e2e2e3;
  justify-content: space-between;
  padding: 18px 24px;
  display: flex;
}

.StandaloneLicenseModal .search {
  align-items: center;
  width: 100%;
  display: flex;
}

.StandaloneLicenseModal .search button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  flex: none;
  height: 38px;
  padding: 0 12.3px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 0 !important;
}

.StandaloneLicenseModal .search button i.icon {
  opacity: 1;
}

.StandaloneLicenseModal .search input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.StandaloneLicenseModal .search.rounded input {
  border-radius: 4px;
}

.StandaloneLicenseModal .action-buttons {
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  width: 100%;
  display: flex;
}

.StandaloneLicenseModal .radio-button {
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  border: 1px solid #dededf !important;
  padding: 10px !important;
}

.StandaloneLicenseModal .radio-button label {
  font-weight: normal !important;
}

.StandaloneLicenseModal .react-datepicker__portal {
  width: 100%;
  height: 100%;
}

.dealer-quality-checks-tabular .details-card-container {
  flex: 1;
  align-items: center;
  display: flex;
}

.dealer-quality-checks-tabular .details-card-filters-container {
  gap: 20px;
  width: 100%;
  margin-right: 10px;
  display: flex;
}

.dealer-quality-checks-tabular .table-container {
  margin-top: 10px;
}

.dealer-quality-checks-tabular .wo-nr {
  cursor: pointer;
}

.DealerUserReportsCustomHeader {
  width: 150px;
}

.DealerUsersReportTable {
  margin-top: 15px;
}

.DealerUsersReportTable .ReactTable thead tr th {
  padding-left: 0;
  vertical-align: bottom !important;
}

.DealerUsersReportTable .ReactTable thead tr th, .DealerUsersReportTable .ReactTable tbody tr td {
  text-align: left !important;
}

.DealerUsersReportTable .ReactTable thead tr th:first-letter {
  text-transform: capitalize;
}

.DealerUsersReportTable .ReactTable .threshold-placeholder {
  padding-left: 12px;
}

.DealerUsersReportTable .threshold-value-cell {
  color: #000c;
  border-radius: 4px;
  padding: 4.5px 8.2px;
}

.DealerUsersReportTable .title-sorting-icons-header {
  position: relative;
}

.DealerUsersReportTable .title-sorting-icons-header .title {
  display: inline-block;
  position: relative;
  left: 5px;
}

.DealerUsersReportTable .title-sorting-icons-header .title strong {
  writing-mode: tb;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.DealerUsersReportTable .title-sorting-icons-header .icons {
  cursor: pointer;
  font-size: 14px;
  display: inline-block;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 !important;
}

.DealerUsersReportTable .title-sorting-icons-header .icons i {
  position: relative;
  top: 3px;
}

.DealerUsersReportTable th:first-child .title-sorting-icons-header .title, .DealerUsersReportTable th:nth-child(2) .title-sorting-icons-header .title, .DealerUsersReportTable th:nth-child(3) .title-sorting-icons-header .title {
  left: 10px;
}

.DealerUsersReportTable th:first-child .title-sorting-icons-header .title strong, .DealerUsersReportTable th:nth-child(2) .title-sorting-icons-header .title strong, .DealerUsersReportTable th:nth-child(3) .title-sorting-icons-header .title strong {
  transform: unset;
  writing-mode: unset;
  text-orientation: unset;
}

.DealerUsersReportTable th:first-child .title-sorting-icons-header .icons, .DealerUsersReportTable th:nth-child(2) .title-sorting-icons-header .icons, .DealerUsersReportTable th:nth-child(3) .title-sorting-icons-header .icons {
  position: relative;
  left: 10px;
}

.thresholdrange-wrapper {
  display: flex;
}

.thresholdrange-wrapper > * {
  text-align: center;
  outline: none;
  align-items: center;
  max-width: 30px;
  padding: 3px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
}

.thresholdrange-wrapper > ::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.thresholdrange-wrapper > ::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.thresholdrange-wrapper > * {
  appearance: textfield;
}

.thresholdrange-wrapper .min-threshold-input {
  border: 1px solid #ee3115;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.thresholdrange-wrapper .max-threshold-input {
  border: 1px solid #4d853b;
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.TyreMotionReport__chart {
  width: 100%;
  height: 400px;
  margin: 20px 0;
}

.TyreMotionReport__tooltip {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px;
  box-shadow: 0 2px 4px #0000001a;
}

.TyreMotionReport__tooltip-label {
  color: #333;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}

.TyreMotionReport__tooltip-row {
  margin-bottom: 4px;
}

.TyreMotionReport__tooltip-row:last-child {
  margin-bottom: 0;
}

.TyreMotionReport__tooltip-content {
  font-size: 13px;
  line-height: 1.4;
}

.TyreMotionReport__tooltip-location {
  margin-right: 8px;
  font-weight: 500;
}

.TyreMotionReport__tooltip-value {
  color: #666;
  margin-right: 12px;
}

.TyreMotionReport__tooltip-value:last-child {
  margin-right: 0;
}

.TyreMotionReport__label-text {
  fill: #666;
  font-size: 11px;
}

.DealerReports__dropdowns {
  justify-content: flex-end;
  width: 100%;
  display: flex;
}

.DealerReports__dropdowns-container {
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
  width: 100%;
  display: flex;
}

.DealerReports__dropdowns-container .ui.selection.dropdown.button {
  text-align: left;
  height: 26px;
  min-height: 26px;
  margin: 0 10px 0 0;
  background-color: #0000 !important;
  border: 1px solid #e2e2e3 !important;
  padding: 0 8px !important;
  box-shadow: 0 0 2px #00000029 !important;
}

.DealerReports__dropdowns-container .ui.selection.dropdown.button.active {
  background-color: #fff !important;
  border: 1px solid #3498db !important;
}

.DealerReports__dropdowns-container .ui.selection.dropdown.button .icon {
  top: inherit;
  background-color: #0000 !important;
  font-size: 13px !important;
}

.DealerReports__dropdowns-container .ui.selection.dropdown.button .text {
  color: #414141;
  font-size: 12.6px;
  font-weight: 400 !important;
}

.DealerReports__dropdowns-container .ui.selection.dropdown.button input.search {
  padding-top: 5px !important;
}

.DealerReports__dropdowns-container .datepicker-wrapper {
  text-align: left;
  background-color: #0000;
  max-width: 242px;
  height: 26px;
  margin-right: 10px;
  position: relative;
  left: -10px;
  border: 1px solid #e2e2e3 !important;
  padding: 0 8px !important;
  box-shadow: 0 0 2px #00000029 !important;
}

.DealerReports__dropdowns-container .datepicker-wrapper .datepicker-row {
  background-color: #0000;
}

.DealerReports__dropdowns-container .datepicker-wrapper .datepicker-row p {
  font-size: 12.6px;
}

.DealerReports__dropdowns-container .datepicker-wrapper .datepicker-row p.date {
  color: #333333de;
}

.DealerReports__container {
  flex-direction: column;
  padding: 0 20px 22px;
  display: flex;
}

.DealerReports__container-header {
  z-index: 2;
  background-color: #fff;
  align-items: center;
  padding-top: 22px;
  padding-bottom: 5px;
  display: flex;
  position: sticky;
  top: 0;
}

.DealerReports__container-header-wrapper {
  border: 1px solid #e0e1e2;
  border-radius: 10px;
  flex-direction: column;
  gap: 13px;
  width: 100%;
  padding: 0 20px;
  display: flex;
  box-shadow: 0 3px 6px #00000029;
}

.DealerReports__container-header-wrapper .row {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.DealerReports__container-header-wrapper .row .tabs-container a {
  text-transform: uppercase;
}

.DealerReports__container-header-wrapper .row button.ui {
  height: 25px;
}

.DealerReports__container-header-wrapper .row .ui.icon.button {
  padding: 0 7px !important;
}

.DealerReports__container-header-wrapper .row i.icon {
  font-size: 12px;
  margin-top: -2px !important;
  margin-right: -2px !important;
}

.DealerReports__container-content {
  flex-direction: column;
  gap: 20px;
  padding-top: 20px;
  display: flex;
}

.DealerReports__container-content .row .export-button {
  margin-left: auto;
}

.DealerReports__container-content .row .export-button button.button {
  background: #fff no-repeat padding-box padding-box;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 35px;
  display: flex;
  box-shadow: none !important;
}

.DealerReports__container-content .row .export-button button.button i.icon {
  font-size: 13px !important;
}

.DealerReports__container-content .row .export-button button.button:hover {
  box-shadow: none !important;
}

.DealerReports__container-content .full {
  width: 100%;
}

.DealerReports__container-content .end {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.DealerReports__container-content .button {
  position: relative;
  height: 25px !important;
  padding: 0 12px !important;
  font-size: 11px !important;
}

.DealerReports__container-content .button i.icon {
  font-size: 11px !important;
}

.DealerReports__container-content .button i.icon.arrow.rotate {
  padding-left: 7px;
}

.DealerReports__container-content .button .divider {
  background-color: #e2e2e3;
  width: 1px;
  height: 25px;
  position: absolute;
  top: 0;
  right: 25px;
  padding-right: 0 !important;
}

.DealerReports__container-content .ReactTable thead {
  position: sticky;
  top: 0;
}

.DealerReports__container-content .ReactTable thead tr th {
  vertical-align: top;
  text-transform: capitalize;
  padding-top: 7px;
  padding-bottom: 7px;
}

.DealerReports__container-content .ReactTable thead tr th:not(:first-child), .DealerReports__container-content .ReactTable tbody tr td:not(:first-child) {
  text-align: center;
}

.CustomLegend {
  text-align: center;
  margin: 0;
  padding: 0;
}

.CustomLegend .list-item {
  margin-right: 10px;
  display: inline-block;
}

.CustomLegend .list-item svg {
  vertical-align: middle;
  margin-right: 4px;
  display: inline-block;
}

.SimpleBarChart .margin-auto {
  margin: auto !important;
}

.DpoContract {
  height: 100vh;
  overflow-y: auto;
}

.DpoContract .header {
  color: #fff;
  letter-spacing: .5px;
  background-color: #48913d;
  padding: 14px 0;
  font-weight: 300;
}

.DpoContract .header div {
  width: 840px;
  margin: 0 auto;
}

.DpoContract .content {
  border: 1px solid #eee;
  width: 840px;
  margin: 4em auto 0;
}

.DpoContract .content .embeded-contract {
  height: 600px;
}

.DpoContract .content h1 {
  background-color: #f7f7f7;
  border-bottom: 1px solid #eee;
  margin-bottom: 0;
  padding: 14px;
  font-size: 1.25em;
  font-weight: 400;
}

.DpoContract .content h1 .UserInfo {
  float: right;
  font-size: .9em;
}

.DpoContract .content p {
  padding: 7px 14px;
  font-size: 15px;
}

.DpoContract .content .footer {
  background-color: #f7f7f7;
  border-top: 1px solid #eee;
  padding: 14px;
}

.DpoContract .content .footer button {
  border-radius: 3px !important;
}

.DpoContract .content .footer button.ui.button.accept-button {
  color: #fff;
  text-transform: uppercase;
  background-color: #27a2ea;
}

.ExactDashboard {
  flex-direction: column;
  height: 100%;
  padding: 20px;
  display: flex;
}

.ExactDashboard__filters {
  z-index: 2;
  gap: 16px;
  width: 100%;
  margin-bottom: 24px;
  display: flex;
}

.ExactDashboard__filters > * {
  min-width: 0;
}

.ExactDashboard__filters .ui.dropdown, .ExactDashboard__filters .ui.input {
  flex: 1.5;
  width: 100%;
}

.ExactDashboard__filters .datepicker-wrapper {
  min-width: unset;
  max-width: unset;
  flex: .8;
  width: 100%;
}

.ExactDashboard .ExactFailuresTable {
  width: 100%;
  position: relative;
}

.ExactDashboard .ExactFailuresTable .ReactTable {
  table-layout: fixed;
  width: 100%;
  min-width: 1200px;
}

.ExactDashboard .ExactFailuresTable .ReactTable-wrapper {
  width: 100%;
  overflow-x: hidden;
}

.ExactDashboard .ExactFailuresTable .ReactTable-body {
  max-height: 80vh;
  overflow-y: auto;
}

.ExactDashboard .ExactFailuresTable .ReactTable thead {
  z-index: 1;
  position: sticky;
  top: 0;
}

.ExactDashboard .ExactFailuresTable .ReactTable th, .ExactDashboard .ExactFailuresTable .ReactTable td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ExactDashboard .pagination {
  justify-content: center;
  margin-top: 16px;
  display: flex;
}

.ExactDashboard .ui.loader {
  margin-top: 48px;
}

.media-preview-question-result {
  color: #fff;
  cursor: pointer;
  background-color: #02b5ad;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 25px;
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
}

.media-preview-question-text-container {
  display: flex;
}

.media-preview-question-text {
  font-size: 9px;
}

.media-preview-question-result-icon {
  color: #fff;
  margin: auto !important;
}

.media-preview-container {
  align-items: center;
  gap: 12px;
  display: flex;
}

.snooze-button-card-user {
  cursor: pointer;
  background-color: #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 25px;
  display: flex;
}

.snooze-button-card-icon {
  color: #767676 !important;
  margin: auto !important;
}

.snoozed-button-snoozed {
  background-color: #2d84ce;
}

.snoozed-button-icon-snoozed {
  color: #fff !important;
}

.CarsLeadsFilters .react-datepicker-wrapper {
  width: 100% !important;
}

.car-leads-table-customer-card-icon {
  margin-right: 12px;
}

.CustomDateRangeInput {
  display: flex;
}

.CustomDateRangeInput .button {
  box-shadow: none;
  cursor: pointer;
  background-color: #0000;
  border: none;
  flex: auto;
}

.CustomDateRangeInput .dates-container {
  align-items: center;
  display: flex;
}

.CustomDateRangeInput .date-container {
  flex: auto;
  margin-left: 16px;
}

.CustomDateRangeInput .date-right-container {
  flex: auto;
}

.CustomDateRangeInput .date-text {
  font-size: 14px;
  display: flex;
}

.CustomDateRangeInput .dates-divider {
  border-left: 1px solid #22242626;
  height: 36px;
  margin: 0 16px;
}

.NotSnoozedTable .react-datepicker-wrapper {
  width: 31px !important;
}

.LeadsDashboard .toolbar-container {
  justify-content: center;
  align-items: center;
  margin: 9px 9px 5px 0;
  display: flex;
}

.LeadsDashboard .toolbar-grid {
  width: 100%;
  margin: 0 9px 0 22px;
}

.LeadsDashboard .toolbar-button {
  color: #21ba45;
  flex: auto;
  justify-content: center;
  align-items: center;
  display: flex;
  width: 38px !important;
  height: 38px !important;
  box-shadow: none !important;
  border: 1px solid #22242626 !important;
}

.LeadsDashboard .table-container {
  padding: 0 10px 55px;
}

.LeadsDashboard .toolbar-reset-export-buttons-container {
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-right: 12px;
  display: flex;
}

.LeadsDashboard .table-header-text {
  color: #000c;
  white-space: normal;
  font-size: 13px;
  font-weight: 900;
}

.LeadsDashboard .right-gutter {
  padding-right: 4.5px !important;
}

.LeadsDashboard .left-gutter {
  padding-left: 4.5px !important;
}

.LeadsDashboard .no-right-gutter {
  padding-right: 0 !important;
}

.LeadsDashboard .no-left-gutter {
  padding-left: 0 !important;
}

.LeadsDashboard .limegreen-color {
  color: #21ba45 !important;
}

.LeadsDashboard .react-datepicker-wrapper {
  visibility: visible;
  cursor: pointer;
}

.LeadsDashboard .datepicker-wrapper {
  cursor: pointer;
  height: 38px;
}

.LeadsDashboard .flex-align-justify-center {
  justify-content: space-around !important;
  align-items: center !important;
  display: flex !important;
}

.LeadsDashboard .filters-checkbox-container {
  align-items: center;
  gap: 7px;
  display: flex;
}

.LeadsDashboard .filters-checkboxes-container {
  justify-content: space-evenly;
  gap: 7px;
  width: 100%;
  display: flex;
}

.LeadsDashboard .table-action-buttons-container {
  justify-content: flex-end;
  gap: 6px;
  margin-right: 10px;
  display: flex;
}

.LeadsDashboard .table-icon-placeholder-div {
  width: 32px;
  height: 25px;
}

.LeadsDashboard .default-cursor {
  cursor: default;
}

.LeadsDashboard .th-vertical-alignment {
  vertical-align: baseline;
  align-items: baseline;
}

.SimplePieChart {
  margin: auto;
}

.SimplePieChart .simple-pie-chart-legend {
  column-gap: 10px;
  list-style-type: square;
  display: grid;
}

.StackedBarChart .margin-auto {
  margin: auto !important;
}

.StackedBarChart .tooltip-wrapper {
  white-space: nowrap;
  background-color: #fff;
  border: 1px solid #ccc;
  margin: 0;
  padding: 10px;
}

.StackedBarChart .tooltip-wrapper .tooltip-label {
  margin: 0;
}

.StackedBarChart .tooltip-wrapper .tooltip-item-list {
  margin: 0;
  padding: 0;
}

.recharts-wrapper.TotalPieChart {
  width: 100%;
  height: 100%;
  margin: auto;
}

.recharts-wrapper.TotalPieChart .custom-label-inner-text {
  color: #000c;
  font-size: 23px;
  line-height: 23px;
  display: block;
}

.recharts-wrapper.TotalPieChart .total-pie-chart-legend {
  column-gap: 10px;
  list-style-type: square;
  display: grid;
}

.recharts-wrapper.TotalPieChart .tooltip-wrapper {
  white-space: nowrap;
  background-color: #fff;
  border: 1px solid #ccc;
  margin: 0;
  padding: 10px;
}

.recharts-wrapper.TotalPieChart .tooltip-wrapper .tooltip-label {
  margin: 0;
}

.recharts-wrapper.TotalPieChart .tooltip-wrapper .tooltip-item-list {
  margin: 0;
  padding: 0;
}

.LocationReports__dropdowns {
  justify-content: flex-end;
  width: 100%;
  display: flex;
}

.LocationReports__dropdowns-container {
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
  width: 100%;
  display: flex;
}

.LocationReports__dropdowns-container .ui.selection.dropdown.button {
  text-align: left;
  height: 26px;
  min-height: 26px;
  margin: 0 10px 0 0;
  background-color: #0000 !important;
  border: 1px solid #e2e2e3 !important;
  padding: 0 8px !important;
  box-shadow: 0 0 2px #00000029 !important;
}

.LocationReports__dropdowns-container .ui.selection.dropdown.button.active {
  background-color: #fff !important;
  border: 1px solid #3498db !important;
}

.LocationReports__dropdowns-container .ui.selection.dropdown.button .icon {
  top: inherit;
  background-color: #0000 !important;
  font-size: 13px !important;
}

.LocationReports__dropdowns-container .ui.selection.dropdown.button .text {
  color: #414141;
  font-size: 12.6px;
  font-weight: 400 !important;
}

.LocationReports__dropdowns-container .ui.selection.dropdown.button input.search {
  padding-top: 5px !important;
}

.LocationReports__dropdowns-container .datepicker-wrapper {
  text-align: left;
  background-color: #0000;
  max-width: 240px;
  height: 26px;
  margin-right: 10px;
  position: relative;
  left: -10px;
  border: 1px solid #e2e2e3 !important;
  padding: 0 8px !important;
  box-shadow: 0 0 2px #00000029 !important;
}

.LocationReports__dropdowns-container .datepicker-wrapper .datepicker-row {
  background-color: #0000;
}

.LocationReports__dropdowns-container .datepicker-wrapper .datepicker-row p {
  font-size: 12.6px;
}

.LocationReports__dropdowns-container .datepicker-wrapper .datepicker-row p.date {
  color: #333333de;
}

.LocationReports__container {
  flex-direction: column;
  padding: 0 20px 22px;
  display: flex;
}

.LocationReports__container-header {
  z-index: 2;
  background-color: #fff;
  align-items: center;
  padding-top: 22px;
  padding-bottom: 5px;
  display: flex;
  position: sticky;
  top: 0;
}

.LocationReports__container-header-wrapper {
  border: 1px solid #e0e1e2;
  border-radius: 10px;
  flex-direction: column;
  gap: 13px;
  width: 100%;
  padding: 0 20px;
  display: flex;
  box-shadow: 0 3px 6px #00000029;
}

.LocationReports__container-header-wrapper .row {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.LocationReports__container-header-wrapper .row .tabs-container a {
  text-transform: uppercase;
}

.LocationReports__container-header-wrapper .row .sub-row {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  height: 25px;
  display: flex;
}

.LocationReports__container-header-wrapper .row .sub-row button.ui {
  height: 25px;
}

.LocationReports__container-header-wrapper .row .sub-row .ui.icon.button {
  padding: 0 7px !important;
}

.LocationReports__container-header-wrapper .row .sub-row i.icon {
  font-size: 12px;
  margin-top: -2px !important;
  margin-right: -2px !important;
}

.LocationReports__container-content {
  flex-direction: column;
  gap: 20px;
  padding-top: 20px;
  display: flex;
}

.LocationReports__container-content .full {
  width: 100%;
}

.LocationReports__container-content .end {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.LocationReports__container-content .button {
  position: relative;
  height: 25px !important;
  padding: 0 12px !important;
  font-size: 11px !important;
}

.LocationReports__container-content .button i.icon {
  font-size: 11px !important;
}

.LocationReports__container-content .button i.icon.arrow.rotate {
  padding-left: 7px;
}

.LocationReports__container-content .button .divider {
  background-color: #e2e2e3;
  width: 1px;
  height: 25px;
  position: absolute;
  top: 0;
  right: 25px;
  padding-right: 0 !important;
}

.location-reports-table-container {
  margin-top: 20px;
}

.location-reports-table-container .location-reports-table-wrapper {
  max-height: 600px;
  overflow: auto;
}

.ResetPassword .valid-password input {
  border-color: #21ba45 !important;
}

.ResetPassword-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.ResetPassword-header p {
  text-align: left;
  letter-spacing: 0;
  color: #000;
  opacity: 1;
  width: 100%;
  margin: 0;
  font-family: Lato !important;
}

.ResetPassword-header a {
  letter-spacing: 0;
  color: #b5b5b5;
  font-size: 14px;
  font-family: Lato !important;
}

.ResetPassword-language p {
  letter-spacing: 0;
  color: #414141;
  font-size: 14px;
  font-family: Lato !important;
}

.ResetPassword-success {
  opacity: 1;
  letter-spacing: 0;
  color: #21ba45;
  background: #def5e3 no-repeat padding-box padding-box;
  border: 1px solid #21ba45;
  border-radius: 4px;
  margin-bottom: 15px;
  font-size: 14px;
  padding: 10px 15px !important;
  font-family: Lato !important;
}

.ResetPassword-error {
  letter-spacing: 0;
  color: #912d2b;
  opacity: 1;
  background: #fff6f6 no-repeat padding-box padding-box;
  border: 1px solid #d9b6b5;
  border-radius: 4px;
  margin-top: 15px;
  padding: 10px 15px;
  font-size: 14px;
  font-family: Lato !important;
}

.ResetPassword .strength-meter {
  background: #ddd;
  border-radius: 2px;
  height: 3px;
  margin: 7px 0;
  position: relative;
}

.ResetPassword .strength-meter:before, .ResetPassword .strength-meter:after {
  content: "";
  height: inherit;
  z-index: 10;
  background: none;
  border: 0 solid #fff;
  border-width: 0 6px;
  width: calc(20% + 6px);
  display: block;
  position: absolute;
}

.ResetPassword .strength-meter:before {
  left: calc(20% - 3px);
}

.ResetPassword .strength-meter:after {
  right: calc(20% - 3px);
}

.ResetPassword .strength-meter .strength-meter-fill {
  height: inherit;
  border-radius: inherit;
  background: none;
  width: 0;
  transition: width .5s ease-in-out, background .25s;
  position: absolute;
}

.ResetPassword .strength-meter .strength-meter-fill[data-strength="0"] {
  background: #8b0000;
  width: 20%;
}

.ResetPassword .strength-meter .strength-meter-fill[data-strength="1"] {
  background: #ff4500;
  width: 40%;
}

.ResetPassword .strength-meter .strength-meter-fill[data-strength="2"] {
  background: orange;
  width: 60%;
}

.ResetPassword .strength-meter .strength-meter-fill[data-strength="3"] {
  background: orange;
  width: 80%;
}

.ResetPassword .strength-meter .strength-meter-fill[data-strength="4"] {
  background: green;
  width: 100%;
}

.ResetPasswordRequest {
  margin-bottom: 15px;
}

.ResetPasswordRequest-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.ResetPasswordRequest-header p {
  letter-spacing: 0;
  color: #414141;
  width: 100%;
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  font-family: Lato !important;
}

.ResetPasswordRequest-header a {
  letter-spacing: 0;
  color: #b5b5b5;
  font-size: 14px;
  font-family: Lato !important;
}

.ResetPasswordRequest-language p {
  letter-spacing: 0;
  color: #414141;
  font-size: 14px;
  font-family: Lato !important;
}

.ResetPasswordRequest-success {
  opacity: 1;
  letter-spacing: 0;
  color: #21ba45;
  background: #def5e3 no-repeat padding-box padding-box;
  border: 1px solid #21ba45;
  border-radius: 4px;
  padding: 15px 13px;
  font-size: 14px;
  font-family: Lato !important;
}

.Login {
  background-color: #f7f7f7;
  background-position-x: 55%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  overflow-y: auto;
}

.Login .overlay {
  background: #134e5e;
  background: -webkit-linear-gradient(to right, #71b280, #134e5e);
  background: linear-gradient(to right, #71b280, #134e5e);
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-right: 30px;
  display: flex;
  overflow: hidden;
}

.Login .overlay .container {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  display: flex;
}

.Login .overlay .container .repair_img {
  -webkit-user-drag: none;
  user-select: none;
  width: 60%;
  margin-top: 150px;
}

.Login .overlay .container .rhs {
  flex-direction: column;
  align-items: center;
  width: 403px;
  display: flex;
}

.Login .overlay .container .rhs .dropdown {
  align-items: center;
  min-height: 36px;
  padding: 0 2.1em 0 1em;
  display: flex;
}

.Login .overlay .container .rhs .dropdown.icon {
  top: 6px !important;
}

.Login .overlay .container .rhs .button {
  height: 42px;
}

.Login .overlay .container .rhs .button.light {
  background-position: 12px;
  background-repeat: no-repeat;
  background-size: 20px;
}

.Login .overlay .container .rhs #google-login-button .button.light {
  background-image: url(/static/image/g-logo.da6f9c98.png);
}

.Login .overlay .container .rhs #microsoft-login-button .button.light {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIyMSIgdmlld0JveD0iMCAwIDIxIDIxIj48dGl0bGU+TVMtU3ltYm9sTG9ja3VwPC90aXRsZT48cmVjdCB4PSIxIiB5PSIxIiB3aWR0aD0iOSIgaGVpZ2h0PSI5IiBmaWxsPSIjZjI1MDIyIi8+PHJlY3QgeD0iMSIgeT0iMTEiIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIGZpbGw9IiMwMGE0ZWYiLz48cmVjdCB4PSIxMSIgeT0iMSIgd2lkdGg9IjkiIGhlaWdodD0iOSIgZmlsbD0iIzdmYmEwMCIvPjxyZWN0IHg9IjExIiB5PSIxMSIgd2lkdGg9IjkiIGhlaWdodD0iOSIgZmlsbD0iI2ZmYjkwMCIvPjwvc3ZnPg==);
  color: #3c4043 !important;
  font-weight: 500 !important;
}

.Login .overlay .container .rhs .mt-10 {
  margin-top: 10px;
}

.Login .overlay .container .rhs .mt-15 {
  margin-top: 15px;
}

.Login .overlay .container .rhs .mt-25 {
  margin-top: 25px;
}

.Login .overlay .container .rhs a {
  color: #b5b5b5;
  text-align: right;
  cursor: pointer;
  width: 100%;
  text-decoration: none;
  display: block;
}

.Login .overlay .container .rhs h1 {
  color: #fff;
  font-family: Arial;
  font-size: 90px;
  font-weight: bold;
}

.Login .overlay .container .rhs h1 span {
  color: #1fbf5f;
}

.Login .overlay .container .rhs h3 {
  color: #fff;
  margin: 5px 0 0;
  font-family: Arial;
  font-size: 27px;
  font-weight: bold;
}

.Login .overlay .container .rhs .rhs_box {
  background-color: #fff;
  border-radius: 5px;
  width: 100%;
  margin-top: 33px;
  padding: 38px 31px;
  box-shadow: 0 3px 6px #00000029;
}

.Login .overlay .container .rhs .rhs_box .divider {
  width: 80%;
  margin: auto;
}

.Login .overlay .container .rhs .rhs_box .divider span {
  color: #ababab;
}

.Login .overlay .container .rhs .rhs_box .select-language-dropdown .ui.dropdown div.text {
  width: 100%;
  font-size: 15px;
}

.Login .overlay .container .rhs .password {
  position: relative;
}

.Login .overlay .container .rhs .password .password-icon {
  position: absolute;
  top: 7px;
  right: 10px;
  color: #b5b5b5 !important;
}

.Login .footer {
  background-color: #00000021;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 100%;
  height: 41px;
  display: flex;
  position: absolute;
  bottom: 0;
}

.Login .footer p, .Login .footer a {
  color: #fff;
  margin: 0;
  font-family: Lato;
  font-size: 16px;
  font-weight: 300;
  line-height: 19px;
}

.Login .ui.message {
  text-align: center;
}

.Login .LightGray {
  color: #ababab;
}

.Manufacturer__requestModal-header {
  display: flex;
}

.Manufacturer__requestModal-header h3 {
  margin-bottom: 0;
}

.Manufacturer__requestModal-header {
  justify-content: space-between;
  padding-right: 25px !important;
}

.Manufacturer__requestModal-header--closeBtn {
  position: relative;
}

.Manufacturer__requestModal-header--closeBtn i {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.Manufacturer__requestModal-content--input {
  width: 100%;
  margin-bottom: 10px;
}

.Manufacturer__ConfirmModal-header {
  color: #fff !important;
  background-color: #ffba39 !important;
}

.Manufacturer__ConfirmModal-content {
  flex-direction: column;
  display: flex !important;
}

.Manufacturer__ConfirmModal-content span {
  margin-bottom: 10px;
  font: bold 14px / 24px Lato;
}

.Manufacturer__ConfirmModal-content textarea {
  resize: vertical;
  border: 1px solid #dededf;
  border-radius: 4px;
  outline: none;
  padding: 8px 12px;
}

.Manufacturer__ConfirmModal-actions {
  justify-content: flex-end !important;
}

.Manufacturer__ConfirmModal-actions--confirmBtn {
  color: #fff !important;
  background-color: #ffba39 !important;
}

.Manufacturer__filters-container {
  align-items: start;
  gap: 11px;
  margin: 10px 0 22px;
  padding: 0 10px;
  display: grid;
}

.Manufacturer__filters-container .limegreen-color {
  color: #21ba45;
}

.Manufacturer__filters-container .status-filters-wrapper {
  align-self: center;
}

.Manufacturer__filters-container--addButton {
  cursor: pointer;
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-right: 12px;
  display: flex;
  border: 1px solid #e2e2e3 !important;
}

.Manufacturer__filters-container--addButton i {
  color: #21ba45;
  border-right: 1px solid #70707029;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  display: flex;
}

.Manufacturer__filters-container--addButton span {
  margin: 0 auto 0 8px;
  font: 600 14px / 17px Lato;
}

.Manufacturer__filters-container-4 {
  grid-template-columns: repeat(2, minmax(220px, 1fr)) minmax(210px, 1fr) 1fr 40px;
}

.Manufacturer__filters-container-5 {
  grid-template-columns: max-content repeat(2, minmax(220px, 1fr)) minmax(210px, 1fr) 1fr 40px;
}

.Manufacturer__RequestModal-actions {
  display: flex;
  justify-content: flex-end !important;
}

.Manufacturer__RequestModal-actions--approve, .Manufacturer__RequestModal-header {
  color: #fff !important;
  background-color: #ffba39 !important;
}

.Manufacturer__RequestModal-content {
  gap: 4px;
  flex-direction: column !important;
  display: flex !important;
}

.Manufacturer__RequestModal-content--textarea {
  resize: vertical;
  margin-top: 10pxs;
  border: 1px solid #dededf;
  border-radius: 4px;
  outline: none;
  padding: 8px 12px;
}

.Manufacturer__status {
  margin: 0 !important;
}

.Manufacturer__status i.icon {
  height: auto;
}

.Manufacturer__status-approved {
  background-color: #21ba45 !important;
}

.Manufacturer__status-approved i.icon {
  color: #fff;
}

.Manufacturer__status-declined {
  background-color: red !important;
}

.Manufacturer__status-declined i.icon {
  color: #fff;
  transform: translate(1px);
}

.Manufacturer__status-pending {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  background-color: #064299 !important;
}

.Manufacturer__status-pending i {
  justify-content: center;
  align-items: center;
  display: flex;
}

.Manufacturer__status-pending i.icon {
  color: #fff;
}

.Manufacturer__short-column {
  max-width: 60px;
}

.Manufacturer__tableColumn-actions {
  grid-template-columns: repeat(4, 32px);
  place-items: center;
  gap: 6px;
  width: max-content;
  margin-left: auto;
  margin-right: 10px;
  display: grid;
}

.Manufacturer__tableColumn-actions--cell > * {
  border-radius: 4px;
  overflow: hidden;
  width: 32px !important;
  height: 25px !important;
}

.Manufacturer__tableColumn-actions--requestStatus .menu {
  transform: translateX(-82px);
}

.Manufacturer__tableColumn-actions--statusId .menu {
  transform: translateX(-70px);
}

.Manufacturer__tableColumn-filters {
  align-items: center;
  gap: 2px;
  display: flex;
}

.Manufacturer__tableColumn-filters p {
  margin-bottom: 0;
}

.Manufacturer__tableColumn-iconContainer > * {
  transform: translate(-1.7px, -1.7px);
}

.Manufacturer__tableColumn-openLink {
  max-width: 60px;
}

.Manufacturer__tableColumn-openLink a {
  gap: 2px;
  display: flex;
}

.Manufacturer__tableColumn-openLink a i.icon {
  margin-top: 4px;
}

.Manufacturer__copyWrapper {
  align-items: center;
  min-width: 80px;
  display: flex;
}

.Manufacturer__copyWrapper i {
  display: none;
}

.Manufacturer__copyWrapper--shortColumn {
  min-width: 60px;
}

.Manufacturer__copyWrapper:hover i {
  display: block;
}

.WarrantyLocationInfo__location-info-card-container {
  justify-content: flex-end;
  display: flex;
}

.WarrantyLocationInfo__location-info-card-container i.icon {
  color: #801280;
  margin: 4px auto auto;
}

.WarrantyLocationInfo__location-info-card-user {
  color: #fff;
  background-color: #e6d0e6;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 25px;
  display: flex;
}

.WarrantyLocationInfo__location-info-card-no-box-shadow {
  box-shadow: none !important;
}

.WarrantyOrderStatus__order-status-container {
  justify-content: flex-end;
  display: flex;
}

.WarrantyOrderStatus__order-status-container i.icon {
  color: #fff;
  margin: 4px auto auto;
}

.WarrantyOrderStatus__order-status-icon-container {
  color: #fff;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 25px;
  display: flex;
}

.Manufacturer__container {
  padding: 10px;
}

.ArticleModal {
  width: 100%;
}

.ArticleModal .padding-container {
  padding: 2rem;
}

.ArticleModal .header-container {
  justify-content: space-between;
  display: flex;
}

.ArticleModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.ArticleModal .action-buttons-container {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.ArticleModal .right-buttons {
  gap: 10px;
  display: flex;
}

.ArticleModal .toggle-disable-button {
  color: #fff;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
  display: flex;
}

.ArticleModal .toggle-disable-button:hover {
  color: #fff;
}

.ArticleModal .toggle-disable-button.enable {
  background-color: #21ba45;
}

.ArticleModal .toggle-disable-button.disable {
  background-color: #f3ba2b;
}

.ArticleModal .toggle-disable-button i.icon.circle.exclamation.solid {
  color: #fff;
  margin-left: -10px;
}

.ArticleModal .ui.form .group {
  flex-wrap: wrap;
  gap: 1rem;
  display: flex;
}

.ArticleModal .ui.form .fields .field {
  flex: 1 1 0;
  width: 100%;
}

.ArticleModal .ui.form .fields .field label {
  margin-bottom: 8px;
}

.ArticleModal .quill-error .ql-toolbar.ql-snow {
  border: 1px solid #e0b4b4;
}

.ArticleModal .quill-error .ql-container.ql-snow {
  border: 1px solid #e0b4b4;
  border-top: 0;
}

.ArticleModal .content-editor .ql-editor {
  border-radius: 4px;
  min-height: 200px;
}

.FilterDatePicker {
  flex: 1;
}

.FilterDatePicker .react-datepicker-wrapper {
  width: 100% !important;
}

.FilterDatePicker__custom-input-container {
  cursor: pointer;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  height: 100%;
  padding: 6px 0;
}

.FilterDatePicker__custom-input-container:hover {
  box-shadow: none;
  border-color: #22242659;
}

.FilterDatePicker__custom-input-text {
  white-space: nowrap;
  color: #b5b5b5;
  margin-left: 14px;
}

.FilterDatePicker__custom-input-selected-value {
  color: #000000de;
}

.NewsDashboardFilters {
  width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
}

.NewsDashboardFilters__container.ui.grid {
  align-items: center;
  width: 100%;
  margin: 0 9px 0 22px;
  display: flex;
}

.NewsDashboardFilters .add-article-button.ui.button {
  color: #48913d;
  background-color: #fff;
  border: 1px solid #70707029;
  border-radius: 4px;
  width: 38px;
}

.NewsDashboardFilters .add-article-button.ui.button:hover {
  background-color: #f9fafb;
}

.NewsDashboardTable {
  padding: 0 10px 55px;
}

.NewsDashboardTable .row-index {
  margin-left: 4px;
}

.NewsDashboardTable .article-container {
  border-top: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 36px;
  margin-top: -1px;
  margin-left: -12px;
  display: flex;
}

.NewsDashboardTable .active-article {
  background: #d2f1da;
  box-shadow: 0 4px #d2f1da;
}

.NewsDashboardTable .active-article-text {
  color: #00c12d;
  font-size: 16px;
  font-weight: bold;
}

.NewsDashboardTable .disabled-article {
  background: #fff2d9;
  box-shadow: 0 4px #fff2d9;
}

.NewsDashboardTable .disabled-article-text {
  color: orange;
  font-size: 16px;
  font-weight: bold;
}

.NewsDashboardTable .title-container {
  gap: 5px;
  max-width: 200px;
  display: flex;
}

.NewsDashboardTable .text-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.NewsDashboardTable .category-label.ui.label {
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  padding: 6px;
  font-size: 1rem;
  font-weight: 600;
}

.NewsDashboardTable .text {
  color: #000c;
  font-size: 13px;
}

.NewsDashboardTable .text-center {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.NewsDashboardTable td.td-actions {
  padding-right: 15px;
}

.NewsDashboardTable td.td-actions button.edit-button.ui.button {
  color: #21ba45;
  background-color: #21ba4540;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 25px;
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
}

.note-suggestions-modal .noteSuggestionHeader {
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.note-suggestions-modal .noteSuggestionHeader h3 {
  margin: 0;
}

.note-suggestions-modal .sortable-item-note-suggestion .delete-note-suggestion {
  background-color: #0000;
  position: relative;
  border: 1px solid #dededf !important;
}

.note-suggestions-modal .sortable-item-note-suggestion .delete-note-suggestion:hover {
  opacity: .6;
  background-color: #0000;
}

.note-suggestions-modal .sortable-item-note-suggestion .delete-note-suggestion i {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%) !important;
}

.note-suggestions-modal .note-controls {
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  display: flex;
}

.note-suggestions-modal .note-controls .note-toggle-wrapper {
  align-items: center;
  gap: 10px;
  display: flex;
}

.note-suggestions-modal .note-controls .add-note-button {
  cursor: pointer;
  background-color: #21ba45;
  border-radius: 4px;
  align-items: center;
  display: flex;
}

.note-suggestions-modal .note-controls .add-note-button .plus-wrapper {
  background-color: #1fb142;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  padding: 8px 10px;
}

.note-suggestions-modal .note-controls .add-note-button .plus-wrapper i {
  color: #fff;
  margin: 0;
}

.note-suggestions-modal .note-controls .add-note-button span {
  color: #fff;
  padding: 8px 20px;
}

.note-suggestions-modal .note-modal-actions {
  justify-content: flex-end !important;
}

.note-suggestions-modal .note-modal-actions > * {
  align-items: center;
  height: 35px;
  display: flex;
}

.edit-button-container {
  background-color: #0000;
  border: none;
  outline: none;
  justify-content: flex-end;
  display: flex;
}

.edit-button {
  cursor: pointer;
  background: #c7eed0;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  display: flex;
}

.edit-icon {
  color: #32bf53 !important;
  margin: 0 !important;
  font-size: 14px !important;
}

.note-suggestions-container {
  padding: 20px 10px 10px;
}

.note-info-container {
  gap: 15px;
  display: flex;
}

.note-info-container .visibilityToggle {
  cursor: pointer !important;
}

.green-lime {
  color: #21ba45;
}

.edit-button-wrapper {
  justify-content: flex-end;
  padding: 5px;
  display: flex;
}

.note-container {
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.note-container li {
  align-items: stretch;
  gap: 10px;
  display: flex;
}

.note-container li .input-wrapper {
  display: flex;
  flex-grow: 1 !important;
}

.note-container li .input-wrapper input {
  border: 1px solid #dededf;
  border-right: none;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  outline: none;
  width: 100%;
  padding: 10px;
}

.drag-note-suggestion {
  cursor: pointer;
  background-color: #dededf;
  border: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  outline: none;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}

.Agreements {
  border: 1px solid #e0e1e2;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 10px 17px;
  box-shadow: 0 0 3px #00000029;
}

.Agreements__title {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

.Agreements__row {
  border-bottom: 1px solid #e0e1e2;
  padding: 5px 0;
}

.Agreements__row div {
  display: inline-flex;
}

.Agreements__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.Agreements i.icon.circle {
  margin: 0 4px;
  font-size: 6px;
  position: relative;
  top: 1px;
}

.DataProtectionOfficer {
  border: 1px solid #e0e1e2;
  border-radius: 10px;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px 17px;
  display: table;
  box-shadow: 0 0 3px #00000029;
}

.DataProtectionOfficer__title {
  white-space: nowrap;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
  display: block;
}

.DataProtectionOfficer__row {
  display: table-row;
}

.DataProtectionOfficer__row div:first-child {
  white-space: nowrap;
  border-bottom: 1px solid #e0e1e2;
  width: 1%;
  padding: 5px 30px 5px 0;
  font-weight: bold;
  display: table-cell;
}

.DataProtectionOfficer__row div:last-child {
  border-bottom: 1px solid #e0e1e2;
  width: 99%;
  padding: 5px 0;
  display: table-cell;
}

.DataProtectionOfficer__row:last-child div:first-child, .DataProtectionOfficer__row:last-child div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.PrivacyOverview {
  border: 1px solid #e0e1e2;
  border-radius: 10px;
  padding: 10px 17px;
  box-shadow: 0 0 3px #00000029;
}

.PrivacyOverview__row {
  border-bottom: 1px solid #e0e1e2;
  padding: 5px 0;
}

.PrivacyOverview__row:last-child {
  border-bottom: none;
}

.PrivacyOverview a {
  color: #4183c4;
}

.PrivacyAndSecurityDashboard.ui.grid {
  margin: 5px;
}

.PrivacyAndSecurityDashboard.ui.grid .privacy-gdoc-container {
  height: 99vh;
}

.PrivacyAndSecurityDashboard.ui.grid .privacy-gdoc-container .privacy-gdoc {
  border-radius: 10px;
  width: 100%;
  height: 100%;
}

.PrivacyAndSecurityDashboardLoader {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.AppointmentSteps .AppointmentSteps__content {
  z-index: 999999;
  background-color: #fff;
}

.AppointmentSteps .AppointmentSteps__content .AppointmentSteps__content_steps .ui.steps {
  border-radius: 0;
}

.AppointmentSteps .AppointmentSteps__content .AppointmentSteps__content_steps .ui.steps .step {
  cursor: pointer;
  color: #1dbf5e;
  font-size: .65rem;
  font-weight: 300;
  width: 175px !important;
}

.AppointmentSteps .AppointmentSteps__content .AppointmentSteps__content_steps .ui.steps .step.disabled {
  color: #2828284d;
}

.AppointmentSteps .AppointmentSteps__content .AppointmentSteps__content_steps .ui.steps .step {
  padding: .8em 1.25em;
}

.AppointmentSteps .AppointmentSteps__content .AppointmentSteps__content_steps .ui.steps .step:hover {
  background-color: #f7f7f7;
}

.AppointmentSteps .AppointmentSteps__content .AppointmentSteps__content_steps .ui.steps .step.-active-status-active {
  color: #fff;
  background: #1dbf5e;
}

.AppointmentSteps .AppointmentSteps__content .AppointmentSteps__content_steps .ui.steps .step.-active-status-active .content .title {
  color: #fff;
}

.AppointmentSteps .AppointmentSteps__content .AppointmentSteps__content_steps .ui.steps .step.-active-status-active:after {
  background-color: #1dbf5e;
}

.progress-bar-container {
  background-color: #f2f2f2;
  width: 800px;
  height: 200px;
  margin-top: 10px;
}

.progress-bar-top div:first-child {
  background-color: #2185d0;
  width: 100%;
  height: 10px;
}

.progress-bar-top div:nth-child(2), .progress-bar-bottom div:first-child {
  background-color: #48913d;
  width: 100%;
  height: 80px;
}

.progress-bar-bottom div:nth-child(2) {
  background-color: #2185d0;
  width: 100%;
  height: 10px;
}

.Header {
  background-color: #20bf5e;
  border-bottom: 1px solid #8edfae;
  height: 60px;
}

.Header .Header__column {
  height: 100%;
}

.Header .Header__column.-brand-column {
  padding-left: .75em !important;
}

.Header .Header__column.-brand-column .icon {
  color: #fff;
  cursor: pointer;
  font-size: 1.5em;
}

.Header .Header__column.-brand-column .Header__brand {
  color: #fff;
  letter-spacing: .5px;
  padding-top: .65rem;
  padding-left: .5em;
  font-size: 1em;
  display: inline-block;
  transform: translateY(-3px);
}

.Header .Header__column.-brand-column .Header__brand a {
  color: #fff;
}

.Header .Header__column.-brand-column .Header__brand a:hover {
  color: #e6e6e6;
}

.Header .Header__column.-search-column {
  padding-top: .55rem !important;
}

.Header .Header__column.-search-column .input {
  width: 100%;
  font-weight: 300;
}

.Header .Header__column.-search-column .input .search.icon {
  color: #20bf5e;
}

.Header .Header__column.-search-column .input input {
  letter-spacing: 1px;
  background-color: #fff;
  border-radius: 5px;
  transition: background-color .2s;
}

.Header .Header__column.-search-column .input input:focus {
  border-color: #0000;
}

.Header .Header__column.-search-column .input ::-webkit-input-placeholder {
  color: #575757;
  font-size: .9em;
  font-weight: 300;
}

.Header .Header__column.-search-column .input :-ms-placeholder-shown {
  color: #575757;
  font-size: .9em;
  font-weight: 300;
}

.Header .Header__column.-search-column .input ::-moz-placeholder {
  color: #575757;
  opacity: 1;
  font-size: .9em;
  font-weight: 300;
}

.Header .Header__column.-search-column .input :-moz-placeholder-shown {
  color: #575757;
  opacity: 1;
  font-size: .9em;
  font-weight: 300;
}

.Header .Header__column.-search-column .Header__search .ui.search > .results .result {
  padding: 7px;
  font-size: .9em;
}

.Header .Header__column.-filter-column {
  padding-top: .7rem !important;
}

.Header .Header__column.-filter-column .ui.dropdown.icon {
  color: #000;
  letter-spacing: .7px;
  background: #fff;
  min-width: 155px;
  font-size: .9em;
  font-weight: 400;
  border-radius: 5px !important;
  padding: 1em 1em 1em 3em !important;
}

.Header .Header__column.-user-menu-column {
  padding-top: .7rem !important;
}

.Header .Header__column.-user-menu-column .UserMenu__avatar.icon {
  float: right;
  color: #fff;
  margin-top: .8rem;
  font-size: 1.3em;
}

.Header .-contained-large {
  align-items: center;
  max-width: 1920px;
  margin-top: -4px;
  display: flex;
}

.status-offline .Header {
  background-color: #757575 !important;
  border-bottom: 1px solid #757575 !important;
}

.status-offline .DealerDropdown, .status-offline .LocationDropdown {
  background-color: #ffffff1a !important;
}

.DealerDropdown {
  border: none !important;
}

.DealerDropdown input {
  color: #fff;
  margin-top: 2px;
  padding-left: 36px !important;
}

.DealerDropdown.active > .text:not(.default) {
  color: #a2a2a2 !important;
}

.Header .Header__column.-brand-column .Header__brand {
  padding-top: 0;
}

.container-styleguide {
  padding: 10px;
}

.buttons-styleguide {
  margin-top: 10px;
}

.outline-buttons, .default-buttons {
  flex-direction: row;
  align-items: center;
  gap: 5px;
  display: flex;
}

.outline-buttons a, .default-buttons a {
  margin-right: 5px;
}

.default-buttons.nogap {
  gap: 0;
}

.UnlinkedExactLicensesFilters {
  width: 100%;
  padding: 0 25px !important;
}

.UnlinkedExactLicensesFilters__container.ui.grid {
  justify-content: space-between;
  align-items: center;
  margin: 15px 0 10px;
  display: flex;
}

.UnlinkedExactLicensesFilters .ui.grid > .column:not(.row), .UnlinkedExactLicensesFilters .ui.grid > * {
  padding-left: 0;
  padding-right: 0;
}

.UnlinkedExactLicensesFilters__ignored {
  padding-right: 10px !important;
}

.UnlinkedExactLicensesFilters__category {
  gap: 10px;
  display: flex !important;
}

.UnlinkedExactLicensesTable {
  padding: 0 10px 55px;
}

.UnlinkedExactLicensesTable .header-title {
  color: #000c;
  font-size: 13px;
  font-weight: 900;
}

.UnlinkedExactLicensesTable .text-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.UnlinkedExactLicensesTable button.ui {
  align-items: center;
  justify-content: baseline;
  letter-spacing: 0;
  min-width: 64px;
  height: 25px;
  padding: 0 8px 0 0;
  display: flex;
}

.UnlinkedExactLicensesTable button.ui.ignore {
  color: #fff;
  background-color: #ff9300;
}

.UnlinkedExactLicensesTable button.ui i.icon {
  padding-bottom: 12px;
  font-size: 10px;
  margin-right: 15px !important;
}

.DatePickerContainer {
  margin-top: -30px;
  margin-left: 255px;
}

.TimePeriodDropdown .ui.dropdown > .text {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: stretch;
  transition: none;
  display: inline-block;
  overflow: hidden;
}

.WarrantyDashboardFilters__first-toolbar-container {
  align-items: flex-end;
  margin: 9px 9px 5px 0;
  display: flex;
}

.WarrantyDashboardFilters__first-toolbar-container .ui.grid > .column:not(.row) {
  padding-bottom: 0;
}

.WarrantyDashboardFilters__second-toolbar-container {
  margin: 9px 9px 5px 0;
  display: flex;
}

.WarrantyDashboardFilters__second-toolbar-container .ui.grid > .column:not(.row) {
  padding-top: 0;
}

.WarrantyDashboardFilters__toolbar-grid {
  width: 100% !important;
  margin: 0 9px 0 22px !important;
}

.WarrantyDashboardFilters__toolbar-reset-export-buttons-container {
  gap: 9px;
  margin-right: 12px;
  display: flex;
}

.WarrantyDashboardFilters__right-gutter {
  padding-right: 4.5px !important;
}

.WarrantyDashboardFilters__left-gutter {
  padding-left: 4.5px !important;
}

.WarrantyDashboardFilters__no-right-gutter {
  padding-right: 0 !important;
}

.WarrantyDashboardFilters__no-left-gutter {
  padding-left: 0 !important;
}

.WarrantyDashboardFilters__flex-align-justify-center {
  justify-content: space-around !important;
  align-items: center !important;
  display: flex !important;
}

.WarrantyDashboardFilters__filters-checkbox-container {
  align-items: center;
  gap: 7px;
  display: flex;
}

.WarrantyDashboardFilters__filters-checkboxes-container {
  justify-content: space-around;
  gap: 5px;
  width: 100%;
  display: flex;
}

.WarrantyDashboardTable {
  padding: 0 10px 55px;
}

.WarrantyDashboardTable__intervention-question-result-container {
  width: 170px;
}

.WarrantyDashboardTable__ref-container {
  align-items: inherit;
  width: 70px;
  display: flex;
}

.WarrantyDashboardTable__copy-icon {
  display: none !important;
}

.WarrantyDashboardTable__copy-to-clipboard:hover .WarrantyDashboardTable__copy-icon {
  display: block !important;
}

.WarrantyDashboardTable__pin-status-container {
  width: 100px;
}

.WarrantyDashboardTable__warranty-pin-type-container {
  width: 60px;
}

.WarrantyDashboardTable__copy-to-clipboard {
  align-items: baseline;
}

.WarrantyDashboardTable__table-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}

.WarrantyDashboardTable__table-action-buttons-container {
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  display: flex;
}

.WarrantyDashboardTable__table-icon-placeholder-div {
  width: 32px;
  height: 25px;
}

.WarrantyDashboardTable__table-icon-placeholder-div-margin {
  margin-left: 5px;
}

.WarrantyDashboardTable__warranty-mechanic-fixed-status-container {
  flex-direction: column;
  position: relative;
}

.WarrantyDashboardTable__warranty-mechanic-fixed-status-container .fixed-icon-container {
  font-size: .5rem;
  position: absolute;
  top: 5px;
  left: 8px;
}

.WarrantyDashboardTable__mechanic-not-fixed {
  margin-top: 5px;
}

.WarrantyDashboardTable__table-header-text {
  color: #000c;
  font-size: 13px;
  font-weight: 900;
}

.WarrantyDashboardTable__claim-icon-filter {
  margin-top: 4px !important;
}

.WarrantyDashboardTable__customer-approved-table-column {
  margin-left: 10px;
  margin-right: 3px;
}

.CrudWebhookModal .padding-container {
  padding: 18px 24px;
}

.CrudWebhookModal .actions-buttons-main-container {
  justify-content: space-between;
  display: flex;
}

.CrudWebhookModal .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.CrudWebhookModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.CrudWebhookModal .header-container {
  justify-content: space-between;
  padding: 7px 0;
  display: flex;
}

.CrudWebhookModal .header-checkbox-container {
  gap: 10px;
  font-weight: bold;
  display: flex;
}

.CrudWebhookModal .triggers-container {
  justify-content: space-between;
  gap: 10px;
  display: flex;
}

.CrudWebhookModal .triggers-description-text-color {
  color: #0006;
}

.CrudWebhookModal .headers-delete-button-container {
  justify-content: flex-end;
  display: flex;
}

.CrudWebhookModal .add-headers-button {
  color: #fff !important;
  background: #21ba45 !important;
  border-radius: 4px !important;
}

.CrudWebhookModal .add-headers-button-icon {
  color: #fff !important;
  background: #1fb142 !important;
}

.WebhooksDashboardTable {
  padding: 0 10px 55px;
}

.WebhooksDashboardTable__table-name-container {
  gap: 8px;
  display: flex;
}

.WebhooksDashboardTable__name-text {
  align-self: center;
  display: flex;
}

.WebhooksDashboardTable__active-webhook {
  border-left: 3px solid #21ba45;
  height: 35px;
  margin-top: -3px;
  margin-left: -12px;
  position: relative;
}

.WebhooksDashboardTable__inactive-webhook {
  border-left: 3px solid #ff0401;
  height: 35px;
  margin-top: -3px;
  margin-left: -12px;
  position: relative;
}

.WebhooksDashboardTable__table-header-text {
  color: #000c;
  font-size: 13px;
  font-weight: 900;
}

.WebhooksDashboardTable__table-queued-support-tickets-container {
  text-align: center;
  padding-right: 85px;
}

.WebhooksDashboardTable__url-container {
  width: 190px;
}

.WebhooksDashboardTable__url-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}

.WebhooksDashboardTable__table-action-buttons {
  justify-content: flex-end;
  gap: 10px;
  padding-right: 12px;
  display: flex;
}

.WebhooksDashboardTable__errors-button {
  align-items: center;
  display: flex;
  height: 29px !important;
  margin-top: 2px !important;
}

.WebhooksDashboardTable__test-button {
  align-items: center;
  display: flex;
  height: 28px !important;
  margin-top: 3px !important;
}

.WebhooksErrorsModal__reason-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 720px;
  overflow: hidden;
}

.WebhooksTestModal .padding-container {
  padding: 18px 24px;
}

.WebhooksTestModal .action-buttons-container {
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.WebhooksTestModal .header-container {
  justify-content: space-between;
  padding: 7px 0;
  display: flex;
}

.WebhooksTestModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.WebhooksDashboard__toolbar-grid {
  width: 100% !important;
  margin: 0 9px 0 22px !important;
}

.WebhooksDashboard__add-webhook-text {
  white-space: nowrap;
  color: #000;
  align-items: center;
  font-weight: bold;
  display: flex;
}

.WebhooksDashboard__no-left-gutter {
  padding-left: 0 !important;
}