coducer-front-end/dist/index.css

This will help you in Accordion, BreadCrumb, Button, Creatable Select, Select, Formik Date Field, Formik Field, Formik PhoneNumber, Formik Time Field, Input Field, Loader, Modal, NavBarMenu, Notify, Pill, Toggle Switch

@import "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";

/* src/Accordion/Accordion.css */
.accodion_text {
  font-size: var(--fs14);
  color: var(--textdark);
  font-weight: 600;
}
.accordion {
  border-radius: 10px !important;
}
.accordion .accordion-item button {
  background: transparent;
  box-shadow: none !important;
  color: var(--textBlack);
}
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 68px;
}
.accordion-header {
  min-height: 84px !important;
}

/* src/BreadCrumb/BreadCrumb.css */
.Bread_crumb_title {
  color: var(--textdark);
}
.link_title {
  color: var(--textLight);
  font-size: 12px;
  font-weight: 500;
}

/* src/Button/Button.css */
.common_solid_button .btn-primary {
  background-color: var(--textprimary) !important;
  border-color: var(--textprimary) !important;
  border-radius: 2px !important;
  padding: 10px 16px !important;
  color: var(--bgColor) !important;
  text-align: center;
  font-weight: 700 !important;
}
.common_secondary_button .btn-primary {
  background-color: var(--hoverColor) !important;
  border-color: var(--hoverColor) !important;
  border-radius: 2px !important;
  padding: 10px 16px !important;
  color: var(--textLight) !important;
  text-align: center;
  font-weight: 700 !important;
}
.common_hallow_button .btn-primary {
  border: 1px solid var(--border) !important;
  border-radius: 2px;
  padding: 10px 16px;
  color: var(--textLight) !important;
  text-align: center;
  background: transparent !important;
  font-weight: 500;
}
.common_hallowdanger_button .btn-primary {
  border: 1px solid var(--danger) !important;
  border-radius: 2px;
  padding: 10px 16px;
  color: var(--danger) !important;
  text-align: center;
  background: transparent !important;
  font-weight: 500;
}

/* src/InputField/inputField.css */
.eye-icon-css {
  position: absolute !important;
  right: 10px;
  top: 32px;
  cursor: pointer;
}
.auth-eye-icon-css {
  position: absolute !important;
  right: 10px;
  top: 45px;
  cursor: pointer;
}

/* src/FormikDateField/FormikDateField.css */
.calender_icon {
  position: absolute;
  right: 13px;
  top: 10px;
  cursor: pointer;
}

/* src/FormikPhoneNumber/FormikPhoneNumber.css */
.PhoneInputInput {
  border: 0 !important;
  display: flex !important;
  width: 100%;
  outline: none !important;
  background-color: var(--bs-body-bg) !important;
}
.PhoneInputInput:disabled {
  background: #f2f2f2 !important;
}
.PhoneInput {
  display: flex !important;
}
.PhoneInput:disabled {
  background: #f2f2f2 !important;
}

