@import url(https://fonts.googleapis.com/css?family=Lato&display=swap);
.AdvisedCriticalHistory-AdvisedCriticalTable .ReactTable thead th:last-child, .AdvisedCriticalHistory-AdvisedCriticalTable .ReactTable .td-action {
  padding-right: 12px;
}

.AdvisedCriticalHistory-AdvisedCriticalTable .ReactTable .header-action-buttons {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.AdvisedCriticalHistory-AdvisedCriticalTable .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;
}

.AdvisedCriticalHistory-AdvisedCriticalTable .ReactTable .hidden-items-button i {
  height: auto;
  margin: 0;
}

.AdvisedCriticalHistory-AdvisedCriticalTable .ReactTable td.text-center {
  text-align: center;
  display: table-cell !important;
}

.AdvisedCriticalHistory-AdvisedCriticalTable .ReactTablePagination {
  justify-content: flex-end;
}

.AdvisedCriticalHistory-AdvisedCriticalTable .ReactTablePagination .pagination-info {
  display: none;
}

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions {
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  display: flex;
}

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions p {
  font-size: 12.6px;
}

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions p strong {
  margin-right: 12px;
}

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions p small {
  color: #767676;
  margin-left: 3px;
  font-size: 9px;
}

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

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions .status-container .status-dropdown {
  border-right: none;
}

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions .status-container .status-dropdown i.icon.size-m {
  margin-top: -12px;
  font-size: 12px;
}

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions .status-container .status-dropdown .menu {
  box-shadow: none;
  display: none;
  border: none !important;
}

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions .status-container .status-dropdown .visible.transition {
  margin-top: 2px;
}

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

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions .status-container .status-dropdown .visible.transition div i.icon {
  margin-right: 0;
}

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

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

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions .status-container .action-dropdown {
  border-right: none;
}

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions .status-container .action-dropdown i.icon {
  height: auto;
  margin: 0;
}

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions .status-container .action-dropdown .menu {
  box-shadow: none;
  display: none;
  border: none !important;
}

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

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions .status-container .action-dropdown .visible.transition :hover {
  background-color: #fafafa;
}

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions .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;
}

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions .status-container .action-dropdown .visible.transition div i.icon {
  margin: 10px 10px 10px 0;
}

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

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

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions .status-container i.icon {
  margin: 0;
}

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions .status-container i.icon.pointer {
  cursor: pointer;
}

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

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions .status-container div:first-child {
  border-left: none;
}

.AdvisedCriticalHistory-AdvisedCriticalHistoryActions .status-container svg {
  margin: 0;
  font-size: 14px;
}

.AdvisedCriticalHistoryActionsSelector .ui.disabled.dropdown, .AdvisedCriticalHistoryActionsSelector .ui.dropdown .menu > .disabled.item {
  pointer-events: none;
  opacity: 1;
  color: #979797;
}

.AdvisedCriticalHistoryActionsSelector .ui.dropdown .menu > .item:nth-child(2) {
  border-top: none !important;
  border-bottom: none !important;
}

.AdvisedCriticalHistoryActionsSelector .ui.dropdown .menu > .item:first-child {
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

.AdvisedCriticalHistoryActionsSelector .ui.dropdown .menu > .item:last-child {
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.NotificationContainer {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.NotificationContainer .notification-title {
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.NotificationContainer .notification-title span {
  font-size: 14 / 17px;
}

.NotificationContainer .notification-title .title-container {
  align-items: center;
  gap: 10px;
  display: flex;
}

.NotificationContainer .notification-title .title-container span {
  font-weight: bold;
}

.NotificationContainer .notification-title .description-container span {
  font-weight: normal;
}

.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;
}

.AppointmentHistory {
  padding-top: 16px;
}

.AppointmentHistory .date-wo {
  white-space: nowrap;
  width: 100%;
  padding: 0 10px;
}

.AppointmentHistory .date-wo span + span {
  margin-left: 70px;
}

.AppointmentHistory table th p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.AppointmentHistory table th:first-child {
  width: 290px;
}

.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 {
  table-layout: fixed;
  border-top: 2px solid #1dbf5e;
  border-radius: 0;
  position: relative;
}

.AppointmentHistory table thead tr:last-child {
  background-color: #e2e2e3;
  border-top: 1px solid #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 .ReactTable td .name-cell {
  width: 100%;
  margin: auto;
}

.CarDrivingTrend {
  margin-top: 20px;
}

.CarDrivingTrend .MileageChart-Wrapper {
  border: 1px solid #eee;
  margin-bottom: 1em;
  padding: .75em;
}

.CarDrivingTrend .MileageChart-Wrapper .DrivingTrendAverages {
  margin-bottom: "0.5em";
  font-size: "1.2em";
}

.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;
}

.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 {
  white-space: nowrap;
  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;
}

.AppointmentNoteTypeIconLabel .noteTypeImage {
  border-radius: 4px;
  width: 34px;
  height: 24px;
  margin-top: 1px;
}

.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: #fff;
  justify-content: center;
  align-items: center;
  display: flex;
}

.Details .Details-img .car-image {
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  max-height: 138px;
}

.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 .model-with-icon {
  align-items: center;
  gap: 6px;
  display: flex;
}

.Details .Details-container .model-with-icon i {
  align-items: center;
  line-height: 1;
  display: inline-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;
}

.QuestionResultActionSelector .ui.disabled.dropdown, .QuestionResultActionSelector .ui.dropdown .menu > .disabled.item {
  pointer-events: none;
  opacity: 1;
  color: #979797;
}

.QuestionResultActionSelector .ui.dropdown .menu > .item:first-child {
  border-radius: 4px 4px 0 0;
  border-bottom: none !important;
}

.QuestionResultActionSelector .ui.dropdown .menu > .item:not(:first-child):not(:last-child) {
  border-bottom: none !important;
}

.QuestionResultActionSelector .ui.dropdown .menu > .item:last-child {
  border-radius: 0 0 4px 4px;
}

.PinItems {
  padding-top: 16px;
}

.PinItems .ReactTable .td-icons {
  padding-right: 12px;
}

.PinItems .ReactTable .td-icons .action-container {
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  display: flex;
}

.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;
}

.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;
}

.SnoozedItems {
  padding-top: 16px;
}

.SnoozedItems .ReactTable .td-actions {
  padding-right: 12px;
}

.SnoozedItems .ui.button i.icon {
  margin-left: -13px !important;
}

.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;
}

.DBBCreateContractModal label.big.car-section-label {
  margin-bottom: 30px;
}

.DBBCreateContractModal .search-button {
  float: right;
}

.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;
}

.UploadFilesZone.uploading, .UploadFilesZone.disabled {
  pointer-events: none;
}

.UploadFilesZone.uploading > div, .UploadFilesZone.disabled > div {
  opacity: .5;
}

.UploadFilesZone.uploading {
  position: relative;
}

.UploadFilesZone .upload-loader {
  margin-top: 5px;
  margin-bottom: 5px;
}

.UploadFilesZone .upload-loader:after {
  border-color: #767676 #0000 #0000 !important;
}

.form-color-picker {
  cursor: pointer;
  appearance: none;
  background: none;
  border: 1px solid #e0e1e2;
  border-radius: 4px;
  width: 50px;
  height: 39px;
  padding: 2px;
}

.form-color-picker::-webkit-color-swatch-wrapper {
  padding: 3px;
}

.form-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.form-color-picker::-moz-color-swatch {
  border: none;
  border-radius: 4px;
}

.FormFileDragDrop {
  text-align: center;
  border: 1px dotted #dededf;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 61px;
  padding-top: 6px;
  display: flex;
  overflow: hidden;
}

.FormFileDragDrop.active {
  opacity: .3;
  border: 2px dotted #1f1f1f;
}

.FormFileDragDrop input {
  visibility: hidden;
  height: 0;
}

.FormFileDragDrop span {
  font-size: 14px;
  font-weight: 600;
}

.FormFileDragDrop .browse-text {
  color: #2185d0;
  cursor: pointer;
  text-decoration: underline;
}

.FormFileDragDrop .max-file-size {
  color: #b5b5b5;
  margin-top: 6px;
}

.FormFileDragDrop.error {
  border-color: red;
}

.FormFileDragDrop.isUploading {
  opacity: .6;
  pointer-events: none;
}

.FormFileDragDrop .form-file-drag-drop-input {
  height: 0;
}

.FormFileDragDrop .form-file-drag-drop-content {
  margin: 0;
}

.FormFileDragDrop .form-file-drag-drop-content span:first-child {
  margin-right: 3px;
}

.FormFileDragDrop .form-file-drag-drop-content .uploading-tex {
  color: #000;
}

.FormFileDragDrop .form-file-drag-drop-max-file-size {
  color: #b5b5b5;
  margin-top: 6px;
  margin-bottom: 0;
}

.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;
}

.aceEditorContainer {
  width: "100%";
  border: 1px solid #f0f0f0;
}

.aceEditorContainerInvalid {
  border: 1px solid red;
}

.aceEditor {
  width: "100%";
  height: "300px";
  font-size: 14px;
  line-height: 2;
}

.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;
}

.DBBCreateContractModal .modal-content {
  overflow-x: hidden;
  padding: 0 !important;
}

.DBBCreateContractModal .contract-type-section {
  padding-left: 22px;
}

.DBBCreateContractModal label.big.contract-type-label {
  margin-bottom: 30px;
  margin-left: 5px;
}

.DBBCreateContractModal .contract-form-customers-section {
  border-bottom: 1px solid #e2e2e3;
  padding: 15px 0;
}

.DBBCreateContractModal .customer-section-label {
  padding: 0 30px 15px;
}

.DBBCreateContractModal .customer-tabs {
  padding: 0 23px;
  margin-top: 0 !important;
}

.DBBCreateContractModal .customer-tabs .item.has-error {
  color: #db2828;
}

.DBBCreateContractModal .customer-section {
  padding: 15px 30px;
}

.DBBTyreSearch.ui.modal > div.tyre-search-actions {
  background-color: #fff;
  border: none;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 24px;
  display: flex;
}

.DBBTyreSearch .ui.form .fields {
  align-items: flex-end;
  margin: 0 0 1em;
}

.DBBTyreSearch .ui.form .fields .field {
  flex-direction: column;
  display: flex;
}

.DBBTyreSearch .ui.form .fields .field:last-child {
  padding-right: 0;
}

.DBBTyreSearch td.td-pick {
  text-align: right;
  padding-right: 10px;
}

.DBBTyreSearch .loading-container, .DBBTyreSearch .no-results {
  justify-content: center;
  padding: 30px 0;
  display: flex;
}

.DBBTyreSearch .picked-tyre {
  border-top: 1px solid #e2e2e3;
  border-bottom: 1px solid #e2e2e3;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 16px;
}

.DBBTyreSearch .picked-tyre label.big {
  margin-bottom: 15px;
  display: block;
  font-size: 19px !important;
  font-weight: 400 !important;
}

.ReactTable tbody tr:hover {
  cursor: pointer;
  background-color: #f9fafb;
}

.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;
}

.ReactTable .expanded-row-content:hover {
  cursor: default;
  background-color: #0000;
}

.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;
}

.DBBCreateContractModal .contract-form-tyre-sets-section {
  padding: 15px 0;
}

.DBBCreateContractModal .tyre-sets-section-label {
  padding: 0 30px 15px;
}

.DBBCreateContractModal .tyre-set-tabs {
  padding: 0 23px;
  margin-top: 0 !important;
}

.DBBCreateContractModal .tyre-set-tabs .item.has-error {
  color: #db2828;
}

.DBBCreateContractModal .tyre-set {
  padding: 15px 30px;
}

.DBBCreateContractModal .tyre-set .wheel-type-field {
  margin-left: 7px;
}

.DBBCreateContractModal .tyre-set .tyre-position {
  align-items: center;
  gap: 5px;
  display: flex;
}

.DBBCreateContractModal .tyre-set .tyre-position i.icon {
  cursor: pointer;
  font-size: 1em;
}

.DBBCreateContractModal .tyre-set .tyre-position span {
  font-size: 12.6px;
}

.DBBCreateContractModal .tyre-set .tyre-size {
  align-items: center;
  gap: 5px;
  display: flex;
}

.DBBCreateContractModal .tyre-set .tyre-profile {
  align-items: center;
  gap: 10px;
  display: flex;
}

.DBBCreateContractModal .tyre-set .tyre-actions {
  float: right;
  align-items: center;
  gap: 10px;
  margin-right: 10px;
  display: flex;
}

.DBBCreateContractModal .tyre-set .tyre-actions button {
  align-items: center;
  width: 32px;
  height: 30px;
  display: flex;
}

.DBBCreateContractModal .tyre-set td .field {
  margin: 0 !important;
}

.DBBCreateContractModal .tyre-set td .ui.input {
  max-width: 70px;
  height: 29px;
}

.DBBCreateContractModal {
  max-width: 1550px !important;
}

.DBBCreateContractModal .ui.form .fields {
  margin: 0 0 1em;
}

.DBBCreateContractModal .section {
  border-bottom: 1px solid #e2e2e3;
  padding: 20px 30px;
}

.DBBCreateContractModal label.big {
  margin-bottom: 15px;
  display: block;
  font-size: 19px !important;
  font-weight: 400 !important;
}

.DBBCreateContractModal label.big i.icon {
  margin-right: 5px;
  font-size: 19px;
}

.DBBCreateContractModal.ui.modal > div.contract-modal-content {
  padding: 0;
}

.DBBCreateContractModal.ui.modal > div.contract-form-actions {
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.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;
}

.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;
}

.Tyres {
  margin-bottom: 20px;
}

.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: end;
}

.Tyres .tyre-details {
  width: 100%;
  margin-top: 20px;
}

.Tyres .tyre-details.right {
  text-align: right;
}

.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;
}

.delete-tyre-title-wrapper .delete-tyre-title-buttons .delete-tyre-btn {
  margin-left: 10px;
}

.delete-tyre-title-wrapper .delete-tyre-title-buttons .delete-tyre-btn i.icon {
  margin-left: -13px !important;
}

.Tyres_DBB {
  justify-content: flex-end;
  margin-bottom: 10px;
  display: flex;
}

.Tyres_DBB-label {
  margin-right: 10px;
  font-size: 14px;
  font-weight: bold;
}

.Tyres_Create-DBB-contract-label {
  font-size: 14px;
  font-weight: bold;
}

.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 {
  justify-content: space-between;
  margin-bottom: .8rem;
  padding-bottom: .8rem;
  display: flex;
}

#CommunicationLog-Content .info-section .section-content .service:not(:last-child) {
  border-bottom: 1px solid #f3f5f7;
}

#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-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;
}

.communication-message-failed-container {
  display: inline-flex;
}

.communication-message-failed-container i.exclamation.circle.icon.i-maroon {
  margin-right: 3px;
}

.communication-message-failed-container .ellipsis.communication-message-failed-reason {
  width: 150px;
  padding-left: 5px;
  display: inline-block;
}

.communication-message-failed-reason-content {
  width: 500px;
}

.td-activity i.icon {
  margin-right: 5px;
}

.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;
}

.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;
  }
}

.AddUpdateAppointmentNote .action-buttons {
  flex: 1;
  justify-content: space-between;
  display: flex;
}

.AddUpdateAppointmentNote .save-cancel-buttons {
  gap: 5px;
  display: flex;
}

.AddUpdateAppointmentNote .padding-container {
  padding: 24px;
}

.AddUpdateAppointmentNote .visible-to-mechanic-container {
  justify-content: flex-end;
  display: flex;
}

.AddUpdateAppointmentNote .attachment-uploaded {
  margin-top: 20px;
}

.AppointmentNoteModalHeader span {
  font-family: Lato, sans-serif;
  font-size: 18px;
}

.AppointmentNoteModalHeader i {
  margin-right: 5px;
}

.AppointmentNoteModalHeader .backorder-icon {
  color: #6c0699;
  margin-right: 5px;
  display: inline-block;
}

.CustomerNoteModal .customer-note-icon {
  color: #00ccad;
  font-size: 1.3em;
}

.CustomerNoteModal .padding-container {
  padding: 18px 24px;
}

.CustomerNoteModal .modal-header span {
  font-size: 18px;
  font-weight: bold;
}

.CustomerNoteModal .modal-header i {
  margin-right: 5px;
}

.CustomerNoteModal .customer-note-checkbox-fields {
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  display: flex;
}

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

.CustomerNoteModal .save-cancel-buttons-container {
  gap: 12px;
  margin-left: auto;
  display: flex;
}

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

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

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

.CustomerNoteRow .container, .CustomerNoteRow .appointment-notes-container, .CustomerNoteRow .modal-container {
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  padding: 9px 13px;
  display: flex;
}

.CustomerNoteRow .modal-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  margin-top: 14px;
}

.CustomerNoteRow .icon-container, .CustomerNoteRow .details-container .icon-btn-container .customer-note-edit-btn, .CustomerNoteRow .details-container .customer-note-icon {
  text-align: center;
  width: 35px;
  height: 25px;
}

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

.CustomerNoteRow .details-container .customer-note-icon {
  background: #00ccad;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.CustomerNoteRow .details-container .customer-note-icon.customer-dms-note {
  border-radius: 4px;
}

.CustomerNoteRow .details-container .customer-note-icon.customer-dms-note i.icon.user.solid.fill.modal-note-icon, .CustomerNoteRow .details-container .customer-note-icon.customer-dms-note i.icon.user.solid.fill.appointment-note-icon {
  position: relative;
  right: 2px;
}

.CustomerNoteRow .details-container .customer-note-icon .appointment-note-icon {
  color: #fff;
  position: relative;
  right: 2px;
  transform: translate(2px);
}

.CustomerNoteRow .details-container .customer-note-icon .modal-note-icon {
  color: #fff;
  position: relative;
  right: 2px;
  transform: translate(2px, 2px);
}

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

.CustomerNoteRow .details-container .icon-btn-container .customer-note-edit-btn {
  cursor: pointer;
  background: #00ccad33;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.CustomerNoteRow .details-container .icon-btn-container .customer-note-edit-btn .appointment-note-edit-icon {
  color: #00ccad;
  margin-right: 0;
  font-size: .7em;
}

.CustomerNoteRow .details-container .icon-btn-container .customer-note-edit-btn .modal-note-edit-icon {
  color: #00ccad;
  margin-right: 0;
  font-size: .7em;
  transform: translate(0, 2px);
}

.CustomerNoteRow .details-container .customer-note-text {
  cursor: pointer;
  color: #000c;
  width: 60%;
  font: 13px / 15px Lato;
}

.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;
}

.ui.top.right.pointing.dropdown.AppointmentReportDropdown {
  margin-left: auto;
  padding-left: 10px;
  display: flex;
}

button.ui.basic.button.appointment-report-dropdown-button {
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 27.6px;
  display: inline-flex;
}

button.ui.basic.button.appointment-report-dropdown-button i.icon.file.pdf {
  color: #21ba45;
  margin: 0;
  font-size: 12px;
  position: relative;
  bottom: 1.5px;
  left: 1.5px;
  transform: none;
}

.menu.transition.visible.appointment-report-dropdown-menu {
  min-width: 492px;
}

.menu.transition.visible.appointment-report-dropdown-menu .appointment-report-dropdown-item {
  border-bottom: 1px solid #e2e2e3;
  padding: 10px;
}

.menu.transition.visible.appointment-report-dropdown-menu .appointment-report-dropdown-item label {
  justify-content: center;
  align-items: center;
  display: flex;
}

.menu.transition.visible.appointment-report-dropdown-menu .appointment-report-dropdown-item label i.icon {
  margin-right: 8px;
  font-size: 16px;
  position: relative;
  top: 2px;
}

.menu.transition.visible.appointment-report-dropdown-menu .appointment-report-dropdown-item label .composite-icons {
  align-items: center;
  width: 22px;
  height: 20px;
  margin-right: 8px;
  display: inline-flex;
  position: relative;
}

.menu.transition.visible.appointment-report-dropdown-menu .appointment-report-dropdown-item label .composite-icons i.icon {
  top: unset;
  margin: 0;
  position: absolute;
}

.menu.transition.visible.appointment-report-dropdown-menu .appointment-report-dropdown-item label .composite-icons i.user.icon {
  font-size: 14px;
  top: 2px;
  left: 0;
}

.menu.transition.visible.appointment-report-dropdown-menu .appointment-report-dropdown-item label .composite-icons i.clock.icon {
  font-size: 9px;
  bottom: 4px;
  right: -2px;
}

.appointment-report-dropdown-option {
  align-items: center;
  padding: 6px 0;
  display: flex;
}

.appointment-report-dropdown-download-button {
  padding: 10px;
}

.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;
}

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

.CarDetails .car-image-container {
  background-color: #fff;
  justify-content: center;
  align-items: center;
  display: flex;
}

.CarDetails .car-image-container .car-image {
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  max-height: 180px;
}

.CarDetails .car-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  flex: auto;
  min-width: 0;
  min-height: 180px;
}

.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;
  min-width: 0;
  height: 36px;
  padding: 0 17px;
  display: flex;
}

.CarDetails .car-container .car-header > .car-items:first-child {
  flex: auto;
  min-width: 0;
}

.CarDetails .car-container .car-header > .car-items:last-child {
  flex: none;
}

.CarDetails .car-container .car-header .car-items {
  align-items: center;
  gap: 8px;
  min-width: 0;
  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 .car-items-reg-info {
  flex: auto;
  align-items: center;
  gap: 18px;
  min-width: 0;
  margin-left: 10px;
  display: flex;
}

.CarDetails .car-container .car-header .car-items .car-items-reg-info > :first-child, .CarDetails .car-container .car-header .car-items .car-items-reg-info > :first-child * {
  white-space: nowrap;
  flex: none;
  min-width: fit-content;
}

.CarDetails .car-container .car-header .car-items .car-items-make-model.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.CarDetails .car-container .car-header .car-items .ui.icon.button.tyres-overview-button {
  padding: 0 8px;
}

.CarDetails .car-container .car-header .car-items .ui.icon.button.tyres-overview-button i.icon {
  position: relative;
  top: 3px;
  font-size: 14px !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-header .car-items .more-info {
  cursor: pointer;
  align-items: center;
  margin-left: 4px;
  display: flex;
}

.CarDetails .car-container .car-header .car-items .more-info .icon {
  position: relative;
  bottom: 1px;
  color: #21ba45 !important;
}

.CarDetails .car-container .car-info {
  flex-wrap: wrap;
  justify-content: start;
  gap: 10px 3%;
  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: 120px;
  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%;
}

.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;
}

.CarTyresModal.ui.modal > .CarTyresModal-header.header {
  justify-content: space-between;
  padding-right: 25px;
}

.CarTyresModal.ui.modal > .CarTyresModal-header.header .CarTyresModal-header-title {
  display: flex;
}

.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;
}

.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 {
  gap: 6px;
  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;
}

.ui.modal.XentryStatusModal .header.XentryStatusModalHeading {
  justify-content: space-between;
  display: flex;
  padding: 25px !important;
}

.ui.modal.XentryStatusModal .header.XentryStatusModalHeading .controls {
  align-items: center;
  display: flex;
}

.ui.modal.XentryStatusModal .header.XentryStatusModalHeading .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.XentryStatusModal .header.XentryStatusModalHeading .controls .icon-container i {
  margin: 0 0 2px;
  font-size: 16px;
}

.ui.modal.XentryStatusModal .XentryStatusModalContent.content {
  max-height: 680px;
  overflow-y: auto;
}

.ui.modal.XentryStatusModal .XentryStatusModalContent.content.NoData p {
  text-align: center;
  letter-spacing: 0;
  color: #000;
  font: 14px / 23px Lato;
}

.ui.modal.XentryStatusModal .XentryStatusModalContent.content .section {
  padding: 14px 0 6px;
}

.ui.modal.XentryStatusModal .XentryStatusModalContent.content .section span {
  color: #000c;
  font-size: 14px;
  font-weight: 900;
}

.ui.modal.XentryStatusModal .XentryStatusModalContent.content .row {
  border-bottom: 1px solid #e2e2e3;
  padding: 8px 0;
  display: flex;
}

.ui.modal.XentryStatusModal .XentryStatusModalContent.content .row span:first-child {
  flex: 0 0 50%;
  font-weight: 600;
}

.ui.modal.XentryStatusModal .XentryStatusModalContent.content .row span:nth-child(2) {
  word-break: break-word;
  margin-left: 1em;
}

.ui.modal.XentryStatusModal .XentryStatusModalContent.content .row:last-child {
  border-bottom: none;
}

.ui.modal.XentryStatusModal .XentryStatusModalContent.content .level-0 {
  padding-left: 0;
}

.ui.modal.XentryStatusModal .XentryStatusModalContent.content .level-1 {
  padding-left: 8px;
}

.ui.modal.XentryStatusModal .XentryStatusModalContent.content .level-2 {
  padding-left: 16px;
}

.ui.modal.XentryStatusModal .XentryStatusModalContent.content .level-3 {
  padding-left: 24px;
}

.ui.modal.XentryStatusModal .XentryStatusModalContent.content .level-4 {
  padding-left: 32px;
}

.ui.modal.XentryStatusModal .XentryStatusModalContent.content .level-5 {
  padding-left: 40px;
}

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

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

.CarMileageModal__asterisk {
  color: #ff0202;
}

.CarMileageModal__title {
  margin-bottom: 5px;
}

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

.Check-title .mechanic-info {
  text-transform: capitalize;
  white-space: nowrap;
  align-items: center;
  margin-left: 6px;
  font-size: 18px;
  display: flex;
}

.Check-title .mechanic-info .separator {
  margin-left: 7px;
  margin-right: 3px;
}

.Check-title .mechanic-info .first-date {
  margin: 0 3px;
}

.Check-title .mechanic-info .second-date {
  margin-left: 2px;
}

.Check-title .mechanic-info i.icon {
  margin-top: -10px;
  margin-left: 3px;
  font-size: 12px;
}

.ui.very.wide.popup.transition.Check-title-popup {
  white-space: pre-wrap;
}

.QuestionResults .TyreActionSelector .ui.disabled.dropdown, .QuestionResults .TyreActionSelector .ui.dropdown .menu > .disabled.item {
  pointer-events: none;
  opacity: 1;
  color: #979797;
}

.QuestionResults .TyreActionSelector .ui.dropdown .menu > .item:nth-child(2) {
  border-top: none !important;
  border-bottom: none !important;
}

.QuestionResults .TyreActionSelector .ui.dropdown .menu > .item:first-child {
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

.QuestionResults .TyreActionSelector .ui.dropdown .menu > .item:last-child {
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.QuestionResults .TyreTableItem {
  font-size: 14px;
}

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

.QuestionResults .TyreTableItem .tyre-replacement-icon-container {
  cursor: pointer;
  margin: 4px 10px 0 5px;
}

.QuestionResults .TyreTableItem .customer-ok-container {
  justify-content: flex-end;
  gap: 5px;
  width: 100%;
  display: flex;
}

.QuestionResults .TyreTableItem .customer-ok-icon-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  width: 32px;
  height: 27px;
  padding: 0 7px;
}

.QuestionResults .TyreTableItem .customer-ok-icon {
  font-size: 14px !important;
}

.QuestionResults .TyreTableItem .dbb-icon-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  width: 32px;
  height: 27px;
  padding: 0 7px;
}

