/* /Layout/AuthLayout.razor.rz.scp.css */
.main-section[b-1lud2c0fas] {
  position: fixed;
  height: 100svh;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: #f0f2f5;
  background-color: #e4e6e9;
  overflow: hidden;

  position: relative;
}

.main-section[b-1lud2c0fas]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52%;
  background: #325a55;
  background: #04469e;
  background: #0f172a;
  background: #122d3c;
  clip-path: ellipse(100% 100% at 50% 0%);
}

.section-content[b-1lud2c0fas] {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3vh 0px;
  padding-bottom: 5vh;

  overflow-x: auto;
}

.main-content[b-1lud2c0fas] {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 6vh;
}

.top-pane[b-1lud2c0fas] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
}

.top-logo[b-1lud2c0fas] {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 20px;
  font-weight: 600;
}

.top-logo img[b-1lud2c0fas] {
  height: 30px;
}

.top-logo span[b-1lud2c0fas] {
  font-size: 32px;
}

.top-button[b-1lud2c0fas] {
  height: 40px;
  width: 120px;
  border: 2px solid white;
  border-radius: 45px;
  font-size: 15px;
  font-weight: 600;

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.main-body[b-1lud2c0fas] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.welcome-title[b-1lud2c0fas] {
  font-size: 38px;
  font-weight: 700;
  color: white;
}

.welcome-message[b-1lud2c0fas] {
  font-size: 15px;
  font-weight: 300;
  text-align: center;
  max-width: 360px;
  padding-bottom: 30px;
  color: white;
}

.body-pane[b-1lud2c0fas] {
  background-color: white;
  width: 450px;
  padding: 30px 30px;
  border-radius: 10px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 500px) {
  .main-content[b-1lud2c0fas] {
    width: 90%;
  }

  .top-logo p[b-1lud2c0fas] {
    display: none;
  }

  .body-pane[b-1lud2c0fas] {
    width: 100%;
  }
}
/* /Layout/EmployeeLayout.razor.rz.scp.css */
section[b-wdwxnkgxt0] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
  overflow: hidden;

  display: flex;
}

.body[b-wdwxnkgxt0] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: auto;
  padding-top: 3vh;
}

.body-content[b-wdwxnkgxt0] {
  width: 95%;
}

/* Headin */

.headin[b-wdwxnkgxt0] {
  padding-bottom: 4vh;
}