/* src/FormikTimeField/FormikTimeField.css */
.time_icon {
  position: absolute;
  right: 13px;
  top: 10px;
  cursor: pointer;
}
input[type=time]::-webkit-calendar-picker-indicator {
  filter: invert(100%) sepia(0%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
}

/* src/Modal/Modal.css */
.modal-content-container {
  text-align: center;
}
.modal-content {
  color: var(--textdark) !important;
  background-color: var(--bgColor) !important;
  border-radius: 4px !important;
  border: none !important;
  min-width: 400px !important;
}
.modal-header {
  border-bottom: none !important;
}

/* src/Loader/Loader.css */
.loading {
  font-size: 12px;
  font-weight: 800;
  display: inline;
  position: absolute;
  top: 46%;
  left: 19%;
  z-index: 1;
}
.logo-loading {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.13;
}
.loading span {
  display: inline-block;
  margin-right: 3px;
  font-family: "Montserrat", sans-serif !important;
}
.loading06 span {
  position: relative;
  color: var(--textLight);
}
.loading06 span::after {
  position: absolute;
  top: 0;
  left: 0;
  content: attr(data-text);
  color: var(--textprimary);
  opacity: 0;
  transform: rotateY(-90deg);
  animation: loading06 4s infinite;
}
.loading06 span:nth-child(2)::after {
  animation-delay: 0.2s;
}
.loading06 span:nth-child(3)::after {
  animation-delay: 0.4s;
}
.loading06 span:nth-child(4)::after {
  animation-delay: 0.6s;
}
.loading06 span:nth-child(5)::after {
  animation-delay: 0.8s;
}
.loading06 span:nth-child(6)::after {
  animation-delay: 1s;
}
.loading06 span:nth-child(7)::after {
  animation-delay: 1.2s;
}
@keyframes loading06 {
  0%, 75%, 100% {
    transform: rotateY(-90deg);
    opacity: 0;
  }
  25%, 50% {
    transform: rotateY(0);
    opacity: 1;
  }
}
.spin-loader {
  border: 15px solid #eaf0f6;
  border-radius: 50%;
  border-top: 15px solid var(--textprimary);
  border-bottom: 15px solid var(--textprimary);
  width: 150px;
  height: 150px;
  animation: spinner 4s linear infinite;
  z-index: 1;
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* src/Pill/Pill.css */
.pill_view {
  font-size: var(--fs12);
  padding: 2px 10px;
  min-width: 65px;
  text-align: center;
}
.success-pill {
  border: 1px solid var(--successLight);
  background-color: var(--successLight);
  color: var(--success);
}
.danger-pill {
  border: 1px solid var(--dangerLight);
  background-color: var(--dangerLight);
  color: var(--danger);
}
.draft-pill {
  border: 1px solid var(--hoverColor);
  background-color: var(--hoverColor);
  color: var(--textLight);
}
.warning-pill {
  border: 1px solid var(--warningLight);
  background-color: var(--warningLight);
  color: var(--warning);
}
.pending-pill {
  border: 1px solid var(--pendingLight);
  background-color: var(--pendingLight);
  color: var(--pending);
}
.headoffice-pill {
  border: 1px solid var(--darkSucess);
  background-color: var(--darkSucess);
  color: var(--bgColor);
}
.branch-pill {
  border: 1px solid var(--purple);
  background-color: var(--purple);
  color: var(--bgColor);
}
.current-pill {
  border: 1px solid #c58fff;
  background-color: #c58fff;
  color: var(--bgColor);
}
.permanent-pill {
  border: 1px solid #007656;
  background-color: #007656;
  color: var(--bgColor);
}

/* src/ToggleSwitch/ToggleSwitch.css */
.common_toggle_switch {
  position: relative;
  display: inline-block;
  min-width: 66px;
  height: 30px;
}
.common_toggle_switch input {
  display: none;
}
.toggle_switch {
  padding: 5px 5px 5px 12px;
  -webkit-transition: 0.4s;
  cursor: pointer;
  transition: 0.4s;
  border-radius: 42px;
  box-shadow: var(--box-shadow);
}
.switch_default {
  background-color: var(--hoverColor);
}
.switch_custom {
  background-color: var(--dangerLight);
}
.toggle_switch:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 5px;
  bottom: 5px;
  background-color: var(--danger);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}
.switch_default::before {
  background-color: var(--bgColor) !important;
}
.common_toggle_switch input:checked + .switch_custom {
  background-color: var(--success);
}
.common_toggle_switch input:focus + .toggle_switch {
  box-shadow: var(--box-shadow);
}
.common_toggle_switch input:checked + .toggle_switch:before {
  -webkit-transform: translateX(65px);
  -ms-transform: translateX(65px);
  transform: translateX(-25px);
  left: 100%;
  background-color: var(--bgColor);
}
.on {
  display: none;
}
.on {
  color: var(--bgColor);
  font-size: var(--fs14);
  user-select: none;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.common_toggle_switch input:checked + .toggle_switch .on {
  display: block;
}
.on_default {
  display: none;
}
.on_default {
  color: var(--textprimary);
  font-size: var(--fs14);
  user-select: none;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.common_toggle_switch input:checked + .toggle_switch .on_default {
  display: block;
}
.off {
  color: var(--danger);
  font-size: var(--fs14);
  user-select: none;
  font-weight: 600;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.common_toggle_switch input:checked + .toggle_switch .off {
  display: none;
}
.off_default {
  color: var(--textLight);
  font-size: var(--fs14);
  user-select: none;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.common_toggle_switch input:checked + .toggle_switch .off_default {
  display: none;
}
.toggle_switch_eligibility {
  padding: 5px 5px 5px 12px;
  -webkit-transition: 0.4s;
  cursor: pointer;
  transition: 0.4s;
  border-radius: 42px;
  box-shadow: var(--box-shadow);
  background-color: var(--bgColor);
  border: 1px solid var(--textprimary);
}
.toggle_switch_eligibility:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 5px;
  bottom: 4px;
  background-color: var(--textprimary);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
}
.common_toggle_switch input:focus + .toggle_switch_eligibility {
  box-shadow: var(--box-shadow);
}
.common_toggle_switch input:checked + .toggle_switch_eligibility:before {
  -webkit-transform: translateX(65px);
  -ms-transform: translateX(65px);
  transform: translateX(-25px);
  left: 100%;
  background-color: var(--textprimary);
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0px 4px var(--bgColor);
}
.common_toggle_switch input:checked + .toggle_switch_eligibility {
  background-color: var(--textprimary);
}
.on_eligibility {
  display: none;
}
.on_eligibility {
  color: var(--bgColor);
  font-size: var(--fs14);
  user-select: none;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.common_toggle_switch input:checked + .toggle_switch_eligibility .on_eligibility {
  display: block;
}
.off_eligibility {
  color: var(--textprimary);
  font-size: var(--fs14);
  user-select: none;
  font-weight: 600;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.common_toggle_switch input:checked + .toggle_switch_eligibility .off_eligibility {
  display: none;
}