.QuestionResults .TyreTableItem .dbb-icon-container .dbb-comment-icon.icon {
  color: #767676;
  font-size: 14px;
}

.QuestionResults .TyreQuestionResults .TyreHeader {
  background-color: #f9fafb;
  border-bottom: 1px solid #e2e2e3;
  align-items: center;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  display: flex;
}

.QuestionResults .TyreQuestionResults .TyreHeader p {
  width: 100%;
  font-size: 14px;
  font-weight: bold;
}

.QuestionResults .TyreQuestionResults .TyreTable {
  margin-bottom: 12px;
}

.QuestionResults .TyreQuestionResults .TyreTable:not(:first-child) {
  border-top: 1px solid #e2e2e3;
}

.QuestionResults .TyreQuestionResults .TyreTable .ui.grid {
  margin-left: 0;
  margin-right: 0;
}

.QuestionResults .TyreQuestionResults .TyreTable .button.af {
  height: 25px;
}

.QuestionResults .TyreQuestionResults .TyreTable .button.af i.icon {
  font-size: 14px;
}

.QuestionResults .TyreQuestionResults .TyreTable .media-row {
  height: fit-content !important;
}

.QuestionResults .TyreQuestionResults .TyreTable .media-row .checklist-media {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  display: flex;
}

.QuestionResults .TyreQuestionResults .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;
}

.QuestionResults .TyreQuestionResults .TyreTable .row:last-child {
  border-bottom: none;
}

.QuestionResults .TyreQuestionResults .TyreTable .row .column {
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 5px;
  padding-right: 5px;
}

.QuestionResults .TyreQuestionResults .TyreTable .row .column P {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.QuestionResults .TyreQuestionResults .TyreTable .row .column .tyre-season-container {
  gap: 5px;
  display: flex;
}

.QuestionResults .TyreQuestionResults .TyreTable .header {
  background-color: #f9fafb;
  border: 1px solid #e2e2e3;
}

.QuestionResults .TyreQuestionResults .TyreTable .header p {
  font-size: 14px;
  font-weight: bold;
}

.QuestionResults .TyreQuestionResults .TyreTable .axle-header {
  background-color: #f2f2f2;
  height: 30px;
}

.QuestionResults .TyreQuestionResults .TyreTable .axle-header p {
  font-size: 14px;
  font-weight: bold;
}

.QuestionResults .TyreQuestionResults .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;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-title-container .ui.tiny.basic.button {
  height: 25px;
  background-color: #fff !important;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-title-container .ui.tiny.basic.button p {
  font-size: 11px;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-title-container .tyre-title {
  align-items: center;
  gap: 8px;
  display: flex;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-title-container .tyre-title__wrapper {
  font-size: 18px;
  display: flex;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-title-container .tyre-title__wrapper__storage {
  color: #21ba45;
  padding-left: 10px;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-title-container .tyre-title__wrapper__locationName {
  color: #767676;
  padding: 0 8px 0 3px;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-title-container .tyre-title i.icon {
  margin-top: -7px;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-title-container .tyre-title p {
  font-size: 18px;
  font-weight: bold;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-title-container .tyre-dbb-label p {
  color: #21ba45;
  cursor: pointer;
  font-size: 12.6px;
  font-weight: bold;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action {
  justify-content: flex-end;
  width: 100%;
  display: flex;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action p {
  font-size: 12.6px;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action p strong {
  margin-right: 12px;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action p small {
  color: #767676;
  margin-left: 3px;
  font-size: 9px;
}

.QuestionResults .TyreQuestionResults .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;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container i.icon {
  font-size: 12px;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container i.icon.ml-025 {
  margin-left: .25em;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container .status-dropdown {
  border-right: none;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container .status-dropdown i.icon {
  font-size: 12px;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container .status-dropdown i.icon.tiny {
  font-size: 8px;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container .status-dropdown i.icon.size-m {
  margin-top: -12px;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container .status-dropdown .menu {
  box-shadow: none;
  display: none;
  border: none !important;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container .status-dropdown .visible.transition {
  margin-top: 2px;
}

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

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container .status-dropdown .visible.transition div i.icon {
  margin-right: 0;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container .status-dropdown .visible.transition div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container .status-dropdown .visible.transition div:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container .action-dropdown {
  border-right: none;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container .action-dropdown i.icon {
  margin-top: -8px;
  font-size: 14px;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container .action-dropdown .menu {
  box-shadow: none;
  display: none;
  border: none !important;
}

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

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container .action-dropdown .visible.transition :hover {
  background-color: #fafafa;
}

.QuestionResults .TyreQuestionResults .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;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container .action-dropdown .visible.transition div i.icon {
  margin: 10px 10px 10px 0;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container .action-dropdown .visible.transition div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container .action-dropdown .visible.transition div:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container i.icon {
  margin: 0;
}

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container i.icon.pointer {
  cursor: pointer;
}

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

.QuestionResults .TyreQuestionResults .TyreTable .tyre-action .tyre-container div:first-child {
  border-left: none;
}

i.icon {
  margin: 0;
}

i.icon.pointer {
  cursor: pointer;
}

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

.QuestionResults p {
  margin: 0;
}

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

.QuestionResults .QuestionResults-group:empty {
  display: none;
}

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

.QuestionResults .QuestionResults-group .QuestionResults-group_header p {
  font-size: 14px;
  font-weight: bold;
}

.QuestionResults .QuestionResult {
  flex-direction: column;
  gap: 3px;
  padding: 7px 14px;
  display: flex;
}

.QuestionResults .QuestionResult-actions {
  align-items: flex-end;
  gap: 3px;
  display: flex;
}

.QuestionResults .QuestionResult-actions .WarrantyPinType__pin-type-container {
  cursor: pointer;
}

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

.QuestionResults .QuestionResult-item-status {
  align-items: start;
  width: 32px;
  height: 27px;
  display: flex;
}

.QuestionResults .QuestionResult-item-status .ui.label {
  flex-grow: 1;
  justify-content: center;
  display: flex;
}

.QuestionResults .QuestionResult-item-status i.icon {
  justify-content: center;
  align-items: center;
  display: flex;
}

.QuestionResults .QuestionResult .title-row {
  flex-grow: 2;
  padding-left: 8px;
  display: flex;
}

.QuestionResults .QuestionResult p {
  font-size: 12.6px;
}

.QuestionResults .QuestionResult p strong {
  margin-right: 12px;
}

.QuestionResults .QuestionResult p small {
  color: #767676;
  margin-left: 3px;
  font-size: 9px;
}

.QuestionResults .QuestionResult .question-media {
  align-items: center;
  gap: 12px;
  display: flex;
}

.QuestionResults .QuestionResult .title-container {
  grid-template-columns: 200px 1fr max-content;
  gap: 20px;
  display: grid;
}

.QuestionResults .QuestionResult .title-container .pin-status-container {
  display: flex;
}

.QuestionResults .QuestionResult .title-container .status-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  align-items: center;
  height: 27px;
  display: flex;
}

.QuestionResults .QuestionResult .title-container .status-container .question-status i.icon {
  height: auto;
  margin-right: 0;
}

.QuestionResults .QuestionResult .title-container .status-container .status-dropdown {
  border-right: none;
}

.QuestionResults .QuestionResult .title-container .status-container .status-dropdown i.icon.size-m {
  margin-top: -12px;
  font-size: 12px;
}

.QuestionResults .QuestionResult .title-container .status-container .status-dropdown .menu {
  box-shadow: none;
  display: none;
  border: none !important;
}

.QuestionResults .QuestionResult .title-container .status-container .status-dropdown .visible.transition {
  margin-top: 2px;
}

.QuestionResults .QuestionResult .title-container .status-container .status-dropdown .visible.transition div {
  box-shadow: none;
  background: #fff;
  border: 1px solid #e2e2e3;
}

.QuestionResults .QuestionResult .title-container .status-container .status-dropdown .visible.transition div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.QuestionResults .QuestionResult .title-container .status-container .status-dropdown .visible.transition div:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.QuestionResults .QuestionResult .title-container .status-container .action-dropdown {
  opacity: 1;
  border-right: none;
}

.QuestionResults .QuestionResult .title-container .status-container .action-dropdown i.icon {
  margin-top: -8px;
}

.QuestionResults .QuestionResult .title-container .status-container .action-dropdown .menu {
  box-shadow: none;
  background-color: #0000;
  display: none;
  border: none !important;
}

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

.QuestionResults .QuestionResult .title-container .status-container .action-dropdown .visible.transition :hover {
  background-color: #fafafa;
}

.QuestionResults .QuestionResult .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;
}

.QuestionResults .QuestionResult .title-container .status-container .action-dropdown .visible.transition div i.icon {
  margin: 10px 10px 10px 0;
}

.QuestionResults .QuestionResult .title-container .status-container .action-dropdown .visible.transition div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.QuestionResults .QuestionResult .title-container .status-container .action-dropdown .visible.transition div:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.QuestionResults .QuestionResult .title-container .status-container i.icon {
  margin: 0;
}

.QuestionResults .QuestionResult .title-container .status-container i.icon.ml-025 {
  margin-left: .25em;
}

.QuestionResults .QuestionResult .title-container .status-container i.icon.pointer {
  cursor: pointer;
}

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

.QuestionResults .QuestionResult .title-container .status-container div:first-child {
  border-left: none;
}

.QuestionResults-question-result-ok, .QuestionResults-question-result-ok-with-remarks {
  color: #48913d !important;
}

.solution-element-label {
  width: 32px;
  height: 27px;
}

.solution-element-label i.icon.clipboard.list.solid.solution-element-icon {
  color: #767676;
  font-size: 14px;
  position: relative;
  bottom: 1px;
}

.solution-element {
  color: #414141;
  border: 1px solid #dededf;
  border-radius: 4px;
  width: 324px;
  height: fit-content;
  font-size: 14px;
}

.solution-element .solution-item {
  background-clip: padding-box;
  border-bottom: 1px solid #dededf;
  border-radius: 0;
  margin: 0;
  overflow: hidden;
}

.solution-element .solution-item strong {
  text-transform: capitalize;
}

.solution-element .solution-item .solution-unit {
  border-right: 1px solid #dededf;
}

.solution-element .solution-item .solution-unit, .solution-element .solution-item .solution-element-value {
  text-transform: capitalize;
  width: 45%;
  margin-left: 3px;
  padding: 4px;
  display: inline-block;
}

.solution-element .solution-item:last-child {
  border-bottom: none;
}

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

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

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

.CheckInCustomerCorrectInfo .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;
}

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

.CheckInCustomerCorrectInfo .label:not(.address-card-label) {
  margin-right: 10px;
}

.CustomerActions .grid .checkin-price-column.column.two.wide {
  justify-content: flex-start;
  padding: 9px 0 9px .75rem;
}

.notificationEmailContainer {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

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

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

.changeHandleStatus.disabled {
  cursor: default;
}

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

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

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

.CheckInOptionalServiceActionSelector .ui.disabled.dropdown, .CheckInOptionalServiceActionSelector .ui.dropdown .menu > .disabled.item {
  pointer-events: none;
  opacity: 1;
  color: #979797;
}

.CheckInOptionalServiceActionSelector .ui.dropdown .menu > .item:nth-child(2) {
  border-top: none !important;
  border-bottom: none !important;
}

.CheckInOptionalServiceActionSelector .ui.dropdown .menu > .item:first-child {
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

.CheckInOptionalServiceActionSelector .ui.dropdown .menu > .item:last-child {
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.CommunicationRemarkActionSelector .ui.disabled.dropdown, .CommunicationRemarkActionSelector .ui.dropdown .menu > .disabled.item {
  pointer-events: none;
  opacity: 1;
  color: #979797;
}

.CommunicationRemarkActionSelector .ui.dropdown .menu > .item:nth-child(2) {
  border-top: none !important;
  border-bottom: none !important;
}

.CommunicationRemarkActionSelector .ui.dropdown .menu > .item:first-child {
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

.CommunicationRemarkActionSelector .ui.dropdown .menu > .item:last-child {
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.ServiceTrackerRating {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
  padding: 9px 13px;
  display: flex;
}

.ServiceTrackerRating .icon-container {
  background-color: #feb100;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  display: flex;
}

.ServiceTrackerRating .icon-container i.icon {
  color: #fff;
  margin-top: -10px;
  font-size: 14px;
}

.ServiceTrackerRating .rating-items {
  align-items: center;
  gap: 8px;
  display: flex;
}

.ServiceTrackerRating .rating-items .rating-item {
  gap: 6px;
  display: flex;
}

.ServiceTrackerRating .rating-items .rating-item i.star {
  color: #feb100;
  -webkit-text-stroke: 1px #767676;
  height: auto;
  margin: 0;
  font-size: 12px;
}

.ServiceTrackerRating .rating-feedback {
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
}

.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;
  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_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;
}

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

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

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

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

.CustomerCommunicationReplacements-container {
  width: 100%;
}

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

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

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

.CustomerCommunicationReplacements-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;
}

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

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

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

.CustomerCommunicationReplacements-section-group .axle-header {
  background-color: #f2f2f2;
  align-items: center;
  height: 30px;
  padding-left: 21px;
  font-weight: 600;
  display: flex;
}

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

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

.CustomerCommunicationReplacements .tyre-season-container {
  gap: 5px;
  display: flex;
}

.CustomerCommunicationReplacements .tyre-season-container i.icon {
  font-size: 16px;
}

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

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

.CustomerCommunicationReplacements .CustomerCommunicationTyreTableItem__row {
  border-bottom: 1px solid #e2e2e3;
  height: 42px;
  align-items: center !important;
  padding: 0 0 0 7px !important;
}

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

.CustomerCommunicationReplacements .CustomerCommunicationTyreTableItem__row .column .icons-container {
  justify-content: flex-end;
  gap: 5px;
  width: 100%;
  display: flex;
}

.CustomerCommunicationReplacements .CustomerCommunicationTyreTableItem__row .column .icons-container .question_result_status {
  justify-items: flex-end;
  height: 27px;
}

.CustomerCommunicationReplacements .CustomerCommunicationTyreTableItem__row .column .icons-container .question_result_status svg {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  padding: 5px 9px;
}

.CustomerCommunicationReplacements .CustomerCommunicationTyreTableItem__row .column .icons-container i.icon {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 100%;
  padding: 5px 9px;
  font-size: small;
  display: flex;
}

.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: 180px !important;
}

.CustomerCommunicationModal-preferred-channel {
  color: #fff;
  vertical-align: middle;
  background-color: #2185d0;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  display: inline-flex;
}

.CustomerCommunicationModal-preferred-channel i.icon {
  justify-content: center;
  align-items: center;
  margin-bottom: .8px;
  font-size: 7px;
  display: inline-flex;
}

.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;
}

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

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

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

.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 .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 .indicator-toggle.ui.basic.buttons {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  height: 25px;
}

.IndicatorsAction .indicator-toggle .indicator-toggle-button.ui.button, .IndicatorsAction .indicator-toggle .ui.dropdown.caret-dropdown {
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  color: #000 !important;
  box-shadow: none !important;
}

.IndicatorsAction .indicator-toggle .indicator-toggle-button.ui.button > i.icon, .IndicatorsAction .indicator-toggle .ui.dropdown.caret-dropdown > i.icon {
  position: relative;
  bottom: 1.3px;
  margin: 0 !important;
}

.IndicatorsAction .indicator-toggle .indicator-toggle-button.ui.button i.icon.shopping.cart, .IndicatorsAction .indicator-toggle .ui.dropdown.caret-dropdown i.icon.shopping.cart {
  bottom: 1.2px;
}

.IndicatorsAction .indicator-toggle .indicator-toggle-button.ui.button:hover, .IndicatorsAction .indicator-toggle .indicator-toggle-button.ui.button:focus, .IndicatorsAction .indicator-toggle .indicator-toggle-button.ui.button:active, .IndicatorsAction .indicator-toggle .ui.dropdown.caret-dropdown:hover, .IndicatorsAction .indicator-toggle .ui.dropdown.caret-dropdown:focus, .IndicatorsAction .indicator-toggle .ui.dropdown.caret-dropdown:active {
  color: #000 !important;
  box-shadow: none !important;
  background: none !important;
  outline: none !important;
}

.IndicatorsAction .indicator-toggle .ui.dropdown.caret-dropdown {
  border-left: 1px solid #e2e2e3;
}

.IndicatorsAction .indicator-toggle .ui.dropdown.caret-dropdown .menu {
  top: 25px;
  left: auto;
  right: 0;
}

.IndicatorsAction .indicator-toggle i.icon.shopping.cart.yellow-shop {
  color: #fbbd08 !important;
}

.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_large.parking_location_row {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

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

.keylabel-qrcode-container {
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
}

#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;
}

#car_in_shop_label_content div.parking_location_row {
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

#car_in_shop_long_label_content {
  width: 90mm !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

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

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

@page {
}

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

#car_in_shop_long_label_content div.parking_location_row {
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !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;
  }

  #car_in_shop_keytag_content .car_in_shop_print_large.parking_location_row {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}

#car_in_shop_kiosk_label_content {
  align-items: center;
  margin-top: 46%;
  display: flex;
  overflow: hidden;
  transform: rotate(90deg);
}

@page {
}

@media print {
  #car_in_shop_kiosk_label_content {
    width: 19.1mm !important;
    height: 279.4mm !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    overflow: visible !important;
  }
}

#car_in_shop_kiosk_label_content div {
  break-inside: avoid !important;
  word-break: keep-all !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  width: fit-content !important;
  height: fit-content !important;
  margin: 0 5mm 0 0 !important;
  padding: 0 !important;
}

#car_in_shop_kiosk_label_content div.parking_location_row {
  text-overflow: ellipsis !important;
  max-width: 70mm !important;
  overflow: hidden !important;
}

@media print {
  #car_in_shop_kiosk_label_content div {
    margin-bottom: 19mm !important;
    font-size: 6mm !important;
  }

  #car_in_shop_kiosk_label_content div.parking_location_row {
    text-overflow: ellipsis !important;
    width: 70mm !important;
    overflow: hidden !important;
  }
}

#car_in_shop_label_writer_400_content {
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

@page {
}

@media screen {
  #car_in_shop_label_writer_400_content {
    width: 57mm;
    margin: 25px auto;
  }
}

@media print {
  #car_in_shop_label_writer_400_content {
    width: 32mm;
    height: 57mm;
    margin: 0;
    padding: 0;
  }
}

#car_in_shop_label_writer_400_content .label_writer_400_rotated {
  box-sizing: border-box;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 57mm;
  padding: 2mm;
  display: flex;
}

@media print {
  #car_in_shop_label_writer_400_content .label_writer_400_rotated {
    height: 32mm;
    transform: rotate(90deg);
  }
}

#car_in_shop_label_writer_400_content .label_writer_400_rotated div {
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

@media print {
  #car_in_shop_label_writer_400_content .label_writer_400_rotated div {
    font-size: 11px;
    line-height: 13px;
  }
}

#car_in_shop_label_writer_400_content .label_writer_400_rotated div.parking_location_row {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@media print {
  body:has(#car_in_shop_label_writer_400_content) {
    min-width: 0;
  }
}

.ui.modal.IndicatorsActionModal.KioskPrintModal {
  overflow: scroll;
}

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

.ui.modal.IndicatorsActionModal .actions .ui.selection.dropdown {
  min-width: 250px;
}

.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;
}

.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;
}

.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: #f4fcc1;
  border: 1px solid #e9e9ea;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 5px;
  display: flex;
}

.ImportantNotesContainer .container.keep-parts {
  background-color: #fdf3e0;
}

.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;
}

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

.Intervention .gray {
  color: gray;
}

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

.Intervention .intervention-main .title-container-button {
  min-width: 0;
  overflow: hidden;
}

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

.Intervention .intervention-price {
  padding: 10px 1rem !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-text {
  align-items: center;
  gap: 7px;
  min-width: 0;
  display: flex;
}

.Intervention .title-container .title-container-intervention-title-container {
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
  display: flex;
}

.Intervention .title-container .title-container-intervention-description {
  min-width: 0;
}

.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 {
  flex-shrink: 0;
  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;
  padding: 0 14px;
  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.no-float {
  float: none;
}

.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;
}

.interventions-details-card-right-content {
  width: 100%;
  display: flex;
}

.interventions-details-card-right-content .ROBServiceRequest + .ui.basic.label.intervention-customer-ok-toggle-contaier {
  margin-left: 0;
}

.interventions-details-card-right-content .ui.basic.label.intervention-customer-ok-toggle-contaier {
  z-index: 1;
  justify-content: center;
  align-items: center;
  gap: 17px;
  width: 80px;
  height: 25px;
  margin-left: auto;
  padding: 13px;
  display: flex;
  position: relative;
}

.interventions-details-card-right-content .ui.basic.label.intervention-customer-ok-toggle-contaier i.green.icon.check.circle.intervention-customer-ok-toggle-icon {
  font-size: 12px;
  position: relative;
  top: 2.5px;
}

.ui.fitted.toggle.checkbox.intervention-customer-ok-toggle {
  position: relative;
  right: 10px;
  transform: scale(.6);
}

.InterventionActionSelector .ui.disabled.dropdown, .InterventionActionSelector .ui.dropdown .menu > .disabled.item {
  pointer-events: none;
  opacity: 1;
  color: #979797;
}

.InterventionActionSelector .ui.dropdown .menu > .item:first-child {
  border-radius: 4px 4px 0 0;
}

.InterventionActionSelector .ui.dropdown .menu > .item:not(:first-child):last-child {
  border-top: none;
}

.InterventionActionSelector .ui.dropdown .menu > .item:last-child {
  border-radius: 0 0 4px 4px;
}

.ConnectedChecklistsContainer {
  color: #000;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  margin: 5px 15px;
}

.ConnectedChecklistsContainer .inner-container {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.ConnectedChecklistsContainer .inner-container:not(:last-of-type) {
  border-bottom: 1px solid #e2e2e3;
}

.ConnectedChecklistsContainer .row-number-checklist-name-container {
  align-items: center;
  gap: 10px;
  display: flex;
}

.ConnectedChecklistsContainer .row-number-checklist-name-container .row-number {
  color: #00c12d;
  background-color: #d2f1da;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 36px;
  display: flex;
}

.ConnectedChecklistsContainer .row-number-checklist-name-container .checklist-name {
  text-transform: uppercase;
}

.ConnectedChecklistsContainer .mechanic-info-container {
  gap: 3px;
  margin-right: 10px;
  display: flex;
}

.PendingChecklistsSortableList .check-container {
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.PendingChecklistsSortableList .check-container li {
  align-items: stretch;
  gap: 10px;
  display: flex;
}

.PendingChecklistsSortableList .check-container li .input-wrapper {
  flex-grow: 1;
  display: flex;
}

.PendingChecklistsSortableList .check-container li .input-wrapper span {
  pointer-events: none;
  border: 1px solid #dededf;
  border-left: none;
  border-right: none;
  width: 100%;
  padding: 6px 10px;
}

.PendingChecklistsSortableList .drag-button {
  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;
}

.PendingChecklists .sortable-list-container {
  margin: 8px 15px;
}

.PendingChecklists .sortable-list-container .delete-button {
  border-radius: 4px;
  width: 42px;
  height: 38px;
  position: relative;
}

.PendingChecklists .sortable-list-container .delete-button:hover {
  opacity: .6;
  background-color: #0000;
}

.PendingChecklists .sortable-list-container .delete-button i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.PendingChecklists .sortable-list-container .ordering-number {
  color: #ff0202;
  background: #ffd9d9;
  border: 1px solid #dededf;
  border-bottom-left-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 40px;
  display: flex;
}

.PendingChecklists .add-checklists-container {
  gap: 8px;
  margin: 8px 15px;
  display: flex;
}

.PendingChecklists .add-checklists-container .add-button {
  height: 38px;
}

.PendingChecklists .ui.disabled.dropdown, .PendingChecklists .ui.dropdown .menu > .disabled.item {
  opacity: 1;
  color: #000;
  text-transform: none;
  font-weight: bold;
}

.PendingChecklists .ui.dropdown .menu > .item {
  text-transform: uppercase;
}

.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;
}

.PinCategoryForm .form-label-placeholder {
  height: 24px;
}

.PinCategoryForm .print-overview-button button i.icon.print.black.print-overview-icon {
  margin-right: 15px;
}

.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 7px;
  font-family: monospace;
  display: flex;
}

.ImageLetters .img-icon-wrapper .report-car-images-letter {
  font-weight: 700;
  line-height: 1;
}

.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 .icon-text-container span {
  overflow-wrap: anywhere;
}

.ImportantNotes .ui.basic.label.label-container {
  white-space: nowrap;
  align-items: center;
  display: inline-flex;
}

.ImportantNotes .ui.basic.label.label-container svg {
  margin-right: 3px;
}

.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;
}

.WarrantyLogSectionContent {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  color: #1d3d52;
  margin: 14px 0;
}

.WarrantyLogSectionContent .title {
  background: #f7f7f7;
  padding: 14px;
  font-size: 1.25rem;
  font-weight: 600;
}

.WarrantyLogSectionContent .grid-field-text {
  font-size: 14px;
}

.WarrantyLogSectionContent .grid-time-text {
  color: #5c7c8d;
  white-space: nowrap;
  font-size: 14px;
}

.WarrantyLogSectionContent .grid-header-container {
  background: #f3f5f7;
}

.WarrantyLogSectionContent .grid-header-container .grid-title-text {
  color: #234357;
  font-size: 12.6px;
  font-weight: 700;
}

.WarrantyLogSectionContent .ui.grid {
  margin: 0;
}

.WarrantyLogSectionContent .results-grid.ui.grid > .row {
  border-bottom: 1px solid #eceef0;
  padding: 8px 0;
}

.WarrantyLogSectionContent .grid-header-container.ui.grid > .row {
  padding: 6px 0;
}

.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 .toggles-container {
  align-items: center;
  gap: 20px;
  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;
}

.question-result-section, .intervention-section {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  margin: 14px 0;
}

.question-result-section .title, .intervention-section .title {
  color: #1d3d52;
  background: #bdf0c3;
  padding: 14px;
  font-size: 17.5px;
  font-weight: 700;
}

.question-result-section .status-name-container, .intervention-section .status-name-container {
  justify-content: space-between;
  margin: 14px 0;
  padding: 0 14px;
  display: flex;
}

.question-result-section .name-text, .intervention-section .name-text {
  margin: 0;
  font-size: 18px;
}

.question-result-section .description, .intervention-section .description {
  padding: 0 14px;
}

.ReplacementsTable {
  margin: 20px 14px;
}

.ReplacementsTable .ui.grid {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
}

.ReplacementsTable .ui.grid .row {
  align-items: center;
  height: 36px;
  padding: 0;
}

.ReplacementsTable .ui.grid .row:not(:last-child) {
  border-bottom: 1px solid #e2e2e3;
}

.ReplacementsTable .ui.grid .header {
  background-color: #f9fafb;
}

.ReplacementsTable .ui.grid .header .column {
  font-weight: bold;
}

.ReplacementsTable .ui.grid .unlink-action {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  align-items: center;
  padding: 3px 7px;
  display: inline;
}

.Replacements {
  margin: 3.5px 13.5px;
}

.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;
}

.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;
}

.OCW .orange-ocw-button {
  color: #000000de !important;
  background-color: #fdebca !important;
  border: 1px solid #ffba39 !important;
}

.OCW .OCW-trigger-wrapper {
  display: inline-block;
}

.ui.modal.ovis-modal {
  width: 30%;
}

.ui.modal.ovis-modal .header {
  justify-content: space-between;
  padding: 25px;
}

.ui.modal.ovis-modal .PONOvisEvent {
  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 .PONOvisEvent .data-row {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
  display: flex;
}

.ui.modal.ovis-modal .PONOvisEvent .data-row .label {
  color: #000c;
  flex: 1;
  font-size: 14px;
  font-weight: bold;
}

.ui.modal.ovis-modal .PONOvisEvent .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;
}

.SnoozeActionSelector .ui.disabled.dropdown, .SnoozeActionSelector .ui.dropdown .menu > .disabled.item {
  pointer-events: none;
  opacity: 1;
  color: #979797;
}

.SnoozeActionSelector .ui.dropdown .menu > .item:first-child {
  border-radius: 4px 4px 0 0;
}

.SnoozeActionSelector .ui.dropdown .menu > .item:not(:first-child):last-child {
  border-top: none;
}

.SnoozeActionSelector .ui.dropdown .menu > .item:last-child {
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.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;
}

.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 .detail {
  flex-direction: column;
  display: flex;
}

.StatusIcon-content .grid-container {
  grid-gap: 8px;
  grid-template-columns: 25px 1fr;
  align-items: center;
  padding-top: 4px;
  padding-bottom: 2px;
  display: grid;
}

.StatusIcon-content .grid-container .left-section {
  justify-content: center;
  align-items: center;
  display: flex;
}

.StatusIcon-content .grid-container .left-section i.icon {
  position: relative;
  bottom: 3px;
}

.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;
}

.StatusIcon-content .communication-event {
  flex-direction: column;
  margin-top: 6px;
  padding-left: 33px;
  display: flex;
}

.StatusIcon-content .communication-event .recipient-name {
  font-weight: bold;
}

.StatusIcon-content .communication-event .sent-label {
  color: #6b6b6b;
}

.StatusIcon-content .communication-event .grid-container {
  margin-top: 4px;
  margin-left: -33px;
  padding-top: 0;
  padding-bottom: 0;
}

.StatusIcon-content .communication-event .grid-container .left-section i.icon {
  margin: 0;
}

.StatusIcon-content .communication-event .grid-container .right-section .status-text {
  font-style: italic;
}

.StatusIcon-content:has(.communication-event) {
  min-width: 320px;
}

.StatusIcon-content:has(.communication-event) .status-time {
  white-space: nowrap;
}

.ThreeDepartmentOverview {
  box-sizing: border-box;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #d4d4d5;
  border-radius: 4px;
  align-items: center;
  gap: 10px;
  height: 25px;
  padding: 0 17px 0 14px;
  font-weight: 600;
  line-height: 1.1;
  display: inline-flex;
}

.ThreeDepartmentOverview.disabled {
  cursor: default;
}

.ThreeDepartmentOverview .label {
  color: #555;
  font-size: 12px;
}

.ThreeDepartmentOverview .department {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.ThreeDepartmentOverview .department > i.icon {
  color: #555;
  margin: 0;
  font-size: 14px;
}

.ThreeDepartmentOverview .department .status.checked {
  color: #21ba45;
}

.ThreeDepartmentOverview .department .status.unchecked {
  color: #db2828;
}

.ThreeDepartmentModal .padding-container {
  padding: 18px 24px;
}

.ThreeDepartmentModal .checkboxes {
  gap: 28px;
  padding-bottom: 16px;
  display: flex;
}

.ThreeDepartmentModal .checkbox-cell {
  align-items: center;
  gap: 8px;
  line-height: 1;
  display: inline-flex;
}

.ThreeDepartmentModal .checkbox-cell > .field {
  margin: 0;
}

.ThreeDepartmentModal .checkbox-cell > i.icon {
  height: auto;
  margin: 0;
  line-height: 1;
}

.ThreeDepartmentModal .remark-section label {
  margin-bottom: 6px;
  font-weight: 600;
  display: block;
}

.ThreeDepartmentModal .remark-section textarea {
  resize: vertical;
  border: 1px solid #d4d4d5;
  border-radius: 4px;
  width: 100%;
  min-height: 80px;
  padding: 8px;
  font-family: inherit;
}

.ThreeDepartmentModal .log-section {
  text-align: right;
  color: #777;
  padding-top: 16px;
  font-size: 12px;
  line-height: 1.6;
}

.ThreeDepartmentModal .log-section .log-entry {
  font-style: italic;
  display: block;
}

.ThreeDepartmentModal .log-section .log-entry i.icon {
  margin-right: 4px;
}

.ThreeDepartmentModal .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.TyreExternalOfferTable {
  width: 100%;
  padding-top: 30px;
}

.TyreExternalOfferTable table.ReactTable th {
  padding-top: 5px;
  padding-bottom: 5px;
}

.TyreExternalOfferTable table.ReactTable th .th-stock, .TyreExternalOfferTable table.ReactTable th .th-runflat, .TyreExternalOfferTable table.ReactTable th .th-speed, .TyreExternalOfferTable table.ReactTable th .th-add {
  text-align: center;
}

.TyreExternalOfferTable table.ReactTable td {
  padding-top: 5px;
  padding-bottom: 5px;
}

.TyreExternalOfferTable table.ReactTable td.td-season, .TyreExternalOfferTable table.ReactTable td.td-stock, .TyreExternalOfferTable table.ReactTable td.td-speed {
  text-align: center;
}

.TyreExternalOfferTable table.ReactTable td.td-description {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 330px;
  overflow: hidden;
}

.TyreExternalOfferTable table.ReactTable td.td-add {
  text-align: center;
}

.TyreExternalOfferTable .three-pmsf-icon {
  margin-left: 2px;
  display: inline-block;
}

.TyreExternalOfferTable .three-pmsf-icon img {
  width: 16px;
  height: 16px;
  position: relative;
  top: 1px;
}

.TyreExternalOfferTable .lower-customer-price {
  color: #ff0202;
  background-color: #fef0e7;
  width: fit-content;
}

.TyreExternalOfferTable .ean {
  text-wrap: nowrap;
  vertical-align: bottom;
}

.TyreOfferTable {
  width: 100%;
  padding-top: 30px;
}

.TyreOfferTable table.ReactTable th {
  padding-top: 5px;
  padding-bottom: 5px;
}

.TyreOfferTable table.ReactTable th .th-add {
  text-align: center;
}

.TyreOfferTable table.ReactTable td {
  padding-top: 5px;
  padding-bottom: 5px;
}

.TyreOfferTable table.ReactTable td.td-season {
  text-align: center;
}

.TyreOfferTable table.ReactTable td.td-description {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 330px;
  overflow: hidden;
}

.TyreOfferTable table.ReactTable td.td-add {
  text-align: center;
}

.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 .search-button {
  color: #414141;
}

.TyreReplacementModal .search-form-label {
  visibility: hidden;
}

.TyreReplacementModal .pagination-container {
  justify-content: center;
  margin-top: 55px;
  display: flex;
}

.TyreReplacementModal__discount-dropdown {
  margin-bottom: 11px !important;
}

.TyreReplacementModal.ui.modal > .actions {
  justify-content: flex-end;
}

.TyreReplacementModal .no-wrap {
  white-space: nowrap;
}

.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;
}

.ReplacementOrderTable {
  width: 100%;
  padding-top: 30px;
}

.ReplacementOrderTable table.ReactTable th {
  padding-top: 5px;
  padding-bottom: 5px;
}

.ReplacementOrderTable table.ReactTable th.th-stock, .ReplacementOrderTable table.ReactTable th.th-speed, .ReplacementOrderTable table.ReactTable th.th-runflat, .ReplacementOrderTable table.ReactTable th.th-status {
  text-align: center;
}

.ReplacementOrderTable table.ReactTable td {
  padding-top: 5px;
  padding-bottom: 5px;
}

.ReplacementOrderTable table.ReactTable td.td-stock, .ReplacementOrderTable table.ReactTable td.td-speed, .ReplacementOrderTable table.ReactTable td.td-runflat, .ReplacementOrderTable table.ReactTable td.td-status {
  text-align: center;
}

.ReplacementOrderTable table.ReactTable td.td-description {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 330px;
  overflow: hidden;
}

.ReplacementOrderTable table.ReactTable td.td-quantity .dropdown {
  width: 80%;
}

.ReplacementOrderTable table.ReactTable td.td-status > .ui.loader:after {
  border-color: #48913d #0000 #0000;
}

.ReplacementOrderTable table.ReactTable.quantity {
  overflow: visible;
}

.ReplacementOrderTable table.ReactTable.quantity .ui.dropdown {
  min-width: 60px;
}

.ReplacementOrderTable table.ReactTable.quantity .ui.dropdown .menu {
  max-height: 200px;
  overflow-y: auto;
  min-width: fit-content !important;
}

.VehicleTyres .ConnectInterventionModal > div.header.ConnectInterventionModal__header {
  justify-content: space-between;
  padding: 25px;
}

.VehicleTyres .ConnectInterventionModal__intervention {
  padding: 8px 0;
}

.VehicleTyres .ConnectInterventionModal__intervention:not(:last-of-type) {
  border-bottom: 1px solid #dedede;
}

.VehicleTyres .ConnectInterventionModal__intervention {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.VehicleTyres .ConnectInterventionModal__linkButton {
  max-width: 30px;
}

.VehicleTyres .ConnectInterventionModal__linkButton i {
  transform: translateX(-5px) !important;
}

.VehicleTyres .ConnectInterventionModal .action-buttons {
  margin-left: auto;
}

.VehicleTyres .TyreReplacementTableItem__actions {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.VehicleTyres .TyreReplacementTableItem__actions .status-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  align-items: center;
  height: 27px;
  display: flex;
}

.VehicleTyres .TyreReplacementTableItem__actions .status-container.diagnose-overview-icon {
  margin-right: 10px;
}

.VehicleTyres .TyreReplacementTableItem__actions .status-container i.icon.pointer {
  cursor: pointer;
}

.VehicleTyres .TyreReplacementTableItem__actions .status-container .action-icon-container:last-child {
  border-right: 0;
}

.VehicleTyres .TyreReplacementTableItem__actions .status-container .action-icon-container i.icon {
  font-size: small;
}

.VehicleTyres .TyreReplacementTableItem__actions .status-container .action-icon-container {
  border-right: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 100%;
  display: flex;
}

.VehicleTyres .TyreReplacementTableItem__actions .status-container .action-icon-container .TyreReplacementActionSelector .menu {
  border: none !important;
}

.VehicleTyres .TyreReplacementTableItem__actions .status-container .action-icon-container .TyreReplacementActionSelector .visible.transition {
  box-shadow: none !important;
}

.VehicleTyres .TyreReplacementTableItem__actions .status-container .action-icon-container .TyreReplacementActionSelector .visible.transition :hover {
  background-color: #fafafa;
}

.VehicleTyres .TyreReplacementTableItem__actions .status-container .action-icon-container .TyreReplacementActionSelector .visible.transition div {
  border: 1px solid #e2e2e3;
  align-items: center;
  height: 29px;
  font-weight: bold;
  display: flex;
}

.VehicleTyres .TyreReplacementTableItem__actions .status-container .action-icon-container .TyreReplacementActionSelector .visible.transition div i.icon {
  margin: 10px 10px 10px 0;
}

.VehicleTyres .TyreReplacementTableItem__actions .status-container .action-icon-container .TyreReplacementActionSelector .visible.transition div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: none !important;
}

.VehicleTyres .TyreReplacementTableItem__actions .status-container .action-icon-container .TyreReplacementActionSelector .visible.transition div:not(:first-child):not(:last-child) {
  border-bottom: none !important;
}

.VehicleTyres .TyreReplacementTableItem__actions .status-container .action-icon-container .TyreReplacementActionSelector .visible.transition div:last-child {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.VehicleTyres .TyreReplacementTableItem .replace-with {
  padding-left: 26px;
}

.VehicleTyres .TyreTableRow {
  font-size: 14px;
}

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

.VehicleTyres .TyreTableRow .tyre-position-container .tyre-replacement-icon-container {
  cursor: pointer;
  margin: 0 5px;
}

.VehicleTyres .TyreTableRow .icons-container {
  justify-content: flex-end;
  gap: 5px;
  width: 100%;
  display: flex;
}

.VehicleTyres .TyreTableRow .icons-container .question_result_status {
  justify-items: flex-end;
  height: 27px;
}

.VehicleTyres .TyreTableRow .icons-container .question_result_status svg {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  padding: 5px 9px;
}

.VehicleTyres .TyreTableRow .icons-container .dbb-icon-container {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  width: 32px;
  height: 27px;
  padding: 0 7px;
}

.VehicleTyres .TyreTableRow .icons-container .dbb-icon-container .dbb-comment-icon.icon {
  color: #767676;
  font-size: 14px;
}

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

.VehicleTyres-container .TyreReplacementTableItem .replace-with {
  margin-left: 0;
}

.VehicleTyres-container .VehicleTyres .TyreHeader {
  background-color: #f9fafb;
  border-bottom: 1px solid #e2e2e3;
  align-items: center;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  display: flex;
}

.VehicleTyres-container .VehicleTyres .TyreHeader p {
  width: 100%;
  font-size: 14px;
  font-weight: bold;
}

.VehicleTyres-container .VehicleTyres .TyreTable {
  margin-bottom: 12px;
}

.VehicleTyres-container .VehicleTyres .TyreTable:not(:first-child) {
  border-top: 1px solid #e2e2e3;
}

.VehicleTyres-container .VehicleTyres .TyreTable .ui.grid {
  margin-left: 0;
  margin-right: 0;
}

.VehicleTyres-container .VehicleTyres .TyreTable .button.af {
  height: 25px;
}

.VehicleTyres-container .VehicleTyres .TyreTable .button.af i.icon {
  font-size: 14px;
}

.VehicleTyres-container .VehicleTyres .TyreTable .media-row {
  height: fit-content !important;
}

.VehicleTyres-container .VehicleTyres .TyreTable .media-row .checklist-media {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  display: flex;
}

.VehicleTyres-container .VehicleTyres .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;
}

.VehicleTyres-container .VehicleTyres .TyreTable .row:last-child {
  border-bottom: none;
}

.VehicleTyres-container .VehicleTyres .TyreTable .row .column {
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 5px;
  padding-right: 5px;
}

.VehicleTyres-container .VehicleTyres .TyreTable .row .column P {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.VehicleTyres-container .VehicleTyres .TyreTable .row .column .tyre-season-container {
  gap: 5px;
  display: flex;
}

.VehicleTyres-container .VehicleTyres .TyreTable .header {
  background-color: #f9fafb;
  border: 1px solid #e2e2e3;
}

.VehicleTyres-container .VehicleTyres .TyreTable .header p {
  font-size: 14px;
  font-weight: bold;
}

.VehicleTyres-container .VehicleTyres .TyreTable .axle-header {
  background-color: #f2f2f2;
  height: 30px;
}

.VehicleTyres-container .VehicleTyres .TyreTable .axle-header p {
  font-size: 14px;
  font-weight: bold;
}

.VehicleTyres-container .VehicleTyres .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;
}

.VehicleTyres-container .VehicleTyres .TyreTable .tyre-title-container .ui.tiny.basic.button {
  height: 25px;
  background-color: #fff !important;
}

.VehicleTyres-container .VehicleTyres .TyreTable .tyre-title-container .ui.tiny.basic.button p {
  font-size: 11px;
}

.VehicleTyres-container .VehicleTyres .TyreTable .tyre-title-container .tyre-title {
  align-items: center;
  gap: 8px;
  display: flex;
}

.VehicleTyres-container .VehicleTyres .TyreTable .tyre-title-container .tyre-title__wrapper {
  font-size: 18px;
  display: flex;
}

.VehicleTyres-container .VehicleTyres .TyreTable .tyre-title-container .tyre-title__wrapper__storage {
  color: #21ba45;
  padding-left: 10px;
}

.VehicleTyres-container .VehicleTyres .TyreTable .tyre-title-container .tyre-title__wrapper__locationName {
  color: #767676;
  padding: 0 8px 0 3px;
}

.VehicleTyres-container .VehicleTyres .TyreTable .tyre-title-container .tyre-title i.icon {
  margin-top: -7px;
}

.VehicleTyres-container .VehicleTyres .TyreTable .tyre-title-container .tyre-title p {
  font-size: 18px;
  font-weight: bold;
}

.VehicleTyres-container .VehicleTyres .TyreTable .tyre-title-container .tyre-dbb-label p {
  color: #21ba45;
  cursor: pointer;
  font-size: 12.6px;
  font-weight: bold;
}

.VehicleTyres-container i.icon {
  margin: 0;
}

.VehicleTyres-container i.icon.pointer {
  cursor: pointer;
}

.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 {
  margin-bottom: 3px;
  display: flex;
}

.AppointmentNotePopup .AppointmentNoteTitle svg {
  margin-right: 7px;
  position: relative;
  bottom: 1px;
}

.AppointmentNotePopup .AppointmentNoteTitle i.icon {
  margin-right: 3px;
  position: relative;
  top: 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;
}

.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%;
}

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 .customer-waiting-row {
  background-color: #f8f1ed;
}

