label,
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=tel],
textarea,
select {
  outline: none;
  transition: 0.2s ease all;
  border-radius: 6px 6px 0 0;
}

input.input-number-no-arrow::-webkit-outer-spin-button,
input.input-number-no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input.input-number-no-arrow[type=number] {
  -moz-appearance: textfield;
}

input::placeholder {
  color: var(--gray6);
  font-weight: 400;
  font-size: 13px;
}

label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: #3D3D3D;
  font-weight: 600;
}

label[for] {
  cursor: pointer;
}

label.required:after {
  content: "*";
}

input[type=text]:not(.incognito),
input[type=email],
input[type=password],
input[type=number],
input[type=tel],
textarea,
input[type=datetime-local] {
  height: 48px;
  padding: 10px 20px;
  font-size: 13px;
  background-color: #F9F9F9;
  border: none;
  border-bottom: 1px var(--gray3) solid;
}

:where(input[type=text]:not(.incognito), input[type=email], input[type=password], input[type=number], input[type=tel]).small {
  height: 36px !important;
}

input[type=text]:not(.incognito):hover,
input[type=email]:hover,
input[type=password]:hover,
textarea:hover {
  outline: none;
  background-color: #F2F6F7;
}

input[type=text]:not(.incognito):focus,
input[type=email]:focus,
input[type=password]:focus,
textarea:focus {
  outline: none;
  background-color: #E5E9EA;
  border-bottom: 1px solid var(--blue);
}

input:disabled {
  background-color: #D9D9D9 !important;
  cursor: not-allowed !important;
  border-bottom: 1px var(--gray2) solid;
}

input:out-of-range {
  border-bottom: 1px solid #DC3838 !important;
  background: #FEF9FA !important;
}

input:out-of-range+.error-message {
  display: block;
}

input[type=text]:not(.incognito):invalid {
  background-color: #ffdddd;
}

textarea {
  background-color: #F9F9F9;
  padding: 10px;
  resize: none;
  min-height: 100px;
  border-bottom: 1px var(--gray3) solid;
}

textarea.case-form-textarea {
  border-bottom: none;
  background-color: white;
}

textarea.case-form-textarea:focus {
  background-color: #E5E9EA;
  border-bottom: 1px solid var(--blue);
}

trix-editor.case-form-textarea:focus {
  border-bottom: 1px solid var(--blue);
}

trix-editor ol,
trix-editor ul {
  list-style: revert;
  margin: revert;
  padding: revert;
}

trix-editor ol {
  list-style-type: decimal;
}

trix-editor h1,
trix-editor h2,
trix-editor h3,
trix-editor h4,
trix-editor h5,
trix-editor h6 {
  font-size: revert;
  font-weight: revert;
}

trix-editor blockquote {
  margin: revert;
  border: 0 solid #ccc;
  border-left-width: .3em;
  margin-left: .3em;
  padding-left: .6em;
}

.richtext-format ol,
.richtext-format ul {
  list-style: revert;
  margin: revert;
  padding: revert;
}

.richtext-format ol {
  list-style-type: decimal;
}

.richtext-format h1,
.richtext-format h2,
.richtext-format h3,
.richtext-format h4,
.richtext-format h5,
.richtext-format h6 {
  font-size: revert;
  font-weight: revert;
}

.richtext-format blockquote {
  margin: revert;
}

.new-message-input-field trix-editor .attachment {
  display: inline-block !important;
  color: #007FAD;
  font-weight: 500;
}

.message .attachment:has([data-target="user-tag"]) {
  display: inline-block !important;
}

.message .taggable {
  display: inline-block !important;
  color: #007FAD;
  font-weight: 500;
}

.message .untaggable {
  display: inline-block !important;
  color: #868686;
  font-weight: 500;
}

/*
  Reference:
  https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
*/
.textarea-grow-wrap {
  display: grid;
}

.textarea-grow-wrap::after {
  content: attr(data-replicated-value) " ";
  white-space: pre-wrap;
  visibility: hidden;
}

.textarea-grow-wrap>textarea {
  height: initial;
  resize: none;
  overflow: hidden;
}

.textarea-grow-wrap>textarea:placeholder-shown {
  min-height: 42px;
  max-height: 42px;
}

.textarea-grow-wrap>textarea,
.textarea-grow-wrap::after {
  padding: 0.5rem;
  font: inherit;
  grid-area: 1 / 1 / 2 / 2;
}

input.clean {
  border-bottom: none;
  border: solid lightgray 1px;
  background-color: inherit;
}

