/*!**************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./front/styles_new/components/salesperson_list.scss ***!
  \**************************************************************************************************************************************************************************************/
:root {
  --wcag-focus-outline: 0 0 0 2px white, 0 0 0 4px black;
  --black: #0A0A0A;
  --white: #fff;
  --grey-0: #F6F6F6;
  --grey: #eeeeee;
  --grey-2: #bbbbbb;
  --grey-3: #8f8f8f;
  --grey-4: #555;
  --grey-5: #2A2A2A;
  --red: #E41111;
  --red-pale: #FE8686;
  --red-lighter: #FE5a5a;
  --yellow: #F5B800;
  --yellow-pale: #FFE79E;
  --yellow-lighter: #FFD862;
  --blue: #24377A;
  --blue-pale: #DCE2F6;
  --blue-lighter: #6174B9;
  --error: #CD1C27;
  --warning: #FF9900;
  --positive: #41862D;
}

@-webkit-keyframes fill-pagination {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes fill-pagination {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.link-common {
  cursor: pointer;
  margin: 0 auto;
  font-style: normal;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  font-size: 16px;
  color: #24377a;
  background-color: transparent;
  border-bottom: 2px solid #f5b800;
}
.link-common:hover {
  background-color: #f5b800;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.salesperson-list {
  background-color: var(--grey-0);
  padding: 12px 12px 12px 12px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 16px;
}
@media (min-width: 768px) {
  .salesperson-list {
    padding: 12px 12px 12px 12px;
  }
}
.salesperson-list .salesperson-heading {
  text-align: center;
  margin-top: 24px;
  margin-bottom: 12px;
}
.salesperson-list .salesperson-body {
  background-color: var(--grey-0);
  padding: 3px 12px 12px 12px;
  border-radius: 16px;
}
@media (min-width: 768px) {
  .salesperson-list .salesperson-body {
    padding: 3px 12px 12px 12px;
  }
}
.salesperson-list .salesperson-body .contactStepsContainer__selects {
  margin: 12px 0px 12px 0px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.salesperson-list .salesperson-body .contactStepsContainer__selects .custom-select-container {
  min-width: 280px;
  color: var(--black);
}
.salesperson-list .salesperson-body .contactStepsContainer__selects .btn.disabled {
  color: grey;
  pointer-events: none;
  cursor: default;
  background: var(--grey-0);
}
.salesperson-list .salesperson-body .no-results-message {
  display: none;
  border-radius: 8px;
  background-color: var(--blue-pale);
  margin: 24px 10px 0 10px;
  padding: 10px 16px 2px 16px;
  color: var(--black);
}
.salesperson-list .salesperson-body .result-message {
  display: none;
  margin: 24px 12px 24px 12px;
}
.salesperson-list .salesperson-body .result-message p {
  font-size: 16px;
}
.salesperson-list .salesperson-body .persons-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 12px 24px;
}
.salesperson-list .salesperson-body .persons-container .personCard {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  width: 100%;
  gap: 24px 12px;
  padding: 16px 20px 16px 20px;
  margin-bottom: 12px;
  border-radius: 16px;
  border: 1px solid var(--grey);
  background-color: var(--white);
  display: none;
}
@media (min-width: 768px) {
  .salesperson-list .salesperson-body .persons-container .personCard {
    width: 48.3%;
  }
}
@media (min-width: 1200px) {
  .salesperson-list .salesperson-body .persons-container .personCard {
    width: 48.9%;
  }
}
.salesperson-list .salesperson-body .persons-container .personCard .person-picture {
  width: 90px;
  height: 90px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
}
@media (min-width: 768px) {
  .salesperson-list .salesperson-body .persons-container .personCard .person-picture {
    width: 120px;
    height: 120px;
  }
}
.salesperson-list .salesperson-body .persons-container .personCard .person-details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  text-align: left;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  gap: 4px;
  padding-left: 5px;
}
.salesperson-list .salesperson-body .persons-container .personCard h4 {
  line-height: 22px;
}
.salesperson-list .salesperson-body .persons-container .personCard .person-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 8px;
  margin: 0;
  line-height: 20px;
}
.salesperson-list .salesperson-body .persons-container .personCard .person-info.phone {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  height: 100%;
}
.salesperson-list .salesperson-body .persons-container .personCard .person-info img {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
}