.ReactTable.AppointmentsTable .customer-waiting-row :hover {
  background-color: inherit;
}

.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;
}

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

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

.panic-row .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.message-center {
  padding: 0;
  border-bottom: none !important;
}

.AppointmentsTable td.message-center .message-center-content {
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 500px;
  padding: 20px;
  font-size: 18px;
  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;
}

.NoteColumnCell {
  align-items: center;
  gap: 2px;
  display: inline-flex;
}

.ThreeDepartmentNotePopup {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.ThreeDepartmentNotePopup-row {
  align-items: center;
  gap: 5px;
  display: flex;
}

.ThreeDepartmentNotePopup .description {
  color: gray;
  font-style: italic;
}

.ThreeDepartmentNotePopup i.icon {
  margin: 0;
}

.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;
}

.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;
}

.AppointmentSpecialIndicators-container .purpleTire {
  background-color: #ecd6f4;
  border-color: #ecd6f4;
}

.AppointmentSpecialIndicators-container .purpleTire i.icon.tire {
  color: #6d0699;
}

.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 .ui.search > .ui.input > input {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-right: 72px !important;
}

.NewAppointment .ui.form .fields .search .search-wrapper .customer-tags {
  text-transform: uppercase;
  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, .stars-dropdown {
  text-align: center;
  background-color: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  padding: 0 5px;
}

.carts-dropdown i.icon, .stars-dropdown i.icon {
  font-size: 12px;
}

.cart-all-option {
  text-align: center !important;
}

.cart-selected-option {
  background-color: #e8f3fa !important;
}

.cart-filter-icon, .star-filter-icon {
  font-size: 10px !important;
}

.shoppingCartIcon, .starIcon {
  color: #6b6b6b;
}

.dropdown-menu-container > :not(:last-child) {
  border-bottom: 1px solid #edeeef !important;
}

.orange-cart {
  color: #f2711c !important;
}

.yellow-cart {
  color: #fbbd08 !important;
}

.yellow-cart-border {
  border: 1px solid #fbbd08 !important;
}

.yellow-cartbg {
  background-color: #fbbd0833;
}

i.icon.shopping.cart.yellow {
  color: #fbbd08 !important;
}

i.star.red {
  color: #db2828;
}

i.star.blue {
  color: #2185d0;
}

i.star.green {
  color: #21ba45;
}

i.star.yellow {
  color: #f2711c !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;
}

.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 .small-icon {
  position: absolute;
  bottom: 4px;
  left: 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;
}

.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);
  }
}

.BrandGroupSelect {
  width: 100%;
}

.BrandGroupSelect .ui.dropdown .menu > .item.brand-group-header {
  font-weight: bold !important;
}

.BrandGroupSelect .brand-group-item.item {
  padding-left: 2rem !important;
}

.BrandGroupSelect .ui.label.brand-group-label {
  font-weight: bold;
}

.BrandGroupSelect .ui.label.brand-group-label > .icon {
  margin-right: 6px;
}

.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;
}

.CarNoteModal .content-container {
  padding: 2rem;
}

.CarNoteModal .actions-container {
  padding: 18px 24px;
}

.CarNoteModal .actions-buttons-main-container {
  justify-content: space-between;
  display: flex;
}

.CarNoteModal .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.CarNoteModal .header {
  padding: 25px 0 24px 25px;
}

.CarNoteModal .header-container .title {
  font-size: 18px;
  font-weight: bold;
}

.CarNoteModal .header-container i {
  color: #ea2d62;
  margin-right: 5px;
  font-size: 18px;
}

.CarNoteModal .toggles-container {
  justify-content: flex-end;
  gap: 30px;
  display: flex;
}

.CarNoteModal .save-cancel-buttons-container {
  gap: 12px;
  margin-left: auto;
  display: flex;
}

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

.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%;
}

.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;
}

.LocationInvoiceDisabledMessage {
  margin: 20px 20px 9px;
}

.LocationInvoiceDisabledMessage .header-title {
  font: bold 13px / 20px Lato;
}

.LocationInvoiceDisabledMessage .header-text {
  font: 13px / 20px Lato;
}

.LocationInvoiceDisabledMessage .icon-placement {
  margin-right: 15px;
}

.LocationInvoiceDisabledMessage .message-container {
  background-color: #fff;
}

.Remark {
  align-items: center;
  width: 65%;
  display: flex;
}

@media (width >= 1850px) {
  .Remark {
    width: 80%;
  }
}

.Remark div {
  display: inline-block;
}

.Remark textarea.remark-input {
  resize: none;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  width: 100%;
  height: 37.58px;
  margin-left: 5px;
}

.Remark textarea.remark-input:focus {
  box-shadow: none;
  border: 1px solid #e6e6e6;
  outline: none;
}

.Remark .remark-text-container {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 5px;
  overflow: hidden;
}

.location-licenses-remark-info {
  white-space: nowrap;
  color: gray;
  margin-top: 10px;
  font-style: italic;
  display: block;
}

.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;
  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%;
}

.LocationLicenseLocationDropdown .placeholder-text-color {
  color: #bfbfbfde;
}

.LocationLicenseLocationDropdown .selected-text-color {
  color: #000000de;
}

.LocationLicense-Navbar #navbar-portal-container {
  justify-content: flex-start;
  padding-left: 30px;
}

.LocationLicenseOverview .dealer-location-dropdown-location .ui.dropdown, .LocationLicenseOverview .dealer-location-dropdown-location i.icon {
  font-size: 11px;
  position: relative;
  top: -1px;
}

.LocationLicenseOverview .filters {
  margin: 9px 0;
}

.LocationLicenseOverview .filters .ui.grid {
  margin: 0 9px 0 22px;
}

.LocationLicenseOverview .filters .no-left-gutter {
  padding-left: 0 !important;
}

.LocationLicenseOverview .filters .reset-button-container {
  justify-self: end;
  display: flex;
}

.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-Tabs {
  align-items: center;
  gap: 20px;
  width: 58%;
  display: flex;
}

.LocationLicenseOverview-Header-Tabs .ui.secondary.menu {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
}

@media (width >= 1850px) {
  .LocationLicenseOverview-Header-Tabs {
    width: 65%;
  }
}

.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 .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;
}

.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.orange {
  color: #f2711c !important;
}

.circle-icon-container .circle-icon.orangebg.orange-border.disabled i.small.icon.shopping.cart.orange {
  color: #767676 !important;
}

.circle-icon-container i.small.icon.shopping.cart.yellow {
  color: #fbbd08 !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: #fbbd0833;
}

.circle-icon-container .yellow-border {
  border: 2px solid #fbbd0833;
}

.circle-icon-container .circle-icon.yellowbg:has(i.star) {
  background-color: #f2711c33;
}

.circle-icon-container .circle-icon.yellow-border:has(i.star) {
  border-color: #f2711c33;
}

.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;
}

.CustomerCard__customer-card-no-box-shadow.-no-margin {
  margin: 0;
}

.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:not(:last-child) {
  margin-right: 10px;
}

.CustomerDetail .active-preferred-channel {
  color: #fff;
  background-color: #55aa0d;
}

.CustomerCarAppointmentDetails {
  padding: 1em 0;
}

.CustomerCarAppointmentDetails .tab {
  padding: 0 !important;
}

.CustomerCarAppointmentDetails .ReactTable .rt-tbody {
  overflow-y: hidden;
}

.CustomerCarAppointmentDetails .no-results {
  text-align: center;
  padding: 1em;
}

.CustomerNotes {
  padding: 1rem 0;
}

.CustomerNotes .button.-appointment-status.button-note {
  padding: 0 5px;
}

.CustomerNotes .button.-appointment-status.button-note i.icon {
  transform: translate(6px);
}

.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 .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;
}

.DBBAppointmentDateModal .react-datepicker-wrapper {
  width: 100%;
}

.DBB {
  color: #000 !important;
}

.DBB .secondary-button {
  border-left: 1px solid #e2e2e3;
  align-items: center;
  height: 100%;
  margin-right: -12px;
  padding-right: 12px;
  display: flex;
}

.DBB i.icon.plus {
  -webkit-text-stroke: .5px #48913d;
  position: relative;
  top: 1px;
}

.DBB .checked-tire {
  border-radius: 50%;
  width: 15px;
  height: 15px;
  margin-right: 3px;
  display: inline-block;
  position: relative;
}

.DBB .checked-tire 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 .checked-tire i.icon.tire {
  padding-top: 4px !important;
}

.DBB .checked-tire.red {
  background-color: #ff020233;
  outline: 2px solid #ff020233;
}

.DBB .checked-tire.green {
  background-color: #8cc34a99;
  outline: 2px solid #8cc34a99;
}

.DBB .checked-tire.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 {
  position: relative;
  top: 1px;
  margin-right: 4px !important;
}

.DBB.green {
  background: #ccecd6 !important;
  border: 1px solid #21ba45 !important;
}

.DBB.green .secondary-button {
  border-left: 1px solid #21ba45;
}

.DBB.orange {
  background: #fff5ee !important;
  border: 1px solid #ffc300 !important;
}

