/*******************************    Imported Files   ******************************/
/*****************************    Basic Elements Style     **********************************/
body {
  font-family: "Almarai", sans-serif !important;
}

a {
  cursor: pointer;
  text-decoration: none;
  outline: none;
}

button {
  outline: none;
}

.btn:focus {
  box-shadow: none;
}

.form-control:focus {
  box-shadow: none;
}

.form-select {
  box-shadow: none;
  background-image: url(../../assets/img/selectOption.svg) !important;
  background-size: 12px 9px;
}
.form-select:focus {
  box-shadow: none;
}

.marginInput {
  margin-bottom: 20px;
}

.form-group label {
  margin-bottom: 10px;
}

.form-check-input:focus {
  box-shadow: none;
}

.btn-close:focus {
  box-shadow: none;
}

.dropdown-item {
  cursor: pointer;
}

.modal-dialog {
  margin: 7.75rem auto;
}

.table > :not(:first-child) {
  border-top: none;
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
  width: 100% !important;
}

/*****************************   Progress-bar colors  **********************************/
.bgRed {
  background-color: #f60101;
}

.bgBrick {
  background-color: #ff0000;
}

.bgOrange {
  background-color: #FF8800;
}

.bgGreen {
  background-color: #5fb544;
}

/*****************************    Status Points     **********************************/
.greenStatusPoint {
  border-color: #449b29 !important;
}

.redStatusPoint {
  border-color: #de181f !important;
}

.orangeStatusPoint {
  border-color: #FF8800 !important;
}

.blueStatusPoint {
  border-color: #647c95 !important;
}

/*****************************    Extended Styles     **********************************/
.accordItem .accordion-button .num, .daysOffCard .card-body .box1 .title, .daysOffCard .card-header .hash {
  font-weight: bold;
  color: #0f77bd;
}

.accordItem .accordion-button .title, .daysOffCard .card-body .box1 .description, .daysOffCard .card-header .number {
  color: #000;
  font-size: 16px;
  font-weight: bold;
}