/* select */
select {
  padding: 10px 35px 10px 20px;
  background-color: #F9F9F9;
  border: solid 1px transparent;
  border-bottom: 1px var(--gray3) solid;
  height: 48px;
  min-width: 257px;
  border-radius: 2px;

  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(/assets/icons/chevron-down-f78810937dffa146fbd1ec97bffd38c35094b3aa999df4cc30e5edcc8ee9df45.svg);
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  font-family: "Lucida-Bold";
  font-size: 14px;
  color: var(--darkgray);
}

select option {
  font-family: 'Montserrat', sans-serif;
}

select:focus {
  background-image: url(/assets/icons/chevron-up-8a87df0d6b8fd4b5d8a3e42928c2d08d6fc8d60dcf37a7307d75d114eb8df76e.svg);
}

select.sm {
  border: none;
  background-color: transparent;
  border: none;
  width: 50px;
  min-width: auto;
  padding: 0;
}

select option {
  color: var(--gray6);
}

/* Base for label styling */
[type="checkbox"],
[type="radio"] {
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;

  width: 0.95em;
  height: 0.95em;

  transform: translateY(0.15em);

  border: solid var(--gray8) 0.075em;
  background: var(--gray1);
  cursor: pointer;
  transition: all .275s;
}

[type="checkbox"] {
  background-size: 0%;
  background-repeat: no-repeat;
  background-position: 50%;
  background-image: url(/assets/icons/check-53e5f6604e1e48f77f8cec1fdef24d20978b9f7aadcd59d31402aba839f88ed0.svg);
}

[type="radio"] {
  border-radius: 50%;
}

[type="checkbox"]:checked {
  background-size: 80%;
  background-color: var(--gray8);
}

[type="radio"]:checked {
  background-color: var(--gray8);
  box-shadow: inset 0 0 0 0.12em var(--gray1);
}

[type="radio"]:checked:focus {
  box-shadow: inset 0 0 0 0.12em var(--gray1), inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 6px rgba(0, 174, 293, 0.2);
}

[type="checkbox"]+label,
[type="radio"]+label {
  display: inline-block;
  margin-left: 10px;
}

[type="checkbox"]:not(:disabled)+label,
[type="radio"]:not(:disabled)+label {
  cursor: pointer;
}

[data-filter-type="dropdown"] [type="checkbox"] {
  border: 2px solid #000000;
  background: "#FFFFFF";
}

/* Disabled checkbox */
[type="checkbox"]:disabled,
[type="radio"]:disabled {
  box-shadow: none;
  border-color: var(--gray3);
  background-color: var(--gray2);
}

[type="checkbox"]:disabled+label,
[type="radio"]:disabled+label {
  color: var(--gray3);
}

/* Accessibility */
[type="checkbox"]:focus {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 6px rgba(0, 174, 293, 0.2);
}

[type="radio"]:focus {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 0 6px rgba(0, 174, 293, 0.2);
}

/* Error */
[type="checkbox"].error,
[type="radio"].error,
input[type="text"]:not(.incognito).error {
  border-color: var(--red1);
}

input[type="text"]:not(.incognito).error {
  background-color: #FEF9FA;
}

.autoComplete_wrapper.valid+.absolute {
  visibility: visible;
}

.autoComplete_wrapper.error~.text-red-notify {
  visibility: visible;
}

.autoComplete_wrapper.error~.text-red-notify.hidden {
  display: block;
}

/*  */

input[type=date] {
  height: 48px;
  border: solid lightgray 1px;
  padding: 20px;
  outline: none;
}

select:focus,
input[type=date]:focus {
  border: solid var(--blue) 1px;
}

.alert-border {
  border-bottom: solid 1px red !important;
  background-color: #FEF9FA !important;
}

.error-input-wrapper {
  position: relative;
}

.error-message {
  color: #DC3838;
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}

.error-symbol {
  color: white;
  background-color: #F24747;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  position: absolute;
  right: 16px;
  top: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

.error-input-wrapper.show input {
  border-bottom: solid 1px red !important;
  background-color: #FEF9FA !important;
}

.error-input-wrapper .error-message,
.error-input-wrapper .error-symbol {
  display: none;
}

.error-input-wrapper.show .error-message,
.error-input-wrapper.show .error-symbol {
  display: block;
}

.button-to-inline-wrapper,
.button-to-inline-wrapper form {
  display: inline;
}

/* reference: */
/* https://xd.adobe.com/view/4e3e9058-ade3-4123-9883-19eb53f18186-1b6d/specs/ */

.field_with_errors :where(input[type=text]:not(.incognito), input[type=email], input[type=password], input[type=number], input[type=tel], textarea, select) {
  border-bottom-color: var(--red-notify);
}

.field_with_errors {
  position: relative;
}

/* Select the second .field_with_errors because the first one is always a wrapper for the label */
.field_with_errors~.field_with_errors:after {
  content: "!";
  color: white;
  background-color: var(--red-notify);
  width: 20px;
  height: 20px;
  border-radius: 100%;
  position: absolute;
  right: 16px;
  top: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

.form-error {
  color: var(--red1);
}

.autoComplete_wrapper {
  position: relative;
}


/* pill search */
#pill-search {
  height: 40px;
  padding-left: 16px;
  padding-right: 16px;
  border: 1px solid transparent;
  border-radius: 10px;
}

@media screen and (min-width: 768px) {
  .pill-search {
    min-width: 350px;
  }
}


#pill-search input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

#pill-search input[type=search] {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid transparent;
}