.DBB.orange .secondary-button {
  border-left: 1px solid #ffc300;
}

.DBB.red {
  background: #fef0e7 !important;
  border: 1px solid #ff0202 !important;
}

.DBB.red .secondary-button {
  border-left: 1px solid #ff0202;
}

.DBB.purple {
  background-color: #e2cdeb !important;
  border-color: #6d0699 !important;
}

.DBB.purple .secondary-button {
  border-left-color: 1px solid #6d0699;
}

.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 .popup-content {
  letter-spacing: 0;
  color: #000;
  font-size: 13px;
  font-family: Lato !important;
}

.ui.wide.popup.DBBbutton .popup-content span {
  font-weight: bold;
}

.ui.selection.dropdown .item[parentKey] {
  padding-left: 25px !important;
}

.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;
}

.ExportDataButton__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;
}

.ExportDataButton__limegreen-color {
  color: #21ba45 !important;
}

.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;
  margin-top: 6px;
}

.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 {
  width: 1200px;
  max-width: 90vw;
  max-height: 500px;
  overflow-y: auto;
}

.AppointmentNoteAttachments .ui.floating.multiple.dropdown.action-dropdown .menu > .item {
  padding-top: 10px;
  padding-bottom: 10px;
}

.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 .upload-info {
  white-space: nowrap;
  font-size: 12.6px;
  font-style: italic;
  font-weight: bold;
  line-height: 16px;
}

.AppointmentNoteAttachments .dropdown-item-row {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  display: flex;
}

.AppointmentNoteAttachments .dropdown-item-name-container {
  flex: 1;
  align-items: center;
  min-width: 0;
  display: flex;
}

.AppointmentNoteAttachments .dropdown-item-name-container i.icon {
  margin-right: 5px;
}

.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: auto;
  margin: 8px auto 8px 12px;
  display: block;
}

.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%);
}

.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;
}

.ui.page.modals.dimmer:has( > .InterventionModal) {
  justify-content: center !important;
}

.InterventionModal .header-container {
  padding: 25px 0 24px 25px;
}

.InterventionModal .content-container {
  padding: 2rem;
}

.InterventionModal .action-buttons-container {
  padding: 18px 24px;
}

.InterventionModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.InterventionModal .header-icon {
  font-size: 1.3em;
}

.InterventionModal .header-title-container {
  align-items: center;
  gap: 10px;
  display: flex;
}

.InterventionModal .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.InterventionModal .ui.buttons.with-dropdown {
  background-color: #f9fafb;
  border: 1px solid #dededf;
  border-radius: 4px;
  align-items: center;
}

.InterventionModal .ui.buttons.with-dropdown .button {
  background-color: inherit;
  padding: 5px 10px 5px 5px;
}

.InterventionModal .ui.buttons.with-dropdown .icon.button {
  margin-bottom: 1px;
}

.InterventionModal .ui.buttons.with-dropdown .black {
  color: #000;
}

.InterventionModal .ui.buttons.with-dropdown .grey {
  color: #767676;
}

.InterventionModal .actions {
  justify-content: space-between;
  align-items: center;
}

.InterventionModal .price-container {
  width: 100%;
}

.InterventionModal .price-label-customer-ok-container {
  gap: 25px;
  display: flex;
}

.InterventionModal .customer-ok-container {
  align-items: center;
  display: flex;
  margin-top: 5px !important;
}

.InterventionModal .mt-18 {
  margin-top: 18px !important;
}

.InterventionModal .customer-ok-button {
  width: 45px !important;
  height: 40px !important;
}

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

.InterventionModal .desc-container {
  align-items: center;
  gap: 10px;
  margin-bottom: 7.5px;
  display: flex;
}

.InterventionModal .desc-container .desc-label {
  font-weight: bold;
}

.InterventionModal .desc-container .desc-icon {
  color: #21ba45;
}

.InterventionModal .mt-top-0 {
  margin-top: 0;
}

.InterventionModal .mb-0 {
  margin-bottom: 0;
}

.InterventionModal .error-message {
  display: revert !important;
}

.ui.modal.KeyloopSubitemsModal > div.actions {
  justify-content: flex-end;
}

.ui.modal.KeyloopSubitemsModal .element-search-result {
  align-items: center;
  gap: 8px;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.ui.modal.KeyloopSubitemsModal .element-search-result .element-search-icon {
  flex-shrink: 0;
}

.ui.modal.KeyloopSubitemsModal .element-search-result span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ui.modal.KeyloopSubitemsModal #keyloop-subitem .search-field {
  position: relative;
}

.ui.modal.KeyloopSubitemsModal #keyloop-subitem .search-field .ui.search .ui.icon.input > i.icon {
  z-index: 2;
}

.ui.modal.KeyloopSubitemsModal #keyloop-subitem .search-field .selected-value {
  cursor: pointer;
  z-index: 1;
  background: #fff;
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px 0 35px;
  display: flex;
  position: absolute;
  top: 25px;
  left: 1px;
  right: 1px;
  overflow: hidden;
}

.ui.modal.KeyloopSubitemsModal #keyloop-subitem .search-field .selected-value .element-search-icon {
  flex-shrink: 0;
}

.ui.modal.KeyloopSubitemsModal #keyloop-subitem .search-field .selected-value span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ui.modal.KeyloopSubitemsModal #keyloop-subitem .ui.search .ui.icon.input > i.icon {
  left: 1px;
  right: auto;
}

.ui.modal.KeyloopSubitemsModal #keyloop-subitem .ui.search .ui.icon.input > input {
  padding-left: 2.67em;
  padding-right: 1em;
}

.ui.modal.KeyloopSubitemsModal #keyloop-subitem .ui.search .results {
  max-height: 200px;
  overflow-y: auto;
}

.ui.modal.KeyloopSubitemsModal #keyloop-subitem .ui.search .results .result {
  padding: 8px 12px;
}

.ui.modal.KeyloopSubitemsModal #keyloop-subitem .type-input-readonly {
  background-color: #f9fafb;
  border: 1px solid #22242626;
  border-radius: 4px;
  align-items: center;
  gap: 12px;
  min-height: 37px;
  padding: 9.5px 14px;
  display: flex;
  color: #b5b5b5 !important;
}

.ui.modal.KeyloopSubitemsModal #keyloop-subitem .type-input-readonly .element-type-icon {
  border: none;
  align-items: center;
  margin: 0;
  padding: 0;
  display: flex;
}

.ui.modal.KeyloopSubitemsModal #keyloop-subitem .type-input-readonly .element-type-icon i.icon {
  color: #767676;
  margin: 0;
  font-size: 12px;
}

.ui.modal.KeyloopSubitemsModal #keyloop-subitem .type-input-readonly .placeholder {
  color: #bfbfbfde;
}

.ui.modal.KeyloopSubitemsModal #keyloop-subitem .keyloop-subitem-input:read-only, .ui.modal.KeyloopSubitemsModal #keyloop-subitem .keyloop-subitem-input input:read-only {
  color: #b5b5b5;
  cursor: default;
  background-color: #f9fafb;
}

.InterventionSubitemsModal .element-dropdown-option {
  align-items: center;
  gap: 12px;
  padding: 0;
  display: flex;
}

.InterventionSubitemsModal #new-subitem .ui.selection.dropdown .menu > .item, .InterventionSubitemsModal #new-subitem .ui.selection.dropdown {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.InterventionSubitemsModal #new-subitem .element-dropdown-icon {
  justify-content: center;
  align-items: center;
  width: 33px;
  display: flex;
}

.InterventionSubitemsModal #new-subitem .element-dropdown-icon i.icon {
  color: #767676;
  font-size: 12px;
}

.InterventionSubitemsModal #new-subitem .total-price-input > input:read-only {
  color: #b5b5b5;
  cursor: default;
  background-color: #f9fafb;
}

.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;
}

.MenuView.ui.vertical.menu {
  scrollbar-width: none;
  background-color: #f9fafb;
  width: 250px;
  overflow-y: auto;
}

.MenuView.ui.vertical.menu .item {
  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;
}

.AccountDropdown .account-dropdown {
  cursor: pointer;
}

.AccountDropdown .account-dropdown .small-profile-icon {
  border: 1px solid #323232;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  margin-top: 8px;
}

.AccountDropdown .account-dropdown .no-profile-picture-icon {
  width: 18px;
  height: 18px;
}

.AccountDropdown .account-dropdown .menu {
  top: 135% !important;
}

.AccountDropdown .account-dropdown .account-dropdown-container {
  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;
}

.AccountDropdown .account-dropdown .account-dropdown-container .divider {
  border-color: #e2e2e3;
  margin: 0;
}

.AccountDropdown .account-dropdown .account-dropdown-container .item {
  color: #000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  line-height: 17px;
  display: flex;
}

.AccountDropdown .account-dropdown .account-dropdown-container .item:not(:first-child) {
  height: 41px;
}

.AccountDropdown .account-dropdown .account-dropdown-container .profile-details {
  pointer-events: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 146px;
  background: #f9fafb !important;
  padding: 1rem !important;
}

.AccountDropdown .account-dropdown .account-dropdown-container .profile-details .huge.icon {
  margin-right: 0;
}

.AccountDropdown .account-dropdown .account-dropdown-container .profile-details .profile-avatar {
  opacity: 1;
  border: 1px solid #767676;
  border-radius: 50%;
  width: 58px;
  height: 58px;
  max-height: unset !important;
  margin: 0 !important;
}

.AccountDropdown .account-dropdown .account-dropdown-container .profile-details h1 {
  letter-spacing: 0;
  color: #000;
  opacity: 1;
  margin: 0;
  font-size: 16px;
  line-height: 19px;
}

.AccountDropdown .account-dropdown .account-dropdown-container .profile-details p {
  letter-spacing: 0;
  color: #414141;
  opacity: 1;
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 17px;
}

.NotificationsBellButton .app-notifications-wrapper {
  cursor: pointer;
  position: relative;
}

.NotificationsBellButton .app-notifications-wrapper:hover {
  opacity: .65;
}

.NotificationsBellButton .app-notifications-wrapper .app-notifications-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;
}

.NotificationsBellButton .actions-menu {
  width: 425px !important;
  min-width: 0 !important;
  min-height: 500px !important;
  max-height: 800px !important;
  margin-top: 7px !important;
  margin-right: -48px !important;
}

.NotificationsBellButton .actions-menu .container {
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  display: flex;
}

.NotificationsBellButton .actions-menu .button-container {
  align-items: center;
  padding: 10px;
  display: flex;
}

.NotificationsBellButton .actions-menu .button {
  height: 36px !important;
}

.NotificationsBellButton .actions-menu .icons-container {
  gap: 15px;
  display: flex;
}

.NotificationsBellButton .app-notification {
  color: #000c;
  overflow-y: auto;
  white-space: normal !important;
  min-height: 500px !important;
  max-height: 720px !important;
}

.NotificationsBellButton .app-notification .container {
  background: #fafafa;
  border-radius: 4px;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  min-height: 47px;
  margin: 10px 20px;
  padding: 10px 12px;
  display: flex;
}

.NotificationsBellButton .app-notification .notification-title {
  cursor: pointer;
  overflow-wrap: break-word;
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.NotificationsBellButton .app-notification .notification-title span {
  font-size: 14 / 17px;
}

.NotificationsBellButton .app-notification .notification-title .title-container {
  align-items: center;
  gap: 15px;
  display: flex;
}

.NotificationsBellButton .app-notification .notification-title .title-container span {
  font-weight: bold;
}

.NotificationsBellButton .app-notification .notification-title .description-container span {
  font-weight: normal;
}

.nav-bar-wrapper {
  z-index: 13;
  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 {
  cursor: pointer;
  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-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 .notifications-wrapper {
  cursor: pointer;
  position: relative;
}

.nav-bar-wrapper .notifications-wrapper:hover {
  opacity: .65;
}

.nav-bar-wrapper .notifications-wrapper .notifications-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;
}

.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;
}

.NavBarSearch .clear-icon {
  right: 5px;
}

.NavBarSearch .search-icon {
  right: 25px;
}

.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-loader {
  justify-content: center;
  align-items: center;
  height: 40px;
  display: flex;
}

.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;
}

.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;
}

.ArrowPagination {
  justify-content: center;
  padding: 20px 0 55px;
  display: flex;
}

.ArrowPagination .pagination-button {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}

.ArrowPagination .pagination-button 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;
}

.ArrowPagination .pagination-button button:not(:last-child) {
  border-right: 1px solid #e5e7eb;
}

.ArrowPagination .pagination-button button:hover:not(:disabled) {
  background-color: #f9fafb;
}

.ArrowPagination .pagination-button button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.ArrowPagination .pagination-button button.active {
  background-color: #f3f4f6;
  font-weight: 500;
}

.ArrowPagination .pagination-button button.nav-button {
  padding: .25rem .75rem;
  font-size: 1.25rem;
  line-height: 1;
}

.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 {
  border: 1px solid #e9e9ea;
  border-radius: 4px;
  align-items: center;
  width: 100%;
  display: flex;
}

.PinLog .PinLogHistory .pin-log-item .pin-note {
  white-space: pre-wrap;
  flex: 1;
  margin-bottom: 2px;
  padding-top: .5rem;
  padding-bottom: 1rem;
  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;
}

.PinModal_layout {
  flex-direction: column;
  height: 80vh;
  display: flex;
}

.PinModal_header {
  border-bottom: 1px solid #2224261f;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  display: flex;
}

.PinModal_title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.PinModal_title i.icon {
  margin-right: 10px;
}

.PinModal_body {
  flex: auto;
  min-height: 0;
  padding: 30px;
  overflow-y: auto;
}

.PinModal_content {
  width: 100%;
}

.PinModal_footer {
  background: #fff;
  border-top: 1px solid #2224261f;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  display: flex;
}

.PinModal_modal-footer {
  gap: 12px;
  display: flex;
}

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

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

.PinModal_checkbox-box {
  margin: 0 !important;
}

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

.PinModal_checkbox-fields {
  gap: 10px;
  margin-bottom: 0 !important;
}

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

.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;
}

.PreferredCommunicationChannel {
  vertical-align: middle;
  align-items: center;
  display: inline-flex;
}

.PreferredCommunicationChannel .icon {
  margin-right: 4px;
  font-size: 16px;
}

.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;
}

.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;
}

.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;
}

.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;
}

.OpenRecalls-layout-2 {
  grid-template-columns: 24px minmax(0, 1fr) 120px;
}

.OpenRecalls-layout-3 {
  grid-template-columns: 1fr 70px minmax(75px, max-content) max-content;
}

.OpenRecalls-headerGroup {
  align-items: center;
  gap: 15px;
  display: flex;
}

.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;
}

.OpenRecalls-selectAll {
  align-items: center;
  gap: 20px;
  display: flex;
}

.OpenRecalls-select .OpenRecalls-item {
  gap: 10px;
}

.OpenRecalls-convert .OpenRecalls-item {
  gap: 44px;
}

.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: 10px 0 45px;
}

.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;
}

.ROBModal :not(.section_title) + .ROBList {
  padding-top: 20px;
}

.ROBModal .ROBList .list_title {
  color: #000c;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}

.ROBModal .ROBList .list_title .controls {
  margin-left: 10px;
  display: inline;
}

.ROBModal .ROBList .list_title .controls button {
  width: 27px;
  height: 27px;
  box-shadow: none;
  border-radius: 4px;
  padding: 5px;
  background: #fff !important;
  border: 1px solid #e6e6e6 !important;
}

.ROBModal .ROBList .list_title .controls button i {
  margin: 0 !important;
  transform: none !important;
}

.ROBModal .ROBList .list_row {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
  display: flex;
}

.ROBModal .ROBList .list_row .row_title {
  color: #000c;
  flex: 1;
  font-size: 14px;
  font-weight: bold;
}

.ROBModal .ROBList .list_row .row_value {
  text-align: right;
  flex: 1;
  font-size: 14px;
}

.ROBModal .RobSection .main_section > .section_title {
  border: 0;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  font-size: 18px;
}

.ROBModal .RobSection .sub_section > .section_title {
  font-size: 16px;
}

.ROBModal .RobSection .section_title {
  color: #000c;
  margin-bottom: 10px;
  font-weight: bold;
}

.ROBModal .RobSection .main_section > :not(.section_title) + .sub_section {
  border-top: 1px solid #ccc;
}

.ROBModal .RobSection .main_section :not(.section_title) + .sub_section {
  margin-top: 20px;
  padding-top: 20px;
}

.ROBModal .RobSection .section_row {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
  display: flex;
}

.ROBModal .RobSection .section_row .row_title {
  color: #000c;
  flex: 1;
  font-size: 14px;
  font-weight: bold;
}

.ROBModal .RobSection .section_row .row_value {
  text-align: right;
  flex: 1;
  font-size: 14px;
}

.ROBServiceRequest {
  flex-shrink: 0;
  align-items: center;
  margin-left: auto;
  margin-right: 8px;
  display: flex;
}

.ROBServiceRequest .-appointment-status {
  white-space: nowrap;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  min-width: 96px;
  display: flex;
  color: #fff !important;
  border: 1px solid #e2e2e3 !important;
  height: 25px !important;
  padding: 0 10px !important;
}

.ROBServiceRequest .-appointment-status.green, .ROBServiceRequest .-appointment-status.green:hover, .ROBServiceRequest .-appointment-status.green:focus, .ROBServiceRequest .-appointment-status.green:active {
  background: #21ba45 !important;
}

.ROBServiceRequest .-appointment-status.orange, .ROBServiceRequest .-appointment-status.orange:hover, .ROBServiceRequest .-appointment-status.orange:focus, .ROBServiceRequest .-appointment-status.orange:active {
  background: #ffba39 !important;
}

.ROBServiceRequest .-appointment-status.red, .ROBServiceRequest .-appointment-status.red:hover, .ROBServiceRequest .-appointment-status.red:focus, .ROBServiceRequest .-appointment-status.red:active {
  background: #c11 !important;
}

.ROBServiceRequest .-appointment-status.gray, .ROBServiceRequest .-appointment-status.gray:hover, .ROBServiceRequest .-appointment-status.gray:focus, .ROBServiceRequest .-appointment-status.gray:active {
  color: #000 !important;
  background: #e0e1e2 !important;
}

.ROBServiceRequestModal .header {
  justify-content: space-between;
  align-items: center;
  display: flex;
  padding-right: 25px !important;
}

.ROBServiceRequestModal .header .header_actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.ROBServiceRequestModal .header .header_actions .portal_button {
  gap: 8px;
  align-items: center !important;
  display: flex !important;
}

.ROBServiceRequestModal .header .close_button {
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  line-height: 18px;
  display: flex;
}

.ROBServiceRequestModal .header .close_button i.icon {
  font-size: 16px;
  margin: 0 0 0 2px !important;
  transform: translateX(0) !important;
}

.ROBServiceRequestModal .remark_row {
  border-bottom: 1px solid #e2e2e3;
  align-items: flex-start;
  gap: 20px;
  margin-top: 25px;
  padding: 4px 0;
  font-size: 14px;
  display: flex;
}

.ROBServiceRequestModal .remark_row + .ROBServiceRequestModal .remark_row {
  margin-top: 0;
}

.ROBServiceRequestModal .remark_row .remark_title {
  color: #767676;
  flex-shrink: 0;
  width: 220px;
}

.ROBServiceRequestModal .remark_row .remark_value {
  color: #000;
  word-break: break-word;
}

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

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

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

.ROBModal .ROBSlaTable .ui.input {
  width: 280px;
  margin-bottom: 12px;
}

.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 .ui.tab.segment {
  background-color: #fff;
}

.ROB .ROBButton {
  background: #ccecd6 !important;
  border: 1px solid #21ba45 !important;
}

.scrollToSectionMenu-container {
  width: 100%;
  overflow: visible;
}

.scrollToSectionMenu-container.hideBorder {
  margin-left: -15px;
}

.scrollToSectionMenu-container.hideBorder .pointing.menu {
  border-radius: 0;
  overflow: visible;
  border: none !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
}

.scrollToSectionMenu-container.hideBorder .pointing.menu .item {
  padding: 15px 17.5px !important;
}

.scrollToSectionMenu-container .pointing.menu {
  background-color: #fff;
  width: 100%;
  padding-right: 50px;
  display: flex;
  position: relative;
  overflow: visible !important;
}

.scrollToSectionMenu-container .pointing.menu i.icon {
  margin: 0 !important;
}

.scrollToSectionMenu-container .pointing.menu span {
  margin-left: 5px;
}

.scrollToSectionMenu-container .pointing.menu .item {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: none;
  max-width: 300px;
  display: block;
  overflow: hidden;
}

.scrollToSectionMenu-container .pointing.menu .item.overflow-dropdown {
  background: #fff;
  width: 50px;
  position: absolute;
  top: 0;
  right: 0;
  overflow: visible;
}

.scrollToSectionMenu-container .pointing.menu .item.overflow-dropdown.active.item {
  color: inherit !important;
  border: none !important;
  margin: 0 !important;
}

.scrollToSectionMenu-container .pointing.menu .dropdown-menu-item {
  max-width: none;
}

.scrollToSectionMenu-container .pointing.menu .overflow-dropdown .menu {
  right: 0;
  left: auto !important;
  overflow: visible !important;
}

@media screen and (width >= 768px) {
  .scrollToSectionMenu-container .pointing.menu .overflow-dropdown .menu.visible {
    transform-origin: 100% 0;
  }
}

.scrollToSectionMenu-container .secondary.pointing.menu .active.item {
  color: #21ba45 !important;
  border-width: 4px !important;
  border-color: #21ba45 !important;
  padding: 15px 17.5px !important;
}

.scrollToSectionMenu-container .menu:after {
  display: none;
}

.scrollToSectionMenu-container a:hover, .scrollToSectionMenu-container a {
  text-decoration: none;
}

@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;
}

.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;
}

.status-filters-wrapper {
  flex-direction: row;
  gap: 6px;
  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;
}

.svg-face-icon {
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  display: flex;
  overflow: hidden;
}

.svg-face-icon img {
  width: 18px;
  height: 18px;
}

.bo-icon {
  color: #000;
  font-weight: 600;
}

i.icon.top-right {
  z-index: 1;
  position: absolute;
  top: -3px;
  right: -2px;
  font-size: 10px !important;
}

i.icon.top-right.envelope {
  top: -4px;
  right: 0;
  font-size: 9px !important;
}

.small-icon {
  position: absolute;
  bottom: 4px;
  left: 0;
  font-size: 9px !important;
}

.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;
}

.TableView .ui.celled.table td {
  height: 30px;
  padding: 0 0 0 16px !important;
}

.TableView .table-view-row {
  align-items: center;
  display: flex;
}

.TableView .table-view-row p {
  margin: 0;
  font-size: 14px;
}

.TableView .clipboard-copy {
  cursor: pointer;
  color: #21ba45;
  position: relative;
  top: 1.5px;
}

.TableView .clipboard-copy i {
  font-size: 14px;
}

.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 .item:not(.overflow-dropdown) i.icon {
  margin-right: 10px !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;
}

.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;
}

.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;
}

.tsqd-open-btn-container {
  right: -100px !important;
}

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

.text-align-center {
  text-align: center;
}

.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;
}

button.ui.basic.button.add-btn {
  flex: 0 0 38px;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  display: inline-flex;
}

button.ui.basic.button.add-btn i.icon.plus {
  color: #21ba45;
  margin: 0;
}

button.ui.button {
  font-weight: bold;
}

.filters-toolbar-container {
  margin: 9px 9px 5px 0;
}

.capitalize-text {
  text-transform: capitalize;
}

.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;
}

.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(/releases/20261104-123214-8.50.0/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;
}

.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 .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 .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;
}

.ResetPasswordRequest .error {
  opacity: 1;
  letter-spacing: 0;
  color: #ba3821;
  background: #f5e9de no-repeat padding-box padding-box;
  border: 1px solid #ba3821;
  border-radius: 4px;
  padding: 15px 13px;
  font-size: 14px;
  font-family: Lato !important;
}

