.submit-btn {
  padding: 13px;
  background: black;
  border: none;
  outline: none;
  border-radius: 3px;
  color: white;
  cursor: pointer;
}

.toggle-with-text {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px;
  align-items: center;
}

.toggle-with-text .text {
  font-size: 13px;
  color: #333;
}

.toggle-btn-active,
.toggle-btn {
  margin: 0 !important;
  width: 35px;
  height: 16px;
  border-radius: 50px;
  background: #c1baba;
  position: relative;
  z-index: 1;
}

.toggle-btn-active:before,
.toggle-btn:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  height: 20px;
  width: 20px;
  background: #726868;
  border-radius: 50px;
  cursor: pointer;
  z-index: 1;
  transition: all 0.3s;
}

.toggle-btn-active:active:after,
.toggle-btn:active:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-13%, -50%);
  height: 26px;
  width: 26px;
  background: rgba(72, 47, 47, 0.4196078431);
  border-radius: 50px;
  z-index: -1;
  transition: all 0.1s;
}

.toggle-btn-active:before {
  background: #ff0100;
  right: 0 !important;
  left: auto;
  transition: 0.3s !important;
}

.toggle-btn-active:active:after {
  right: -18%;
  left: auto !important;
  background: rgba(207, 21, 21, 0.4196078431) !important;
  transition: all 0.3s !important;
}

.message-box {
  padding: 4px 0;
  display: grid;
  grid-template-columns: 1fr;
}

.alert-success,
.alert-danger {
  width: 100%;
  padding: 15px 10px;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  font-size: 15px;
}

.alert-success {
  background: rgba(6, 215, 76, 0.0588235294) !important;
  color: green !important;
  border-color: rgba(6, 215, 76, 0.0588235294) !important;
}

.alert-danger {
  background: rgba(209, 15, 15, 0.0588235294) !important;
  color: red !important;
  border-color: rgba(231, 144, 144, 0.0588235294) !important;
}

.view-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1.5px solid white;
  outline: none;
  border-radius: 3px;
  cursor: pointer;
  color: white;
}

.view-btn:hover {
  background: white;
  color: #333;
  outline: none;
}

.add-new-btn {
  display: grid;
  grid-template-columns: max-content;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  align-items: center;
  width: fit-content;
  height: 45px;
  gap: 10px;
  background: transparent;
  border-radius: 6px;
  padding: 0 15px;
  border: 1px solid #ff0100;
  outline: none;
  cursor: pointer;
  color: #ff0100;
}

.add-new-btn:hover {
  background: rgba(255, 1, 0, 0.1215686275);
  color: black;
  outline: none;
  transition: all 0.3s ease-in-out;
  border: 1px solid #ff0100;
}

.add-new-btn:active {
  background: rgba(255, 1, 0, 0.0588235294);
  border: 1px solid #ff0100;
  color: black;
  outline: none;
  transition: all 0.3s ease-in-out;
}

.add-new-btn:focus {
  border: 1px solid #ff0100;
  color: black;
  outline: none;
  transition: all 0.3s ease-in-out;
}

.logout-btn {
  display: grid;
  grid-template-columns: max-content;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  min-width: 100px;
  height: 40px;
  gap: 10px;
  background: transparent;
  border-radius: 6px;
  border: 1px solid rgba(215, 46, 46, 0.2509803922);
  outline: none;
  cursor: pointer;
  color: rgba(255, 0, 51, 0.773);
  background: transparent;
}

.logout-btn:hover {
  background: rgba(215, 46, 46, 0.2509803922);
  color: black;
  outline: none;
  transition: all 0.3s ease-in-out;
  border: 1px solid rgba(215, 46, 46, 0.2509803922);
}

.logout-btn:active {
  background: rgba(215, 46, 46, 0.3882352941);
  border: 1px solid rgba(215, 46, 46, 0.2509803922);
  color: black;
  outline: none;
  transition: all 0.3s ease-in-out;
}

.logout-btn:focus {
  border: 1px solid rgba(215, 46, 46, 0.2509803922);
  color: black;
  outline: none;
  transition: all 0.3s ease-in-out;
}