#pill-search input[type=search]:focus {
  outline: none;
}

#pill-search:focus-within {
  border-color: var(--blue);
  outline: none;
}

#pill-search>input[type=search].error {
  border-color: var(--red1);
}

.form-input-symbol-wrapper {
  display: flex;
  align-items: center;

  background-color: #F9F9F9;
  border: none;
  border-bottom: 1px solid var(--gray3);
  border-radius: 6px 6px 0 0;
}

.form-input-symbol-wrapper:hover {
  outline: none;
  background-color: #F2F6F7;
}

.form-input-symbol-wrapper:focus-within {
  outline: none;
  background-color: #E5E9EA;
  border-bottom: 1px solid var(--blue);
}

.form-input-symbol-wrapper.error {
  border-bottom: solid 1px red !important;
  background-color: #FEF9FA !important;
}

.form-input-symbol-wrapper.error:has(select) {
  border: solid 1px red !important;
  background-color: #FEF9FA !important;
  border-radius: 6px;
}

.form-input-symbol-wrapper.error .icon-container {
  display: block;
}

.form-input-symbol-wrapper input,
.form-input-symbol-wrapper textarea,
.form-input-symbol-wrapper select {
  background-color: transparent !important;
  border: 0 !important;
  height: 47px !important;
  padding: 15px !important;
  outline: none !important;
}

.form-input-symbol-wrapper .field_with_errors {
  flex-grow: 1;
}

@media (min-width: 335px) and (max-width: 385px) {
  .mb-resposive-card {
    margin-left: -25px;
    margin-right: -25px;
  }
}

@media (min-width: 320px) and (max-width: 334px) {
  .mb-resposive-card {
    margin-left: -35px;
    margin-right: -35px;
  }
}

@media (min-width: 320px) and (max-width: 499px) {
  .resposive-jira-text {
    width: -webkit-fill-available !important;
  }
}

.fixed-header {
  box-shadow: 0px 4px 6px -1px #0000001A;
  position: fixed;
  z-index: 10;
  width: 86%;
  height: 118px;
  background-color: #FFFFFF;
  radius: 8px;
  padding: 16px;
  margin-left: -15px;
  gap: 8px;
  top: 0;
}

@media (min-width: 320px) and (max-width: 380px) {
  .truck-up-down-mb-responsive {
    width: 255px;
    margin-left: -15px;
  }
}

.ss-content .ss-list .ss-option:hover {
  color: black !important;
  background-color: #F9F9F9 !important;
}

.ss-content .ss-list .ss-option.ss-highlighted,
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
  background-color: #F9F9F9 !important;
  color: black !important;
}

.slim-select .ss-dropdown {
  border-color: blue !important;
}

.ss-main {
  padding: 10px 35px 10px 20px !important;
  background-color: #F9F9F9 !important;
  border: solid 1px transparent !important;
  border-bottom: 1px var(--gray3) solid !important;
  height: 48px !important;
  min-width: 257px !important;
  border-radius: 2px !important;

  position: relative !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 12px !important;
  font-family: "Lucida-Bold" !important;
  font-size: 14px !important;
  color: var(--darkgray) !important;
}

.ss-content .ss-list .ss-option {
  color: var(--gray6) !important;
  font-family: 'Montserrat', sans-serif !important;
}

.ss-main .ss-arrow {
  margin-right: -20px !important;
}

.date-picker {
  position: absolute;
  top: 65%;
  right: 10px;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
  font-size: 16px;
}

.delete-draft-case {
  color: #BA2A2A !important;
  border: solid 2px #BA2A2A !important;
}

.delete-draft-case:hover {
  background-color: white !important;
}

.dot-before::before {
  content: "• ";
  color: black;
  font-size: 1em;
}

.cross-before::before {
  position: relative;
  content: "\00d7";
  color: white;
  width: 12px;
  height: 12px;
  top: 0.67px;
  left: 0.67px;
  font-size: 1.25em;
  margin-right: 0.3rem;
}

.no-wrap-select .ss-values {
  text-wrap: nowrap;
  overflow: hidden;
}

.empty-vin-input .hide-on-empty {
  visibility: hidden;
  display: none;
}

.submitting form {
  cursor: progress;
}

.submitting form>* {
  pointer-events: none;
}