.btnSave, .dayOffModal .modal-footer button {
  border: solid 1px #5fb544 !important;
  color: #0f77bd !important;
  border-radius: 5px !important;
  padding: 10px 9px 12px 9px !important;
  min-width: 127px !important;
  font-size: 16px;
  font-weight: bold !important;
  background-color: #fff !important;
}
.btnSave:hover, .dayOffModal .modal-footer button:hover {
  background-image: linear-gradient(259deg, #001d3b 1%, #07497a 47%, #0f77bd 100%);
  color: #fff !important;
  border-color: #0f77bd !important;
}

.vacTable .selectVacStatus .selectStatus, .hrVacBox .card-footer .selectStatus {
  border-radius: 36px;
  border: solid 1px #0f77bd;
  color: #000;
  font-size: 16px;
  width: 242px;
  text-align: left;
  background-image: url(../../assets/img/dropDown.svg) !important;
  background-size: 12px;
  background-position: left 17px center;
  padding-left: 42px;
}

.vacTable .selectVacStatus .statusPoint, .statusPoint {
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 50%;
  position: absolute;
  right: 24%;
  top: 20%;
  border: solid 2px;
}

.employeeCard .card-body .details .txt1, .passBox .noteBox ul li, .passBox .noteBox .title, .cardSetting .card-body .settingBox .lang .title, .cardSetting .card-body .settingBox .txt {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.workDayCard .card-body .workingHoursDetails .txt2, .workDayCard .card-body .workingHours .txt {
  font-size: 18px;
  font-weight: bold;
  color: #2d2d2d;
}

.statusPoint2 {
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 50%;
  border: solid 2px;
}

.socialSecurityCard .card-header .add, .socialSecurityCard .card-header h4 {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.salaryCard .card-footer .totalSalary .txtTotal, .salaryCard .card-footer .btnCalc .txtCalc {
  border-left: solid 1px #b2b2b2;
  font-size: 18px;
  font-weight: bold;
  padding-left: 20.5px;
}

.salaryCard .card-footer .totalSalary, .salaryCard .card-footer .btnCalc {
  padding: 11px 20px;
  border-radius: 15px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  width: 100%;
  max-width: 322px;
}

.employeeCreateForm .form-group .leaveDateTxt, .leaveModal .leaveDateTxt {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  margin-bottom: 10px;
}

/*****************************    Content Style    **********************************/
.colorGreen {
  color: #198754;
}

.btnExcel {
  border-radius: 5px;
  border: 1px solid #198754;
  font-size: 12px;
}

.ssKeysBox .perBalancetxt1 {
  color: #51ab34 !important;
}

.SalarySlipComponent .sscName {
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
}
.SalarySlipComponent .sscBoxContent {
  padding-left: 20px;
}
.SalarySlipComponent .mb13 {
  margin-bottom: 13px;
}
.SalarySlipComponent .sscTitle {
  font-size: 15px;
  font-weight: bold;
}
.SalarySlipComponent .sscTitle2 {
  font-size: 14px;
}
.SalarySlipComponent .sscListName {
  border-bottom: 1px solid #000;
  display: inline-block;
}
.SalarySlipComponent .sscTxtContent {
  font-size: 14px;
  margin-left: 12px;
}
.SalarySlipComponent .sscBorderBox {
  margin: 30px 0;
}
.SalarySlipComponent .sscTotalBox {
  display: inline-block;
}

.netSalary {
  display: none;
}

.monthFullName {
  display: inline-block;
}

.bgGreenGrad {
  background-color: #b1e3a1;
}

.salTxtEmpty {
  font-size: 21px;
  color: #183656;
  font-weight: bold;
}

.salaryMonthBox .txt1 {
  color: #51ab34 !important;
}
.salaryMonthBox:hover, .salaryMonthBox.active {
  background-image: linear-gradient(232deg, #5fb544 13%, #16340d 87%) !important;
}
.salaryMonthBox:hover .txt1, .salaryMonthBox.active .txt1 {
  color: #fff !important;
}
.salaryMonthBox:hover .rightAngle, .salaryMonthBox.active .rightAngle {
  background: linear-gradient(135deg, #fff 50%, rgba(255, 255, 255, 0) 50%, rgba(0, 212, 255, 0) 45%) !important;
}
.salaryMonthBox:hover .netSalary, .salaryMonthBox.active .netSalary {
  display: inline-block;
}
.salaryMonthBox:hover .monthFullName, .salaryMonthBox.active .monthFullName {
  display: none;
}

.salaryMonthBoxHover {
  cursor: no-drop !important;
  background: rgba(40, 40, 40, 0.23);
  background-image: none !important;
  border: transparent !important;
}
.salaryMonthBoxHover .salaryBorderedAngle {
  background: linear-gradient(135deg, rgba(40, 40, 40, 0.23) 50%, rgba(255, 255, 255, 0) 50%, rgba(0, 212, 255, 0) 45%) !important;
}
.salaryMonthBoxHover .salaryRightAngle {
  color: #000;
  background: linear-gradient(135deg, rgba(40, 40, 40, 0.23) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 212, 255, 0) 50%) !important;
}
.salaryMonthBoxHover .monthName .txt1 {
  color: #000 !important;
}
.salaryMonthBoxHover .monthName .txt2 {
  color: #000 !important;
}
.salaryMonthBoxHover:hover, .salaryMonthBoxHover.active {
  cursor: no-drop !important;
  background: rgba(40, 40, 40, 0.23);
  background-image: none !important;
  border: transparent !important;
}
.salaryMonthBoxHover:hover .salaryBorderedAngle, .salaryMonthBoxHover.active .salaryBorderedAngle {
  background: linear-gradient(135deg, rgba(40, 40, 40, 0.23) 50%, rgba(255, 255, 255, 0) 50%, rgba(0, 212, 255, 0) 45%) !important;
}
.salaryMonthBoxHover:hover .salaryRightAngle, .salaryMonthBoxHover.active .salaryRightAngle {
  color: #fff;
  background: linear-gradient(135deg, rgba(40, 40, 40, 0.23) 50%, rgba(255, 255, 255, 0) 50%, rgba(0, 212, 255, 0) 45%) !important;
}
.salaryMonthBoxHover:hover .monthName .txt1, .salaryMonthBoxHover.active .monthName .txt1 {
  color: #000 !important;
}
.salaryMonthBoxHover:hover .monthName .txt2, .salaryMonthBoxHover.active .monthName .txt2 {
  color: #000 !important;
}

.salaryBorderedAngle {
  background: linear-gradient(135deg, #183656 50%, rgba(255, 255, 255, 0) 50%, rgba(0, 212, 255, 0) 45%) !important;
}

.salaryRightAngle {
  background: linear-gradient(135deg, #5fb544 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 212, 255, 0) 50%) !important;
}

.monthTit {
  color: #183656;
}

.boxBordered2 {
  border: 1px solid #3c9fe1;
  border-radius: 5px;
  max-width: 232px;
  padding: 8px;
}

.mt30 {
  margin-top: 30px;
}

.mb10 {
  margin-bottom: 10px;
}

.salarySlip {
  padding: 30px 40px !important;
}
.salarySlip .rInnerTxt {
  font-size: 16px;
}
.salarySlip .rBoxHr {
  font-size: 16px;
  text-decoration: underline;
  font-weight: bold;
}
.salarySlip .lineBefore::before {
  content: "";
  width: 5rem;
  display: inline-block;
  background-color: #000;
  height: 1px;
  margin-right: 10px;
}
.salarySlip .footerHeader {
  font-size: 18px;
  font-weight: bold;
}
.salarySlip .footer {
  font-size: 20px;
  font-weight: bold;
  margin-top: 53px;
}
.salarySlip .footer .lineBefore:before {
  content: "";
  width: 5rem;
  display: inline-block;
  background-color: #000;
  height: 1px;
  margin: 0 10px;
}
.salarySlip .rHeaderTxt {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 27px;
  color: #183656;
}
.salarySlip .sDividor {
  margin: 45px auto;
  width: 450px;
}

.boxBordered {
  border: 1px solid #3c9fe1;
  border-radius: 5px;
  width: 100%;
  max-width: 108px;
  padding: 8px;
  float: right;
}

.mb20 {
  margin-bottom: 20px !important;
}

.whiteHoverTxt:hover {
  color: #fff;
}

.generalTitle {
  font-size: 16px;
  color: #2d2d2d;
  font-weight: bold;
}

.scrollList {
  height: 500px;
  overflow-y: scroll;
}

.checkProgressBarAlert {
  background-color: #df2b2b !important;
}

.progressAlert {
  border: 2px solid #dfdede;
  border-radius: 6px;
  max-width: 553px;
  margin: auto;
  padding: 18px 12px;
}
.progressAlert .proTxt {
  font-size: 17px;
  font-weight: bold;
  color: #dc3030;
  letter-spacing: 1px;
}

.salaryTit {
  font-size: 16px;
  font-weight: bold;
  color: #0f77bd;
}

.salaryDate {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.salryCard {
  padding: 29px 30px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  background-color: #fff;
}
.salryCard .card-header {
  border-bottom: 1px solid #dedede;
  padding-bottom: 10px;
}
.salryCard .card-header .introTxt {
  margin-left: 26px;
}
.salryCard .card-body {
  padding-top: 30px !important;
}
.salryCard .card-body .duesBox {
  border-top: 2px solid #5fb544;
  margin-top: 9px;
  padding-top: 29px;
}
.salryCard .card-body .duesDetails {
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 9px;
  margin-bottom: 30px;
}

.totalSalBox {
  padding: 18px;
  background-color: #f2f2f2;
  margin-top: 30px;
}

.generalInputLabelColored2 {
  color: #5fb544 !important;
}

.generalInputLabelColored {
  color: #0f77bd !important;
}

.positionTitle {
  font-size: 18px;
  margin-top: 10px;
  color: #0f77bd;
}

.outerCard {
  border-top: 6px solid #647c95;
  border-radius: 0.25rem;
  padding-top: 38px;
}

.empImg {
  width: 103px;
  height: 103px;
  border: solid 5px #0f77bd;
  border-radius: 50%;
}

.generalName {
  font-size: 20px;
  font-weight: bold;
  color: #5fb544;
}

.checkProgressBar {
  align-items: flex-end;
  background-color: #5fb544;
}

.progressTooltip {
  position: absolute;
  top: 0;
  margin-right: -33px;
}

.innerProgressTooltipTxt {
  color: #0f77bd;
  font-weight: bold;
  font-size: 16px;
  position: absolute;
  top: 8px;
  right: 0;
  left: 0;
}

.innerProgressTooltip {
  color: #e9ecef;
  font-size: 48px;
  position: relative;
}

.checkProgressBox {
  position: relative;
}

.checkProgress {
  max-width: 875px;
  border-radius: 9px;
}

.payrollBox {
  border-bottom: 1px solid #e5e5e5;
  padding-top: 15px;
  padding-bottom: 15px;
}
.payrollBox:hover {
  background-color: lavenderblush;
  cursor: default;
}

.generalStatusLabel {
  font-size: 16px;
  font-weight: bold;
  color: #f80;
}

.dividor {
  color: #7d7878;
  margin: 44px 0;
  height: 2px !important;
}

.generalInputLabel {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.removeIcone {
  font-size: 20px;
}

.addLoanModal .modal-footer .btn1loan {
  border: solid 1px #5fb544 !important;
  color: #0f77bd !important;
  border-radius: 5px !important;
  padding: 10px 2px 12px 2px !important;
  width: 100% !important;
  font-size: 16px;
  font-weight: bold !important;
  background-color: #fff !important;
}
.addLoanModal .payAmountBox {
  max-width: 174px;
  border-radius: 5px;
  border: solid 1px #5fb544;
}
.addLoanModal .payAmountBox .num {
  font-size: 16px;
  font-weight: bold;
  color: #919191;
  padding: 11px;
}
.addLoanModal .payAmountBox .coin {
  border-left: 1px solid #5fb544;
  color: #000;
}

.loanHistoryCard {
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.16);
  margin-bottom: 40px;
}
.loanHistoryCard .card-header {
  background-color: #808080 !important;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
.loanHistoryCard .card-body .detailsLine {
  border-bottom: 1px solid #f2f2f2;
}
.loanHistoryCard .card-body .detailsLine:last-child {
  border-bottom: none;
}
.loanHistoryCard .card-body .title {
  font-size: 16px;
  font-weight: bold;
  color: #0f77bd;
}
.loanHistoryCard .card-body .txt {
  color: #000;
  font-size: 16px;
}
.loanHistoryCard .lineBetween {
  border-right: 1px solid #f3f3f3;
}

.EmptyTxt {
  border: 1px solid #408a29;
  border-radius: 8px;
  padding: 9px;
  font-size: 19px;
}

.loanHistory {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid;
}
.loanHistory:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.noteModal {
  max-width: 552px;
}

.statusMsg {
  font-size: 27px;
  color: #d91414;
  font-weight: bold;
}

.errorMsg {
  border: 1px solid #892f2f;
  padding: 5px;
  width: 100%;
  max-width: 401px;
  margin: auto;
  border-radius: 12px;
}
.errorMsg .txt {
  font-size: 19px;
  color: #d91414;
  font-weight: bold;
}

.assetDes {
  box-shadow: none !important;
}

.dropdown-item:active {
  background-color: transparent;
}

.notifItem {
  background-color: #f2f6fc;
}

.notifBoxDrop .tit {
  font-size: 16px;
  color: #161414;
  font-weight: bold;
}
.notifBoxDrop .txt11 {
  font-size: 15px;
  color: #221919;
}
.notifBoxDrop .txt22 {
  font-size: 13px;
}

.notifimg {
  border-radius: 50%;
  border: 2px solid #0f77bd;
  width: 50px;
  height: 50px;
}

.holidayCardEmpty {
  max-width: 500px;
  width: 100%;
  margin: auto;
}
.holidayCardEmpty .card-body {
  background-color: #e5eff8;
}
.holidayCardEmpty .card-body .txt {
  font-size: 18px;
  font-weight: bold;
  color: #de1212;
}

.annTit {
  font-size: 18px;
  color: #262424;
  font-weight: bold;
  margin-right: 5px;
}

.annDesc {
  font-size: 17px;
  color: #262424;
}

.annContent {
  font-size: 18px;
  color: #262424;
  margin-bottom: 12px;
}

.disc {
  font-size: 21px;
  font-weight: bold;
  color: #524d4d;
  white-space: nowrap;
  margin-right: 5.5px;
}

.vc-popover-content-wrapper {
  z-index: 9999 !important;
}

.btnAddNote {
  margin-top: 25px;
  width: 100%;
  max-width: 132px;
  border-radius: 5px;
  border: solid 1px #5fb544;
  padding: 6px 15px 5px 15px;
  background-color: transparent;
}
.btnAddNote .txt {
  margin-left: 15.2px;
  color: #0f77bd;
  font-size: 16px;
  font-weight: bold;
}

.addNoteBox {
  width: 100%;
  border-radius: 5px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  border: none;
  padding: 15px;
  margin-top: 10px;
  outline: none;
}

.addNotetitle {
  font-size: 16px;
  font-weight: bold;
  color: #6a6969;
}

.noteBox {
  max-height: 212px;
  height: 100%;
  overflow-y: auto;
  border-radius: 5px;
  background-color: #d7e6f1;
  padding: 20px 8px 10px 10px;
}
.noteBox .innerNoteBox .form-check {
  margin-bottom: 20px;
}
.noteBox .innerNoteBox .form-check label {
  font-size: 16px;
  color: #000;
}
.noteBox .innerNoteBox .form-check:lastchild {
  margin-bottom: 0;
}
.noteBox .deleteNote {
  margin-top: 16px;
  text-align: right;
}
.noteBox .deleteNote button {
  border-radius: 5px;
  background-color: #0f77bd;
  border: none;
  color: #fff;
}

.noteBox2 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.noteBox2 .noteEmpty {
  font-size: 19px;
  font-weight: bold;
  color: #d41313;
}

.notificationMenu {
  top: 3px;
}
.notificationMenu ul {
  box-shadow: rgba(0, 0, 0, 0.42) 2px 2px 20px 0px;
}
.notificationMenu .dropdown-toggle:after {
  display: none;
}

.redIcon {
  color: red;
  font-size: 18px;
}

.alertIcon {
  color: red;
  font-size: 32px;
}

.txtDelete {
  font-size: 17px;
  font-weight: bold;
  color: #303030;
}

.deleteModal {
  max-width: 356px !important;
}

.historyBox {
  border-bottom: 1px solid #e0d6d6;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.historyBox:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.blueIcon {
  color: #0f77bd;
  font-size: 18px;
}

.editImgBox {
  margin-bottom: 24px;
}

.imgEditAsset {
  width: 133px;
  height: 113px;
  border-radius: 9px;
}

.assetType {
  overflow-y: auto;
  max-height: 350px;
  border-top: 1px solid #e1e0e0;
}
.assetType li {
  border-bottom: 1px solid #e1e0e0;
}
.assetType .txt4 {
  font-size: 15px;
  font-weight: bold;
}

.assetActions .actionIcon {
  color: #0f77bd;
}

.btnAddType .addIcon {
  font-size: 19px;
  color: #0f77bd;
}

.assetExcelBtn {
  border: 1px solid #e1e0e0;
  border-radius: 9px;
  margin-right: 14px;
  font-size: 23px;
  color: #5fb544 !important;
}

.assetDropdown .btnAsset:after {
  display: none;
}
.assetDropdown .ellipsisAsset {
  color: #0f77bd;
  font-size: 21px;
}

.imgAssetModule {
  width: 74px;
  height: 69px;
  border-radius: 5px;
}

.assetTable thead {
  background-color: #0f77bd;
  color: #fff;
  font-size: 16px;
}
.assetTable tbody td {
  font-size: 16px;
  font-weight: bold;
}

/*.description{
  margin-top: 30px;
}*/
.assetDetailsDialog {
  max-width: 730px !important;
}

.imgAssetDetails {
  width: 100%;
  height: 207px;
  border-radius: 5px;
}

.assetDetailsBox {
  margin-bottom: 20px;
}
.assetDetailsBox:last-child {
  margin-bottom: 0;
}
.assetDetailsBox .txt3 {
  color: #2294e0;
  font-size: 16px;
}

.modal-content .modal-footer .btnsearch {
  border-radius: 5px;
  border: solid 2px #5fb544;
  background-color: #fff;
  padding: 7px 2px;
  font-size: 16px;
  font-weight: bold;
  color: #0f77bd;
  width: 100%;
  max-width: 124px;
}

.assetModal {
  border-radius: 12px !important;
}
.assetModal .tit {
  font-size: 17px;
  font-weight: bold;
  color: #303030;
}
.assetModal .txt {
  color: #46a02a;
  font-size: 14px;
  font-weight: bold;
  margin-top: 7px;
}

.assetDialog {
  max-width: 776px !important;
}

.assetCard .card-body {
  padding: 1rem 1rem !important;
}
.assetCard .imgAsset {
  width: 100%;
  height: 182px;
}
.assetCard .assetBox .tit {
  font-size: 17px;
  font-weight: bold;
  color: #303030;
}
.assetCard .assetBox .txt {
  color: #2294e0;
  font-size: 16px;
}
.assetCard .assetBox .details {
  font-size: 16px;
  font-weight: bold;
  color: #46a02a;
  text-decoration: underline;
}

.modifiedTxt {
  color: #df1920 !important;
  font-weight: bold !important;
}

.spaceBetween {
  margin-bottom: 15px;
}
.spaceBetween:last-child {
  margin-bottom: 0;
}

.headerNav {
  padding: 11px 0 10px 0;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
}

.imgLogo {
  display: inline-block;
  margin-left: 35px;
}
.imgLogo img {
  width: 126px;
  height: 90px;
}

.dateTimeBox .txt1 {
  font-size: 30px;
}
.dateTimeBox .txt2 {
  font-size: 20px;
}

.timeBox {
  color: #647c95;
  border-right: solid 1px rgba(100, 124, 149, 0.53);
  padding-right: 20px;
  margin-right: 20px;
}

.dateBox {
  color: #647c95;
}

.innerDate {
  display: flex;
}
.innerDate .txt3 {
  margin-right: 11px;
}

.langBox .fa-bell {
  font-size: 20px;
  color: #474444;
}
.langBox .langEn {
  font-size: 20px;
  color: #474444;
  margin-left: 18.2px;
}

.responsiveHeader {
  display: none;
}

.responsiveHeader2 {
  background-color: #183656;
  padding: 9.2px 0 9.4px 0;
  display: none;
}
.responsiveHeader2 .langBox .fa-bell {
  color: #fff;
}
.responsiveHeader2 .langBox .langEn {
  color: #fff;
  margin-right: 0;
  margin-left: 20.1px;
}

.btnSidebarToggle {
  display: none;
}

.btnSidebarToggle:focus {
  box-shadow: none;
}

.btnSidebarToggle .fa-bars {
  font-size: 23px;
  color: #fff;
}

.rightSide {
  padding: 80px 0;
  background-color: #183656;
}
.rightSide .profileBox {
  padding: 0 4px;
}
.rightSide .profileBox img {
  border-radius: 50%;
  border: solid 5px #0f77bd;
  width: 137px;
  height: 137px;
}
.rightSide .nameBox {
  margin-top: 20px;
  color: #fff;
}
.rightSide .nameBox h1 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
}
.rightSide .nameBox h2 {
  font-size: 18px;
  margin-bottom: 0;
}
.rightSide .dashboardMenu {
  margin-top: 31.5px;
}
.rightSide .dashboardMenu ul li:hover {
  background-color: #647c95;
}
.rightSide .dashboardMenu ul li:hover .dashItem {
  font-weight: bold;
  color: #fff;
}
.rightSide .dashboardMenu ul li:hover .imgOriginal {
  display: none;
}
.rightSide .dashboardMenu ul li:hover .imgHover {
  display: inline-block;
}
.rightSide .dashboardMenu ul li:hover .imgHover2 {
  filter: brightness(0) invert(1);
}
.rightSide .dashboardMenu ul li:hover .settingIcon2 {
  color: #fff;
}
.rightSide .dashboardMenu ul li a {
  padding: 6px 15px 8px 15px;
  display: flex;
  align-items: center;
}
.rightSide .dashboardMenu ul li a .dashItem {
  color: #788fa7;
  font-size: 26px;
}
.rightSide .dashboardMenu ul li a .dashItem2 {
  margin-left: 5px;
  font-size: 20px;
}
.rightSide .menuIcons {
  padding: 0 24.3px;
  border-bottom: solid 1px rgba(100, 124, 149, 0.31);
  padding-bottom: 24.5px;
  margin-top: 52px;
}
.rightSide .menuIcons a:hover .img2Original {
  display: none;
}
.rightSide .menuIcons a:hover .img2Hover {
  display: inline-block;
}
.rightSide .menuIcons img {
  width: 23px;
  height: 25px;
}
.rightSide .menuIcons .icon1 {
  margin-right: 25.9px;
}
.rightSide .menuIcons .icon2 {
  margin-left: 22.8px;
}

.img2Original {
  width: 23px;
  height: 25px;
}

.img2Hover {
  width: 23px;
  height: 25px;
  display: none;
}

.imgOriginal {
  width: 23px;
  height: 27px;
}

.imgHover {
  width: 23px;
  height: 27px;
  display: none;
}

.leftSide {
  padding-top: 40px;
  padding-bottom: 40px;
}
.leftSide .bgHeader {
  width: 100%;
  height: 453.5px;
}

.yellowCircle {
  background-color: #FF8800 !important;
}

.footerBoxStatus {
  border-top: solid 1px #d8d8d8;
  margin-top: 22.2px;
  padding-top: 13.8px;
}

.footerBox2status .form-check {
  margin-top: 21px;
}

.cardFingerPrint {
  border: none;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  padding-left: 12.5px;
  padding-right: 12.5px;
  margin-bottom: 24px;
}
.cardFingerPrint .card-header {
  background-color: transparent;
  border: none;
  padding-top: 30px;
  padding-bottom: 30px;
}
.cardFingerPrint .card-header h3 {
  font-size: 20px;
  font-weight: bold;
  color: #0f77bd;
}
.cardFingerPrint .card-footer {
  background-color: transparent;
  border: none;
  border-top: solid 1px #d8d8d8;
  padding-top: 40.5px;
  padding-bottom: 38px;
}
.cardFingerPrint .card-footer .progress {
  height: 35px;
  border-radius: 21px;
}
.cardFingerPrint .timeline .txt1timeline {
  font-size: 16px;
  color: #2d2d2d;
  font-weight: normal;
  margin-bottom: 4px;
}
.cardFingerPrint .timeline .txt2timeline {
  font-size: 14px;
  color: #6a6969;
}
.cardFingerPrint ul.timeline > li {
  margin-bottom: 30px;
  margin-top: 0;
}
.cardFingerPrint ul.timeline:before {
  background: #5fb544;
}
.cardFingerPrint ul.timeline > li:before {
  background: #ff0c0c;
  border: 3px solid #ff0c0c;
}
.cardFingerPrint ul.timeline > .checkFingerPrint:before {
  background: #449b29;
  border: 3px solid #449b29;
}
.cardFingerPrint ul.timeline > .breakFingerPrint:before {
  background: #000;
  border: 3px solid #000;
}

.clockCard .card-footer {
  border: none;
  padding-top: 24px;
}
.clockCard .card-body {
  flex: 0;
}

.resDashCardHeader {
  position: relative;
}

.btnFingerPrint {
  text-align: center;
}
.btnFingerPrint button {
  border-radius: 15px;
  background-color: #449b29;
  width: 100%;
  padding: 17px 2px 14px 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btnFingerPrint button:focus {
  box-shadow: none;
}
.btnFingerPrint button .txtFingerPrint {
  margin-left: 20.1px;
  font-size: 25px;
  font-weight: bold;
  color: #fff;
}
.btnFingerPrint button .btnFingerPrint22 {
  display: none;
}
.btnFingerPrint a {
  border-radius: 15px;
  background-color: #449b29;
  width: 100%;
  padding: 17px 2px 14px 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btnFingerPrint a:focus {
  box-shadow: none;
}
.btnFingerPrint a .txtFingerPrint {
  margin-left: 20.1px;
  font-size: 25px;
  font-weight: bold;
  color: #fff;
}
.btnFingerPrint .btnFingerPrint22 {
  display: none;
}

.clockBox {
  position: relative;
}

.originalDashboard .clockBox {
  width: 74%;
}
.originalDashboard .card-body {
  position: relative;
}

.responsiveDashboard .clockDetails {
  background-image: linear-gradient(259deg, #001d3b 2%, #0f77bd 98%);
  border-radius: 10px;
  margin-bottom: 10.1px;
  padding: 4%;
  padding-right: 19%;
}
.responsiveDashboard .clockDetails .txt1 {
  font-size: 87%;
  font-weight: bold;
  color: #fff;
  margin-bottom: 6px;
  white-space: nowrap;
}
.responsiveDashboard .clockDetails .txt2 {
  font-size: 90%;
}
.responsiveDashboard .clockDetails .txt3 {
  color: #5fb544;
}

.clockDetails2 {
  padding-top: 10.5px;
  padding-bottom: 8.4px;
}

.circularBox {
  background-color: #fff;
  width: 34%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  right: 5%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: end;
}
.circularBox img {
  width: 90%;
}

.todayFingerprint .card-header {
  padding-bottom: 20px;
}
.todayFingerprint .card-body {
  max-height: 350px;
  overflow-y: scroll;
  padding-top: 0;
}

ul.timeline {
  list-style-type: none;
  position: relative;
}
ul.timeline:before {
  content: " ";
  background: #647c95;
  display: inline-block;
  position: absolute;
  left: 6px;
  width: 2px;
  height: 100%;
  z-index: 400;
}

ul.timeline > li {
  margin: 19px 0;
  padding-right: 15px;
}
ul.timeline > li:before {
  content: " ";
  background: #647c95;
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  border: 3px solid #647c95;
  left: 0;
  width: 15px;
  height: 15px;
  z-index: 400;
}

.timeline {
  margin: 0;
}
.timeline .txt1timeline {
  font-size: 18px;
  font-weight: bold;
  color: #2d2d2d;
  margin-bottom: 5px;
}
.timeline .txt2timeline {
  font-size: 16px;
  color: #6a6969;
}

.practExpCard {
  max-height: 247px;
  overflow-y: scroll;
}

.keyTimeline {
  margin-bottom: 14px;
}
.keyTimeline .redCircle {
  width: 14px;
  height: 14px;
  display: inline-block;
  border-radius: 50%;
  margin-right: 3px;
  background-color: #df1920;
}
.keyTimeline .txtTimeline {
  font-size: 16px;
  color: #2d2d2d;
}

.greenCircle {
  background-color: #449b29 !important;
}

.blackCircle {
  background-color: #000 !important;
}

.balanceDetailsBox {
  border-bottom: solid 1px #e5e5e5;
  padding-bottom: 15px;
  margin-bottom: 15.5px;
}

.perBalancetxt1 {
  font-size: 16px;
  font-weight: bold;
  color: #0f77bd;
}

.perBalancetxt2 {
  white-space: nowrap;
  margin-left: 13px;
}

.perBalanceBtn {
  border: solid 1px #FF8800;
  background-color: #fff;
  color: #5fb544;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  max-width: 133px;
  padding: 8px 2px 7px 2px;
}
.perBalanceBtn:hover {
  background-color: #FF8800;
  color: #fff;
  border-color: transparent;
  font-weight: normal;
}

.balanceBtn2 {
  padding-top: 14.5px;
}

.holidayCard {
  margin-bottom: 23px;
}

.box1vacation {
  margin-bottom: 5px;
  display: flex;
}
.box1vacation .txt1vacation {
  font-size: 16px;
  font-weight: bold;
  color: #df1920;
  margin-right: 7px;
}
.box1vacation .txt2vacation {
  white-space: nowrap;
  /*color: #3364b0; */
}

.txtAbsent {
  font-size: 18px;
  font-weight: bold;
  color: #020000;
}

.absentEmployee {
  width: 70px;
  height: 70px;
  margin-bottom: 8px;
  border-radius: 50%;
  border: solid 2px #ff0000;
}

.box1contentProfile {
  position: relative;
  top: 44px;
}

.img2profile {
  width: 154px;
  height: 154px;
  border-radius: 50%;
  border: solid 5px #0f77bd;
}

.btnEdit {
  margin-top: 15px;
}
.btnEdit button {
  padding: 10px 18px;
  border-radius: 15px;
  border: solid 1px #4da233;
  background-color: #e1e1e1;
}
.btnEdit button:focus {
  box-shadow: none;
}
.btnEdit button:hover {
  background-image: linear-gradient(257deg, #001d3b 2%, #0f77bd 98%);
  border-color: #0f77bd;
}
.btnEdit button:hover .txt {
  color: #fff;
}
.btnEdit button:hover .editOriginal {
  display: none;
}
.btnEdit button:hover .editHover {
  display: inline-block;
}
.btnEdit img {
  width: 25.6px;
  height: 25.7px;
}
.btnEdit .txt {
  margin-left: 10.3px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  white-space: nowrap;
}
.btnEdit .editHover {
  display: none;
}

.cardBox22 {
  border: none;
  border-radius: 5px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
}
.cardBox22 .card-header {
  background-color: transparent;
  padding: 0;
  text-align: right;
  padding-right: 25.4px;
  padding-top: 25.2px;
}
.cardBox22 .card-body {
  padding: 32px 34px 30px 34px;
}

.cardBox23 {
  padding-top: 0 !important;
}

.cardBox {
  margin-top: -136px;
}
.cardBox .txt1 {
  font-size: 20px;
  font-weight: bold;
  color: #0f77bd;
  margin-bottom: 10px;
}
.cardBox .txt2 {
  color: #0f77bd;
  font-size: 18px;
}
.cardBox .txt3 {
  color: #5fb544;
}
.cardBox .txt4 {
  color: #0f77bd;
  font-size: 18px;
}
.cardBox .txt5 {
  color: #647c95;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  padding-left: 18.5px;
}
.cardBox .txt6 {
  color: #2d2d2d;
  font-size: 16px;
  margin-bottom: 16px;
}
.cardBox .jobBox {
  font-size: 18px;
  margin-top: 25px;
}
.cardBox .job2box {
  margin-top: 10px;
}
.cardBox .profile1info {
  border-right: 1px dashed #0f77bd;
}

.box2content {
  margin-top: 30.4px;
}

.imgCard {
  width: 28px;
  height: 32px;
}

.box2 {
  border: none;
  border-bottom: solid 4px #647c95;
  border-radius: 5px 5px 0 0;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  padding: 30px;
  margin-bottom: 24px;
  padding-bottom: 14px;
}
.box2 .icon1 {
  color: #5fb544;
  font-size: 27px;
}
.box2 .card-body {
  padding: 30px;
  padding-top: 0;
}
.box2 .card-header {
  padding: 30px;
  padding-bottom: 0;
  display: flex;
  justify-content: space-between;
  background-color: transparent;
}
.box2 .card-header .editInfo {
  width: 20px;
  height: 20px;
}
.box2 .txt1box {
  font-size: 20px;
  margin-bottom: 30px;
  margin-left: 10px;
}
.box2 .txt1box .txt1 {
  font-weight: bold;
  color: #0f77bd;
  margin-left: 12.2px;
}
.box2 .txt2 {
  margin-bottom: 19px;
  font-size: 16px;
  color: #2d2d2d;
}
.box2 .txt4 {
  font-weight: bold;
}
.box2 .box2inner {
  border-top: solid 1px #d8d8d8;
  padding-top: 25px;
  margin-top: 2px;
}
.box2 .box2inner .txt1 {
  font-size: 16px;
  font-weight: bold;
  color: #2d2d2d;
  margin-bottom: 10px;
}
.box2 .checkIcon {
  color: #f8ba06;
  margin-right: 10.5px;
}
.box2 .checkedBox {
  margin-bottom: 21px;
  display: flex;
  overflow-wrap: anywhere;
}
.box2 .checkedBox .txt2 {
  font-weight: bold;
}
.box2 .checkIcon3 {
  color: #f82727;
}

.txtMargin {
  margin-bottom: 19px;
}

.checkedBox2 {
  margin-bottom: 21px;
  font-weight: bold;
}

.leaveModalDialog {
  max-width: 899px;
}

.leaveModal {
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  border: none;
  border-radius: 0;
}
.leaveModal .modal-title {
  font-size: 20px;
  font-weight: bold;
  color: #5fb544;
}
.leaveModal .modal-footer {
  border: none;
  padding-bottom: 50px;
  padding-right: 30px;
  padding-left: 30px;
}
.leaveModal .modal-footer button {
  border: solid 1px #4da233;
  background-color: #e1e1e1;
  color: #000;
  border-radius: 5px;
  padding: 13px 2px 12px 2px;
  width: 312px;
  font-size: 16px;
  font-weight: bold;
}
.leaveModal .modal-footer button:focus {
  box-shadow: none;
}
.leaveModal .modal-footer button:hover {
  background-image: linear-gradient(259deg, #001d3b 1%, #07497a 47%, #0f77bd 100%);
  color: #fff;
  border-color: #0f77bd;
}
.leaveModal .modal-header {
  border: none;
  padding: 15px;
  padding-bottom: 0;
}
.leaveModal .modal-body {
  padding-right: 30px;
  padding-left: 30px;
}
.leaveModal .modal-body .form-group {
  margin-bottom: 24px;
}
.leaveModal .form-select {
  box-shadow: none;
  background-image: url(../../assets/img/selectOption.svg) !important;
  background-size: 12px 9px;
}

.clock {
  position: relative;
}
.clock:after {
  content: "";
  display: block;
  background-image: url(../../assets/img/clock.svg);
  position: absolute;
  width: 26px;
  height: 29px;
  right: 10px;
  background-color: #fff;
  background-repeat: no-repeat;
  pointer-events: none;
}

.dateCalendar {
  position: relative;
}
.dateCalendar:after {
  content: "";
  display: block;
  background-image: url(../../assets/img/calendar.svg);
  position: absolute;
  width: 26px;
  height: 29px;
  right: 10px;
  background-color: #fff;
  background-repeat: no-repeat;
  pointer-events: none;
}

.vacReqModal {
  border-radius: 15px;
}

.profileReqModal .modal-body {
  padding-top: 0;
}
.profileReqModal .modal-title {
  margin-bottom: 21px;
}
.profileReqModal .modal-header {
  justify-content: end;
}

.btnClose2 {
  margin-right: 19px;
  margin-top: 15px;
}

.modal-header .btnCloseVac {
  margin: 0;
}

.confirmationModal {
  border-radius: 15px;
}
.confirmationModal .modal-footer .btnConfirmation {
  border-radius: 5px;
  border: solid 1px #5fb544;
  background-color: #efefef;
  padding: 8px 2px;
  width: 100%;
  max-width: 103px;
  font-size: 16px;
  font-weight: bold;
  color: #0f77bd;
  background-image: none;
}
.confirmationModal .modal-header {
  padding: 15px;
  background-color: #dcdcdc;
  border-radius: 15px 15px 0 0;
}
.confirmationModal .btnClose {
  background-color: #fff;
  opacity: 1;
  border-radius: 5px;
  font-size: 11px;
  margin: 0;
}

.btnClose {
  background-color: #e1e1e1;
  color: #606060;
  font-size: 16px;
}
.btnClose:focus {
  box-shadow: none;
}

.confirmationBox .txt {
  font-size: 25px;
  font-weight: bold;
  color: #000;
  margin-top: 40.6px;
}

.calenderCard {
  border: none;
  border-top: 6px solid #647c95;
}
.calenderCard .card-header {
  padding-top: 30px;
  background-color: transparent;
}
.calenderCard h3 {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: bold;
  color: #5fb544;
}
.calenderCard .calenderMonth {
  margin-top: 15px;
  font-size: 20px;
}
.calenderCard .calenderMonth .txt1 {
  color: #0f77bd;
  font-weight: bold;
}
.calenderCard .calenderMonth .txt2 {
  color: #2d2d2d;
}

.requestLeave .card-header {
  padding-bottom: 34px;
}
.requestLeave .RequestLeaveBtn {
  display: flex;
  justify-content: space-between;
}

.btnVacBox {
  text-align: right;
}

.btnVac {
  font-size: 16px;
  font-weight: bold;
  color: #2d2d2d;
  border-radius: 5px;
  border: solid 1px #5fb544;
  background-color: #e1e1e1;
  width: 230px;
  padding: 13px 2px 12px 2px;
}
.btnVac:focus {
  box-shadow: none;
}

.requestLeaveDetails {
  margin-top: 21px;
}
.requestLeaveDetails .searchLeave {
  border-radius: 5px;
  border: solid 2px #5fb544;
  background-color: #fff;
  padding: 5px 2px;
  font-size: 16px;
  font-weight: bold;
  color: #0f77bd;
  width: 100%;
  max-width: 124px;
}
.requestLeaveDetails .searchLeave:hover {
  background-image: linear-gradient(259deg, #001d3b 2%, #0f77bd 98%);
  color: #fff;
  border: solid 2px #0f77bd;
}

.dateRequestLeave {
  /* border-radius: 5px;
   border: solid 1px #0f77bd;*/
  position: relative;
}
.dateRequestLeave:after {
  content: "";
  position: absolute;
  top: 10px;
  right: 15px;
  background-image: url("../../assets/img/calendar.svg");
  background-repeat: no-repeat;
  background-position: 50%;
  transform: translateY(-25%);
  width: 28px;
  height: 31px;
  background-color: #fff;
  pointer-events: none;
}

.searchLeave:focus {
  box-shadow: none;
}

.leaveBalanceBox {
  margin-top: 30px;
}

.keyItemDesign {
  justify-content: center;
}

.keyWordItem {
  display: flex;
}
.keyWordItem .txtKey {
  margin-left: 3.8px;
  font-size: 16px;
  color: #2d2d2d;
}
.keyWordItem img {
  transform: rotate(270deg);
  width: 18.7px;
  height: 17.4px;
  margin-top: 4px;
}

.sideKey {
  width: 35px;
  height: 32px;
  transform: rotate(270deg);
  margin-left: -2px;
  margin-top: 1px;
}

.keysBoxx {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.leaveBalanceCard {
  border: none;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  border-radius: 0;
}
.leaveBalanceCard .card-body {
  padding: 12px 15px 13px 15px;
}

.balanceInnerBox {
  display: flex;
  justify-content: space-between;
}

.balanceInnerBox3 {
  margin-bottom: 12px;
}

.leaveBalanceTxt {
  margin-left: 10.6px;
  font-size: 16px;
  font-weight: bold;
  color: #2d2d2d;
}

.leaveBalanceDays {
  color: #4da233;
  white-space: nowrap;
}

.leaveDate {
  border: none;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.15);
  margin-bottom: 24px;
  border-radius: 0;
}
.leaveDate .card-header {
  padding: 0;
  border: none;
}
.leaveDate .card-body {
  padding: 0 34.5px 30.9px 33px;
}
.leaveDate .card-footer {
  background-color: transparent;
  border-top: none;
  margin-bottom: 25.5px;
}

.dayDate {
  display: flex;
  border-bottom: solid 1px #5fb544;
  padding-bottom: 19px;
  margin-bottom: 16.4px;
}
.dayDate .day {
  font-size: 16px;
  font-weight: bold;
  color: #0f77bd;
}

.dayDetails .dayName {
  font-size: 17px;
  color: #000;
}
.dayDetails .date {
  margin-left: 6px;
}

.timeRange {
  font-size: 16px;
  font-weight: bold;
  color: #2d2d2d;
  margin-bottom: 21.6px;
}

.timeDetails {
  font-size: 16px;
  color: #000;
}

.dashLine {
  display: inline-block;
  width: 24.4px;
  height: 2px;
  background-color: #6a6969;
  opacity: 0.8;
}

.btnDetails {
  border: solid 1px #5fb544;
  background-color: #fff;
  padding: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #0f77bd;
  border-radius: 5px;
}
.btnDetails:focus {
  box-shadow: none;
}
.btnDetails:hover {
  background-image: linear-gradient(259deg, #001d3b 2%, #0f77bd 98%);
  color: #fff;
  border: solid 1px #0f77bd;
}

.vacRequest {
  margin-bottom: 40px;
}

.leaveBalance2Box {
  margin-bottom: 12px;
}

.detailsDialog .card-header {
  background-color: transparent;
  padding-bottom: 20.5px;
}
.detailsDialog .txtVac {
  font-size: 16px;
  font-weight: bold;
  color: #2d2d2d;
  margin-bottom: 15.3px;
}
.detailsDialog .txt2details {
  font-weight: normal;
}
.detailsDialog .btnCancelAll {
  font-size: 16px;
  font-weight: bold;
  color: #449b29;
}
.detailsDialog .btnCancelAll:hover {
  text-decoration: underline;
}
.detailsDialog .btnCancelAll:focus {
  box-shadow: none;
}

.vacDateModal {
  border-radius: 0 15px 15px 15px;
}

.vacDateBox {
  border-radius: 0 15px 15px 15px;
}
.vacDateBox .card-header img {
  transform: rotate(270deg);
  margin-left: -2px;
  margin-top: 1px;
}

.cancelationDialog .modal-body {
  padding: 15px 20.3px 20px 20.3px;
}
.cancelationDialog .modal-body .txt {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin-left: 10.6px;
}
.cancelationDialog .modal-content {
  border-radius: 15px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.15);
}
.cancelationDialog .modal-header {
  padding: 14.5px 20.3px 15px 20.3px;
}
.cancelationDialog .modal-footer {
  padding: 20px 20.3px 40px 20.3px;
  justify-content: center;
}
.cancelationDialog .modal-footer .btnCancelation {
  font-size: 16px;
  font-weight: bold;
  color: #0f77bd;
  border-radius: 5px;
  border: solid 1px #5fb544;
  background-color: #efefef;
  width: 103px;
  padding: 3px 2px;
}
.cancelationDialog .modal-footer .btnCancelation:focus {
  box-shadow: none;
}
.cancelationDialog .modal-footer .btnCancelation:hover {
  background-image: linear-gradient(256deg, #001d3b 2%, #0f77bd 98%);
  color: #fff;
  border-color: #0f77bd;
}

.checkBox img {
  width: 33px;
  height: 29.4px;
}

.leaveKeyWords {
  display: inline-flex;
}

.yearFilterBox-btn .fa-plus {
  background-color: #5fb544;
  color: #fff;
  margin-right: 10px;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.calendar .vacKey {
  position: absolute;
  right: 6px;
  top: 6px;
}
.calendar .vacKey img {
  width: 21px;
  height: 21px;
}
.calendar .vacDay {
  background-color: #cfcfcf;
}
.calendar li {
  position: relative;
  height: 57.7px;
  background-color: #e5e6e8;
  color: #2d2d2d;
  font-size: 15px;
  text-align: left;
  margin-right: 4.2px;
  margin-bottom: 4.8px;
}
.calendar li .dayShow {
  position: relative;
  bottom: 0;
  top: 32px;
}
.calendar li:hover {
  cursor: pointer;
  background-image: linear-gradient(232deg, #183656 2%, #0f77bd 98%);
}
.calendar li:hover .dayShow {
  display: none;
}
.calendar li:hover .vacKey {
  display: none;
}
.calendar li:hover .dayHover {
  cursor: pointer;
  display: block;
  border: solid 3px #4da233;
  border-radius: 50%;
  margin: 11px 10px;
}
.calendar .vacation {
  color: #bfbfbf;
  background-color: #f5f5f5;
}
.calendar .vacation:hover {
  background-image: none;
}
.calendar .day-name {
  height: 27.9px;
  text-align: center;
  margin-bottom: 11.8px;
  margin-right: 4.4px;
  padding: 5px 2px;
  background-color: #183656;
  color: #fff;
  font-size: 15px;
}
.calendar .day-name:hover {
  background-image: none;
}
.calendar .day-off {
  background-color: #cbcbcb;
  color: #a5a5a5;
}
.calendar .progress {
  height: 4px;
  position: relative;
  top: 0;
}
.calendar .day-value {
  padding-left: 5.4px;
}

.bgSuccess {
  background-color: #4da233;
}

.dayHover {
  display: none;
}
.dayHover .day-value {
  font-size: 14px;
  color: #fff;
  padding: 5px !important;
  text-align: center;
}

.daysCalendarBox {
  margin-bottom: 25px;
}

.monthsCalendar {
  margin-bottom: 25px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  padding: 10px 36px 18px 36px;
  border: none;
  border-radius: 0;
}
.monthsCalendar .yearFilterBox {
  margin-bottom: 20px;
}
.monthsCalendar .yearFilterBox .nextIcon {
  color: #5fb544;
  font-size: 23px;
}
.monthsCalendar .yearFilterBox .nextIcon:focus {
  box-shadow: none;
}
.monthsCalendar .yearFilterBox .year {
  color: #183656;
  font-size: 35px;
  font-weight: bold;
  margin: 0 30px;
}
.monthsCalendar .monthBox {
  cursor: pointer;
  margin-bottom: 30px;
  font-size: 16px;
  padding: 0 3px 7px 0;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  border: solid 2px transparent;
  border-radius: 0;
}
.monthsCalendar .monthBox:hover {
  border: solid 2px #5fb544;
  background-image: linear-gradient(232deg, #183656 13%, #0f77bd 87%);
}
.monthsCalendar .monthBox:hover .rightAngle {
  background: linear-gradient(135deg, #fff 50%, rgba(255, 255, 255, 0) 50%, rgba(0, 212, 255, 0) 45%) !important;
}
.monthsCalendar .monthBox:hover .txt1 {
  color: #fff;
}
.monthsCalendar .monthBox:hover .txt2 {
  color: #fff;
}
.monthsCalendar .monthBox .txt1 {
  color: #0f77bd;
}
.monthsCalendar .monthBox .txt2 {
  color: #2d2d2d;
}
.monthsCalendar .monthBox.active {
  border: solid 2px #5fb544;
  background-image: linear-gradient(232deg, #183656 13%, #0f77bd 87%);
}
.monthsCalendar .monthBox.active .rightAngle {
  background: linear-gradient(135deg, #fff 50%, rgba(255, 255, 255, 0) 50%, rgba(0, 212, 255, 0) 45%);
}
.monthsCalendar .monthBox.active .txt1 {
  color: #fff;
}
.monthsCalendar .monthBox.active .txt2 {
  color: #fff;
}
.monthsCalendar .rightAngle {
  background: linear-gradient(135deg, #5fb544 50%, rgba(255, 255, 255, 0) 50%, rgba(0, 212, 255, 0) 45%);
  width: 48px;
  height: 47px;
  position: relative;
  left: -1px;
  top: -1px;
}
.monthsCalendar .rightAngle2 {
  background: linear-gradient(135deg, #183656 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 212, 255, 0) 50%);
  position: absolute;
  width: 41px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding-right: 15px;
  height: 43px;
  padding-top: 3px;
  left: -1px;
  top: -1px;
}
.monthsCalendar .monthName {
  margin-top: -26px;
  font-size: 15px;
}

.FingerprintModalDialog {
  max-width: 852px;
}

.FingerprintModal {
  border-radius: 15px;
  border: none;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
}
.FingerprintModal .modal-header {
  border: none;
  padding: 30px 30px 0 30px;
  justify-content: end;
}
.FingerprintModal .box4fingerprint {
  padding-bottom: 22px;
  padding-top: 24.9px;
}
.FingerprintModal .box4bodyFingerprint {
  margin-bottom: 26px;
}
.FingerprintModal .modal-title {
  border-radius: 5px;
  border: solid 1px #5fb544;
  background-color: #ebebeb;
  padding: 3px 2px 2px 2px;
  width: 100%;
  max-width: 109px;
  font-size: 16px;
  font-weight: bold;
  color: #0f77bd;
}
.FingerprintModal .modal-title:hover {
  background-image: linear-gradient(to bottom, #001d3b, #0f77bd);
  color: #fff;
  border-color: #0f77bd;
}
.FingerprintModal .cardBox1 {
  border-radius: 5px;
  background-color: RGBA(187, 187, 187, 0.31);
}
.FingerprintModal .cardBox1 .card-header {
  background-color: RGBA(187, 187, 187, 0.31);
  padding-top: 17px;
  border-radius: 5px 5px 0 0;
}
.FingerprintModal .cardBox1 .card-header .txt1 {
  font-size: 18px;
  font-weight: bold;
  color: #0f77bd;
  margin-right: 15px;
}
.FingerprintModal .cardBox1 .card-header .txt2 {
  color: #464646;
  margin-right: 0;
}
.FingerprintModal .cardBox1 .card-body {
  background-color: RGBA(187, 187, 187, 0.31);
  padding-top: 12px;
  padding-bottom: 22px;
  border-radius: 0 0 5px 5px;
}
.FingerprintModal .cardBox1 .card-footer {
  background-color: RGBA(187, 187, 187, 0.31);
  padding-bottom: 22px;
}
.FingerprintModal .cardBox1 .box1entry {
  border-radius: 5px;
  background-image: linear-gradient(to bottom, #001d3b, #0f77bd);
  padding: 13px 15px 12px 15px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 53.9px;
}
.FingerprintModal .cardBox1 .box1entry .txt1 {
  margin-right: 36px;
}
.FingerprintModal .cardBox1 .box2entry {
  margin-bottom: 0;
  margin-top: 53.6px;
}
.FingerprintModal .modal-body {
  padding-left: 15px;
  padding-right: 15px;
}

.punchesBox .punchesHeader {
  background-color: transparent;
  padding: 0;
}
.punchesBox .punchesHeader .btnClose {
  font-size: 11px;
  padding: 9px;
}
.punchesBox .punchesContent {
  padding: 15px;
  padding-top: 20px;
}

.cardBox1 .progress-0 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-0:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-0 .progress-left {
  left: 0;
}
.cardBox1 .progress-0 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-0 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-0 .progress-right {
  right: 0;
}
.cardBox1 .progress-0 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-0 1.8s linear forwards;
}
.cardBox1 .progress-0 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-0.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-0 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-0.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-1 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-1:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-1 .progress-left {
  left: 0;
}
.cardBox1 .progress-1 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-1 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-1 .progress-right {
  right: 0;
}
.cardBox1 .progress-1 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-4 1.8s linear forwards;
}
.cardBox1 .progress-1 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-1.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-1 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-1.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-2 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-2:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-2 .progress-left {
  left: 0;
}
.cardBox1 .progress-2 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-2 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-2 .progress-right {
  right: 0;
}
.cardBox1 .progress-2 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-7 1.8s linear forwards;
}
.cardBox1 .progress-2 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-2.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-2 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-2.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-3 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-3:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-3 .progress-left {
  left: 0;
}
.cardBox1 .progress-3 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-3 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-3 .progress-right {
  right: 0;
}
.cardBox1 .progress-3 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-11 1.8s linear forwards;
}
.cardBox1 .progress-3 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-3.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-3 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-3.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-4 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-4:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-4 .progress-left {
  left: 0;
}
.cardBox1 .progress-4 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-4 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-4 .progress-right {
  right: 0;
}
.cardBox1 .progress-4 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-14 1.8s linear forwards;
}
.cardBox1 .progress-4 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-4.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-4 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-4.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-5 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-5:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-5 .progress-left {
  left: 0;
}
.cardBox1 .progress-5 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-5 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-5 .progress-right {
  right: 0;
}
.cardBox1 .progress-5 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-18 1.8s linear forwards;
}
.cardBox1 .progress-5 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-5.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-5 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-5.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-6 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-6:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-6 .progress-left {
  left: 0;
}
.cardBox1 .progress-6 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-6 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-6 .progress-right {
  right: 0;
}
.cardBox1 .progress-6 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-22 1.8s linear forwards;
}
.cardBox1 .progress-6 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-6.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-6 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-6.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-7 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-7:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-7 .progress-left {
  left: 0;
}
.cardBox1 .progress-7 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-7 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-7 .progress-right {
  right: 0;
}
.cardBox1 .progress-7 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-25 1.8s linear forwards;
}
.cardBox1 .progress-7 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-7.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-7 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-7.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-8 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-8:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-8 .progress-left {
  left: 0;
}
.cardBox1 .progress-8 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-8 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-8 .progress-right {
  right: 0;
}
.cardBox1 .progress-8 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-29 1.8s linear forwards;
}
.cardBox1 .progress-8 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-8.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-8 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-8.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-9 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-9:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-9 .progress-left {
  left: 0;
}
.cardBox1 .progress-9 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-9 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-9 .progress-right {
  right: 0;
}
.cardBox1 .progress-9 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-32 1.8s linear forwards;
}
.cardBox1 .progress-9 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-9.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-9 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-9.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-10 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-10:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-10 .progress-left {
  left: 0;
}
.cardBox1 .progress-10 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-10 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-10 .progress-right {
  right: 0;
}
.cardBox1 .progress-10 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-36 1.8s linear forwards;
}
.cardBox1 .progress-10 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-10.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-10 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-10.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-11 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-11:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-11 .progress-left {
  left: 0;
}
.cardBox1 .progress-11 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-11 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-11 .progress-right {
  right: 0;
}
.cardBox1 .progress-11 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-40 1.8s linear forwards;
}
.cardBox1 .progress-11 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-11.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-11 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-11.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-12 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-12:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-12 .progress-left {
  left: 0;
}
.cardBox1 .progress-12 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-12 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-12 .progress-right {
  right: 0;
}
.cardBox1 .progress-12 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-43 1.8s linear forwards;
}
.cardBox1 .progress-12 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-12.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-12 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-12.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-13 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-13:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-13 .progress-left {
  left: 0;
}
.cardBox1 .progress-13 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-13 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-13 .progress-right {
  right: 0;
}
.cardBox1 .progress-13 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-47 1.8s linear forwards;
}
.cardBox1 .progress-13 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-13.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-13 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-13.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-14 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-14:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-14 .progress-left {
  left: 0;
}
.cardBox1 .progress-14 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-14 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-14 .progress-right {
  right: 0;
}
.cardBox1 .progress-14 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-50 1.8s linear forwards;
}
.cardBox1 .progress-14 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-14.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-14 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-14.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-15 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-15:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-15 .progress-left {
  left: 0;
}
.cardBox1 .progress-15 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-15 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-15 .progress-right {
  right: 0;
}
.cardBox1 .progress-15 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-54 1.8s linear forwards;
}
.cardBox1 .progress-15 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-15.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-15 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-15.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-16 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-16:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-16 .progress-left {
  left: 0;
}
.cardBox1 .progress-16 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-16 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-16 .progress-right {
  right: 0;
}
.cardBox1 .progress-16 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-58 1.8s linear forwards;
}
.cardBox1 .progress-16 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-16.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-16 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-16.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-17 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-17:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-17 .progress-left {
  left: 0;
}
.cardBox1 .progress-17 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-17 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-17 .progress-right {
  right: 0;
}
.cardBox1 .progress-17 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-61 1.8s linear forwards;
}
.cardBox1 .progress-17 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-17.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-17 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-17.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-18 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-18:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-18 .progress-left {
  left: 0;
}
.cardBox1 .progress-18 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-18 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-18 .progress-right {
  right: 0;
}
.cardBox1 .progress-18 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-65 1.8s linear forwards;
}
.cardBox1 .progress-18 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-18.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-18 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-18.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-19 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-19:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-19 .progress-left {
  left: 0;
}
.cardBox1 .progress-19 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-19 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-19 .progress-right {
  right: 0;
}
.cardBox1 .progress-19 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-68 1.8s linear forwards;
}
.cardBox1 .progress-19 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-19.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-19 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-19.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-20 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-20:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-20 .progress-left {
  left: 0;
}
.cardBox1 .progress-20 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-20 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-20 .progress-right {
  right: 0;
}
.cardBox1 .progress-20 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-72 1.8s linear forwards;
}
.cardBox1 .progress-20 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-20.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-20 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-20.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-21 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-21:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-21 .progress-left {
  left: 0;
}
.cardBox1 .progress-21 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-21 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-21 .progress-right {
  right: 0;
}
.cardBox1 .progress-21 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-76 1.8s linear forwards;
}
.cardBox1 .progress-21 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-21.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-21 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-21.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-22 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-22:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-22 .progress-left {
  left: 0;
}
.cardBox1 .progress-22 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-22 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-22 .progress-right {
  right: 0;
}
.cardBox1 .progress-22 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-79 1.8s linear forwards;
}
.cardBox1 .progress-22 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-22.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-22 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-22.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-23 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-23:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-23 .progress-left {
  left: 0;
}
.cardBox1 .progress-23 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-23 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-23 .progress-right {
  right: 0;
}
.cardBox1 .progress-23 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-83 1.8s linear forwards;
}
.cardBox1 .progress-23 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-23.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-23 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-23.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-24 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-24:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-24 .progress-left {
  left: 0;
}
.cardBox1 .progress-24 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-24 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-24 .progress-right {
  right: 0;
}
.cardBox1 .progress-24 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-86 1.8s linear forwards;
}
.cardBox1 .progress-24 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-24.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-24 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-24.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-25 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-25:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-25 .progress-left {
  left: 0;
}
.cardBox1 .progress-25 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-25 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-25 .progress-right {
  right: 0;
}
.cardBox1 .progress-25 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-90 1.8s linear forwards;
}
.cardBox1 .progress-25 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-25.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-25 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-25.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-26 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-26:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-26 .progress-left {
  left: 0;
}
.cardBox1 .progress-26 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-26 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-26 .progress-right {
  right: 0;
}
.cardBox1 .progress-26 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-94 1.8s linear forwards;
}
.cardBox1 .progress-26 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-26.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-26 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-26.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-27 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-27:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-27 .progress-left {
  left: 0;
}
.cardBox1 .progress-27 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-27 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-27 .progress-right {
  right: 0;
}
.cardBox1 .progress-27 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-97 1.8s linear forwards;
}
.cardBox1 .progress-27 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-27.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-27 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-27.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-28 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-28:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-28 .progress-left {
  left: 0;
}
.cardBox1 .progress-28 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-28 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-28 .progress-right {
  right: 0;
}
.cardBox1 .progress-28 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-101 1.8s linear forwards;
}
.cardBox1 .progress-28 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-28.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-28 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-28.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-29 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-29:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-29 .progress-left {
  left: 0;
}
.cardBox1 .progress-29 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-29 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-29 .progress-right {
  right: 0;
}
.cardBox1 .progress-29 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-104 1.8s linear forwards;
}
.cardBox1 .progress-29 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-29.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-29 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-29.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-30 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-30:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-30 .progress-left {
  left: 0;
}
.cardBox1 .progress-30 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-30 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-30 .progress-right {
  right: 0;
}
.cardBox1 .progress-30 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-108 1.8s linear forwards;
}
.cardBox1 .progress-30 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-30.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-30 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-30.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-31 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-31:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-31 .progress-left {
  left: 0;
}
.cardBox1 .progress-31 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-31 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-31 .progress-right {
  right: 0;
}
.cardBox1 .progress-31 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-112 1.8s linear forwards;
}
.cardBox1 .progress-31 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-31.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-31 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-31.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-32 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-32:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-32 .progress-left {
  left: 0;
}
.cardBox1 .progress-32 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-32 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-32 .progress-right {
  right: 0;
}
.cardBox1 .progress-32 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-115 1.8s linear forwards;
}
.cardBox1 .progress-32 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-32.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-32 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-32.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-33 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-33:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-33 .progress-left {
  left: 0;
}
.cardBox1 .progress-33 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-33 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-33 .progress-right {
  right: 0;
}
.cardBox1 .progress-33 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-119 1.8s linear forwards;
}
.cardBox1 .progress-33 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-33.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-33 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-33.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-34 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-34:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-34 .progress-left {
  left: 0;
}
.cardBox1 .progress-34 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-34 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-34 .progress-right {
  right: 0;
}
.cardBox1 .progress-34 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-122 1.8s linear forwards;
}
.cardBox1 .progress-34 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-34.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-34 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-34.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-35 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-35:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-35 .progress-left {
  left: 0;
}
.cardBox1 .progress-35 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-35 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-35 .progress-right {
  right: 0;
}
.cardBox1 .progress-35 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-126 1.8s linear forwards;
}
.cardBox1 .progress-35 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-35.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-35 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-35.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-36 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-36:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-36 .progress-left {
  left: 0;
}
.cardBox1 .progress-36 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-36 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-36 .progress-right {
  right: 0;
}
.cardBox1 .progress-36 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-130 1.8s linear forwards;
}
.cardBox1 .progress-36 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-36.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-36 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-36.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-37 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-37:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-37 .progress-left {
  left: 0;
}
.cardBox1 .progress-37 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-37 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-37 .progress-right {
  right: 0;
}
.cardBox1 .progress-37 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-133 1.8s linear forwards;
}
.cardBox1 .progress-37 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-37.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-37 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-37.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-38 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-38:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-38 .progress-left {
  left: 0;
}
.cardBox1 .progress-38 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-38 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-38 .progress-right {
  right: 0;
}
.cardBox1 .progress-38 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-137 1.8s linear forwards;
}
.cardBox1 .progress-38 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-38.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-38 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-38.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-39 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-39:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-39 .progress-left {
  left: 0;
}
.cardBox1 .progress-39 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-39 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-39 .progress-right {
  right: 0;
}
.cardBox1 .progress-39 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-140 1.8s linear forwards;
}
.cardBox1 .progress-39 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-39.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-39 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-39.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-40 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-40:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-40 .progress-left {
  left: 0;
}
.cardBox1 .progress-40 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-40 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-40 .progress-right {
  right: 0;
}
.cardBox1 .progress-40 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-144 1.8s linear forwards;
}
.cardBox1 .progress-40 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-40.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-40 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-40.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-41 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-41:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-41 .progress-left {
  left: 0;
}
.cardBox1 .progress-41 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-41 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-41 .progress-right {
  right: 0;
}
.cardBox1 .progress-41 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-148 1.8s linear forwards;
}
.cardBox1 .progress-41 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-41.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-41 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-41.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-42 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-42:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-42 .progress-left {
  left: 0;
}
.cardBox1 .progress-42 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-42 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-42 .progress-right {
  right: 0;
}
.cardBox1 .progress-42 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-151 1.8s linear forwards;
}
.cardBox1 .progress-42 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-42.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-42 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-42.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-43 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-43:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-43 .progress-left {
  left: 0;
}
.cardBox1 .progress-43 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-43 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-43 .progress-right {
  right: 0;
}
.cardBox1 .progress-43 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-155 1.8s linear forwards;
}
.cardBox1 .progress-43 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-43.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-43 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-43.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-44 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-44:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-44 .progress-left {
  left: 0;
}
.cardBox1 .progress-44 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-44 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-44 .progress-right {
  right: 0;
}
.cardBox1 .progress-44 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-158 1.8s linear forwards;
}
.cardBox1 .progress-44 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-44.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-44 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-44.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-45 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-45:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-45 .progress-left {
  left: 0;
}
.cardBox1 .progress-45 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-45 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-45 .progress-right {
  right: 0;
}
.cardBox1 .progress-45 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-162 1.8s linear forwards;
}
.cardBox1 .progress-45 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-45.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-45 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-45.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-46 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-46:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-46 .progress-left {
  left: 0;
}
.cardBox1 .progress-46 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-46 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-46 .progress-right {
  right: 0;
}
.cardBox1 .progress-46 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-166 1.8s linear forwards;
}
.cardBox1 .progress-46 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-46.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-46 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-46.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-47 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-47:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-47 .progress-left {
  left: 0;
}
.cardBox1 .progress-47 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-47 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-47 .progress-right {
  right: 0;
}
.cardBox1 .progress-47 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-169 1.8s linear forwards;
}
.cardBox1 .progress-47 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-47.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-47 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-47.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-48 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-48:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-48 .progress-left {
  left: 0;
}
.cardBox1 .progress-48 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-48 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-48 .progress-right {
  right: 0;
}
.cardBox1 .progress-48 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-173 1.8s linear forwards;
}
.cardBox1 .progress-48 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-48.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-48 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-48.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-49 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-49:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-49 .progress-left {
  left: 0;
}
.cardBox1 .progress-49 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-49 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-49 .progress-right {
  right: 0;
}
.cardBox1 .progress-49 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-176 1.8s linear forwards;
}
.cardBox1 .progress-49 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-49.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-49 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-49.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-50 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-50:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-50 .progress-left {
  left: 0;
}
.cardBox1 .progress-50 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-50 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-50 .progress-right {
  right: 0;
}
.cardBox1 .progress-50 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-50 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-50.blue .progress-left .progress-bar {
  animation: loading-0 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-50 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-50.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-51 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-51:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-51 .progress-left {
  left: 0;
}
.cardBox1 .progress-51 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-51 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-51 .progress-right {
  right: 0;
}
.cardBox1 .progress-51 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-51 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-51.blue .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-51 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-51.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-52 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-52:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-52 .progress-left {
  left: 0;
}
.cardBox1 .progress-52 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-52 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-52 .progress-right {
  right: 0;
}
.cardBox1 .progress-52 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-52 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-52.blue .progress-left .progress-bar {
  animation: loading-7 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-52 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-52.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-53 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-53:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-53 .progress-left {
  left: 0;
}
.cardBox1 .progress-53 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-53 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-53 .progress-right {
  right: 0;
}
.cardBox1 .progress-53 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-53 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-53.blue .progress-left .progress-bar {
  animation: loading-11 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-53 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-53.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-54 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-54:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-54 .progress-left {
  left: 0;
}
.cardBox1 .progress-54 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-54 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-54 .progress-right {
  right: 0;
}
.cardBox1 .progress-54 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-54 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-54.blue .progress-left .progress-bar {
  animation: loading-14 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-54 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-54.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-55 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-55:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-55 .progress-left {
  left: 0;
}
.cardBox1 .progress-55 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-55 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-55 .progress-right {
  right: 0;
}
.cardBox1 .progress-55 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-55 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-55.blue .progress-left .progress-bar {
  animation: loading-18 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-55 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-55.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-56 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-56:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-56 .progress-left {
  left: 0;
}
.cardBox1 .progress-56 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-56 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-56 .progress-right {
  right: 0;
}
.cardBox1 .progress-56 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-56 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-56.blue .progress-left .progress-bar {
  animation: loading-22 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-56 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-56.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-57 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-57:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-57 .progress-left {
  left: 0;
}
.cardBox1 .progress-57 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-57 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-57 .progress-right {
  right: 0;
}
.cardBox1 .progress-57 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-57 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-57.blue .progress-left .progress-bar {
  animation: loading-25 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-57 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-57.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-58 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-58:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-58 .progress-left {
  left: 0;
}
.cardBox1 .progress-58 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-58 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-58 .progress-right {
  right: 0;
}
.cardBox1 .progress-58 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-58 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-58.blue .progress-left .progress-bar {
  animation: loading-29 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-58 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-58.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-59 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-59:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-59 .progress-left {
  left: 0;
}
.cardBox1 .progress-59 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-59 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-59 .progress-right {
  right: 0;
}
.cardBox1 .progress-59 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-59 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-59.blue .progress-left .progress-bar {
  animation: loading-32 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-59 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-59.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-60 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-60:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-60 .progress-left {
  left: 0;
}
.cardBox1 .progress-60 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-60 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-60 .progress-right {
  right: 0;
}
.cardBox1 .progress-60 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-60 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-60.blue .progress-left .progress-bar {
  animation: loading-36 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-60 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-60.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-61 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-61:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-61 .progress-left {
  left: 0;
}
.cardBox1 .progress-61 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-61 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-61 .progress-right {
  right: 0;
}
.cardBox1 .progress-61 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-61 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-61.blue .progress-left .progress-bar {
  animation: loading-40 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-61 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-61.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-62 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-62:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-62 .progress-left {
  left: 0;
}
.cardBox1 .progress-62 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-62 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-62 .progress-right {
  right: 0;
}
.cardBox1 .progress-62 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-62 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-62.blue .progress-left .progress-bar {
  animation: loading-43 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-62 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-62.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-63 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-63:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-63 .progress-left {
  left: 0;
}
.cardBox1 .progress-63 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-63 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-63 .progress-right {
  right: 0;
}
.cardBox1 .progress-63 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-63 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-63.blue .progress-left .progress-bar {
  animation: loading-47 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-63 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-63.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-64 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-64:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-64 .progress-left {
  left: 0;
}
.cardBox1 .progress-64 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-64 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-64 .progress-right {
  right: 0;
}
.cardBox1 .progress-64 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-64 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-64.blue .progress-left .progress-bar {
  animation: loading-50 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-64 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-64.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-65 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-65:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-65 .progress-left {
  left: 0;
}
.cardBox1 .progress-65 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-65 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-65 .progress-right {
  right: 0;
}
.cardBox1 .progress-65 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-65 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-65.blue .progress-left .progress-bar {
  animation: loading-54 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-65 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-65.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-66 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-66:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-66 .progress-left {
  left: 0;
}
.cardBox1 .progress-66 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-66 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-66 .progress-right {
  right: 0;
}
.cardBox1 .progress-66 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-66 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-66.blue .progress-left .progress-bar {
  animation: loading-58 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-66 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-66.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-67 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-67:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-67 .progress-left {
  left: 0;
}
.cardBox1 .progress-67 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-67 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-67 .progress-right {
  right: 0;
}
.cardBox1 .progress-67 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-67 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-67.blue .progress-left .progress-bar {
  animation: loading-61 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-67 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-67.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-68 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-68:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-68 .progress-left {
  left: 0;
}
.cardBox1 .progress-68 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-68 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-68 .progress-right {
  right: 0;
}
.cardBox1 .progress-68 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-68 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-68.blue .progress-left .progress-bar {
  animation: loading-65 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-68 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-68.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-69 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-69:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-69 .progress-left {
  left: 0;
}
.cardBox1 .progress-69 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-69 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-69 .progress-right {
  right: 0;
}
.cardBox1 .progress-69 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-69 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-69.blue .progress-left .progress-bar {
  animation: loading-68 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-69 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-69.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-70 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-70:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-70 .progress-left {
  left: 0;
}
.cardBox1 .progress-70 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-70 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-70 .progress-right {
  right: 0;
}
.cardBox1 .progress-70 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-70 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-70.blue .progress-left .progress-bar {
  animation: loading-72 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-70 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-70.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-71 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-71:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-71 .progress-left {
  left: 0;
}
.cardBox1 .progress-71 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-71 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-71 .progress-right {
  right: 0;
}
.cardBox1 .progress-71 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-71 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-71.blue .progress-left .progress-bar {
  animation: loading-76 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-71 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-71.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-72 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-72:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-72 .progress-left {
  left: 0;
}
.cardBox1 .progress-72 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-72 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-72 .progress-right {
  right: 0;
}
.cardBox1 .progress-72 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-72 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-72.blue .progress-left .progress-bar {
  animation: loading-79 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-72 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-72.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-73 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-73:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-73 .progress-left {
  left: 0;
}
.cardBox1 .progress-73 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-73 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-73 .progress-right {
  right: 0;
}
.cardBox1 .progress-73 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-73 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-73.blue .progress-left .progress-bar {
  animation: loading-83 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-73 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-73.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-74 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-74:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-74 .progress-left {
  left: 0;
}
.cardBox1 .progress-74 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-74 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-74 .progress-right {
  right: 0;
}
.cardBox1 .progress-74 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-74 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-74.blue .progress-left .progress-bar {
  animation: loading-86 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-74 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-74.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-75 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-75:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-75 .progress-left {
  left: 0;
}
.cardBox1 .progress-75 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-75 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-75 .progress-right {
  right: 0;
}
.cardBox1 .progress-75 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-75 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-75.blue .progress-left .progress-bar {
  animation: loading-90 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-75 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-75.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-76 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-76:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-76 .progress-left {
  left: 0;
}
.cardBox1 .progress-76 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-76 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-76 .progress-right {
  right: 0;
}
.cardBox1 .progress-76 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-76 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-76.blue .progress-left .progress-bar {
  animation: loading-94 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-76 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-76.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-77 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-77:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-77 .progress-left {
  left: 0;
}
.cardBox1 .progress-77 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-77 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-77 .progress-right {
  right: 0;
}
.cardBox1 .progress-77 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-77 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-77.blue .progress-left .progress-bar {
  animation: loading-97 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-77 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-77.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-78 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-78:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-78 .progress-left {
  left: 0;
}
.cardBox1 .progress-78 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-78 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-78 .progress-right {
  right: 0;
}
.cardBox1 .progress-78 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-78 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-78.blue .progress-left .progress-bar {
  animation: loading-101 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-78 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-78.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-79 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-79:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-79 .progress-left {
  left: 0;
}
.cardBox1 .progress-79 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-79 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-79 .progress-right {
  right: 0;
}
.cardBox1 .progress-79 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-79 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-79.blue .progress-left .progress-bar {
  animation: loading-104 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-79 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-79.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-80 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-80:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-80 .progress-left {
  left: 0;
}
.cardBox1 .progress-80 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-80 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-80 .progress-right {
  right: 0;
}
.cardBox1 .progress-80 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-80 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-80.blue .progress-left .progress-bar {
  animation: loading-108 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-80 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-80.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-81 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-81:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-81 .progress-left {
  left: 0;
}
.cardBox1 .progress-81 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-81 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-81 .progress-right {
  right: 0;
}
.cardBox1 .progress-81 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-81 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-81.blue .progress-left .progress-bar {
  animation: loading-112 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-81 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-81.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-82 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-82:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-82 .progress-left {
  left: 0;
}
.cardBox1 .progress-82 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-82 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-82 .progress-right {
  right: 0;
}
.cardBox1 .progress-82 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-82 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-82.blue .progress-left .progress-bar {
  animation: loading-115 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-82 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-82.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-83 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-83:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-83 .progress-left {
  left: 0;
}
.cardBox1 .progress-83 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-83 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-83 .progress-right {
  right: 0;
}
.cardBox1 .progress-83 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-83 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-83.blue .progress-left .progress-bar {
  animation: loading-119 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-83 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-83.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-84 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-84:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-84 .progress-left {
  left: 0;
}
.cardBox1 .progress-84 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-84 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-84 .progress-right {
  right: 0;
}
.cardBox1 .progress-84 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-84 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-84.blue .progress-left .progress-bar {
  animation: loading-122 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-84 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-84.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-85 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-85:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-85 .progress-left {
  left: 0;
}
.cardBox1 .progress-85 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-85 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-85 .progress-right {
  right: 0;
}
.cardBox1 .progress-85 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-85 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-85.blue .progress-left .progress-bar {
  animation: loading-126 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-85 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-85.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-86 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-86:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-86 .progress-left {
  left: 0;
}
.cardBox1 .progress-86 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-86 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-86 .progress-right {
  right: 0;
}
.cardBox1 .progress-86 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-86 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-86.blue .progress-left .progress-bar {
  animation: loading-130 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-86 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-86.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-87 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-87:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-87 .progress-left {
  left: 0;
}
.cardBox1 .progress-87 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-87 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-87 .progress-right {
  right: 0;
}
.cardBox1 .progress-87 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-87 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-87.blue .progress-left .progress-bar {
  animation: loading-133 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-87 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-87.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-88 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-88:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-88 .progress-left {
  left: 0;
}
.cardBox1 .progress-88 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-88 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-88 .progress-right {
  right: 0;
}
.cardBox1 .progress-88 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-88 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-88.blue .progress-left .progress-bar {
  animation: loading-137 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-88 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-88.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-89 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-89:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-89 .progress-left {
  left: 0;
}
.cardBox1 .progress-89 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-89 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-89 .progress-right {
  right: 0;
}
.cardBox1 .progress-89 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-89 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-89.blue .progress-left .progress-bar {
  animation: loading-140 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-89 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-89.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-90 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-90:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-90 .progress-left {
  left: 0;
}
.cardBox1 .progress-90 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-90 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-90 .progress-right {
  right: 0;
}
.cardBox1 .progress-90 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-90 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-90.blue .progress-left .progress-bar {
  animation: loading-144 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-90 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-90.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-91 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-91:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-91 .progress-left {
  left: 0;
}
.cardBox1 .progress-91 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-91 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-91 .progress-right {
  right: 0;
}
.cardBox1 .progress-91 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-91 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-91.blue .progress-left .progress-bar {
  animation: loading-148 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-91 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-91.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-92 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-92:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-92 .progress-left {
  left: 0;
}
.cardBox1 .progress-92 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-92 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-92 .progress-right {
  right: 0;
}
.cardBox1 .progress-92 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-92 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-92.blue .progress-left .progress-bar {
  animation: loading-151 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-92 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-92.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-93 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-93:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-93 .progress-left {
  left: 0;
}
.cardBox1 .progress-93 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-93 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-93 .progress-right {
  right: 0;
}
.cardBox1 .progress-93 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-93 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-93.blue .progress-left .progress-bar {
  animation: loading-155 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-93 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-93.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-94 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-94:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-94 .progress-left {
  left: 0;
}
.cardBox1 .progress-94 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-94 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-94 .progress-right {
  right: 0;
}
.cardBox1 .progress-94 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-94 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-94.blue .progress-left .progress-bar {
  animation: loading-158 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-94 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-94.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-95 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-95:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-95 .progress-left {
  left: 0;
}
.cardBox1 .progress-95 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-95 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-95 .progress-right {
  right: 0;
}
.cardBox1 .progress-95 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-95 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-95.blue .progress-left .progress-bar {
  animation: loading-162 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-95 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-95.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-96 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-96:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-96 .progress-left {
  left: 0;
}
.cardBox1 .progress-96 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-96 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-96 .progress-right {
  right: 0;
}
.cardBox1 .progress-96 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-96 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-96.blue .progress-left .progress-bar {
  animation: loading-166 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-96 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-96.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-97 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-97:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-97 .progress-left {
  left: 0;
}
.cardBox1 .progress-97 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-97 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-97 .progress-right {
  right: 0;
}
.cardBox1 .progress-97 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-97 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-97.blue .progress-left .progress-bar {
  animation: loading-169 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-97 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-97.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-98 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-98:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-98 .progress-left {
  left: 0;
}
.cardBox1 .progress-98 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-98 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-98 .progress-right {
  right: 0;
}
.cardBox1 .progress-98 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-98 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-98.blue .progress-left .progress-bar {
  animation: loading-173 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-98 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-98.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-99 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-99:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-99 .progress-left {
  left: 0;
}
.cardBox1 .progress-99 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-99 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-99 .progress-right {
  right: 0;
}
.cardBox1 .progress-99 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-99 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-99.blue .progress-left .progress-bar {
  animation: loading-176 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-99 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-99.blue .progress-bar {
  border-color: #647c95;
}
.cardBox1 .progress-100 {
  width: 152px;
  height: 152px !important;
  background: none;
  position: relative;
  display: inline-block;
}
.cardBox1 .progress-100:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 12px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.cardBox1 .progress-100 .progress-left {
  left: 0;
}
.cardBox1 .progress-100 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.cardBox1 .progress-100 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 12px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.cardBox1 .progress-100 .progress-right {
  right: 0;
}
.cardBox1 .progress-100 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-180 1.8s linear forwards;
}
.cardBox1 .progress-100 .progress-value {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 34px;
  color: #53a23a;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 11px;
  right: 0px;
}
.cardBox1 .progress-100.blue .progress-left .progress-bar {
  animation: loading-180 1.5s linear forwards 1.8s;
}
.cardBox1 .progress-100 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.cardBox1 .progress-100.blue .progress-bar {
  border-color: #647c95;
}

@keyframes loading-0 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
}
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
}
@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
}
@keyframes loading-6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
  }
}
@keyframes loading-7 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
  }
}
@keyframes loading-8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}
@keyframes loading-9 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(9deg);
    transform: rotate(9deg);
  }
}
@keyframes loading-10 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
}
@keyframes loading-11 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(11deg);
    transform: rotate(11deg);
  }
}
@keyframes loading-12 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
  }
}
@keyframes loading-13 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(13deg);
    transform: rotate(13deg);
  }
}
@keyframes loading-14 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(14deg);
    transform: rotate(14deg);
  }
}
@keyframes loading-15 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
}
@keyframes loading-16 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(16deg);
    transform: rotate(16deg);
  }
}
@keyframes loading-17 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(17deg);
    transform: rotate(17deg);
  }
}
@keyframes loading-18 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
  }
}
@keyframes loading-19 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(19deg);
    transform: rotate(19deg);
  }
}
@keyframes loading-20 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
}
@keyframes loading-21 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(21deg);
    transform: rotate(21deg);
  }
}
@keyframes loading-22 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(22deg);
    transform: rotate(22deg);
  }
}
@keyframes loading-23 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(23deg);
    transform: rotate(23deg);
  }
}
@keyframes loading-24 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }
}
@keyframes loading-25 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }
}
@keyframes loading-26 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(26deg);
    transform: rotate(26deg);
  }
}
@keyframes loading-27 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(27deg);
    transform: rotate(27deg);
  }
}
@keyframes loading-28 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(28deg);
    transform: rotate(28deg);
  }
}
@keyframes loading-29 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(29deg);
    transform: rotate(29deg);
  }
}
@keyframes loading-30 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
}
@keyframes loading-31 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(31deg);
    transform: rotate(31deg);
  }
}
@keyframes loading-32 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(32deg);
    transform: rotate(32deg);
  }
}
@keyframes loading-33 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(33deg);
    transform: rotate(33deg);
  }
}
@keyframes loading-34 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(34deg);
    transform: rotate(34deg);
  }
}
@keyframes loading-35 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
  }
}
@keyframes loading-36 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(36deg);
    transform: rotate(36deg);
  }
}
@keyframes loading-37 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(37deg);
    transform: rotate(37deg);
  }
}
@keyframes loading-38 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(38deg);
    transform: rotate(38deg);
  }
}
@keyframes loading-39 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(39deg);
    transform: rotate(39deg);
  }
}
@keyframes loading-40 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
  }
}
@keyframes loading-41 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(41deg);
    transform: rotate(41deg);
  }
}
@keyframes loading-42 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(42deg);
    transform: rotate(42deg);
  }
}
@keyframes loading-43 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(43deg);
    transform: rotate(43deg);
  }
}
@keyframes loading-44 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(44deg);
    transform: rotate(44deg);
  }
}
@keyframes loading-45 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
@keyframes loading-46 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(46deg);
    transform: rotate(46deg);
  }
}
@keyframes loading-47 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(47deg);
    transform: rotate(47deg);
  }
}
@keyframes loading-48 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(48deg);
    transform: rotate(48deg);
  }
}
@keyframes loading-49 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(49deg);
    transform: rotate(49deg);
  }
}
@keyframes loading-50 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
  }
}
@keyframes loading-51 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(51deg);
    transform: rotate(51deg);
  }
}
@keyframes loading-52 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(52deg);
    transform: rotate(52deg);
  }
}
@keyframes loading-53 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(53deg);
    transform: rotate(53deg);
  }
}
@keyframes loading-54 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(54deg);
    transform: rotate(54deg);
  }
}
@keyframes loading-55 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(55deg);
    transform: rotate(55deg);
  }
}
@keyframes loading-56 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(56deg);
    transform: rotate(56deg);
  }
}
@keyframes loading-57 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(57deg);
    transform: rotate(57deg);
  }
}
@keyframes loading-58 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(58deg);
    transform: rotate(58deg);
  }
}
@keyframes loading-59 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(59deg);
    transform: rotate(59deg);
  }
}
@keyframes loading-60 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
}
@keyframes loading-61 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(61deg);
    transform: rotate(61deg);
  }
}
@keyframes loading-62 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(62deg);
    transform: rotate(62deg);
  }
}
@keyframes loading-63 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(63deg);
    transform: rotate(63deg);
  }
}
@keyframes loading-64 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(64deg);
    transform: rotate(64deg);
  }
}
@keyframes loading-65 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(65deg);
    transform: rotate(65deg);
  }
}
@keyframes loading-66 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(66deg);
    transform: rotate(66deg);
  }
}
@keyframes loading-67 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(67deg);
    transform: rotate(67deg);
  }
}
@keyframes loading-68 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(68deg);
    transform: rotate(68deg);
  }
}
@keyframes loading-69 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(69deg);
    transform: rotate(69deg);
  }
}
@keyframes loading-70 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
  }
}
@keyframes loading-71 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(71deg);
    transform: rotate(71deg);
  }
}
@keyframes loading-72 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(72deg);
    transform: rotate(72deg);
  }
}
@keyframes loading-73 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(73deg);
    transform: rotate(73deg);
  }
}
@keyframes loading-74 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(74deg);
    transform: rotate(74deg);
  }
}
@keyframes loading-75 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(75deg);
    transform: rotate(75deg);
  }
}
@keyframes loading-76 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(76deg);
    transform: rotate(76deg);
  }
}
@keyframes loading-77 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(77deg);
    transform: rotate(77deg);
  }
}
@keyframes loading-78 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(78deg);
    transform: rotate(78deg);
  }
}
@keyframes loading-79 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(79deg);
    transform: rotate(79deg);
  }
}
@keyframes loading-80 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
  }
}
@keyframes loading-81 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(81deg);
    transform: rotate(81deg);
  }
}
@keyframes loading-82 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(82deg);
    transform: rotate(82deg);
  }
}
@keyframes loading-83 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(83deg);
    transform: rotate(83deg);
  }
}
@keyframes loading-84 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(84deg);
    transform: rotate(84deg);
  }
}
@keyframes loading-85 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(85deg);
    transform: rotate(85deg);
  }
}
@keyframes loading-86 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(86deg);
    transform: rotate(86deg);
  }
}
@keyframes loading-87 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(87deg);
    transform: rotate(87deg);
  }
}
@keyframes loading-88 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(88deg);
    transform: rotate(88deg);
  }
}
@keyframes loading-89 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(89deg);
    transform: rotate(89deg);
  }
}
@keyframes loading-90 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@keyframes loading-91 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(91deg);
    transform: rotate(91deg);
  }
}
@keyframes loading-92 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(92deg);
    transform: rotate(92deg);
  }
}
@keyframes loading-93 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(93deg);
    transform: rotate(93deg);
  }
}
@keyframes loading-94 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(94deg);
    transform: rotate(94deg);
  }
}
@keyframes loading-95 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(95deg);
    transform: rotate(95deg);
  }
}
@keyframes loading-96 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(96deg);
    transform: rotate(96deg);
  }
}
@keyframes loading-97 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(97deg);
    transform: rotate(97deg);
  }
}
@keyframes loading-98 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(98deg);
    transform: rotate(98deg);
  }
}
@keyframes loading-99 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(99deg);
    transform: rotate(99deg);
  }
}
@keyframes loading-100 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(100deg);
    transform: rotate(100deg);
  }
}
@keyframes loading-101 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(101deg);
    transform: rotate(101deg);
  }
}
@keyframes loading-102 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(102deg);
    transform: rotate(102deg);
  }
}
@keyframes loading-103 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(103deg);
    transform: rotate(103deg);
  }
}
@keyframes loading-104 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(104deg);
    transform: rotate(104deg);
  }
}
@keyframes loading-105 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(105deg);
    transform: rotate(105deg);
  }
}
@keyframes loading-106 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(106deg);
    transform: rotate(106deg);
  }
}
@keyframes loading-107 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(107deg);
    transform: rotate(107deg);
  }
}
@keyframes loading-108 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(108deg);
    transform: rotate(108deg);
  }
}
@keyframes loading-109 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(109deg);
    transform: rotate(109deg);
  }
}
@keyframes loading-110 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg);
  }
}
@keyframes loading-111 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(111deg);
    transform: rotate(111deg);
  }
}
@keyframes loading-112 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(112deg);
    transform: rotate(112deg);
  }
}
@keyframes loading-113 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(113deg);
    transform: rotate(113deg);
  }
}
@keyframes loading-114 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(114deg);
    transform: rotate(114deg);
  }
}
@keyframes loading-115 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(115deg);
    transform: rotate(115deg);
  }
}
@keyframes loading-116 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(116deg);
    transform: rotate(116deg);
  }
}
@keyframes loading-117 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(117deg);
    transform: rotate(117deg);
  }
}
@keyframes loading-118 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(118deg);
    transform: rotate(118deg);
  }
}
@keyframes loading-119 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(119deg);
    transform: rotate(119deg);
  }
}
@keyframes loading-120 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
  }
}
@keyframes loading-121 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(121deg);
    transform: rotate(121deg);
  }
}
@keyframes loading-122 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(122deg);
    transform: rotate(122deg);
  }
}
@keyframes loading-123 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(123deg);
    transform: rotate(123deg);
  }
}
@keyframes loading-124 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(124deg);
    transform: rotate(124deg);
  }
}
@keyframes loading-125 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(125deg);
    transform: rotate(125deg);
  }
}
@keyframes loading-126 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(126deg);
    transform: rotate(126deg);
  }
}
@keyframes loading-127 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(127deg);
    transform: rotate(127deg);
  }
}
@keyframes loading-128 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(128deg);
    transform: rotate(128deg);
  }
}
@keyframes loading-129 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(129deg);
    transform: rotate(129deg);
  }
}
@keyframes loading-130 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
  }
}
@keyframes loading-131 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(131deg);
    transform: rotate(131deg);
  }
}
@keyframes loading-132 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(132deg);
    transform: rotate(132deg);
  }
}
@keyframes loading-133 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(133deg);
    transform: rotate(133deg);
  }
}
@keyframes loading-134 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(134deg);
    transform: rotate(134deg);
  }
}
@keyframes loading-135 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
}
@keyframes loading-136 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(136deg);
    transform: rotate(136deg);
  }
}
@keyframes loading-137 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(137deg);
    transform: rotate(137deg);
  }
}
@keyframes loading-138 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(138deg);
    transform: rotate(138deg);
  }
}
@keyframes loading-139 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(139deg);
    transform: rotate(139deg);
  }
}
@keyframes loading-140 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(140deg);
    transform: rotate(140deg);
  }
}
@keyframes loading-141 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(141deg);
    transform: rotate(141deg);
  }
}
@keyframes loading-142 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(142deg);
    transform: rotate(142deg);
  }
}
@keyframes loading-143 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(143deg);
    transform: rotate(143deg);
  }
}
@keyframes loading-144 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144deg);
    transform: rotate(144deg);
  }
}
@keyframes loading-145 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(145deg);
    transform: rotate(145deg);
  }
}
@keyframes loading-146 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(146deg);
    transform: rotate(146deg);
  }
}
@keyframes loading-147 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(147deg);
    transform: rotate(147deg);
  }
}
@keyframes loading-148 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(148deg);
    transform: rotate(148deg);
  }
}
@keyframes loading-149 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(149deg);
    transform: rotate(149deg);
  }
}
@keyframes loading-150 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
  }
}
@keyframes loading-151 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(151deg);
    transform: rotate(151deg);
  }
}
@keyframes loading-152 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(152deg);
    transform: rotate(152deg);
  }
}
@keyframes loading-153 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(153deg);
    transform: rotate(153deg);
  }
}
@keyframes loading-154 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(154deg);
    transform: rotate(154deg);
  }
}
@keyframes loading-155 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(155deg);
    transform: rotate(155deg);
  }
}
@keyframes loading-156 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(156deg);
    transform: rotate(156deg);
  }
}
@keyframes loading-157 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(157deg);
    transform: rotate(157deg);
  }
}
@keyframes loading-158 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(158deg);
    transform: rotate(158deg);
  }
}
@keyframes loading-159 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(159deg);
    transform: rotate(159deg);
  }
}
@keyframes loading-160 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(160deg);
    transform: rotate(160deg);
  }
}
@keyframes loading-161 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(161deg);
    transform: rotate(161deg);
  }
}
@keyframes loading-162 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(162deg);
    transform: rotate(162deg);
  }
}
@keyframes loading-163 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(163deg);
    transform: rotate(163deg);
  }
}
@keyframes loading-164 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(164deg);
    transform: rotate(164deg);
  }
}
@keyframes loading-165 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(165deg);
    transform: rotate(165deg);
  }
}
@keyframes loading-166 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(166deg);
    transform: rotate(166deg);
  }
}
@keyframes loading-167 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(167deg);
    transform: rotate(167deg);
  }
}
@keyframes loading-168 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(168deg);
    transform: rotate(168deg);
  }
}
@keyframes loading-169 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(169deg);
    transform: rotate(169deg);
  }
}
@keyframes loading-170 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(170deg);
    transform: rotate(170deg);
  }
}
@keyframes loading-171 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(171deg);
    transform: rotate(171deg);
  }
}
@keyframes loading-172 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(172deg);
    transform: rotate(172deg);
  }
}
@keyframes loading-173 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(173deg);
    transform: rotate(173deg);
  }
}
@keyframes loading-174 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(174deg);
    transform: rotate(174deg);
  }
}
@keyframes loading-175 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(175deg);
    transform: rotate(175deg);
  }
}
@keyframes loading-176 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(176deg);
    transform: rotate(176deg);
  }
}
@keyframes loading-177 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(177deg);
    transform: rotate(177deg);
  }
}
@keyframes loading-178 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(178deg);
    transform: rotate(178deg);
  }
}
@keyframes loading-179 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(179deg);
    transform: rotate(179deg);
  }
}
@keyframes loading-180 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
.box3details {
  margin-top: 15px;
  padding: 13.9px 15px;
  background-color: #fff;
}
.box3details .txt1 {
  font-size: 18px;
  font-weight: bold;
  color: #0f77bd;
  margin-bottom: 6px;
}
.box3details .txt2 {
  font-size: 16px;
  font-weight: bold;
  color: #5fb544;
}