.redirect-btn {
  display: grid;
  grid-template-columns: max-content;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  align-items: center;
  width: fit-content;
  height: 45px;
  gap: 10px;
  background: transparent;
  border-radius: 6px;
  padding: 0 15px;
  border: 1px solid #9100ff;
  outline: none;
  cursor: pointer;
  color: #9100ff;
  background: rgba(100, 0, 255, 0.1215686275);
  text-decoration: none;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.redirect-btn:hover {
  background: rgba(53, 0, 255, 0.0901960784);
  color: black;
  outline: none;
  transition: all 0.3s ease-in-out;
  border: 1px solid #9100ff;
}

.redirect-btn:active {
  background: rgba(53, 0, 255, 0.1098039216);
  border: 1px solid #9100ff;
  color: black;
  outline: none;
  transition: all 0.3s ease-in-out;
}

.redirect-btn:focus {
  border: 1px solid #9100ff;
  color: black;
  outline: none;
  transition: all 0.3s ease-in-out;
}

.common-btn {
  display: grid;
  grid-template-columns: max-content;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  align-items: center;
  width: fit-content;
  height: 45px;
  gap: 10px;
  background: transparent;
  border-radius: 6px;
  padding: 0 15px;
  border: 1px solid #ff0100;
  outline: none;
  cursor: pointer;
  color: #ff0100;
}

.common-btn:hover {
  background: rgba(255, 1, 0, 0.1215686275);
  color: black;
  outline: none;
  transition: all 0.3s ease-in-out;
  border: 1px solid #ff0100;
}

.common-btn:active {
  background: #fff;
  border: 1px solid #ff0100;
  color: black;
  outline: none;
  transition: all 0.3s ease-in-out;
}

.common-btn:focus {
  border: 1px solid #ff0100;
  color: black;
  outline: none;
  transition: all 0.3s ease-in-out;
}

.p-0 {
  padding: 0px !important;
}

.p-x-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.p-y-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.m-0 {
  margin: 0px !important;
}

.m-x-0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.m-y-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.p-1 {
  padding: 1px !important;
}

.p-x-1 {
  padding-left: 1px !important;
  padding-right: 1px !important;
}

.p-y-1 {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

.m-1 {
  margin: 1px !important;
}

.m-x-1 {
  margin-left: 1px !important;
  margin-right: 1px !important;
}

.m-y-1 {
  margin-top: 1px !important;
  margin-bottom: 1px !important;
}

.p-2 {
  padding: 2px !important;
}

.p-x-2 {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.p-y-2 {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.m-2 {
  margin: 2px !important;
}

.m-x-2 {
  margin-left: 2px !important;
  margin-right: 2px !important;
}

.m-y-2 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.p-3 {
  padding: 3px !important;
}

.p-x-3 {
  padding-left: 3px !important;
  padding-right: 3px !important;
}

.p-y-3 {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.m-3 {
  margin: 3px !important;
}

.m-x-3 {
  margin-left: 3px !important;
  margin-right: 3px !important;
}

.m-y-3 {
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}

.p-4 {
  padding: 4px !important;
}

.p-x-4 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.p-y-4 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.m-4 {
  margin: 4px !important;
}

.m-x-4 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.m-y-4 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.p-5 {
  padding: 5px !important;
}

.p-x-5 {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.p-y-5 {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.m-5 {
  margin: 5px !important;
}

.m-x-5 {
  margin-left: 5px !important;
  margin-right: 5px !important;
}

.m-y-5 {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

.p-6 {
  padding: 6px !important;
}

.p-x-6 {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.p-y-6 {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.m-6 {
  margin: 6px !important;
}

.m-x-6 {
  margin-left: 6px !important;
  margin-right: 6px !important;
}

.m-y-6 {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

.p-7 {
  padding: 7px !important;
}

.p-x-7 {
  padding-left: 7px !important;
  padding-right: 7px !important;
}

.p-y-7 {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

.m-7 {
  margin: 7px !important;
}

.m-x-7 {
  margin-left: 7px !important;
  margin-right: 7px !important;
}

.m-y-7 {
  margin-top: 7px !important;
  margin-bottom: 7px !important;
}

.p-8 {
  padding: 8px !important;
}

.p-x-8 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.p-y-8 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.m-8 {
  margin: 8px !important;
}

.m-x-8 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.m-y-8 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.p-9 {
  padding: 9px !important;
}

.p-x-9 {
  padding-left: 9px !important;
  padding-right: 9px !important;
}

.p-y-9 {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

.m-9 {
  margin: 9px !important;
}

.m-x-9 {
  margin-left: 9px !important;
  margin-right: 9px !important;
}

.m-y-9 {
  margin-top: 9px !important;
  margin-bottom: 9px !important;
}

.p-10 {
  padding: 10px !important;
}

.p-x-10 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.p-y-10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.m-10 {
  margin: 10px !important;
}

.m-x-10 {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

.m-y-10 {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.p-11 {
  padding: 11px !important;
}

.p-x-11 {
  padding-left: 11px !important;
  padding-right: 11px !important;
}

.p-y-11 {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

.m-11 {
  margin: 11px !important;
}

.m-x-11 {
  margin-left: 11px !important;
  margin-right: 11px !important;
}

.m-y-11 {
  margin-top: 11px !important;
  margin-bottom: 11px !important;
}

.p-12 {
  padding: 12px !important;
}

.p-x-12 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.p-y-12 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.m-12 {
  margin: 12px !important;
}

.m-x-12 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.m-y-12 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.p-13 {
  padding: 13px !important;
}

.p-x-13 {
  padding-left: 13px !important;
  padding-right: 13px !important;
}

.p-y-13 {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}

.m-13 {
  margin: 13px !important;
}

.m-x-13 {
  margin-left: 13px !important;
  margin-right: 13px !important;
}

.m-y-13 {
  margin-top: 13px !important;
  margin-bottom: 13px !important;
}

.p-14 {
  padding: 14px !important;
}

.p-x-14 {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.p-y-14 {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.m-14 {
  margin: 14px !important;
}

.m-x-14 {
  margin-left: 14px !important;
  margin-right: 14px !important;
}

.m-y-14 {
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

.p-15 {
  padding: 15px !important;
}

.p-x-15 {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.p-y-15 {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.m-15 {
  margin: 15px !important;
}

.m-x-15 {
  margin-left: 15px !important;
  margin-right: 15px !important;
}

.m-y-15 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.p-16 {
  padding: 16px !important;
}

.p-x-16 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.p-y-16 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.m-16 {
  margin: 16px !important;
}

.m-x-16 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.m-y-16 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.p-17 {
  padding: 17px !important;
}

.p-x-17 {
  padding-left: 17px !important;
  padding-right: 17px !important;
}

.p-y-17 {
  padding-top: 17px !important;
  padding-bottom: 17px !important;
}

.m-17 {
  margin: 17px !important;
}

.m-x-17 {
  margin-left: 17px !important;
  margin-right: 17px !important;
}

.m-y-17 {
  margin-top: 17px !important;
  margin-bottom: 17px !important;
}

.p-18 {
  padding: 18px !important;
}

.p-x-18 {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.p-y-18 {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.m-18 {
  margin: 18px !important;
}

.m-x-18 {
  margin-left: 18px !important;
  margin-right: 18px !important;
}

.m-y-18 {
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}

.p-19 {
  padding: 19px !important;
}

.p-x-19 {
  padding-left: 19px !important;
  padding-right: 19px !important;
}

.p-y-19 {
  padding-top: 19px !important;
  padding-bottom: 19px !important;
}

.m-19 {
  margin: 19px !important;
}

.m-x-19 {
  margin-left: 19px !important;
  margin-right: 19px !important;
}

.m-y-19 {
  margin-top: 19px !important;
  margin-bottom: 19px !important;
}

.p-20 {
  padding: 20px !important;
}

.p-x-20 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.p-y-20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.m-20 {
  margin: 20px !important;
}

.m-x-20 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.m-y-20 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.p-21 {
  padding: 21px !important;
}

.p-x-21 {
  padding-left: 21px !important;
  padding-right: 21px !important;
}

.p-y-21 {
  padding-top: 21px !important;
  padding-bottom: 21px !important;
}

.m-21 {
  margin: 21px !important;
}

.m-x-21 {
  margin-left: 21px !important;
  margin-right: 21px !important;
}

.m-y-21 {
  margin-top: 21px !important;
  margin-bottom: 21px !important;
}

.p-22 {
  padding: 22px !important;
}

.p-x-22 {
  padding-left: 22px !important;
  padding-right: 22px !important;
}

.p-y-22 {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

.m-22 {
  margin: 22px !important;
}

.m-x-22 {
  margin-left: 22px !important;
  margin-right: 22px !important;
}

.m-y-22 {
  margin-top: 22px !important;
  margin-bottom: 22px !important;
}

.p-23 {
  padding: 23px !important;
}

.p-x-23 {
  padding-left: 23px !important;
  padding-right: 23px !important;
}

.p-y-23 {
  padding-top: 23px !important;
  padding-bottom: 23px !important;
}

.m-23 {
  margin: 23px !important;
}

.m-x-23 {
  margin-left: 23px !important;
  margin-right: 23px !important;
}

.m-y-23 {
  margin-top: 23px !important;
  margin-bottom: 23px !important;
}

.p-24 {
  padding: 24px !important;
}

.p-x-24 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.p-y-24 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.m-24 {
  margin: 24px !important;
}

.m-x-24 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.m-y-24 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.p-25 {
  padding: 25px !important;
}

.p-x-25 {
  padding-left: 25px !important;
  padding-right: 25px !important;
}

.p-y-25 {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

.m-25 {
  margin: 25px !important;
}

.m-x-25 {
  margin-left: 25px !important;
  margin-right: 25px !important;
}

.m-y-25 {
  margin-top: 25px !important;
  margin-bottom: 25px !important;
}

.p-26 {
  padding: 26px !important;
}

.p-x-26 {
  padding-left: 26px !important;
  padding-right: 26px !important;
}

.p-y-26 {
  padding-top: 26px !important;
  padding-bottom: 26px !important;
}

.m-26 {
  margin: 26px !important;
}

.m-x-26 {
  margin-left: 26px !important;
  margin-right: 26px !important;
}

.m-y-26 {
  margin-top: 26px !important;
  margin-bottom: 26px !important;
}

.p-27 {
  padding: 27px !important;
}

.p-x-27 {
  padding-left: 27px !important;
  padding-right: 27px !important;
}

.p-y-27 {
  padding-top: 27px !important;
  padding-bottom: 27px !important;
}

.m-27 {
  margin: 27px !important;
}

.m-x-27 {
  margin-left: 27px !important;
  margin-right: 27px !important;
}

.m-y-27 {
  margin-top: 27px !important;
  margin-bottom: 27px !important;
}

.p-28 {
  padding: 28px !important;
}

.p-x-28 {
  padding-left: 28px !important;
  padding-right: 28px !important;
}

.p-y-28 {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

.m-28 {
  margin: 28px !important;
}

.m-x-28 {
  margin-left: 28px !important;
  margin-right: 28px !important;
}

.m-y-28 {
  margin-top: 28px !important;
  margin-bottom: 28px !important;
}

.p-29 {
  padding: 29px !important;
}

.p-x-29 {
  padding-left: 29px !important;
  padding-right: 29px !important;
}

.p-y-29 {
  padding-top: 29px !important;
  padding-bottom: 29px !important;
}

.m-29 {
  margin: 29px !important;
}

.m-x-29 {
  margin-left: 29px !important;
  margin-right: 29px !important;
}

.m-y-29 {
  margin-top: 29px !important;
  margin-bottom: 29px !important;
}

.p-30 {
  padding: 30px !important;
}

.p-x-30 {
  padding-left: 30px !important;
  padding-right: 30px !important;
}

.p-y-30 {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

.m-30 {
  margin: 30px !important;
}

.m-x-30 {
  margin-left: 30px !important;
  margin-right: 30px !important;
}

.m-y-30 {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

.p-31 {
  padding: 31px !important;
}

.p-x-31 {
  padding-left: 31px !important;
  padding-right: 31px !important;
}

.p-y-31 {
  padding-top: 31px !important;
  padding-bottom: 31px !important;
}

.m-31 {
  margin: 31px !important;
}

.m-x-31 {
  margin-left: 31px !important;
  margin-right: 31px !important;
}

.m-y-31 {
  margin-top: 31px !important;
  margin-bottom: 31px !important;
}

.p-32 {
  padding: 32px !important;
}

.p-x-32 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.p-y-32 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.m-32 {
  margin: 32px !important;
}

.m-x-32 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.m-y-32 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

.p-33 {
  padding: 33px !important;
}

.p-x-33 {
  padding-left: 33px !important;
  padding-right: 33px !important;
}

.p-y-33 {
  padding-top: 33px !important;
  padding-bottom: 33px !important;
}

.m-33 {
  margin: 33px !important;
}

.m-x-33 {
  margin-left: 33px !important;
  margin-right: 33px !important;
}

.m-y-33 {
  margin-top: 33px !important;
  margin-bottom: 33px !important;
}

.p-34 {
  padding: 34px !important;
}

.p-x-34 {
  padding-left: 34px !important;
  padding-right: 34px !important;
}

.p-y-34 {
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}

.m-34 {
  margin: 34px !important;
}

.m-x-34 {
  margin-left: 34px !important;
  margin-right: 34px !important;
}

.m-y-34 {
  margin-top: 34px !important;
  margin-bottom: 34px !important;
}

.p-35 {
  padding: 35px !important;
}

.p-x-35 {
  padding-left: 35px !important;
  padding-right: 35px !important;
}

.p-y-35 {
  padding-top: 35px !important;
  padding-bottom: 35px !important;
}

.m-35 {
  margin: 35px !important;
}

.m-x-35 {
  margin-left: 35px !important;
  margin-right: 35px !important;
}

.m-y-35 {
  margin-top: 35px !important;
  margin-bottom: 35px !important;
}

.p-36 {
  padding: 36px !important;
}

.p-x-36 {
  padding-left: 36px !important;
  padding-right: 36px !important;
}

.p-y-36 {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

.m-36 {
  margin: 36px !important;
}

.m-x-36 {
  margin-left: 36px !important;
  margin-right: 36px !important;
}

.m-y-36 {
  margin-top: 36px !important;
  margin-bottom: 36px !important;
}

.p-37 {
  padding: 37px !important;
}

.p-x-37 {
  padding-left: 37px !important;
  padding-right: 37px !important;
}

.p-y-37 {
  padding-top: 37px !important;
  padding-bottom: 37px !important;
}

.m-37 {
  margin: 37px !important;
}

.m-x-37 {
  margin-left: 37px !important;
  margin-right: 37px !important;
}

.m-y-37 {
  margin-top: 37px !important;
  margin-bottom: 37px !important;
}

.p-38 {
  padding: 38px !important;
}

.p-x-38 {
  padding-left: 38px !important;
  padding-right: 38px !important;
}

.p-y-38 {
  padding-top: 38px !important;
  padding-bottom: 38px !important;
}

.m-38 {
  margin: 38px !important;
}

.m-x-38 {
  margin-left: 38px !important;
  margin-right: 38px !important;
}

.m-y-38 {
  margin-top: 38px !important;
  margin-bottom: 38px !important;
}

.p-39 {
  padding: 39px !important;
}

.p-x-39 {
  padding-left: 39px !important;
  padding-right: 39px !important;
}

.p-y-39 {
  padding-top: 39px !important;
  padding-bottom: 39px !important;
}

.m-39 {
  margin: 39px !important;
}

.m-x-39 {
  margin-left: 39px !important;
  margin-right: 39px !important;
}

.m-y-39 {
  margin-top: 39px !important;
  margin-bottom: 39px !important;
}

.p-40 {
  padding: 40px !important;
}

.p-x-40 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.p-y-40 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.m-40 {
  margin: 40px !important;
}

.m-x-40 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}

.m-y-40 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.p-41 {
  padding: 41px !important;
}

.p-x-41 {
  padding-left: 41px !important;
  padding-right: 41px !important;
}

.p-y-41 {
  padding-top: 41px !important;
  padding-bottom: 41px !important;
}

.m-41 {
  margin: 41px !important;
}

.m-x-41 {
  margin-left: 41px !important;
  margin-right: 41px !important;
}

.m-y-41 {
  margin-top: 41px !important;
  margin-bottom: 41px !important;
}

.p-42 {
  padding: 42px !important;
}

.p-x-42 {
  padding-left: 42px !important;
  padding-right: 42px !important;
}

.p-y-42 {
  padding-top: 42px !important;
  padding-bottom: 42px !important;
}

.m-42 {
  margin: 42px !important;
}

.m-x-42 {
  margin-left: 42px !important;
  margin-right: 42px !important;
}

.m-y-42 {
  margin-top: 42px !important;
  margin-bottom: 42px !important;
}

.p-43 {
  padding: 43px !important;
}

.p-x-43 {
  padding-left: 43px !important;
  padding-right: 43px !important;
}

.p-y-43 {
  padding-top: 43px !important;
  padding-bottom: 43px !important;
}

.m-43 {
  margin: 43px !important;
}

.m-x-43 {
  margin-left: 43px !important;
  margin-right: 43px !important;
}

.m-y-43 {
  margin-top: 43px !important;
  margin-bottom: 43px !important;
}

.p-44 {
  padding: 44px !important;
}

.p-x-44 {
  padding-left: 44px !important;
  padding-right: 44px !important;
}

.p-y-44 {
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}

.m-44 {
  margin: 44px !important;
}

.m-x-44 {
  margin-left: 44px !important;
  margin-right: 44px !important;
}

.m-y-44 {
  margin-top: 44px !important;
  margin-bottom: 44px !important;
}

.p-45 {
  padding: 45px !important;
}

.p-x-45 {
  padding-left: 45px !important;
  padding-right: 45px !important;
}

.p-y-45 {
  padding-top: 45px !important;
  padding-bottom: 45px !important;
}

.m-45 {
  margin: 45px !important;
}

.m-x-45 {
  margin-left: 45px !important;
  margin-right: 45px !important;
}

.m-y-45 {
  margin-top: 45px !important;
  margin-bottom: 45px !important;
}

.p-46 {
  padding: 46px !important;
}

.p-x-46 {
  padding-left: 46px !important;
  padding-right: 46px !important;
}

.p-y-46 {
  padding-top: 46px !important;
  padding-bottom: 46px !important;
}

.m-46 {
  margin: 46px !important;
}

.m-x-46 {
  margin-left: 46px !important;
  margin-right: 46px !important;
}

.m-y-46 {
  margin-top: 46px !important;
  margin-bottom: 46px !important;
}

.p-47 {
  padding: 47px !important;
}

.p-x-47 {
  padding-left: 47px !important;
  padding-right: 47px !important;
}

.p-y-47 {
  padding-top: 47px !important;
  padding-bottom: 47px !important;
}

.m-47 {
  margin: 47px !important;
}

.m-x-47 {
  margin-left: 47px !important;
  margin-right: 47px !important;
}

.m-y-47 {
  margin-top: 47px !important;
  margin-bottom: 47px !important;
}

.p-48 {
  padding: 48px !important;
}

.p-x-48 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.p-y-48 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.m-48 {
  margin: 48px !important;
}

.m-x-48 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.m-y-48 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.p-49 {
  padding: 49px !important;
}

.p-x-49 {
  padding-left: 49px !important;
  padding-right: 49px !important;
}

.p-y-49 {
  padding-top: 49px !important;
  padding-bottom: 49px !important;
}

.m-49 {
  margin: 49px !important;
}

.m-x-49 {
  margin-left: 49px !important;
  margin-right: 49px !important;
}

.m-y-49 {
  margin-top: 49px !important;
  margin-bottom: 49px !important;
}

.p-50 {
  padding: 50px !important;
}

.p-x-50 {
  padding-left: 50px !important;
  padding-right: 50px !important;
}

.p-y-50 {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}

.m-50 {
  margin: 50px !important;
}

.m-x-50 {
  margin-left: 50px !important;
  margin-right: 50px !important;
}

.m-y-50 {
  margin-top: 50px !important;
  margin-bottom: 50px !important;
}

.p-51 {
  padding: 51px !important;
}

.p-x-51 {
  padding-left: 51px !important;
  padding-right: 51px !important;
}

.p-y-51 {
  padding-top: 51px !important;
  padding-bottom: 51px !important;
}

.m-51 {
  margin: 51px !important;
}

.m-x-51 {
  margin-left: 51px !important;
  margin-right: 51px !important;
}

.m-y-51 {
  margin-top: 51px !important;
  margin-bottom: 51px !important;
}

.p-52 {
  padding: 52px !important;
}

.p-x-52 {
  padding-left: 52px !important;
  padding-right: 52px !important;
}

.p-y-52 {
  padding-top: 52px !important;
  padding-bottom: 52px !important;
}

.m-52 {
  margin: 52px !important;
}

.m-x-52 {
  margin-left: 52px !important;
  margin-right: 52px !important;
}

.m-y-52 {
  margin-top: 52px !important;
  margin-bottom: 52px !important;
}

.p-53 {
  padding: 53px !important;
}

.p-x-53 {
  padding-left: 53px !important;
  padding-right: 53px !important;
}

.p-y-53 {
  padding-top: 53px !important;
  padding-bottom: 53px !important;
}

.m-53 {
  margin: 53px !important;
}

.m-x-53 {
  margin-left: 53px !important;
  margin-right: 53px !important;
}

.m-y-53 {
  margin-top: 53px !important;
  margin-bottom: 53px !important;
}

.p-54 {
  padding: 54px !important;
}

.p-x-54 {
  padding-left: 54px !important;
  padding-right: 54px !important;
}

.p-y-54 {
  padding-top: 54px !important;
  padding-bottom: 54px !important;
}

.m-54 {
  margin: 54px !important;
}

.m-x-54 {
  margin-left: 54px !important;
  margin-right: 54px !important;
}

.m-y-54 {
  margin-top: 54px !important;
  margin-bottom: 54px !important;
}

.p-55 {
  padding: 55px !important;
}

.p-x-55 {
  padding-left: 55px !important;
  padding-right: 55px !important;
}

.p-y-55 {
  padding-top: 55px !important;
  padding-bottom: 55px !important;
}

.m-55 {
  margin: 55px !important;
}

.m-x-55 {
  margin-left: 55px !important;
  margin-right: 55px !important;
}

.m-y-55 {
  margin-top: 55px !important;
  margin-bottom: 55px !important;
}

.p-56 {
  padding: 56px !important;
}

.p-x-56 {
  padding-left: 56px !important;
  padding-right: 56px !important;
}

.p-y-56 {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

.m-56 {
  margin: 56px !important;
}

.m-x-56 {
  margin-left: 56px !important;
  margin-right: 56px !important;
}

.m-y-56 {
  margin-top: 56px !important;
  margin-bottom: 56px !important;
}

.p-57 {
  padding: 57px !important;
}

.p-x-57 {
  padding-left: 57px !important;
  padding-right: 57px !important;
}

.p-y-57 {
  padding-top: 57px !important;
  padding-bottom: 57px !important;
}

.m-57 {
  margin: 57px !important;
}

.m-x-57 {
  margin-left: 57px !important;
  margin-right: 57px !important;
}

.m-y-57 {
  margin-top: 57px !important;
  margin-bottom: 57px !important;
}

.p-58 {
  padding: 58px !important;
}

.p-x-58 {
  padding-left: 58px !important;
  padding-right: 58px !important;
}

.p-y-58 {
  padding-top: 58px !important;
  padding-bottom: 58px !important;
}

.m-58 {
  margin: 58px !important;
}

.m-x-58 {
  margin-left: 58px !important;
  margin-right: 58px !important;
}

.m-y-58 {
  margin-top: 58px !important;
  margin-bottom: 58px !important;
}

.p-59 {
  padding: 59px !important;
}

.p-x-59 {
  padding-left: 59px !important;
  padding-right: 59px !important;
}

.p-y-59 {
  padding-top: 59px !important;
  padding-bottom: 59px !important;
}

.m-59 {
  margin: 59px !important;
}

.m-x-59 {
  margin-left: 59px !important;
  margin-right: 59px !important;
}

.m-y-59 {
  margin-top: 59px !important;
  margin-bottom: 59px !important;
}

.p-60 {
  padding: 60px !important;
}

.p-x-60 {
  padding-left: 60px !important;
  padding-right: 60px !important;
}

.p-y-60 {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.m-60 {
  margin: 60px !important;
}

.m-x-60 {
  margin-left: 60px !important;
  margin-right: 60px !important;
}

.m-y-60 {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

.p-61 {
  padding: 61px !important;
}

.p-x-61 {
  padding-left: 61px !important;
  padding-right: 61px !important;
}

.p-y-61 {
  padding-top: 61px !important;
  padding-bottom: 61px !important;
}

.m-61 {
  margin: 61px !important;
}

.m-x-61 {
  margin-left: 61px !important;
  margin-right: 61px !important;
}

.m-y-61 {
  margin-top: 61px !important;
  margin-bottom: 61px !important;
}

.p-62 {
  padding: 62px !important;
}

.p-x-62 {
  padding-left: 62px !important;
  padding-right: 62px !important;
}

.p-y-62 {
  padding-top: 62px !important;
  padding-bottom: 62px !important;
}

.m-62 {
  margin: 62px !important;
}

.m-x-62 {
  margin-left: 62px !important;
  margin-right: 62px !important;
}

.m-y-62 {
  margin-top: 62px !important;
  margin-bottom: 62px !important;
}

.p-63 {
  padding: 63px !important;
}

.p-x-63 {
  padding-left: 63px !important;
  padding-right: 63px !important;
}

.p-y-63 {
  padding-top: 63px !important;
  padding-bottom: 63px !important;
}

.m-63 {
  margin: 63px !important;
}

.m-x-63 {
  margin-left: 63px !important;
  margin-right: 63px !important;
}

.m-y-63 {
  margin-top: 63px !important;
  margin-bottom: 63px !important;
}

.p-64 {
  padding: 64px !important;
}

.p-x-64 {
  padding-left: 64px !important;
  padding-right: 64px !important;
}

.p-y-64 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

.m-64 {
  margin: 64px !important;
}

.m-x-64 {
  margin-left: 64px !important;
  margin-right: 64px !important;
}

.m-y-64 {
  margin-top: 64px !important;
  margin-bottom: 64px !important;
}

.p-65 {
  padding: 65px !important;
}

.p-x-65 {
  padding-left: 65px !important;
  padding-right: 65px !important;
}

.p-y-65 {
  padding-top: 65px !important;
  padding-bottom: 65px !important;
}

.m-65 {
  margin: 65px !important;
}

.m-x-65 {
  margin-left: 65px !important;
  margin-right: 65px !important;
}

.m-y-65 {
  margin-top: 65px !important;
  margin-bottom: 65px !important;
}

.p-66 {
  padding: 66px !important;
}

.p-x-66 {
  padding-left: 66px !important;
  padding-right: 66px !important;
}

.p-y-66 {
  padding-top: 66px !important;
  padding-bottom: 66px !important;
}

.m-66 {
  margin: 66px !important;
}

.m-x-66 {
  margin-left: 66px !important;
  margin-right: 66px !important;
}

.m-y-66 {
  margin-top: 66px !important;
  margin-bottom: 66px !important;
}

.p-67 {
  padding: 67px !important;
}

.p-x-67 {
  padding-left: 67px !important;
  padding-right: 67px !important;
}

.p-y-67 {
  padding-top: 67px !important;
  padding-bottom: 67px !important;
}

.m-67 {
  margin: 67px !important;
}

.m-x-67 {
  margin-left: 67px !important;
  margin-right: 67px !important;
}

.m-y-67 {
  margin-top: 67px !important;
  margin-bottom: 67px !important;
}

.p-68 {
  padding: 68px !important;
}

.p-x-68 {
  padding-left: 68px !important;
  padding-right: 68px !important;
}

.p-y-68 {
  padding-top: 68px !important;
  padding-bottom: 68px !important;
}

.m-68 {
  margin: 68px !important;
}

.m-x-68 {
  margin-left: 68px !important;
  margin-right: 68px !important;
}

.m-y-68 {
  margin-top: 68px !important;
  margin-bottom: 68px !important;
}

.p-69 {
  padding: 69px !important;
}

.p-x-69 {
  padding-left: 69px !important;
  padding-right: 69px !important;
}

.p-y-69 {
  padding-top: 69px !important;
  padding-bottom: 69px !important;
}

.m-69 {
  margin: 69px !important;
}

.m-x-69 {
  margin-left: 69px !important;
  margin-right: 69px !important;
}

.m-y-69 {
  margin-top: 69px !important;
  margin-bottom: 69px !important;
}

.p-70 {
  padding: 70px !important;
}

.p-x-70 {
  padding-left: 70px !important;
  padding-right: 70px !important;
}

.p-y-70 {
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}

.m-70 {
  margin: 70px !important;
}

.m-x-70 {
  margin-left: 70px !important;
  margin-right: 70px !important;
}

.m-y-70 {
  margin-top: 70px !important;
  margin-bottom: 70px !important;
}

.p-71 {
  padding: 71px !important;
}

.p-x-71 {
  padding-left: 71px !important;
  padding-right: 71px !important;
}

.p-y-71 {
  padding-top: 71px !important;
  padding-bottom: 71px !important;
}

.m-71 {
  margin: 71px !important;
}

.m-x-71 {
  margin-left: 71px !important;
  margin-right: 71px !important;
}

.m-y-71 {
  margin-top: 71px !important;
  margin-bottom: 71px !important;
}

.p-72 {
  padding: 72px !important;
}

.p-x-72 {
  padding-left: 72px !important;
  padding-right: 72px !important;
}

.p-y-72 {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

.m-72 {
  margin: 72px !important;
}

.m-x-72 {
  margin-left: 72px !important;
  margin-right: 72px !important;
}

.m-y-72 {
  margin-top: 72px !important;
  margin-bottom: 72px !important;
}

.p-73 {
  padding: 73px !important;
}

.p-x-73 {
  padding-left: 73px !important;
  padding-right: 73px !important;
}

.p-y-73 {
  padding-top: 73px !important;
  padding-bottom: 73px !important;
}

.m-73 {
  margin: 73px !important;
}

.m-x-73 {
  margin-left: 73px !important;
  margin-right: 73px !important;
}

.m-y-73 {
  margin-top: 73px !important;
  margin-bottom: 73px !important;
}

.p-74 {
  padding: 74px !important;
}

.p-x-74 {
  padding-left: 74px !important;
  padding-right: 74px !important;
}

.p-y-74 {
  padding-top: 74px !important;
  padding-bottom: 74px !important;
}

.m-74 {
  margin: 74px !important;
}

.m-x-74 {
  margin-left: 74px !important;
  margin-right: 74px !important;
}

.m-y-74 {
  margin-top: 74px !important;
  margin-bottom: 74px !important;
}

.p-75 {
  padding: 75px !important;
}

.p-x-75 {
  padding-left: 75px !important;
  padding-right: 75px !important;
}

.p-y-75 {
  padding-top: 75px !important;
  padding-bottom: 75px !important;
}

.m-75 {
  margin: 75px !important;
}

.m-x-75 {
  margin-left: 75px !important;
  margin-right: 75px !important;
}

.m-y-75 {
  margin-top: 75px !important;
  margin-bottom: 75px !important;
}

.p-76 {
  padding: 76px !important;
}

.p-x-76 {
  padding-left: 76px !important;
  padding-right: 76px !important;
}

.p-y-76 {
  padding-top: 76px !important;
  padding-bottom: 76px !important;
}

.m-76 {
  margin: 76px !important;
}

.m-x-76 {
  margin-left: 76px !important;
  margin-right: 76px !important;
}

.m-y-76 {
  margin-top: 76px !important;
  margin-bottom: 76px !important;
}

.p-77 {
  padding: 77px !important;
}

.p-x-77 {
  padding-left: 77px !important;
  padding-right: 77px !important;
}

.p-y-77 {
  padding-top: 77px !important;
  padding-bottom: 77px !important;
}

.m-77 {
  margin: 77px !important;
}

.m-x-77 {
  margin-left: 77px !important;
  margin-right: 77px !important;
}

.m-y-77 {
  margin-top: 77px !important;
  margin-bottom: 77px !important;
}

.p-78 {
  padding: 78px !important;
}

.p-x-78 {
  padding-left: 78px !important;
  padding-right: 78px !important;
}

.p-y-78 {
  padding-top: 78px !important;
  padding-bottom: 78px !important;
}

.m-78 {
  margin: 78px !important;
}

.m-x-78 {
  margin-left: 78px !important;
  margin-right: 78px !important;
}

.m-y-78 {
  margin-top: 78px !important;
  margin-bottom: 78px !important;
}

.p-79 {
  padding: 79px !important;
}

.p-x-79 {
  padding-left: 79px !important;
  padding-right: 79px !important;
}

.p-y-79 {
  padding-top: 79px !important;
  padding-bottom: 79px !important;
}

.m-79 {
  margin: 79px !important;
}

.m-x-79 {
  margin-left: 79px !important;
  margin-right: 79px !important;
}

.m-y-79 {
  margin-top: 79px !important;
  margin-bottom: 79px !important;
}

.p-80 {
  padding: 80px !important;
}

.p-x-80 {
  padding-left: 80px !important;
  padding-right: 80px !important;
}

.p-y-80 {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.m-80 {
  margin: 80px !important;
}

.m-x-80 {
  margin-left: 80px !important;
  margin-right: 80px !important;
}

.m-y-80 {
  margin-top: 80px !important;
  margin-bottom: 80px !important;
}

.p-81 {
  padding: 81px !important;
}

.p-x-81 {
  padding-left: 81px !important;
  padding-right: 81px !important;
}

.p-y-81 {
  padding-top: 81px !important;
  padding-bottom: 81px !important;
}

.m-81 {
  margin: 81px !important;
}

.m-x-81 {
  margin-left: 81px !important;
  margin-right: 81px !important;
}

.m-y-81 {
  margin-top: 81px !important;
  margin-bottom: 81px !important;
}

.p-82 {
  padding: 82px !important;
}

.p-x-82 {
  padding-left: 82px !important;
  padding-right: 82px !important;
}

.p-y-82 {
  padding-top: 82px !important;
  padding-bottom: 82px !important;
}

.m-82 {
  margin: 82px !important;
}

.m-x-82 {
  margin-left: 82px !important;
  margin-right: 82px !important;
}

.m-y-82 {
  margin-top: 82px !important;
  margin-bottom: 82px !important;
}

.p-83 {
  padding: 83px !important;
}

.p-x-83 {
  padding-left: 83px !important;
  padding-right: 83px !important;
}

.p-y-83 {
  padding-top: 83px !important;
  padding-bottom: 83px !important;
}

.m-83 {
  margin: 83px !important;
}

.m-x-83 {
  margin-left: 83px !important;
  margin-right: 83px !important;
}

.m-y-83 {
  margin-top: 83px !important;
  margin-bottom: 83px !important;
}

.p-84 {
  padding: 84px !important;
}

.p-x-84 {
  padding-left: 84px !important;
  padding-right: 84px !important;
}

.p-y-84 {
  padding-top: 84px !important;
  padding-bottom: 84px !important;
}

.m-84 {
  margin: 84px !important;
}

.m-x-84 {
  margin-left: 84px !important;
  margin-right: 84px !important;
}

.m-y-84 {
  margin-top: 84px !important;
  margin-bottom: 84px !important;
}

.p-85 {
  padding: 85px !important;
}

.p-x-85 {
  padding-left: 85px !important;
  padding-right: 85px !important;
}

.p-y-85 {
  padding-top: 85px !important;
  padding-bottom: 85px !important;
}

.m-85 {
  margin: 85px !important;
}

.m-x-85 {
  margin-left: 85px !important;
  margin-right: 85px !important;
}

.m-y-85 {
  margin-top: 85px !important;
  margin-bottom: 85px !important;
}

.p-86 {
  padding: 86px !important;
}

.p-x-86 {
  padding-left: 86px !important;
  padding-right: 86px !important;
}

.p-y-86 {
  padding-top: 86px !important;
  padding-bottom: 86px !important;
}

.m-86 {
  margin: 86px !important;
}

.m-x-86 {
  margin-left: 86px !important;
  margin-right: 86px !important;
}

.m-y-86 {
  margin-top: 86px !important;
  margin-bottom: 86px !important;
}

.p-87 {
  padding: 87px !important;
}

.p-x-87 {
  padding-left: 87px !important;
  padding-right: 87px !important;
}

.p-y-87 {
  padding-top: 87px !important;
  padding-bottom: 87px !important;
}

.m-87 {
  margin: 87px !important;
}

.m-x-87 {
  margin-left: 87px !important;
  margin-right: 87px !important;
}

.m-y-87 {
  margin-top: 87px !important;
  margin-bottom: 87px !important;
}

.p-88 {
  padding: 88px !important;
}

.p-x-88 {
  padding-left: 88px !important;
  padding-right: 88px !important;
}

.p-y-88 {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}

.m-88 {
  margin: 88px !important;
}

.m-x-88 {
  margin-left: 88px !important;
  margin-right: 88px !important;
}

.m-y-88 {
  margin-top: 88px !important;
  margin-bottom: 88px !important;
}

.p-89 {
  padding: 89px !important;
}

.p-x-89 {
  padding-left: 89px !important;
  padding-right: 89px !important;
}

.p-y-89 {
  padding-top: 89px !important;
  padding-bottom: 89px !important;
}

.m-89 {
  margin: 89px !important;
}

.m-x-89 {
  margin-left: 89px !important;
  margin-right: 89px !important;
}

.m-y-89 {
  margin-top: 89px !important;
  margin-bottom: 89px !important;
}

.p-90 {
  padding: 90px !important;
}

.p-x-90 {
  padding-left: 90px !important;
  padding-right: 90px !important;
}

.p-y-90 {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}

.m-90 {
  margin: 90px !important;
}

.m-x-90 {
  margin-left: 90px !important;
  margin-right: 90px !important;
}

.m-y-90 {
  margin-top: 90px !important;
  margin-bottom: 90px !important;
}

.p-91 {
  padding: 91px !important;
}

.p-x-91 {
  padding-left: 91px !important;
  padding-right: 91px !important;
}

.p-y-91 {
  padding-top: 91px !important;
  padding-bottom: 91px !important;
}

.m-91 {
  margin: 91px !important;
}

.m-x-91 {
  margin-left: 91px !important;
  margin-right: 91px !important;
}

.m-y-91 {
  margin-top: 91px !important;
  margin-bottom: 91px !important;
}

.p-92 {
  padding: 92px !important;
}

.p-x-92 {
  padding-left: 92px !important;
  padding-right: 92px !important;
}

.p-y-92 {
  padding-top: 92px !important;
  padding-bottom: 92px !important;
}

.m-92 {
  margin: 92px !important;
}

.m-x-92 {
  margin-left: 92px !important;
  margin-right: 92px !important;
}

.m-y-92 {
  margin-top: 92px !important;
  margin-bottom: 92px !important;
}

.p-93 {
  padding: 93px !important;
}

.p-x-93 {
  padding-left: 93px !important;
  padding-right: 93px !important;
}

.p-y-93 {
  padding-top: 93px !important;
  padding-bottom: 93px !important;
}

.m-93 {
  margin: 93px !important;
}

.m-x-93 {
  margin-left: 93px !important;
  margin-right: 93px !important;
}

.m-y-93 {
  margin-top: 93px !important;
  margin-bottom: 93px !important;
}

.p-94 {
  padding: 94px !important;
}

.p-x-94 {
  padding-left: 94px !important;
  padding-right: 94px !important;
}

.p-y-94 {
  padding-top: 94px !important;
  padding-bottom: 94px !important;
}

.m-94 {
  margin: 94px !important;
}

.m-x-94 {
  margin-left: 94px !important;
  margin-right: 94px !important;
}

.m-y-94 {
  margin-top: 94px !important;
  margin-bottom: 94px !important;
}

.p-95 {
  padding: 95px !important;
}

.p-x-95 {
  padding-left: 95px !important;
  padding-right: 95px !important;
}

.p-y-95 {
  padding-top: 95px !important;
  padding-bottom: 95px !important;
}

.m-95 {
  margin: 95px !important;
}

.m-x-95 {
  margin-left: 95px !important;
  margin-right: 95px !important;
}

.m-y-95 {
  margin-top: 95px !important;
  margin-bottom: 95px !important;
}

.p-96 {
  padding: 96px !important;
}

.p-x-96 {
  padding-left: 96px !important;
  padding-right: 96px !important;
}

.p-y-96 {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.m-96 {
  margin: 96px !important;
}

.m-x-96 {
  margin-left: 96px !important;
  margin-right: 96px !important;
}

.m-y-96 {
  margin-top: 96px !important;
  margin-bottom: 96px !important;
}

.p-97 {
  padding: 97px !important;
}

.p-x-97 {
  padding-left: 97px !important;
  padding-right: 97px !important;
}

.p-y-97 {
  padding-top: 97px !important;
  padding-bottom: 97px !important;
}

.m-97 {
  margin: 97px !important;
}

.m-x-97 {
  margin-left: 97px !important;
  margin-right: 97px !important;
}

.m-y-97 {
  margin-top: 97px !important;
  margin-bottom: 97px !important;
}

.p-98 {
  padding: 98px !important;
}

.p-x-98 {
  padding-left: 98px !important;
  padding-right: 98px !important;
}

.p-y-98 {
  padding-top: 98px !important;
  padding-bottom: 98px !important;
}

.m-98 {
  margin: 98px !important;
}

.m-x-98 {
  margin-left: 98px !important;
  margin-right: 98px !important;
}

.m-y-98 {
  margin-top: 98px !important;
  margin-bottom: 98px !important;
}

.p-99 {
  padding: 99px !important;
}

.p-x-99 {
  padding-left: 99px !important;
  padding-right: 99px !important;
}

.p-y-99 {
  padding-top: 99px !important;
  padding-bottom: 99px !important;
}

.m-99 {
  margin: 99px !important;
}

.m-x-99 {
  margin-left: 99px !important;
  margin-right: 99px !important;
}

.m-y-99 {
  margin-top: 99px !important;
  margin-bottom: 99px !important;
}

.p-100 {
  padding: 100px !important;
}

.p-x-100 {
  padding-left: 100px !important;
  padding-right: 100px !important;
}

.p-y-100 {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

.m-100 {
  margin: 100px !important;
}

.m-x-100 {
  margin-left: 100px !important;
  margin-right: 100px !important;
}

.m-y-100 {
  margin-top: 100px !important;
  margin-bottom: 100px !important;
}

.model {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background: rgba(32, 32, 45, 0.8509803922);
  transition: all 0.3s ease-in-out;
}

.model::-webkit-scrollbar,
.model::-webkit-scrollbar-thumb {
  width: 0;
}

.model .box-outer {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 350px;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  z-index: 2;
}

.model .box-outer-lg {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 70vw;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  z-index: 2;
}

.model .box {
  height: fit-content;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
  padding: 20px 25px;
  background: #fff;
}

.model .box-header {
  display: grid;
  grid-template-columns: 35px max-content;
  align-items: center;
  align-content: center;
  gap: 20px;
  padding: 10px 0;
}

.model .box-header-on-title {
  padding: 10px 0;
}

.model .box-header-on-title h3 {
  color: #333;
  font-size: 18px;
  letter-spacing: 0.5px;
  padding: 10px 0;
}

.model .box-header h3 {
  color: #333;
  font-size: 18px;
  letter-spacing: 0.5px;
  padding: 10px 0;
}

.model .close-btn {
  height: 35px;
  border: none;
  outline: none;
  background: rgba(236, 176, 176, 0.2196078431);
  color: rgba(255, 0, 0, 0.3215686275);
  border-radius: 50px;
  transition: all 0.3s;
}

.model .close-btn:active {
  background: rgba(236, 176, 176, 0.3215686275);
  color: rgba(255, 0, 0, 0.8784313725);
  transition: all 0.3s;
}

.model .box-footer {
  padding: 15px 0;
}

.chart:nth-child(3) canvas {
  display: block;
  box-sizing: border-box;
  height: 100% !important;
  width: 100% !important;
}

.chart:nth-child(1) canvas,
.chart:nth-child(2) canvas,
.chart:nth-child(4) canvas {
  display: block;
  box-sizing: border-box;
  height: 100% !important;
  width: 80% !important;
}

.copy-box {
  display: grid;
  grid-template-columns: max-content 35px;
  grid-template-rows: 35px;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  padding: 7px 7px;
  border-radius: 6px;
  border: 1px solid rgba(231, 231, 231, 0.4901960784);
  background: rgba(230, 233, 231, 0.2784313725);
}

.copy-box span {
  color: #827e7e;
}

.copy-box button {
  color: #d111c0;
  background: rgba(254, 47, 90, 0.031372549);
  width: 35px;
  height: 100%;
  line-height: 30px;
  border-radius: 4px;
  border: none !important;
  outline: none !important;
  transition: all 0.3s;
  position: relative;
}

.copy-box button:active {
  border: none !important;
  outline: none !important;
  color: #d111c0;
  background: rgba(180, 0, 255, 0.168627451);
  transition: all 0.3s;
}

.copy-box button span,
.copy-box button .active-span {
  display: none;
  color: #000 !important;
  background: #d7d7d6 !important;
  width: fit-content !important;
  position: absolute;
  top: 105%;
  height: auto;
  padding: 0 8px;
  font-size: 12px !important;
  right: 0;
  border-radius: 5px;
}

.copy-box button:hover .active-span,
.copy-box button:hover span {
  display: block;
  transition: all 0.3s ease-in-out;
}

.copy-box button:hover .active-span {
  display: grid !important;
  grid-template-columns: max-content max-content;
  gap: 5px;
  align-items: center;
  align-content: center;
}

.copy-box button .active-span {
  background: #d9efe8 !important;
  color: green !important;
}

.global-status-outer {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 5px;
  align-items: center;
}

.global-probation-status {
  width: 10px;
  height: 10px;
  background: #df1d1d;
  box-shadow: 0 0 5px 0 red;
  border-radius: 50px;
}

.global-confirmed-status {
  width: 10px;
  height: 10px;
  background: #20a53e;
  box-shadow: 0 0 5px 0 #10a282;
  border-radius: 50px;
}

.global-inactive-status {
  width: 10px;
  height: 10px;
  background: #c6c12c;
  box-shadow: 0 0 5px 0 #8d7c2a;
  border-radius: 50px;
}

.global-done-status {
  width: 10px;
  height: 10px;
  background: green;
  box-shadow: 0 0 5px 0 #8d7c2a;
  border-radius: 50px;
}

.global-pending-status {
  width: 10px;
  height: 10px;
  background: blue;
  box-shadow: 0 0 5px 0 #10a282;
  border-radius: 50px;
}

.shadow-input {
  border: none !important;
  outline: none !important;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 4px 0 rgba(132, 116, 116, 0.5803921569);
  padding: 7px 13px;
  width: 100%;
}

.shadow-input::placeholder {
  color: #bfbfbf;
}

.shadow-input:read-only {
  background-color: rgba(214, 208, 208, 0.1803921569);
  color: dimgray !important;
}

/*login dashboard*/
#login_dashboard {
  display: grid;
  grid-template-columns: 380px;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background: url("../../public/image/auth_wallpaper.webp") !important;
  background-size: cover !important;
  background-repeat: no-repeat;
  position: relative;
}

@media (max-width: 400px) {
  #login_dashboard {
    grid-template-columns: 1fr;
  }
}
/*#login_dashboard .box-group{
    display: grid;
    grid-template-columns: 380px;
    align-items: center;
    background: #ffffffc7;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 #212d111a;
}*/
#login_dashboard .poster {
  padding: 20px;
  background: linear-gradient(336deg, rgba(240, 25, 30, 0.3215686275), rgba(207, 216, 11, 0.2588235294)) !important;
  width: 350px;
  height: 350px;
  position: fixed;
  bottom: 0;
  left: 0;
  border-radius: 0 100% 0 0;
}

#login_dashboard .poster:before {
  position: absolute;
  content: "";
  background: linear-gradient(336deg, rgba(240, 25, 30, 0.4117647059), rgba(207, 216, 11, 0.2509803922)) !important;
  width: 400px;
  height: 400px;
  bottom: 0;
  left: 0;
  border-radius: 0 100% 0 0;
  z-index: -1;
}

#login_dashboard .poster:after {
  position: absolute;
  content: "";
  background: linear-gradient(336deg, rgba(240, 25, 30, 0.2196078431), rgba(207, 216, 11, 0.1411764706)) !important;
  width: 450px;
  height: 450px;
  bottom: 0;
  left: 0;
  border-radius: 0 100% 0 0;
  z-index: -1;
}

#login_dashboard .poster img {
  width: 100%;
}

#login_dashboard .box {
  padding: 30px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: rgba(146, 147, 146, 0.2901960784);
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
}

#login_dashboard .box .before {
  content: "";
  position: absolute;
  left: -50%;
  top: 50%;
  transform: translate(50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(292deg, rgba(182, 200, 122, 0.0705882353), transparent);
  z-index: -2;
}

#login_dashboard .box .after {
  content: "";
  position: absolute;
  right: -31%;
  top: 10%;
  border-radius: 50%;
  transform: translate(0%, 0%);
  width: 200px;
  height: 200px;
  background: linear-gradient(292deg, rgba(174, 176, 166, 0.1607843137), transparent);
  z-index: 3;
}

#login_dashboard .box-header {
  display: grid;
  grid-template-columns: max-content;
  justify-content: center;
  align-items: center;
}

#login_dashboard .box-header img {
  width: 220px;
}

#login_dashboard .box-header h3 {
  color: #333;
  font-size: 20px;
  text-align: center;
}

#login_dashboard .box-body {
  padding: 10px 0;
}

#login_dashboard .form-control {
  background: #fff !important;
}

@media (min-width: 1500px) {
  .media-container {
    width: 1500px;
    margin: auto;
    display: block;
  }
}
/*=====================*/
.tool-tip,
.tool-tip-active {
  position: relative;
}

.tool-tip-left::before {
  left: 9px;
  top: -100% !important;
}

.tool-tip-left-bottom::before {
  left: 0;
  top: 105% !important;
  transform: translate(5%, 10%) !important;
}

.tool-tip-right-bottom::before {
  right: 22px;
  top: 150% !important;
  transform: translate(-5%, 10%);
}

.tool-tip-right::before {
  right: 22px;
  top: -100% !important;
}

.tool-tip-active::before {
  content: attr(data-title);
  position: absolute;
  top: -100%;
  transform: translate(-10%, -50%);
  min-width: 100px;
  min-height: 35px;
  line-height: 35px;
  z-index: 999;
  border-radius: 3px;
  background: #333;
  color: white;
  text-align: center;
  transition: opacity 0.5s;
  user-select: none;
  font-size: 14px !important;
}

#admin_panel .box-group {
  width: 100%;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 15px;
}

@media (max-width: 1010px) {
  #admin_panel .box-group .sidebar_outer {
    display: none;
  }
  #admin_panel .grid-1fr-1010-px {
    grid-template-columns: 1fr;
  }
  #admin_panel .pedding-1010-px {
    padding: 0 20px;
  }
}
#admin_panel .box-group .sidebar {
  box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
  display: grid;
  grid-template-rows: max-content 1fr max-content;
  height: fit-content;
}
#admin_panel .box-group .sidebar .count-incoming-request.pending {
  position: relative;
}
#admin_panel .box-group .sidebar .count-incoming-request.pending::before {
  content: attr(data-count);
  position: absolute;
  top: -14%;
  right: -1%;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #007afd;
  font-size: 10px;
  color: #ffffff;
  text-align: center;
  line-height: 20px;
}

#admin_panel .box-group .fixed-sidebar {
  width: 300px;
  position: fixed;
  z-index: 99;
}

#admin_panel .box-group .fixed-sidebar .sidebar {
  position: relative;
  background: white !important;
}

#admin_panel .box-group .sidebar .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: none;
  outline: none;
  background: #fff;
  color: red;
  border-radius: 6px;
  display: none !important;
}

@media (max-width: 1010px) {
  #admin_panel .box-group .sidebar .close-btn {
    display: unset !important;
  }
}
#admin_panel .box-group .sidebar .sidebar-header {
  display: grid;
  grid-template-columns: 200px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(92, 89, 90, 0.1);
}

#admin_panel .box-group .sidebar .sidebar-header .logo {
  width: 100%;
}

#admin_panel .box-group .sidebar .sidebar-item-group {
  padding: 20px;
  border-radius: 15px 15px 0 0;
  background: #fff;
}

#admin_panel .box-group .sidebar .sidebar-item-group .sidebar-item-box {
  padding: 0 3px;
}

#admin_panel .box-group .sidebar .sidebar-item-group .sidebar-item-box .sidebar-item-title h3 {
  font-size: 17px;
  color: rgba(109, 109, 109, 0.5607843137);
}

#admin_panel .box-group .sidebar .sidebar-items {
  padding: 3px 0;
}

#admin_panel .box-group .sidebar .sidebar-items .sidebar-item,
#admin_panel .box-group .sidebar .sidebar-items .sidebar-item-active {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: start;
  gap: 10px;
  align-items: center;
  padding: 8px 15px;
  cursor: pointer;
  border-left: 4px solid transparent;
}

#admin_panel .box-group .sidebar .sidebar-items .sidebar-item:hover,
#admin_panel .box-group .sidebar .sidebar-items .sidebar-item-active {
  background: rgba(255, 202, 212, 0.4274509804);
  border-radius: 5px;
}

#admin_panel .box-group .sidebar .sidebar-items .sidebar-item a,
#admin_panel .box-group .sidebar .sidebar-items .sidebar-item-active a,
#admin_panel .box-group .sidebar .sidebar-items .sidebar-item i,
#admin_panel .box-group .sidebar .sidebar-items .sidebar-item-active i {
  font-size: 15px;
  text-decoration: none;
}

#admin_panel .box-group .sidebar .sidebar-items .sidebar-item a,
#admin_panel .box-group .sidebar .sidebar-items .sidebar-item i {
  color: rgba(6, 8, 8, 0.2784313725);
}

#admin_panel .box-group .sidebar .sidebar-items .sidebar-item:hover a,
#admin_panel .box-group .sidebar .sidebar-items .sidebar-item:hover i,
#admin_panel .box-group .sidebar .sidebar-items .sidebar-item-active i,
#admin_panel .box-group .sidebar .sidebar-items .sidebar-item-active a {
  color: #ff0100;
}

