/*scss style file*/
body {
  background-color: #f2f3f7;
}

.logo {
  width: 40%;
  background-color: #220099;
  border-radius: 10px;
  padding: 15px;
}

.roundedCorners {
  border-radius: 100px !important;
}

.customBtnPrimary {
  color: #ffffff !important;
  background-color: #220099 !important;
  border-color: #220099 !important;
}

.customBtnSecondary {
  color: #ffffff !important;
  background-color: #cc0099 !important;
  border-color: #cc0099 !important;
}

.customBtnOutlinePrimary {
  background-color: #ffffff !important;
  color: #220099 !important;
  border-color: #220099 !important;
}

.customBtnOutlineSecondary {
  background-color: #ffffff !important;
  color: #cc0099 !important;
  border-color: #cc0099 !important;
}

.customIconButton {
  padding-left: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.customIconButton i.fa {
  color: #000 !important;
  background-color: #fff !important;
  padding: 15px !important;
  border-radius: 100px !important;
  width: 45px;
  height: 45px;
}

.addon i.fa {
  text-align: center;
  line-height: 40px;
  border-radius: 100px !important;
  width: 40px;
  height: 40px;
}

.text-small {
  font-size: medium;
}

.customTextPrimary {
  color: #220099 !important;
}

.customTextSecondary {
  color: #cc0099 !important;
}

.customTextWhite {
  color: #ffffff !important;
}

.customPrimaryBg {
  background-color: #220099;
}

.customSecondaryBg {
  background-color: #cc0099;
}

.customWhiteBg {
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 0 4px 1px #d9d9d9;
  padding: 15px;
}

customBgPrimary, .bg-primary {
  background-color: #220099 !important;
}

customBgSecondary, .bg-secondary {
  background-color: #cc0099 !important;
}

.bg-yellow {
  background-color: yellow;
}

.bg-notEmp {
  background-color: cyan;
}

.bg-weekHoliday {
  background-color: #ffce6a;
}

.bg-bankHoliday {
  background-color: #ff000a;
}

.customBadgePrimary {
  color: #fff;
  background-color: #220099;
}

.borderRadius20 {
  border-radius: 20px !important;
}

.create-invoice label {
  margin-top: 0;
}

.verticalCenter {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%);
  transform: translate(-50%);
}

.customCheckboxDesign {
  /* Hide the browser's default checkbox */
  /* Create a custom checkbox */
  /* On mouse-over, add a grey background color */
  /* When the checkbox is checked, add a blue background */
  /* Create the checkmark/indicator (hidden when not checked) */
  /* Show the checkmark when checked */
  /* Style the checkmark/indicator */
}
.customCheckboxDesign input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.customCheckboxDesign .checkmark {
  position: absolute;
  /* top: 0;*/
  left: 3%;
  height: 25px;
  width: 25px;
  background-color: #eee;
}
.customCheckboxDesign:hover input ~ .checkmark {
  background-color: #ccc;
}
.customCheckboxDesign input:checked ~ .checkmark {
  background-color: #220099;
}
.customCheckboxDesign .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.customCheckboxDesign input:checked ~ .checkmark:after {
  display: block;
}
.customCheckboxDesign .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.customRadioBtnDesign {
  /* Hide the browser's default radio button */
  /* Create a custom radio button */
  /* On mouse-over, add a grey background color */
  /* When the radio button is checked, add a blue background */
  /* Create the indicator (the dot/circle - hidden when not checked) */
  /* Show the indicator (dot/circle) when checked */
  /* Style the indicator (dot/circle) */
}
.customRadioBtnDesign input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.customRadioBtnDesign .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}
.customRadioBtnDesign:hover input ~ .checkmark {
  background-color: #ccc;
}
.customRadioBtnDesign input:checked ~ .checkmark {
  background-color: #2196F3;
}
.customRadioBtnDesign .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.customRadioBtnDesign input:checked ~ .checkmark:after {
  display: block;
}
.customRadioBtnDesign .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.tableFixHeight {
  max-height: 265px;
  overflow: hidden;
  overflow-y: auto;
}

.tableFixHeightMax {
  max-height: 500px;
  overflow: hidden;
  overflow-y: auto;
  overflow-x: auto;
}

.nav .nav-item {
  margin: 5px 10px;
}

.sidebar .customIconButton.btn:hover {
  background-color: #d9d9d9 !important;
}
.sidebar .customIconButton.customBtnActive {
  background-color: rgba(34, 0, 153, 0.1) !important;
}
.sidebar .customIconButton.customBtnActive i.fa {
  background-color: #220099 !important;
  color: #ffffff !important;
}

