/* screen - checkin */

.checkin {
  align-items: flex-start;
  background-color: #eff4f8;
  border: 1px none;
  display: flex;
  overflow: hidden;
  width: 1440px;
}

.checkin .overlap-group2 {
  position: relative;
}

.checkin .menu-container {
  height: 1045px;
}

.checkin .menu-bar {
  align-items: center;
  background-color: var(--white);
  display: flex;
  gap: 16px;
  height: 56px;
  padding: 0px 24px;
}

.checkin .frame-2608208 {
  height: 44px;
  min-width: 40px;
  opacity: 0;
  position: relative;
}

.checkin .logo-white {
  align-items: flex-end;
  display: flex;
  height: 46px;
  padding: 2.1px 2.9px;
  width: 73px;
}

.checkin .frame {
  align-items: flex-start;
  display: flex;
  gap: 13976px;
  overflow: hidden;
  width: 67px;
}

.checkin .group {
  height: 17px;
  width: 17px;
}

.checkin .group-1 {
  height: 42px;
  margin-top: -1216.09px;
  width: 67px;
}

.checkin .frame-2608209 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 1;
  gap: 8px;
  position: relative;
}

.checkin .icon-outlinechevron-double-right {
  height: 32px;
  min-width: 32px;
  position: relative;
}

.checkin .item-menu-1 {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  box-shadow: 0px 1px 0px #0066b3;
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 1px 6px;
  position: relative;
  width: fit-content;
}

.checkin .dashboard-1 {
  color: var(--azure-radiance);
  font-family: var(--font-family-sf_pro-medium);
  font-size: var(--font-size-l);
  font-weight: 500;
}

.checkin .item-menu {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  justify-content: center;
  padding: 1px 6px;
}

.checkin .icon-notifications {
  height: 24px;
  min-width: 21px;
  position: relative;
}

.checkin .frame-2608211 {
  align-items: center;
  display: flex;
  gap: 4px;
  position: relative;
  width: fit-content;
}

.checkin .avatar-5 {
  background-image: url(../images/checkin/rectangle-349@2x.png);
  border-radius: 1000px;
  height: 44px;
  min-width: 44px;
}

.checkin .frame-2608210 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  position: relative;
  width: fit-content;
}

.checkin .hai-pham {
  letter-spacing: 0.38px;
  line-height: 24px;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.checkin .manager {
  color: var(--gray-2);
  font-family: var(--font-family-sf_pro-medium);
  font-size: var(--font-size-s);
  font-weight: 500;
  letter-spacing: 0.29px;
  line-height: 18px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.checkin .side-menu {
  align-items: flex-end;
  background-color: var(--white);
  box-shadow: 0px -4px 12px #93939340;
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 1045px;
  left: 0;
  padding: 15px 5px;
  position: absolute;
  top: 0;
  width: 64px;
}

.checkin .logo-white-1 {
  align-items: center;
  display: flex;
  height: 33px;
  margin-right: 1px;
  padding: 0 2.1px;
  width: 53px;
}

.checkin .frame-1 {
  align-items: flex-start;
  display: flex;
  width: 49px;
}

.checkin .group-container {
  height: 30px;
  position: relative;
  width: 49px;
}

.checkin .group-2 {
  height: 12px;
  left: 0;
  position: absolute;
  top: 0;
  width: 12px;
}

.checkin .group-3 {
  height: 30px;
  left: 0;
  position: absolute;
  top: 0;
  width: 49px;
}

.checkin .frame-7683 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 574px;
  margin-right: 5px;
  position: relative;
  width: 44px;
}

.checkin .frame-2608551 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  width: fit-content;
}

.checkin .item-sidemenu-1 {
  align-items: flex-start;
  background-color: #007aff33;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 6px;
  position: relative;
  width: fit-content;
}

.checkin .frame-7174 {
  align-items: center;
  display: flex;
  gap: 12px;
  position: relative;
  width: fit-content;
}