#admin_panel .box-group .sidebar .leave-btn-outer {
  padding: 20px;
  background: white;
  width: 100%;
}

#admin_panel .box-group .sidebar .leave-btn-outer button {
  outline: none;
  border: none;
  box-shadow: none;
  padding: 8px 20px;
  color: white;
  background: #fc415b;
  border-radius: 6px;
  width: 100%;
}

#admin_panel .box-group .sidebar .leave-btn-outer button:hover {
  background: rgba(237, 82, 82, 0.6588235294);
}

#admin_panel .box-group .box {
  display: grid;
  grid-template-columns: 1fr;
  height: fit-content;
}

/* navigation start   */
.navigation {
  width: 100%;
  height: fit-content;
  background: white;
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
}

#admin_panel .menu-btn {
  border: none;
  outline: none;
  background: rgba(225, 26, 94, 0.6392156863);
  border-radius: 6px;
  padding: 0 13px;
  margin-right: 6px;
  color: #fff;
  display: none;
}

@media (max-width: 1010px) {
  #admin_panel .menu-btn {
    display: unset !important;
  }
}
.navigation .user-profile-img {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  gap: 10px;
}
.navigation .user-profile-img .img {
  position: relative;
}
.navigation .user-profile-img .img .icon {
  position: absolute;
  top: -5px;
  right: 0;
  transform: translate(0, 0);
  width: 23px;
  height: 23px;
  border: 1px solid #ff0100;
  background: #ffffff;
  text-align: center;
  outline: none;
  font-size: 10px;
  line-height: 20px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  color: #ff0100;
}