.box3innerDetails {
  border-right: solid 1px #d4d1d1;
  border-left: solid 1px #d4d1d1;
}

.cardFPAttendance {
  box-shadow: none;
  margin-bottom: 0;
}
.cardFPAttendance .card-footer {
  padding-bottom: 13.9px;
}

.txtAddPunch {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  margin-bottom: 10px;
}

.addPunchIcon {
  color: #0f77bd;
  font-size: 23px;
  margin-top: 4px;
  cursor: pointer;
  display: inline-block;
}

.btnAddPunch {
  max-width: 260px !important;
  margin-top: 9px;
}

.bgOrange {
  background-color: #FF8800;
}

.bgRed {
  background-color: #ff0c0c;
}

.bgDarkBlue {
  background-color: #183656;
}

.bgBlue {
  background-color: #0f77bd;
}

#addFingerprint {
  display: none;
}

.settingCard {
  margin-top: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  border: none;
}
.settingCard .card-header {
  padding: 20px 15.7px 17px 15.7px;
  background-color: transparent;
  border: none;
}
.settingCard .card-body {
  padding: 0 15.7px 20px 15.7px;
  font-size: 18px;
}
.settingCard .titleSetting {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: bold;
  color: #0f77bd;
  margin-left: 15px;
}
.settingCard .txt1 {
  color: #000;
  margin-bottom: 13px;
}
.settingCard .txt2 {
  color: #2d2d2d;
  margin-bottom: 13px;
}