.headin-contain[b-wdwxnkgxt0] {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.headin-content[b-wdwxnkgxt0] {
  width: auto;
}

.headin-pane[b-wdwxnkgxt0] {
  padding-bottom: 7px;
  font-size: 12px;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.headin-pane i[b-wdwxnkgxt0] {
  font-size: 7px;
}

.headin-all[b-wdwxnkgxt0] {
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.headin-logo[b-wdwxnkgxt0] {
  width: 60px;
  height: 60px;
  border-radius: 70px;
  font-size: 24px;
  font-weight: 700;
  color: white;
  background: #303761;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: capitalize;
}

.headin-data[b-wdwxnkgxt0] {
  width: auto;
}

.headin-name[b-wdwxnkgxt0] {
  font-size: 21px;
  font-weight: 800;
  color: #303761;
  text-transform: capitalize;
}

.headin-subname[b-wdwxnkgxt0] {
  font-size: 13px;
  color: #656b7b;
  letter-spacing: 0.4px;
  text-transform: capitalize;
}

.headin-button[b-wdwxnkgxt0] {
  display: flex;
  align-items: center;
  gap: 10px;
}

.headin-button button[b-wdwxnkgxt0] {
  width: auto;
  height: 45px;
  padding: 0px 20px;
  border: 2px solid #dcdfe4;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  color: white;
  background: #32cfbe;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.headin-button button span[b-wdwxnkgxt0] {
  font-size: 18px;
  font-variation-settings: "wght" 500;
  font-variation-settings: "FILL" 1;
}

.footer[b-wdwxnkgxt0] {
  padding: 3vh 0px;
  font-size: 12px;
  font-weight: 500;
  color: rgb(92, 92, 92);
}

/* Menu */

.menu[b-wdwxnkgxt0] {
  padding: 0px 40px;
  border-radius: 8px;
  background: white;
  /* display: flex;
  align-items: center; */
}

.menu-contain[b-wdwxnkgxt0] {
  width: 95%;
}

.menu-content[b-wdwxnkgxt0] {
  display: flex;
  align-items: flex-end;
  gap: 40px;
}

.menu-box[b-wdwxnkgxt0] {
  padding: 18px 0px 14px;
  border-bottom: 3px solid transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: #303761;
  cursor: pointer;
}
/* /Layout/MainLayout.razor.rz.scp.css */
section[b-4m04yg4jut] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
  overflow: hidden;

  display: flex;
}

.body[b-4m04yg4jut] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: auto;
}

.footer[b-4m04yg4jut] {
  padding: 3vh 0px;
  font-size: 12px;
  font-weight: 500;
  color: rgb(92, 92, 92);
}
/* /Pages/Account/Account.razor.rz.scp.css */
section[b-vzi43jmn31] {
  width: 100%;
}

/* Headin */

.headin[b-vzi43jmn31] {
  width: auto;
  border-bottom: 2px solid #edeff1;
  background: white;
  display: flex;
  justify-content: center;
}

.headin-contain[b-vzi43jmn31] {
  width: 95%;
  padding: 5vh 0px 4vh;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.headin-content[b-vzi43jmn31] {
  width: auto;
}

.headin-pane[b-vzi43jmn31] {
  padding-bottom: 7px;
  font-size: 12px;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.headin-pane i[b-vzi43jmn31] {
  font-size: 7px;
}

.headin-all[b-vzi43jmn31] {
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.headin-logo[b-vzi43jmn31] {
  width: 60px;
  height: 60px;
  border-radius: 70px;
  font-size: 24px;
  font-weight: 700;
  color: white;
  background: #303761;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: capitalize;
}

.headin-data[b-vzi43jmn31] {
  width: auto;
}

.headin-name[b-vzi43jmn31] {
  font-size: 21px;
  font-weight: 800;
  color: #303761;
  text-transform: capitalize;
}

.headin-subname[b-vzi43jmn31] {
  font-size: 13px;
  color: #656b7b;
  letter-spacing: 0.4px;
}

.logout[b-vzi43jmn31] {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 45px;
  padding: 0px 20px;

  font-size: 15px;
  font-weight: 500;

  cursor: pointer;
  border: 2px solid #dcdfe4;
  border-radius: 45px;
}

.logout span[b-vzi43jmn31] {
  font-size: 20px;
  font-variation-settings: "wght" 300;
}

/* Menu */

.menu[b-vzi43jmn31] {
  padding: 0px 40px;
  border-radius: 8px;
  background: white;
  display: flex;
  align-items: center;
}

.menu-contain[b-vzi43jmn31] {
  width: 95%;
}

.menu-content[b-vzi43jmn31] {
  display: flex;
  align-items: flex-end;
  gap: 40px;
}

.menu-box[b-vzi43jmn31] {
  padding: 18px 0px 14px;
  border-bottom: 3px solid transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: #303761;
  cursor: pointer;
}

.menu-selected[b-vzi43jmn31] {
  border-bottom: 3px solid #3354f4;
  color: #3354f4;
}

/* UX */

.ux[b-vzi43jmn31] {
  width: auto;
  display: flex;
  justify-content: center;
}

.ux-contain[b-vzi43jmn31] {
  width: 700px;
  padding: 40px 0px;
}

/* UX : Headin */

.ux-headin[b-vzi43jmn31] {
  padding: 0px 0px 21px 10px;
}

.ux-headin-title[b-vzi43jmn31] {
  font-size: 18px;
  font-weight: 700;
  color: #303761;
}

.ux-headin-name[b-vzi43jmn31] {
  padding-top: 4px;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: #656b7b;
}

/* UX : Content */

.ux-content[b-vzi43jmn31] {
  padding: 0px 0px 40px;
  border-radius: 10px;
  background: white;
}

/* UI */

.ui[b-vzi43jmn31] {
  width: auto;
  padding: 40px 45px;
}

.ui:not(:first-child)[b-vzi43jmn31] {
  border-top: 1px solid #dcdfe4;
}

.ui-name[b-vzi43jmn31] {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #1f2023;
  /* color: #303761; */
}

.ui-subname[b-vzi43jmn31] {
  max-width: 600px;
  padding: 5px 0px 14px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2px;
  line-height: 1.6em;
  color: #656b7b;
}

.box[b-vzi43jmn31] {
  padding: 4px 0px 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 17px;
}

.box-data[b-vzi43jmn31] {
  width: 300px;
  display: flex;
}

.box-data input[b-vzi43jmn31] {
  flex: 1;
  width: 100px;
  height: 42px;
  padding: 0px 17px;
  border: 1px solid gainsboro;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.2px;
  background: whitesmoke;
}

.box-button button[b-vzi43jmn31] {
  width: auto;
  height: 44px;
  padding: 0px 25px;
  border: 2px solid #dcdfe4;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  color: white;
  background: #32cfbe;
  cursor: pointer;
  position: relative;
}

.ui-content[b-vzi43jmn31] {
  padding: 10px 0px 0px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ui-icon[b-vzi43jmn31] {
  font-size: 14px;
}

.ui-data[b-vzi43jmn31] {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #035bcd;
}

.ui-pane[b-vzi43jmn31] {
  margin-top: -2px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: white;
  background: green;
}

/* Lean */

.lean[b-vzi43jmn31] {
  margin-top: 30px;
  border: 1px solid crimson;
  border-radius: 14px;
  padding: 20px 25px;
}

.lean-name[b-vzi43jmn31] {
  font-size: 16px;
  font-weight: 600;
}

.lean-title[b-vzi43jmn31] {
  padding: 7px 0px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lean-title p[b-vzi43jmn31] {
  color: #035bcd;
}

.lean-content[b-vzi43jmn31] {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.lean-button[b-vzi43jmn31] {
  padding-top: 17px;
}

.lean-button button[b-vzi43jmn31] {
  width: 130px;
  height: 44px;
  border: 0px;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  color: white;
  color: black;
  background: #32cfbe;
  background: gainsboro;
  cursor: pointer;
}

/* Pane */

.pane[b-vzi43jmn31] {
  width: auto;
}

.pane-box[b-vzi43jmn31] {
  width: auto;
  padding-bottom: 10px;
}

.pane-name[b-vzi43jmn31] {
  padding-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #303761;
}

.pane-input[b-vzi43jmn31] {
  max-width: 400px;
  display: flex;
}

.pane-input input[b-vzi43jmn31] {
  flex: 1;
  width: 100px;
  height: 44px;
  padding: 0px 17px;
  border: 1px solid gainsboro;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.2px;
  background: whitesmoke;
}

.pane-lean[b-vzi43jmn31] {
  padding-bottom: 17px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.pane input[b-vzi43jmn31] {
  width: 20px;
}

.pane-subname[b-vzi43jmn31] {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.pane-button button[b-vzi43jmn31] {
  width: auto;
  height: 48px;
  padding: 0px 25px;
  border: 2px solid #dcdfe4;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  background: transparent;
  color: white;
  background: #32cfbe;
  cursor: pointer;
  position: relative;
}

.pane-error[b-vzi43jmn31] {
  max-width: 350px;
  padding: 7px 0px;
  font-size: 13px;
  color: crimson;
  display: none;
}

.pane-content[b-vzi43jmn31] {
  box-sizing: border-box;
  max-width: 400px;
  margin-top: 10px;
  padding: 14px 10px;
  text-align: center;
  font-size: 13px;
  color: crimson;
  background: rgb(255, 209, 218);
}

.box-error[b-vzi43jmn31] {
  box-sizing: border-box;
  max-width: 450px;
  margin: 10px 0px;
  padding: 17px 20px;
  text-align: center;
  font-size: 13px;
  color: rgb(222, 72, 102);
  background: rgb(255, 222, 229);
}

.box-error span[b-vzi43jmn31] {
  font-weight: 400;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* Loading */
.loading[b-vzi43jmn31] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: gray;
  border-radius: 7px;
}

.loading span[b-vzi43jmn31] {
  font-size: 20px;
}
/* /Pages/Auth/Login.razor.rz.scp.css */
section[b-u1drwsyh2g] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.title[b-u1drwsyh2g] {
  font-size: 27px;
  font-weight: 700;
  padding-bottom: 10px;
}

.input-pane[b-u1drwsyh2g] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 5px;
}

.input-label[b-u1drwsyh2g] {
  font-size: 13px;
  font-weight: 600;
  padding: 0px 4px;
  padding-bottom: 5px;
}

.input[b-u1drwsyh2g] {
  display: flex;
  position: relative;
}

input[b-u1drwsyh2g] {
  width: 100%;
  height: 45px;

  border: 1px solid gainsboro;
  border-radius: 6px;

  padding: 0px 12px;
}

input:focus[b-u1drwsyh2g] {
  border-color: black;
}

.password input[b-u1drwsyh2g] {
  padding-right: 40px;
}

.input span[b-u1drwsyh2g] {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 8px;
  font-size: 20px;
  cursor: pointer;
}

.button[b-u1drwsyh2g] {
  position: relative;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #325a55;
  background-color: #3354f4;
  background-color: #32cfbe;
  border-radius: 6px;
  color: white;

  font-size: 14px;
  font-weight: 500;

  margin-top: 10px;
  cursor: pointer;
}

.forgot-password[b-u1drwsyh2g] {
  padding-top: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #3354f4;
  color: #32cfbe;

  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.forgot-password p[b-u1drwsyh2g] {
  cursor: pointer;
}

.action[b-u1drwsyh2g] {
  padding-top: 18px;
  font-size: 14px;
  font-weight: 400;
}

.action a[b-u1drwsyh2g] {
  font-weight: 700;
  color: #325a55;
  color: #3354f4;
  color: #32cfbe;
}

.loading[b-u1drwsyh2g] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 0px 15px;
  display: flex;
  align-items: center;
}

.loading span[b-u1drwsyh2g] {
  font-size: 20px;
}

/* Forgot Password */
.forgot-password-popup[b-u1drwsyh2g] {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
}

.forgot-password-popup.view[b-u1drwsyh2g] {
  opacity: 1;
  visibility: visible;
}

.ux-contain[b-u1drwsyh2g] {
  width: 450px;
  border-radius: 12px;
  background: white;
}

/* Headin */

.headin[b-u1drwsyh2g] {
  padding: 30px;
  border-bottom: 1px solid whitesmoke;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.headin-title[b-u1drwsyh2g] {
  font-size: 21px;
  font-weight: 700;
  color: #303761;
}

.headin-name[b-u1drwsyh2g] {
  padding-top: 2px;
  font-size: 13px;
  color: #656b7b;
  letter-spacing: 0.4px;
}

.close[b-u1drwsyh2g] {
  cursor: pointer;
}

/* UX : Box */

.ux-content[b-u1drwsyh2g] {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.ux-all[b-u1drwsyh2g] {
  display: flex;
  gap: 17px;
}

.box[b-u1drwsyh2g] {
  flex: 1;
}

.box-name[b-u1drwsyh2g] {
  padding: 0px 0px 7px 5px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #3c404a;
  /* color: #303761; */
}

.box-data[b-u1drwsyh2g] {
  display: flex;
}

.box-data input[b-u1drwsyh2g],
.box-data select[b-u1drwsyh2g] {
  flex: 1;
  width: 100px;
  height: 45px;
  padding: 0px 17px;
  border: 1px solid #dcdfe4;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.2px;
  background: rgb(254, 254, 254);
}

.box-error[b-u1drwsyh2g] {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 3px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: rgb(232, 40, 79);
  background: rgb(255, 209, 218);
}

.ui-pane[b-u1drwsyh2g] {
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ui-pane input[b-u1drwsyh2g] {
  width: 20px;
}

.ui-pane-subname[b-u1drwsyh2g] {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #656b7b;
  padding: 0px 20px;
}

.ux-button[b-u1drwsyh2g] {
  padding: 20px 30px 40px;
  border-top: 1px solid rgb(240, 240, 240);
  border-radius: 0px 0px 12px 12px;
}

.ux-button button[b-u1drwsyh2g] {
  width: 180px;
  height: 48px;
  padding: 0px 25px;
  border: 2px solid #dcdfe4;
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  color: white;
  background: #3354f4;
  cursor: pointer;
  position: relative;
}

.forgot-loading[b-u1drwsyh2g] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3354f4;
  border-radius: 7px;
}

.forgot-loading span[b-u1drwsyh2g] {
  font-size: 20px;
}
/* /Pages/Auth/Register.razor.rz.scp.css */
section[b-9wa08xexcp] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.title[b-9wa08xexcp] {
  font-size: 27px;
  font-weight: 700;
  padding-bottom: 10px;
}

.input-pane[b-9wa08xexcp] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 5px;
}

.input-label[b-9wa08xexcp] {
  font-size: 13px;
  font-weight: 600;
  padding: 0px 4px;
  padding-bottom: 5px;
}

.input[b-9wa08xexcp] {
  display: flex;
  position: relative;
}

input[b-9wa08xexcp] {
  width: 100%;
  height: 45px;

  border: 1px solid gainsboro;
  border-radius: 6px;

  padding: 0px 12px;
}

input:focus[b-9wa08xexcp] {
  border-color: black;
}

.password input[b-9wa08xexcp] {
  padding-right: 40px;
}

.input span[b-9wa08xexcp] {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 8px;
  font-size: 20px;
  cursor: pointer;
}
.button[b-9wa08xexcp] {
  position: relative;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #325a55;
  background-color: #3354f4;
  background-color: #32cfbe;
  border-radius: 6px;
  color: white;

  font-size: 14px;
  font-weight: 500;

  margin-top: 10px;
  cursor: pointer;
}

.action[b-9wa08xexcp] {
  padding-top: 18px;
  font-size: 14px;
  font-weight: 400;
}

.action a[b-9wa08xexcp] {
  font-weight: 700;
  color: #325a55;
  color: #3354f4;
  color: #32cfbe;
}

.loading[b-9wa08xexcp] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 0px 15px;
  display: flex;
  align-items: center;
}

.loading span[b-9wa08xexcp] {
  font-size: 20px;
}

/* instructions */
.instructions[b-9wa08xexcp] {
  font-size: 14px;
  font-weight: 400;
  color: rgb(100, 100, 100);
  background-color: aliceblue;
  border-radius: 6px;
  padding: 15px;
}

.instructions-title[b-9wa08xexcp] {
  font-weight: 600;
  color: black;
  padding-bottom: 4px;
}

.instruction[b-9wa08xexcp] {
  font-size: 13px;
  padding-top: 4px;
  padding-left: 4px;
}
/* /Pages/Auth/ResetPassword.razor.rz.scp.css */
section[b-pi7e4jdzvs] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 30px;
}

.title[b-pi7e4jdzvs] {
  font-size: 27px;
  font-weight: 700;
  padding-bottom: 10px;
  color: #303761;
}

.loading[b-pi7e4jdzvs],
.problem[b-pi7e4jdzvs] {
  padding: 10px 0px;
}

.loading span[b-pi7e4jdzvs],
.problem span[b-pi7e4jdzvs] {
  font-size: 60px;
  font-variation-settings: "wght" 300;
  color: #656b7b;
}

.problem[b-pi7e4jdzvs] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.problem p[b-pi7e4jdzvs] {
  font-size: 13px;
  color: #656b7b;
  letter-spacing: 0.4px;
}

.action[b-pi7e4jdzvs] {
  padding-top: 18px;
  font-size: 14px;
  font-weight: 400;
}

.action a[b-pi7e4jdzvs] {
  font-weight: 700;
  color: #325a55;
  color: #3354f4;
  color: #32cfbe;
}
/* /Pages/Auth/VerifyEmail.razor.rz.scp.css */
section[b-ytvosk5428] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 30px;
}

.title[b-ytvosk5428] {
  font-size: 27px;
  font-weight: 700;
  padding-bottom: 10px;
  color: #303761;
}

.loading[b-ytvosk5428],
.problem[b-ytvosk5428] {
  padding: 10px 0px;
}

.loading span[b-ytvosk5428],
.problem span[b-ytvosk5428] {
  font-size: 60px;
  font-variation-settings: "wght" 300;
  color: #656b7b;
}

.problem[b-ytvosk5428] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.problem p[b-ytvosk5428] {
  font-size: 13px;
  color: #656b7b;
  letter-spacing: 0.4px;
}

.action[b-ytvosk5428] {
  padding-top: 18px;
  font-size: 14px;
  font-weight: 400;
}

.action a[b-ytvosk5428] {
  font-weight: 700;
  color: #325a55;
  color: #3354f4;
  color: #32cfbe;
}
/* /Pages/Auth/VerifyNewEmail.razor.rz.scp.css */
section[b-v0iti9xkez] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 30px;
}

.title[b-v0iti9xkez] {
  font-size: 27px;
  font-weight: 700;
  padding-bottom: 10px;
  color: #303761;
}

.loading[b-v0iti9xkez],
.problem[b-v0iti9xkez] {
  padding: 10px 0px;
}

.loading span[b-v0iti9xkez],
.problem span[b-v0iti9xkez] {
  font-size: 60px;
  font-variation-settings: "wght" 300;
  color: #656b7b;
}

.problem[b-v0iti9xkez] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.problem p[b-v0iti9xkez] {
  font-size: 13px;
  color: #656b7b;
  letter-spacing: 0.4px;
}

.action[b-v0iti9xkez] {
  padding-top: 18px;
  font-size: 14px;
  font-weight: 400;
}

.action a[b-v0iti9xkez] {
  font-weight: 700;
  color: #325a55;
  color: #3354f4;
  color: #32cfbe;
}
/* /Pages/Calendar/Calendar.razor.rz.scp.css */
section[b-6obisr8yhu] {
  width: 95%;
  padding-top: 3vh;
}

/* Headin */

.headin[b-6obisr8yhu] {
  width: auto;
  padding-bottom: 4vh;
}

.headin-contain[b-6obisr8yhu] {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.headin-content[b-6obisr8yhu] {
  width: auto;
}

.headin-pane[b-6obisr8yhu] {
  padding-bottom: 7px;
  font-size: 12px;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.headin-pane i[b-6obisr8yhu] {
  font-size: 7px;
}

.headin-title[b-6obisr8yhu] {
  font-size: 21px;
  font-weight: 800;
  color: #303761;
}

.headin-button[b-6obisr8yhu] {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.date-button[b-6obisr8yhu],
.report-button[b-6obisr8yhu] {
  width: 150px;
  height: 45px;
  border: 2px solid #656a83;
  border-radius: 7px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.date-button span[b-6obisr8yhu] {
  font-size: 18px;
  font-variation-settings: "FILL" 1;
}

.report-button span[b-6obisr8yhu] {
  font-size: 18px;
  font-variation-settings: "wght" 500;
  font-variation-settings: "FILL" 1;
}

.report-button[b-6obisr8yhu] {
  width: 120px;
  border: 2px solid #3354f4;
  border: 2px solid #32cfbe;
  color: white;
  background: #3354f4;
  background-color: #32cfbe;
  position: relative;
}

.headin-button button i[b-6obisr8yhu] {
  font-size: 14px;
  transform: translateY(-1px);
}

.loading[b-6obisr8yhu] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3354f4;
  color: white;
  border-radius: 7px;
}

.loading span[b-6obisr8yhu] {
  font-size: 20px;
}

/* Drop */

.drop[b-6obisr8yhu] {
  position: absolute;
  top: 64px;
  right: -10px;
  width: 340px;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0px 0px 34px rgba(0, 0, 0, 0.155);
  background: white;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}

.drop.view[b-6obisr8yhu] {
  opacity: 1;
  visibility: visible;
}

.drop[b-6obisr8yhu]::after {
  content: "";
  position: absolute;
  top: -8px;
  right: 180px;
  width: 16px;
  height: 16px;
  border-top-left-radius: 4px;
  background: #fff;
  transform: rotate(-45deg);
  z-index: 999;
}

.drop-headin[b-6obisr8yhu] {
  text-align: center;
}

.drop-title[b-6obisr8yhu] {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.drop-name[b-6obisr8yhu] {
  padding-top: 7px;
  display: flex;
  justify-content: center;
}

.drop-subname[b-6obisr8yhu] {
  width: 85%;
  font-size: 13px;
  letter-spacing: 0.7px;
  color: #7d7b83;
}

.drop-content[b-6obisr8yhu] {
  padding: 28px 0px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.drop-control[b-6obisr8yhu] {
  padding: 28px 0px 40px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.drop-control-name[b-6obisr8yhu] {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #34353d;
}

.drop-control-button button[b-6obisr8yhu] {
  width: 35px;
  height: 35px;
  padding: 0px;
  border: 2px solid #656b7b;
  border-radius: 40px;
  font-size: 16px;
  color: #656b7b;
  background: transparent;
  cursor: pointer;
}

.drop-button[b-6obisr8yhu] {
  display: flex;
  justify-content: center;
}

.drop-button button[b-6obisr8yhu] {
  width: auto;
  height: 45px;
  padding: 0px 24px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: white;
  background: #3354f4;
  cursor: pointer;
}

/* UX */

.ux[b-6obisr8yhu] {
  width: auto;
}

/* UX : Headin */

.ux-headin[b-6obisr8yhu] {
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ux-headin-pane[b-6obisr8yhu] {
  display: flex;
  align-items: center;
  gap: 40px;
}

.ux-headin-logo[b-6obisr8yhu] {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  font-size: 14px;
  color: #303761;
  background: whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.ux-headin-title[b-6obisr8yhu] {
  font-size: 21px;
  font-weight: 500;
  color: #303761;
}

.ux-headin-all[b-6obisr8yhu] {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ux-headin-icon button[b-6obisr8yhu] {
  width: 35px;
  height: 35px;
  border: none;
  border-radius: 35px;
  font-size: 14px;
  color: #3354f4;
  color: #303761;
  background: #e8ecf5;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.ux-headin-buttons[b-6obisr8yhu] {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ux-headin-buttons button[b-6obisr8yhu] {
  width: 120px;
  height: 40px;
  border: 2px solid #c4c9d2;
  border-radius: 7px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.ux-headin-buttons button i[b-6obisr8yhu] {
  font-size: 17px;
  transform: translateY(-1px);
}

/* UX : Content */

.ux-content[b-6obisr8yhu] {
  display: flex;
  gap: 30px;
}

/* UI */

.ui[b-6obisr8yhu] {
  flex: 1;
  border-radius: 12px;
  background: white;
}

.ui-headin[b-6obisr8yhu] {
  padding: 17px 0px;
  border-left: 2px solid white;
  border-right: 2px solid white;
  background: #f1f4f9;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ui-data[b-6obisr8yhu] {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #303761;
}

.ui-content[b-6obisr8yhu] {
  border-bottom: 1px solid #dfe3e8;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Box */

.box[b-6obisr8yhu] {
  width: auto;
  min-height: 70px;
  padding: 17px;
  border-right: 1px solid #dfe3e8;
  border-bottom: 1px solid #dfe3e8;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.box:hover[b-6obisr8yhu] {
  background: #f9faff;
}

.box:nth-child(7n)[b-6obisr8yhu] {
  border-right: none;
}

.box:nth-last-child(-n + 7)[b-6obisr8yhu] {
  border-bottom: none;
}

.box-headin[b-6obisr8yhu] {
  display: flex;
  justify-content: flex-end;
}

.box-logo[b-6obisr8yhu] {
  height: 30px;
  font-size: 17px;
  font-weight: 600;
  color: #303761;
}

.box-selected[b-6obisr8yhu] {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  color: white;
  background: #303761;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-4px);
}

.other-month[b-6obisr8yhu] {
  color: #a3a6aa;
}

.box-content[b-6obisr8yhu] {
  flex: 1;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
}

.box-item[b-6obisr8yhu] {
  padding: 3px 10px;
  border-radius: 3px;
  color: #1ec1be;
  background: rgba(30, 193, 190, 0.135);
  display: flex;
  align-items: first baseline;
  gap: 7px;
}

.box-item-absent[b-6obisr8yhu] {
  color: #c15a1e;
  background: rgba(240, 82, 82, 0.12);
}

.box-item-off[b-6obisr8yhu] {
  color: #8d31f0;
  background: rgba(141, 49, 240, 0.145);
}

.box-item-scheduled[b-6obisr8yhu] {
  color: #3354f4;
  background: rgba(51, 83, 244, 0.091);
}

.box-title[b-6obisr8yhu] {
  font-size: 10px;
  font-weight: 600;
}

.box-name[b-6obisr8yhu] {
  font-size: 10px;
}

.box-data[b-6obisr8yhu] {
  font-size: 18px;
  color: #303761;
}

/* Lean */

.lean[b-6obisr8yhu] {
  padding: 30px;
}

/* Pane */

.pane[b-6obisr8yhu] {
  width: 400px;
  padding: 30px 40px;
  border-radius: 12px;
  background: white;
}

.pane-headin-title[b-6obisr8yhu] {
  font-size: 21px;
  color: #303761;
}

.pane-headin-name[b-6obisr8yhu] {
  padding-top: 4px;
  font-size: 13px;
}

.pane-boxes[b-6obisr8yhu] {
  width: auto;
  padding: 20px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pane-box[b-6obisr8yhu] {
  padding: 14px 7px;
  border-bottom: 1px solid #ced8e8;
  display: flex;
  align-items: center;
}

.pane-content[b-6obisr8yhu] {
  flex: 1;
}

.pane-title[b-6obisr8yhu] {
  font-size: 27px;
  font-weight: 700;
}

.pane-name[b-6obisr8yhu] {
  font-size: 13px;
}

.pane-pie[b-6obisr8yhu] {
  width: 50px;
  height: 50px;
}

/* Graph */

.pane-data[b-6obisr8yhu] {
  width: auto;
}

.data[b-6obisr8yhu] {
  width: auto;
  gap: 17px;
}
/* /Pages/Calendar/CalendarDay.razor.rz.scp.css */
section[b-88ccax7r7l] {
  width: 95%;
  padding-top: 3vh;
}

/* Headin */

.headin[b-88ccax7r7l] {
  width: auto;
  padding-bottom: 4vh;
}

.headin-contain[b-88ccax7r7l] {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.headin-content[b-88ccax7r7l] {
  width: auto;
}

.headin-pane[b-88ccax7r7l] {
  padding-bottom: 7px;
  font-size: 12px;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.headin-pane i[b-88ccax7r7l] {
  font-size: 7px;
}

.headin-title[b-88ccax7r7l] {
  font-size: 21px;
  font-weight: 800;
  color: #303761;
}

.headin-button[b-88ccax7r7l] {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.headin-button button[b-88ccax7r7l] {
  width: auto;
  height: 48px;
  padding: 0px 20px;
  border: 2px solid #dcdfe4;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  color: white;
  background: #3354f4;
  background: #32cfbe;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.headin-button button i[b-88ccax7r7l] {
  font-size: 14px;
  transform: translateY(-1px);
}

.headin-button button span[b-88ccax7r7l] {
  font-size: 18px;
  font-variation-settings: "wght" 500;
  font-variation-settings: "FILL" 1;
}

/* Drop */

.drop[b-88ccax7r7l] {
  position: absolute;
  top: 64px;
  right: 60px;
  width: 340px;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0px 0px 34px rgba(0, 0, 0, 0.155);
  background: white;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}

.drop.view[b-88ccax7r7l] {
  opacity: 1;
  visibility: visible;
}

.drop[b-88ccax7r7l]::after {
  content: "";
  position: absolute;
  top: -8px;
  right: 150px;
  width: 16px;
  height: 16px;
  border-top-left-radius: 4px;
  background: #fff;
  transform: rotate(-45deg);
  z-index: 999;
}

.drop-headin[b-88ccax7r7l] {
  text-align: center;
}

.drop-title[b-88ccax7r7l] {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.drop-name[b-88ccax7r7l] {
  padding-top: 7px;
  display: flex;
  justify-content: center;
}

.drop-subname[b-88ccax7r7l] {
  width: 85%;
  font-size: 13px;
  letter-spacing: 0.7px;
  /* line-height: 1.35em; */
  color: #7d7b83;
}

.drop-content[b-88ccax7r7l] {
  padding: 28px 0px;
}

.drop-control[b-88ccax7r7l] {
  padding-bottom: 17px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.drop-control-name[b-88ccax7r7l] {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #34353d;
}

.drop-control button[b-88ccax7r7l] {
  width: 35px;
  height: 35px;
  padding: 0px;
  border: 2px solid #656b7b;
  border-radius: 40px;
  font-size: 16px;
  color: #656b7b;
  background: transparent;
  cursor: pointer;
}

.drop-data[b-88ccax7r7l] {
  width: auto;
}

.cal[b-88ccax7r7l] {
  width: auto;
  text-align: center;
}

.cal-days[b-88ccax7r7l] {
  padding-bottom: 17px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.cal-day[b-88ccax7r7l] {
  width: auto;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #1f2023;
}

.cal-content[b-88ccax7r7l] {
  font-size: 13px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  place-items: center;
}

.cal-content div[b-88ccax7r7l] {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.date[b-88ccax7r7l] {
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.inactive[b-88ccax7r7l] {
  color: #a1a5b2;
}

.day-selected[b-88ccax7r7l] {
  color: white;
  background: #3353f456;
}

.today[b-88ccax7r7l] {
  color: white;
  background: #0080fc;
}

.drop-selected[b-88ccax7r7l] {
  color: white;
  background: #303761;
}

.drop-button[b-88ccax7r7l] {
  display: flex;
  justify-content: center;
}

.drop-button button[b-88ccax7r7l] {
  width: auto;
  height: 45px;
  padding: 0px 24px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: white;
  background: #3354f4;
  cursor: pointer;
}

/* UX */

.ux[b-88ccax7r7l] {
  width: auto;
}

.ux-contain[b-88ccax7r7l] {
  display: flex;
  gap: 40px;
}

/* UX : Box */

.ux-box:first-child[b-88ccax7r7l] {
  width: 480px;
}

.ux-box:last-child[b-88ccax7r7l] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ux-title[b-88ccax7r7l] {
  padding: 0px 0px 17px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #303761;
}

.ux-content[b-88ccax7r7l] {
  width: auto;
}

.ux-box:last-child .ux-content[b-88ccax7r7l] {
  flex: 1;
  display: flex;
}

/* All */

.all[b-88ccax7r7l] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* AI */

.ai[b-88ccax7r7l] {
  width: auto;
  border-radius: 12px;
  background: white;
}

.ai-contain[b-88ccax7r7l] {
  padding: 40px 40px 30px;
  display: flex;
  gap: 40px;
}

.ai-content[b-88ccax7r7l] {
  flex: 1;
}

.ai-headin[b-88ccax7r7l] {
  display: flex;
  gap: 20px;
}

.ai-headin-logo[b-88ccax7r7l] {
  font-size: 40px !important;
  color: rgb(152, 152, 182);
  color: #303761;
}

.ai-headin-content[b-88ccax7r7l] {
  flex: 1;
}

.ai-headin-name[b-88ccax7r7l] {
  font-size: 21px;
  font-weight: 600;
  color: #303761;
}

.ai-headin-subname[b-88ccax7r7l] {
  padding-top: 2px;
  font-size: 13px;
  color: #656b7b;
}

.ai-data[b-88ccax7r7l] {
  padding-top: 17px;
  display: flex;
  gap: 10px;
}

.ai-data-name[b-88ccax7r7l] {
  font-size: 15px;
  color: green;
}

.ai-data-icon[b-88ccax7r7l] {
  font-size: 15px;
  color: green;
}

.ai-box[b-88ccax7r7l] {
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ai-box-item[b-88ccax7r7l] {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.ai-box-name[b-88ccax7r7l] {
  font-size: 13px;
  color: #656b7b;
}

.ai-box-subname[b-88ccax7r7l] {
  font-size: 13px;
  font-weight: 700;
  color: #303761;
}

.ai-pane[b-88ccax7r7l] {
  padding: 14px 40px;
  border-top: 1px solid #eef1ff;
  border-radius: 0px 0px 12px 12px;
  color: #4a7dff;
  /* background: rgba(51, 83, 244, 0.091); */
  /* background: #f9fafc; */
  /* background: #e8ebf3; */
  /* background: #f1f4f9; */
  /* background: #f9fafc; */
  /* background: #eef1ff; */
  display: flex;
  align-items: center;
  gap: 14px;
}

.ai-pane-icon[b-88ccax7r7l] {
  font-size: 19px;
}

.ai-pane-name[b-88ccax7r7l] {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  /* color: #303761; */
}

/* Boxes */

.boxes[b-88ccax7r7l] {
  padding: 30px;
  border-radius: 12px;
  background: white;
}

.boxin[b-88ccax7r7l] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.box[b-88ccax7r7l] {
  flex: 1;
  width: auto;
  display: flex;
  gap: 10px;
}

.box:first-child[b-88ccax7r7l] {
  padding: 13px 27px 27px 13px;
  border-right: 1px solid rgb(233, 236, 239);
  border-bottom: 1px solid #dcdfe4;
  border-bottom: 1px solid rgb(233, 236, 239);
}

.box:nth-child(2)[b-88ccax7r7l] {
  padding: 13px 13px 27px 27px;
  border-bottom: 1px solid rgb(233, 236, 239);
}

.box:nth-last-child(2)[b-88ccax7r7l] {
  padding: 27px 27px 13px 13px;
  border-right: 1px solid rgb(233, 236, 239);
}

.box:last-child[b-88ccax7r7l] {
  padding: 27px 13px 13px 27px;
}

.box-content[b-88ccax7r7l] {
  flex: 1;
}

.box-name[b-88ccax7r7l] {
  font-size: 24px;
  font-weight: 700;
  color: #303761;
}

.box-subname[b-88ccax7r7l] {
  font-size: 13px;
  color: #656b7b;
}

.box-icon[b-88ccax7r7l] {
  width: 50px;
  height: 50px;
  border-radius: 35px;
  font-size: 14px;
  color: #3354f4;
  background: rgba(51, 83, 244, 0.091);
  background: #eef1ff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-icon span[b-88ccax7r7l] {
  font-size: 18px;
}

/* Pane */

.pane[b-88ccax7r7l] {
  padding: 40px;
  border-radius: 12px;
  background: white;
}

/* Pane : Data */

.pane-data[b-88ccax7r7l] {
  width: auto;
  padding-bottom: 10px;
}

.pane-data-title[b-88ccax7r7l] {
  padding-bottom: 5px;
  font-size: 15px;
  font-weight: 600;
  color: #303761;
  letter-spacing: 0.2px;
}

.pane-data-name[b-88ccax7r7l] {
  padding-bottom: 5px;
  font-size: 13px;
  letter-spacing: 0px;
  color: #656b7b;
}

.data[b-88ccax7r7l] {
  width: auto;
  gap: 17px;
}

/* UI */

.ui[b-88ccax7r7l] {
  flex: 1;
  padding: 40px 20px;
  border-radius: 12px;
  background: white;
  display: flex;
  flex-direction: column;
}

/* UI : Headin */

.ui-headin[b-88ccax7r7l] {
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.ui-headin-content[b-88ccax7r7l] {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Search */

.search[b-88ccax7r7l] {
  width: 340px;
  height: 44px;
  padding: 0px 20px;
  border: 1px solid #d9dce0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.search-icon[b-88ccax7r7l] {
  font-size: 14px;
}

.search-input[b-88ccax7r7l] {
  flex: 1;
  display: flex;
}

.search-input input[b-88ccax7r7l] {
  flex: 1;
  padding: 0px;
  border: none;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.1px;
  outline: none;
}

/* Sort */

.sort[b-88ccax7r7l] {
  height: 44px;
  padding: 0px 20px;
  border: 1px solid #d9dce0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.sort-icon[b-88ccax7r7l] {
  font-size: 14px;
}

.sort-input[b-88ccax7r7l] {
  flex: 1;
  display: flex;
}

.sort-input select[b-88ccax7r7l] {
  flex: 1;
  padding: 0px;
  border: none;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.1px;
  background: transparent;
  outline: none;
}

.ui-headin-button[b-88ccax7r7l] {
  display: flex;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.ui-headin-button button[b-88ccax7r7l] {
  height: 45px;
  padding: 0px 20px;
  border: 1px solid #d9dce0;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #303761;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  position: relative;
}

.loading[b-88ccax7r7l] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3354f4;
  color: white;
  border-radius: 7px;
}

.loading span[b-88ccax7r7l] {
  font-size: 20px;
}

/* UI : Content */

.ui-content[b-88ccax7r7l] {
  flex: 1;
}

.ui-content-all[b-88ccax7r7l] {
  display: flex;
}

table[b-88ccax7r7l] {
  width: 100%;
}

th[b-88ccax7r7l] {
  padding: 17px 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #303761;
  background: #f1f4f9;
}

th:first-child[b-88ccax7r7l] {
  border-radius: 7px 0px 0px 7px;
}

th:last-child[b-88ccax7r7l] {
  border-radius: 0px 7px 7px 0px;
}

tbody tr[b-88ccax7r7l] {
  border-bottom: 1px solid #f1f4f9;
}

td[b-88ccax7r7l] {
  padding: 10px;
  font-size: 13px;
  letter-spacing: 0.1px;
}

.ui-box[b-88ccax7r7l] {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ui-logo[b-88ccax7r7l] {
  width: 45px;
  height: 45px;
  border-radius: 40px;
  font-size: 17px;
  font-weight: 700;
  color: white;
  background: #303761;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
}

.ui-box-content[b-88ccax7r7l] {
  flex: 1;
}

.ui-box-name[b-88ccax7r7l] {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-transform: capitalize;
}

.ui-box-subname[b-88ccax7r7l] {
  font-size: 12px;
  letter-spacing: 0.2px;
  color: grey;
}

.ui-status[b-88ccax7r7l] {
  width: auto;
  padding: 7px 20px;
  border-radius: 40px;
  text-align: center;
  font-size: 12px;
  color: #1ec1be;
  background: rgba(30, 193, 190, 0.135);
}

.ui-status-absent[b-88ccax7r7l] {
  color: #c15a1e;
  background: rgba(240, 82, 82, 0.12);
}

.ui-status-off[b-88ccax7r7l] {
  color: #8d31f0;
  background: rgba(141, 49, 240, 0.145);
}

.ui-status-scheduled[b-88ccax7r7l] {
  color: #3354f4;
  background: rgba(51, 83, 244, 0.091);
}

.ui-button[b-88ccax7r7l] {
  display: flex;
}

.ui-button button[b-88ccax7r7l] {
  width: 40px;
  height: 40px;
  border: none;
  border: 2px solid #303761;
  border-radius: 40px;
  font-size: 14px;
  color: #303761;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* UI : Lean */

.lean[b-88ccax7r7l] {
  padding: 30px 0px 30px;
  display: flex;
  justify-content: center;
}

.lean-content[b-88ccax7r7l] {
  width: 50%;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.3px;
}

.lean-content span[b-88ccax7r7l] {
  color: #3354f4;
}
/* /Pages/Employees/AddEmployee.razor.rz.scp.css */
.ux-contain[b-iumirqqjq0] {
  width: 580px;
  border-radius: 12px;
  background: white;
}

/* Headin */

.headin[b-iumirqqjq0] {
  padding: 30px;
  border-bottom: 1px solid whitesmoke;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.headin-title[b-iumirqqjq0] {
  font-size: 21px;
  font-weight: 700;
  color: #303761;
}

.headin-name[b-iumirqqjq0] {
  padding-top: 2px;
  font-size: 13px;
  color: #656b7b;
  letter-spacing: 0.4px;
}

.close[b-iumirqqjq0] {
  cursor: pointer;
}

/* UX : Box */

.ux-content[b-iumirqqjq0] {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.ux-all[b-iumirqqjq0] {
  display: flex;
  gap: 17px;
}

.box[b-iumirqqjq0] {
  flex: 1;
}

.box-name[b-iumirqqjq0] {
  padding: 0px 0px 7px 5px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #3c404a;
  /* color: #303761; */
}

.box-data[b-iumirqqjq0] {
  display: flex;
}

.box-data input[b-iumirqqjq0],
.box-data select[b-iumirqqjq0] {
  flex: 1;
  width: 100px;
  height: 42px;
  padding: 0px 17px;
  border: 1px solid #dcdfe4;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.2px;
  background: rgb(254, 254, 254);
}

.box-error[b-iumirqqjq0] {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 3px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: rgb(232, 40, 79);
  background: rgb(255, 209, 218);
}

.ui-pane[b-iumirqqjq0] {
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ui-pane input[b-iumirqqjq0] {
  width: 20px;
}

.ui-pane-subname[b-iumirqqjq0] {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #656b7b;
  padding: 0px 20px;
}

.ux-button[b-iumirqqjq0] {
  padding: 20px 30px 40px;
  border-top: 1px solid rgb(240, 240, 240);
  border-radius: 0px 0px 12px 12px;
}

.ux-button button[b-iumirqqjq0] {
  width: 180px;
  height: 48px;
  padding: 0px 25px;
  border: 2px solid #dcdfe4;
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  color: white;
  background: #32cfbe;
  cursor: pointer;
  position: relative;
}

.loading[b-iumirqqjq0] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #32cfbe;
  border-radius: 7px;
}

.loading span[b-iumirqqjq0] {
  font-size: 20px;
}
/* /Pages/Employees/CreateEmployee.razor.rz.scp.css */
.ux-contain[b-kpan2ztut3] {
  width: 580px;
  border-radius: 12px;
  background: white;
}

/* Headin */

.headin[b-kpan2ztut3] {
  padding: 30px;
  border-bottom: 1px solid whitesmoke;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.headin-title[b-kpan2ztut3] {
  font-size: 21px;
  font-weight: 700;
  color: #303761;
}

.headin-name[b-kpan2ztut3] {
  padding-top: 2px;
  font-size: 13px;
  color: #656b7b;
  letter-spacing: 0.4px;
}

.close[b-kpan2ztut3] {
  cursor: pointer;
}

/* UX : Box */

.ux-content[b-kpan2ztut3] {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.ux-all[b-kpan2ztut3] {
  display: flex;
  gap: 17px;
}

.box[b-kpan2ztut3] {
  flex: 1;
}

.box-name[b-kpan2ztut3] {
  padding: 0px 0px 7px 5px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #3c404a;
  /* color: #303761; */
}

.box-data[b-kpan2ztut3] {
  display: flex;
}

.box-data input[b-kpan2ztut3],
.box-data select[b-kpan2ztut3] {
  flex: 1;
  width: 100px;
  height: 42px;
  padding: 0px 17px;
  border: 1px solid #dcdfe4;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.2px;
  background: rgb(254, 254, 254);
}

.box-error[b-kpan2ztut3] {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 3px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: rgb(232, 40, 79);
  background: rgb(255, 209, 218);
}

.ui-pane[b-kpan2ztut3] {
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ui-pane input[b-kpan2ztut3] {
  width: 20px;
}

.ui-pane-subname[b-kpan2ztut3] {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #656b7b;
  padding: 0px 20px;
}

.ux-button[b-kpan2ztut3] {
  padding: 20px 30px 40px;
  border-top: 1px solid rgb(240, 240, 240);
  border-radius: 0px 0px 12px 12px;
}

.ux-button button[b-kpan2ztut3] {
  width: 180px;
  height: 48px;
  padding: 0px 25px;
  border: 2px solid #dcdfe4;
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  color: white;
  background: #32cfbe;
  cursor: pointer;
  position: relative;
}

.loading[b-kpan2ztut3] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #32cfbe;
  border-radius: 7px;
}

.loading span[b-kpan2ztut3] {
  font-size: 20px;
}
/* /Pages/Employees/Employee.razor.rz.scp.css */
section[b-39wgkzdosh] {
  width: 95%;
  flex: 1;
}

/* UX */

.ux[b-39wgkzdosh] {
  width: auto;
  display: flex;
  justify-content: center;
}

.ux-contain[b-39wgkzdosh] {
  width: 700px;
  padding: 40px 0px;
}

/* UX : Headin */

.ux-headin[b-39wgkzdosh] {
  padding: 0px 0px 21px 10px;
}

.ux-headin-title[b-39wgkzdosh] {
  font-size: 18px;
  font-weight: 700;
  color: #303761;
}

.ux-headin-name[b-39wgkzdosh] {
  padding-top: 4px;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: #656b7b;
}

/* UX : Content */

.ux-content[b-39wgkzdosh] {
  padding: 0px 0px 40px;
  border-radius: 10px;
  background: white;
}

/* UI */

.ui[b-39wgkzdosh] {
  width: auto;
  padding: 40px 45px;
}

.ui:not(:first-child)[b-39wgkzdosh] {
  border-top: 1px solid #dcdfe4;
}

.ui-name[b-39wgkzdosh] {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #1f2023;
  /* color: #303761; */
}

.ui-subname[b-39wgkzdosh] {
  max-width: 600px;
  padding: 5px 0px 14px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2px;
  line-height: 1.6em;
  color: #656b7b;
}

.box[b-39wgkzdosh] {
  padding: 4px 0px 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 17px;
}

.box-data[b-39wgkzdosh] {
  width: 300px;
  display: flex;
}

.box-data input[b-39wgkzdosh],
.box-data select[b-39wgkzdosh] {
  flex: 1;
  width: 100px;
  height: 42px;
  padding: 0px 17px;
  border: 1px solid gainsboro;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.2px;
  background: whitesmoke;
}

.box-button button[b-39wgkzdosh] {
  width: auto;
  height: 44px;
  padding: 0px 25px;
  border: 2px solid #dcdfe4;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  color: white;
  background: #32cfbe;
  cursor: pointer;
}

.ui-content[b-39wgkzdosh] {
  padding: 10px 0px 0px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ui-icon[b-39wgkzdosh] {
  font-size: 14px;
}

.ui-data[b-39wgkzdosh] {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #035bcd;
}

.ui-pane[b-39wgkzdosh] {
  margin-top: -2px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: white;
  background: green;
}

/* Lean */

.lean[b-39wgkzdosh] {
  margin-top: 30px;
  border: 1px solid crimson;
  border-radius: 14px;
  padding: 20px 25px;
}

.lean-name[b-39wgkzdosh] {
  font-size: 16px;
  font-weight: 600;
}

.lean-title[b-39wgkzdosh] {
  padding: 7px 0px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lean-title p[b-39wgkzdosh] {
  color: #035bcd;
}

.lean-content[b-39wgkzdosh] {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.lean-button[b-39wgkzdosh] {
  padding-top: 17px;
}

.lean-button button[b-39wgkzdosh] {
  width: 130px;
  height: 44px;
  border: 0px;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  color: white;
  color: black;
  background: #035bcd;
  background: gainsboro;
  cursor: pointer;
}

/* Pane */

.pane[b-39wgkzdosh] {
  width: auto;
}

.pane-box[b-39wgkzdosh] {
  width: auto;
  padding-bottom: 10px;
}

.pane-name[b-39wgkzdosh] {
  padding-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #303761;
}

.pane-input[b-39wgkzdosh] {
  max-width: 400px;
  display: flex;
}

.pane-input input[b-39wgkzdosh] {
  flex: 1;
  width: 100px;
  height: 44px;
  padding: 0px 17px;
  border: 1px solid gainsboro;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.2px;
  background: whitesmoke;
}

.pane-lean[b-39wgkzdosh] {
  padding-bottom: 17px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.pane input[b-39wgkzdosh] {
  width: 20px;
}

.pane-subname[b-39wgkzdosh] {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.pane-button button[b-39wgkzdosh] {
  width: auto;
  height: 48px;
  padding: 0px 25px;
  border: 2px solid #dcdfe4;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  color: white;
  background: crimson;
  cursor: pointer;
  position: relative;
}

.remove-button button[b-39wgkzdosh] {
  background-color: #8d31f0;
}

.reactivate[b-39wgkzdosh] {
  background-color: #035bcd !important;
}

.pane-error[b-39wgkzdosh] {
  max-width: 350px;
  padding: 7px 0px;
  font-size: 13px;
  color: crimson;
}

.pane-content[b-39wgkzdosh] {
  box-sizing: border-box;
  max-width: 400px;
  margin-top: 10px;
  padding: 14px 10px;
  text-align: center;
  font-size: 13px;
  color: crimson;
  background: rgb(255, 209, 218);
}

.box-error[b-39wgkzdosh] {
  box-sizing: border-box;
  max-width: 450px;
  margin: 10px 0px;
  padding: 17px 20px;
  text-align: center;
  font-size: 13px;
  color: rgb(222, 72, 102);
  background: rgb(255, 222, 229);
}

.box-error span[b-39wgkzdosh] {
  font-weight: 400;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* Loading */
.loading[b-39wgkzdosh] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: gray;
  border-radius: 7px;
}

.loading span[b-39wgkzdosh] {
  font-size: 20px;
}
/* /Pages/Employees/EmployeeCalendar.razor.rz.scp.css */
section[b-qrqfoo01xr] {
  width: 95%;
  flex: 1;
}

/* UX */

.ux[b-qrqfoo01xr] {
  width: auto;
}

.ux-contain[b-qrqfoo01xr] {
  width: auto;
  padding: 40px 0px;
}

/* UX : Headin */

.ux-headin[b-qrqfoo01xr] {
  padding-bottom: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.ux-headin-title[b-qrqfoo01xr] {
  padding-left: 20px;
  font-size: 18px;
  font-weight: 700;
  color: #303761;
}

.ux-headin-button[b-qrqfoo01xr] {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.ux-headin-button button[b-qrqfoo01xr] {
  width: auto;
  height: 48px;
  padding: 0px 20px;
  border: 2px solid #dcdfe4;
  border-radius: 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
}

.ux-headin-button button i[b-qrqfoo01xr] {
  font-size: 15px;
}

.loading[b-qrqfoo01xr] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3354f4;
  color: white;
  border-radius: 7px;
}

.loading span[b-qrqfoo01xr] {
  font-size: 20px;
}

/* Drop */

.drop[b-qrqfoo01xr] {
  position: absolute;
  top: 64px;
  right: -20px;
  width: 340px;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0px 0px 34px rgba(0, 0, 0, 0.155);
  background: white;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}

.drop.view[b-qrqfoo01xr] {
  opacity: 1;
  visibility: visible;
}

.drop[b-qrqfoo01xr]::after {
  content: "";
  position: absolute;
  top: -8px;
  right: 180px;
  width: 16px;
  height: 16px;
  border-top-left-radius: 4px;
  background: #fff;
  transform: rotate(-45deg);
  z-index: 999;
}

.drop-headin[b-qrqfoo01xr] {
  text-align: center;
}

.drop-title[b-qrqfoo01xr] {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.drop-name[b-qrqfoo01xr] {
  padding-top: 7px;
  display: flex;
  justify-content: center;
}

.drop-subname[b-qrqfoo01xr] {
  width: 85%;
  font-size: 13px;
  letter-spacing: 0.7px;
  color: #7d7b83;
}

.drop-content[b-qrqfoo01xr] {
  padding: 28px 0px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.drop-control[b-qrqfoo01xr] {
  padding: 28px 0px 40px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.drop-control-name[b-qrqfoo01xr] {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #34353d;
}

.drop-control button[b-qrqfoo01xr] {
  width: 35px;
  height: 35px;
  padding: 0px;
  border: 2px solid #656b7b;
  border-radius: 40px;
  font-size: 16px;
  color: #656b7b;
  background: transparent;
  cursor: pointer;
}

.drop-button[b-qrqfoo01xr] {
  display: flex;
  justify-content: center;
}

.drop-button button[b-qrqfoo01xr] {
  width: auto;
  height: 48px;
  padding: 0px 24px;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: white;
  background: #3354f4;
  cursor: pointer;
}

/* UX : Content */

.ux-content[b-qrqfoo01xr] {
  display: flex;
  gap: 40px;
}

/* UI */

.ui[b-qrqfoo01xr] {
  width: 450px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* UI : Content */

.ui-content[b-qrqfoo01xr] {
  padding: 40px 40px 60px;
  border-radius: 12px;
  background: white;
}

.ui-headin[b-qrqfoo01xr] {
  padding-bottom: 40px;
  font-size: 16px;
  font-weight: 700;
  color: #303761;
}

.ui-all[b-qrqfoo01xr] {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.ui-pie[b-qrqfoo01xr] {
  width: 180px;
  height: 180px;
}

.ui-data[b-qrqfoo01xr] {
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.ui-box[b-qrqfoo01xr] {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.ui-box-logo[b-qrqfoo01xr] {
  width: 14px;
  height: 14px;
  margin-bottom: 4px;
  border-radius: 4px;
  background: #c15a1e;
}

.ui-box:first-child .ui-box-logo[b-qrqfoo01xr] {
  background: #1ec1be;
}

.ui-box:last-child .ui-box-logo[b-qrqfoo01xr] {
  background: #8d31f0;
}

.ui-box-content[b-qrqfoo01xr] {
  flex: 1;
}

.ui-box-name[b-qrqfoo01xr] {
  font-size: 17px;
  font-weight: 700;
  color: #303761;
}

.ui-box-subname[b-qrqfoo01xr] {
  font-size: 13px;
  color: #656b7b;
}

/* UI : Pane */

.ui-pane[b-qrqfoo01xr] {
  flex: 1;
  width: auto;
  padding: 30px;
  border-radius: 12px;
  background: white;
}

.boxin[b-qrqfoo01xr] {
  display: grid;
  gap: 17px;
}

.box[b-qrqfoo01xr] {
  flex: 1;
  width: auto;
  padding: 14px 20px;
  /* border-left: 7px solid #3354f4; */
  border-radius: 4px;
  background: #fafbfd;
  display: flex;
  gap: 10px;
}

.box-content[b-qrqfoo01xr] {
  flex: 1;
}

.box-name[b-qrqfoo01xr] {
  font-size: 27px;
  font-weight: 700;
  color: #303761;
}

.box-subname[b-qrqfoo01xr] {
  padding-top: 4px;
  font-size: 12px;
  color: #656b7b;
}

.box-icon[b-qrqfoo01xr] {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  font-size: 14px;
  color: #3354f4;
  background: rgba(51, 83, 244, 0.091);
  background: #e7ebfe;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* AI */

.ai[b-qrqfoo01xr] {
  flex: 1;
  padding: 30px;
  border-radius: 12px;
  background: white;
}

.ai-headin[b-qrqfoo01xr] {
  width: auto;
  padding-bottom: 17px;
}

.ai-headin-title[b-qrqfoo01xr] {
  padding-bottom: 3px;
  font-size: 16px;
  font-weight: 600;
  color: #303761;
  letter-spacing: 0.2px;
}

.ai-headin-name[b-qrqfoo01xr] {
  font-size: 13px;
  color: #656b7b;
  letter-spacing: 0.2px;
}

.ai-content[b-qrqfoo01xr] {
  display: flex;
}

table[b-qrqfoo01xr] {
  width: 100%;
  border-radius: 7px;
  table-layout: fixed;
}

th[b-qrqfoo01xr],
td[b-qrqfoo01xr] {
  border: 1px solid #dcdfe4;
  border-collapse: collapse;
}

th[b-qrqfoo01xr] {
  padding: 17px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #303761;
  background: #f1f4f9;
}

th:first-child[b-qrqfoo01xr] {
  border-radius: 7px 0px 0px 0px;
}

th:last-child[b-qrqfoo01xr] {
  border-radius: 0px 7px 0px 0px;
}

td[b-qrqfoo01xr] {
  width: auto;
  cursor: pointer;
}

tbody tr:last-child td:first-child[b-qrqfoo01xr] {
  border-radius: 0px 0px 0px 7px;
}

tbody tr:last-child td:last-child[b-qrqfoo01xr] {
  border-radius: 0px 0px 7px 0px;
}

.item[b-qrqfoo01xr] {
  /* height: 70px; */
  padding: 14px 10px;
}

.item:hover[b-qrqfoo01xr] {
  background: #f9faff;
}

.item-headin[b-qrqfoo01xr] {
  display: flex;
  justify-content: flex-end;
}

.item-title[b-qrqfoo01xr] {
  height: 35px;
  font-size: 19px;
  font-weight: 700;
  color: #303761;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-selected[b-qrqfoo01xr] {
  width: 35px;
  border-radius: 30px;
  font-size: 13px;
  color: white;
  background: #303761;
}

.other-month[b-qrqfoo01xr] {
  color: #a3a6aa;
}

.item-content[b-qrqfoo01xr] {
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item-box[b-qrqfoo01xr] {
  display: flex;
  align-items: center;
  gap: 7px;
}

.item-logo[b-qrqfoo01xr] {
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background: #1ec1be;
}

.item-absent[b-qrqfoo01xr] {
  background: #c15a1e;
}

.item-off[b-qrqfoo01xr] {
  background: #8d31f0;
}

.item-scheduled[b-qrqfoo01xr] {
  background: #3354f4;
}

.item-name[b-qrqfoo01xr] {
  font-size: 11px;
}
/* /Pages/Employees/EmployeeDay.razor.rz.scp.css */
section[b-casf1hbysp] {
  width: 95%;
  flex: 1;
}

/* UX */

.ux[b-casf1hbysp] {
  width: auto;
}

.ux-contain[b-casf1hbysp] {
  width: auto;
  padding: 40px 0px;
}

/* UX : Headin */

.ux-headin[b-casf1hbysp] {
  padding-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.ux-headin-title[b-casf1hbysp] {
  padding-left: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #303761;
}

.ux-headin-all[b-casf1hbysp] {
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.ux-title[b-casf1hbysp] {
  padding-left: 20px;
  font-size: 21px;
  font-weight: 700;
  color: #303761;
}

.ux-buttons[b-casf1hbysp] {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ux-buttons button[b-casf1hbysp] {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: none;
  color: #303761;
  background: white;
  cursor: pointer;
}

.ux-headin-button[b-casf1hbysp] {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.ux-headin-button button[b-casf1hbysp] {
  width: auto;
  height: 48px;
  padding: 0px 20px;
  border: 2px solid #dcdfe4;
  border-radius: 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.ux-headin-button button i[b-casf1hbysp] {
  font-size: 15px;
}

/* Drop */

.drop[b-casf1hbysp] {
  position: absolute;
  top: 64px;
  right: -10px;
  width: 340px;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0px 0px 34px rgba(0, 0, 0, 0.155);
  background: white;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}

.drop.view[b-casf1hbysp] {
  opacity: 1;
  visibility: visible;
}

.drop[b-casf1hbysp]::after {
  content: "";
  position: absolute;
  top: -8px;
  right: 90px;
  width: 16px;
  height: 16px;
  border-top-left-radius: 4px;
  background: #fff;
  transform: rotate(-45deg);
  z-index: 999;
}

.drop-headin[b-casf1hbysp] {
  text-align: center;
}

.drop-title[b-casf1hbysp] {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.drop-name[b-casf1hbysp] {
  padding-top: 7px;
  display: flex;
  justify-content: center;
}

.drop-subname[b-casf1hbysp] {
  width: 85%;
  font-size: 13px;
  letter-spacing: 0.7px;
  /* line-height: 1.35em; */
  color: #7d7b83;
}

.drop-content[b-casf1hbysp] {
  padding: 28px 0px;
}

.drop-control[b-casf1hbysp] {
  padding-bottom: 17px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.drop-control-name[b-casf1hbysp] {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #34353d;
}

.drop-control button[b-casf1hbysp] {
  width: 35px;
  height: 35px;
  padding: 0px;
  border: 2px solid #656b7b;
  border-radius: 40px;
  font-size: 16px;
  color: #656b7b;
  background: transparent;
  cursor: pointer;
}

.drop-data[b-casf1hbysp] {
  width: auto;
}

.cal[b-casf1hbysp] {
  width: auto;
  text-align: center;
}

.cal-days[b-casf1hbysp] {
  padding-bottom: 17px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.cal-day[b-casf1hbysp] {
  width: auto;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #1f2023;
}

.cal-content[b-casf1hbysp] {
  font-size: 13px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  place-items: center;
}

.cal-content div[b-casf1hbysp] {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.date[b-casf1hbysp] {
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.inactive[b-casf1hbysp] {
  color: #a1a5b2;
}

.day-selected[b-casf1hbysp] {
  color: white;
  background: #3353f456;
}

.today[b-casf1hbysp] {
  color: white;
  background: #0080fc;
}

.drop-selected[b-casf1hbysp] {
  color: white;
  background: #303761;
}

.drop-button[b-casf1hbysp] {
  display: flex;
  justify-content: center;
}

.drop-button button[b-casf1hbysp] {
  width: auto;
  height: 45px;
  padding: 0px 24px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: white;
  background: #3354f4;
  cursor: pointer;
}

/* UX : Content */

.ux-content[b-casf1hbysp] {
  display: flex;
  gap: 40px;
}

/* All */

.ui[b-casf1hbysp] {
  width: 450px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* AI */

.ai[b-casf1hbysp] {
  width: 550px;
  border-radius: 12px;
  background: white;
}

.ai-contain[b-casf1hbysp] {
  padding: 40px 40px 50px;
  border-bottom: 1px solid #d9dce0;
  display: flex;
  gap: 40px;
}

.ai-content[b-casf1hbysp] {
  flex: 1;
}

.ai-headin[b-casf1hbysp] {
  display: flex;
  gap: 20px;
}

.ai-headin-logo[b-casf1hbysp] {
  font-size: 40px !important;
  color: rgb(152, 152, 182);
  color: #303761;
}

.ai-headin-content[b-casf1hbysp] {
  flex: 1;
}

.ai-headin-name[b-casf1hbysp] {
  font-size: 21px;
  font-weight: 600;
  color: #303761;
}

.ai-headin-subname[b-casf1hbysp] {
  padding-top: 2px;
  font-size: 13px;
  color: #656b7b;
}

.ai-box[b-casf1hbysp] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ai-box-item[b-casf1hbysp] {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.ai-box-name[b-casf1hbysp] {
  font-size: 13px;
  color: #656b7b;
}

.ai-box-subname[b-casf1hbysp] {
  font-size: 13px;
  font-weight: 700;
  color: #303761;
}

.ai-pane[b-casf1hbysp] {
  padding: 14px 40px;
  border-top: 1px solid #eef1ff;
  border-radius: 0px 0px 12px 12px;
  color: #4a7dff;
  display: flex;
  align-items: center;
  gap: 24px;
}

.ai-pane-icon[b-casf1hbysp] {
  font-size: 19px;
}

.ai-pane-name[b-casf1hbysp] {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  /* color: #303761; */
}

.ai-data[b-casf1hbysp] {
  padding: 40px 0px 0px 0px;
  display: flex;
}

.ai-status[b-casf1hbysp] {
  min-width: 70px;
  padding: 10px 20px;
  border-radius: 40px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #1ec1be;
  background: rgba(30, 193, 190, 0.135);
}

.ai-absent[b-casf1hbysp] {
  color: #c15a1e;
  background: rgba(240, 82, 82, 0.12);
}

.ai-off[b-casf1hbysp] {
  color: #8d31f0;
  background: rgba(141, 49, 240, 0.145);
}

.ai-scheduled[b-casf1hbysp] {
  color: #3354f4;
  background: rgba(51, 83, 244, 0.091);
}

/* UI */

.ui[b-casf1hbysp] {
  flex: 1;
  padding: 40px 40px 60px;
  border-radius: 11px;
  background: white;
}

.ui-headin[b-casf1hbysp] {
  display: flex;
  justify-content: space-between;
}

.ui-content[b-casf1hbysp] {
  flex: 1;
}

.ui-name[b-casf1hbysp] {
  font-size: 17px;
  font-weight: 600;
  color: #1f2023;
}

.ui-subname[b-casf1hbysp] {
  font-size: 12px;
}

.ui-button button[b-casf1hbysp] {
  height: 40px;
  padding: 0px 20px;
  border: 1px solid #d9dce0;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #303761;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.ui-data[b-casf1hbysp] {
  width: auto;
}

/* Data */

.data[b-casf1hbysp] {
  width: auto;
}

/* Lean */

.lean[b-casf1hbysp] {
  padding: 30px 0px 30px;
  display: flex;
  justify-content: center;
}

.lean-content[b-casf1hbysp] {
  width: 50%;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.3px;
}

.lean-content span[b-casf1hbysp] {
  color: #3354f4;
}
/* /Pages/Employees/Employees.razor.rz.scp.css */
section[b-nn74hqvcev] {
  width: 95%;
  padding-top: 3vh;
}

/* Headin */

.headin[b-nn74hqvcev] {
  width: auto;
  padding-bottom: 4vh;
}

.headin-contain[b-nn74hqvcev] {
  padding-bottom: 4vh;
  border-bottom: 1px solid #dcdfe4;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.headin-content[b-nn74hqvcev] {
  width: auto;
}

.headin-pane[b-nn74hqvcev] {
  padding-bottom: 7px;
  font-size: 12px;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.headin-pane i[b-nn74hqvcev] {
  font-size: 7px;
}

.headin-title[b-nn74hqvcev] {
  font-size: 21px;
  font-weight: 800;
  color: #303761;
}

.headin-button[b-nn74hqvcev] {
  display: flex;
  align-items: center;
  gap: 10px;
}

.headin-button button[b-nn74hqvcev] {
  width: auto;
  height: 45px;
  padding: 0px 20px;
  border: 2px solid #dcdfe4;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  color: white;
  background: #32cfbe;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.headin-button button.create-employee-button[b-nn74hqvcev] {
  height: 45px;
  padding: 0px 20px;
  border: 2px solid #dcdfe4;
  color: #303761;
  background: transparent;
}

.headin-button button i[b-nn74hqvcev] {
  font-size: 14px;
  transform: translateY(-1px);
}

/* UX */

.ux[b-nn74hqvcev] {
  width: auto;
  min-height: 80vh;
}

.ux-contain[b-nn74hqvcev] {
  display: flex;
  gap: 40px;
}

/* UX : Box */

.ux-box:last-child[b-nn74hqvcev] {
  width: 400px;
}

.ux-box:first-child[b-nn74hqvcev] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ux-title[b-nn74hqvcev] {
  padding: 0px 0px 17px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #303761;
}

.ux-content[b-nn74hqvcev] {
  width: auto;
}

.ux-box:last-child .ux-content[b-nn74hqvcev] {
  flex: 1;
  display: flex;
}

/* UI */

.ui[b-nn74hqvcev] {
  flex: 1;
  min-height: 60vh;
  padding: 40px 20px;
  border-radius: 12px;
  background: white;
  display: flex;
  flex-direction: column;
}

/* UI : Headin */

.ui-headin[b-nn74hqvcev] {
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.ui-headin-content[b-nn74hqvcev] {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Search */

.search[b-nn74hqvcev] {
  width: 340px;
  height: 44px;
  padding: 0px 20px;
  border: 1px solid #d9dce0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.search-icon[b-nn74hqvcev] {
  font-size: 14px;
}

.search-input[b-nn74hqvcev] {
  flex: 1;
  display: flex;
}

.search-input input[b-nn74hqvcev] {
  flex: 1;
  padding: 0px;
  border: none;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.1px;
  outline: none;
}

/* Sort */

.sort[b-nn74hqvcev] {
  height: 44px;
  padding: 0px 20px;
  border: 1px solid #d9dce0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.sort-icon[b-nn74hqvcev] {
  font-size: 14px;
}

.sort-input[b-nn74hqvcev] {
  flex: 1;
  display: flex;
}

.sort-input select[b-nn74hqvcev] {
  flex: 1;
  padding: 0px;
  border: none;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.1px;
  background: transparent;
  outline: none;
}

.ui-headin-button button[b-nn74hqvcev] {
  height: 45px;
  padding: 0px 20px;
  border: 1px solid #d9dce0;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #303761;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  position: relative;
}

.loading[b-nn74hqvcev] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #32cfbe;
  color: white;
  border-radius: 7px;
}

.loading span[b-nn74hqvcev] {
  font-size: 20px;
}

/* UI : Content */

.ui-content[b-nn74hqvcev] {
  flex: 1;
}

.ui-content-all[b-nn74hqvcev] {
  display: flex;
}

table[b-nn74hqvcev] {
  width: 100%;
}

th[b-nn74hqvcev] {
  padding: 17px 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #303761;
  background: #f1f4f9;
}

th:first-child[b-nn74hqvcev] {
  border-radius: 7px 0px 0px 7px;
}

th:last-child[b-nn74hqvcev] {
  border-radius: 0px 7px 7px 0px;
}

tbody tr[b-nn74hqvcev] {
  border-bottom: 1px solid #f1f4f9;
}

td[b-nn74hqvcev] {
  padding: 10px;
  font-size: 13px;
  letter-spacing: 0.1px;
}

.ui-box[b-nn74hqvcev] {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ui-logo[b-nn74hqvcev] {
  width: 45px;
  height: 45px;
  border-radius: 40px;
  font-size: 17px;
  font-weight: 700;
  color: white;
  background: #303761;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
}

.ui-box-content[b-nn74hqvcev] {
  flex: 1;
}

.ui-box-name[b-nn74hqvcev] {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-transform: capitalize;
}

.ui-box-subname[b-nn74hqvcev] {
  font-size: 12px;
  letter-spacing: 0.2px;
  color: grey;
}

.ui-status[b-nn74hqvcev] {
  width: auto;
  padding: 7px 20px;
  border-radius: 40px;
  text-align: center;
  font-size: 12px;
  color: #3354f4;
  background: rgba(51, 83, 244, 0.091);
}

.ui-role[b-nn74hqvcev] {
  text-transform: capitalize;
}

.status.active[b-nn74hqvcev] {
  font-weight: 600;
}

.ui-box--button[b-nn74hqvcev] {
  display: flex;
}

td button[b-nn74hqvcev] {
  width: 40px;
  height: 40px;
  border: none;
  border: 2px solid #303761;
  border-radius: 40px;
  font-size: 14px;
  color: #303761;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* UI : Lean */

.lean[b-nn74hqvcev] {
  padding: 30px 0px 30px;
  display: flex;
  justify-content: center;
}

.lean-content[b-nn74hqvcev] {
  width: 50%;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.3px;
}

.lean-content span[b-nn74hqvcev] {
  color: #3354f4;
}

/* All */

.box[b-nn74hqvcev] {
  width: auto;
  padding: 30px 25px;
  border-radius: 12px;
  background: white;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.box-content[b-nn74hqvcev] {
  flex: 1;
}

.box-name[b-nn74hqvcev] {
  padding-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
}

.box-title[b-nn74hqvcev] {
  font-size: 38px;
  color: #303761;
}

.box-subname[b-nn74hqvcev] {
  padding-top: 14px;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: #656b7b;
}

.box-subname span[b-nn74hqvcev] {
  color: green;
}

.box-logo[b-nn74hqvcev] {
  width: 60px;
  height: 60px;
  border-radius: 40px;
  background: #3353f422;
  color: #3354f4;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Add Employee */
.add-pop[b-nn74hqvcev] {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
}

.add-pop.view[b-nn74hqvcev] {
  opacity: 1;
  visibility: visible;
}
/* /Pages/Employees/EmployeeShift.razor.rz.scp.css */
section[b-fw9rczr9qf] {
  width: 95%;
  flex: 1;
  padding-top: 40px;
}

/* UX : Headin */

.ux-headin[b-fw9rczr9qf] {
  padding-bottom: 3vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.ux-headin-title[b-fw9rczr9qf] {
  padding-left: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #303761;
}

.ux-headin-all[b-fw9rczr9qf] {
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.ux-title[b-fw9rczr9qf] {
  padding-left: 20px;
  font-size: 21px;
  font-weight: 700;
  color: #303761;
}

.ux-buttons[b-fw9rczr9qf] {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ux-buttons button[b-fw9rczr9qf] {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: none;
  color: #303761;
  background: white;
  cursor: pointer;
}

.ux-headin-button[b-fw9rczr9qf] {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.ux-headin-button button[b-fw9rczr9qf] {
  width: auto;
  height: 48px;
  padding: 0px 20px;
  border: 2px solid #dcdfe4;
  border-radius: 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
}

.publish-button[b-fw9rczr9qf] {
  /* background: #9dadff !important;
  border-color: #9dadff !important; */

  background: #32cfbf73 !important;
  border-color: #32cfbf59 !important;
  color: white !important;

  position: relative;
}

.publish-button.active[b-fw9rczr9qf] {
  /* background: #3354f4 !important;
  border-color: #3354f4 !important; */

  background: #32cfbe !important;
  border-color: #32cfbe !important;
}

.publish-button.active span[b-fw9rczr9qf] {
  background-color: transparent;
  color: white !important;
}

.ux-headin-button button i[b-fw9rczr9qf] {
  font-size: 15px;
}

.ux-headin-button button span[b-fw9rczr9qf] {
  font-size: 18px;
}

.loading[b-fw9rczr9qf] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3354f4;
  border-radius: 10px;
}

.loading span[b-fw9rczr9qf] {
  font-size: 20px;
  color: white;
}

/* Drop */

.drop[b-fw9rczr9qf] {
  position: absolute;
  top: 64px;
  right: 140px;
  width: 340px;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0px 0px 34px rgba(0, 0, 0, 0.155);
  background: white;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}

.drop.view[b-fw9rczr9qf] {
  opacity: 1;
  visibility: visible;
}

.drop[b-fw9rczr9qf]::after {
  content: "";
  position: absolute;
  top: -8px;
  right: 190px;
  width: 16px;
  height: 16px;
  border-top-left-radius: 4px;
  background: #fff;
  transform: rotate(-45deg);
  z-index: 999;
}

.drop-headin[b-fw9rczr9qf] {
  text-align: center;
}

.drop-title[b-fw9rczr9qf] {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.drop-name[b-fw9rczr9qf] {
  padding-top: 7px;
  display: flex;
  justify-content: center;
}

.drop-subname[b-fw9rczr9qf] {
  width: 85%;
  font-size: 13px;
  letter-spacing: 0.7px;
  color: #7d7b83;
}

.drop-content[b-fw9rczr9qf] {
  padding: 28px 0px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* UI */

.ui[b-fw9rczr9qf] {
  padding: 40px 20px;
  border-radius: 12px;
  background: white;
  display: flex;
  flex-direction: column;
}

/* UI : Table */

.ui-content[b-fw9rczr9qf] {
  width: 100%;
  height: auto;
  overflow: auto;
}

table[b-fw9rczr9qf] {
  min-width: 800px;
  width: 100%;
}

th[b-fw9rczr9qf] {
  padding: 17px 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #303761;
  background: #f1f4f9;
}

th:first-child[b-fw9rczr9qf] {
  border-radius: 7px 0px 0px 7px;
}

th:last-child[b-fw9rczr9qf] {
  border-radius: 0px 7px 7px 0px;
}

tbody tr[b-fw9rczr9qf] {
  border-bottom: 1px solid #f1f4f9;
}

td[b-fw9rczr9qf] {
  padding: 10px;
  font-size: 13px;
  letter-spacing: 0.1px;
  background-color: #f7f7f7;
}

.disabled[b-fw9rczr9qf] {
  background-color: #f7f7f7;
}

.shift-date[b-fw9rczr9qf] {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 20px;

  font-size: 16px;
  font-weight: 600;
  color: #303761;
}

.shift-date p[b-fw9rczr9qf] {
  min-width: 35px;
  width: 35px;
  height: 35px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.selected-date[b-fw9rczr9qf] {
  color: white;
  background: #303761;
}

.shift-date.other-month p[b-fw9rczr9qf] {
  color: #a3a6aa;
}

.shift[b-fw9rczr9qf] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 15px;
  background-color: rgba(30, 193, 190, 0.135);
  border-left: 3px solid #1ec1be;

  font-size: 13px;
  font-weight: 500;
}

.shift.unpublished[b-fw9rczr9qf] {
  background-color: rgba(141, 49, 240, 0.145);
  border-left: 3px solid #8d31f0;
}

.shift-time[b-fw9rczr9qf] {
  padding-bottom: 4px;
}

.shift-status[b-fw9rczr9qf] {
  text-transform: capitalize;
  color: #1ec1be;
  min-width: 120px;
}

.shift.unpublished .shift-status[b-fw9rczr9qf] {
  color: #8d31f0;
}

.shift-action[b-fw9rczr9qf] {
  cursor: pointer;
  position: relative;
}

.shift-action span[b-fw9rczr9qf] {
  font-size: 22px;
}

.empty[b-fw9rczr9qf] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.add-shift-button[b-fw9rczr9qf] {
  width: 35px;
  height: 35px;
  border: 2px solid #929ead;
  border-radius: 40px;
  color: #929ead;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.add-shift-button span[b-fw9rczr9qf] {
  font-size: 22px;
}

/* UI : Lean */

.lean[b-fw9rczr9qf] {
  padding: 30px 0px 30px;
  display: flex;
  justify-content: center;
}

.lean-content[b-fw9rczr9qf] {
  width: 50%;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.3px;
}

.lean-content span[b-fw9rczr9qf] {
  color: #3354f4;
}

/* Add Shift */
.add-shift-pop[b-fw9rczr9qf] {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
}

.add-shift-pop.view[b-fw9rczr9qf] {
  opacity: 1;
  visibility: visible;
}

/* Delete shift */
.delete-drop[b-fw9rczr9qf] {
  position: absolute;
  top: 18px;
  right: 0;
  background-color: white;
  box-shadow: 0px 0px 34px rgba(0, 0, 0, 0.155);
  border-radius: 6px;
  flex-direction: column;
  min-width: 100px;
  z-index: 999;
  padding: 15px;
  cursor: default;

  display: flex;
  flex-direction: column;
  gap: 10px;

  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
}

.delete-drop.view[b-fw9rczr9qf] {
  top: 23px;
  opacity: 1;
  visibility: visible;
}

.delete-drop-option[b-fw9rczr9qf] {
  cursor: pointer;
}

/* Loadin */
.loading[b-fw9rczr9qf] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3354f4;
  border-radius: 7px;
}

.loading span[b-fw9rczr9qf] {
  font-size: 20px;
}
/* /Pages/Home/EditRecord.razor.rz.scp.css */
.ux-contain[b-qzg63jpdtn] {
  width: 580px;
  border-radius: 12px;
  background: white;
}

/* Headin */

.headin[b-qzg63jpdtn] {
  padding: 30px;
  border-bottom: 1px solid whitesmoke;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.headin-title[b-qzg63jpdtn] {
  font-size: 21px;
  font-weight: 700;
  color: #303761;
}

.headin-name[b-qzg63jpdtn] {
  padding-top: 2px;
  font-size: 13px;
  color: #656b7b;
  letter-spacing: 0.4px;
}

.headin-name span[b-qzg63jpdtn] {
  font-weight: 600;
  color: #3354f4;
  text-transform: capitalize;
}

.close[b-qzg63jpdtn] {
  cursor: pointer;
}

/* UX : Box */

.ux-content[b-qzg63jpdtn] {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.ux-all[b-qzg63jpdtn] {
  display: flex;
  gap: 17px;
}

.box[b-qzg63jpdtn] {
  flex: 1;
}

.box-name[b-qzg63jpdtn] {
  padding: 0px 0px 7px 5px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #3c404a;
  /* color: #303761; */
}

.box-data[b-qzg63jpdtn] {
  display: flex;
}

.box-data input[b-qzg63jpdtn],
.box-data select[b-qzg63jpdtn] {
  flex: 1;
  width: 100px;
  height: 42px;
  padding: 0px 17px;
  border: 1px solid #dcdfe4;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.2px;
  background: rgb(254, 254, 254);
}

.box-error[b-qzg63jpdtn] {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 3px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: rgb(232, 40, 79);
  background: rgb(255, 209, 218);
}

.ui-pane[b-qzg63jpdtn] {
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ui-pane input[b-qzg63jpdtn] {
  width: 20px;
}

.ui-pane-subname[b-qzg63jpdtn] {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #656b7b;
  padding: 0px 20px;
}

.ux-button[b-qzg63jpdtn] {
  padding: 20px 30px 40px;
  border-top: 1px solid rgb(240, 240, 240);
  border-radius: 0px 0px 12px 12px;
}

.ux-button button[b-qzg63jpdtn] {
  width: 180px;
  height: 48px;
  padding: 0px 25px;
  border: 2px solid #dcdfe4;
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  color: white;
  background: #3354f4;
  background-color: #32cfbe;
  cursor: pointer;
  position: relative;
}

.loading[b-qzg63jpdtn] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3354f4;
  background-color: #32cfbe;
  border-radius: 7px;
}

.loading span[b-qzg63jpdtn] {
  font-size: 20px;
}
/* /Pages/Home/Home.razor.rz.scp.css */
section[b-mx7gghcjlw] {
  width: 95%;
  padding-top: 3vh;
}

.top-pane[b-mx7gghcjlw] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-welcome[b-mx7gghcjlw] {
  padding-bottom: 7px;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  gap: 14px;
}

.top-title[b-mx7gghcjlw] {
  font-size: 21px;
  font-weight: 800;
  color: #303761;
}

.top-button[b-mx7gghcjlw] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #3354f4;
  background-color: #32cfbe;
  border-radius: 8px;
  color: white;

  height: 45px;
  padding: 0px 20px;
  font-size: 12px;
  font-weight: 600;
}

.top-button span[b-mx7gghcjlw] {
  font-size: 18px;
  font-variation-settings: "FILL" 1;
}

/* UX */

.ux[b-mx7gghcjlw] {
  padding: 4vh 0px;
  display: flex;
  gap: 32px;
}

/* UX : Headin */

.ux-headin[b-mx7gghcjlw] {
  padding: 40px;
  border-radius: 12px;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ux-headin-pane[b-mx7gghcjlw] {
  color: #c8cad5;
  display: flex;
  align-items: center;
  gap: 17px;
  padding-bottom: 10px;
}

.ux-headin-logo span[b-mx7gghcjlw] {
  font-size: 50px;
  font-variation-settings: "FILL" 1;
}

.ux-headin-all[b-mx7gghcjlw] {
  flex: 1;
}

.ux-headin-name[b-mx7gghcjlw] {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.4px;
}

.ux-headin-subname[b-mx7gghcjlw] {
  font-size: 12px;
  font-weight: 500;
}

.ux-headin-title[b-mx7gghcjlw] {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #303761;
  max-width: 300px;
}

.ux-headin-button[b-mx7gghcjlw] {
  text-align: center;
}

.ux-headin-button button[b-mx7gghcjlw] {
  width: 140px;
  height: 45px;
  border: none;
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  color: white;
  background: #3354f4;
  background: #32cfbe;
  cursor: pointer;
}

/* UX : Content */

.ux-content[b-mx7gghcjlw] {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.box[b-mx7gghcjlw] {
  width: auto;
  padding: 25px 30px;
  border-radius: 12px;
  background: white;
  background: white;
  display: flex;
  gap: 20px;
}

.box-content[b-mx7gghcjlw] {
  flex: 1;
}

.box-name[b-mx7gghcjlw] {
  font-size: 38px;
  color: #303761;
}

.box-subname[b-mx7gghcjlw] {
  font-size: 14px;
  letter-spacing: 0.2px;
  color: #656b7b;
}

.box-icon[b-mx7gghcjlw] {
  width: 50px;
  height: 50px;
  border-radius: 40px;
  background: rgba(51, 83, 244, 0.091);
  color: #3354f4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-icon span[b-mx7gghcjlw] {
  font-size: 20px;
  font-variation-settings: "FILL" 1;
}

/* missed check-outs */
.ux-box[b-mx7gghcjlw] {
  padding-bottom: 4vh;
}
.ux-title[b-mx7gghcjlw] {
  padding: 0px 0px 17px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #303761;
}

.ux-contents[b-mx7gghcjlw] {
  width: 100%;
  min-height: 10vh;
  padding: 40px 20px;
  border-radius: 12px;
  background: white;
  display: flex;
  flex-direction: column;
  overflow: scroll;
}

table[b-mx7gghcjlw] {
  min-width: 800px;
  width: 100%;
}

th[b-mx7gghcjlw] {
  padding: 17px 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #303761;
  background: #f1f4f9;
}

th:first-child[b-mx7gghcjlw] {
  border-radius: 7px 0px 0px 7px;
}

th:last-child[b-mx7gghcjlw] {
  border-radius: 0px 7px 7px 0px;
}

tbody tr[b-mx7gghcjlw] {
  border-bottom: 1px solid #f1f4f9;
}

td[b-mx7gghcjlw] {
  padding: 10px;
  font-size: 13px;
  letter-spacing: 0.1px;
}

.ui-user[b-mx7gghcjlw] {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ui-logo[b-mx7gghcjlw] {
  width: 45px;
  height: 45px;
  border-radius: 40px;
  font-size: 17px;
  font-weight: 700;
  color: white;
  background: #303761;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
}

.ui-box-content[b-mx7gghcjlw] {
  flex: 1;
}

.ui-box-name[b-mx7gghcjlw] {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-transform: capitalize;
}

.ui-box-subname[b-mx7gghcjlw] {
  font-size: 12px;
  letter-spacing: 0.2px;
  color: grey;
}

.ui-box--button[b-mx7gghcjlw] {
  display: flex;
}

td button[b-mx7gghcjlw] {
  width: 40px;
  height: 40px;
  border: none;
  border: 2px solid #303761;
  border-radius: 40px;
  font-size: 14px;
  color: #303761;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* UI : Lean */

.lean[b-mx7gghcjlw] {
  padding: 30px 0px 30px;
  display: flex;
  justify-content: center;
}

/* UI */

.ui[b-mx7gghcjlw] {
  display: flex;
  gap: 40px;
}

/* UI : Box */

.ui-box[b-mx7gghcjlw] {
  flex: 1;
  padding: 40px;
  border-radius: 12px;
  background: white;
  background: white;
}

.ui-headin[b-mx7gghcjlw] {
  display: flex;
  justify-content: space-between;
}

.ui-title[b-mx7gghcjlw] {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #303761;
}

.ui-title span[b-mx7gghcjlw] {
  font-weight: 300;
  /* color: black; */
}

.ui-all[b-mx7gghcjlw] {
  display: flex;
  align-items: center;
  gap: 40px;
}

.ui-button button[b-mx7gghcjlw] {
  width: 100px;
  height: 38px;
  border: 1px solid #303761;
  border-radius: 40px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 400;
  color: #303761;
  background: transparent;
  cursor: pointer;
}

.ui-data[b-mx7gghcjlw] {
  width: auto;
  padding-bottom: 35px;
}

/* Pane */

.pane[b-mx7gghcjlw] {
  min-width: 300px;
  width: 300px;
  padding: 40px;
  border-radius: 13px;
  background: white;
  display: flex;
  align-items: center;
}

.pane-contain[b-mx7gghcjlw] {
  width: 100%;
}

.pane-logo[b-mx7gghcjlw] {
  text-align: center;
}

.pane-logo img[b-mx7gghcjlw] {
  width: 200px;
}

.pane-content[b-mx7gghcjlw] {
  text-align: center;
}

.pane-name[b-mx7gghcjlw] {
  padding: 24px 0px 14px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: #303761;
}

.pane-button button[b-mx7gghcjlw] {
  width: 100px;
  height: 40px;
  border: 2px solid #3354f4;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: #3354f4;
  background: transparent;
  cursor: pointer;
}

/* Lean */

.lean[b-mx7gghcjlw] {
  padding: 70px 0px 40px;
  display: flex;
  justify-content: center;
}

.lean-content[b-mx7gghcjlw] {
  width: 540px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6em;
  letter-spacing: 0.4px;
  color: #595959;
}

/* Add Shift */
.edit-record[b-mx7gghcjlw] {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
}

.edit-record.view[b-mx7gghcjlw] {
  opacity: 1;
  visibility: visible;
}
/* /Pages/Settings/Settings.razor.rz.scp.css */
section[b-exyo9u4cj0] {
  width: 100%;
}

/* Headin */

.headin[b-exyo9u4cj0] {
  width: auto;
  border-bottom: 2px solid #edeff1;
  background: white;
  display: flex;
  justify-content: center;
}

.headin-contain[b-exyo9u4cj0] {
  width: 95%;
  padding: 5vh 0px 4vh;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.headin-content[b-exyo9u4cj0] {
  width: auto;
}

.headin-pane[b-exyo9u4cj0] {
  padding-bottom: 7px;
  font-size: 12px;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.headin-pane i[b-exyo9u4cj0] {
  font-size: 7px;
}

.headin-all[b-exyo9u4cj0] {
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.headin-logo[b-exyo9u4cj0] {
  width: 60px;
  height: 60px;
  border-radius: 70px;
  font-size: 24px;
  font-weight: 700;
  color: white;
  background: #303761;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: capitalize;
}

.headin-data[b-exyo9u4cj0] {
  width: auto;
}

.headin-name[b-exyo9u4cj0] {
  font-size: 21px;
  font-weight: 800;
  color: #303761;
  text-transform: capitalize;
}

.headin-subname[b-exyo9u4cj0] {
  font-size: 13px;
  color: #656b7b;
  letter-spacing: 0.4px;
}

.headin-button[b-exyo9u4cj0] {
  display: flex;
  align-items: center;
  gap: 10px;
}

.headin-button button[b-exyo9u4cj0] {
  width: auto;
  height: 45px;
  padding: 0px 20px;
  border: 2px solid #dcdfe4;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  color: white;
  background: #32cfbe;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.headin-button button i[b-exyo9u4cj0] {
  font-size: 14px;
  transform: translateY(-1px);
}

/* Menu */

.menu[b-exyo9u4cj0] {
  padding: 0px 40px;
  border-radius: 8px;
  background: white;
  display: flex;
  align-items: center;
}

.menu-contain[b-exyo9u4cj0] {
  width: 95%;
}

.menu-content[b-exyo9u4cj0] {
  display: flex;
  align-items: flex-end;
  gap: 40px;
}

.menu-box[b-exyo9u4cj0] {
  padding: 18px 0px 14px;
  border-bottom: 3px solid transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: #303761;
  cursor: pointer;
}

.menu-selected[b-exyo9u4cj0] {
  border-bottom: 3px solid #32cfbe;
  color: #32cfbe;
}

/* UX */

.ux[b-exyo9u4cj0] {
  width: auto;
  display: flex;
  justify-content: center;
  padding: 40px 0px;
}

.ux-wrap[b-exyo9u4cj0] {
  width: 95%;
  display: flex;
  gap: 40px;
}

.ux-contain[b-exyo9u4cj0] {
  width: 100%;
}

.small-content[b-exyo9u4cj0] {
  max-width: 400px;
}

/* UX : Headin */

.ux-headin[b-exyo9u4cj0] {
  padding: 0px 0px 21px 10px;
}

.ux-headin-title[b-exyo9u4cj0] {
  font-size: 18px;
  font-weight: 700;
  color: #303761;
}

.ux-headin-name[b-exyo9u4cj0] {
  padding-top: 4px;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: #656b7b;
}

/* UX : Content */

.ux-content[b-exyo9u4cj0] {
  padding: 0px 0px 40px;
  border-radius: 10px;
  background: white;
}

.small-content .ux-content[b-exyo9u4cj0] {
  padding: 0px;
}

.small-content .headin-all[b-exyo9u4cj0] {
  padding: 0px;
}

/* UI */

.ui[b-exyo9u4cj0] {
  width: auto;
  padding: 40px 45px;

  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.ui:not(:first-child)[b-exyo9u4cj0] {
  border-top: 1px solid #dcdfe4;
}

.ui-name[b-exyo9u4cj0] {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #1f2023;
}

.ui-subname[b-exyo9u4cj0] {
  max-width: 400px;
  padding: 5px 0px 14px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2px;
  line-height: 1.6em;
  color: #656b7b;
}

.plan_name[b-exyo9u4cj0] {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #3354f4;
  padding-bottom: 3px;
}

.plan_users[b-exyo9u4cj0] {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2px;
  /* color: #656b7b; */
  padding-bottom: 5px;
}

.plan-duration[b-exyo9u4cj0] {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2px;
  color: #656b7b;
  padding-bottom: 15px;
}

.plan-status[b-exyo9u4cj0] {
  display: flex;
}

.plan-status p[b-exyo9u4cj0] {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: green;
  background: rgb(220, 255, 220);
  padding: 8px 15px;
  border-radius: 4px;
}

.plan-status.expired p[b-exyo9u4cj0] {
  color: crimson;
  background: rgb(255, 220, 220);
}

.box[b-exyo9u4cj0] {
  padding: 4px 0px 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 17px;
}

.box-data[b-exyo9u4cj0] {
  width: 300px;
  display: flex;
}

.box-data input[b-exyo9u4cj0],
.box-data select[b-exyo9u4cj0] {
  flex: 1;
  width: 100px;
  height: 42px;
  padding: 0px 17px;
  border: 1px solid gainsboro;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.2px;
  background: whitesmoke;
}

.box-button button[b-exyo9u4cj0] {
  position: relative;
  width: auto;
  height: 44px;
  padding: 0px 25px;
  border: 2px solid #dcdfe4;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  background: transparent;
  color: white;
  background: #32cfbe;
  cursor: pointer;
}

.other-button button[b-exyo9u4cj0] {
  background: #8d31f0;
}

.ui-content[b-exyo9u4cj0] {
  padding: 10px 0px 0px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ui-icon[b-exyo9u4cj0] {
  font-size: 14px;
}

.ui-data[b-exyo9u4cj0] {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #035bcd;
}

.ui-pane[b-exyo9u4cj0] {
  margin-top: -2px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: white;
  background: green;
}

/* Lean */

.lean[b-exyo9u4cj0] {
  margin-top: 30px;
  border: 1px solid crimson;
  border-radius: 14px;
  padding: 20px 25px;
}

.lean-name[b-exyo9u4cj0] {
  font-size: 16px;
  font-weight: 600;
}

.lean-title[b-exyo9u4cj0] {
  padding: 7px 0px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lean-title p[b-exyo9u4cj0] {
  color: #035bcd;
}

.lean-content[b-exyo9u4cj0] {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.lean-button[b-exyo9u4cj0] {
  padding-top: 17px;
}

.lean-button button[b-exyo9u4cj0] {
  width: 130px;
  height: 44px;
  border: 0px;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  color: white;
  color: black;
  background: #035bcd;
  background: gainsboro;
  cursor: pointer;
}

/* Pane */

.pane[b-exyo9u4cj0] {
  width: auto;
}

.pane-box[b-exyo9u4cj0] {
  width: auto;
  padding-bottom: 10px;
}

.pane-name[b-exyo9u4cj0] {
  padding-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #303761;
}

.pane-input[b-exyo9u4cj0] {
  max-width: 400px;
  display: flex;
}

.pane-input input[b-exyo9u4cj0] {
  flex: 1;
  width: 100px;
  height: 44px;
  padding: 0px 17px;
  border: 1px solid gainsboro;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.2px;
  background: whitesmoke;
}

.pane-lean[b-exyo9u4cj0] {
  padding-bottom: 17px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.pane input[b-exyo9u4cj0] {
  width: 20px;
}

.pane-subname[b-exyo9u4cj0] {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.pane-button button[b-exyo9u4cj0] {
  width: auto;
  height: 48px;
  padding: 0px 25px;
  border: 2px solid #dcdfe4;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  color: white;
  background: #3354f4;
  cursor: pointer;
}

.pane-error[b-exyo9u4cj0] {
  max-width: 350px;
  padding: 7px 0px;
  font-size: 13px;
  color: crimson;
  display: none;
}

.pane-content[b-exyo9u4cj0] {
  box-sizing: border-box;
  max-width: 400px;
  margin-top: 10px;
  padding: 14px 10px;
  text-align: center;
  font-size: 13px;
  color: crimson;
  background: rgb(255, 209, 218);
}

.box-error[b-exyo9u4cj0] {
  box-sizing: border-box;
  max-width: 450px;
  margin: 10px 0px;
  padding: 17px 20px;
  text-align: center;
  font-size: 13px;
  color: rgb(222, 72, 102);
  background: rgb(255, 222, 229);
}

.box-error span[b-exyo9u4cj0] {
  font-weight: 400;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* Loading */
.loading[b-exyo9u4cj0] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: gray;
  border-radius: 7px;
}

.loading span[b-exyo9u4cj0] {
  font-size: 20px;
}
/* /Pages/Shifts/AddShift.razor.rz.scp.css */
.ux-contain[b-d4g3vqadqn] {
  width: 580px;
  border-radius: 12px;
  background: white;
}

/* Headin */

.headin[b-d4g3vqadqn] {
  padding: 30px;
  border-bottom: 1px solid whitesmoke;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.headin-title[b-d4g3vqadqn] {
  font-size: 21px;
  font-weight: 700;
  color: #303761;
}

.headin-name[b-d4g3vqadqn] {
  padding-top: 2px;
  font-size: 13px;
  color: #656b7b;
  letter-spacing: 0.4px;
}

.close[b-d4g3vqadqn] {
  cursor: pointer;
}

/* UX : Box */

.ux-content[b-d4g3vqadqn] {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.ux-all[b-d4g3vqadqn] {
  display: flex;
  gap: 17px;
}

.box[b-d4g3vqadqn] {
  flex: 1;
}

.box-name[b-d4g3vqadqn] {
  padding: 0px 0px 7px 5px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #3c404a;
  /* color: #303761; */
}

.box-data[b-d4g3vqadqn] {
  display: flex;
}

.box-data input[b-d4g3vqadqn],
.box-data select[b-d4g3vqadqn] {
  flex: 1;
  width: 100px;
  height: 42px;
  padding: 0px 17px;
  border: 1px solid #dcdfe4;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.2px;
  background: rgb(254, 254, 254);
}

.box-error[b-d4g3vqadqn] {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 3px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: rgb(232, 40, 79);
  background: rgb(255, 209, 218);
}

.ui-pane[b-d4g3vqadqn] {
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ui-pane input[b-d4g3vqadqn] {
  width: 20px;
}

.ui-pane-subname[b-d4g3vqadqn] {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #656b7b;
  padding: 0px 20px;
}

.ux-button[b-d4g3vqadqn] {
  padding: 20px 30px 40px;
  border-top: 1px solid rgb(240, 240, 240);
  border-radius: 0px 0px 12px 12px;
}

.ux-button button[b-d4g3vqadqn] {
  width: 180px;
  height: 48px;
  padding: 0px 25px;
  border: 2px solid #dcdfe4;
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  color: white;
  background: #32cfbe;
  cursor: pointer;
  position: relative;
}

.loading[b-d4g3vqadqn] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #32cfbe;
  border-radius: 7px;
}

.loading span[b-d4g3vqadqn] {
  font-size: 20px;
}
/* /Pages/Shifts/AddUserShift.razor.rz.scp.css */
.ux-contain[b-vxbroi1dkm] {
  width: 580px;
  border-radius: 12px;
  background: white;
}

/* Headin */

.headin[b-vxbroi1dkm] {
  padding: 30px;
  border-bottom: 1px solid whitesmoke;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.headin-title[b-vxbroi1dkm] {
  font-size: 21px;
  font-weight: 700;
  color: #303761;
}

.headin-name[b-vxbroi1dkm] {
  padding-top: 2px;
  font-size: 13px;
  color: #656b7b;
  letter-spacing: 0.4px;
}

.close[b-vxbroi1dkm] {
  cursor: pointer;
}

/* UX : Box */

.ux-content[b-vxbroi1dkm] {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.ux-all[b-vxbroi1dkm] {
  display: flex;
  gap: 17px;
}

.box[b-vxbroi1dkm] {
  flex: 1;
}

.box-name[b-vxbroi1dkm] {
  padding: 0px 0px 7px 5px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #3c404a;
  /* color: #303761; */
}

.box-data[b-vxbroi1dkm] {
  display: flex;
}

.box-data input[b-vxbroi1dkm],
.box-data select[b-vxbroi1dkm] {
  flex: 1;
  width: 100px;
  height: 42px;
  padding: 0px 17px;
  border: 1px solid #dcdfe4;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.2px;
  background: rgb(254, 254, 254);
}

.box-error[b-vxbroi1dkm] {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 3px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: rgb(232, 40, 79);
  background: rgb(255, 209, 218);
}

.ui-pane[b-vxbroi1dkm] {
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.ui-pane input[b-vxbroi1dkm] {
  width: 20px;
}

.ui-pane-subname[b-vxbroi1dkm] {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #656b7b;
  padding: 0px 20px;
}

.ux-button[b-vxbroi1dkm] {
  padding: 20px 30px 40px;
  border-top: 1px solid rgb(240, 240, 240);
  border-radius: 0px 0px 12px 12px;
}

.ux-button button[b-vxbroi1dkm] {
  width: 180px;
  height: 48px;
  padding: 0px 25px;
  border: 2px solid #dcdfe4;
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  color: white;
  background: #32cfbe;
  cursor: pointer;
  position: relative;
}

.loading[b-vxbroi1dkm] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #32cfbe;
  border-radius: 7px;
}

.loading span[b-vxbroi1dkm] {
  font-size: 20px;
}
/* /Pages/Shifts/Shifts.razor.rz.scp.css */
section[b-qnindh2727] {
  width: 95%;
  padding-top: 3vh;
}

/* Headin */

.headin[b-qnindh2727] {
  width: auto;
  padding-bottom: 4vh;
}

.headin-contain[b-qnindh2727] {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.headin-content[b-qnindh2727] {
  width: auto;
}

.headin-pane[b-qnindh2727] {
  padding-bottom: 7px;
  font-size: 12px;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.headin-pane i[b-qnindh2727] {
  font-size: 7px;
}

.headin-title[b-qnindh2727] {
  font-size: 21px;
  font-weight: 800;
  color: #303761;
}

.headin-button[b-qnindh2727] {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.employees-button[b-qnindh2727] {
  height: 45px;
  padding: 0px 20px;
  border-radius: 7px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;

  border: 2px solid #3354f4;
  border: 2px solid #32cfbe;
  color: white;
  background: #3354f4;
  background: #32cfbe;
}

.employees-button span[b-qnindh2727] {
  font-size: 18px;
  font-variation-settings: "wght" 500;
  font-variation-settings: "FILL" 1;
}

/* Menu */

.menu[b-qnindh2727] {
  padding: 0px 40px;
  border-radius: 8px;
  background: white;
}

.menu-contain[b-qnindh2727] {
  width: 95%;
}

.menu-content[b-qnindh2727] {
  display: flex;
  align-items: flex-end;
  gap: 40px;
}

.menu-box[b-qnindh2727] {
  padding: 18px 0px 14px;
  border-bottom: 3px solid transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: #303761;
  cursor: pointer;
}

.menu-box.active[b-qnindh2727] {
  border-bottom: 3px solid #3354f4;
  border-bottom: 3px solid #32cfbe;
  color: #3354f4;
  color: #32cfbe;
}

/* UX : Headin */

.ux-headin[b-qnindh2727] {
  padding-top: 40px;
  padding-bottom: 3vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.ux-headin-title[b-qnindh2727] {
  padding-left: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #303761;
}

.ux-headin-all[b-qnindh2727] {
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.ux-title[b-qnindh2727] {
  padding-left: 20px;
  font-size: 21px;
  font-weight: 700;
  color: #303761;
}

.ux-buttons[b-qnindh2727] {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ux-buttons button[b-qnindh2727] {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: none;
  color: #303761;
  background: white;
  cursor: pointer;
}

.ux-headin-button[b-qnindh2727] {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.ux-headin-button button[b-qnindh2727] {
  width: auto;
  height: 48px;
  padding: 0px 20px;
  border: 2px solid #dcdfe4;
  border-radius: 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #303761;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.publish-button[b-qnindh2727] {
  background: #32cfbf73 !important;
  border-color: #32cfbf59 !important;
  color: white !important;

  position: relative;
}

.publish-button.active[b-qnindh2727] {
  background: #3354f4 !important;
  background: #32cfbe !important;
  border-color: #3354f4 !important;
  border-color: #32cfbe !important;
}

.publish-button.active span[b-qnindh2727] {
  background-color: transparent;
  color: white !important;
}

.shift-button[b-qnindh2727] {
  background: #32cfbe !important;
  border-color: #32cfbe !important;
  color: white !important;
}

.ux-headin-button button i[b-qnindh2727] {
  font-size: 15px;
}

.ux-headin-button button span[b-qnindh2727] {
  font-size: 18px;
}

/* Drop */

.drop[b-qnindh2727] {
  position: absolute;
  top: 64px;
  right: 140px;
  width: 340px;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0px 0px 34px rgba(0, 0, 0, 0.155);
  background: white;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}

.drop.view[b-qnindh2727] {
  opacity: 1;
  visibility: visible;
}

.drop[b-qnindh2727]::after {
  content: "";
  position: absolute;
  top: -8px;
  right: 160px;
  width: 16px;
  height: 16px;
  border-top-left-radius: 4px;
  background: #fff;
  transform: rotate(-45deg);
  z-index: 999;
}

.drop-headin[b-qnindh2727] {
  text-align: center;
}

.drop-title[b-qnindh2727] {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.drop-name[b-qnindh2727] {
  padding-top: 7px;
  display: flex;
  justify-content: center;
}

.drop-subname[b-qnindh2727] {
  width: 85%;
  font-size: 13px;
  letter-spacing: 0.7px;
  /* line-height: 1.35em; */
  color: #7d7b83;
}

/* Tools Drop */
.tools-drop[b-qnindh2727] {
  position: absolute;
  top: 64px;
  right: 60px;
  width: 220px;
  padding: 30px 0px;
  border-radius: 12px;
  box-shadow: 0px 0px 34px rgba(0, 0, 0, 0.155);
  background: white;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: 999;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tools-drop.view[b-qnindh2727] {
  opacity: 1;
  visibility: visible;
}

.tools-drop[b-qnindh2727]::after {
  content: "";
  position: absolute;
  top: -8px;
  right: 110px;
  width: 16px;
  height: 16px;
  border-top-left-radius: 4px;
  background: #fff;
  transform: rotate(-45deg);
  z-index: 999;
}

.tool[b-qnindh2727] {
  padding: 3px 30px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #303761;
}

.line[b-qnindh2727] {
  height: 1px;
  background: #dcdfe4;
}

/* UI */

.ui[b-qnindh2727] {
  padding: 40px 20px;
  border-radius: 12px;
  background: white;
  display: flex;
  flex-direction: column;
}

/* UI : Headin */

.ui-headin[b-qnindh2727] {
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.ui-headin-content[b-qnindh2727] {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Search */

.search[b-qnindh2727] {
  width: 340px;
  height: 44px;
  padding: 0px 20px;
  border: 1px solid #d9dce0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.search-icon[b-qnindh2727] {
  font-size: 14px;
}

.search-input[b-qnindh2727] {
  flex: 1;
  display: flex;
}

.search-input input[b-qnindh2727] {
  flex: 1;
  padding: 0px;
  border: none;
  font-size: 13px;
  font-family: inherit;
  letter-spacing: 0.1px;
  outline: none;
}

.ui-headin-button button[b-qnindh2727] {
  height: 45px;
  padding: 0px 20px;
  border: 1px solid #d9dce0;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #303761;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  position: relative;
}

.loading[b-qnindh2727] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3354f4;
  border-radius: 7px;
}

.loading span[b-qnindh2727] {
  font-size: 20px;
  color: white;
}

/* UI : Table */

.ui-content[b-qnindh2727] {
  width: 100%;
  overflow: scroll;
}

table[b-qnindh2727] {
  min-width: 800px;
  width: 100%;
}

th[b-qnindh2727] {
  padding: 17px 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #303761;
  background: #f1f4f9;
}

th:first-child[b-qnindh2727] {
  border-radius: 7px 0px 0px 7px;
}

th:last-child[b-qnindh2727] {
  border-radius: 0px 7px 7px 0px;
}

tbody tr[b-qnindh2727] {
  border-bottom: 1px solid #f1f4f9;
}

td[b-qnindh2727] {
  padding: 10px;
  font-size: 13px;
  letter-spacing: 0.1px;
  background-color: #f7f7f7;
}

.disabled[b-qnindh2727] {
  background-color: #f7f7f7;
}

.ui-box[b-qnindh2727] {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ui-logo[b-qnindh2727] {
  width: 45px;
  height: 45px;
  border-radius: 40px;
  font-size: 17px;
  font-weight: 700;
  color: white;
  background: #303761;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
}

.ui-box-content[b-qnindh2727] {
  flex: 1;
}

.ui-box-name[b-qnindh2727] {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-transform: capitalize;
}

.ui-box-subname[b-qnindh2727] {
  font-size: 12px;
  letter-spacing: 0.2px;
  color: grey;
  text-transform: capitalize;
}

.shift[b-qnindh2727] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 15px;
  background-color: rgba(30, 193, 190, 0.135);
  border-left: 3px solid #1ec1be;

  font-size: 13px;
  font-weight: 500;
}

.shift.unpublished[b-qnindh2727] {
  background-color: rgba(141, 49, 240, 0.145);
  border-left: 3px solid #8d31f0;
}

.shift-time[b-qnindh2727] {
  padding-bottom: 4px;
}

.shift-status[b-qnindh2727] {
  text-transform: capitalize;
  color: #1ec1be;
  min-width: 120px;
}

.shift.unpublished .shift-status[b-qnindh2727] {
  color: #8d31f0;
}

.shift-action[b-qnindh2727] {
  cursor: pointer;
  position: relative;
}

.shift-action span[b-qnindh2727] {
  font-size: 22px;
}

.ui-button button[b-qnindh2727] {
  width: 40px;
  height: 40px;
  border: none;
  border: 2px solid #303761;
  border-radius: 40px;
  font-size: 14px;
  color: #303761;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.empty[b-qnindh2727] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.add-shift-button[b-qnindh2727] {
  width: 35px;
  height: 35px;
  border: 2px solid #929ead;
  border-radius: 40px;
  color: #929ead;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.add-shift-button span[b-qnindh2727] {
  font-size: 22px;
}

/* UI : Lean */

.lean[b-qnindh2727] {
  padding: 30px 0px 30px;
  display: flex;
  justify-content: center;
}

.lean-content[b-qnindh2727] {
  width: 50%;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.3px;
}

.lean-content span[b-qnindh2727] {
  color: #3354f4;
}

/* Add Shift */
.add-shift-pop[b-qnindh2727] {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
}

.add-shift-pop.view[b-qnindh2727] {
  opacity: 1;
  visibility: visible;
}

/* Delete shift */
.delete-drop[b-qnindh2727] {
  position: absolute;
  top: 18px;
  right: 0;
  background-color: white;
  box-shadow: 0px 0px 34px rgba(0, 0, 0, 0.155);
  border-radius: 6px;
  flex-direction: column;
  min-width: 100px;
  z-index: 999;
  padding: 15px;
  cursor: default;

  display: flex;
  flex-direction: column;
  gap: 10px;

  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
}

.delete-drop.view[b-qnindh2727] {
  top: 23px;
  opacity: 1;
  visibility: visible;
}

.delete-drop-option[b-qnindh2727] {
  cursor: pointer;
  font-weight: 400;
}

/* Loadin */
.loading[b-qnindh2727] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3354f4;
  border-radius: 7px;
}

.loading span[b-qnindh2727] {
  font-size: 20px;
}
/* /Pages/Shifts/ShiftsList.razor.rz.scp.css */
.shifts[b-ylak2uhsjt] {
  display: flex;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
  padding: 0px 4vw;
}

.shift[b-ylak2uhsjt] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  padding: 25px;
  background-color: white;
  border-left: 3px solid #32cfbe;
  /* border-radius: 6px; */

  font-size: 13px;
  font-weight: 400;
}
.shift-info[b-ylak2uhsjt] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shift-time[b-ylak2uhsjt] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.shift-time span[b-ylak2uhsjt] {
  font-weight: 700;
}

.shift-action[b-ylak2uhsjt] {
  cursor: pointer;
  position: relative;
}

.shift-action span[b-ylak2uhsjt] {
  font-size: 22px;
}

.drop[b-ylak2uhsjt] {
  position: absolute;
  z-index: 999;
  top: 18px;
  right: 0;
  background-color: white;
  box-shadow: 0px 0px 34px rgba(0, 0, 0, 0.155);
  border-radius: 6px;
  flex-direction: column;
  min-width: 100px;
  z-index: 10;
  padding: 15px;
  cursor: default;

  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
}

.drop.view[b-ylak2uhsjt] {
  top: 23px;
  opacity: 1;
  visibility: visible;
}

.drop-option[b-ylak2uhsjt] {
  cursor: pointer;
  font-weight: 400;
}
/* /Shared/Calendar/CalendarDrop.razor.rz.scp.css */
.drop-content[b-t6max9lgjp] {
  padding: 28px 0px;
}

.drop-control[b-t6max9lgjp] {
  padding-bottom: 17px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.drop-control-name[b-t6max9lgjp] {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #34353d;
}

.drop-control button[b-t6max9lgjp] {
  width: 35px;
  height: 35px;
  padding: 0px;
  border: 2px solid #656b7b;
  border-radius: 40px;
  font-size: 16px;
  color: #656b7b;
  background: transparent;
  cursor: pointer;
}

.drop-data[b-t6max9lgjp] {
  width: auto;
}

.cal[b-t6max9lgjp] {
  width: auto;
  text-align: center;
}

.cal-days[b-t6max9lgjp] {
  padding-bottom: 17px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.cal-day[b-t6max9lgjp] {
  width: auto;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #1f2023;
}

.cal-content[b-t6max9lgjp] {
  font-size: 13px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  place-items: center;
}

.cal-content div[b-t6max9lgjp] {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.date[b-t6max9lgjp] {
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.inactive[b-t6max9lgjp] {
  color: #a1a5b2;
}

.day-selected[b-t6max9lgjp] {
  color: white;
  background: #3353f456;
}

.today[b-t6max9lgjp] {
  color: white;
  background: #0080fc;
}

.drop-selected[b-t6max9lgjp] {
  color: white;
  background: #303761;
}

.other-month[b-t6max9lgjp] {
  color: #a3a6aa;
}

.drop-button[b-t6max9lgjp] {
  display: flex;
  justify-content: center;
}

.drop-button button[b-t6max9lgjp] {
  width: auto;
  height: 45px;
  padding: 0px 24px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: white;
  background: #3354f4;
  cursor: pointer;
}
/* /Shared/Calendar/MonthCalendar.razor.rz.scp.css */
.drop-control[b-dn6qzbzzm9] {
  padding: 28px 0px 40px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.drop-control-name[b-dn6qzbzzm9] {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #34353d;
}

.drop-control button[b-dn6qzbzzm9] {
  width: 35px;
  height: 35px;
  padding: 0px;
  border: 2px solid #656b7b;
  border-radius: 40px;
  font-size: 16px;
  color: #656b7b;
  background: transparent;
  cursor: pointer;
}

.drop-button[b-dn6qzbzzm9] {
  display: flex;
  justify-content: center;
}

.drop-button button[b-dn6qzbzzm9] {
  width: auto;
  height: 48px;
  padding: 0px 24px;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: white;
  background: #3354f4;
  cursor: pointer;
}
/* /Shared/Loading/Loading.razor.rz.scp.css */
.not-found[b-5jg8pargcf] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8vh;
}

.not-found-icon span[b-5jg8pargcf] {
  font-size: 60px;
  font-variation-settings: "wght" 300;
  color: gainsboro;
}

.not-found-title[b-5jg8pargcf] {
  font-weight: 600;
  padding-bottom: 4px;
  padding-top: 8px;
  max-width: 400px;
  text-align: center;
}

.not-found-message[b-5jg8pargcf] {
  font-size: 14px;
  font-weight: 300;
  max-width: 400px;
  text-align: center;
  color: gray;
}
/* /Shared/Navigation/Navigation.razor.rz.scp.css */
section[b-uwiqys9h45] {
  height: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3vh 0px;
  width: 80px;
  box-shadow: 0px 4px 14px gainsboro;
  z-index: 999;
}

.nav-top[b-uwiqys9h45] {
  display: flex;
  flex-direction: column;
}

.nav-logo[b-uwiqys9h45] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 20px 0px;
  padding-bottom: 20px;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.logo img[b-uwiqys9h45] {
  width: 30px;
  height: 30px;
}
.logo span[b-uwiqys9h45] {
  font-size: 30px;
}

.logo-line[b-uwiqys9h45] {
  height: 2px;
  width: 100%;
  background-color: gainsboro;
  border-radius: 5px;
}

.nav-title[b-uwiqys9h45] {
  text-align: center;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: gray;
  padding-bottom: 20px;
}

.nav-items[b-uwiqys9h45] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nav-items > div[b-uwiqys9h45] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-item[b-uwiqys9h45] {
  display: block;
  cursor: pointer;
}

.item-line[b-uwiqys9h45] {
  position: absolute;
  left: -3px;
  top: 0;
  height: 100%;
  padding: 5px 0px;

  visibility: hidden;
}

.line[b-uwiqys9h45] {
  width: 6px;
  height: 100%;
  background-color: #3354f4;
  background-color: #32cfbe;
  border-radius: 6px;
}

.nav-item span[b-uwiqys9h45] {
  font-size: 20px;
  font-variation-settings: "FILL" 1;
  color: #686868;
  padding: 5px;
  border-radius: 8px;
}

.nav-account span[b-uwiqys9h45] {
  background-color: #f1f2f6;
  color: black;
}

.nav-item:hover + .pit[b-uwiqys9h45],
.pit:hover[b-uwiqys9h45] {
  opacity: 1;
  visibility: visible;
}

/* Pit */

.pit[b-uwiqys9h45] {
  position: absolute;
  top: -10px;
  left: 75px;
  width: 200px;
  padding: 17px;
  border-radius: 7px;
  box-shadow: 0px 0px 14px gainsboro;
  color: #303761;
  background: #fff;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}

.pit[b-uwiqys9h45]::after {
  content: "";
  position: absolute;
  top: 20px;
  left: -8px;
  width: 16px;
  height: 16px;
  border-top-left-radius: 4px;
  background: #fff;
  transform: rotate(-45deg);
  z-index: 999;
}

.pit-title[b-uwiqys9h45] {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.pit-name[b-uwiqys9h45] {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3px;
}
/* /Shared/NotFound/NotFound.razor.rz.scp.css */
.not-found[b-ipds0nr7uw] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8vh;
}

.not-found-icon span[b-ipds0nr7uw] {
  font-size: 60px;
  font-variation-settings: "wght" 300;
  color: gainsboro;
  padding-bottom: 8px;
}

.not-found-title[b-ipds0nr7uw] {
  font-weight: 600;
  padding-bottom: 4px;
  max-width: 400px;
  text-align: center;
}

.not-found-message[b-ipds0nr7uw] {
  font-size: 14px;
  font-weight: 300;
  max-width: 400px;
  text-align: center;
  color: gray;
}
/* /Shared/NotFound/_404.razor.rz.scp.css */
.not-found[b-2bverduufk] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10vh 20px;
  color: #303761;
}

.not-found-title[b-2bverduufk] {
  font-size: 22px;
  font-weight: 800;
  color: #303761;
  padding-bottom: 7px;
}

.not-found-subtitle[b-2bverduufk] {
  max-width: 400px;
  text-align: center;
  padding-bottom: 25px;
}

.not-found-button[b-2bverduufk] {
  height: 45px;
  width: 120px;
  border: 2px solid #303761;
  border-radius: 45px;
  font-size: 15px;
  font-weight: 600;

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* /Shared/PopUps/PopUp.razor.rz.scp.css */
.main-popup[b-uip4yitpkt] {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 50%;
  transform: translate(-50%, -10px);

  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
}

.main-popup.view[b-uip4yitpkt] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 10px);
}

.main-popup-content[b-uip4yitpkt] {
  background-color: white;
  padding: 15px 20px;
  width: 300px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  display: flex;
  align-items: center;
  gap: 15px;
}

.main-popup-icon span[b-uip4yitpkt] {
  font-size: 30px;
  color: rgba(34, 197, 94, 1);
  font-variation-settings: "wght" 300;
}

.main-popup-icon span.bad[b-uip4yitpkt] {
  color: #f35163;
}

.main-popup-info[b-uip4yitpkt] {
  flex: 1;
  padding: 5px 0px;
  padding-left: 15px;
  border-left: 1px solid rgba(240, 240, 240, 1);
}

.main-popup-title[b-uip4yitpkt] {
  font-size: 14px;
  padding-bottom: 3px;
  font-weight: 600;
}

.main-popup-subtitle[b-uip4yitpkt] {
  font-size: 12px;
  font-weight: 400;
  color: rgba(147, 147, 147, 1);
}