.navigation .user-profile-img h3 {
  font-size: 18px;
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.navigation .avatar {
  width: 40px;
  height: 40px;
  background: black;
  border: 2px solid #ff0100;
  cursor: pointer;
  border-radius: 50px;
}

/*   navigation end   */
#admin_panel .box-group .box-body {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: flex-start;
  gap: 10px;
  padding: 20px 0 20px 20px;
  /*progress box*/
  /*chat box*/
}

#admin_panel .box-group .box-body .chart-box-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 220px 230px 200px;
  gap: 20px;
  /*avtar box*/
}

#admin_panel .box-group .box-body .chart-box-group .chart {
  background: white;
  box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
  border-radius: 3px;
  padding: 20px;
}

#admin_panel .box-group .box-body .chart-box-group .chart canvas {
  margin: auto;
}

#admin_panel .box-group .box-body .chart-box-group .chart:nth-child(3) {
  grid-row: 2/4;
}

#admin_panel .box-group .box-body .chart-box-group .user-avtar-box {
  background: rgba(62, 157, 93, 0.1607843137);
  position: relative;
  display: grid;
  grid-template-columns: max-content;
  justify-content: flex-start;
  align-content: center;
  padding: 20px;
  border-radius: 3px;
  gap: 8px;
}

#admin_panel .box-group .box-body .chart-box-group .user-avtar-box img {
  position: absolute;
  width: 70px;
  height: 170px;
  bottom: 10px;
  right: 30px;
}