.content {
  background-image: linear-gradient(269deg, #cfe2f6 100%, #fff -1%);
  padding-top: 2%;
  padding-bottom: 2%;
  height: 100vh;
}

.logoBox {
  margin-bottom: 2%;
}
.logoBox .txt {
  font-size: 30px;
  font-weight: bold;
  color: #1e293b;
  margin-top: 7%;
}
.logoBox img {
  width: 185.4px;
  height: 131px;
}

.loginDetails {
  padding-right: 14%;
  padding-left: 14%;
}

.formBox {
  margin-bottom: 13px;
}
.formBox .txt1 {
  font-size: 16px;
  font-weight: bold;
  color: #606062;
  margin-bottom: 6px;
}
.formBox .txt2 {
  font-size: 12px;
  font-weight: bold;
  color: #647c95;
  margin-top: 4.6px;
}
.formBox .box1 {
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
}

.p-viewer {
  float: right;
  margin-top: -30px;
  position: relative;
  z-index: 1;
  right: 17px;
  cursor: pointer;
}
.p-viewer .fa-eye {
  color: #606062;
}

.btnLogin {
  margin-top: 27px;
}
.btnLogin button {
  border-radius: 15px;
  background-color: #5fb544;
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  border: solid 1px #5fb544;
}
.btnLogin button:hover {
  border-radius: 15px;
  border: solid 1px #5fb544;
  background-color: #e1e1e1;
}

.welcomeBox {
  margin-bottom: 10px;
}
.welcomeBox h1 {
  font-size: 50px;
  font-weight: bold;
  color: #183656;
  margin-bottom: 12px;
}
.welcomeBox .txt1 {
  font-size: 18px;
  color: #183656;
}

.demoBox {
  margin-bottom: 25px;
}
.demoBox .txt {
  margin-bottom: 30px;
  font-size: 27px;
  font-weight: bold;
  color: #1e293b;
}
.demoBox button {
  border-radius: 30px;
  box-shadow: 2px 2px 20px 0 rgba(15, 119, 189, 0.78);
  background-color: #0f77bd;
  padding: 15px;
  width: 100%;
  max-width: 278px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  border: solid 1px #0f77bd;
}
.demoBox button:hover {
  border: solid 1px #5fb544;
  background-color: #e1e1e1;
  color: #0f77bd;
}

.welcomeImg img {
  width: 100%;
  height: 340px;
}

.container1 {
  padding-right: 15px;
  padding-left: 15px;
}

.addFingerprintBox {
  margin-bottom: 19px;
}

.resDashBox {
  display: none;
}

.loaderModal {
  opacity: 0.7;
  background-color: #030303;
}
.loaderModal .modal-content {
  background-color: transparent;
  box-shadow: none;
}
.loaderModal .modal-content .card {
  background-color: transparent;
}

.loaderLogo {
  margin-bottom: 74.1px;
}
.loaderLogo img {
  width: 197px;
  height: 139.2px;
}

.loaderBox {
  height: 527px;
}

.spinnerBox .dot {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 20px;
  animation: scaling 2.5s ease-in-out infinite;
}
.spinnerBox .dot:nth-child(0) {
  animation-delay: 0s;
}
.spinnerBox .dot:nth-child(1) {
  animation-delay: 0.2s;
}
.spinnerBox .dot:nth-child(2) {
  animation-delay: 0.4s;
}
.spinnerBox .dot:nth-child(3) {
  animation-delay: 0.6s;
}
.spinnerBox .dot:nth-child(4) {
  animation-delay: 0.8s;
}
.spinnerBox .dot:nth-child(5) {
  animation-delay: 1s;
}
.spinnerBox .dot:nth-child(6) {
  animation-delay: 1.2s;
}
.spinnerBox .dot:nth-child(7) {
  animation-delay: 1.4s;
}
.spinnerBox .dot:last-child {
  margin-right: 0;
}
@keyframes scaling {
  0%, 100% {
    transform: scale(0.2);
    background-color: #3f1e87;
  }
  40% {
    transform: scale(1.4);
    background-color: #c2a9f9;
  }
  50% {
    transform: scale(1.4);
    background-color: #6543ae;
  }
}

.keyWordItem22 {
  justify-content: center;
}

.daysOffCard {
  margin-bottom: 24px;
  padding: 0 14.6px 0 16px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.32);
}
.daysOffCard .card-header {
  border-bottom: 1px solid #5fb544;
  padding: 26px 0 24px 0;
}
.daysOffCard .card-header .hash {
  font-size: 18px;
}
.daysOffCard .card-header .edit_content .btn_edit {
  border-radius: 4px;
  background-color: #449b29;
  color: #fff;
  width: 29px;
  height: 25px;
  border: none;
}
.daysOffCard .card-header .edit_content .btn_delete {
  background-color: #df1920;
  margin-left: 10px;
}
.daysOffCard .card-body {
  padding: 19px 0 30px 0;
}
.daysOffCard .card-body .box1 {
  margin-bottom: 15px;
}
.daysOffCard .card-body .box1:last-child {
  margin-bottom: 0;
}
.daysOffCard .card-body .box1 .title {
  font-size: 16px;
  white-space: nowrap;
}
.daysOffCard .card-body .box1 .title2 {
  margin-bottom: 14.5px;
}

