/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 @import url("https://ga.jspm.io/npm:slim-select@2.10.0/dist/slimselect.css");

 :root {
  --primary-color: #00CCB4;
}

 /* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
 /* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Hide arrow input number for Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide arrow input number for Firefox */
input[type=number] {
  appearance: textfield;
}

/* Custom dropdown select */
select {
  /* remove native chrome/ios/ff appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* custom arrow as SVG data URI (black chevron) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23222' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.4rem center;
  background-repeat: no-repeat;
  background-size: 1.2rem;
}

select:invalid {
  color: #a4aab2;
}

/* Custom Loading */
button .show-when-disabled,
button:disabled .show-when-enabled {
  display: none;
}
button .show-when-enabled,
button:disabled .show-when-disabled {
  display: initial;
}

/* Custom slim select */
.ss-list {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;
}
.ss-list::-webkit-scrollbar {
  display: none;
}
.ss-main {
  display: flex !important;
  padding: 7.5px 12px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  background-color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: #d1d5db;
  border-radius: 7px !important;
  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}
.ss-search {
  font-size: 14px !important;
}
.ss-content .ss-list .ss-option:hover {
  background-color: var(--primary-color) !important;
}
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
  background-color: var(--primary-color) !important;
}
.ss-main .ss-arrow {
  width: 9px;
  margin-left: 15px;
  margin-right: 0px;
}
.ss-main .ss-values .ss-placeholder {
  padding: 0;
  color: #c6c6c6;
  font-size: 14px;
  line-height: 20px;
}
.ss-main .ss-values .ss-single {
  font-size: 14px;
  line-height: 20px;
  color: #4b5563;
  margin: 0;
}
.ss-content .ss-list .ss-option {
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
}
.ss-values {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: auto;
}
.ss-content .ss-search .ss-addable {
  width: 35px;
}
.ss-content .ss-search .ss-addable svg {
  color: white;
}
.ss-main .ss-values .ss-value {
  background-color: var(--primary-color);
}
.ss-main:focus {
  border: 1px solid var(--primary-color);
  box-shadow: 0 0 0 var(--primary-color);
}
.ss-main {
  border-radius: 0.5rem;
}
.ss-search {
  color: #c6c6c6 !important;
  font-weight: 300;
  font-size: .875rem;
  line-height: 1.25rem;
}
.ss-search input {
  color: #4d4d4d;
  font-weight: 300;
  font-size: .875rem;
  line-height: 1.25rem;
}
.ss-search input:focus {
  border: 1px solid var(--primary-color);
  box-shadow: 0 0 0 var(--primary-color) !important;
}
.ss-search-highlight {
  background: none !important;
  font-weight: 500 !important;
}