.login .customWhiteBg {
  position: absolute;
  margin-top: -50%;
  padding: 25% 10%;
}
.login .verticalCenter {
  padding: 5% 0;
  top: 30%;
}

.registration .customWhiteBg {
  position: absolute;
  margin-top: -65%;
  padding: 10% 10%;
}

.main-dashboard .customWhiteBg {
  margin-bottom: 0px !important;
  min-height: 400px;
  overflow: hidden;
  overflow-y: auto;
}
.main-dashboard h5 {
  color: #b1b1b1;
  font-size: 16px;
  font-weight: 100;
}
.main-dashboard h4, .main-dashboard h2, .main-dashboard h3, .main-dashboard .badge {
  font-weight: 300;
}
.main-dashboard .todo-list ul li {
  list-style: none;
}
.main-dashboard .todo-list ul li input {
  margin-right: 10px;
}
.main-dashboard .current-progressbar .progress {
  height: 20px;
}
.main-dashboard .current-progressbar .progress .progress-bar {
  height: 20px;
}

.main-dashboard .customWhiteBg {
  margin-bottom: 0px !important;
  min-height: 400px;
  overflow: hidden;
  overflow-y: auto;
}
.main-dashboard h5 {
  color: #b1b1b1;
  font-size: 16px;
  font-weight: 100;
}
.main-dashboard h4, .main-dashboard h2, .main-dashboard h3, .main-dashboard .badge {
  font-weight: 300;
}
.main-dashboard .todo-list ul li {
  list-style: none;
}
.main-dashboard .todo-list ul li input {
  margin-right: 10px;
}
.main-dashboard .current-progressbar .progress {
  height: 20px;
}
.main-dashboard .current-progressbar .progress .progress-bar {
  height: 20px;
}

.aispMultiStepForm.aispBox2 ul.accountList {
  padding-left: 0;
}
.aispMultiStepForm.aispBox2 ul.accountList li {
  border: 1px solid #ddd;
  padding: 15px;
  list-style: none;
  border-radius: 20px;
  margin-bottom: 10px;
}
.aispMultiStepForm.aispBox2 ul.accountList li .customCheckboxDesign .checkmark {
  left: 85%;
}
.aispMultiStepForm.aispBox3 .card {
  margin: 5px;
}

.pispMultiStepForm.pispBox1 .table th, .pispMultiStepForm.pispBox1 .table td {
  padding: 5px;
}

.payroll-dashboard .empTable {
  /*td:nth-child(1), td:nth-child(2), td:nth-child(3), td:nth-child(4) {
    padding: 0.75rem !important;
  }*/
}
.payroll-dashboard .empTable td {
  vertical-align: baseline;
  padding: 0;
  opacity: 0.6;
  cursor: pointer;
}
.payroll-dashboard .empTable td:nth-child(1) {
  text-align: center;
}
.payroll-dashboard .empTable td:nth-child(2), .payroll-dashboard .empTable td:nth-child(3), .payroll-dashboard .empTable td:nth-child(4), .payroll-dashboard .empTable td:nth-last-child(2), .payroll-dashboard .empTable td:nth-last-child(1) {
  padding-left: 10px;
}
.payroll-dashboard .empTable select.form-control {
  opacity: 0;
  cursor: pointer;
}
.payroll-dashboard .empTable .bg-weekHoliday select.form-control {
  pointer-events: none !important;
  cursor: no-drop !important;
}
.payroll-dashboard .empTable .rotate-90 {
  transform: rotate(-90deg);
  transform-origin: center;
}
.payroll-dashboard .infoTable td {
  opacity: 0.6;
}
.payroll-dashboard .notFixHeightParent .customWhiteBg {
  min-height: inherit;
  overflow: unset;
  overflow-y: auto;
}

/*overwrite css*/
.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #220099 !important;
  border-color: #220099 !important;
}

.modal-dialog {
  width: 50% !important;
  max-width: 100% !important;
}
.modal-dialog .modal-content {
  border-radius: 20px !important;
}
.modal-dialog .modal-content .pull-right .btn {
  float: right;
  position: absolute;
  right: 15px;
  top: 15px;
}
.modal-dialog .modal-content form {
  /*label{
    margin-top: 10px !important;
  }*/
}

/*# sourceMappingURL=style.css.map */