.dayOffModal {
  border-radius: 15px;
}
.dayOffModal .modal-header {
  padding: 30px 15px 0 15px;
}
.dayOffModal .modal-header h5 {
  padding-left: 15px;
}
.dayOffModal .modal-header .closeBtn {
  margin-top: -20px;
}
.dayOffModal .modal-body {
  padding-top: 40px;
  padding-bottom: 0;
}
.selectOption {
  box-shadow: none;
}

.section-list h3 {
  margin-bottom: 15px;
}
.section-list li {
  padding-left: 16.4px;
  margin-bottom: 20px;
  font-weight: normal !important;
}
.section-list li:last-child {
  margin-bottom: 0;
}
.section-list li .listing {
  display: inline-block;
  width: 8px;
  border: solid 1px #df1920;
  height: 8px;
  margin-right: 5.6px;
  border-radius: 50%;
}

.accordItem {
  border: none;
  background-color: #fff;
  border-radius: 0 !important;
}
.accordItem:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.accordItem .accordion-body {
  padding-top: 27px;
}
.accordItem .accordion-header {
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.32);
}
.accordItem .accordion-button {
  height: 80px;
  position: relative;
  border: none;
}
.accordItem .accordion-button:after {
  content: url(../../assets/img/plusIcon.svg) !important;
  background-image: none;
  position: absolute;
  right: 16px;
  top: 32%;
}
.accordItem .accordion-button:not(.collapsed) {
  background-color: #0f77bd;
}
.accordItem .accordion-button:not(.collapsed):after {
  background-image: none;
  content: url(../../assets/img/minusIcon.svg) !important;
  position: absolute;
  right: -20px;
  top: 80%;
}
.accordItem .accordion-button:not(.collapsed) .num {
  color: #fff;
}
.accordItem .accordion-button:not(.collapsed) .num2 {
  color: #f6fbff;
}
.accordItem .accordion-button:not(.collapsed) .title {
  color: #f6fbff;
}
.accordItem .accordion-button:focus {
  box-shadow: none;
}
.accordItem .accordion-button:not(.collapsed) {
  box-shadow: none;
}
.accordItem .accordion-button .num {
  font-size: 18px;
}
.accordItem .accordion-button .num2 {
  font-size: 16px;
  margin-left: 20px;
  margin-right: 30px;
}
.accordItem:first-of-type .accordion-button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.secBoxDetails {
  margin-bottom: 10px;
  border-radius: 15px;
  border: solid 1px #61a5d3;
}
.secBoxDetails .card-header {
  padding: 15px 15.4px 17px 15.4px;
}
.secBoxDetails .card-header h4 {
  font-size: 16px;
  font-weight: bold;
  color: #449b29;
  margin-bottom: 0;
}
.secBoxDetails .card-header .edit {
  color: #449b29;
  font-size: 29px;
}
.secBoxDetails .card-header button {
  background-color: transparent;
}
.secBoxDetails .card-body {
  padding: 0 15.4px 16px 15.4px;
}