#admin_panel .box-group .box-body .chart-box-group .user-avtar-box h1 {
  font-size: 20px;
}

#admin_panel .box-group .box-body .chart-box-group .user-avtar-box p,
#admin_panel .box-group .box-body .chart-box-group .user-avtar-box h3,
#admin_panel .box-group .box-body .chart-box-group .user-avtar-box h1,
#admin_panel .box-group .box-body .chart-box-group .user-avtar-box button {
  color: #06701e;
}

#admin_panel .box-group .box-body .chart-box-group .user-avtar-box h3 {
  font-size: 17px;
}

#admin_panel .box-group .box-body .chart-box-group .user-avtar-box button {
  padding: 10px 10px;
  background: white;
  border: 1.5px solid white;
  outline: none;
  border-radius: 3px;
  cursor: pointer;
}

#admin_panel .box-group .box-body .chart-box-group .user-avtar-box button:hover {
  background: white;
  color: #333;
}

#admin_panel .box-group .box-body .chart-box-group .user-avtar-box button:active {
  background: ghostwhite;
  color: #333;
}

#admin_panel .box-group .box-body .sub-box-group {
  width: 80%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#admin_panel .box-group .box-body .sub-box-group .progress-box-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 170px;
  gap: 10px;
}

#admin_panel .box-group .box-body .sub-box-group .progress-box-group .progress-box {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: space-between;
  padding: 20px 40px;
  gap: 30px;
  border-radius: 3px;
  background: rgba(255, 99, 132, 0.1098039216);
}

#admin_panel .box-group .box-body .sub-box-group .progress-box-group .progress-box .progress-box-header {
  margin: auto;
  display: grid;
  grid-template-columns: max-content;
  gap: 10px;
}

#admin_panel .box-group .box-body .sub-box-group .progress-box-group .progress-box .progress-box-header h1 {
  font-size: 20px;
  color: #ff0100;
}

#admin_panel .box-group .box-body .sub-box-group .progress-box-group .progress-box .progress-box-header h3 {
  color: #ff0100;
  font-size: 16px;
}

#admin_panel .box-group .box-body .sub-box-group .progress-box-group .progress-box svg {
  width: 80px;
  height: 80px;
  fill: none;
  margin: auto;
}

#admin_panel .box-group .box-body .sub-box-group .progress-box-group .progress-box svg circle {
  fill: none;
  stroke: #ff0100;
  stroke-width: 10;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  user-select: none;
  transition: all 0.7s ease-in-out;
}

#admin_panel .box-group .box-body .sub-box-group .progress-box-group .progress-box svg circle:nth-child(1) {
  fill: none;
  stroke: rgba(0, 0, 0, 0.05);
  stroke-width: 10;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  user-select: none;
}

#admin_panel .box-group .box-body .sub-box-group .progress-box-group .progress-box svg .score {
  text-anchor: middle;
  font-size: 24px;
  fill: #ff0100;
  user-select: none;
}

#admin_panel .box-group .box-body .sub-box-group .progress-box-group .progress-box .view-btn {
  border-color: #ff0100 !important;
  color: #ff0100;
  outline: none;
}

#admin_panel .box-group .box-body .sub-box-group .progress-box-group .progress-box .view-btn:active {
  outline: none !important;
  border: #ff0100 !important;
}

#admin_panel .box-group .box-body .analyzer-box {
  background: white;
  height: 100vh;
  border-radius: 3px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 45px 1fr;
  box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
}

#admin_panel .box-group .box-body .analyzer-box .analyzer-box-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100%;
  border-radius: 3px 3px 0 0;
}

#admin_panel .box-group .box-body .analyzer-box .analyzer-tab,
#admin_panel .box-group .box-body .analyzer-box .analyzer-tab-active {
  cursor: pointer;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #333;
  transition: background 0.5s;
  border-bottom: 2px solid rgba(0, 0, 0, 0.17);
}

#admin_panel .box-group .box-body .analyzer-box .analyzer-tab:active {
  color: lightgray;
}

#admin_panel .box-group .box-body .analyzer-box .analyzer-tab-active {
  color: #ff0100;
  border-bottom: 2px solid #ff0100;
}

#admin_panel .box-group .box-body .analyzer-box .analyzer-tab-active:active {
  background-color: rgba(254, 47, 90, 0.031372549);
}

#admin_panel .box-group .box-body .analyzer-box .analyzer-box-body {
  padding: 10px;
  overflow-y: scroll;
  display: none;
}

#admin_panel .box-group .box-body .analyzer-box .analyzer-box-body::-webkit-scrollbar {
  width: 0;
  appearance: none;
}

#admin_panel .box-group .box-body .analyzer-box .analyzer-box-body::-webkit-scrollbar-track {
  background: transparent;
}

#admin_panel .box-group .box-body .analyzer-box .analyzer {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  height: fit-content;
  align-items: center;
  padding: 6px 0 6px 10px;
  gap: 5px;
  cursor: pointer;
}

#admin_panel .box-group .box-body .analyzer-box .analyzer:hover {
  background: rgba(254, 47, 90, 0.031372549);
  border-radius: 3px;
}

#admin_panel .box-group .box-body .analyzer-box .analyzer-img img {
  width: 28px;
  height: 28px;
  border-radius: 50px;
  border: 2px solid #ff0100;
}

#admin_panel .box-group .box-body .analyzer-box .user-details {
  display: grid;
  grid-template-columns: max-content;
}

#admin_panel .box-group .box-body .analyzer-box .user-details p {
  font-size: 15px;
  color: black;
}

#admin_panel .box-group .box-body .analyzer-box .user-details label {
  font-size: 13px;
  color: gray;
  margin-top: -10px;
}

#admin_panel .box-group .box-body .analyzer-box .user-details span {
  font-size: 12px;
  color: rgba(6, 8, 8, 0.6);
}

#admin_panel .box-group .box-body .analyzer-box .user-setting-box {
  width: 30px;
  height: 30px;
  line-height: 28px;
  background: rgba(254, 47, 90, 0.031372549);
  border-radius: 50px;
  text-align: center;
  position: relative;
}

#admin_panel .box-group .box-body .analyzer-box .user-setting-box i {
  font-size: 12px;
  color: #ff0100;
}

#admin_panel .box-group .box-body .analyzer-box .user-setting-box:active {
  background: rgba(139, 0, 0, 0.29);
}

#admin_panel .box-group .box-body .analyzer-box .user-setting-box:hover .more-option-outer {
  display: block;
}

#admin_panel .box-group .box-body .analyzer-box .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50px;
  border: 2px solid #ff0100;
  color: #ff0100;
  text-transform: uppercase;
  text-align: center;
}

#admin_panel .box-group .box-body .analyzer-box .more-option-outer {
  display: none;
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translate(0, -50%);
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
  z-index: 999;
  transition: all 0.4s;
}

#admin_panel .box-group .box-body .analyzer-box .more-option-outer .more-option {
  display: grid;
  grid-template-columns: 1fr;
}

#admin_panel .box-group .box-body .analyzer-box .more-option-outer .more-option .option {
  display: grid;
  grid-template-columns: max-content 25px;
  justify-content: space-between;
  padding: 6px 8px;
  gap: 6px;
  color: #333;
  text-decoration: none;
  align-items: center;
}

#admin_panel .box-group .add-user-form-outer {
  background: white;
  width: 100%;
  display: grid;
  grid-template-columns: 350px;
  justify-content: center;
}

#admin_panel .box-group .add-user-form {
  padding: 30px 0;
}

#admin_panel .box-group .form-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 5px 0;
  height: fit-content !important;
}

#admin_panel .box-group .input-title {
  font-size: 15px;
  color: #333;
}

#admin_panel .box-group .form-control {
  width: 100%;
  height: 37px;
  border: 1.5px solid lightgrey;
  padding: 10px;
  border-radius: 3px;
  color: black;
  font-size: 15px;
  background: transparent;
  transition: all 0.5s;
  outline: none;
}

#admin_panel .box-group .form-control:hover,
#admin_panel .box-group .form-control:focus {
  border: 1.5px solid #707070;
  transition: all 0.5s;
}

#admin_panel .box-group .form-control::placeholder {
  font-size: 14px;
  color: lightgrey;
  transition: all 0.5s;
}

#admin_panel .box-group .input-placeholder {
  position: relative;
}

#admin_panel .box-group .placeholder-btn {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translate(0px, -50%);
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border: none;
  outline: none;
  background: rgba(27, 45, 255, 0.1411764706);
  color: blue;
  cursor: pointer;
}

#admin_panel .box-group .input-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#admin_panel .box-group .user-photo-box-outer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 5px 0;
}

#admin_panel .leave-balance {
  padding: 10px 0;
}

#admin_panel .box-group .user-photo-box {
  height: 220px;
  border: 1.5px dashed #707070;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

#admin_panel .box-group .user-photo-box img {
  width: 100%;
  height: 100%;
}

#admin_panel .box-group .user-photo-box-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.02);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

#admin_panel .box-group .user-photo-box-placeholder label {
  padding: 10px;
  border: none;
  outline: none;
  background: black;
  color: white;
  border-radius: 3px;
  cursor: pointer;
  font-size: 15px;
}

#admin_panel .box-group .pop-toast {
  position: fixed;
  top: 30px;
  right: 20px;
  max-width: 180px;
  padding: 12px 15px;
  transform: translate(-50%, 50%);
  background: black;
  z-index: 99999;
  border-radius: 3px;
  cursor: pointer;
  animation: poptoastbox 1.6s linear forwards;
}

#admin_panel .box-group .pop-toast:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: red;
  border-radius: 0 0 0 3px;
  animation: popToastLine 1.5s linear forwards;
}

#admin_panel .box-group .pop-toast p {
  font-size: 15px;
  color: white;
}

@keyframes popToastLine {
  from {
    width: 0;
    border-radius: 0 0 0 3px;
  }
  to {
    width: 100%;
    border-radius: 0 0 3px 3px;
  }
}
#admin_panel .box-group .box-body .table {
  background: white;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
}

#admin_panel .box-group .box-body .table-head {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1.5px solid black;
}

#admin_panel .box-group .box-body .table-filter {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  gap: 5px;
}

#admin_panel .box-group .custom-select {
  height: 35px;
  line-height: 30px;
  border-radius: 3px;
  border: 2px solid rgba(27, 45, 255, 0.1411764706) !important;
  text-align: center;
  cursor: pointer;
  position: relative;
  padding: 0 40px 0 10px;
  color: blue;
  z-index: 999;
}

#admin_panel .box-group .custom-select span {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translate(0px, -50%);
  font-size: 13px;
}

#admin_panel .box-group .custom-select:hover .custom-select-option-group {
  display: block !important;
  transition: all 0.3s ease;
}

#admin_panel .box-group .custom-select .custom-select-option-group {
  display: none;
  position: absolute;
  top: 105%;
  right: -10px;
  min-width: 180px;
  background: white;
  box-shadow: 0 0 3px 0 lightgrey;
  padding: 6px;
  transition: all 0.3s ease;
}

#admin_panel .box-group .custom-select .custom-select-option {
  display: grid;
  padding: 3px 10px;
  grid-template-columns: 1fr 20px;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease;
}

#admin_panel .box-group .custom-select .custom-select-option label {
  font-size: 16px;
  color: dimgray;
  text-align: left;
  cursor: pointer;
}

#admin_panel .box-group .custom-select .custom-select-option-check-btn {
  height: 20px;
  background: lightgrey;
  border-radius: 50px;
  position: relative;
  cursor: pointer;
}

#admin_panel .box-group .custom-select .custom-select-option-check-btn::before {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50px;
  background: gray;
  transition: all 0.3s ease;
}

#admin_panel .box-group .custom-select .custom-select-option:hover {
  background: rgba(27, 45, 255, 0.1411764706);
  cursor: pointer;
  transition: all 0.3s ease;
}

#admin_panel .box-group .custom-select .custom-select-option:hover label {
  color: blue;
  transition: all 0.3s ease;
}

#admin_panel .box-group .custom-select .custom-select-option:hover .custom-select-option-check-btn {
  background: rgba(27, 45, 255, 0.3921568627);
  transition: all 0.3s ease;
}

#admin_panel .box-group .custom-select .custom-select-option:hover .custom-select-option-check-btn::before {
  background: #333;
  transition: all 0.3s ease;
}

#admin_panel .box-group .box-body table {
  width: 100%;
}

#admin_panel .box-group .box-body thead {
  height: 40px;
  background: white;
}

#admin_panel .box-group .box-body tbody {
  background: rgba(230, 180, 180, 0.0705882353);
  text-align: center;
}

#admin_panel .box-group .box-body tbody tr {
  height: 45px;
  color: lightslategray;
}

#admin_panel .box-group .box-body tbody tr:hover {
  background: rgba(0, 0, 0, 0.01);
  cursor: pointer;
}

#admin_panel .box-group .box-body tbody .action-btn {
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 2px;
  outline: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
}

#admin_panel .box-group .box-body tbody .edit-btn {
  background: rgba(0, 128, 0, 0.1411764706);
  color: green;
}

#admin_panel .box-group .box-body tbody .delete-btn {
  background: rgba(255, 13, 13, 0.1411764706);
  margin: 0 5px;
  color: red;
}

#admin_panel .box-group .box-body tbody .print-btn {
  background: rgba(27, 45, 255, 0.1411764706);
  color: blue;
}

#admin_panel .box-group .box-body .pagination {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 6px;
  padding: 15px 10px;
}

#admin_panel .box-group .box-body .pagination li {
  height: 30px;
  text-decoration: none;
  line-height: 30px;
  text-align: center;
  padding: 0 13px;
  border-radius: 2px;
  background: whitesmoke;
  color: blue;
  cursor: pointer;
}

#admin_panel .box-group .box-body .pagination .prev-btn {
  background: rgba(27, 45, 255, 0.1411764706);
  color: blue;
}

#admin_panel .box-group .box-body .pagination .next-btn {
  background: rgba(0, 128, 0, 0.1411764706);
  color: green;
}

#admin_panel .box-group .box-body .pagination-btn {
  text-decoration: none;
  font-size: 15px;
}

#admin_panel .box-group .profile {
  background: white;
  width: 100%;
}

#admin_panel .box-group .profile-header {
  background: white;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px 100px;
  position: relative;
}

#admin_panel .box-group .profile-header-bg {
  background: rgba(0, 128, 0, 0.1411764706);
  border-radius: 0 0 50px 50px;
}

#admin_panel .box-group .profile-header-img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  display: grid;
  grid-template-columns: max-content;
  gap: 6px;
}

#admin_panel .box-group .profile-header-img img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid white;
}

#admin_panel .box-group .profile-header-img button {
  background: rgba(0, 128, 0, 0.1411764706);
  border: none;
  outline: none;
  padding: 10px 12px;
  border-radius: 50px;
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  color: green;
  cursor: pointer;
  transition: 0.3s;
}

#admin_panel .box-group .profile-header-img button:hover {
  background: rgba(27, 45, 255, 0.1411764706);
  color: blue;
  transition: 0.3s;
}

#admin_panel .box-group .profile-body {
  padding: 20px;
  width: 80%;
  margin: auto;
  display: block;
}

#admin_panel .form-box-outer {
  display: grid;
  grid-template-columns: 1fr;
}

