/* screen - popup-technician */

.popup-technician {
  align-items: center;
  background-color: var(--white);
  border: 1px none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /*min-width: 616px;*/
  /*padding: 32px 48px 48px;*/
  position: relative;
}

.popup-technician .frame-2608576 {
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
}

.popup-technician .close-default-1 {
  height: 24px;
  margin-right: -11244.00px;
  margin-top: -1254.00px;
  min-width: 24px;
  position: relative;
}

.popup-technician .title {
  color: var(--azure-radiance);
  font-family: var(--font-family-sf_pro-semibold);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 36px;
  /*margin-left: -11564.5px;*/
  position: relative;
  white-space: nowrap;
  width: fit-content;
  margin-bottom: 10px;
}

.popup-technician .icon-close {
  height: 28px;
  /*margin-left: -11564.5px;*/
  min-width: 28px;
  position: relative;
}

.popup-technician .input-large {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--gray-4);
  border-radius: 8px;
  display: flex;
  height: 48px;
  justify-content: space-between;
  padding: 20px 16px;
  position: relative;
  width: 100%;
}

.popup-technician .content {
  color: var(--gray-3);
  font-family: var(--font-family-sf_pro-medium);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-bottom: -5.50px;
  margin-top: -7.50px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.popup-technician .icon-search {
  height: 16px;
  margin-bottom: -4.00px;
  margin-top: -4.00px;
  min-width: 16px;
  position: relative;
}

.popup-technician .frame-2608565 {
  align-items: flex-start;
  align-self: stretch;
  flex-direction: column;
  gap: 16px;
}

.popup-technician .content-1 {
  color: var(--gray-3);
  font-family: var(--font-family-sf_pro-regular);
  font-size: var(--font-size-m);
  font-weight: 400;
  letter-spacing: 0.29px;
  line-height: 18px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.popup-technician .frame-2608552 {
  align-items: center;
  align-self: stretch;
  border: 1px solid;
  border-color: var(--gray-5);
  border-radius: 8px;
  gap: 4px;
  padding: 12px;
}

.popup-technician .service {
  align-items: flex-start;
  border-radius: 60px;
  display: flex;
  position: relative;
  width: fit-content;
}

.popup-technician .quotation-status {
  align-items: center;
  background-color: #007aff1a;
  border-radius: 60px;
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 4px 8px;
  position: relative;
  width: fit-content;
}

.popup-technician .avatar-1 {
  background-image: url(../images/modal_tech/rectangle-349@2x.png);
  height: 32px;
  min-width: 32px;
  margin-left: 0px;
}

.popup-technician .pedicure {
  color: var(--azure-radiance);
  font-family: var(--font-family-sf_pro-medium);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.34px;
  line-height: 21px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.popup-technician .close-default {
  height: 16px;
  min-width: 16px;
  position: relative;
}

.popup-technician .avatar-2 {
  background-image: url(../images/modal_tech/rectangle-349-1@2x.png);
  height: 32px;
  min-width: 32px;
  margin-left: 0px;
}

.popup-technician .quotation-status-1 {
  align-items: center;
  background-color: var(--orange);
  border-radius: 60px;
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 4px 8px;
  position: relative;
  width: fit-content;
}

.popup-technician .pedicure-1 {
  color: var(--white);
  font-family: var(--font-family-sf_pro-medium);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.popup-technician .frame-2608520 {
  align-items: center;
  flex-direction: column;
  gap: 20px;
  width: fit-content;
  max-height: 500px;
}

.popup-technician .frame-2608516 {
  align-items: flex-start;
  flex-direction: row;
  width: fit-content;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.5rem !important;
}

.popup-technician .frame-260851 {
  align-items: flex-start;
  gap: 3.6%;
  width: fit-content;
}

.popup-technician .frame-260851-1 {
  background-color: #F1F1F4;
}

.popup-technician .avatar {
  /*background-image: url(../images/modal_tech/rectangle-349-2@2x.png);*/
  background-position: 50% 50%;
  background-size: cover;
  border: 3px solid;
  border-color: var(--white);
  border-radius: 100px;
  height: 64px;
  min-width: 64px;
  position: relative;
}

.popup-technician .active .avatar {
  border: 4px solid white;
}

.popup-technician .frame-2608556 {
  align-items: flex-start;
  align-self: stretch;
  flex-direction: column;
  gap: 4px;
}

.popup-technician .jenifer {
  align-self: stretch;
  letter-spacing: 0.38px;
  line-height: 24px;
  position: relative;
  text-align: center;
  white-space: nowrap;
}

.popup-technician .staff-name {
  align-self: stretch;
  letter-spacing: 0.29px;
  line-height: 18px;
  position: relative;
  text-align: center;
  white-space: nowrap;
}

.popup-technician .avatar-3 {
  background-image: url(../images/modal_tech/rectangle-349-3@2x.png);
  height: 64px;
  min-width: 64px;
}

.popup-technician .frame-active {
  background-color: #006afe80;
  font-weight: 510;
}

.popup-technician .avatar-4 {
  background-image: url(../images/modal_tech/rectangle-349-4@2x.png);
  height: 64px;
  min-width: 64px;
}

.popup-technician .frame-2608557 {
  align-items: center;
  align-self: stretch;
  flex-direction: column;
  gap: 4px;
}

.popup-technician .staff-name-1 {
  align-self: stretch;
  color: var(--gray-2);
  font-family: var(--font-family-sf_pro-medium);
  font-size: var(--font-size-m);
  font-weight: 500;
  letter-spacing: 0.29px;
  line-height: 18px;
  position: relative;
  text-align: center;
  white-space: nowrap;
}

.popup-technician .icon-solidcheck {
  height: 24px;
  right: 6px;
  position: absolute;
  top: 6px;
  width: 24px;
  background-color: white;
  border-radius: 50%;
}

.popup-technician .avatar-5 {
  background-image: url(../images/modal_tech/rectangle-349-5@2x.png);
  height: 64px;
  min-width: 64px;
}

.popup-technician .frame-2608514 {
  align-items: flex-start;
  gap: 3.6%;
  width: 448px;
}

.popup-technician .avatar-6 {
  background-image: url(../images/modal_tech/rectangle-349-6@2x.png);
  height: 64px;
  min-width: 64px;
}

.popup-technician .avatar-7 {
  background-image: url(../images/modal_tech/rectangle-349-7@2x.png);
  height: 64px;
  min-width: 64px;
}

.popup-technician .avatar-8 {
  background-image: url(../images/modal_tech/rectangle-349-8@2x.png);
  height: 64px;
  min-width: 64px;
}

.popup-technician .frame-2608515 {
  align-items: center;
  background-color: var(--mountain-mist);
  border-radius: 12px;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  margin-right: -72.00px;
  padding: 24px 16px 16px;
  width: 112px;
}

.popup-technician .avatar-9 {
  background-image: url(../images/modal_tech/rectangle-349-9@2x.png);
  height: 64px;
  min-width: 64px;
}

.popup-technician .avatar-10 {
  background-image: url(../images/modal_tech/rectangle-349-10@2x.png);
  height: 64px;
  min-width: 64px;
}

.popup-technician .avatar-11 {
  background-image: url(../images/modal_tech/rectangle-349-11@2x.png);
  height: 64px;
  min-width: 64px;
}

.popup-technician .avatar-12 {
  background-image: url(../images/modal_tech/rectangle-349-12@2x.png);
  height: 64px;
  min-width: 64px;
}

.popup-technician .avatar-13 {
  background-position: 50% 50%;
  background-size: cover;
  /*border: 3px solid;*/
  border-color: var(--white);
  border-radius: 100px;
  position: relative;
}

.popup-technician .frame {
  display: flex;
  position: relative;
  width: 100%;
  overflow-y: auto;
}

.popup-technician .frame-260851-3 {
  align-items: center;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  padding: 24px 16px 16px;
  position: relative;
  width: calc(100% /2 - 0.75rem);
}

.popup-technician.sign-in .frame-260851-3 {
  width: calc((100% - 3rem) / 6);
}

@media (min-width: 1024px) {
  .popup-technician.sign-in .frame-260851-3 {
    width: calc((100% - 8rem) / 5);
    min-height: 170px;
  }
}


.sfpro-medium-mine-shaft-16px {
  color: var(--gray-1);
  font-family: var(--font-family-sf_pro-medium);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
}

.popup-input-technician {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100%;
  gap:32px
}
.popup-input-technician .form-check-label{
  color: var(--Gray-1, #333);
  font-feature-settings: 'salt' on;

  /* Body M */
  font-family: SF Pro;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 21px */
  letter-spacing: 0.336px;
}
.popup-input-technician .form-check-input{
  width: 20px;
  height: 20px;
}
.popup-technician .frame-2608554{
  flex-direction: column;
  gap: 4px;
}

.popup-technician .custom-checkbox-1 {
  background-color: var(--mountain-mist);
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  padding: 5px;
  position: relative;
  display: flex;
  margin: 0 auto;
}
.popup-technician .custom-checkbox-1 input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  top: 0;
  left: 0;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}
.popup-technician .custom-checkbox-1 span {
  background: transparent;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  text-align: center;
  width: 50%;
  display: inline-block;
  padding: 0.5rem 4rem;
  font-weight: bold;
}
.popup-technician .custom-checkbox-1 input:not(:checked) ~ span:nth-child(2),
.popup-technician .custom-checkbox-1 input:checked ~ span:nth-child(3){
  /* background: #fff;
  color: var(--azure-radiance); */

  color: #fff;
  background: var(--azure-radiance);
}

.popup-technician article.frame-260851-1.frame-260851-3.active {
  position: relative;
  background-color: #007aff !important; /* Replace with your desired color */
  color: white;
}
.popup-technician article.frame-260851-1.frame-260851-3.active:after {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background-image: url(/images/modal_tech/icon-solid-check.svg);
  position: absolute;
  right: 0.25rem;
  top: .25rem;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
  background-color: #fff;
}

#modalAddTechnicianToCheckin .modal-dialog {
  max-width: 100%;
  height: calc(100vh - 8rem) !important;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

#modalSchedule .modal-content {
  min-width: 820px !important;
  width: 820px !important;
}

#modalSchedule .popup-technician.sign-in .frame-260851-3 {
  width: calc((100% - 5rem) / 3);
  margin: 0.5rem;
}

#modalSchedule .modal-dialog {
  /*height: calc(100vh - 8rem) !important;*/
  height: calc(90vh) !important;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
}

#search_staff_sign_in {
  border: 1px solid;
  border-color: var(--gray-4);
} 

#search_staff_sign_in:focus-visible {
  outline: -webkit-focus-ring-color auto 1px;
  box-shadow: none;
}
.active .sfpro-medium-mine-shaft-16px {
  color: white!important;
}
.active .sfpro-medium-gray-12px {
  color: white!important;
}

.anyone {
  min-height:170px;
  background-color: #DCEEFB!important;
}

.active.anyone {
  background-color: #007aff!important;
  color: white!important;
}

.active.anyone .sfpro-medium-mine-shaft-16px{
  color: white!important;
}

.popup-technician .staff-card {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px; /* Subtle initial shadow */
  transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
  background-color: #F1F1F4;
  margin: 0.5rem;
}

.popup-technician .staff-card:hover {
  color: #007aff !important; /* Highlight text color */
  background-color: var(--light-blue) !important; /* Highlight background */
  transform: translateY(-5px); /* Subtle upward movement on hover */
  box-shadow: rgba(0, 122, 255, 0.6) 0px 6px 8px, rgba(0, 0, 0, 0.1) 0px 4px 8px; /* Enhanced shadow on hover */
  cursor: pointer; /* Indicate interactivity */
}