.accordionBox {
  margin-bottom: 10px;
}

.designationBox {
  max-width: 552px;
}
.designationBox .modal-title {
  color: #0f77bd;
}
.designationBox .modal-body {
  padding-top: 25px;
}
.designationBox .modal-body ul li {
  border-bottom: solid 1px #e5e5e5;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.designationBox .modal-body ul li:last-child {
  margin-bottom: 0;
}
.designationBox .modal-body .line {
  border-bottom: solid 1px #e5e5e5;
  margin-top: 27.5px;
}
.designationBox .modal-body .addDesignation {
  margin-top: 25px;
}
.designationBox .modal-body .addDesignation .add {
  color: #5fb544;
}
.designationBox .modal-body .addDesignation .txt {
  font-size: 16px;
  font-weight: bold;
  margin-left: 10px;
  color: #0f77bd;
}
.designationBox .modal-body .addedField {
  margin-top: 30.5px;
}
.designationBox .modal-body h6 {
  font-size: 20px;
  font-weight: bold;
  color: #5fb544;
  margin-bottom: 27.5px;
}
.designationBox .modal-body .settingBox {
  white-space: nowrap;
}
.designationBox .modal-body .settingBox .edit {
  margin-right: 10.6px;
}
.designationBox .modal-body .settingBox button {
  border: none;
  background-color: transparent;
  padding: 0;
}
.designationBox .modal-body .settingBox button .delete {
  color: #0f77bd;
}
.designationBox .modal-footer {
  padding-top: 60px;
  padding-bottom: 58px;
}

.listIcon {
  border: none;
  background-color: transparent;
  color: #7bbbe6;
  padding: 1px 5px;
  font-size: 22px;
  border-radius: 5px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
}

.gridIcon {
  color: #0f77bd;
  margin-right: 5px;
}