#admin_panel .form-box-outer .form-box {
  display: grid;
  grid-template-columns: 1fr;
}

#admin_panel .form-box-outer .form-box-header {
  padding: 10px 30px;
  border-left: 5px solid #fe5562;
}

#admin_panel .form-box-outer .form-box-header h3 {
  color: rgba(0, 0, 0, 0.4196078431);
  font-size: 24px;
}

#admin_panel .form-box-outer .form {
  padding: 20px;
}

#admin_panel .form-box-outer .form-grid {
  padding: 10px 30px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px;
}

#admin_panel .box-body {
  display: grid;
  grid-template-columns: 1fr;
}

#admin_panel .box-body .box-body-header {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: space-between;
  align-items: center;
}

#admin_panel .box-body .box-body-sub-box {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 10px;
}

.box-body-grid-2 {
  grid-template-columns: max-content 1fr !important;
}

.notification-box {
  padding: 20px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.notification-box .notification {
  display: grid;
  grid-template-columns: 40px 250px;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
  padding: 7px 10px;
  cursor: pointer;
  grid-template-columns: max-content 1fr;
}

.notification-box .notification p {
  white-space: nowrap;
  margin: 0;
  text-wrap: none;
  line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-box .notification .status {
  width: 100%;
  align-self: flex-end;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(23, 23, 24, 0.6);
}

.notification-box .notification .status i {
  font-size: 12px;
}

.notification-box .notification .avtar {
  height: 35px;
  width: 35px;
  text-align: center;
  line-height: 28px;
  border-radius: 5px;
  border: 2px solid #ff0100;
  text-transform: uppercase;
}

.notification-box .warning {
  background: rgba(196, 136, 45, 0.1098039216);
}

.notification-box .warning p {
  color: #c18e41;
}

.notification-box .warning .avtar {
  border-color: rgba(196, 136, 45, 0.1098039216);
  background: rgba(196, 136, 45, 0.1098039216);
}

.notification-box .warning:hover {
  background: rgba(196, 136, 45, 0.05);
}

.notification-box .error {
  background: rgba(254, 47, 90, 0.1098039216);
}

.notification-box .error p {
  color: #ff0100;
}

.notification-box .error .avtar {
  border-color: rgba(254, 47, 90, 0.1098039216);
  background: rgba(254, 47, 90, 0.1098039216);
}

.notification-box .error:hover {
  background: rgba(254, 47, 90, 0.05);
}

.notification-box .done {
  background: rgba(13, 124, 4, 0.0784313725);
}

.notification-box .done p {
  color: #0d7c04;
}

.notification-box .done .avtar {
  border-color: rgba(13, 124, 4, 0.0784313725);
  background: rgba(13, 124, 4, 0.0784313725);
}

.notification-box .done:hover {
  background: rgba(13, 124, 4, 0.04);
}

#notification {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.57);
  border-radius: 10px;
  z-index: 99;
  transition: all 0.3s ease-in-out;
}

#notification .box {
  width: 350px;
  display: grid;
  background: white;
  margin-left: auto;
  box-shadow: 0 0 10px 0 rgba(45, 37, 17, 0.3019607843);
  grid-template-columns: 1fr;
  grid-template-rows: max-content 93vh;
}

#notification .box .box-header {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  padding: 10px;
  position: sticky;
}

#notification .box .box-header button {
  border: none;
  outline: none;
  background: rgba(254, 47, 90, 0.031372549);
  border-radius: 50px;
  color: #ff0100;
  font-weight: 300;
  width: 35px;
  height: 35px;
  font-size: 15px;
}

#notification .box .box-header button:active {
  background: rgba(254, 47, 90, 0.1882352941);
  color: black;
}

#notification .box .box-header h3 {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.68);
  text-align: center;
}

#notification .box .box-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-x: hidden;
  height: 100%;
}

#notification .box .box-body::-webkit-scrollbar-thumb,
#notification .box .box-body::-webkit-scrollbar {
  width: 0;
}

#notification .box .notification {
  display: grid;
  grid-template-columns: 40px 250px;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
  padding: 7px 10px;
  cursor: pointer;
}

#notification .box .notification p {
  white-space: nowrap;
  margin: 0;
  text-wrap: none;
  line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

#notification .box .notification .status {
  width: 100%;
  align-self: flex-end;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(23, 23, 24, 0.6);
}

#notification .box .notification .status i {
  font-size: 12px;
}

#notification .box .notification .avtar {
  height: 35px;
  width: 35px;
  text-align: center;
  line-height: 28px;
  border-radius: 5px;
  border: 2px solid #ff0100;
  text-transform: uppercase;
}

#notification .box .warning {
  background: rgba(196, 136, 45, 0.1098039216);
}

#notification .box .warning p {
  color: #c18e41;
}

#notification .box .warning .avtar {
  border-color: rgba(196, 136, 45, 0.1098039216);
  background: rgba(196, 136, 45, 0.1098039216);
}

#notification .box .warning:hover {
  background: rgba(196, 136, 45, 0.05);
}

#notification .box .error {
  background: rgba(254, 47, 90, 0.1098039216);
}

#notification .box .error p {
  color: #ff0100;
}

#notification .box .error .avtar {
  border-color: rgba(254, 47, 90, 0.1098039216);
  background: rgba(254, 47, 90, 0.1098039216);
}

#notification .box .error:hover {
  background: rgba(254, 47, 90, 0.05);
}

#notification .box .done {
  background: rgba(13, 124, 4, 0.0784313725);
}

#notification .box .done p {
  color: #0d7c04;
}

#notification .box .done .avtar {
  border-color: rgba(13, 124, 4, 0.0784313725);
  background: rgba(13, 124, 4, 0.0784313725);
}

#notification .box .done:hover {
  background: rgba(13, 124, 4, 0.04);
}

.dropdown-box-outer {
  display: none;
  position: absolute;
  top: 110%;
  right: 0;
  width: 220px;
  z-index: 99;
  transition: all 0.3s;
}

.dropdown-box-outer .dropdown-box {
  background: white;
  -o-box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
  -moz-box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
  -webkit-box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
  box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
}

.dropdown-box-outer .dropdown-box .dropdown-box-header {
  padding: 10px 20px;
  border-bottom: 2px solid rgba(51, 51, 51, 0.33);
}

.dropdown-box-outer .dropdown-box .dropdown-box-header h3 {
  color: dimgray;
  font-size: 18px;
}

.dropdown-box-outer .dropdown-box .dropdown-box-body {
  display: grid;
  grid-template-columns: 1fr;
}

.dropdown-box-outer .dropdown-box .dropdown-list {
  display: grid;
  grid-template-columns: 1fr;
}

.dropdown-box-outer .dropdown-box .dropdown-list-item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: center;
  align-content: center;
  color: rgba(0, 0, 0, 0.44);
}

.dropdown-box-outer .dropdown-box .dropdown-list-item:hover {
  background: rgba(170, 19, 128, 0.1019607843);
  color: #aa1380;
  cursor: pointer;
}

.dropdown-box-outer .dropdown-box .dropdown-list-item span {
  padding: 10px 20px;
}

.dropdown-box-outer .dropdown-box .dropdown-list-item label {
  margin: 0;
  cursor: pointer;
}

.dropdown-box-outer .dropdown-box .dropdown-box-footer {
  padding: 15px 20px;
}

.table {
  display: grid;
  grid-template-columns: 1fr;
}

.table .header {
  border-left: 4px solid red;
  padding-top: 10px;
  padding-left: 10px;
}

.table .header h3 {
  font-size: 18px;
}

.table .body {
  padding: 5px 0;
}

.table .body-table {
  width: 100%;
}

.table .body-table td,
.table .body-table th {
  border: none !important;
  text-align: center;
}

.table .body-table td {
  color: rgba(51, 51, 51, 0.6);
  vertical-align: middle;
}

.table .body-table thead {
  border-bottom: 1px solid rgba(51, 51, 51, 0.1294117647);
}

.table .body-table .delete-btn,
.table .body-table .edit-btn,
.table .body-table .send-btn,
.table .body-table .view-btn {
  border: none;
  outline: none;
  border-radius: 4px;
  padding: 5px 10px;
  text-decoration: none;
}

.table .body-table .delete-btn {
  background: rgba(255, 0, 0, 0.0705882353);
  color: red;
}

.table .body-table .edit-btn {
  background: rgba(0, 112, 255, 0.0901960784);
  color: #0005d6;
}

.table .body-table .send-btn {
  background: rgba(0, 112, 255, 0.0901960784);
  color: #0005d6;
}

.table .body-table .view-btn {
  background: rgba(0, 255, 144, 0.1019607843);
  color: #13a5a3;
}

.table .body-table .delete-btn:active,
.table .body-table .edit-btn:active,
.table .body-table .view-btn:active {
  filter: blur(1px);
}

.table .avatar {
  width: 35px;
  height: 35px;
  border-radius: 50px;
  border: 2px solid #ff0100;
  color: #ff0100;
  text-transform: uppercase;
  text-align: center;
}

#employee-incomplete-form .box-outer {
  width: fit-content;
  margin: auto;
  padding: 30px;
}

#employee-incomplete-form .title-group {
  display: grid;
  grid-template-columns: 250px max-content;
  justify-content: space-between;
  align-items: center;
}

#employee-incomplete-form .title-group img {
  width: 100%;
}

@media (max-width: 576px) {
  #employee-incomplete-form .title-group .main-title {
    display: none;
  }
}
#employee-incomplete-form .form-box-group {
  display: grid;
  grid-template-columns: max-content 650px;
  gap: 20px;
}

@media (max-width: 1010px) {
  #employee-incomplete-form .form-box-group {
    grid-template-columns: max-content;
    justify-content: center;
  }
}
@media (max-width: 576px) {
  #employee-incomplete-form .form-box-group {
    grid-template-columns: 1fr !important;
  }
}
#employee-incomplete-form .form-box-group .form-box {
  box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
  height: fit-content;
}

@media (max-width: 1010px) {
  #employee-incomplete-form .form-box-group .form-box {
    width: fit-content;
  }
}
#employee-incomplete-form .form-box-group .form-box:nth-child(2) {
  padding: 30px 25px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 1010px) {
  #employee-incomplete-form .form-box-group .form-box:nth-child(2) {
    width: 500px;
  }
}
@media (max-width: 576px) {
  #employee-incomplete-form .form-box-group .form-box:nth-child(2) {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
  }
}
#employee-incomplete-form .form-box-group .profile-img-box {
  width: 250px;
  height: 200px;
  background: url("../../public/image/empty.webp");
  background-size: cover;
  border-radius: 10px;
}

#employee-incomplete-form .form-box-group .profile-img-box label {
  width: 100%;
  height: 100%;
  background: rgba(250, 246, 246, 0.8392156863);
  font-size: 20px;
  font-weight: bolder;
  border-radius: 10px;
  text-align: center;
  line-height: 192px;
}

#employee-incomplete-form .attach-box {
  padding: 10px 0;
  grid-column: 1/3;
}

#employee-incomplete-form .attach-box .attach-box-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 576px) {
  #employee-incomplete-form .attach-box .attach-box-body {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
  }
}
.single-employee-view {
  padding: 0 !important;
  display: grid;
  grid-template-columns: 1fr;
}

.single-employee-view .view-header {
  position: relative;
  height: 140px;
  background: rgba(255, 1, 0, 0.1019607843);
  border-radius: 5px 5px 20px 20px;
}

.single-employee-view .view-header .img-outer {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.single-employee-view .view-header .img-outer img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 5px solid white;
}

.single-employee-view .view-body {
  padding: 60px 40px 20px 40px;
  display: grid;
  grid-template-columns: 1fr;
}

.single-employee-view .details-box-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
}

.single-employee-view .details-box-group .details-box {
  width: 23%;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgba(211, 202, 202, 0.3411764706);
  border: 2px solid rgba(196, 16, 46, 0.1882352941);
}
.single-employee-view .details-box-group .details-box:hover {
  box-shadow: 0 0 10px 0 rgba(174, 108, 108, 0.4392156863);
  border: 2px solid rgba(196, 16, 46, 0.4588235294);
}

@media (max-width: 900px) {
  .single-employee-view .details-box-group .details-box {
    width: 30%;
  }
}
@media (max-width: 776px) {
  .single-employee-view .details-box-group .details-box {
    width: 48%;
  }
}
@media (max-width: 576px) {
  .single-employee-view .details-box-group .details-box {
    width: 68%;
  }
}
@media (max-width: 476px) {
  .single-employee-view .view-body {
    padding-top: 90px;
  }
  .single-employee-view .details-box-group .details-box {
    width: 90%;
    justify-self: center;
  }
}
.single-employee-view .details-box-group .details-box h5 {
  color: #4f3a3a;
  font-size: 18px;
}

.single-employee-view .details-box-group .details-box label {
  color: rgba(105, 105, 105, 0.9803921569);
  padding-left: 6px;
}

.single-employee-view .view-footer {
  padding: 5px 40px 20px 40px;
  display: grid;
  grid-template-columns: 1fr;
}

.single-employee-view .attachment-box-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0;
}

.single-employee-view .attachment-box-group .attachment-box {
  display: grid;
  grid-template-columns: 1fr;
  width: 200px;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
}

.single-employee-view .attachment-box-group .attachment-img {
  width: 100%;
  border-radius: 10px 10px 0 0;
}

.single-employee-view .attachment-box-group label {
  padding: 10px 0;
  text-align: center;
}

#admin_panel .import-box-outer {
  display: grid;
  height: fit-content;
  justify-content: center;
  grid-template-columns: 340px;
  box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
  padding: 50px 0;
}

#admin_panel .import-box-outer .import-box {
  display: grid;
  grid-template-columns: 1fr;
  box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
}

#admin_panel .import-box-outer .import-box-header {
  text-align: center;
  padding-top: 10px;
}

#admin_panel .import-box-outer .import-box-header h2,
#admin_panel .import-box-outer .import-box-header h3,
#admin_panel .import-box-outer .import-box-header h4 {
  letter-spacing: 0.5px;
  color: rgba(60, 14, 22, 0.8);
  text-shadow: 0 0 4px rgba(242, 31, 113, 0.4);
}

#admin_panel .import-box-outer .import-box-body {
  display: grid;
  grid-template-columns: 1fr;
}

#admin_panel .import-box-outer .import-box-body .card {
  border: 0;
}

#admin_panel .import-box-outer .import-box-body .card-header {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: transparent;
  border: 0;
  padding: 0;
}

#admin_panel .import-box-outer .import-box-body .card-header button {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  gap: 10px;
  justify-content: center;
  border: none;
  outline: none;
  height: 100%;
  color: #ff0100;
  background: transparent;
  padding: 15px;
  border-bottom: 3px solid rgba(254, 47, 90, 0.031372549);
}

#admin_panel .import-box-outer .import-box-body .card-header button:active {
  background: rgba(254, 47, 90, 0.031372549);
  transition: all 0.3s;
}

#admin_panel .import-box-outer .import-box-body .card-header .active {
  background: #fff;
  color: #ff0100;
  border-bottom: 3px solid #ff0100;
  transition: all 0.3s;
}

#admin_panel .import-box-outer .import-box-body .form-outer,
#admin_panel .import-box-outer .import-box-body .form-outer-active {
  padding: 10px 0;
}

#admin_panel .import-box-outer .import-box-body .form-outer {
  display: none;
  transition: all 0.3s;
}

#admin_panel .import-box-outer .import-box-body .form-outer-active {
  display: block;
  transition: all 0.3s;
}