.AcceptAgreementModal .actions {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.AcceptAgreementModal .document-container {
  height: 650px;
}

.AccessKeysDashboardTable {
  padding: 21px 10px 55px;
}

.AccessKeysDashboardTable__button {
  cursor: pointer;
  color: #fff;
  letter-spacing: 0;
  border: none;
  border-radius: 4px;
  align-items: center;
  height: 25px;
  padding: 5px 7px;
  font: 13px / 24px Lato;
  display: flex;
}

.AccessKeysDashboardTable__button-teal {
  background-color: #3ba9a3;
}

.AccessKeysDashboardTable__button-orange {
  background-color: #ff9300;
}

.AccessKeysDashboardTable__button-disabled {
  color: #6b6b6b;
  background-color: #e9e9e9;
}

.AccessKeysDashboardTable__copy-to-clipboard {
  align-items: baseline;
}

.AccessKeysDashboardTable__copy-to-clipboard:hover .AccessKeysDashboardTable__copy-icon {
  display: block !important;
}

.AccessKeysDashboardTable__api-key-container {
  align-items: inherit;
  width: 50px;
  display: contents;
}

.AccessKeysDashboardTable__copy-icon {
  display: none !important;
}

.AccessKeysDashboardTable .request-logs-button-container {
  justify-content: flex-end;
  margin-right: 12px;
  display: flex;
}

.AccessKeysDashboardTable .request-logs-header {
  justify-content: flex-end;
  margin-right: 16px;
  display: flex;
}

.AccessKeysDashboardToolbar {
  gap: 15px;
  margin: 21px 9px 0 22px;
  display: flex;
}

.AccessKeysDashboardToolbar .action-button-container {
  height: 38px !important;
}

.AccessKeysDashboardToolbar .create-api-key-text-no-border {
  white-space: nowrap;
  color: #000;
  align-items: center;
  margin-left: 5px;
  display: flex;
}

.AccessKeysDashboardToolbar .create-api-key-text-container-no-border {
  border-left: none;
  align-items: center;
  height: 36px;
  margin-left: 1px;
  display: flex;
  position: relative;
  top: -10px;
}

.AccessKeysDashboardToolbar .create-api-key-icon {
  border-right: 0 !important;
  margin-top: 1px !important;
  margin-left: 11px !important;
}

.AccessKeysDashboardToolbar .create-api-key-icon-text-container {
  margin-right: 11px;
  display: flex;
}

.AccessKeysDashboardToolbar .create-api-key-container {
  flex-direction: row;
  height: 38px;
  display: flex;
}

.AccessKeysDashboardToolbar .create-api-key-container .ui.fluid[class*="left labeled"].icon.button, .AccessKeysDashboardToolbar .create-api-key-container .ui.fluid[class*="right labeled"].icon.button {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.CreateApiKeyModal .padding-container {
  padding: 18px 24px;
}

.CreateApiKeyModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.CreateApiKeyModal .header-container {
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  display: flex;
}

.CreateApiKeyModal .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.LocationIdsModal .logs-title {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.LocationIdsModal .logs-title .close-button-container {
  padding-right: 30px;
}

.LocationIdsModal .location-ids-container {
  border-bottom: 1px solid #ccc;
  justify-content: space-between;
  padding: 13px 3px;
  display: flex;
}

.LocationIdsModal .location-ids-container .text {
  font: normal normal medium 13px / 15px Lato;
  letter-spacing: 0;
  color: #000;
}

.LocationIdsModal .location-ids-container:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.LocationIdsModal .location-ids-container:first-child {
  padding-top: 0;
}

.LogsModal .logs-title {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.LogsModal .logs-title .close-button-container {
  padding-right: 30px;
}

.AccountSetting {
  background-color: #f7f7f7;
  max-width: 1920px;
  height: 100%;
  padding: 80px 20px 15px;
}

.AccountSetting .cursor-pointer {
  cursor: pointer;
}

.AccountSetting .mb-7 {
  margin-bottom: 7px;
}

.AccountSetting .mt-n4 {
  margin-top: -4px;
}

.AccountSetting .mt-n9 {
  margin-top: -9px;
}

.AccountSetting .mb-18 {
  margin-bottom: 18px;
}

.AccountSetting .mt-0 {
  margin-top: 0;
}

.AccountSetting .vehicle-type-content {
  gap: 10px;
  display: flex;
}

.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.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 .field .icon, .AccountSetting .setting_section.role_order .FormSection .Star-container .field .icon {
  font-size: 1.1em;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field .to-order, .AccountSetting .setting_section.role_order .FormSection .Star-container .field .to-order {
  color: #3586ed;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field .same-day, .AccountSetting .setting_section.role_order .FormSection .Star-container .field .same-day {
  color: #21ba45;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field .tomorrow, .AccountSetting .setting_section.role_order .FormSection .Star-container .field .tomorrow {
  color: #f2711c;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field .backorder, .AccountSetting .setting_section.role_order .FormSection .Star-container .field .backorder {
  color: #c83628;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field .arrived, .AccountSetting .setting_section.role_order .FormSection .Star-container .field .arrived {
  color: #fbbd08;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field .star-yellow, .AccountSetting .setting_section.role_order .FormSection .Star-container .field .star-yellow {
  color: #f2711c;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field .star-red, .AccountSetting .setting_section.role_order .FormSection .Star-container .field .star-red {
  color: #c83628;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field .star-blue, .AccountSetting .setting_section.role_order .FormSection .Star-container .field .star-blue {
  color: #3586ed;
}

.AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container .field .star-green, .AccountSetting .setting_section.role_order .FormSection .Star-container .field .star-green {
  color: #21ba45;
}

.AccountSetting .setting_section.role_order .FormSection .Star-container, .AccountSetting .setting_section.role_order .FormSection .ShoppingCart-container {
  gap: 16px;
}

.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 .DesktopNotifications .grouped.fields {
  display: grid;
}

.AccountSetting .setting_section .DesktopNotifications-row .column .DesktopNotifications .grouped.fields.two-columns {
  grid-template-columns: repeat(2, 1fr);
}

.AccountSetting .setting_section .DesktopNotifications-row .column .DesktopNotifications .grouped.fields .field > .field {
  margin: 0;
}

.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 {
  gap: 10px;
  padding-left: 0;
  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:before, .AccountSetting .setting_section .DesktopNotifications .field label:after, .AccountSetting .setting_section .PinNotifications .field label:before, .AccountSetting .setting_section .PinNotifications .field label:after {
  margin: 3px 4px 4px;
}

.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;
  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 .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;
}

.AccountSetting .setting_section .customer-waiting-car-in-shop-notification-setting .garage-icon {
  margin-bottom: 2px !important;
  font-size: 10px !important;
}

.AccountSetting .setting_section .customer-waiting-car-in-shop-notification-setting .customer-icon {
  margin-bottom: 2px !important;
  font-size: 8px !important;
}

.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 .padding-container {
  padding: 18px 24px;
}

.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 {
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  max-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(/releases/20261104-123214-8.50.0/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;
}

.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-last-update span.customer-waiting {
  color: #a5673e;
  background-color: #dec8ba;
  border-radius: 4px;
  padding: 3px;
}

.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;
}

.AcsesLogsTable {
  padding: 20px 10px;
}

.AcsesLogsTable .acses-logs-table-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 250px;
  font-size: 12.6px;
  overflow: hidden;
}

@media screen and (width >= 1920px) {
  .AcsesLogsTable .acses-logs-table-ellipsis {
    max-width: 300px;
  }
}

.AcsesLogsTable .acses-logs-table-claire-response-column {
  text-align: center;
  width: 50%;
}

.ui.modal.AcsesResponseModal .header.acses-response-modal-header {
  justify-content: space-between;
  padding: 25px;
}

.AgreementsDashboard .add-button-container {
  width: 100%;
  padding: 20px 22px;
}

.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-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: 12;
  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 .AppointmentDetails-NavigationHeader .AppointmentDetails-NavigationHeader-container .row .sub-row .Appointment-reg-nr {
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  max-width: 160px;
  height: 25px;
  padding: 0 8px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-NavigationHeader .AppointmentDetails-NavigationHeader-container .row .sub-row .Appointment-reg-nr .CopyToClipboard__text {
  font-size: 12.6px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-NavigationHeader .AppointmentDetails-NavigationHeader-container .row .sub-row .Appointment-reg-nr .CopyToClipboard__icon {
  margin-right: 4px;
}

.AppointmentDetails .AppointmentDetails-container .AppointmentDetails-NavigationHeader .AppointmentDetails-NavigationHeader-container .row .sub-row .Appointment-reg-nr .CopyToClipboard__icon i.icon {
  font-size: 12px;
  position: relative;
  bottom: 1px;
  margin: 0 !important;
}

.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-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;
}

.BackordersExportModal__export-file-container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 24px;
  display: flex;
}

.BackordersExportModal__export-modal-close-button-container {
  margin-top: 1px;
}

.BackordersExportModal__export-modal-close-button.button {
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
}

.BackordersExportModal__export-modal-content-text {
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 19px 0;
  font-size: 17px;
  display: flex;
}

.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;
}

.BrandsDashboard {
  padding: 20px 0;
}

.BrandModal {
  width: 100%;
}

.BrandModal .table-cells-padding {
  padding-bottom: 1em;
}

.BrandModal .field-error {
  color: #db2828;
  margin-top: 4px;
  font-size: 12px;
}

.BrandModal .padding-container {
  padding: 2rem;
}

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

.BrandModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.BrandModal .action-buttons-container {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.BrandModal .right-buttons {
  gap: 10px;
  display: flex;
}

.BrandModal .hidden-file-input {
  display: none;
}

.BrandModal .upload-container .upload-view .delete-container i.icon {
  margin: 0;
}

.BrandModal .ui.form .group {
  flex-wrap: wrap;
  gap: 1rem;
  display: flex;
}

.BrandModal .ui.form .fields .field {
  flex: 1 1 0;
  width: 100%;
}

.BrandModal .ui.form .fields .field label {
  margin-bottom: 8px;
}

.BrandGroupsDropdown {
  width: 100%;
}

.BrandGroupsDropdown .ui.dropdown .menu > .item.brand-group-header {
  font-weight: bold !important;
}

.BrandGroupsDropdown .brand-group-item.item {
  padding-left: 2rem !important;
}

.BrandGroupsDropdown .ui.label.brand-group-label {
  font-weight: bold;
}

.BrandGroupsDropdown .ui.label.brand-group-label > .icon {
  margin-right: 6px;
}

.BrandsDashboardTable {
  padding: 0 10px 55px;
}

.BrandsDashboardTable .name-container {
  align-items: center;
  gap: 8px;
  display: flex;
}

.BrandsDashboardTable .active, .BrandsDashboardTable .inactive {
  height: 35px;
  margin-top: -3px;
  margin-left: -12px;
  position: relative;
}

.BrandsDashboardTable .active {
  border-left: 3px solid #21ba45;
}

.BrandsDashboardTable .inactive {
  border-left: 3px solid #f2711c;
}

.BrandsDashboardTable .actions-container {
  justify-content: flex-end;
  gap: 10px;
  padding-right: 5px;
  display: flex;
}

.BrandsDashboardTable .action-button-container, .BrandsDashboardTable .action-add-button-container, .BrandsDashboardTable .action-edit-button-container {
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  display: flex;
}

.BrandsDashboardTable .action-edit-button-container {
  background: #c7eed0;
}

.BrandsDashboardTable .action-button-icon-center {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
}

.BrandsDashboardTable .action-add-button-container {
  color: #fff;
  background: #21ba45;
}

.BrandsDashboardTable .ReactTable {
  table-layout: fixed;
}

.BrandsDashboardTable .th-actions, .BrandsDashboardTable .td-actions {
  width: auto !important;
}

.BrandsDashboardTable .ReactTable .expanded {
  padding: 15px 10px;
}

.BrandsDashboardTable .collapse-container {
  justify-content: center;
  align-items: center;
  display: flex;
}

.BrandsDashboardTable .collapse-container .icon {
  line-height: 1;
}

.BrandsDashboardFilters {
  align-items: center;
  gap: 10px;
  padding: 0 22px 20px;
  display: flex;
}

.BrandsDashboardFilters .ui.basic.button {
  width: 38px;
}

.BrandsDashboardFilters .ui.basic.button i {
  color: #21ba45;
}

.BrandsDashboardFilters .actions {
  gap: 10px;
  display: flex;
}

.BrandsDashboardFilters .filter {
  width: 450px;
}

.BrandsDashboardFilters .file-input {
  display: none;
}

.carDetail-container {
  flex-direction: column;
  padding: 0 20px 22px;
  display: flex;
}

.carDetail-container .carDetail-NavigationHeader {
  z-index: 12;
  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 .CarDetails-cards {
  flex-direction: column;
  gap: 20px;
  display: flex;
}

.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;
}

.CarDetails-loader {
  justify-content: center;
  align-items: center;
  height: calc(100vh - 38px);
  display: flex;
}

.CheckInServices {
  padding: 15px;
}

.CheckInServices .services-header {
  align-items: center;
  height: 40px;
  margin-bottom: 10px;
  display: flex;
}

.CheckInServices .services-header button.ui.icon {
  background-color: #f9fafb;
  border: 1px solid #dededf;
  border-radius: 4px;
  margin-right: 11px;
  padding: 6px 7px;
  line-height: 18px;
}

.CheckInServices .services-header button.ui.icon i.plus {
  font-size: 18px;
}

.CheckInServices .services-header h3 {
  margin: 0;
}

.CheckInServices .services-list-container {
  background: #f2f2f2;
  border-radius: 4px;
  min-height: 200px;
  padding: 11px;
}

.CheckInServices .services-list-container .dealer-service-item-container {
  cursor: pointer;
  opacity: 1;
  display: flex;
}

.CheckInServices .services-list-container .dealer-service-item-container.is-dragging {
  cursor: grabbing;
  opacity: .5;
}

.CheckInServices .services-list-container .ui.relaxed.list:not(.horizontal) > .item:not(:last-child) {
  padding-top: 0;
  padding-bottom: 0;
}

.CheckInServices .services-list-container .dealer-service-item-container .Service.item, .CheckInServices .services-list-container div.Service.item {
  cursor: pointer;
  background: #fff;
  border: 1px solid #d4d4d5;
  border-radius: 4px;
  align-items: center;
  width: 100%;
  min-height: 57px;
  margin-bottom: 15px;
  padding: 15px;
  display: flex;
}

.CheckInServices .services-list-container .dealer-service-item-container .Service.item:first-child, .CheckInServices .services-list-container div.Service.item:first-child {
  border-top: 1px solid #d4d4d5;
}

.CheckInServices .services-list-container .dealer-service-item-container .Service.item:not(:last-child), .CheckInServices .services-list-container div.Service.item:not(:last-child) {
  padding-top: 0;
  padding-bottom: 0;
}

.CheckInServices .services-list-container .dealer-service-item-container .Service.item .content, .CheckInServices .services-list-container div.Service.item .content {
  justify-content: space-between;
  width: 100%;
  font-weight: 800;
  display: flex;
}

.CheckInServices .services-list-container .dealer-service-item-container .Service.item .service-tag, .CheckInServices .services-list-container div.Service.item .service-tag {
  color: #fff;
  border-radius: 4px;
  margin-left: 9px;
  padding: 5px 8px;
  font-size: 12.6px;
  font-weight: 400;
}

.CheckInServices .services-list-container .dealer-service-item-container .Service.item .service-price, .CheckInServices .services-list-container div.Service.item .service-price {
  font-weight: 400;
}

.CheckInServices .drop-placeholder {
  border: 2px dashed #ccc;
  border-radius: 4px;
  margin-bottom: 15px;
  padding: 25px;
}

.Service.drag-overlay {
  cursor: pointer;
  background: #fff;
  border: 1px solid #d4d4d5;
  border-radius: 4px;
  align-items: center;
  margin-bottom: 15px;
  display: flex;
  padding: 15px !important;
}

.Service.drag-overlay:first-child {
  border-top: 1px solid #d4d4d5;
}

.Service.drag-overlay .content {
  justify-content: space-between;
  width: 100%;
  font-weight: 800;
  display: flex;
}

.Service.drag-overlay .service-tag {
  color: #fff;
  border-radius: 4px;
  margin-left: 9px;
  padding: 5px 8px;
  font-size: 12.6px;
  font-weight: 400;
}

.Service.drag-overlay .service-price {
  font-weight: 400;
}

.CheckInServiceModal.ui.modal .content {
  padding: 25px 24px;
}

.CheckInServiceModal.ui.modal .actions {
  justify-content: space-between;
  align-items: center;
  padding: 15px 24px;
  display: flex;
}

.CheckInServiceModal.ui.modal .actions .actions-left {
  gap: 5px;
  display: flex;
}

.CheckInServiceModal.ui.modal .actions .actions-right {
  gap: 15px;
  display: flex;
}

.ChecklistSettingsDashboard {
  padding: 20px 0;
}

.ChecklistSettingsHeader {
  padding: 0 0 20px 22px;
}

.TemplateModal {
  width: 100%;
}

.TemplateModal .table-cells-padding {
  padding-bottom: 1em;
}

.TemplateModal .padding-container {
  padding: 2rem;
}

.TemplateModal .loader-container {
  min-height: 8rem;
}

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

.TemplateModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.TemplateModal .action-buttons-container {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.TemplateModal .right-buttons {
  gap: 10px;
  display: flex;
}

.TemplateModal .ui.form .group {
  flex-wrap: wrap;
  gap: 1rem;
  display: flex;
}

.TemplateModal .ui.form .fields .field {
  flex: 1 1 0;
  width: 100%;
}

.TemplateModal .ui.form .fields .field label {
  margin-bottom: 8px;
}

.TemplateModal .section-title {
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  font-weight: bold;
  display: flex;
}

.TemplateModal .section-title i.icon {
  margin: 0;
}

.TemplateModal .settings-section {
  border-top: 1px solid #2224261a;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.TemplateModal .color-fields-horizontal {
  justify-content: flex-start;
  gap: 3rem;
  display: flex;
}

.TemplateModal .color-fields-horizontal .field {
  margin: 0;
}

.TemplateModal .checkbox-columns {
  grid-template-columns: 1fr 1fr;
  gap: .75rem 2rem;
  display: grid;
}

.TemplateModal .checkbox-columns .checkbox-column {
  flex-direction: column;
  gap: .75rem;
  display: flex;
}

.TemplateModal .checkbox-columns .checkbox-column .field {
  margin: 0;
}

.TemplateModal .color-field {
  align-items: center;
  gap: .75rem;
  display: flex;
}

.TemplateModal .color-field label {
  margin: 0;
  font-weight: normal;
}

.ChecklistTemplatesTable {
  padding: 0 10px 55px;
}

.ChecklistTemplatesTable .actions-container {
  justify-content: flex-end;
  gap: 10px;
  padding-right: 5px;
  display: flex;
}

.ChecklistTemplatesTable .action-button-container, .ChecklistTemplatesTable .action-edit-button-container {
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  display: flex;
}

.ChecklistTemplatesTable .action-edit-button-container {
  background: #c7eed0;
}

.ChecklistsDashboard {
  padding: 15px;
}

.ChecklistsDashboard .checklists-tags-filter {
  margin-bottom: 20px;
}

.ChecklistsDashboard .ChecklistsList .checklists-header {
  align-items: center;
  height: 40px;
  margin-bottom: 10px;
  display: flex;
}

.ChecklistsDashboard .ChecklistsList .checklists-header .ui.small.button.-appointment-status {
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 11px;
}

.ChecklistsDashboard .ChecklistsList .checklists-header .ui.small.button.-appointment-status i.icon {
  width: 1em;
  height: 1em;
  line-height: 1;
}

.ChecklistsDashboard .ChecklistsList .checklists-header h3 {
  margin: 0;
}

.ChecklistsDashboard .ChecklistsList .checklists-container {
  background: #f2f2f2;
  border-radius: 4px;
  flex-direction: column;
  gap: 8px;
  min-height: calc(100vh - 200px);
  padding: 11px;
  display: flex;
}

.ChecklistsDashboard .ChecklistsList .draggable-checklist-item {
  cursor: grab;
}

.ChecklistsDashboard .ChecklistsList .draggable-checklist-item.is-dragging {
  opacity: .5;
}

.ChecklistsDashboard .ChecklistsList .drop-placeholder {
  border: 2px dashed #ccc;
  border-radius: 4px;
  padding: 20px;
}

.ChecklistsDashboard .ChecklistItem {
  cursor: pointer;
  background: #fff;
  border: 1px solid #d4d4d5;
  border-left: 4px solid #21ba45;
  border-radius: 4px;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 4px 10px;
  font-weight: bold;
  display: flex;
}

.ChecklistsDashboard .ChecklistItem.is-inactive {
  border-left-color: #db2828;
}

.ChecklistsDashboard .ChecklistItem .checklist-info {
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 4px 0;
  display: flex;
}

.ChecklistsDashboard .ChecklistItem .checklist-info i.icon {
  height: auto;
  margin: 0;
  font-size: 18px;
}

.ChecklistsDashboard .ChecklistItem .checklist-tag {
  color: #fff;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 400;
}

.ChecklistsDashboard .ChecklistItem .checklist-actions {
  flex-shrink: 0;
  gap: 5px;
  display: flex;
}

.ChecklistsDashboard .ChecklistItem .checklist-actions .ui.small.button.-appointment-status {
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
}

.ChecklistsDashboard .ChecklistItem .checklist-actions .ui.small.button.-appointment-status i.icon {
  width: 1em;
  height: 1em;
  line-height: 1;
}

.AddChecklistModal.ui.modal .content {
  padding: 20px 24px;
}

.AddChecklistModal.ui.modal .actions {
  background: #f9fafb;
  border-top: 1px solid #22242626;
  justify-content: flex-end;
  gap: 15px;
  padding: 15px 24px;
  display: flex;
}

.AddChecklistModal.ui.modal .actions .ui.button {
  margin: 0;
}

.AddQuestionModal.ui.modal .add-question-header {
  align-items: center;
  gap: 20px;
  width: 100%;
  padding-right: 25px;
  display: flex;
}

.AddQuestionModal.ui.modal .add-question-header > span {
  white-space: nowrap;
}

.AddQuestionModal.ui.modal .add-question-header .header-actions {
  flex: 1;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  display: flex;
}

.AddQuestionModal.ui.modal .add-question-header .header-actions .questions-search {
  flex: 2;
}

.AddQuestionModal.ui.modal .add-question-header .header-actions .questions-tags.ui.dropdown {
  flex: 1;
  min-width: 0;
}

.AddQuestionModal.ui.modal .questions-list {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.AddQuestionModal.ui.modal .question-item {
  cursor: pointer;
  background: #fff;
  border: 1px solid #d4d4d5;
  border-left: 4px solid #21ba45;
  border-radius: 4px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  display: flex;
}

.AddQuestionModal.ui.modal .question-item.is-inactive {
  border-left-color: #db2828;
}

.AddQuestionModal.ui.modal .question-item .question-tag {
  color: #fff;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
}

.EditChecklistModal.ui.modal .scrolling.content {
  padding: 25px 24px;
}

.EditChecklistModal.ui.modal .actions {
  background: #f9fafb;
  border-top: 1px solid #22242626;
  justify-content: space-between;
  align-items: center;
  padding: 15px 24px;
  display: flex;
}

.EditChecklistModal.ui.modal .actions .actions-left, .EditChecklistModal.ui.modal .actions .actions-right {
  gap: 10px;
  display: flex;
}

.EditChecklistModal.ui.modal .actions .actions-left .ui.button, .EditChecklistModal.ui.modal .actions .actions-right .ui.button {
  margin: 0;
}

.EditChecklistModal.ui.modal .checklist-toggles.fields {
  flex-wrap: wrap;
  gap: 25px;
  margin: 1em 0;
}

.EditChecklistModal.ui.modal .checklist-toggles.fields .field {
  margin: 0;
  padding: 0;
}

.EditChecklistModal.ui.modal .question-group.ui.segment {
  box-shadow: none;
  background: #f2f2f2;
  margin: 0 0 10px;
}

.EditChecklistModal.ui.modal .question-group.ui.segment .question-group-header {
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  display: flex;
}

.EditChecklistModal.ui.modal .question-group.ui.segment .question-group-header .question-group-name {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.EditChecklistModal.ui.modal .question-group.ui.segment .question-group-header .question-group-name .ui.input > input {
  background: none;
  border-color: #0000;
  padding-left: 0;
  font-weight: bold;
}

.EditChecklistModal.ui.modal .question-group.ui.segment .question-group-header .question-group-name .ui.input > input:hover, .EditChecklistModal.ui.modal .question-group.ui.segment .question-group-header .question-group-name .ui.input > input:focus {
  background: #fff;
  border-color: #dededf;
  padding-left: 10px;
}

.EditChecklistModal.ui.modal .question-group.ui.segment .question-group-header .question-group-actions {
  gap: 5px;
  display: flex;
}

.EditChecklistModal.ui.modal .question-group.ui.segment .question-group-header .question-group-actions .ui.small.button.-appointment-status {
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
}

.EditChecklistModal.ui.modal .question-group.ui.segment .question-group-header .question-group-actions .ui.small.button.-appointment-status i.icon {
  width: 1em;
  height: 1em;
  line-height: 1;
}

.EditChecklistModal.ui.modal .question-group.ui.segment .question-item {
  background: #fff;
  border: 1px solid #d4d4d5;
  border-radius: 4px;
  align-items: center;
  gap: 15px;
  min-height: 40px;
  margin-bottom: 8px;
  padding: 5px 15px;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  box-shadow: 0 2px 3px #00000029;
}

.EditChecklistModal.ui.modal .question-group.ui.segment .question-item.is-sortable {
  cursor: grab;
}

.EditChecklistModal.ui.modal .question-group.ui.segment .question-item.is-dragging {
  opacity: .5;
}

.EditChecklistModal.ui.modal .question-group.ui.segment .question-item i.icon.xmark {
  -webkit-text-stroke: 1.5px;
  cursor: pointer;
  margin: 0;
  font-size: 16px;
}

.EditChecklistModal.ui.modal .add-group-button.ui.button {
  margin-top: 10px;
}

.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 .service-tracker-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.customer-com-wrapper .service-tracker-header .field {
  margin: 0;
}

.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%;
}

.customer-com-wrapper .field-error {
  color: #db2828;
  margin-top: 4px;
  font-size: 12px;
}

.color-picker {
  align-items: center;
  display: flex;
}

.checkbox-label {
  padding-left: 8px;
}

.confirmation-emails-field {
  align-self: flex-start;
}

.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;
}

.DealerOverviewHeader {
  z-index: 5;
  background: #fff;
  padding-top: 24px;
  position: sticky;
  top: 0;
}

.DealerOverviewHeader .row {
  flex-direction: row;
  justify-content: space-between;
  gap: 24px;
  display: flex;
}

.DealerOverviewHeader .row.center {
  border: 1px solid #e2e2e3;
  border-radius: 10px;
  align-items: center;
  box-shadow: 0 3px 6px #00000029;
}

.DealerOverviewHeader .tabs {
  z-index: 2;
  position: sticky;
  top: 39px;
}

.DealerOverviewHeader .tabs .ui.secondary.pointing.menu {
  border: 0;
  justify-content: flex-start;
}

.DealerOverviewHeader .full {
  width: 100%;
}

.DealerOverviewHeader .save {
  margin-right: 20px;
}

.DealerOverviewHeader .save button {
  justify-content: center;
  align-items: center;
  display: flex;
}

.Network {
  margin-bottom: 20px;
}

.Network .Segment {
  color: gray;
  float: right;
  font-size: 90%;
}

.Network .align-self-end {
  align-self: flex-end;
}

.Network .dns-record-status {
  align-items: center;
  gap: 6px;
  font-weight: 600;
  display: flex;
}

.Network .fields.flex-start {
  align-items: flex-start;
}

.Network .domain-container {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.Network .buttons-container {
  gap: 10px;
  display: flex;
}

.Network .dns-record-segment.ui.segment {
  padding-left: 2em;
}

.Network .dns-record-segment.-verified {
  border-color: #20ba45;
}

.Network .dns-record-segment.-invalid {
  border-color: #767676;
}

.Network .dns-record-grid.ui.grid > .row {
  padding: 0;
}

.Network .dns-record-grid.ui.grid > .row > .column.-no-padding-left {
  padding-left: 0;
}

.Network .dns-record-grid.ui.grid > .row > .column.-no-padding-right {
  padding-right: 0;
}

.Network .dns-record-value {
  word-break: break-all;
}

.Network .dns-record-actions {
  justify-content: space-between;
  gap: 10px;
  display: flex;
}

.ui.form .SystemInfo {
  align-items: flex-start;
}

.ui.form .SystemInfo .sys-info-field {
  margin-top: 1rem;
}

.ui.form .ThresholdSettings .dealer-overview-subheading {
  font-size: 15px;
}

.ThresholdSettings .threshold-columns {
  align-items: flex-start;
  gap: 100px;
  display: flex;
}

.ThresholdSettings .threshold-column {
  flex-direction: column;
  display: flex;
}

.ThresholdSettings .threshold-row {
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  display: flex;
}

.ThresholdSettings .threshold-row .threshold-inputs {
  display: flex;
}

.ThresholdSettings .threshold-row .field {
  margin: 0;
}

.ThresholdSettings .threshold-row input {
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
  width: 65px !important;
  height: 25px !important;
}

.ThresholdSettings .threshold-row input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ThresholdSettings .threshold-row input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ThresholdSettings .threshold-row input {
  appearance: textfield;
}

.ThresholdSettings .threshold-row .threshold-input-low {
  padding-right: 0;
  margin-left: 0 !important;
}

.ThresholdSettings .threshold-row .threshold-input-low input {
  border-color: #ff4d4f !important;
  border-radius: 4px 0 0 4px !important;
}

.ThresholdSettings .threshold-row .threshold-input-high {
  margin-left: 0;
  padding-left: 0;
}

.ThresholdSettings .threshold-row .threshold-input-high input {
  border-left: 0;
  border-color: #52c41a !important;
  border-radius: 0 4px 4px 0 !important;
}

.ThresholdSettings .threshold-row label {
  margin-left: 8px;
}

.ThresholdSettings .threshold-row .threshold-label-error {
  color: #ff4d4f;
}

.ui.form .fields.SnoozeAndWarranty {
  align-items: flex-start;
}

.ui.form .fields.SnoozeAndWarranty .dealer-overview-subheading {
  font-size: 15px;
}

.ui.form .OneI .onei-field {
  margin-top: 1rem;
}

.ui.form .PlanIT .planit-field {
  margin-top: 1rem;
}

.ui.form .fields.twilio-mt, .ui.form .button.twilio-mt {
  margin-top: 1rem;
}

.twilio-action {
  justify-self: flex-end;
}

.twilio-action-spaced {
  margin-right: 10px;
}

.DealerDetailsHeader {
  z-index: 5;
  background: #fff;
  padding-top: 24px;
  position: sticky;
  top: 0;
}

.DealerDetailsHeader .row {
  flex-direction: row;
  justify-content: space-between;
  gap: 24px;
  display: flex;
}

.DealerDetailsHeader .row.center {
  border: 1px solid #e2e2e3;
  border-radius: 10px;
  align-items: center;
  box-shadow: 0 3px 6px #00000029;
}

.DealerDetailsHeader .tabs {
  z-index: 2;
  position: sticky;
  top: 39px;
}

.DealerDetailsHeader .tabs .ui.secondary.pointing.menu {
  border: 0;
  justify-content: flex-start;
}

.DealerDetailsHeader .full {
  width: 100%;
}

.DealerDetailsHeader .actions {
  align-items: center;
  gap: 12px;
  margin-right: 20px;
  display: flex;
}

.DealerDetailsHeader .actions button {
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
}

.ui.modal.ExactAccountModal > div.header {
  justify-content: space-between;
  padding: 25px !important;
}

.ui.modal.ExactAccountModal > div.actions > .action-buttons-container {
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  display: flex;
}

.ui.modal.ExactAccountModal .exact-account-field-error {
  color: #db2828;
  margin-top: 4px;
  font-size: 12px;
}

.ui.modal.ExactAccountModal .exact-account-recipient > .fields {
  margin-bottom: 0;
}

.ui.modal.ExactSearchModal > div.header {
  justify-content: space-between;
  padding: 25px !important;
}

.ui.modal.ExactSearchModal .exact-search-results {
  margin-top: 20px;
}

.ui.modal.ExactSearchModal .exact-search-linked-to {
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

.ui.modal.ExactSearchModal .exact-search-action-cell {
  justify-content: flex-end;
  margin-right: 10px;
  display: flex;
}

.ui.modal.ExactSearchModal .exact-search-action-cell button.ui.button {
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 25px;
  padding: 0;
  display: flex;
}

.DealerDetails {
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
  padding: 0 40px 24px;
  display: flex;
}

.DealerDetails .fields > .field:only-child {
  padding-right: 12px !important;
}

.DealerDetails .fields.dealer-details-columns {
  align-items: flex-start;
}

.DealerDetails .dealer-details-section {
  border: 1px solid #e0e1e2;
  border-radius: 10px;
  padding: 19px 24px;
}

.DealerDetails .dealer-details-section .dealer-details-subheading {
  margin-top: 15px;
  margin-bottom: 13px;
  font-size: 15px;
  font-weight: 700;
}

.DealerDetails .dealer-details-section .dealer-details-button-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  display: flex;
}

.DealerDetails .section-title {
  align-items: center;
  gap: 7px;
  padding-bottom: 10px;
  font-size: 18px;
  display: flex;
}

.DealerDetails .section-title .section-title-text {
  font-size: 18px;
  font-weight: bold;
}

.DealerDetails .dealer-details-actions {
  justify-content: flex-start;
  display: flex;
}

.ui.form .dealer-details-section .fields .wide.field:first-child {
  padding-left: .5em;
}

.ui.form .DealerDetails .dealer-details-column-field {
  margin-top: 1rem;
}

.ui.form .DealerDetails .dealer-details-column-placeholder {
  min-height: 24px;
}

.ui.form .DealerDetails .ui.action.input > button.ui.button {
  align-self: stretch;
  height: auto;
}

.AddEditDealerDocumentationModal .padding-container {
  padding: 1.5rem 2rem;
}

.AddEditDealerDocumentationModal .documentation-modal-title {
  font-family: Lato, sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.AddEditDealerDocumentationModal .quill-error .ql-toolbar.ql-snow {
  border: 1px solid #e0b4b4;
}

.AddEditDealerDocumentationModal .quill-error .ql-container.ql-snow {
  border: 1px solid #e0b4b4;
  border-top: 0;
}

.AddEditDealerDocumentationModal .action-buttons-container {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.AddEditDealerDocumentationModal .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.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;
}

.DealerDocumentationsFilters {
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  display: flex;
}

.DealerDocumentation {
  flex-direction: column;
  padding: 20px 20px 22px;
  display: flex;
}

.DealerDocumentation .dealer-toolbar-container {
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 0 10px 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-bottom: 55px;
}

.InvoiceHistoryTable table {
  overflow: hidden;
  border-radius: 6px !important;
}

.InvoicingDisabledLocationsMessage {
  margin: 0 20px 9px;
}

.InvoicingDisabledLocationsMessage .header-title {
  font: bold 13px / 20px Lato;
}

.InvoicingDisabledLocationsMessage .header-text {
  font: 13px / 20px Lato;
}

.InvoicingDisabledLocationsMessage .icon-placement {
  margin-right: 15px;
}

.InvoicingDisabledLocationsMessage .message-container {
  background-color: #fff;
}

.DealerLicenseOverview .filters {
  margin: 9px 0;
}

.DealerLicenseOverview .filters .ui.grid {
  margin: 0 9px 0 22px;
}

.DealerLicenseOverview .filters .no-left-gutter {
  padding-left: 0 !important;
}

.DealerLicenseOverview .filters .reset-button-container {
  justify-self: end;
  display: flex;
}

.LocationDetailHeader {
  z-index: 5;
  background: #fff;
  padding-top: 24px;
  position: sticky;
  top: 0;
}

.LocationDetailHeader .row {
  flex-direction: row;
  justify-content: space-between;
  gap: 24px;
  display: flex;
}

.LocationDetailHeader .row.center {
  border: 1px solid #e2e2e3;
  border-radius: 10px;
  align-items: center;
  box-shadow: 0 3px 6px #00000029;
}

.LocationDetailHeader .tabs {
  z-index: 2;
  position: sticky;
  top: 39px;
}

.LocationDetailHeader .tabs .ui.secondary.pointing.menu {
  border: 0;
  justify-content: flex-start;
}

.LocationDetailHeader .full {
  width: 100%;
}

.LocationDetailHeader .actions {
  align-items: center;
  gap: 12px;
  margin-right: 20px;
  display: flex;
}

.LocationDetailHeader .actions .field {
  white-space: nowrap;
  margin: 0;
}

.LocationDetailHeader .actions button {
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
}

.DealerLocationDetails {
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
  padding: 0 40px 24px;
  display: flex;
}

.DealerLocationDetails .fields > .field:only-child {
  padding-right: 12px !important;
}

.DealerLocationDetails .dealer-location-section {
  border: 1px solid #e0e1e2;
  border-radius: 10px;
  padding: 19px 24px;
}

.DealerLocationDetails .dealer-location-section .dealer-location-subheading {
  margin-top: 15px;
  margin-bottom: 13px;
  font-size: 15px;
  font-weight: 700;
}

.DealerLocationDetails .dealer-location-section .dealer-location-subheading .dealer-location-subheading-note {
  margin: 0;
  font-weight: 400;
}

.DealerLocationDetails .dealer-location-section .dealer-location-subheading-note {
  color: gray;
  margin-top: -8px;
  margin-bottom: 13px;
  font-size: 12px;
}

.DealerLocationDetails .dealer-location-section label > i.icon, .DealerLocationDetails .dealer-location-section .dealer-location-subheading > i.icon {
  margin-right: 8px;
}

.DealerLocationDetails .dealer-location-section .dealer-location-field-error {
  color: #db2828;
  margin-top: 4px;
  font-size: 12px;
}

.DealerLocationDetails .dealer-location-section .dealer-location-readonly-value {
  word-break: break-all;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  display: flex;
}

.DealerLocationDetails .dealer-location-section .dealer-location-readonly-value .icon {
  cursor: pointer;
}

.DealerLocationDetails .dealer-location-section .dealer-location-button-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  display: flex;
}

.DealerLocationDetails .dealer-location-section .dealer-location-credentials {
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  display: flex;
}

.DealerLocationDetails .dealer-location-section .dealer-location-credential {
  cursor: pointer;
  border: 1px solid #e0e1e2;
  border-radius: 6px;
  padding: 8px 14px;
}

.DealerLocationDetails .dealer-location-section .dealer-location-timeslot {
  align-items: center;
  gap: 12px;
  display: flex;
}

.DealerLocationDetails .section-title {
  align-items: center;
  gap: 7px;
  padding-bottom: 10px;
  display: flex;
}

.DealerLocationDetails .section-title .section-title-text {
  font-size: 18px;
  font-weight: bold;
}

.DealerLocationDetails .hidden-file-input {
  display: none;
}

.DealerLocationDetails .dealer-location-columns {
  gap: 24px;
  display: flex;
}

.DealerLocationDetails .dealer-location-columns .dealer-location-column {
  flex: 1;
  min-width: 0;
}

.DealerLocationDetails .dealer-location-columns.dealer-location-columns-paired {
  flex-wrap: wrap;
}

.DealerLocationDetails .dealer-location-columns.dealer-location-columns-paired .dealer-location-column {
  flex: 0 0 calc(50% - 12px);
}

.DealerLocationDetails .dealer-location-actions {
  justify-content: flex-start;
  display: flex;
}

.ui.form .dealer-location-section .fields .wide.field:first-child {
  padding-left: .5em;
}

.DealerOverviewDashboard {
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
  padding: 0 40px 24px;
  display: flex;
}

.DealerOverviewDashboard .fields > .field:only-child {
  padding-right: 12px !important;
}

.DealerOverviewDashboard .fields.planning-integrations-group {
  align-items: flex-start;
}

.DealerOverviewDashboard .dealer-overview-section {
  border: 1px solid #e0e1e2;
  border-radius: 10px;
  padding: 19px 24px;
}

.DealerOverviewDashboard .dealer-overview-section > h3 {
  align-items: center;
  gap: 8px;
  display: flex;
}

.DealerOverviewDashboard .dealer-overview-section .dealer-overview-subheading {
  margin-top: 15px;
  margin-bottom: 13px;
  font-size: 15px;
  font-weight: 700;
}

.DealerOverviewDashboard .section-title {
  align-items: center;
  gap: 7px;
  padding-bottom: 10px;
  font-size: 18px;
  display: flex;
}

.DealerOverviewDashboard .section-title .section-title-text {
  font-size: 18px;
  font-weight: bold;
}

.ui.form .dealer-overview-section .fields .wide.field:first-child {
  padding-left: .5em;
}

.AppointmentSurveyReport .table-container {
  margin-top: 15px;
}

.AppointmentSurveyReport .th-star_rating_feedback, .AppointmentSurveyReport .td-star_rating_feedback {
  padding-left: 40px;
  text-align: left !important;
}

.AppointmentSurveyReport .feedback-cell {
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: default;
  max-width: 250px;
  display: block;
  overflow: hidden;
}

.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;
}

.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;
}

.SimplePieChart {
  margin: auto;
}

.SimplePieChart .simple-pie-chart-legend {
  column-gap: 10px;
  list-style-type: square;
  display: grid;
}

.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;
}

.ui.modal.CreateDealerModal > div.header {
  padding: 25px !important;
}

.ui.modal.CreateDealerModal > div.header .header-container {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  display: flex;
}

.ui.modal.CreateDealerModal > div.actions > .action-buttons-container {
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  display: flex;
}

.ui.modal.CreateLocationModal > div.header {
  padding: 25px !important;
}

.ui.modal.CreateLocationModal > div.header .header-container {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  display: flex;
}

.ui.modal.CreateLocationModal .fields > .field:only-child {
  padding-right: 12px !important;
}

.ui.modal.CreateLocationModal > div.actions > .action-buttons-container {
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  display: flex;
}

.ui.modal.DealerInfoModal > div.header {
  justify-content: space-between;
  align-items: center;
  display: flex;
  padding: 25px !important;
}

.ui.modal.DealerInfoModal > div.content .row {
  border-bottom: 1px solid #e2e2e3;
  padding: 8px 0;
  display: flex;
}

.ui.modal.DealerInfoModal > div.content .row span:first-child {
  flex: 0 0 50%;
  font-weight: 600;
}

.ui.modal.DealerInfoModal > div.content .row span:nth-child(2) {
  text-align: right;
  word-break: break-word;
  flex: 1;
  margin-left: 1em;
}

.ui.modal.DealerInfoModal > div.content .row:last-child {
  border-bottom: none;
}

.DealersDashboardFilters {
  align-items: stretch;
  gap: 10px;
  display: flex;
}

.DealersDashboardFilters.filters-toolbar-container {
  margin: 0;
  padding: 22px;
}

.DealersDashboardFilters button.ui.basic.button.add-btn {
  height: auto;
}

.DealersDashboardFilters button.ui.basic.button.expand-btn {
  white-space: nowrap;
  align-items: center;
  gap: 10px;
  height: auto;
  padding: 0 16px;
  display: inline-flex;
}

.DealersDashboardFilters button.ui.basic.button.expand-btn i.icon {
  color: #21ba45;
  width: auto;
  margin: 0;
}

.DealersDashboardFilters .expand-text {
  margin-left: 14px;
}

.DealersDashboardFilters .status-dropdown.ui.selection.dropdown {
  flex: 0 0 220px;
  align-items: center;
  display: flex;
}

.DealersDashboardTable {
  padding: 0 10px 55px;
}

.DealersDashboardTable .name-container {
  align-items: center;
  gap: 8px;
  display: flex;
}

.DealersDashboardTable .name-container > .active, .DealersDashboardTable .name-container > .inactive {
  height: 35px;
  margin-top: -3px;
  margin-left: -12px;
  position: relative;
}

.DealersDashboardTable .name-container > .active {
  border-left: 3px solid #21ba45;
}

.DealersDashboardTable .name-container > .inactive {
  border-left: 3px solid #db2828;
}

.DealersDashboardTable .collapse-container {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  display: flex;
}

.DealersDashboardTable .collapse-container .icon {
  line-height: 1;
}

.DealersDashboardTable .invoicing-container {
  align-items: center;
  gap: 6px;
  display: inline-flex;
  position: relative;
}

.DealersDashboardTable .invoicing-container .ui.label {
  margin: 0 0 0 6px;
  position: absolute;
  left: 100%;
}

.DealersDashboardTable .importer-container {
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: flex;
}

.DealersDashboardTable .th-invoicing, .DealersDashboardTable .td-invoicing, .DealersDashboardTable .th-importer_version, .DealersDashboardTable .td-importer_version, .DealersDashboardTable .th-bad_imports {
  text-align: center;
}

.DealersDashboardTable .td-bad_imports .ui.circular.label {
  margin: 0 auto;
}

.DealersDashboardTable .td-sys_admin_name, .DealersDashboardTable .td-sys_admin_email, .DealersDashboardTable .td-sys_admin_phone, .DealersDashboardTable .td-dms_server_info, .DealersDashboardTable .td-network_info {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.DealersDashboardTable .stale-import {
  color: #db2828;
}

.DealersDashboardTable .pointer {
  cursor: pointer;
}

.DealersDashboardTable .actions-container {
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-right: 5px;
  display: flex;
}

.DealersDashboardTable .action-button-container, .DealersDashboardTable .action-add-button-container {
  cursor: pointer;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  display: flex;
}

.DealersDashboardTable .action-add-button-container {
  color: #fff;
  background: #21ba45;
}

.DealersDashboardTable .action-button-icon-center {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
}

.DealersDashboardTable .ReactTable {
  table-layout: fixed;
}

.DealersDashboardTable .th-actions, .DealersDashboardTable .td-actions {
  width: auto !important;
}

.DealersDashboardTable .ReactTable .expanded {
  padding: 15px 10px;
}

.ui.modal.DealersDashboardModal > div.header {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  display: flex;
  padding: 25px !important;
}

.ui.modal.DealersDashboardModal > div.header .header-title {
  font-size: 16px;
  font-weight: 600;
}

.ui.modal.DealersDashboardModal > div.content .last-import {
  text-align: right;
  margin-bottom: 12px;
  font-size: 13px;
}

.ui.modal.DealersDashboardModal > div.content .row {
  border-bottom: 1px solid #e2e2e3;
  padding: 8px 0;
  display: flex;
}

.ui.modal.DealersDashboardModal > div.content .row span:first-child {
  flex: 0 0 50%;
  font-weight: 600;
}

.ui.modal.DealersDashboardModal > div.content .row span:nth-child(2) {
  text-align: right;
  word-break: break-word;
  flex: 1;
  margin-left: 1em;
}

.ui.modal.DealersDashboardModal > div.content .row:last-child {
  border-bottom: none;
}

.DevicesDashboardFilters .toolbar-container {
  align-items: flex-start;
  margin: 9px 9px 5px 0;
  display: flex;
}

.DevicesDashboardFilters .toolbar-grid {
  width: 100%;
  margin: 0 9px 0 22px;
}

.DevicesDashboardFilters .toolbar-export {
  gap: 15px;
  margin-right: 22px;
  padding: 1rem;
  display: flex;
}

.DevicesDashboardTable {
  padding: 0 10px 55px;
}

.DevicesDashboardTable .sortable-header {
  cursor: pointer;
  align-items: baseline;
  gap: 4px;
  display: flex;
}

.DevicesDashboardTable .sortable-header .inactive {
  color: #ccc;
}

.DevicesDashboardTable .user-card-container {
  justify-content: flex-end;
  margin-right: 12px;
  display: flex;
}

.DevicesDashboardTable .user-card-user {
  color: #fff;
  background-color: #21ba45;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 25px;
  display: flex;
}

.DevicesDashboardTable .user-card-icon.icon {
  color: #fff;
  margin: 4px auto auto;
}

.ui.equal.width.grid.ColumnsFilter {
  flex: none;
  padding: 22px;
}

.DMSCapabilitiesTable {
  contain: paint;
  flex-direction: column;
  flex: auto;
  min-height: 0;
  padding: 0 10px 55px;
  display: flex;
  overflow-x: auto;
}

.DMSCapabilitiesTable .ReactTable-wrapper {
  flex-direction: column;
  flex: auto;
  align-items: flex-start;
  min-height: 0;
  display: flex;
}

.DMSCapabilitiesTable .ReactTable-body {
  border-top: 1px solid #e0e1e2;
  border-left: 2px solid #e0e1e2;
  border-radius: 4px;
  flex: auto;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  overflow: auto;
}

.DMSCapabilitiesTable .ReactTable {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
}

.DMSCapabilitiesTable th, .DMSCapabilitiesTable td {
  border-bottom: 1px solid #e0e1e2;
  padding: 10px 12px;
  line-height: 19px;
}

.DMSCapabilitiesTable tbody tr:last-child td {
  border-bottom: none;
}

.DMSCapabilitiesTable thead th {
  z-index: 4;
  background-color: #f9fafb;
  font-weight: 900;
  position: sticky;
  top: 0;
}

.DMSCapabilitiesTable th.th-field, .DMSCapabilitiesTable td.td-field {
  z-index: 1;
  background-color: #fff;
  border-right: 1px solid #e0e1e2;
  position: sticky;
  left: 0;
  box-shadow: -1px 0 #fff;
}

.DMSCapabilitiesTable th.th-field {
  z-index: 5;
  background-color: #fff;
}

.DMSCapabilitiesTable th:not(.th-field), .DMSCapabilitiesTable td:not(.td-field) {
  text-align: center;
  white-space: nowrap;
}

.DMSCapabilitiesTable tbody tr:hover {
  cursor: default;
  background-color: #0000;
}

.DMSCapabilitiesTable tr:has(.category-row) {
  background-color: #f9fafb;
  box-shadow: -1px 0 #f9fafb;
}

.DMSCapabilitiesTable tr:has(.category-row) td {
  z-index: 2;
  background-color: #f9fafb;
  position: sticky;
  top: 40px;
}

.DMSCapabilitiesTable tr:has(.category-row) td.td-field {
  z-index: 3;
  background-color: #f9fafb;
}

.DMSCapabilitiesTable tr:has(.category-row):hover {
  background-color: #f9fafb;
}

.DMSCapabilitiesTable .spacer-row {
  height: 19px;
  display: block;
}

.DMSCapabilitiesTable .category-row {
  font-weight: 900;
}

.DMSCapabilitiesTable .action-row {
  font-weight: 700;
}

.DMSCapabilitiesTable .field-row {
  cursor: default;
  padding-left: 12px;
}

.DMSCapabilitiesTable .icon {
  margin: 0 !important;
}

.DMSCapabilitiesTable .icon.dms-capability-supported {
  color: #21ba45;
}

.DMSCapabilitiesTable .icon.dms-capability-not-supported {
  color: #ff0202;
}

.DMSCapabilitiesTable .icon.dms-capability-partially-supported {
  color: #ffba39;
}

.DMSCapabilities {
  flex-direction: column;
  height: 100%;
  display: flex;
}

.QueryEditor {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.QueryEditor .query-name-input {
  height: 40px;
}

.QueryEditor .editor-card {
  background: #282a36;
  border-radius: 4px;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.QueryEditor .run-button-wrapper {
  padding: 10px 12px;
}

.QueryEditor .run-button-wrapper > button.ui.button {
  border-radius: 4px;
  height: 2.6em;
  margin: 0;
}

.QueryHistoryTable {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.QueryHistoryTable .ReactTable-body {
  border-bottom: 1px solid #e0e0e0;
  max-height: calc(35vh + 2px);
  overflow: hidden auto;
}

.QueryHistoryTable .ReactTable {
  table-layout: fixed;
  width: 100%;
}

.QueryHistoryTable thead th {
  z-index: 1;
  background: #fff;
  position: sticky;
  top: 0;
}

.QueryHistoryTable th, .QueryHistoryTable td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.QueryHistoryTable tr:has(.row-selected) {
  background-color: #ededed;
}

.QueryResult {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.QueryResult p, .QueryResult .query-result-header {
  font-size: 1.5rem;
}

.QueryResult .ReactTable-body {
  border-bottom: 1px solid #e0e0e0;
  max-height: 360px;
  overflow: auto;
}

.QueryResult thead th {
  z-index: 1;
  background: #fff;
  position: sticky;
  top: 0;
}

.QueryResult td, .QueryResult th {
  white-space: pre;
}

.CustomQueriesDashboard {
  flex-direction: column;
  gap: 20px;
  padding: 20px 24px;
  display: flex;
}

.CustomQueriesDashboard .header-row {
  width: 500px;
}

.CustomQueriesDashboard .content-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  display: grid;
}

.CustomQueriesDashboard .editor-column {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.CustomQueriesDashboard .history-column {
  flex-direction: column;
  gap: 15px;
  padding-top: 17px;
  display: flex;
}

.CustomQueriesDashboard .history-title {
  font-size: 16px;
  font-weight: bold;
}

.CustomQueriesDashboard .result-column {
  border-top: 1px solid #e0e0e0;
  grid-column: span 2;
  padding-top: 15px;
}

.DMSv3MonitoringTable {
  padding: 0 10px 55px;
}

.DMSv3MonitoringTable .dmsv3-monitoring-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 120px;
  overflow: hidden;
}

@media screen and (width >= 1920px) {
  .DMSv3MonitoringTable .dmsv3-monitoring-ellipsis {
    max-width: 180px;
  }
}

.DMSv3MonitoringTable .date-no-wrap {
  white-space: nowrap;
}

.DMSv3MonitoringTable .ui.label.severity-log {
  color: #fff;
  background-color: gray;
}

.DMSv3MonitoringTable .ui.label.severity-warning {
  color: #fff;
  background-color: #ffba39;
}

.DMSv3MonitoringTable .ui.label.severity-error {
  color: #fff;
  background-color: #ff0202;
}

.DMSv3MonitoringTable .ui.label.severity-critical {
  color: #fff;
  background-color: #000;
}

.DMSv3MonitoringTable .ui.label .icon {
  margin-right: 4px !important;
}

.DMSv3MonitoringTable .dmsv3-monitoring-message {
  white-space: pre-line;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 400px;
  padding: 5px 0;
}

@media screen and (width >= 1920px) {
  .DMSv3MonitoringTable .dmsv3-monitoring-message {
    max-width: 800px;
  }
}

.ui.equal.width.grid.DMSv3MonitoringFilters {
  padding: 22px;
}

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

.AddEditDealerModal .padding-container {
  padding: 18px 24px;
}

.AddEditDealerModal .actions-buttons-main-container {
  justify-content: space-between;
  display: flex;
}

.AddEditDealerModal .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.AddEditDealerModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.AddEditDealerModal .header-container {
  justify-content: space-between;
  padding: 7px 0;
  display: flex;
}

.AddEditDealerModal .checkboxes-container {
  gap: 28px;
  margin-top: 28px;
  display: flex;
}

.AddEditDealerModal .dms-config-section .ui.fitted.divider {
  margin: 20px 0;
}

.AddEditDealerModal .field-error {
  color: #db2828;
  margin-top: 4px;
  font-size: 12px;
}

.AddEditLocationModal .padding-container {
  padding: 18px 24px;
}

.AddEditLocationModal .actions-buttons-main-container {
  justify-content: space-between;
  display: flex;
}

.AddEditLocationModal .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.AddEditLocationModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.AddEditLocationModal .header-container {
  justify-content: space-between;
  padding: 7px 0;
  display: flex;
}

.AddEditLocationModal .checkboxes-container {
  gap: 28px;
  display: flex;
}

.AddEditLocationModal .dms-config-section .ui.fitted.divider {
  margin: 20px 0;
}

.AddEditLocationModal .purge-delete-container {
  gap: 10px;
  display: flex;
}

.AddEditLocationModal .remove-dms-config-container {
  margin-top: 18px;
}

.AddEditLocationModal .add-dms-config-container {
  justify-content: flex-end;
  display: flex;
}

.AddEditLocationModal .field-error {
  color: #db2828;
  margin-top: 4px;
  font-size: 12px;
}

.DMSv3SettingsTable {
  padding: 20px 10px 10px;
}

.DMSv3SettingsTable .ReactTable {
  table-layout: fixed;
}

.DMSv3SettingsTable .ReactTable .expanded-row-content > td {
  padding-left: 0;
}

.DMSv3SettingsTable .ReactTable .expanded {
  padding: 15px 10px;
}

.DMSv3SettingsTable .action-add-button-container {
  color: #fff;
  float: right;
  background: #21ba45;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  margin-right: 10px;
  display: flex;
}

.DMSv3SettingsTable .action-button-icon-center {
  margin-bottom: 4px;
  margin-left: -1px;
}

.DMSv3SettingsTable .table-expand-button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.DMSv3SettingsTable .collapse-container {
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  display: flex;
}

.DMSv3SettingsTable .dealer-text {
  padding-left: 12px;
}

.DMSv3SettingsTable .td-dealer {
  padding-left: 0;
}

.DMSv3SettingsDashboard .toolbar {
  gap: 15px;
  margin: 21px 9px 0 22px;
  display: flex;
}

.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;
}

.ApiErrors {
  flex-direction: column;
  height: 100%;
  padding: 20px;
  display: flex;
}

.ApiErrors .filters-container {
  z-index: 2;
  padding-bottom: 20px;
}

.ApiErrors .pagination {
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 30px;
  display: flex;
}

.ExactFailuresTable {
  width: 100%;
  position: relative;
}

.ExactFailuresTable .ReactTable {
  table-layout: fixed;
  width: 100%;
  min-width: 1200px;
}

.ExactFailuresTable .ReactTable-wrapper {
  width: 100%;
  overflow-x: hidden;
}

.ExactFailuresTable .ReactTable-body {
  max-height: 80vh;
  overflow-y: auto;
}

.ExactFailuresTable .ReactTable thead {
  z-index: 1;
  position: sticky;
  top: 0;
}

.ExactFailuresTable .ReactTable th, .ExactFailuresTable .ReactTable td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.Billing .filters-container {
  padding: 20px 20px 0;
}

.BillingTable {
  padding: 20px;
}

.BillingTable .button-container {
  justify-content: flex-end;
  padding-right: 10px;
  display: flex;
}

.BillingTable button.ui {
  align-items: center;
  justify-content: baseline;
  letter-spacing: 0;
  height: 25px;
  padding: 4px 8px;
  display: flex;
}

.FailedInvoicesModal .header {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 20px;
  display: flex;
}

.FailedInvoicesModal .button-container {
  justify-content: flex-end;
  gap: 10px;
  padding-right: 10px;
  display: flex;
}

.FailedInvoicesModal button.ui {
  align-items: center;
  justify-content: baseline;
  letter-spacing: 0;
  height: 25px;
  padding: 4px 8px;
  display: flex;
}

.InvoiceHistoryModal.ui.modal .modal-header {
  justify-content: space-between;
  align-items: center;
  padding-right: 20px;
  display: flex;
}

.ExactMonitoring .page-selection-container {
  margin-top: 20px;
  padding-left: 20px;
}

.ExportLogModal.ui.modal > div.logs-title {
  justify-content: space-between;
  padding-right: 25px;
}

.EmailMessageEditor .toolbar {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.EmailMessageEditor .toolbar label {
  font-size: 13px;
  font-weight: bold;
}

.EmailMessageEditor .toolbar-buttons {
  gap: 10px;
  display: flex;
}

.EmailMessageEditor .preview {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}

.ExportModal .padding-container {
  padding: 1.5rem 2rem;
}

.ExportModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.ExportModal .action-buttons-container {
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  display: flex;
}

.FactoryExportsTable {
  padding: 0 10px 55px;
}

.FactoryExportsTable .th-emails, .FactoryExportsTable .td-emails {
  word-break: break-all;
}

.FactoryExportsTable .capitalize {
  text-transform: capitalize;
}

.FactoryExportsTable .actions-container {
  justify-content: flex-end;
  gap: 10px;
  padding-right: 10px;
  display: flex;
}

.FactoryExportsTable .actions-container .ui.basic.icon.button {
  width: 32px;
  height: 28px;
  box-shadow: none;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  display: flex;
}

.FactoryExportsTable .actions-container .ui.basic.icon.button i.icon {
  opacity: 1;
  font-size: 13px;
}

.FactoryExportsTable .actions-container .ui.basic.icon.button.log-button:not(.loading) i.icon, .FactoryExportsTable .actions-container .ui.basic.icon.button.download-button:not(.loading) i.icon {
  color: #7c7c7c;
}

.FactoryExportsTable .action-button-container, .FactoryExportsTable .action-edit-button-container {
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  display: flex;
}

.FactoryExportsTable .action-edit-button-container {
  background: #c7eed0;
}

.FactoryExportsTable .action-button-icon-center {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
}

.FactoryExportsTable .download-icon {
  position: relative;
  bottom: 1px;
}

.FactoryExportsToolbar {
  padding: 22px;
}

.AppointmentStatus .StatusIcon.readonly {
  cursor: default;
}

.AppointmentStatus .StatusIcon.readonly:not(.active):not(.disabled) {
  background-color: #fff !important;
  border-color: #b4b4b4 !important;
}

.AppointmentStatus .StatusIcon.readonly:not(.active):not(.disabled) i.icon {
  color: #a1a1a1;
}

.HoldingCustomerInfo .holding-customer-name {
  cursor: default;
}

.GeneralInfo button.readonly {
  cursor: default;
}

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

.GeneralInfo .ui.button.withdropdownButton.readonly i.icon {
  position: relative;
  right: 1px;
}

.interventions-details-card-right-content.holding-readonly {
  justify-content: flex-end;
}

.interventions-details-card-right-content.holding-readonly .ui.basic.label.intervention-customer-ok-toggle-contaier, .interventions-details-card-right-content.holding-readonly .ui.top.right.pointing.dropdown.AppointmentReportDropdown {
  margin-left: 0;
}

.CreateUpdateHoldingModal .padding-container {
  padding: 18px 24px;
}

.CreateUpdateHoldingModal .actions-buttons-main-container {
  justify-content: space-between;
  display: flex;
}

.CreateUpdateHoldingModal .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.CreateUpdateHoldingModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.CreateUpdateHoldingModal .header-container {
  justify-content: space-between;
  padding: 7px 0;
  display: flex;
}

.HoldingsDashboardTable {
  padding: 20px 10px 10px;
  position: relative;
}

.HoldingsDashboardTable .dealer-names {
  line-height: 2;
}

.HoldingsDashboard .toolbar {
  gap: 15px;
  margin: 21px 9px 0 22px;
  display: flex;
}

.ReplaceTyreConfirm .padding-container {
  padding: 18px 24px;
}

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

.ReplaceTyreConfirm .actions-container .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.ReplaceTyreConfirm .header.warning {
  background-color: #ffba39;
}

.ReplaceTyreConfirm .header.warning .header-title {
  color: #fff;
}

.ReplaceTyreConfirm .tyre-section:not(:first-child) {
  margin-top: 18px;
}

.ReplaceTyreConfirm .tyre-section .tyre-section-label {
  margin-bottom: 8px;
  font-weight: bold;
}

.EditTyreModal .padding-container {
  padding: 18px 24px;
}

.EditTyreModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.EditTyreModal .required-error {
  color: #db2828;
  margin-top: 4px;
  font-size: 12px;
}

.EditTyreModal .actions-container {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.EditTyreModal .actions-container .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.EditTyreModal .CompleteTyresSearch {
  margin-top: 18px;
}

.EditTyreModal .CompleteTyresSearch .replace-label {
  float: right;
  margin-right: 10px;
}

.IncompleteTyresTable {
  padding: 20px 10px 55px;
}

.IncompleteTyresTable .actions-container {
  justify-content: flex-end;
  gap: 10px;
  padding-right: 5px;
  display: flex;
}

.IncompleteTyresTable .action-button-container, .IncompleteTyresTable .action-edit-button-container {
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  display: flex;
}

.IncompleteTyresTable .action-edit-button-container {
  background: #c7eed0;
}

.IncompleteTyresTable .action-button-icon-center {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
}

.PrivateKeyModal .header-button-container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 20px;
  display: flex;
}

.PrivateKeyModal .content-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.PrivateKeyModal .text {
  padding: 25px 0;
}

.PrivateKeyModal .private-key {
  cursor: pointer;
  display: flex;
}

.CreateEditKeyLockerModal .padding-container {
  padding: 18px 24px;
}

.CreateEditKeyLockerModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.CreateEditKeyLockerModal .header-container {
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  display: flex;
}

.CreateEditKeyLockerModal .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.KeyLockerBoxesModal .header-button-container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 20px;
  display: flex;
}

.KeyLockerBoxesModal .box-index {
  margin-left: 4px;
}

.KeyLockerBoxesModal .ellipsis-new {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 130px;
  overflow: hidden;
}

.KeyLockerBoxesModal .header-title {
  white-space: nowrap;
}

.KeyLockerBoxesModal .box-container {
  border-bottom: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 36px;
  margin-top: -1px;
  margin-bottom: -2px;
  margin-left: -12px;
  display: flex;
}

.KeyLockerBoxesModal .active-box {
  background: #d2f1da;
}

.KeyLockerBoxesModal .active-box-text {
  color: #00c12d;
  font-size: 16px;
  font-weight: bold;
}

.KeyLockerBoxesModal .disabled-box {
  background: #fff2d9;
}

.KeyLockerBoxesModal .disabled-box-text {
  color: orange;
  font-size: 16px;
  font-weight: bold;
}

.KeyLockerBoxesModal .key-container {
  text-align: center;
  border: 2px solid #000;
  border-radius: 4px;
  width: 32px;
  height: 28px;
}

.KeyLockerBoxesModal .key-container i.icon {
  margin-top: 4px;
  margin-left: 3px;
}

.KeyLockerBoxesModal .key-container-close {
  font-size: 1.2rem;
}

.KeyLockerBoxesModal .empty-box-icon {
  margin-top: 5px;
  font-size: 1.3rem;
}

.KeyLockerBoxesModal .actions-container {
  justify-content: flex-end;
  gap: 10px;
  padding-right: 5px;
  display: flex;
}

.KeyLockerBoxesModal .action-button-container {
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  display: flex;
}

.KeyLockerBoxesModal .action-button-icon-center {
  margin-bottom: 4px;
  margin-left: 2px;
}

.KeyLockerBoxPinModal .header-button-container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 20px;
  display: flex;
}

.KeyLockerBoxPinModal .content-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.KeyLockerBoxPinModal .text {
  padding: 25px 0;
}

.KeyLockersTable {
  padding: 20px 10px 10px;
}

.KeyLockersTable .ReactTable .td-name, .KeyLockersTable .ReactTable .th-name {
  padding-left: 0;
}

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

.KeyLockersTable .row-index {
  padding-left: 4px;
}

.KeyLockersTable .row-index-container {
  border-bottom: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 36px;
  margin-top: -1px;
  margin-bottom: -2px;
  margin-left: -12px;
  display: flex;
}

.KeyLockersTable .active-key-locker {
  background: #d2f1da;
}

.KeyLockersTable .active-key-locker-text {
  color: #00c12d;
  font-size: 16px;
  font-weight: bold;
}

.KeyLockersTable .disabled-key-locker {
  background: #fff2d9;
}

.KeyLockersTable .disabled-key-locker-text {
  color: orange;
  font-size: 16px;
  font-weight: bold;
}

.KeyLockersTable .actions-container {
  justify-content: flex-end;
  gap: 10px;
  padding-right: 5px;
  display: flex;
}

.KeyLockersTable .action-button-container, .KeyLockersTable .action-edit-button-container {
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  display: flex;
}

.KeyLockersTable .action-edit-button-container {
  background: #c7eed0;
}

.KeyLockersTable .drop-key-icon {
  justify-content: center;
  align-items: center;
  display: flex;
}

.KeyLockersTable .action-button-icon-center {
  margin-bottom: 4px;
  margin-left: 2px;
}

.WarningNotification .container {
  flex-direction: column;
  gap: 10px;
  padding-left: 10px;
  display: flex;
}

.WarningNotification .title {
  text-align: left;
  letter-spacing: 0;
  color: #707070;
  font: bold 16px / 17px Lato;
}

.WarningNotification .body {
  text-align: left;
  letter-spacing: 0;
  color: #707070;
  font: 14px / 17px Lato;
}

.KeyLockerDashboard .toolbar {
  gap: 15px;
  margin: 21px 9px 0 22px;
  display: flex;
}

.CreateUpdateKioskForm .kiosk-create-form-image-container {
  max-width: 100%;
  height: auto;
}

.CreateUpdateKioskForm .kiosk-create-form-image-container img {
  max-width: 100%;
}

.CreateUpdateKioskForm .ui.fitted.toggle.checkbox.kiosk-create-form-checkbox {
  margin: 5px 0 0;
}

.CreateUpdateKioskForm .custom-web-page-preview-container {
  width: 100%;
  margin-top: 20px;
}

.CreateUpdateKioskForm .custom-web-page-preview-container .custom-web-page-preview-title {
  color: #000;
  margin-bottom: 10px;
  font-size: 14px;
}

.CreateUpdateKioskForm .custom-web-page-preview-container .custom-web-page-preview {
  width: 100%;
  height: 500px;
  overflow: hidden auto;
}

.CreateUpdateKioskForm .KioskQuill {
  padding-bottom: 20px;
}

.CreateUpdateKioskForm .KioskQuill.QuillError .ql-container.ql-snow {
  color: #9f3a38;
  background: #fff6f6;
  border-color: #e0b4b4;
}

.CreateUpdateKioskForm .KioskQuill .ql-container.ql-snow {
  min-height: 250px;
}

.CreateUpdateKioskForm .KioskQuill .ql-editor {
  height: 100%;
  min-height: 250px;
}

.CreateUpdateKioskForm .custom-webapage-error-msg {
  text-align: center;
}

.KioskPrivateKeyModal .kiosk-private-key-modal-content {
  cursor: pointer;
  justify-content: center;
  font-size: 16px;
  display: flex;
}

.KioskPrivateKeyModal .kiosk-private-key-modal-content:hover {
  color: green;
}

.KioskPrivateKeyModal .kiosk-private-key-modal-content .actions button.ui.button {
  margin-right: auto;
}

.KioskPrivateKeyModal .header-button-container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 20px;
  display: flex;
}

.KioskPrivateKeyModal .content-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.KioskPrivateKeyModal p {
  text-align: center;
}

.CreateUpdateKioskModal form.ui.form {
  padding: 25px 24px 0 25px;
}

.CreateUpdateKioskModal .kiosk-create-update-action-buttons-container {
  justify-content: end;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding-bottom: 20px;
  display: flex;
}

.CreateUpdateKioskModal .ui.input {
  width: 100%;
}

.CreateUpdateKioskModal label {
  margin-bottom: 3px;
  display: block;
}

.KioskDashboardTable {
  padding: 20px 10px 10px;
}

.KioskDashboardTable .index-column-header {
  margin-left: 4px;
}

.KioskDashboardTable .index-column-container {
  border-bottom: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 36px;
  margin-top: -1px;
  margin-bottom: -2px;
  margin-left: -12px;
  display: flex;
}

.KioskDashboardTable .active-kiosk-container {
  background: #d2f1da;
}

.KioskDashboardTable .active-kiosk-text {
  color: #00c12d;
  font-size: 16px;
  font-weight: bold;
}

.KioskDashboardTable .inactive-kiosk-container {
  background: #fff2d9;
}

.KioskDashboardTable .inactive-kiosk-text {
  color: orange;
  font-size: 16px;
  font-weight: bold;
}

.KioskDashboardTable .active-kiosk-name-text {
  color: #000c;
  font-size: 13px;
  font-weight: bold;
}

.KioskDashboardTable .inactive-kiosk-name-text {
  color: orange;
  font-size: 13px;
  font-weight: bold;
}

.KioskDashboardTable .actions-container {
  justify-content: flex-end;
  gap: 10px;
  padding-right: 5px;
  display: flex;
}

.KioskDashboardTable .action-button-container, .KioskDashboardTable .action-edit-button-container {
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  display: flex;
}

.KioskDashboardTable .action-edit-button-container {
  background: #c7eed0;
}

.KioskDashboardTable .drop-key-icon {
  justify-content: center;
  align-items: center;
  display: flex;
}

.KioskDashboardTable .action-button-icon-center {
  margin-bottom: 4px;
  margin-left: 2px;
}

.KioskLabelsModal .index-column-header {
  margin-left: 4px;
}

.KioskLabelsModal .kiosk-labels-modal-header {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.KioskLabelsModal .kiosk-labels-modal-header h3.kiosk-labels-modal-header-title {
  margin-bottom: 0;
}

.KioskLabelsModal .kiosk-labels-modal-header button.ui.small.button.kiosk-labels-modal-appointment-status {
  background-color: #fff;
  border: 1px solid #70707029;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
}

.KioskLabelsModal .kiosk-labels-modal-header button.ui.small.button.kiosk-labels-modal-appointment-status i.icon.xmark.grey {
  margin: 0;
  font-size: 16px;
  transform: translateX(0);
}

.KioskLabelsModal .kiosk-labels-modal-header button {
  width: 35px;
  margin-right: 20px;
}

.KioskLabelsModal .kiosk-labels-modal-header button i.icon {
  margin-top: -4px;
}

.KioskLabelsModal .kiosk-label-tag-number {
  background: #d2f1da;
  border-top: 1px solid #e2e2e3;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 31px;
  margin-top: -5px;
  margin-left: -12px;
  display: flex;
  box-shadow: 0 4px #d2f1da;
}

.KioskLabelsModal .kiosk-label-tag-number-text {
  color: #00c12d;
  font-size: 16px;
  font-weight: bold;
}

.KioskLabelsModal i.big.icon.square.outline.group-icon {
  color: #fff;
  border: 3px solid #000;
  border-radius: 4px;
}

.KioskLabelsModal i.icon.close.group-close-icon {
  font-size: 15px;
  left: 13px;
}

.KioskLabelsModal button.ui.small.button.external-link-btn {
  background-color: #fff;
  padding: 0;
}

.KioskLabelsModal button.ui.small.button.external-link-btn i.black.icon.external.link.alt {
  margin-right: 15px;
}

.KioskLabelsModal .external-link-btn:hover {
  box-shadow: none;
  background-color: #fff;
}

.KioskLabelsModal .key-container {
  text-align: center;
  border: 2px solid #000;
  border-radius: 4px;
  width: 32px;
  height: 28px;
}

.KioskLabelsModal .key-container i.icon {
  margin-top: 4px;
  margin-left: 3px;
}

.KioskLabelsModal .key-container-close {
  font-size: 1.2rem;
}

.KioskDashboard .add-button-container {
  padding: 20px 22px 0;
}

.LeadsExportModal .export-file-container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 24px;
  display: flex;
}

.LeadsExportModal .export-modal-close-button-container {
  margin: 1px 1px 0 5px;
}

.LeadsExportModal .export-modal-close-button.button {
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
}

.LeadsExportModal .export-modal-content-text {
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 19px 0;
  font-size: 17px;
  display: flex;
}

.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-disabled {
  background-color: #e2e2e3;
}

.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;
}

.ui.selection.dropdown .menu > .item {
  word-break: break-word;
}

.LocationOverviewHeader {
  z-index: 5;
  background: #fff;
  padding-top: 24px;
  position: sticky;
  top: 0;
}

.LocationOverviewHeader .row {
  flex-direction: row;
  justify-content: space-between;
  gap: 24px;
  display: flex;
}

.LocationOverviewHeader .row.center {
  border: 1px solid #e2e2e3;
  border-radius: 10px;
  align-items: center;
  box-shadow: 0 3px 6px #00000029;
}

.LocationOverviewHeader .tabs {
  z-index: 2;
  position: sticky;
  top: 39px;
}

.LocationOverviewHeader .tabs .ui.secondary.pointing.menu {
  border: 0;
  justify-content: flex-start;
}

.LocationOverviewHeader .full {
  width: 100%;
}

.LocationOverviewHeader .save {
  margin-right: 20px;
}

.LocationOverviewHeader .save button {
  justify-content: center;
  align-items: center;
  display: flex;
}

.tyre-column-title {
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-weight: 700;
  display: flex;
}

.ui.form .ui.input.threshold-error input {
  border-color: #db2828;
}

.ui.form .field > label.critical-threshold-label {
  margin-top: 1rem;
}

.LocationOverviewStatusesGrid {
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  display: grid;
}

.LocationOverviewStatusesGrid .status-name-input {
  align-items: center;
  gap: 8px;
  display: flex;
}

.LocationOverviewStatusesGrid .status-name-input .field.status-color-field {
  flex: none;
  margin: 0;
}

.LocationOverviewStatusesGrid .status-name-input .ui.input, .LocationOverviewStatusesGrid .status-name-input .field {
  flex: 1;
  min-width: 0;
}

.LocationOverviewStatusesGrid .status-name-input .ui.input input {
  padding: 10px;
}

.StatusesList {
  border: 1px solid #e0e1e2;
  border-radius: 10px;
  padding: 19px 24px;
}

.StatusesList .section-title {
  align-items: center;
  gap: 7px;
  padding-bottom: 10px;
  display: flex;
}

.StatusesList .section-title .section-title-text {
  font-size: 18px;
  font-weight: bold;
}

.StatusesList .section-title i.icon {
  position: relative;
  top: -3px;
}

.StatusesList .StatusesList-grid {
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  display: grid;
}

.StatusesList .StatusesList-grid .status-name-input {
  align-items: center;
  gap: 8px;
  display: flex;
}

.StatusesList .StatusesList-grid .status-name-input .field.status-color-field {
  flex: none;
  margin: 0;
}

.StatusesList .StatusesList-grid .status-name-input .ui.input, .StatusesList .StatusesList-grid .status-name-input .field {
  flex: 1;
  min-width: 0;
}

.StatusesList .StatusesList-grid .status-name-input .ui.input input {
  padding: 10px;
}

.LocationOverviewDashboard {
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
  padding: 0 40px 24px;
  display: flex;
}

.LocationOverviewDashboard .fields > .field:only-child {
  padding-right: 12px !important;
}

.LocationOverviewDashboard .location-overview-section {
  border: 1px solid #e0e1e2;
  border-radius: 10px;
  padding: 19px 24px;
}

.LocationOverviewDashboard .location-overview-section .location-overview-subheading {
  margin-top: 15px;
  margin-bottom: 13px;
  font-size: 15px;
  font-weight: 700;
}

.LocationOverviewDashboard .location-overview-section .location-overview-field-error {
  color: #db2828;
  margin-top: 4px;
  font-size: 12px;
}

.LocationOverviewDashboard .section-title {
  align-items: center;
  gap: 7px;
  padding-bottom: 10px;
  display: flex;
}

.LocationOverviewDashboard .section-title .section-title-text {
  font-size: 18px;
  font-weight: bold;
}

.LocationOverviewDashboard .hidden-file-input {
  display: none;
}

.LocationOverviewDashboard .location-overview-columns {
  gap: 24px;
  display: flex;
}

.LocationOverviewDashboard .location-overview-columns .location-overview-column {
  flex: 1;
  min-width: 0;
}

.ui.form .location-overview-section .fields .wide.field:first-child {
  padding-left: .5em;
}

.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;
}

.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(/releases/20261104-123214-8.50.0/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: flex-start;
  margin-top: 3px;
}

.Manufacturer__filters-container--addButton {
  cursor: pointer;
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 38px;
  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__table-action-buttons-container {
  border: 1px solid #d3d3d3;
  justify-content: center;
  align-items: center;
  margin-right: 1px;
  display: flex;
}

.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;
}

.ui.card .meta.WarrantyLocationInfo__dealer-location-title {
  color: #000c;
  font: 900 14px / 24px Lato;
}

.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 > button {
  color: #fff;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
  display: flex;
}

.ArticleModal .toggle-disable-button:hover > button {
  color: #fff;
}

.ArticleModal .toggle-disable-button.enable > button {
  background-color: #21ba45;
}

.ArticleModal .toggle-disable-button.disable > button {
  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: 28px;
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
}

.NoteSuggestionModal .noteSuggestionHeader {
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.NoteSuggestionModal .noteSuggestionHeader h3 {
  margin: 0;
}

.NoteSuggestionModal .note-text-area {
  resize: none;
  border: 1px solid #dededf;
  width: 100%;
  font: 14px / 17px Lato;
}

.NoteSuggestionModal .note-text-area:focus {
  outline: none;
}

.NoteSuggestionModal .sortable-item-note-suggestion .delete-note-suggestion {
  background-color: #0000;
  width: 50px;
  height: 60px;
  position: relative;
  border: 1px solid #dededf !important;
}

.NoteSuggestionModal .sortable-item-note-suggestion .delete-note-suggestion:hover {
  opacity: .6;
  background-color: #0000;
}

.NoteSuggestionModal .sortable-item-note-suggestion .delete-note-suggestion i {
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%) !important;
}

.NoteSuggestionModal .note-controls {
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  display: flex;
}

.NoteSuggestionModal .note-controls .note-toggle-wrapper {
  align-items: center;
  gap: 10px;
  display: flex;
}

.NoteSuggestionModal .note-controls .add-note-button {
  cursor: pointer;
  background-color: #21ba45;
  border-radius: 4px;
  align-items: center;
  display: flex;
}

.NoteSuggestionModal .note-controls .add-note-button .plus-wrapper {
  background-color: #1fb142;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  padding: 8px 10px;
}

.NoteSuggestionModal .note-controls .add-note-button .plus-wrapper i {
  color: #fff;
  margin: 0;
}

.NoteSuggestionModal .note-controls .add-note-button span {
  color: #fff;
  padding: 8px 20px;
}

.NoteSuggestionModal .note-modal-actions {
  justify-content: flex-end !important;
}

.NoteSuggestionModal .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;
  width: 50px;
  height: 60px;
  display: flex;
}

.AddUpdateParkingGateCodeModal .padding-container {
  padding: 18px 24px;
}

.AddUpdateParkingGateCodeModal .actions-buttons-main-container {
  justify-content: space-between;
  display: flex;
}

.AddUpdateParkingGateCodeModal .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.AddUpdateParkingGateCodeModal .header-title {
  padding: 7px 0;
  font-size: 18px;
  font-weight: bold;
}

.ParkingGateCodesTable {
  padding: 20px 10px 10px;
}

.ParkingGateCodesTable .actions-container {
  justify-content: flex-end;
  gap: 10px;
  padding-right: 5px;
  display: flex;
}

.ParkingGateCodesTable .action-button-container, .ParkingGateCodesTable .action-edit-button-container {
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  display: flex;
}

.ParkingGateCodesTable .action-edit-button-container {
  background: #c7eed0;
}

.ParkingGateCodesTable .action-button-icon-center {
  margin-bottom: 4px;
  margin-left: 2px;
}

.ParkingGateCodesDashboard .toolbar {
  gap: 15px;
  margin: 21px 9px 0 22px;
  display: flex;
}

.EditChecklistsButton {
  justify-content: flex-end;
  padding: 5px;
  display: flex;
}

.EditChecklistsButton .edit-checklists-button {
  cursor: pointer;
  background: #c7eed0;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  display: flex;
}

.EditChecklistsButton .edit-checklists-button-icon {
  color: #32bf53;
  margin-bottom: 0;
  margin-left: 5px;
}

.InterventionChecklistsTable .add-button {
  color: #21ba45;
  cursor: pointer;
  float: right;
  border: 1px solid #e2e2e3;
  border-radius: 4px;
  justify-content: center;
  width: 32px;
  height: 25px;
  margin-right: 6px;
  display: flex;
}

.InterventionChecklistsTable .add-button i.icon {
  font-size: 16px;
}

.InterventionPendingChecklistsSortableList .check-container {
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.InterventionPendingChecklistsSortableList .check-container li {
  align-items: stretch;
  gap: 10px;
  display: flex;
}

.InterventionPendingChecklistsSortableList .check-container li .input-wrapper {
  flex-grow: 1;
  display: flex;
}

.InterventionPendingChecklistsSortableList .check-container li .input-wrapper .vin-container {
  margin-bottom: 0;
  font-style: normal;
}

.InterventionPendingChecklistsSortableList .check-container li .input-wrapper span {
  pointer-events: none;
  text-transform: uppercase;
  border: 1px solid #dededf;
  border-left: none;
  border-right: none;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 0 11px;
  font-weight: bold;
  display: flex;
}

.InterventionPendingChecklistsSortableList .check-container li .input-wrapper p {
  text-transform: none;
  font-style: italic;
  font-weight: normal;
}

.InterventionPendingChecklistsSortableList .drag-button {
  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;
}

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

.InterventionChecklistsModal .close-btn {
  margin-right: 28px;
}

.InterventionChecklistsModal .sortable-list-container .delete-button {
  border-radius: 4px;
  width: 42px;
  height: 40px;
  position: relative;
}

.InterventionChecklistsModal .sortable-list-container .delete-button:hover {
  opacity: .6;
  background-color: #0000;
}

.InterventionChecklistsModal .sortable-list-container .delete-button i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.InterventionChecklistsModal .sortable-list-container .ordering-number {
  color: #ff0202;
  background: #ffd9d9;
  border: 1px solid #dededf;
  border-bottom-left-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 40px;
  display: flex;
}

.InterventionChecklistsModal .add-checklists-container {
  gap: 8px;
  margin: 8px 0;
  display: flex;
}

.InterventionChecklistsModal .add-checklists-container .full-width {
  width: 100%;
}

.InterventionChecklistsModal .add-checklists-container .add-button {
  width: 160px;
  height: 38px;
}

.InterventionChecklistsModal .ui.disabled.dropdown, .InterventionChecklistsModal .ui.dropdown .menu > .disabled.item {
  opacity: 1;
  color: #000;
  text-transform: none;
  font-weight: bold;
}

.InterventionChecklistsModal .ui.dropdown .menu > .item {
  text-transform: uppercase;
}

.InterventionChecklistsModal .intervention-title-container {
  margin-bottom: 10px;
}

.PinPendingChecklistsSortableList .check-container {
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.PinPendingChecklistsSortableList .check-container li {
  align-items: stretch;
  gap: 10px;
  display: flex;
}

.PinPendingChecklistsSortableList .check-container li .input-wrapper {
  flex-grow: 1;
  display: flex;
}

.PinPendingChecklistsSortableList .check-container li .input-wrapper .vin-container {
  margin-bottom: 0;
  font-style: normal;
}

.PinPendingChecklistsSortableList .check-container li .input-wrapper span {
  pointer-events: none;
  text-transform: uppercase;
  border: 1px solid #dededf;
  border-left: none;
  border-right: none;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 0 11px;
  font-weight: bold;
  display: flex;
}

.PinPendingChecklistsSortableList .check-container li .input-wrapper p {
  text-transform: none;
  font-style: italic;
  font-weight: normal;
}

.PinPendingChecklistsSortableList .drag-button {
  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;
}

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

.PinChecklistModal .close-btn {
  margin-right: 28px;
}

.PinChecklistModal .sortable-list-container .delete-button {
  border-radius: 4px;
  width: 42px;
  height: 40px;
  position: relative;
}

.PinChecklistModal .sortable-list-container .delete-button:hover {
  opacity: .6;
  background-color: #0000;
}

.PinChecklistModal .sortable-list-container .delete-button i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.PinChecklistModal .sortable-list-container .ordering-number {
  color: #ff0202;
  background: #ffd9d9;
  border: 1px solid #dededf;
  border-bottom-left-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 40px;
  display: flex;
}

.PinChecklistModal .add-checklists-container {
  gap: 8px;
  margin: 8px 0;
  display: flex;
}

.PinChecklistModal .add-checklists-container .full-width {
  width: 100%;
}

.PinChecklistModal .add-checklists-container .add-button {
  width: 160px;
  height: 38px;
}

.PinChecklistModal .ui.disabled.dropdown, .PinChecklistModal .ui.dropdown .menu > .disabled.item {
  opacity: 1;
  color: #000;
  text-transform: none;
  font-weight: bold;
}

.PinChecklistModal .ui.dropdown .menu > .item {
  text-transform: uppercase;
}

.PinChecklistsTable .pin-type-container {
  align-items: center;
  gap: 15px;
  display: flex;
}

.PinChecklistsTable .ReactTable {
  border-top-left-radius: 0;
}

.PinChecklistsTabs .tab {
  cursor: pointer;
  align-items: center;
  gap: 10px;
  display: flex;
}

.PinChecklistsTabs .ui.tabular.menu {
  border-bottom: none;
  height: 36px;
  margin-bottom: 0;
}

.PinChecklistsTabs .active-tab {
  color: #21ba45;
}

.PinChecklistsTabs .inactive-tab {
  color: #000;
}

.AddServicePendingChecklist {
  gap: 8px;
  margin: 8px 0;
  display: flex;
}

.AddServicePendingChecklist .add-button {
  height: 38px;
}

.ServicePendingChecklistsSortableList .check-container {
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.ServicePendingChecklistsSortableList .check-container li {
  align-items: stretch;
  gap: 10px;
  display: flex;
}

.ServicePendingChecklistsSortableList .check-container li .input-wrapper {
  flex-grow: 1;
  display: flex;
}

.ServicePendingChecklistsSortableList .check-container li .input-wrapper span {
  pointer-events: none;
  text-transform: uppercase;
  border: 1px solid #dededf;
  border-left: none;
  border-right: none;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 0 11px;
  font-weight: bold;
  display: flex;
}

.ServicePendingChecklistsSortableList .check-container li .input-wrapper p {
  text-transform: none;
  font-style: italic;
  font-weight: normal;
}

.ServicePendingChecklistsSortableList .drag-button {
  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;
}

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

.ServiceChecklistModal .close-btn {
  margin-right: 28px;
}

.ServiceChecklistModal .sortable-list-container .delete-button {
  border-radius: 4px;
  width: 42px;
  height: 40px;
  position: relative;
}

.ServiceChecklistModal .sortable-list-container .delete-button:hover {
  opacity: .6;
  background-color: #0000;
}

.ServiceChecklistModal .sortable-list-container .delete-button i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ServiceChecklistModal .sortable-list-container .ordering-number {
  color: #ff0202;
  background: #ffd9d9;
  border: 1px solid #dededf;
  border-bottom-left-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 40px;
  display: flex;
}

.ServiceChecklistModal .add-checklists-container {
  gap: 8px;
  margin: 8px 0;
  display: flex;
}

.ServiceChecklistModal .add-checklists-container .add-button {
  height: 38px;
}

.ServiceChecklistModal .ui.disabled.dropdown, .ServiceChecklistModal .ui.dropdown .menu > .disabled.item {
  opacity: 1;
  color: #000;
  text-transform: none;
  font-weight: bold;
}

.ServiceChecklistModal .ui.dropdown .menu > .item {
  text-transform: uppercase;
}

.ServiceChecklistTable {
  padding-bottom: 50px;
}

.PendingChecklistsDashboard {
  padding: 20px 10px 0;
}

.PendingChecklistsDashboard .ui.segment {
  border: none;
  padding: 0;
}

.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;
}

.PrivacyOverview .link-to-dpo-resource {
  text-transform: lowercase;
}

.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;
}

.CreateQuestionModal.ui.modal .content {
  padding: 20px 24px;
}

.CreateQuestionModal.ui.modal .actions {
  background: #f9fafb;
  border-top: 1px solid #22242626;
  justify-content: flex-end;
  gap: 15px;
  padding: 15px 24px;
  display: flex;
}

.CreateQuestionModal.ui.modal .actions .ui.button {
  margin: 0;
}

.EditQuestionModal.ui.modal .scrolling.content {
  padding: 25px 24px;
}

.EditQuestionModal.ui.modal .actions {
  background: #f9fafb;
  border-top: 1px solid #22242626;
  justify-content: space-between;
  align-items: center;
  padding: 15px 24px;
  display: flex;
}

.EditQuestionModal.ui.modal .actions .actions-left, .EditQuestionModal.ui.modal .actions .actions-right {
  gap: 10px;
  display: flex;
}

.EditQuestionModal.ui.modal .actions .actions-left .ui.button, .EditQuestionModal.ui.modal .actions .actions-right .ui.button {
  margin: 0;
}

.EditQuestionModal.ui.modal .checklist-usages {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.EditQuestionModal.ui.modal .checklist-usages .ui.label {
  margin: 0;
}

.EditQuestionModal.ui.modal .evhc-percents-title {
  margin: 20px 0 10px;
}

.EditQuestionModal.ui.modal .evhc-percents-error {
  color: #db2828;
}

.EditQuestionModal.ui.modal .question-toggles.fields {
  flex-wrap: wrap;
  gap: 10px 25px;
  margin: 12px 0 0;
}

.EditQuestionModal.ui.modal .question-toggles.fields .field {
  margin: 0;
  padding: 0;
}

.EditQuestionModal.ui.modal .QuestionElements {
  margin-top: 20px;
}

.EditQuestionModal.ui.modal .QuestionElementCard.ui.segment {
  box-shadow: none;
  background: #f2f2f2;
  margin: 0 0 10px;
}

.EditQuestionModal.ui.modal .QuestionElementCard.ui.segment .question-element-header {
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
  display: flex;
}

.EditQuestionModal.ui.modal .QuestionElementCard.ui.segment .question-element-header .question-element-name {
  flex: 1;
  margin: 0;
}

.EditQuestionModal.ui.modal .QuestionElementCard.ui.segment .question-element-header .question-element-statuses {
  gap: 5px;
  margin-right: 30px;
  display: flex;
}

.EditQuestionModal.ui.modal .QuestionElementCard.ui.segment .question-element-header .question-element-statuses .ui.button {
  width: 41px;
  height: 28px;
  margin: 0;
  padding: 0;
}

.EditQuestionModal.ui.modal .QuestionElementCard.ui.segment .question-element-header .question-element-actions {
  justify-content: flex-end;
  gap: 5px;
  width: 94px;
  display: flex;
}

.EditQuestionModal.ui.modal .QuestionElementCard.ui.segment .question-element-header .question-element-actions .ui.small.button.-appointment-status {
  border-color: #e6e6e6;
  justify-content: center;
  width: 28px;
  height: 29px;
  margin: 0;
  padding: 0;
}

.EditQuestionModal.ui.modal .QuestionElementCard.ui.segment .question-element-header .question-element-actions .ui.small.button.-appointment-status i.icon {
  width: 1em;
  height: 1em;
  line-height: 1;
}

.EditQuestionModal.ui.modal .ConfigItemsList {
  margin-bottom: 1em;
}

.EditQuestionModal.ui.modal .ConfigItemsList > label {
  margin-bottom: 5px;
  font-weight: bold;
  display: block;
}

.EditQuestionModal.ui.modal .ConfigItemsList .config-item {
  background: #fff;
  border: 1px solid #d4d4d5;
  border-radius: 4px;
  align-items: center;
  gap: 15px;
  min-height: 36px;
  margin-bottom: 8px;
  padding: 5px 15px;
  display: flex;
}

.EditQuestionModal.ui.modal .ConfigItemsList .config-item.is-sortable {
  cursor: grab;
}

.EditQuestionModal.ui.modal .ConfigItemsList .config-item.is-dragging {
  opacity: .5;
}

.EditQuestionModal.ui.modal .ConfigItemsList .config-item i.icon.xmark {
  cursor: pointer;
  margin: 0;
}

.EditQuestionModal.ui.modal .ConfigItemsList .config-item-add {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.EditQuestionModal.ui.modal .ConfigItemsList .config-item-add .ui.button {
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin: 0;
  display: flex;
}

.EditQuestionModal.ui.modal .ConfigItemsList .config-item-add .ui.button i.icon {
  margin: 0;
  transform: translateX(0);
}

.EditQuestionModal.ui.modal .ElementsDropZone {
  text-align: center;
  background: #f2f2f2;
  border: 1px solid #d4d4d5;
  border-radius: 4px;
  margin-bottom: 15px;
  padding: 12px;
  font-weight: bold;
}

.EditQuestionModal.ui.modal .ElementsDropZone.is-drop-target {
  border-color: #21ba45;
}

.EditQuestionModal.ui.modal .available-question-elements {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}

.available-question-element {
  cursor: grab;
  background: #fff;
  border-top: 4px solid #2185d0;
  border-radius: 4px;
  flex-direction: column;
  min-width: 110px;
  padding: 0 12px;
  display: flex;
  box-shadow: 0 2px 4px #00000029;
}

.available-question-element span, .available-question-element strong {
  padding: 8px 0;
}

.available-question-element span {
  border-bottom: 1px solid #e0e0e0;
}

.available-question-element.is-dragging {
  opacity: .5;
}

.CopyQuestionModal.ui.modal .copy-question-elements {
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 1em;
  display: flex;
}

.CopyQuestionModal.ui.modal .copy-question-targets {
  gap: 10px;
  display: flex;
}

.CopyQuestionModal.ui.modal .copy-question-targets .ui.button {
  margin: 0;
}

.QuestionsDashboard {
  padding: 15px;
}

.QuestionsDashboard .questions-tags-filter {
  margin-bottom: 20px;
}

.QuestionsDashboard .QuestionsList .questions-header {
  align-items: center;
  height: 40px;
  margin-bottom: 10px;
  display: flex;
}

.QuestionsDashboard .QuestionsList .questions-header .ui.small.button.-appointment-status {
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 11px;
}

.QuestionsDashboard .QuestionsList .questions-header .ui.small.button.-appointment-status i.icon {
  width: 1em;
  height: 1em;
  line-height: 1;
}

.QuestionsDashboard .QuestionsList .questions-header h3 {
  margin: 0;
}

.QuestionsDashboard .QuestionsList .questions-container {
  background: #f2f2f2;
  border-radius: 4px;
  flex-direction: column;
  gap: 8px;
  height: calc(100vh - 200px);
  padding: 11px;
  display: flex;
  overflow-y: auto;
}

.QuestionsDashboard .QuestionsList .question-item {
  cursor: pointer;
  background: #fff;
  border: 1px solid #d4d4d5;
  border-left: 4px solid #21ba45;
  border-radius: 4px;
  flex-shrink: 0;
  align-items: center;
  min-height: 45px;
  padding: 4px 10px;
  font-weight: bold;
  display: flex;
}

.QuestionsDashboard .QuestionsList .question-item.is-inactive {
  border-left-color: #db2828;
}

.ReportTemplatesDashboardTable td.td-actions {
  padding-right: 15px;
}

.ReportTemplatesDashboardTable td.td-actions button.edit-button.ui.button {
  color: #21ba45;
  background-color: #21ba4540;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
}

.ReportTemplatesDashboardModal .padding-container {
  padding: 18px 24px;
}

.ReportTemplatesDashboardModal .field {
  margin-bottom: 16px;
}

.ReportTemplatesDashboardModal .field label {
  margin-bottom: 4px;
  font-weight: 700;
  display: block;
}

.ReportTemplatesDashboardModal .field > span {
  color: #6b6b6b;
  display: block;
}

.ReportTemplatesDashboardModal .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.ReportTemplatesDashboard {
  padding: 22px;
}

.ShareboxDashboardTable {
  padding: 20px 10px;
}

.ShareboxDashboardTable .sharebox-table-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 120px;
  font-size: 12.6px;
  overflow: hidden;
}

@media screen and (width >= 1920px) {
  .ShareboxDashboardTable .sharebox-table-ellipsis {
    max-width: 180px;
  }
}

.StatusListDashboard {
  flex-direction: column;
  gap: 20px;
  padding: 0 40px 24px;
  display: flex;
}

.StatusListDashboard .StatusListDashboard-header {
  z-index: 5;
  background: #fff;
  padding-top: 24px;
  position: sticky;
  top: 0;
}

.StatusListDashboard .StatusListDashboard-header .row {
  flex-direction: row;
  justify-content: space-between;
  gap: 24px;
  display: flex;
}

.StatusListDashboard .StatusListDashboard-header .row.center {
  border: 1px solid #e2e2e3;
  border-radius: 10px;
  align-items: center;
  box-shadow: 0 3px 6px #00000029;
}

.StatusListDashboard .StatusListDashboard-header .tabs .ui.secondary.pointing.menu {
  border: 0;
  justify-content: flex-start;
}

.StatusListDashboard .StatusListDashboard-header .full {
  width: 100%;
}

.StatusListDashboard .StatusListDashboard-header .save {
  margin-right: 20px;
}

.StatusListDashboard .StatusListDashboard-header .save button {
  justify-content: center;
  align-items: center;
  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;
}

.TagModal .padding-container {
  padding: 1.5rem 2rem;
}

.TagModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.TagModal .action-buttons-container {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.TagModal .right-buttons {
  gap: 10px;
  display: flex;
}

.TagModal .tag-form-row {
  align-items: center;
  gap: 20px;
  display: flex;
}

.TagModal .tag-form-row .field {
  margin: 0;
}

.TagModal .tag-form-row .tag-name-field {
  flex: 1;
}

.TagModal .tag-form-row .tag-name-field .field, .TagModal .tag-form-row .tag-name-field input {
  width: 100%;
}

.TagModal .tag-form-row .tag-for-system-field {
  white-space: nowrap;
}

.TagsDashboardTable {
  padding: 0 10px 55px;
}

.TagsDashboardTable .th-name, .TagsDashboardTable .td-name {
  width: 100% !important;
}

.TagsDashboardTable .th-system, .TagsDashboardTable .td-system, .TagsDashboardTable .th-color, .TagsDashboardTable .td-color {
  text-align: center;
}

.TagsDashboardTable .tag-color-swatch {
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  width: 36px;
  height: 22px;
  display: inline-block;
}

.TagsDashboardTable .actions-container {
  justify-content: center;
  gap: 10px;
  margin-right: 15px;
  display: flex;
}

.TagsDashboardTable .action-button-container, .TagsDashboardTable .action-edit-button-container {
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  display: flex;
}

.TagsDashboardTable .action-button-container i.red.icon.trash.action-button-icon-center, .TagsDashboardTable .action-edit-button-container i.red.icon.trash.action-button-icon-center {
  position: relative;
  bottom: 2px;
}

.TagsDashboardTable .action-edit-button-container {
  background: #c7eed0;
}

.TagsToolbar {
  gap: 15px;
  padding: 22px 0 22px 22px;
  display: flex;
}

.TyreModal {
  width: 100%;
}

.TyreModal .padding-container {
  padding: 18px 24px;
}

.TyreModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.TyreModal .field-error {
  color: #db2828;
  margin-top: 4px;
  font-size: 12px;
}

.TyreModal .save-cancel-buttons-container {
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.TyresDashboardFilters {
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  display: flex;
}

.TyresDashboardFilters .row {
  align-items: center;
  gap: 10px;
  display: flex;
}

.TyresDashboardFilters .row > .ui.input, .TyresDashboardFilters .row > .ui.dropdown {
  flex: 1 1 0;
  min-width: 0;
}

.TyresDashboardFilters .row > .ResetFiltersButton__toolbar-button {
  flex: none;
}

.TyresDashboardFilters .ui.basic.button {
  width: 38px;
}

.TyresDashboardFilters .ui.basic.button i {
  color: #21ba45;
}

.TyresDashboardTable {
  padding: 0 10px 55px;
}

.TyresDashboardTable .actions-container {
  justify-content: flex-end;
  padding-right: 5px;
  display: flex;
}

.TyresDashboardTable .action-edit-button-container {
  cursor: pointer;
  background: #c7eed0;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  display: flex;
}

.ThreeDepartmentDashboardFilters .react-datepicker-wrapper {
  width: 100% !important;
}

.ThreeDepartmentDashboardFilters .toolbar-container {
  align-items: center;
  margin: 9px 9px 5px 0;
  display: flex;
}

.ThreeDepartmentDashboardFilters .toolbar-grid {
  width: 100% !important;
  margin: 0 9px 0 22px !important;
}

.ThreeDepartmentDashboardFilters .no-left-gutter {
  padding-left: 0 !important;
}

.ThreeDepartmentDashboardFilters .checked-by {
  align-items: center;
  gap: 12px;
  display: flex;
}

.ThreeDepartmentDashboardFilters .checked-by .label {
  white-space: nowrap;
  font-weight: 600;
}

.ThreeDepartmentDashboardFilters .checked-by .ui.dropdown {
  flex: 1;
}

.ThreeDepartmentDashboardTable {
  padding: 0 12px 30px;
}

.ThreeDepartmentDashboardTable a {
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.ThreeDepartmentDashboardTable a > i.icon {
  height: auto;
  margin: 0;
  line-height: 1;
}

.ThreeDepartmentDashboardTable .td-receptionist, .ThreeDepartmentDashboardTable .td-parts, .ThreeDepartmentDashboardTable .td-workshop, .ThreeDepartmentDashboardTable .th-receptionist, .ThreeDepartmentDashboardTable .th-parts, .ThreeDepartmentDashboardTable .th-workshop {
  text-align: center;
}

.ThreeDepartmentDashboardTable .td-remark, .ThreeDepartmentDashboardTable .th-remark {
  padding-left: 36px;
}

.ThreeDepartmentDashboardTable .remark-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
  margin: 0;
  overflow: hidden;
}

.AddUpdateTyreDiscountModal .padding-container {
  padding: 18px 24px;
}

.AddUpdateTyreDiscountModal .actions-buttons-main-container {
  justify-content: space-between;
  display: flex;
}

.AddUpdateTyreDiscountModal .save-cancel-buttons-container {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.AddUpdateTyreDiscountModal .header-title {
  font-size: 18px;
  font-weight: bold;
}

.AddUpdateTyreDiscountModal .header-container {
  justify-content: space-between;
  padding: 7px 0;
  display: flex;
}

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

.TyreBrandDiscountsTable .actions-container {
  justify-content: flex-end;
  gap: 10px;
  padding-right: 5px;
  display: flex;
}

.TyreBrandDiscountsTable .action-button-container, .TyreBrandDiscountsTable .action-edit-button-container {
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  display: flex;
}

.TyreBrandDiscountsTable .action-edit-button-container {
  background: #c7eed0;
}

.TyreBrandDiscountsTable .action-button-icon-center {
  margin-bottom: 4px;
  margin-left: 2px;
}

.TyreBrandDiscountsTable .table-expand-button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.TyreBrandDiscountsTable .table-name-container {
  align-items: center;
  gap: 8px;
  display: flex;
}

.TyreBrandDiscountsTable .active-inactive-container, .TyreBrandDiscountsTable .inactive-discount, .TyreBrandDiscountsTable .active-discount {
  height: 35px;
  margin-top: -3px;
  margin-left: -12px;
  position: relative;
}

.TyreBrandDiscountsTable .active-discount {
  border-left: 3px solid #21ba45;
}

.TyreBrandDiscountsTable .inactive-discount {
  border-left: 3px solid #ff0401;
}

.TyreDiscountsTable {
  padding: 20px 10px 10px;
}

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

.TyreDiscountsTable .actions-container {
  justify-content: flex-end;
  gap: 10px;
  padding-right: 5px;
  display: flex;
}

.TyreDiscountsTable .action-button-container, .TyreDiscountsTable .action-add-button-container, .TyreDiscountsTable .action-edit-button-container {
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 28px;
  display: flex;
}

.TyreDiscountsTable .action-edit-button-container {
  background: #c7eed0;
}

.TyreDiscountsTable .action-add-button-container {
  color: #fff;
  background: #21ba45;
}

.TyreDiscountsTable .action-button-icon-center {
  margin-bottom: 4px;
  margin-left: 2px;
}

.TyreDiscountsTable .table-expand-button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.TyreDiscountsTable .table-name-container {
  align-items: center;
  gap: 8px;
  display: flex;
}

.TyreDiscountsTable .active-inactive-container, .TyreDiscountsTable .inactive-discount, .TyreDiscountsTable .active-discount {
  height: 35px;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-left: -12px;
  position: relative;
}

.TyreDiscountsTable .active-discount {
  border-left: 3px solid #21ba45;
}

.TyreDiscountsTable .inactive-discount {
  border-left: 3px solid #ff0401;
}

.TyreDiscountsDashboard .toolbar {
  gap: 15px;
  margin: 21px 9px 0 22px;
  display: flex;
}

.TyreDiscountsDashboard .add-button, .TyreDiscountsDashboard button.ui.icon.labeled {
  color: #000;
  font-weight: bold;
}

.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;
}

.CreateUserModal.ui.modal > .content {
  padding: 0;
}

.CreateUserModal.ui.modal > .actions > .action-buttons-container {
  width: 100%;
}

.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 .checkboxes-container {
  justify-content: space-between;
  margin-top: 25px;
  display: flex;
}

.CreateUserModal .checkboxes-container.split-container {
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.CreateUserModal .padding-container {
  padding: 2rem;
}

.CreateUserModal .header-container {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-right: 30px;
  display: flex;
}

.CreateUserModal .header-checkbox-container {
  justify-content: flex-end;
  gap: 10px;
  font-size: 14px;
  font-weight: bold;
  display: flex;
}

.CreateUserModal .header-checkbox-container div {
  text-transform: capitalize;
}

.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;
  width: 100%;
  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__pair-user-text {
  white-space: nowrap;
  color: #000;
  margin-right: 11px;
}

.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;
}

.AppointmentPeriodDropdown .ui.dropdown > .text {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: stretch;
  transition: none;
  display: inline-block;
  overflow: hidden;
}

.DatePickerContainer {
  margin-top: -30px;
  margin-left: 255px;
}

.PinPeriodDropdown .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;
}

.WarrantyExportModal__export-file-container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 24px;
  display: flex;
}

.WarrantyExportModal__export-modal-close-button-container {
  margin: 1px 1px 0 5px;
}

.WarrantyExportModal__export-modal-close-button.button {
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
}

.WarrantyExportModal__export-modal-content-text {
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 19px 0;
  font-size: 17px;
  display: flex;
}

.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-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 {
  gap: 15px;
  padding: 22px 0 22px 22px;
  display: flex;
}