.checkin .icon-solidtemplate {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.checkin .item-sidemenu {
  align-items: flex-start;
  border-radius: 4px;
  flex-direction: column;
  padding: 10px 6px;
}

.checkin .icon-soliduser-group {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.checkin .icon-solidmail {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.checkin .icon-solidbell {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.checkin .article_fill0_wght400_grad0_opsz48 {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.checkin .icon-solidusers {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.checkin .icon-solidreceipt-tax {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.checkin .icon-solidbadge-check {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.checkin .icon-solidclipboard-list {
  height: 20px;
  min-width: 20px;
  position: relative;
}

.checkin .frame-2608213 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 802px;
  left: 97px;
  position: absolute;
  top: 88px;
  width: 1312px;
}

.checkin .frame-2608213-1 {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  display: flex;
  gap: 16px;
  padding: 12px;
  position: relative;
  margin-bottom: 4px;
  min-height: 72px;
}
.checkin .frame-2608213-1 select, .checkin .frame-2608213-1 input{
  max-width: 24%;
}
.checkin .input-large-1 {
  align-items: center;
  background-color: var(--white);
  border: 1px solid;
  border-color: var(--gray-4);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  height: 48px;
  padding: 20px 16px;
  position: relative;
  width: 233px;
}

.checkin .text-input {
  margin-bottom: -5.50px;
  margin-top: -7.50px;
  /*text-align: center;*/
  white-space: nowrap;
  width: fit-content;
  width: 233px !important;
}

.checkin .input-large {
  align-items: center;
  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: 233px;
  font-size: 14px;
}

.checkin .icon-solidchevron-down {
  height: 16px;
  margin-bottom: -4.00px;
  margin-top: -4.00px;
  min-width: 16px;
  position: relative;
}

.checkin .table-col-1 {
  align-self: stretch;
  width: 52px;
}

.checkin .cell {
  align-items: center;
  align-self: stretch;
  background-color: var(--wild-sand);
  /*box-shadow: inset 0px -0.5px 0px #eeeeee;*/
  border-bottom: 1px solid #eeeeee;
  gap: 8px;
  height: 66px;
  padding: 12px 6px;
}

.checkin .text {
  white-space: nowrap;
  width: fit-content;
}

.checkin .cell-1 {
  align-items: flex-start;
  align-self: stretch;
  height: auto;
}

.checkin .atom-cell {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 1;
  gap: 10px;
  padding: 12px 6px;
  position: relative;
}

.checkin .content-2 {
  align-items: flex-start;
  display: flex;
}

.checkin .content {
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1.00px;
  white-space: normal;
}

.checkin .content-3 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-4 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-5 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-6 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-7 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-8 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-9 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-10 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-11 {
  align-items: flex-start;
  display: flex;
}

.checkin .table-col {
  flex-direction: column;
}

.checkin .atom-cell-1 {
  align-items: center;
  align-self: stretch;
  /*background-color: var(--wild-sand);*/
  /*box-shadow: inset 0px -0.5px 0px #eeeeee;*/
  /* border-bottom: 1px solid #eeeeee; */
  display: flex;
  flex: 1;
  gap: 12px;
  padding: 0;
  position: relative;
}

.checkin .right-icon {
  height: 16px;
  min-width: 16px;
  position: relative;
}

.checkin .content-12 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-13 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-14 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-15 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-16 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-17 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-18 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-19 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-20 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-21 {
  align-items: flex-start;
  display: flex;
}

.checkin .table-col-2 {
  align-self: stretch;
  width: 95px;
}

.checkin .content-22 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-23 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-24 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-25 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-26 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-27 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-28 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-29 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-30 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-31 {
  align-items: flex-start;
  display: flex;
}

.checkin .table-col-3 {
  width: 110px;
}

.checkin .cell-2 {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  /*box-shadow: inset 0px -0.5px 0px #eeeeee;*/
  border-bottom: 1px solid #eeeeee;
  gap: 16px;
  height: 66px;
  /*justify-content: center;*/
  padding: 12px 6px;
}

.checkin .quotation-status {
  align-items: center;
  border-radius: 4px;
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 4px 8px;
  position: relative;
  width: fit-content;
}

.checkin .ang-to {
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.checkin .yes-no {
  align-items: center;
  display: flex;
  position: relative;
  width: fit-content;
}

.checkin .table-col-4 {
  align-self: stretch;
  width: 115px;
}

.checkin .cell-7 {
  align-items: center;
  background-color: var(--wild-sand);
  /*box-shadow: inset 0px -0.5px 0px #eeeeee;*/
  border-bottom: 1px solid #eeeeee;
  gap: 8px;
  margin-right: -11.00px;
  padding: 12px 6px;
  width: 100%;
}

.checkin .text-1 {
  flex: 1;
  margin-top: -1.00px;
}

.checkin .cell-3 {
  align-items: flex-start;
  height: 66px;
  margin-right: -11.00px;
  width: 100%;
}

.checkin .content-32 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-33 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-34 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-35 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-36 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-37 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-38 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-39 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-40 {
  align-items: flex-start;
  display: flex;
}

.checkin .content-41 {
  align-items: flex-start;
  display: flex;
}

.checkin .table-col-5 {
  align-self: stretch;
  width: 216px;
}

.checkin .cell-4 {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--white);
  /*box-shadow: inset 0px -0.5px 0px #eeeeee;*/
  border-bottom: 1px solid #eeeeee;
  flex-direction: column;
  gap: 4px;
  height: 66px;
  justify-content: center;
  padding: 12px 6px;
}

.checkin .frame-260855 {
  align-items: flex-start;
  display: flex;
  gap: 4px;
  position: relative;
  width: fit-content;
}

.checkin .quotation-status-1 {
  align-items: center;
  background-color: var(--black-2);
  border-radius: 60px;
  gap: 4px;
  justify-content: center;
  padding: 4px 8px;
  width: fit-content;
  max-width: 100px;
  cursor: pointer;
  max-width: 100%;
}

.checkin .pedicure {
  letter-spacing: 0.29px;
  line-height: 18px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.checkin .close-default {
  height: 16px;
  min-width: 16px;
  position: absolute;
  right: 3px;
}

.checkin .frame-2608552 {
  align-items: flex-start;
  display: flex;
  gap: 4px;
  margin-top: -7.00px;
  position: relative;
  width: fit-content;
}

.checkin .service-1 {
  opacity: 0;
}

.checkin .close-default-5 {
  margin-right: -13289.50px;
  margin-top: -1538.00px;
}

.checkin .table-col-6 {
  width: 124px;
}

.checkin .cell-5 {
  align-items: center;
  align-self: stretch;
  background-color: var(--white);
  /*box-shadow: inset 0px -0.5px 0px #eeeeee;*/
  /* border-bottom: 1px solid #eeeeee; */
  gap: 16px;
  height: auto;
  /*padding: 12px 6px;*/
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.checkin .avatar {
  background-image: url(../images/checkin/rectangle-349@2x.png);
  border-radius: 100px;
  height: 32px;
  min-width: 32px;
}

.checkin .avatar-6 {
  background-image: url(../images/checkin/rectangle-349-1@2x.png);
  border-radius: 100px;
  height: 32px;
  margin-left: -8px;
  min-width: 32px;
}

.checkin .avatar-1 {
  background-image: url(../images/checkin/rectangle-349-2@2x.png);
  border-radius: 100px;
  height: 32px;
  margin-left: -8px;
  min-width: 32px;
}

.checkin .avatar-7 {
  background-image: url(../images/checkin/rectangle-349-4@2x.png);
  border-radius: 100px;
  height: 32px;
  margin-left: -8px;
  min-width: 32px;
}

.checkin .avatar-8 {
  background-image: url(../images/checkin/rectangle-349-6@2x.png);
  border-radius: 100px;
  height: 32px;
  min-width: 32px;
}

.checkin .avatar-2 {
  background-image: url(../images/checkin/rectangle-349@2x.png);
  border-radius: 100px;
  height: 32px;
  margin-left: -8px;
  min-width: 32px;
}

.checkin .avatar-9 {
  background-image: url(../images/checkin/rectangle-349-10@2x.png);
  border-radius: 100px;
  height: 32px;
  margin-left: -8px;
  min-width: 32px;
}

.checkin .avatar-3 {
  background-image: url(../images/checkin/rectangle-349-13@2x.png);
  border-radius: 100px;
  height: 32px;
  margin-left: -8px;
  min-width: 32px;
}

.checkin .avatar-4 {
  background-image: url(../images/checkin/rectangle-349-13@2x.png);
  border-radius: 100px;
  height: 32px;
  min-width: 32px;
}

.checkin .table-col-7 {
  background-color: var(--white);
  height: 726px;
  width: 120px;
}

.checkin .cell-6 {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--white);
  /*box-shadow: inset 0px -0.5px 0px #eeeeee;*/
  border-bottom: 1px solid #eeeeee;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  padding: 4px 6px;
}

.checkin .frame-2608554 {
  align-items: center;
  align-self: stretch;
  display: flex;
  gap: 8px;
  position: relative;
  width: 100px;
}

.checkin .quotation-status-9 {
  align-items: flex-start;
  flex: 1;
}

.checkin .quotation-status-2 {
  align-items: center;
  background-color: var(--azure-radiance);
  border-radius: 4px;
  flex: 1;
  gap: 4px;
  justify-content: center;
  padding: 4px 8px;
}

.checkin .ang-to-1 {
  margin-left: -1.00px;
  margin-right: -1.00px;
}

.checkin .frame-2608555 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  gap: 8px;
  position: relative;
}

.checkin .content-1 {
  letter-spacing: 0;
  line-height: 11px;
  margin-top: -1.00px;
  text-align: center;
  white-space: nowrap;
}

.checkin .sort-default {
  height: 9px;
  margin-right: -13015.50px;
  margin-top: -1482.00px;
  min-width: 16px;
  position: relative;
}

.checkin .quotation-status-10 {
  align-items: flex-start;
  flex: 1;
}

.checkin .sort-default-1 {
  margin-top: -1548.00px;
}

.checkin .quotation-status-11 {
  align-items: flex-start;
  flex: 1;
}

.checkin .sort-default-2 {
  margin-top: -1614.00px;
}

.checkin .quotation-status-12 {
  align-items: flex-start;
  flex: 1;
}

.checkin .quotation-status-3 {
  align-items: center;
  background-color: var(--appsecondary);
  border-radius: 4px;
  flex: 1;
  gap: 4px;
  justify-content: center;
  padding: 4px 8px;
}

.checkin .sort-default-3 {
  margin-top: -1680.00px;
}

.checkin .quotation-status-13 {
  align-items: flex-start;
  flex: 1;
}

.checkin .sort-default-4 {
  margin-top: -1746.00px;
}

.checkin .quotation-status-14 {
  align-items: flex-start;
  flex: 1;
}

.checkin .sort-default-5 {
  margin-top: -1812.00px;
}

.checkin .quotation-status-15 {
  align-items: flex-start;
  flex: 1;
}

.checkin .quotation-status-4 {
  align-items: center;
  background-color: var(--blue-1);
  border-radius: 4px;
  flex: 1;
  gap: 4px;
  justify-content: center;
  padding: 4px 8px;
}

.checkin .sort-default-6 {
  margin-top: -1878.00px;
}

.checkin .quotation-status-16 {
  align-items: flex-start;
  flex: 1;
}

.checkin .sort-default-7 {
  margin-top: -1944.00px;
}

.checkin .quotation-status-5 {
  align-items: center;
  flex: 1;
}

.checkin .quotation-status-17 {
  align-items: center;
  background-color: var(--gray-3);
  border-radius: 4px;
  flex: 1;
  gap: 4px;
  justify-content: center;
  padding: 4px 8px;
}

.checkin .ang-to-4 {
  color: var(--wild-sand);
  font-family: var(--font-family-sf_pro-medium);
  font-size: var(--font-size-m);
  font-weight: 500;
  margin-left: -5.00px;
  margin-right: -5.00px;
}

.checkin .quotation-status-18 {
  align-items: center;
  background-color: var(--gray-4);
  border-radius: 4px;
  flex: 1;
  gap: 4px;
  justify-content: center;
  padding: 4px 8px;
}

.checkin .ang-to-5 {
  color: var(--wild-sand);
  font-family: var(--font-family-sf_pro-medium);
  font-size: var(--font-size-m);
  font-weight: 500;
}

.checkin .table-col-8 {
  width: 113px;
}

.checkin .quotation-status-6 {
  align-items: center;
  background-color: var(--azure-radiance-2);
  border-radius: 4px;
  gap: 4px;
  justify-content: center;
  padding: 4px 8px;
  width: fit-content;
}

.checkin .quotation-status-7 {
  align-items: center;
  background-color: #2f80ed1a;
  border-radius: 4px;
  gap: 4px;
  justify-content: center;
  padding: 4px 8px;
  width: fit-content;
}

.checkin .ang-to-2 {
  color: var(--blue-1);
  font-family: var(--font-family-sf_pro-medium);
  font-size: var(--font-size-m);
  font-weight: 500;
}

.checkin .customer-type {
  align-items: flex-start;
  display: flex;
  margin-left: -5.50px;
  position: relative;
  width: fit-content;
}

.checkin .quotation-status-8 {
  align-items: center;
  background-color: #f394511a;
  border-radius: 4px;
  gap: 4px;
  justify-content: center;
  padding: 4px 8px;
  width: fit-content;
}

.checkin .ang-to-3 {
  color: var(--appsecondary);
  font-family: var(--font-family-sf_pro-medium);
  font-size: var(--font-size-m);
  font-weight: 500;
}

.checkin .cell-8 {
  align-items: flex-start;
  align-self: stretch;
  flex: 1;
}

.checkin .content-42 {
  align-items: flex-start;
  display: flex;
}

.checkin .cell-9 {
  align-items: flex-start;
  align-self: stretch;
  flex: 1;
}

.checkin .content-43 {
  align-items: flex-start;
  display: flex;
}

.checkin .cell-10 {
  align-items: flex-start;
  align-self: stretch;
  flex: 1;
}

.checkin .content-44 {
  align-items: flex-start;
  display: flex;
}

.checkin .cell-11 {
  align-items: flex-start;
  align-self: stretch;
  flex: 1;
}

.checkin .content-45 {
  align-items: flex-start;
  display: flex;
}

.checkin .cell-12 {
  align-items: flex-start;
  align-self: stretch;
  flex: 1;
}

.checkin .content-46 {
  align-items: flex-start;
  display: flex;
}

.checkin .cell-13 {
  align-items: flex-start;
  align-self: stretch;
  flex: 1;
}

.checkin .content-47 {
  align-items: flex-start;
  display: flex;
}

.checkin .cell-14 {
  align-items: flex-start;
  align-self: stretch;
  flex: 1;
}

.checkin .content-48 {
  align-items: flex-start;
  display: flex;
}

.checkin .cell-15 {
  align-items: flex-start;
  align-self: stretch;
  flex: 1;
}

.checkin .content-49 {
  align-items: flex-start;
  display: flex;
}

.checkin .cell-16 {
  align-items: flex-start;
  align-self: stretch;
  flex: 1;
}

.checkin .content-50 {
  align-items: flex-start;
  display: flex;
}

.checkin .cell-17 {
  align-items: flex-start;
  align-self: stretch;
  flex: 1;
}

.checkin .content-51 {
  align-items: flex-start;
  display: flex;
}

.checkin .add-10 {
  height: 16px;
  left: 5.5px;
  position: absolute;
  top: 5px;
  width: 16px;
}

.checkin .ang-to-6 {
  letter-spacing: 0.34px;
  line-height: 21px;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.checkin .avatar-10 {
  background-position: 50% 50%;
  background-size: cover;
  border: 3px solid;
  border-color: var(--white);
  position: relative;
}

.checkin .cell-18 {
  display: flex;
  position: relative;
}

.checkin .close-default-22 {
  height: 16px;
  min-width: 16px;
  position: relative;
}

.checkin .content-52 {
  position: relative;
  width: 100%;
}

.checkin .content-52 .content {
  position: relative;
  width: 100%;
}
.checkin .content-22.content-52 img {
  background-color: white;
}

.checkin .content-52:hover::after {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  padding: 8px;
  z-index: 999;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  font-weight: 400;
  font-size: 14px;
  color: #333;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  max-width: 300px;
}


.checkin .customer-type-9 {
  align-items: flex-start;
  display: flex;
  position: relative;
  width: fit-content;
}

.checkin .dashboard-2 {
  letter-spacing: 0.38px;
  line-height: 24px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.checkin .frame-2608552-11 {
  align-items: flex-start;
  display: flex;
  position: relative;
  width: fit-content;
}

.checkin .icon-solidchevron-down-11 {
  height: 16px;
  min-width: 16px;
  position: relative;
}

.checkin .item {
  display: flex;
  gap: 10px;
  position: relative;
  width: fit-content;
}

.checkin .menu {
  left: 0;
  position: absolute;
  top: 0;
  width: 1440px;
}

.checkin .quotation-status-19 {
  display: flex;
  position: relative;
}

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

.checkin .sort-default-8 {
  height: 9px;
  margin-right: -13015.50px;
  min-width: 16px;
  position: relative;
}

.checkin .table-1 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 1;
  position: relative;
}

.checkin .table-col-9 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  position: relative;
}

.checkin .text-2 {
  letter-spacing: 0.34px;
  line-height: 21px;
  position: relative;
}

.checkin .yes-no-6 {
  align-items: flex-start;
  display: flex;
  position: relative;
  width: fit-content;
}

.customer-new {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 150%;
  display: flex;
  align-items: center;
  font-feature-settings: 'salt' on;
  color: #27AE60;
}
.customer-regular {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 150%;
  display: flex;
  align-items: center;
  font-feature-settings: 'salt' on;
  color: var(--dark-blue);
}
.customer-not-regular {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 150%;
  display: flex;
  align-items: center;
  font-feature-settings: 'salt' on;
  color: #F39451;
}

.checkin .component-1-1 {
  align-items: center;
  background-color: var(--blue-1);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  height: 48px;
  justify-content: center;
  padding: 1px 20px;
  position: relative;
  width: 130px;
  color: white;
  float: right;
  cursor: pointer;
}
#table-body{
  display: grid;
  /*flex-direction: column;*/
}
#table-body .notes .cell-5{
  border-bottom: 0 !important;
  justify-content: center;
}
.table-customer {
  background: #ffffff !important;
  align-items: center !important;
  height: 100%;
  margin-bottom: 0 !important;
  border-bottom: 1px solid #ccc !important;
}
.table-customer:nth-child(even){
  background: #F3F4F6 !important;
}
.checkin .table-customer:nth-child(odd) .atom-cell{
  background: #ffffff !important;
}
.checkin .table-customer:nth-child(even) .atom-cell,
.checkin .table-customer:nth-child(even) .services-list .services-item,
.checkin .table-customer:nth-child(even) .cell-5{
  /*background: #F3F4F6 !important;*/
}
.checkin .table-customer a{
  cursor: pointer;
}
.checkin .table-customer a#popup-services{
  display: flex;
  justify-content: center;
  padding: 4px 8px;
  color: var(--dark-blue);
  font-size: 12px;
  font-style: normal;
  font-weight: 510;
  line-height: 150%;
  letter-spacing: 0.288px; 
  border-radius: 60px;
  background: rgba(0, 122, 255, 0.10);
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  max-width: 52px;
}
/* var(--dark-blue) */
.color-blue{
  color: var(--dark-blue) !important;
}
.checkin select.select-down__primary {
  align-items: center;
  background-color: var(--white);
  border: 1px solid;
  border-top-color: currentcolor;
  border-right-color: currentcolor;
  border-bottom-color: currentcolor;
  border-left-color: currentcolor;
  border-color: var(--gray-4);
  border-radius: 8px;
  display: flex;
  height: 48px;
  justify-content: space-between;
  padding: 0px 16px;
  position: relative;
  width: 233px;
  -webkit-appearance: none;
}
.checkin div.select-down__primary {
  align-items: center;
  background-color: var(--white);
  /*border: 1px solid;*/
  /*border-top-color: currentcolor;*/
  /*border-right-color: currentcolor;*/
  /*border-bottom-color: currentcolor;*/
  /*border-left-color: currentcolor;*/
  /*border-color: var(--gray-4);*/
  border-radius: 8px;
  display: flex;
  height: 48px;
  justify-content: space-between;
  /*padding: 0px 16px;*/
  position: relative;
  width: 233px;
  -webkit-appearance: none;
}
.checkin .select-down__primary{
  color: var(--gray-3);
  font-size: var(--font-size-m);
  font-weight: 400;
}
.assigned  .select-down__primary,
.preferred .select-down__primary{
  width: 150px;
  height: 36px;
  padding-left: 0px;
  padding-right: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
/* Hidden select arrow  & customize arrow*/
.checkin select.select-down__primary{
  cursor: pointer;
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari and Chrome */
  appearance:none;
  background-repeat: no-repeat;
  background-position-x: 90%;
  background-position-y: 50%;
}

/* Define color status */
.color-status-done{
  color: var(--dark-blue);
}
.color-status-working{
  color: #27AE60;
}
.color-status-waiting{
  color: #F39451;
}
.color-status-canceled{
  color: #828282;
}
.color-status-pending{
  color: #EDB900;
}
.color-status-accepting{
  color: #6FCF97;
}

.checkin .ic-dropdown{
  width: 16px;
  height: 16px;
  display: inline-flex;
}
.select-down__status + div{
  background-color: #fff;
  color: #f000;
  position: absolute;
  width: 100%;
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;

  border: none;
  border-radius: 4px;
  height: 26px !important;
  text-align: center;
  max-width: 96px;
  font-size: 12px;
  padding-right: 12px;
  padding-left: 12px;
}

.bg-status-working + div{
  background-color: #27AE60 !important;
  color: #ffffff !important;
}
.bg-status-done + div{
  background-color: var(--dark-blue) !important;
  color: #ffffff !important;
}
.bg-status-waiting + div{
  background-color: #F39451 !important;
  color: #ffffff !important;
}
.bg-status-canceled + div{
  background-color: #828282 !important;
  color: #ffffff !important;
}
.bg-status-pending + div{
  background-color: #EDB900 !important;
  color: #ffffff !important;
}
.bg-status-accepting + div{
  background-color: #6FCF97 !important;
  color: #ffffff !important;
}

/* Services list */
.services-list .services-item{
  background: #ffffff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  /*padding: 12px 6px;*/
}

.services-list .services-item:last-child{
  border-bottom: none;
}
/* Technician info */
.technician-info{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.technician-info__ava{
  margin-right: 5px;
}
.checkin .technician-info__ava img{
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 50%;
}
.technician-info__detail {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 150%;
  letter-spacing: 0.288px;
}
/* Status */
.select-down__status{
  height: 35px !important;
  outline: none;
  opacity: 0;
}
.select-down__status option{
   background-color: #ffffff !important;
   color: #000000;
}
.select-down__status select{
  background: transparent !important;
}
#table-footer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 16px
}
.current-page p{
  color: #A3A3AC;
}
.pagination-page ul{
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination-page ul li{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 13px;
  border: 1px solid #E2E2E2;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  margin: 0 5px;
  transition: all ease-in-out .3s;
  -webkit-transition: all ease-in-out .3s;
  -moz-transition: all ease-in-out .3s;
  -ms-transition: all ease-in-out .3s;
  -o-transition: all ease-in-out .3s;
}
.pagination-page ul li a{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0B0B1E;
  font-weight: 400;
  transition: all ease-in-out .3s;
  -webkit-transition: all ease-in-out .3s;
  -moz-transition: all ease-in-out .3s;
  -ms-transition: all ease-in-out .3s;
  -o-transition: all ease-in-out .3s;
}
.pagination-page ul li:hover{
  border-color: var(--dark-blue);
  transition: all ease-in-out .3s; 
  -webkit-transition: all ease-in-out .3s;
  -moz-transition: all ease-in-out .3s;
  -ms-transition: all ease-in-out .3s;
  -o-transition: all ease-in-out .3s;
}
.pagination-page ul li:hover a{
  color:var(--dark-blue);
  transition: all ease-in-out .3s;
  -webkit-transition: all ease-in-out .3s;
  -moz-transition: all ease-in-out .3s;
  -ms-transition: all ease-in-out .3s;
  -o-transition: all ease-in-out .3s;
}
.pagination-page ul li.prev-page,
.pagination-page ul li.next-page{
  width: 36px;
}
.pagination-page ul li:hover img{
  filter:invert(57%) sepia(90%) saturate(6219%) hue-rotate(199deg) brightness(100%) contrast(111%);
  -webkit-filter:invert(57%) sepia(90%) saturate(6219%) hue-rotate(199deg) brightness(100%) contrast(111%);
}
.dropdown-count-page{
  width: 132px !important;
  height: 36px !important;
}

/* Edit inline */
.wrap-edit-text{
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-left: 10px;
  min-height: 62px;
}
.wrap-edit-text .edit-input {
  width: 115px;
}
.wrap-edit-text .edit-input input{
  max-width: 100%;
  height: 36px;
  padding: 17px 16px;
  border: 1px solid;
  border-color: var(--gray-4);
  border-radius: 8px;
  color: var(--Gray-1, #333);
  font-family: SF Pro;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 21px */ 
  outline: none;
  margin-right: 8px;
}
.customer-name .atom-cell{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.customer-name article.cell-1{
  align-items: center;
}
.services-list .services-item .pedicure {
  padding-right: 15px;
  width: 100%;
  max-width: 100px;
}
.services-list .services-item .pedicure p{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/* Responsive */
@media only screen and (max-width: 1560px) {
  select.select-down__status{
    width: 100%;
    padding: 0 8px;
    font-size: 12px;
  }
  .wrap-edit-text .edit-input input{
    width: 100%;
  }
  .wrap-edit-text .edit-action{
    width:auto;
    display: flex;
  }
  .wrap-edit-text .edit-action a{
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wrap-edit-text .edit-action a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .wrap-edit-text .edit-action .edit-canceled{
    margin-right: 5px;
  }
}
.checkin .note {
  white-space: normal !important;
  text-align: center;
}
.checkin .select-down__status.select-down__primary {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding-right: 18px;
  position: relative;
  z-index: 2;
}
.checkin .table-col.action .action-item {
  padding: 0;
  /*justify-content: flex-end;*/
}
.checkin .table-col.action .action-item img {
  max-width: 80%;
  width: 20px;
}
.checkin .btn-add-service {
  position: relative;
  padding-left: 19px !important;
  text-overflow: ellipsis;
  overflow: hidden !important;
  white-space: nowrap !important;
  display: block !important;
}
.checkin .btn-add-service img {
  position: absolute;
  left: 3px;
  top: 5px;
  width: 16px;
}

.checkin .sfpro-normal-mine-shaft-14px {
  font-weight:  normal;
}

.checkin .count-page {
  position: relative;
}

.checkin .group-row {
  display:flex; 
  align-items: center;
}
.checkin .group-row:not(:last-child) {
  border-bottom: 0.5px solid #ccc;
}

.checkin .group-row:not(:first-child) .icon-add {
  /*opacity: 0;*/
  /*position: absolute;*/
  /*z-index: -1;*/
  /*top: 100%;*/
}

.checkin .group-row:first-child .icon-delete {
  opacity: 0;
  position: absolute;
  z-index: -1;
  top: 100%;
}

.checkin .input-group-append {
  margin-top: -1px;
}

.checkin #table-header * {
  font-weight: 590 !important;
  height: 100%;
}

.checkin #modalTech .popup-technician .input-group > input {
  border-right: none;
}
.checkin #modalTech .popup-technician .input-group-append button {
  border-left: none;
}
.group-row .status-item select.select-down__primary {
  border: none;
  border-radius: 4px;
  height: 26px !important;
  text-align: center;
  max-width: 96px;
  font-size: 12px;
  padding-right: 12px;
  padding-left: 12px;
}

.checkin .btn-inner {
  width: 34px;
  position: relative;
  max-width: 100%;
  border-radius: 4px;
  padding-top: calc(36* 100% / 34);
  cursor: pointer;
  background-color: #DAE6F3;
}
.checkin .group-row:first-child .btn-inner {
  background-color: #DAE6F3;
}

.checkin .btn-inner img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  width: 20px;
}

.checkin .preferred-item {
  padding-right: 12px;
}

.group-row .preferred select, .group-row .assigned select  {
  font-weight: 400;
  background-image: url(../images/checkin/chevron-down.svg);
  background-position-x: calc(100% - 10px) !important;
}

.group-row .services-list .services-item {
  padding-left: 0;
}

.checkin .select-down__filter {
  background-image: url(../images/checkin/chevron-down.svg);
  background-repeat: no-repeat;
  background-position-x: calc(100% - 16px) !important;
  background-position-y: 50%;
}

.enabled {
  letter-spacing: 0.26px;
  line-height: 24px;
  margin-left: -7.5px;
  margin-right: -7.5px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

#pageSizeDropdown {
  height: auto !important;
  font-size: 11px !important;
  border-radius: 2px !important;
  background-image: none !important;
  padding: 0 !important;
  appearance: auto;
  text-align: center;
}