#admin_panel .import-box-outer .import-box-body .form {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#admin_panel .import-box-outer .import-box-body .form .form-label {
  height: 250px;
  width: 100%;
  border: 2px dotted #ff0100;
  border-radius: 10px;
  position: relative;
}

#admin_panel .import-box-outer .import-box-body .form .form-label .placeholder-btn,
#admin_panel .import-box-outer .import-box-body .form .form-label .placeholder-btn-active {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(254, 47, 90, 0.031372549);
  color: #ff0100;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  width: fit-content;
  height: fit-content;
}

#admin_panel .import-box-outer .import-box-body .form .form-label:active {
  background: rgba(254, 47, 90, 0.031372549);
}

#admin_panel .import-box-outer .import-box-body .form .form-label .placeholder-btn-active {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  gap: 10px;
}

#admin_panel .import-box-outer .import-box-body .form .action-btn-active,
#admin_panel .import-box-outer .import-box-body .form .action-btn {
  border: none;
  outline: none;
  height: 100%;
  color: #fff;
  background: rgba(254, 47, 78, 0.4588235294);
  border-radius: 10px;
  padding: 15px;
  border-bottom: 3px solid rgba(254, 47, 90, 0.031372549);
}

#admin_panel .import-box-outer .import-box-body .form .action-btn-active:active,
#admin_panel .import-box-outer .import-box-body .form .action-btn:active {
  background: rgba(254, 47, 78, 0.168627451);
  transition: all 0.3s;
  color: #ff0100;
}

#admin_panel .import-box-outer .import-box-body .form .action-btn-active {
  pointer-events: none !important;
  cursor: not-allowed !important;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  gap: 10px;
  align-items: center;
  padding: 11px 10px !important;
}

#download-model {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(7, 7, 37, 0.6784313725);
  z-index: 9;
}

#download-model .box {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 350px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 30px;
  border-radius: 10px;
}

#download-model .box-header {
  background: rgba(0, 128, 0, 0.1098039216);
  border-radius: 6px;
  padding: 20px;
}

#download-model .icon {
  width: 150px;
  height: 150px;
  background: rgba(0, 128, 0, 0.1607843137);
  border-radius: 50%;
  font-size: 90px;
  margin: auto;
  text-align: center;
  vertical-align: middle;
  line-height: 154px;
  color: green;
}

#download-model .box-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#download-model .box-body h3 {
  font-size: 1.3em;
  color: green;
  text-align: center;
}

#download-model .button-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

#download-model .delete-btn,
#download-model .download-btn {
  padding: 9px 20px;
  border: none;
  outline: none;
  background: rgba(19, 106, 78, 0.1411764706);
  color: #0f5849;
  border-radius: 6px;
  width: 100%;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

#download-model .delete-btn::active,
#download-model .download-btn::active {
  filter: blur(5px);
}

#download-model .delete-btn {
  background: rgba(190, 26, 26, 0.1411764706);
  color: #ff1717;
}

.login-profile-model {
  z-index: 999;
}

.login-profile-model .box {
  border-radius: 0px !important;
  width: 300px;
  height: 100vh !important;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff !important;
  align-content: flex-start;
}

.login-profile-model .box .box_header {
  display: grid;
  grid-template-columns: 50px max-content;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #bfbaba;
  padding-bottom: 10px;
}

.login-profile-model .box .box_header img {
  width: 50px;
  height: 50px;
  background: black;
  border: 2px solid #ff0100;
  cursor: pointer;
  border-radius: 50px;
}

.login-profile-model .box .box_header h3 {
  color: #9f9494;
  font-size: 23px;
}

.login-profile-model .box .box_body {
  padding: 10px 0;
}

.login-profile-model .box .box_body h3 {
  font-size: 20px;
  color: #333;
}

.login-profile-model .box .setting_body {
  padding: 15px 0;
}

.login-profile-model .box .setting_body .form-group {
  padding: 0 !important;
}

/*over view*/
#admin_panel .overview-box {
  width: 100%;
  padding: 20px 0 20px 0;
  display: grid;
  grid-template-columns: 1fr;
}

@media (max-width: 1010px) {
  #admin_panel .overview-box {
    padding: 20px;
  }
}
@media (max-width: 786px) {
  #admin_panel .overview-box {
    padding: 0 20px;
  }
}
#admin_panel .overview-box .smart-btn-group {
  display: grid;
  grid-template-columns: 100px;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  gap: 5px;
  width: fit-content;
  border-radius: 6px;
  padding: 3px;
  font-size: 14px;
  font-family: sans-serif, system-ui;
  box-shadow: 0 0 10px 0 rgba(33, 45, 17, 0.1019607843);
  position: relative;
  background: rgba(254, 84, 100, 0.1882352941);
}

#admin_panel .overview-box .smart-btn {
  border: none;
  outline: none;
  border-radius: 5px;
  padding: 6px 8px;
  color: rgba(51, 51, 51, 0.7215686275);
  background: #fff;
}

#admin_panel .overview-box .smart-date-input {
  border: 1px solid #e31928 !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 5px;
  color: rgba(51, 51, 51, 0.7215686275);
  background: #fff;
}

#admin_panel .overview-box .smart-date-input:active,
#admin_panel .overview-box .smart-date-input:hover {
  outline: none !important;
  border: 1px solid #e31928 !important;
  box-shadow: none !important;
}

#admin_panel .overview-box .smart-btn-active {
  color: rgba(255, 0, 0, 0.9294117647);
  background: #fff;
  border: 1px solid rgba(255, 0, 0, 0.9294117647);
}

#admin_panel .attendance_container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  padding: 20px 0;
}

@media (max-width: 786px) {
  #admin_panel .attendance_container {
    grid-template-columns: max-content;
    justify-content: center;
  }
}
#admin_panel .attendance_container .attendance_box_outer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#admin_panel .attendance_container .attendance_box_header {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  gap: 20px;
}

#admin_panel .attendance_container .attendance_box_body {
  overflow-x: auto;
  display: -moz-grid;
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (max-width: 470px) {
  #admin_panel .attendance_container .attendance_box_header {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 786px) {
  #admin_panel .attendance_container .attendance_box_body {
    width: 400px;
  }
}
@media (max-width: 400px) {
  #admin_panel .attendance_container .attendance_box_body {
    width: 350px;
  }
}
@media (max-width: 350px) {
  #admin_panel .attendance_container .attendance_box_body {
    width: 300px;
  }
}
#admin_panel .attendance_container .attendance_box_header h3 {
  font-family: system-ui;
  color: #000;
  font-size: 22px;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5882352941);
}

#admin_panel .attendance_container .attendance_box {
  display: grid;
  grid-template-columns: 130px 200px 1fr max-content;
  justify-content: space-between;
  box-shadow: 0 0 6px 0 rgba(33, 45, 17, 0.0784313725);
  padding: 5px 10px;
}

#admin_panel .attendance_container .attendance_box h3 {
  font-family: system-ui;
  color: #333;
  font-size: 15px;
  text-align: center;
}

#admin_panel .attendance_container .attendance_sub_box {
  display: grid;
  grid-template-columns: max-content;
  align-items: center;
  justify-content: center;
  align-content: center;
  padding: 0px 40px;
}

#admin_panel .attendance_container .attendance_sub_box:nth-child(1) h3 {
  margin: 0;
  padding-top: 3px;
  padding-bottom: 3px;
}

#admin_panel .attendance_container .attendance_sub_box:nth-child(3) {
  justify-content: unset;
}

#admin_panel .attendance_container .attendance_sub_box:nth-child(2) {
  padding: 5px 60px;
}

#admin_panel .attendance_container .attendance_sub_box:nth-last-child(1) {
  padding: 0px 10px;
}

#admin_panel .attendance_container .day_date {
  font-size: 30px !important;
}

/*sunday*/
#admin_panel .attendance_container .sunday .attendance_sub_box:nth-child(1) {
  border-right: 1px solid #c36464;
}

#admin_panel .attendance_container .sunday .attendance_sub_box:nth-child(2) {
  background: rgba(245, 2, 2, 0.0509803922);
}

#admin_panel .attendance_container .sunday .day_name {
  color: #c36464;
}

#admin_panel .attendance_container .sunday .day_date {
  color: #726e79;
}

#admin_panel .attendance_container .sunday .login_time .icon {
  color: #726e79;
}

#admin_panel .attendance_container .sunday .login_time .time {
  color: #c36464;
}

#admin_panel .attendance_container .sunday .login_time,
#admin_panel .attendance_container .sunday .logout_time {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px;
}

#admin_panel .attendance_container .sunday .logout_time .out_icon {
  transform: rotate(-180deg);
}

#admin_panel .attendance_container .sunday .logout_time .time {
  color: #c36464;
}

#admin_panel .attendance_container .sunday .total_time {
  color: #c36464;
}

#admin_panel .attendance_container .sunday .total_time .icon {
  color: #726e79;
}

#admin_panel .attendance_container .sunday .total_time .time {
  color: #c36464;
}

#admin_panel .attendance_container .sunday .attendance_export_btn {
  outline: none;
  border-radius: 5px;
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: #c36464;
}

#admin_panel .attendance_container .sunday .attendance_export_btn i {
  color: #726e79;
}

/*monday*/
#admin_panel .attendance_container .monday .attendance_sub_box:nth-child(1) {
  border-right: 1px solid #6469c3;
}

#admin_panel .attendance_container .monday .attendance_sub_box:nth-child(2) {
  background: rgba(15, 2, 245, 0.0509803922);
}

#admin_panel .attendance_container .monday .day_name {
  color: #6469c3;
}

#admin_panel .attendance_container .monday .day_date {
  color: #726e79;
}

#admin_panel .attendance_container .monday .login_time .icon {
  color: #726e79;
}

#admin_panel .attendance_container .monday .login_time .time {
  color: #6469c3;
}

#admin_panel .attendance_container .monday .login_time,
#admin_panel .attendance_container .monday .logout_time {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px;
}

#admin_panel .attendance_container .monday .logout_time .out_icon {
  transform: rotate(-180deg);
}

#admin_panel .attendance_container .monday .logout_time .time {
  color: #6469c3;
}

#admin_panel .attendance_container .monday .total_time {
  color: #6469c3;
}

#admin_panel .attendance_container .monday .total_time .icon {
  color: #726e79;
}

#admin_panel .attendance_container .monday .total_time .time {
  color: #6469c3;
}

#admin_panel .attendance_container .monday .attendance_export_btn {
  outline: none;
  border-radius: 5px;
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #6469c3;
  color: #6469c3;
}

#admin_panel .attendance_container .monday .attendance_export_btn i {
  color: #726e79;
}

/*tuesday*/
#admin_panel .attendance_container .tuesday .attendance_sub_box:nth-child(1) {
  border-right: 1px solid #64c375;
}

#admin_panel .attendance_container .tuesday .attendance_sub_box:nth-child(2) {
  background: rgba(2, 245, 52, 0.0901960784);
}

#admin_panel .attendance_container .tuesday .day_name {
  color: #64c375;
}

#admin_panel .attendance_container .tuesday .day_date {
  color: #726e79;
}

#admin_panel .attendance_container .tuesday .login_time .icon {
  color: #726e79;
}

#admin_panel .attendance_container .tuesday .login_time .time {
  color: #64c375;
}

#admin_panel .attendance_container .tuesday .login_time,
#admin_panel .attendance_container .tuesday .logout_time {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px;
}

#admin_panel .attendance_container .tuesday .logout_time .out_icon {
  transform: rotate(-180deg);
}

#admin_panel .attendance_container .tuesday .logout_time .time {
  color: #64c375;
}

#admin_panel .attendance_container .tuesday .total_time {
  color: #64c375;
}

#admin_panel .attendance_container .tuesday .total_time .icon {
  color: #726e79;
}

#admin_panel .attendance_container .tuesday .total_time .time {
  color: #64c375;
}

#admin_panel .attendance_container .tuesday .attendance_export_btn {
  outline: none;
  border-radius: 5px;
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #64c375;
  color: #64c375;
}

#admin_panel .attendance_container .tuesday .attendance_export_btn i {
  color: #726e79;
}

/*wednesday*/
#admin_panel .attendance_container .wednesday .attendance_sub_box:nth-child(1) {
  border-right: 1px solid #d95ebb;
}

#admin_panel .attendance_container .wednesday .attendance_sub_box:nth-child(2) {
  background: rgba(245, 2, 197, 0.0901960784);
}

#admin_panel .attendance_container .wednesday .day_name {
  color: #d95ebb;
}

#admin_panel .attendance_container .wednesday .day_date {
  color: #726e79;
}

#admin_panel .attendance_container .wednesday .login_time .icon {
  color: #726e79;
}

#admin_panel .attendance_container .wednesday .login_time .time {
  color: #d95ebb;
}

#admin_panel .attendance_container .wednesday .login_time,
#admin_panel .attendance_container .wednesday .logout_time {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px;
}

#admin_panel .attendance_container .wednesday .logout_time .out_icon {
  transform: rotate(-180deg);
}

#admin_panel .attendance_container .wednesday .logout_time .time {
  color: #d95ebb;
}

#admin_panel .attendance_container .wednesday .total_time {
  color: #d95ebb;
}

#admin_panel .attendance_container .wednesday .total_time .icon {
  color: #726e79;
}

#admin_panel .attendance_container .wednesday .total_time .time {
  color: #d95ebb;
}

#admin_panel .attendance_container .wednesday .attendance_export_btn {
  outline: none;
  border-radius: 5px;
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #d95ebb;
  color: #d95ebb;
}

#admin_panel .attendance_container .wednesday .attendance_export_btn i {
  color: #726e79;
}

/*thursday*/
#admin_panel .attendance_container .thursday .attendance_sub_box:nth-child(1) {
  border-right: 1px solid #5ed9c6;
}

#admin_panel .attendance_container .thursday .attendance_sub_box:nth-child(2) {
  background: rgba(94, 217, 198, 0.1607843137);
}

#admin_panel .attendance_container .thursday .day_name {
  color: #5ed9c6;
}

#admin_panel .attendance_container .thursday .day_date {
  color: #726e79;
}

#admin_panel .attendance_container .thursday .login_time .icon {
  color: #726e79;
}

#admin_panel .attendance_container .thursday .login_time .time {
  color: #5ed9c6;
}

#admin_panel .attendance_container .thursday .login_time,
#admin_panel .attendance_container .thursday .logout_time {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px;
}

#admin_panel .attendance_container .thursday .logout_time .out_icon {
  transform: rotate(-180deg);
}

#admin_panel .attendance_container .thursday .logout_time .time {
  color: #5ed9c6;
}

#admin_panel .attendance_container .thursday .total_time {
  color: #5ed9c6;
}

#admin_panel .attendance_container .thursday .total_time .icon {
  color: #726e79;
}

#admin_panel .attendance_container .thursday .total_time .time {
  color: #5ed9c6;
}

#admin_panel .attendance_container .thursday .attendance_export_btn {
  outline: none;
  border-radius: 5px;
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #5ed9c6;
  color: #5ed9c6;
}

#admin_panel .attendance_container .thursday .attendance_export_btn i {
  color: #726e79;
}

/*friday*/
#admin_panel .attendance_container .friday .attendance_sub_box:nth-child(1) {
  border-right: 1px solid #bea8a8;
}

#admin_panel .attendance_container .friday .attendance_sub_box:nth-child(2) {
  background: rgba(190, 168, 168, 0.231372549);
}