.filter1box {
  margin-top: 30px;
}
.filter1box h4 {
  margin-bottom: 18px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.filter1box .selectedStatus {
  position: absolute;
  margin: 3.2px;
}
.filter1box img {
  position: relative;
}

.hrVacBox .card-header {
  padding-right: 30.5px;
}
.hrVacBox .card-header .ellipsisIcon {
  font-size: 24px;
  color: #0f77bd;
  margin-top: 7px;
}
.hrVacBox .card-body {
  padding: 0 26.7px 6px 30px;
}
.hrVacBox .card-body .name {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.hrVacBox .card-body .title {
  font-size: 16px;
  font-weight: bold;
  color: #0f77bd;
}
.hrVacBox .card-body .description {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.hrVacBox .card-body .hrVac {
  margin-bottom: 15px;
}
.hrVacBox .card-footer {
  padding: 0 26.7px 3.5px 30px;
  position: relative;
}
.keyWordItem3 .keyWordItem .form-check-input {
  z-index: 9;
  position: relative;
  width: 12px;
  height: 12px;
  left: 28px;
  top: 4px;
}
.keyWordItem3 .keyWordItem .form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.keyWordItem3 .keyWordItem .form-check-input:checked:focus {
  box-shadow: none;
}
.keyWordItem3 .keyWordItem .txtKey {
  margin-left: 7px;
}
.keyWordItem3 .keyWordItem img {
  width: 23px;
  height: 23px;
}
.keyWordItem3 .keyWordItem .allField {
  margin-right: 18px;
  margin-bottom: 6px;
}

.vacTable .selectVacStatus {
  position: relative;
}
.vacTable .selectVacStatus .statusPoint {
  top: 37%;
}
.vacTable .selectVacStatus .selectStatus {
  width: 147px;
}
.vacTable .days {
  margin-right: 11px;
}
.vacTable thead {
  background-color: #0f77bd;
  border: solid 1px #0f77bd;
}
.vacTable thead tr th {
  color: #fff;
  font-size: 16px;
  border-right-color: #e9e9e9;
}
.vacTable tbody {
  border-top: none !important;
  border-color: transparent;
}
.vacTable tbody tr {
  border-bottom-color: #f3f3f3;
}
.vacTable tbody tr th, .vacTable tbody tr td {
  border-right-color: #e9e9e9;
  font-size: 16px;
  font-weight: normal;
}

.cardSetting .card-header .btnSetting {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  width: 100%;
  max-width: 335px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  background-color: #fff;
  height: 61px;
  border-radius: 5px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom: solid 2px transparent !important;
}
.cardSetting .card-header .btnSetting:hover {
  color: #0f77bd;
  border-color: #5fb544 !important;
}
.cardSetting .card-header .btnSetting .active {
  color: #0f77bd;
  border-color: #5fb544 !important;
}
.cardSetting .card-header .btnPassword {
  margin-left: 7px;
}
.cardSetting .card-body .settingBox {
  padding: 30px 20px 60px 20px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
}
.cardSetting .card-body .settingBox .settingField {
  width: 100%;
  max-width: 576px;
}
.cardSetting .card-body .settingBox .lang {
  margin-top: 20px;
  margin-bottom: 60px;
}
.cardSetting .card-body .settingBox .lang .field1 {
  border: solid 1px #5fb544;
}
.cardSetting .card-body .settingBox .lang .lang1 {
  margin-bottom: 22px;
}
.cardSetting .card-body .settingBox .lang .txt {
  font-weight: normal;
}
.cardSetting .card-body .settingBox .lang .title {
  margin-bottom: 13px;
}
.cardSetting .card-body .settingBox .btnSetting {
  width: 156px !important;
  color: #2d2d2d !important;
}
.cardSetting .card-body .settingBox .btnSetting:hover {
  color: #fff !important;
}

.passBox .noteBox {
  padding: 20px 23px;
  border-radius: 5px;
  background-color: #f2f2f2;
}
.passBox .noteBox .title {
  color: #0f77bd;
  margin-bottom: 15px;
}
.passBox .noteBox .txt1 {
  font-size: 16px;
  color: #000;
  margin-bottom: 15px;
}
.passBox .noteBox ul {
  padding-left: 13px;
}
.passBox .noteBox ul .listing {
  width: 7px;
  height: 7px;
  margin-right: 5px;
  background-color: #0f77bd;
  display: inline-block;
  border-radius: 50%;
}
.passBox .noteBox ul li {
  font-weight: normal;
  margin-bottom: 10px;
}
.passBox .noteBox ul li:last-child {
  margin-bottom: 0;
}
.passBox .resetPsw {
  margin-top: 40px;
}
.passBox .resetPsw .form-group {
  margin-bottom: 20px;
}

.employeeCard {
  border-radius: 10px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.27);
  margin-bottom: 24px;
}
.employeeCard .card-header {
  height: 115px;
  background-color: #647c95;
  border-radius: 10px 10px 0 0;
  padding: 20px;
  padding-top: 36px;
}
.employeeCard .card-header .settingIcon {
  color: #fff;
  font-size: 23px;
}
.employeeCard .card-header .settingIcon:after {
  display: none;
}
.employeeCard .card-header .employeeTitle img {
  width: 143px;
  height: 143px;
  border-radius: 50%;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  border: 4px solid #fff;
}
.employeeCard .card-body {
  padding-left: 21px;
  padding-bottom: 30.3px;
  padding-top: 68px;
}
.employeeCard .card-body h4 {
  font-size: 18px;
  font-weight: bold;
  color: #0f77bd;
  margin-top: 20px;
  margin-bottom: 20.5px;
}
.employeeCard .card-body h4:after {
  content: " ";
  display: block;
  background-color: #5fb544;
  width: 120px;
  height: 1px;
  margin: 0 auto;
  margin-top: 20.5px;
}
.employeeCard .card-body .details .txt2 {
  margin-top: 10px;
}
.employeeCard .card-body .view {
  margin-top: 43px;
}
.employeeCard .card-body .view .account {
  color: #0f77bd;
  font-size: 20px;
  border-radius: 5px;
  background-color: #e1e1e1;
  padding: 2.9px 7.8px;
}
.employeeCard .card-body .view .account:hover {
  background-image: linear-gradient(73deg, #0f77bd -81%, #001d3b 84%);
  color: #fff;
}
.employeeCard .card-body .view .attend {
  margin-left: 10px;
}
.employeeCard .card-body .view .btnDetails2 {
  width: 100% !important;
  max-width: 190px !important;
  border-radius: 15px !important;
}

.paginationNav {
  margin-top: 36.7px;
}
.paginationNav .page-link {
  padding: 10px 15px;
  border-radius: 4px;
  border: solid 1px #a8a8a8;
  margin-right: 4px;
  font-size: 17px;
  color: #0f77bd;
}
.paginationNav .page-link:hover {
  background-color: #0f77bd;
  color: #fff;
  border-color: #0f77bd;
}

.attendDetailsCard {
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  padding: 10px 15.5px;
  border-radius: 0;
}
.attendDetailsCard .box1 {
  margin-bottom: 11px;
}
.attendDetailsCard .box1 .icon {
  margin-right: 10px;
}
.attendDetailsCard .box1 .title {
  font-size: 16px;
  font-weight: bold;
  color: #2d2d2d;
}

.workDayCard {
  border-radius: 5px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  background-color: RGBA(15, 119, 189, 0.13);
}
.workDayCard .card-header {
  padding: 30px 7px;
}
.workDayCard .card-header .nextIcon {
  color: #5fb544;
  font-size: 20px;
}
.workDayCard .card-header .year {
  color: #2d2d2d;
  font-size: 20px;
  font-weight: bold;
  margin: 0 30px;
}
.workDayCard .card-body {
  padding: 0 22px 40px 22px;
}
.workDayCard .card-body .btnSaveOption {
  width: 156px !important;
  padding: 8px 2px 8px 2px !important;
  margin-top: 20px;
}
.workDayCard .card-body .workingHoursDetails {
  padding-left: 29px;
  margin-top: 20px;
}
.workTimeDetails {
  border-radius: 5px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  padding: 80px 22px;
}
.workTimeDetails .timeBoxDetails {
  margin-bottom: 20px;
  border-radius: 15px;
  border: solid 1px #0f77bd;
  font-size: 18px;
  font-weight: bold;
  color: #2d2d2d;
  padding: 17px 30.6px 15px 31px;
}
.workTimeDetails .timeBoxDetails button {
  font-size: 22px;
  color: #6a6969;
}
.workTimeDetails .timeBoxDetails:hover {
  background-image: linear-gradient(259deg, #001d3b 1%, #07497a 47%, #0f77bd 100%);
  color: #fff;
  cursor: pointer;
}
.workTimeDetails .timeBoxDetails:hover button {
  color: #fff;
}

.settingBox2 .edit {
  background-color: transparent;
}
.settingBox2 .delete {
  color: #de181f;
  margin-left: 20.8px;
}

.payIcon {
  margin-right: 10px;
}

.payBox .payBtn {
  padding: 0;
  border: none;
  background-color: transparent;
}
.payBox .payBtn .payOriginal {
  cursor: pointer;
}

.payHover {
  display: none;
  cursor: pointer;
}

.payBtn:hover .payOriginal {
  display: none;
}
.payBtn:hover .payHover {
  display: inline-block;
}

.emplNum {
  margin-right: 15.5px;
}

.socialSecurityCard {
  margin-top: 30px;
}
.socialSecurityCard .card-header {
  padding: 13px 20px 12px 24px;
  background-color: #0f77bd;
  display: flex;
  justify-content: space-between;
  border-radius: 0;
  align-items: center;
}
.socialSecurityCard .card-body {
  background-color: #d7e6f1;
  padding: 30px 20px 33px 24px;
}
.socialSecurityCard .card-body .socialSecurityTable {
  margin-top: 30px;
}
.socialSecurityCard .card-body .socialSecurityTable thead tr th {
  font-size: 16px;
  font-weight: bold;
  color: #0f77bd;
}

.salaryCard .card-footer {
  padding: 60px 30px;
  background-color: transparent;
}
.salaryCard .card-footer .btnCalc .txtCalc {
  color: #0f77bd;
}
.salaryCard .card-footer .btnCalc .imgCalcHover {
  display: none;
  margin-right: 17px;
}
.salaryCard .card-footer .btnCalc .imgCalc {
  margin-right: 17px;
}
.salaryCard .card-footer .btnCalc:hover {
  background-image: linear-gradient(260deg, #001d3b 2%, #0f77bd 98%);
}
.salaryCard .card-footer .btnCalc:hover .imgCalcHover {
  display: inline-block;
}
.salaryCard .card-footer .btnCalc:hover .txtCalc {
  color: #fff;
}
.salaryCard .card-footer .btnCalc:hover .imgCalc {
  display: none;
}
.salaryCard .card-footer .totalSalary .txtTotal .description1 {
  color: #ef0000;
}
.salaryCard .card-footer .totalSalary .imgTotal {
  margin-right: 17px;
}

.detailsModal {
  max-width: 400px;
}
.detailsModal .modal-content {
  border-radius: 15px;
}
.detailsModal .modal-content .modal-header .sideKey {
  margin-top: -5px;
}
.detailsModal .modal-content .modal-header .btnCloseDetails {
  margin-right: 15px;
  margin-top: 15px;
}
.detailsModal .modal-content .modal-header .btnCloseDetails button {
  background-color: transparent;
}
.detailsModal .modal-content .modal-body {
  padding-right: 40px;
  padding-left: 40px;
  padding-bottom: 40px;
}
.detailsModal .modal-content .modal-body .employeeName {
  padding-bottom: 9px;
}
.detailsModal .modal-content .modal-body .employeeName h4 {
  margin-bottom: 0;
  font-size: 17px;
  font-weight: bold;
  color: #000;
}
.detailsModal .modal-content .modal-body .vacInfo .vacInfoBox {
  margin-bottom: 10px;
}
.detailsModal .modal-content .modal-body .vacInfo .vacInfoBox .title {
  color: #000;
  font-size: 17px;
  font-weight: bold;
}
.detailsModal .modal-content .modal-body .vacInfo .vacInfoBox .description {
  color: #6a6969;
  font-size: 17px;
}
.detailsModal .modal-content .modal-body .vacList {
  margin-top: 43px;
}
.detailsModal .modal-content .modal-body .vacList .vacDetails {
  color: #008b17;
  font-size: 15px;
  margin-bottom: 10px;
}
.detailsModal .modal-content .modal-body .vacList .vacDetails:last-child {
  margin-bottom: 0;
}
.detailsModal .modal-content .modal-body .vacList .formalVacDetails {
  color: #000;
}

.detailsAction {
  margin-top: 20px;
}
.detailsAction .btnApproved {
  border: 1px solid #11a680;
  font-size: 17px;
  color: #000;
  border-radius: 20px;
  width: 100%;
  max-width: 101px;
}
.detailsAction .btnApproved:hover {
  background-color: #11a680;
  color: #fff;
}
.detailsAction .btnRejected {
  border-color: #e20052;
  margin-left: 8px;
}
.detailsAction .btnRejected:hover {
  color: #fff;
  background-color: #e20052;
}

.loginBox {
  margin-top: 20px;
  margin-bottom: 3px;
}
.loginBox .txt1 {
  color: #0f77bd;
  font-size: 16px;
  font-weight: bold;
}
.loginBox .txt2 {
  margin-top: 15px;
}

.addDesignation {
  font-size: 16px;
  padding-left: 16.5px;
}

.add-section {
  justify-content: center;
}

.add-section-btn {
  color: #0f77bd;
  padding: 10px 2px 12px 2px !important;
  width: 127px !important;
  font-size: 16px;
  font-weight: bold !important;
  border: none;
  background-color: #fff;
}

.statusPoint2filterTable {
  margin-top: 5px;
  margin-left: -7px;
  z-index: 9;
  width: 14px;
  height: 15px;
  right: initial;
  top: initial;
}

.input2btnTable {
  left: 18px !important;
  top: 2px !important;
  width: 12.1px !important;
  height: 12.3px !important;
}

.statusPoint3table {
  right: 37% !important;
}

.btnAllowance {
  margin-right: 30px;
}

.iconCheck {
  width: 14.5px;
  height: 14.1px;
  margin-right: 5.9px;
}

.btnEdit3 {
  width: 166px !important;
}

.editDepartBtn {
  background-color: transparent;
}
.editDepartBtn .editDepart {
  color: #f60101;
  font-size: 19px;
  margin-left: 15px;
}

.statusPoint3filter {
  width: 15px;
}

.input3btnTable {
  left: 19px !important;
  top: 3px !important;
  width: 11.3px !important;
  height: 11.4px !important;
}

.statusPosition {
  position: relative;
}
.statusPosition .statusInnerPosition {
  position: absolute;
  top: 15px;
}

.employee2Card {
  padding-top: 38px !important;
}

.editView {
  color: #468033;
}

.view1Box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.view1Box .view1innerBox {
  display: flex;
  justify-content: flex-end;
}

.countBox {
  border-radius: 5px;
  box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.16);
  padding: 8px 30px 10px 30px;
}
.countBox img {
  border-right: 2px solid #0f77bd;
  margin-right: 25.5px;
  padding-right: 30.5px;
}
.countBox .countDetailsBox .txt1 {
  font-size: 20px;
  font-weight: bold;
  color: #5fb544;
}
.countBox .countDetailsBox .txt2 {
  font-size: 18px;
  font-weight: bold;
  color: #000;
}

.box3inner {
  border-bottom: solid 1px #d8d8d8;
  padding-bottom: 2px;
  margin-bottom: 25px;
}
.box3inner:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.empBoxCard {
  padding-top: 60px;
  /*.vc-title{
    font-size: 0 !important;

    &:after{
      content: 'February ';
      font-size: var(--text-lg);
    }
  }*/
}
.empBoxCard .empBox {
  margin-bottom: 24px;
  border-radius: 5px;
  background-color: #d7e6f1;
  padding: 15px 4px 10px 4px;
}
.empBoxCard .empBox .title {
  margin-bottom: 5px;
  margin-top: 15px;
  font-size: 18px;
  font-weight: bold;
  color: #000;
}
.empBoxCard .empBox .description {
  font-size: 20px;
  font-weight: bold;
  color: #0f77bd;
}
.empBoxCard .empBox .txt {
  border-left: solid 2px #0f77bd;
  margin-left: 25px;
  padding-left: 30px;
  font-size: 18px;
  font-weight: bold;
  color: #000;
}
.empBoxCard .empBox .txt2 {
  color: #0f77bd;
  margin-left: 9px;
  margin-right: 9px;
}
.empBoxCard .empBox .txt3 {
  margin-left: 15px;
}
.empBoxCard .noteSpace {
  margin-top: 16px;
  margin-bottom: 40px;
}
.empBoxCard .noteSpace .note {
  white-space: nowrap;
  font-size: 18px;
  font-weight: bold;
  margin-right: 5.5px;
  color: #5fb544;
}
.empBoxCard .noteSpace .noteLine {
  border-bottom: solid 1px #0f77bd;
  width: 100%;
  display: inline-block;
}
.empBoxCard .noteBox {
  max-height: 212px;
  height: 100%;
  overflow-y: auto;
  border-radius: 5px;
  background-color: #d7e6f1;
  padding: 20px 8px 10px 10px;
}
.empBoxCard .noteBox .innerNoteBox .form-check {
  margin-bottom: 20px;
}
.empBoxCard .noteBox .innerNoteBox .form-check label {
  font-size: 16px;
  color: #000;
}
.empBoxCard .noteBox .innerNoteBox .form-check:lastchild {
  margin-bottom: 0;
}
.empBoxCard .noteBox .deleteNote {
  margin-top: 16px;
  text-align: right;
}
.empBoxCard .noteBox .deleteNote button {
  border-radius: 5px;
  background-color: #0f77bd;
  border: none;
  color: #fff;
}
.empBoxCard .addNotetitle {
  font-size: 16px;
  font-weight: bold;
  color: #6a6969;
}
.empBoxCard .addNoteBox {
  width: 100%;
  border-radius: 5px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  border: none;
  padding: 15px;
  margin-top: 10px;
  outline: none;
}
.empBoxCard .btnAddNote {
  margin-top: 25px;
  width: 100%;
  max-width: 132px;
  border-radius: 5px;
  border: solid 1px #5fb544;
  padding: 6px 15px 5px 15px;
  background-color: transparent;
}
.empBoxCard .btnAddNote .txt {
  margin-left: 15.2px;
  color: #0f77bd;
  font-size: 16px;
  font-weight: bold;
}
.empBoxCard .upcomingHolidayBox {
  margin-bottom: 24px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  padding: 14px 20.7px;
}
.empBoxCard .upcomingHolidayBox .innerbox1 {
  font-size: 16px;
  font-weight: bold;
  color: #0f77bd;
  margin-bottom: 5px;
}
.empBoxCard .upcomingHolidayBox .innerbox2 {
  color: #df1920;
}
.empBoxCard .advert {
  font-size: 16px;
  font-weight: bold;
  color: #6a6969;
  margin-bottom: 9px;
}
.empBoxCard .advertField {
  border-radius: 5px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
}
.empBoxCard .vc-container {
  width: 100%;
}

.skillBox {
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.32);
  padding: 10px 15px;
  margin-bottom: 24px;
}
.skillBox .txt {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.skillFooterBox {
  background-color: transparent;
}

.skillList {
  border-top: solid 1px #0f77bd;
  padding-top: 40.5px;
  margin-top: 40.5px;
}
.skillList .card-header {
  background-color: transparent;
  padding: 8px 4px 12px 4px;
  background-color: #0f77bd;
  border-radius: 5px 5px 0 0;
}
.skillList .card-header .title {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}
.skillList .card-body {
  overflow-y: scroll;
  max-height: 200px;
}
.skillList .card-body tr td {
  border: none;
}
.skillList .card-body tr .btnRemove {
  padding-right: 30px;
}
.skillList .card-body tr .btnRemove button {
  color: #de181f;
  background-color: transparent;
}
.skillList .card-body tr .btnRemove .editAttach {
  color: #183656;
  margin-left: 10px;
}
.skillList .card-body tr .txt {
  padding-left: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #000;
}

.skillModalContent {
  padding-bottom: 50px !important;
}

.SkillModalDialog {
  max-width: 694px;
}

.btnAttach {
  padding: 0;
  font-size: 25px;
}

.editPunchBox .title {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.editPunchBox .txt {
  color: #0f77bd;
}

.editPunchModal .title {
  font-size: 20px;
  font-weight: bold;
  color: #0f77bd;
}
.editPunchModal .txt1 {
  color: #5fb544;
}
.editPunchModal .empName {
  margin-bottom: 20px;
}
.editPunchModal .progress {
  height: 25.7px;
  border-radius: 24px;
}
.editPunchModal .addFingerprintBox {
  margin-bottom: 22px;
  margin-top: 20.3px;
}
.editPunchModal .btnAddPunch {
  border-radius: 5px;
  border: solid 1px #5fb544;
  background-color: #ebebeb;
  padding: 2px 8px 3px 9px;
  font-size: 16px;
  font-weight: bold;
  color: #0f77bd;
}

.absentEmpList table tr {
  background-color: #f2f2f2;
}
.absentEmpList table tr .imgEmp img {
  border-radius: 50%;
  border: solid 1px #5fb544;
}
.absentEmpList table tr .txt {
  padding-top: 15px;
}
.absentEmpList table tr td {
  box-shadow: none;
}
.absentEmpList table tr .btnRemove {
  padding-top: 15px;
}

.employeeCreateForm .employeeHeader {
  margin-bottom: 20px;
  margin-top: 20px;
}
.employeeCreateForm .employeeHeader .title {
  font-size: 17px;
  font-weight: bold;
  color: #5fb544;
  white-space: nowrap;
  margin-right: 5.5px;
}
.employeeCreateForm .employeeHeader .titleLine {
  border-bottom: solid 1px #0f77bd;
  width: 100%;
  display: inline-block;
}
.employeeCreateForm .form-group {
  margin-bottom: 20px;
}
.employeeCreateForm .emplCreateImg img {
  width: 200px;
  height: 200px;
}
.employeeCreateForm .emplCreateImg {
  position: relative;
}
.employeeCreateForm .emplCreateIcon {
  position: absolute;
  right: 14%;
  bottom: 12%;
}
.employeeCreateForm .card-footer {
  background-color: transparent;
}

.resetBox {
  padding-top: 50px;
  padding-bottom: 20px;
}
.resetBox .resetLogo {
  margin-bottom: 50px;
}
.resetBox .resetLogo img {
  width: 100%;
  height: 122px;
}
.resetBox .card .card-header {
  padding-bottom: 30px;
}

.resetTitle {
  margin-bottom: 20px;
}
.resetTitle h3 {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: bold;
  color: #5fb544;
}

.btnEditData {
  float: right;
}

.deleteTeam {
  border-radius: 5px;
  background-color: #ff0c0c;
  border: none;
  color: #fff;
}

.btnUserMenu {
  text-align: left;
}

.userMenuDialog {
  max-width: 636px;
}
.userMenuDialog .modal-header .closeBtn button {
  padding: 6px 7px;
  font-size: 12px;
}
.userMenuDialog .modal-body {
  padding-right: 43px;
  padding-left: 43px;
}
.userMenuDialog .modal-body .menuBox {
  border-radius: 5px;
  box-shadow: 2px 2px 20px 0 rgba(0, 0, 0, 0.16);
  padding: 23.5px 18px;
  margin-bottom: 30px;
}
.userMenuDialog .modal-body .menuBox:hover {
  background-image: linear-gradient(246deg, #0f77bd 2%, #083c5f 98%);
}
.userMenuDialog .modal-body .menuBox:hover .title {
  color: #fff;
  border-color: #fff;
}
.userMenuDialog .modal-body .menuBox:hover img {
  filter: brightness(0) invert(1);
}
.userMenuDialog .modal-body .menuBox .title {
  font-size: 20px;
  color: #191818;
  border-left: solid 1px #0f77bd;
  padding-left: 25.5px;
  margin-left: 17.9px;
}
.userMenuDialog .modal-body .active {
  background-image: linear-gradient(246deg, #0f77bd 2%, #083c5f 98%);
}
.userMenuDialog .modal-body .active .title {
  color: #fff;
  border-color: #fff;
}
.userMenuDialog .modal-body .active img {
  filter: brightness(0) invert(1);
}

.settingIcon2 {
  font-size: 23px;
  color: #788fa7;
}

.showStatus {
  width: 15px;
  height: 15px;
  display: inline-block;
  border-radius: 50%;
}

.delBtn {
  margin-left: 6px !important;
}

.titleDesign {
  white-space: nowrap;
}

.settingCard .card-header .settingBoxx img {
  width: 24px;
  height: 22px;
}

.punchTime {
  border-bottom: solid 1px rgba(95, 181, 68, 0.36);
  padding-bottom: 15.5px;
  margin-top: 15.5px;
}
.punchTime:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.punchTime .txt1 {
  font-size: 14px;
  color: #6a6969;
}

.balanceDetails:hover {
  color: #4da233;
  text-decoration: underline;
}

.DetailsModalDialog {
  max-width: 436px;
}
.DetailsModalDialog .DetailsModal {
  border-radius: 15px;
}
.DetailsModalDialog .DetailsModal .modal-header {
  padding-right: 24px;
  padding-left: 20px;
}
.DetailsModalDialog .DetailsModal .modal-header .btnClose {
  font-size: 12px;
}
.DetailsModalDialog .DetailsModal .modal-body {
  padding: 30px 20px 50px 20px;
}
.DetailsModalDialog .DetailsModal .modal-body .DetailsBox {
  margin-bottom: 20px;
}
.DetailsModalDialog .DetailsModal .modal-body .DetailsBox:last-child {
  margin-bottom: 0;
}
.DetailsModalDialog .DetailsModal .modal-body .DetailsBox .txt {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.balanceList {
  margin-left: 9px;
}
.balanceList .balanceHover {
  display: none;
}
.balanceList:hover .balanceOriginal {
  display: none;
}
.balanceList:hover .balanceHover {
  display: inline-block;
}

.imgUploadBox {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-top: 100px;
}
.imgUploadBox .imgUpload {
  position: relative;
  margin-bottom: 50px;
}
.imgUploadBox .imgUpload .imgUploadField {
  visibility: hidden;
}
.imgUploadBox .btnUpload button {
  width: 100%;
  max-width: 230px;
}
.imgUploadBox .title {
  font-size: 26px;
  font-weight: bold;
  color: #c41313;
}
.imgUploadBox .punchesList li {
  font-size: 18px;
  margin-bottom: 10px;
}

.content2 {
  height: auto;
}

.imgLoadbox {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
}

.btnEditList a .editIcon {
  font-size: 20px;
}
.btnEditList a:hover .editIcon {
  color: #b22a2a !important;
}

.dayOffModal .modal-footer .btnSaveList {
  width: 211px !important;
}

.healthCard .card-body .txt {
  font-size: 16px;
  font-weight: bold;
  color: #0f77bd;
  margin-bottom: 37px;
}
.healthCard .card-body .box {
  margin-bottom: 20px;
}
.healthCard .card-body .box:last-child {
  margin-bottom: 0;
}
.healthCard .card-body .box .txt2 {
  font-size: 16px;
  color: #000;
}

.dayOffModal .modal-footer .sendBtn2 {
  width: 312px !important;
}

.healthCard {
  box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.16);
}
.healthCard table thead, .healthCard table tbody, .healthCard table tfoot, .healthCard table tr, .healthCard table td, .healthCard table th {
  border: none;
}
.healthCard table th {
  border-right: 1px solid #e4e4e4;
}

.healthDetailsCard {
  box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.16);
}
.healthDetailsCard .form-group {
  margin-bottom: 12px;
}
.healthDetailsCard .form-group:last-child {
  margin-bottom: 0;
}
.healthDetailsCard .form-group .form-control {
  background-color: #f5f5f5;
  border: none;
}

.addMemeber {
  padding-bottom: 25px;
  margin-top: 27px;
  margin-bottom: 27px;
  border-bottom: 1px solid #e3e3e3;
}
.addMemeber .addIcon {
  font-size: 23px;
  color: #0f77bd;
}
.addMemeber .txt {
  margin-left: 11px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

/*************************************   Responsive  ************************************/
@media (max-width: 1199px), not all and (min-width: 1200px) {
  .keysBoxx2 {
    margin-top: 30px;
  }
}
@media only screen and (max-width: 1024px) {
  .responsiveDashboard .clockDetails .txt1 {
    font-size: 67%;
  }
  .responsiveDashboard .clockDetails .txt2 {
    font-size: 66%;
  }
}
@media (max-width: 1023px), not all and (min-width: 1024px) {
  .responsiveDashboard .clockDetails .txt1 {
    font-size: 87%;
  }
  .responsiveDashboard .clockDetails .txt2 {
    font-size: 90%;
  }

  .content {
    height: auto;
  }
}
@media (max-width: 991px), not all and (min-width: 992px) {
  .selectOption2 {
    margin-bottom: 20px;
  }

  .loginDetails {
    padding-right: 0;
    padding-left: 0;
  }

  .keyWordItem .txtKey {
    font-size: 14px;
  }

  .originalHeader {
    display: none;
  }

  .imgLogo {
    margin-left: 0;
  }
  .imgLogo img {
    width: 117px;
    height: 80px;
  }

  .dateTimeBox .txt2 {
    font-size: 17px;
  }
  .dateTimeBox .txt1 {
    font-size: 23px;
  }

  .responsiveHeader {
    display: block;
  }

  .responsiveHeader2 {
    display: block;
  }

  .btnSidebarToggle {
    display: inline-block;
  }

  .imgHoliday {
    margin-bottom: 15px;
    text-align: center;
    justify-content: center;
  }

  .box2content {
    margin-top: 10.5px;
  }

  .requestLeave {
    padding-right: 16px;
    padding-left: 16px;
  }

  .responsiveDashboard .clockDetails .txt2 {
    font-size: 70%;
  }
  .responsiveDashboard .clockDetails .txt1 {
    font-size: 69%;
  }
}
@media only screen and (max-width: 768px) {
  .countBox .countDetailsBox .txt2 {
    font-size: 16px;
  }

  .leaveKeyWords {
    margin-top: 30px;
  }

  .responsiveDashboard .clockDetails .txt1 {
    font-size: 63%;
  }
  .responsiveDashboard .clockDetails .txt2 {
    font-size: 65%;
  }

  .ipadTxt {
    margin-left: 9px;
  }

  .keyWordItem {
    margin-bottom: 25px;
  }
}
@media (max-width: 767px), not all and (min-width: 768px) {
  .advertBox {
    margin-top: 24px;
  }

  .empBoxCard {
    padding-top: 0;
  }

  .responsiveDashboard .clockDetails .txt1 {
    font-size: 93%;
  }
  .responsiveDashboard .clockDetails .txt2 {
    font-size: 86%;
  }

  .formGroupMargin {
    margin-bottom: 10px;
  }

  .searchTeam {
    text-align: right;
  }

  .img2profile {
    width: 120px;
    height: 120px;
  }

  .noteBox {
    margin-bottom: 24px;
  }

  .countBox {
    margin-bottom: 24px;
  }

  .btnAllowance {
    margin-top: 0 !important;
    margin-right: 9px;
  }

  .workTimeDetails {
    margin-top: 30px;
  }

  .keyWordItem22 {
    justify-content: left;
  }

  .welcomeImg img {
    width: 100%;
    height: auto;
  }

  .content {
    padding-top: 15%;
    padding-bottom: 8%;
  }

  .addEmpPunchBtn {
    margin-bottom: 20px;
  }

  .container1 {
    padding: 0;
  }

  .leftSide2 {
    padding-top: 0;
  }

  .leftSide .bgHeader {
    height: 262.3px;
  }

  .welcomeDetails {
    margin-top: 38px;
  }

  .keyWords2 {
    margin-top: 25px;
  }

  .keyWordItem {
    margin-bottom: 25px;
  }
  .keyWordItem .txtKey {
    font-size: 16px;
  }

  .btnFingerPrint a .txtFingerPrint {
    font-size: 18px;
  }
  .btnFingerPrint button .txtFingerPrint {
    font-size: 18px;
  }

  .box1vacation {
    margin-bottom: 16px;
  }

  .resDashLeftSide {
    padding-top: 108px;
  }

  .box1contentProfile {
    top: 66px;
    z-index: 2;
  }

  .img2profile {
    width: 137px;
    height: 137px;
  }

  .btnEdit {
    margin-top: 0;
    position: relative;
    text-align: left;
    margin-left: 15px;
    bottom: 43%;
  }
  .btnEdit button {
    border: none;
    background-color: transparent;
    padding: 0;
  }
  .btnEdit button:hover {
    background-image: none;
    border-color: transparent;
  }
  .btnEdit button:hover .editOriginal {
    display: inline-block;
  }
  .btnEdit button:hover .editHover {
    display: none;
  }
  .btnEdit button:hover .txt {
    color: #000;
  }

  .cardBox22 .card-body {
    padding-top: 10%;
  }

  .editInfoCard {
    display: none;
  }

  .cardBox {
    position: relative;
    bottom: 46px;
  }
  .cardBox .txt5 {
    padding-left: 0;
  }
  .cardBox .profile1info {
    border-right: none;
    border-bottom: 1px dashed #0f77bd;
    padding-bottom: 15px;
    margin-bottom: 19px;
  }

  .profileIdentity {
    text-align: center;
    margin-top: 69px;
  }

  .confirmationBox .txt {
    font-size: 20px;
  }

  .btnVac {
    margin-top: 30px;
  }

  .keyWords {
    margin-bottom: 25px;
  }
}
@media (max-width: 599px), not all and (min-width: 600px) {
  .imgLogo img {
    width: 75px;
    height: 53px;
  }

  .dateTimeBox .txt1 {
    font-size: 17px;
  }
  .dateTimeBox .txt2 {
    font-size: 11px;
  }

  .timeBox {
    padding-right: 11.8px;
    margin-right: 8.2px;
  }

  .innerDate .txt3 {
    margin-right: 6px;
  }

  .btnEdit {
    bottom: 30%;
  }
  .btnEdit .txt {
    display: block;
    margin-left: 0;
    font-size: 14px;
  }
  .btnEdit img {
    width: 20px;
    height: 20px;
  }

  .cardBox .txt1 {
    font-size: 16px;
  }
  .cardBox .txt2 {
    font-size: 16px;
  }
}
@media (max-width: 575px), not all and (min-width: 576px) {
  .generalTitle {
    margin-bottom: 19px;
  }

  .imgAsset {
    margin-bottom: 17px;
  }

  .imgAssetDetails {
    margin-bottom: 17px;
  }

  .attendDetailsCardResp {
    margin-top: 24px;
  }

  .balanceInnerBox {
    margin-bottom: 20px;
  }

  .balanceBtnDesign {
    margin-top: 15px;
  }

  .perBalanceBtn {
    max-width: 96px;
    padding: 4px;
  }

  .employeeCreateForm .emplCreateIcon {
    position: absolute;
    right: 0;
    bottom: 6%;
    left: 0;
  }

  .totalSalary {
    margin-top: 20px;
  }

  .form-group {
    margin-bottom: 10px;
  }

  .designations-form .searchBtn {
    margin-bottom: 20px;
  }
  .designations-form .form-select {
    margin-bottom: 20px;
  }

  .occasionBox {
    margin-bottom: 20px;
  }

  .txtAbsent {
    margin-bottom: 15px;
  }

  .settingCard {
    margin-bottom: 10px;
  }

  .keyTimeline2 {
    margin-top: 20px;
  }
}
@media (max-width: 480px), not all and (min-width: 481px) {
  .originalDashboard .clockBox {
    width: 100%;
  }

  .responsiveDashboard .resDashHeader {
    margin-top: 15px;
    font-size: 16px;
    font-weight: bold;
    color: #0f77bd;
  }
  .responsiveDashboard .resDashHeader .txt1 {
    font-weight: normal;
    margin-top: 10px;
  }
  .responsiveDashboard .resDashimg {
    width: 137px;
    height: 137px;
    border-radius: 50%;
    border: solid 5px #0f77bd;
  }
  .responsiveDashboard .generalBox {
    margin-top: -98px;
  }
  .responsiveDashboard .resDashCardHeader {
    padding-bottom: 0;
  }
  .responsiveDashboard .btnFingerPrint {
    margin-top: 30px;
  }
  .responsiveDashboard .card-body {
    padding-bottom: 0;
    position: relative;
  }
  .responsiveDashboard .card-footer {
    padding-top: 15.5px;
    padding-bottom: 20px;
  }
  .responsiveDashboard .clockDetails {
    padding-right: 4%;
  }

  .circularBox {
    display: none;
  }

  .resDashBox {
    display: block;
  }

  .leftSide1 {
    padding-top: 107px;
  }

  .demoBox .txt {
    font-size: 20px;
  }
  .demoBox button {
    font-size: 18px;
  }

  .welcomeBox h1 {
    font-size: 35px;
  }

  .logoBox .txt {
    font-size: 25px;
  }
}
@media (max-width: 406px), not all and (min-width: 407px) {
  .box3details .txt1 {
    font-size: 15px;
  }
  .box3details .txt2 {
    font-size: 13px;
  }

  .liableBox {
    margin-top: 20px;
  }

  .btnVac2Box {
    text-align: center;
    margin-top: 20px;
  }

  .view1Box {
    margin-top: 20px;
    display: block;
  }
  .view1Box .btnAllowance {
    margin-right: 0;
  }
  .view1Box .view1innerBox {
    margin-top: 20px;
  }

  .accordItem .accordion-button .num2 {
    margin-left: 7px;
    margin-right: 9px;
  }
}
@media (max-width: 328px), not all and (min-width: 329px) {
  .txt2vacation {
    white-space: normal !important;
  }

  .perBalancetxt1 {
    font-size: 14px;
  }

  .btnEdit {
    bottom: 45%;
  }
  .btnEdit .txt {
    display: none;
  }

  .cardBox22 .card-body {
    padding-top: 20%;
  }
}
@media (max-width: 314px), not all and (min-width: 315px) {
  .responsiveDashboard .clockDetails {
    padding-right: 8%;
  }
  .responsiveDashboard .clockDetails .txt1 {
    font-size: 75%;
  }
}
@media (max-width: 280px), not all and (min-width: 281px) {
  .dayDate {
    display: block;
  }

  .detailsAction .btnApproved {
    max-width: 90px;
  }

  .userMenuDialog .modal-body .menuBox .title {
    font-size: 15px;
    padding-left: 9.5px;
    margin-left: 9.9px;
  }

  .FingerprintModal .cardBox1 .box1entry {
    font-size: 13px;
  }

  .box3details .txt1 {
    font-size: 11px;
  }
  .box3details .txt2 {
    font-size: 10px;
  }

  .monthsCalendar .yearFilterBox .year {
    margin: 0 13px;
  }

  .responsiveDashboard .clockDetails .txt1 {
    font-size: 59%;
  }
  .responsiveDashboard .clockDetails .txt2 {
    font-size: 59%;
  }

  .leaveBalanceTxt {
    margin-left: 3px;
  }

  .dayDetails .dayName {
    font-size: 13px;
  }

  .keyWordItem .txtKey {
    font-size: 14px;
  }
}

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