#admin_panel .attendance_container .friday .day_name {
  color: #bea8a8;
}

#admin_panel .attendance_container .friday .day_date {
  color: #726e79;
}

#admin_panel .attendance_container .friday .login_time .icon {
  color: #726e79;
}

#admin_panel .attendance_container .friday .login_time .time {
  color: #bea8a8;
}

#admin_panel .attendance_container .friday .login_time,
#admin_panel .attendance_container .friday .logout_time {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px;
}

#admin_panel .attendance_container .friday .logout_time .out_icon {
  transform: rotate(-180deg);
}

#admin_panel .attendance_container .friday .logout_time .time {
  color: #bea8a8;
}

#admin_panel .attendance_container .friday .total_time {
  color: #bea8a8;
}

#admin_panel .attendance_container .friday .total_time .icon {
  color: #726e79;
}

#admin_panel .attendance_container .friday .total_time .time {
  color: #bea8a8;
}

#admin_panel .attendance_container .friday .attendance_export_btn {
  outline: none;
  border-radius: 5px;
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #bea8a8;
  color: #bea8a8;
}

#admin_panel .attendance_container .friday .attendance_export_btn i {
  color: #726e79;
}

/*saturday*/
#admin_panel .attendance_container .saturday .attendance_sub_box:nth-child(1) {
  border-right: 1px solid #f9d041;
}

#admin_panel .attendance_container .saturday .attendance_sub_box:nth-child(2) {
  background: rgba(217, 193, 94, 0.1607843137);
}

#admin_panel .attendance_container .saturday .day_name {
  color: #f9d041;
}

#admin_panel .attendance_container .saturday .day_date {
  color: #726e79;
}

#admin_panel .attendance_container .saturday .login_time .icon {
  color: #726e79;
}

#admin_panel .attendance_container .saturday .login_time .time {
  color: #f9d041;
}

#admin_panel .attendance_container .saturday .login_time,
#admin_panel .attendance_container .saturday .logout_time {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px;
}

#admin_panel .attendance_container .saturday .logout_time .out_icon {
  transform: rotate(-180deg);
}

#admin_panel .attendance_container .saturday .logout_time .time {
  color: #f9d041;
}

#admin_panel .attendance_container .saturday .total_time {
  color: #f9d041;
}

#admin_panel .attendance_container .saturday .total_time .icon {
  color: #726e79;
}

#admin_panel .attendance_container .saturday .total_time .time {
  color: #f9d041;
}

#admin_panel .attendance_container .saturday .attendance_export_btn {
  outline: none;
  border-radius: 5px;
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #f9d041;
  color: #f9d041;
}

#admin_panel .attendance_container .saturday .attendance_export_btn i {
  color: #726e79;
}

/*attandace*/
#admin_panel .attendance_container .attendance_count_container {
  display: grid;
  grid-template-columns: 1fr;
  padding-top: 50px;
  align-content: flex-start;
}

@media (max-width: 786px) {
  #admin_panel .attendance_container .attendance_count_container {
    grid-row-end: none;
  }
}
#admin_panel .attendance_container .attendance_count_container .joined_box {
  border-radius: 5px;
  height: fit-content;
  overflow: hidden;
  background: #e9f9ee;
  position: relative;
  padding: 15px 0;
}

@media (max-width: 400px) {
  #admin_panel .attendance_container .attendance_count_container .joined_box {
    width: 100% !important;
  }
}
#admin_panel .attendance_container .attendance_count_container .joined_box_header {
  padding: 0 15px;
}

#admin_panel .attendance_container .attendance_count_container .joined_box_header h3 {
  font-size: 19px;
  color: #1b8e3c;
  font-family: system-ui, sans-serif;
}

#admin_panel .attendance_container .attendance_count_container .joined_box_body {
  padding: 5px 15px;
  display: grid;
  grid-template-columns: max-content;
  gap: 6px;
  position: relative;
  z-index: 2;
}

#admin_panel .attendance_container .attendance_count_container .joined_box_body .date_outer {
  display: flex;
  flex-flow: row;
  gap: 10px;
  align-items: center;
}

#admin_panel .attendance_container .attendance_count_container .joined_box_body .date_box {
  background: #92e3a9;
  padding: 0 6px 2px 6px;
  border-radius: 6px;
}

#admin_panel .attendance_container .attendance_count_container .joined_box_body .ago {
  display: flex;
  flex-direction: row;
  flex-flow: row;
  align-items: center;
  align-content: center;
  gap: 10px;
}

#admin_panel .attendance_container .attendance_count_container .joined_box_body .ago h3 {
  font-size: 16px;
  margin: 0;
}

#admin_panel .attendance_container .attendance_count_container .joined_box_footer {
  width: 130px;
  position: absolute;
  bottom: 0;
  right: 0;
}

#admin_panel .attendance_container .attendance_count_container .joined_box_footer img {
  width: 100%;
}

#admin_panel .attendance_container .attendance_count_container .joined_box_footer img {
  width: 100%;
}

#admin_panel .attendance_count_container .attendance_count_box {
  padding: 20px 0;
}

#admin_panel .attendance_count_container .attendance_count_box .attendance_count_box_header h3 {
  font-size: 20px;
  margin: 0;
}

#admin_panel .attendance_count_container .attendance_count_box .attendance_count_progress_group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 5px;
}

#admin_panel .attendance_count_container .attendance_count_box .attendance_count_progress_box {
  display: grid;
  grid-template-columns: 35% 50% max-content;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  gap: 10px;
}

#admin_panel .attendance_count_container .attendance_count_box .attendance_count_progress_title label {
  font-size: 13px;
}

#admin_panel .attendance_count_container .attendance_count_box .icon {
  font-size: 13px;
}

#admin_panel .attendance_count_container .attendance_count_box .progress_bar {
  height: 4px;
  background: #d9d8d8;
  border-radius: 50px;
  margin-bottom: 3px;
  position: relative;
}

#admin_panel .attendance_count_container .attendance_count_box .progress_bar:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  border-radius: 50px;
  width: 20%;
  height: 100%;
  background: red;
}

#admin_panel .attendance_count_container .attendance_count_box .progress_bar:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  border-radius: 50px;
  height: 100%;
  background: red;
}

#admin_panel .attendance_count_container .presence label,
#admin_panel .attendance_count_container .presence .icon {
  color: blueviolet;
}

#admin_panel .attendance_count_container .absence label,
#admin_panel .attendance_count_container .absence .icon {
  color: tomato;
}

#admin_panel .attendance_count_container .sunday label,
#admin_panel .attendance_count_container .sunday .icon {
  color: red;
}

#admin_panel .attendance_count_container .half_day label,
#admin_panel .attendance_count_container .half_day .icon {
  color: tan;
}

#admin_panel .attendance_count_container .holiday label,
#admin_panel .attendance_count_container .holiday .icon {
  color: yellowgreen;
}

#admin_panel .attendance_count_container .presence .progress_bar:before {
  background: blueviolet;
}

#admin_panel .attendance_count_container .absence .progress_bar:before {
  background: tomato;
}

#admin_panel .attendance_count_container .sunday .progress_bar:before {
  background: red;
}

#admin_panel .attendance_count_container .half_day .progress_bar:before {
  background: tan;
}

#admin_panel .attendance_count_container .holiday .progress_bar:before {
  background: yellowgreen;
}

.before-0:before {
  width: 0% !important;
}

.before-1:before {
  width: 1%;
}

.before-2:before {
  width: 2%;
}

.before-3:before {
  width: 3%;
}

.before-4:before {
  width: 4%;
}

.before-5:before {
  width: 5%;
}

.before-6:before {
  width: 6%;
}

.before-7:before {
  width: 7%;
}

.before-8:before {
  width: 8%;
}

.before-9:before {
  width: 9%;
}

.before-10:before {
  width: 10%;
}

.before-11:before {
  width: 11%;
}

.before-12:before {
  width: 12%;
}

.before-13:before {
  width: 13%;
}

.before-14:before {
  width: 14%;
}

.before-15:before {
  width: 15%;
}

.before-16:before {
  width: 16%;
}

.before-17:before {
  width: 17%;
}

.before-18:before {
  width: 18%;
}

.before-19:before {
  width: 19%;
}

.before-20:before {
  width: 20%;
}

.before-21:before {
  width: 21%;
}

.before-22:before {
  width: 22%;
}

.before-23:before {
  width: 23%;
}

.before-24:before {
  width: 24%;
}

.before-25:before {
  width: 25%;
}

.before-26:before {
  width: 26%;
}

.before-27:before {
  width: 27%;
}

.before-28:before {
  width: 28%;
}

.before-29:before {
  width: 29%;
}

.before-30:before {
  width: 30%;
}

.before-31:before {
  width: 31%;
}

.before-32:before {
  width: 32%;
}

.before-33:before {
  width: 33%;
}

.before-34:before {
  width: 34%;
}

.before-35:before {
  width: 35%;
}

.before-36:before {
  width: 36%;
}

.before-37:before {
  width: 37%;
}

.before-38:before {
  width: 38%;
}

.before-39:before {
  width: 39%;
}

.before-40:before {
  width: 40%;
}

.before-41:before {
  width: 41%;
}

.before-42:before {
  width: 42%;
}

.before-43:before {
  width: 43%;
}

.before-44:before {
  width: 44%;
}

.before-45:before {
  width: 45%;
}

.before-46:before {
  width: 46%;
}

.before-47:before {
  width: 47%;
}

.before-48:before {
  width: 48%;
}

.before-49:before {
  width: 49%;
}

.before-50:before {
  width: 50%;
}

.before-51:before {
  width: 51%;
}

.before-52:before {
  width: 52%;
}

.before-53:before {
  width: 53%;
}

.before-54:before {
  width: 54%;
}

.before-55:before {
  width: 55%;
}

.before-56:before {
  width: 56%;
}

.before-57:before {
  width: 57%;
}

.before-58:before {
  width: 58%;
}

.before-59:before {
  width: 59%;
}

.before-60:before {
  width: 60%;
}

.before-61:before {
  width: 61%;
}

.before-62:before {
  width: 62%;
}

.before-63:before {
  width: 63%;
}

.before-64:before {
  width: 64%;
}

.before-65:before {
  width: 65%;
}

.before-66:before {
  width: 66%;
}

.before-67:before {
  width: 67%;
}

.before-68:before {
  width: 68%;
}

.before-69:before {
  width: 69%;
}

.before-70:before {
  width: 70%;
}

.before-71:before {
  width: 71%;
}

.before-72:before {
  width: 72%;
}

.before-73:before {
  width: 73%;
}

.before-74:before {
  width: 74%;
}

.before-75:before {
  width: 75%;
}

.before-76:before {
  width: 76%;
}

.before-77:before {
  width: 77%;
}

.before-78:before {
  width: 78%;
}

.before-79:before {
  width: 79%;
}

.before-80:before {
  width: 80%;
}

.before-81:before {
  width: 81%;
}

.before-82:before {
  width: 82%;
}

.before-83:before {
  width: 83%;
}

.before-84:before {
  width: 84%;
}

.before-85:before {
  width: 85%;
}

.before-86:before {
  width: 86%;
}

.before-87:before {
  width: 87%;
}

.before-88:before {
  width: 88%;
}

.before-89:before {
  width: 89%;
}

.before-90:before {
  width: 90%;
}

.before-91:before {
  width: 91%;
}

.before-92:before {
  width: 92%;
}

.before-93:before {
  width: 93%;
}

.before-94:before {
  width: 94%;
}

.before-95:before {
  width: 95%;
}

.before-96:before {
  width: 96%;
}

.before-97:before {
  width: 97%;
}

.before-98:before {
  width: 98%;
}

.before-99:before {
  width: 99%;
}

.before-100:before {
  width: 100%;
}

#admin_panel .attendance_count_container .attendance_count_box_footer .export_btn {
  outline: none;
  border-radius: 5px;
  width: 100%;
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: center;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid #c36464;
  color: #c36464;
}

#admin_panel .attendance_count_container .attendance_count_box_footer .export_btn i {
  color: #726e79;
}

/*data not found*/
#data_not_found {
  width: 100%;
  padding: 30px 0;
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

#data_not_found .data_not_found_box {
  text-align: center;
  box-shadow: 0 0 10px 0 rgba(224, 118, 118, 0.22);
  padding: 30px 30px;
  border-radius: 20px;
  user-select: none;
}

#data_not_found .data_not_found_img_box {
  width: 350px;
}

#data_not_found .data_not_found_img_box img {
  width: 100%;
}

#data_not_found .data_not_found_box h1 {
  font-size: 50px;
  color: black;
}

#data_not_found .data_not_found_box .desc {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 20px;
  justify-content: center;
  color: rgba(51, 51, 51, 0.78);
}

#data_not_found .data_not_found_box .icon {
  font-size: 30px;
  color: var(--common-bg);
}

@media (max-width: 697px) {
  #data_not_found {
    display: grid;
    grid-template-columns: max-content;
    grid-template-rows: max-content max-content;
    justify-content: center;
    align-content: center;
  }
  #data_not_found .box .desc {
    padding-top: 20px;
  }
}
@media (max-width: 576px) {
  #data_not_found .box {
    box-shadow: none;
  }
}
@media (max-width: 1276px) {
  .grid-max-content-1-1296-px {
    grid-template-columns: max-content !important;
  }
}
@media (max-width: 676px) {
  .d-none-676-px {
    display: none;
  }
}
@media (max-width: 376px) {
  table td,
  table th {
    font-size: 13px;
  }
}
.send_otp_form {
  width: 300px;
  margin: auto;
  display: block;
}

.send_otp_form h3,
.send_otp_form .form_body h3 {
  font-size: 17px;
}

.send_otp_form .form_body button {
  width: 100%;
  justify-content: center;
}

.send_otp_form .otp_group {
  display: flex;
  flex-flow: row;
  flex-direction: row;
  gap: 6px;
  justify-content: space-between;
}

.send_otp_form .otp_group .otp_input {
  border: 1px solid #a9a8a8;
  outline: none;
  border-radius: 5px;
  width: 35px;
  height: 35px;
  background: transparent;
  text-align: center;
}

.send_otp_form .form-group .form-control {
  background: transparent !important;
}

.leave-dashboard .tabs .tab-btn {
  box-shadow: none !important;
  background: rgba(227, 65, 65, 0.1098039216);
  color: #fc415b;
}

.leave-dashboard .tabs .tab-btn:hover,
.leave-dashboard .tabs .tab-btn-active {
  transition: all 0.3s ease;
  background: #fc415b;
  color: #fff;
}

.leave-dashboard .form-group-outer .form-group {
  margin: 0 !important;
}

.leave-dashboard .common-btn {
  width: fit-content;
  padding: 0 20px;
}

.leave-dashboard .table .approved {
  background: rgba(36, 203, 60, 0.2196078431);
  color: #1a801a;
  border-radius: 50px;
  padding: 0 6px 4px 6px;
}

.leave-dashboard .table .cancel {
  background: rgba(203, 36, 36, 0.1803921569);
  color: #bb1212;
  border-radius: 50px;
  padding: 0 6px 4px 6px;
}

@media (max-width: 576px) {
  .leave-dashboard {
    padding: 20px !important;
  }
  .leave-dashboard .input-group {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .leave-dashboard .table {
    overflow-x: scroll;
  }
  .leave-dashboard .table th {
    white-space: nowrap;
  }
}
@media (max-width: 625px) {
  .display-none-625px {
    display: none;
  }
}/*# sourceMappingURL=dashboard.css.map */