margin:root {
  --danger-color: #fa4936;
  --weak-color: #fccd78;
  --strong: #7ce568;
  --average: #ebebeb;
  --body-color: #ecf0ef;
}

.dt-paging-button.previous {
  display: none !important;
}

.dt-paging-button.next {
  display: none !important;
}


.dt-paging-button.first:hover {
  color: white !important;
}


.dt-paging-button.last:hover {
  color: white !important;
}
.width_btn{
  width:24% !important;
  }

.dt-paging-button:not(.previous):not(.next):not(.current) {
  outline: 2px solid #476f66;
  border: none;
  padding: 1px;
  color: gray !important;
}

.dt-paging-button {
  margin: 0 7px;

}

.active-tab {
  background-color: #476f66;
  transition: background-color 0.3s ease;
}

.custom-select-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
}

.custom-select-wrapper select {
  display: none;
}

.custom-select {
  position: relative;
  display: inline-block;
}

.custom-select-trigger {
  position: relative;
  display: block;
  width: 130px;
  padding: 0 84px 0 22px;
  font-size: 22px;
  font-weight: 300;
  color: #fff;
  line-height: 60px;
  background: #5c9cd8;
  border-radius: 4px;
  cursor: pointer;
}

.custom-select-trigger:after {
  position: absolute;
  display: block;
  content: '';
  width: 10px;
  height: 10px;
  top: 50%;
  right: 25px;
  margin-top: -3px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg) translateY(-50%);
  transition: all .4s ease-in-out;
  transform-origin: 50% 0;
}

.custom-select.opened .custom-select-trigger:after {
  margin-top: 3px;
  transform: rotate(-135deg) translateY(-50%);
}

.custom-options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 100%;
  margin: 15px 0;
  border: 1px solid #b5b5b5;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .07);
  background: #fff;
  transition: all .4s ease-in-out;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-15px);
}

.custom-select.opened .custom-options {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}

.custom-options:before {
  position: absolute;
  display: block;
  content: '';
  bottom: 100%;
  right: 25px;
  width: 7px;
  height: 7px;
  margin-bottom: -4px;
  border-top: 1px solid #b5b5b5;
  border-left: 1px solid #b5b5b5;
  background: #fff;
  transform: rotate(45deg);
  transition: all .4s ease-in-out;
}

.option-hover:before {
  background: #f9f9f9;
}

.custom-option {
  position: relative;
  display: block;
  padding: 0 22px;
  border-bottom: 1px solid #b5b5b5;
  font-size: 18px;
  font-weight: 600;
  color: #b5b5b5;
  line-height: 47px;
  cursor: pointer;
  transition: all .4s ease-in-out;
}

.custom-option:first-of-type {
  border-radius: 4px 4px 0 0;
}

.custom-option:last-of-type {
  border-bottom: 0;
  border-radius: 0 0 4px 4px;
}

.custom-option:hover,
.custom-option.selection {
  background: #f9f9f9;
}

.active-tab .tab-number {
  display: none;
}



.dataTables_filter {
  float: left;
}

#example_length {
  float: right;
}

#example_filter {
  float: right;
}

.search-icon {
  position: absolute;
  margin-left: 13px;
  margin-top: 6px;
}

.search-container {
  position: relative;
  display: inline-block;
}

.search-icon {
  position: absolute;
  left: 8px;
  top: 38%;
  transform: translateY(-50%);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: white !important;

  background-color: #585858;

}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}





#opened-modal {
  margin-top: -20px;
}





.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #476f66;
}

input:focus+.slider {
  box-shadow: 0 0 1px #476f66;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.dataTables_wrapper .dataTables_paginate {
  float: right;
  text-align: right;
  padding-top: .25em;
}

.toggle {
  width: 220px;
  height: 100px;
  background: #ddd;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: 1s ease;
}

.toggle .in-toggle input {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  z-index: 1;
}

.clicked {
  background: #346ced;
}

.in-toggle {
  width: 46%;
  height: 92%;
  background: #fff;
  position: relative;
  top: 4%;
  transition: 1s ease;
}

.tg-left {
  left: 2%;
}

.tg-right {
  left: 52%;
}

.search-input {
  border: none;
  padding-left: 40px;
}


table.dataTable thead th,
table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: 1px solid transparent !important;
}

.dataTables_length {
  float: right;
}


.active-tab .tab-icon {
  display: block;
}

.tab-number {
  display: block;
}

.tab-icon {
  display: none;
}

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

.tab {
  /* overflow: hidden; */
  margin-top: 10px;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 18px;
  transition: 0.3s;
  font-size: 17px;
}

.active-green-bg {
  background-color: green;
}

.tab button:hover {
  border: 1px solid #476f66;
}

/* Create an active/current tablink class */
.tab button.active {
  border-bottom: 1px solid #476f66;
}

/* Style the tab content */
.tabcontent {
  /* display: none; */
  padding: 6px 3px;
  /* border: 1px solid #ccc; */
  border-top: none;
}

/* .modal-box {
  padding: 10px;
} */

#closeBtn {
  width: 26px;
  height: 25px;
  background-color: #fefefe;
  border-radius: 6px;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-item:not(.open) .accordion-content {
  max-height: 0;
}



.accordion-item.open .accordion-content {
  max-height: 1000px;
  border: 1px solid lightgray;
  /* overflow-x: hidden;
overflow-y:scroll; */
}

.accordion-toggle {
  transition: transform 0.3s ease;
  background: #4d756c;
  width: 33px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}


.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  /* border: 2px solid; */
}

/* canvas {
    width: 100%;
    height: 100%;
    
    border: 1px #5fca83 dashed;
    border-radius: 7px;
} */
#ul-menu {
  margin-top: 10px;
}

.wrapper {
  width: 90%;
  max-width: 800px;
  margin: 4em auto;
  text-align: center;
}

.search-container {
  border: 1px solid lightGray;
  padding: 8px
}

#bread {
  flex: max-content;
  float: inline-end;
}

/* Icons */
.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  fill: currentcolor;
}

#clear_button {
  z-index: 10;
  position: absolute;
  right: 2em;
  padding: 1.5em 2em;

  color: #21cfa6;
  font-weight: 600;
  font-size: 14pt;
  cursor: pointer;
}

#finish_button {
  margin-top: 2em;
  cursor: pointer;
}

.date-picker {
  padding: 8px;
  border: 1px solid lightGray;
}

#FileUpload {
  height: 217px;
}



#upload {
  height: 194px;
}


/* .hidden {
    display: none;
}

.visible {
    display: flex;
} */

.dashed-border {
  border-top: 2px dashed lightgray;
  /* Define dashed border style */
}




#clear-btn {
  background-color: #476f66;
  color: white;
  border-radius: 0.375rem;
  width: 85px;
  padding: 5px;
}

#save-btn {
  background-color: transparent;
  color: black;
  border: 1px solid black;
  width: 85px;
  border-radius: 0.375rem;
  padding: 5px;
}

/* [type="date"] {
    background:#fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)  97% 50% no-repeat ;
  } */
[type="date"]::-webkit-inner-spin-button {
  display: none;
}

[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

/* custom styles */

label {
  display: block;
}

#date {
  padding: 7px 15px !important;
}

input {
  border: 1px solid #c4c4c4;
  border-radius: 5px;
  background-color: #fff;
  /* padding: 7px 5px; */
  /* box-shadow: inset 0 3px 6px rgba(0,0,0,0.1); */
  width: 100%;
}

[data-tabs-toggle] button.actives-tab {
  color: #476f66;
  border-color: #476f66;
}



[data-tabs-toggle] button.actives-tab::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  color: #476f66;
}

button {
  padding: 5px 10px;
  /* margin-left: 5px; */
  cursor: pointer;
}

.tab {
  overflow: auto;

}

#tabs {
  overflow: hidden;
}

#tabs button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  border-bottom: 1px solid lightgray !important;
}

.modal-box section {
  background-color: #f6f6f6;
  /* padding-top:49px;  */
}

.tab button {
  background-color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  border: 1px solid lightgray;
}




.tab button.active {
  border: 1px solid #476f66;
}

#tabs .tablinks:focus {
  border-bottom: 2px solid #476f66 !important;


}

#tab-button {
  border-bottom: 2px solid lightGray;
  padding: 8px;
}

#tab-button.active {
  border-bottom: 2px solid #476f66;
  color: #476f66;
  padding: 8px;
}

.tab button.active::after {

  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  transform: translate(50%, -50%);

}


.tabcontent {
  /* display: none; */
  padding: 6px 3px;

  border-top: none;
}

.tooltip .tooltip-content {
  visibility: hidden;
  width: 515px;
  background-color: #fbf8ab;
  color: black;
  text-align: center;
  font-weight: 500;
  font-size: 12px;
  border-radius: 1px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  border: 2px solid #fce78b;
  /* bottom: 125%; */
  left: -213px;
  margin-top: 7px;
  margin-left: -44px;
  opacity: 0;
  transition: opacity 0.3s;
}

.previous-tab {
  color: black;
}

.tooltip .tooltip-content::after {
  content: "";
  position: absolute;
  top: -32%;
  left: 58%;
  margin-left: -39px;
  border-width: 7px;
  border-style: solid;
  transform: rotate(178deg);
  margin-top: -6px;
  border-color: #fce78b transparent transparent transparent;
}

.active-tab .text-xl,
.previous-tab .text-xl {
  color: black;
}



#btns {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.previous-tab .text-xl {
  color: black;
}

.tooltip:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
}


.accordion-item.open .accordion-toggle {
  transform: rotate(-1deg);
}

.modal {
  border-radius: 15px;
  padding: 0px;
  width: 32%;
  box-shadow: 0px 0px 8px 2px #7f7f7f;
}

/* .py-3 {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  } */



.tab-button {
  border: none;
}

.tab-button:hover {
  cursor: pointer;
}

/* .active-tab {
    background-color: #4CAF50; 
} */

.tab-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #cfd7d7;
  color: #000;
  font-weight: bold;
}

.active-tab .tab-icon,
.previous-tab .tab-icon {
  background-color: #476f66;
  color: white;
}



#seperator-icon {
  margin-top: -15px;
  margin-bottom: -10px;
  margin-left: 24px;
}

#width-tab {
  width: 483px;
}

/* #col-9-auto {
  max-height: 812px !important;
} */



.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 27px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 5px;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 21px;
  width: 22px;
  left: 2px;
  bottom: 3px;
  background-color: white;
  border-radius: 0;
  transition: .4s;
}

input:checked+.slider {
  background-color: #476f66;
}

input:focus+.slider {
  box-shadow: 0 0 1px #476f66;
}

input:checked+.slider:before {
  transform: translateX(30px);
}


.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.dataTables_wrapper select,
.dataTables_wrapper .dataTables_filter input {
  color: #4a5568;

  padding-left: 1rem;

  padding-right: 1rem;

  padding-top: .5rem;

  padding-bottom: .5rem;

  line-height: 1.25;

  border-width: 1px;

  border-radius: .25rem;
  border-color: lightGray;

  background-color: white;

}


table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
  background-color: white;

}

table.dataTable tbody tr,
table.dataTable.display tbody tr {
  background-color: transparent;

}

/*Pagination Buttons*/
.dataTables_wrapper .dataTables_paginate .paginate_button {
  font-weight: 700;

  border-radius: .25rem;

  border: 1px solid transparent;

}


.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  color: #fff !important;

  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);

  font-weight: 700;

  border-radius: .25rem;

  background: #476f66 !important;
  border: 1px solid transparent;

}

/*Pagination Buttons - Hover */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #fff !important;

  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);

  font-weight: 700;

  border-radius: .25rem;

  background: white !important;

  border: 1px solid transparent;

}


table.dataTable.no-footer {
  border-bottom: 1px solid #e2e8f0;

  margin-top: 0.75em;
  margin-bottom: 0.75em;
}


table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
  background-color: #667eea !important;

}


#tab-data {
  padding-top: 19px !important;
}

#tab-datas {
  padding-top: 15px !important;
}

#tab-links {
  line-height: 20px;
  padding: 2px !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

[type="date"] {
  background: #fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png) 97% 50% no-repeat;
}

[type="date"]::-webkit-inner-spin-button {
  display: none;
}

[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

.close-btn {
  margin-left: 5px;
  cursor: pointer;
  color: red;
  font-size: 33px;
  margin-top: 10px;
}

.close-btn:hover {
  color: red;
}

.placeholder-center::placeholder {
  text-align: center;
  font-size: 1.2rem;
}



/* input[type="text"] {

  border: none;
  outline: none;
  flex: 1;
  margin: 0;
  padding: 5px;
  font-size: 14px;
} */

.w-\[517px\] {
  width: 517px;
}

@media (min-width:200px) and (max-width:380px) {
  .accordion-item.open .accordion-content {
    max-height: 272px;
    border: 1px solid lightgray;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .modal-box section {
    width: 353px !important;
  }

  .h-\[598px\] {
    height: 472px !important;
  }

  #bottom-space {
    margin-bottom: 355px !important;
  }

  .max-h-\[560px\] {
    max-height: 350px !important;
  }

  .ml-\[11px\] {
    margin-left: 0px !important;
  }

  .mr-\[17px\] {
    margin-right: 6px !important;
  }

  /* .mt-\[-10px\] {
    margin-top: -61px !important;
} */
  #bottomssss {
    margin-bottom: 76px !important;
  }

  .mt-\[62px\] {
    margin-top: 19px !important;
  }

  #my_modal_9 {
    height: 290px
  }

  #my_modal_15 {
    height: 290px
  }

  #bottomss {
    margin-bottom: 70px !important;
  }

  .modal-box section {
    width: 334px !important;
  }

  .h-\[294px\] {
    height: 224px !important;
  }

  .h-\[384px\] {
    height: 196px !important;
  }

  .mt-\[261px\] {
    margin-top: 83px !important;
  }

  .w-\[332px\] {
    width: 332px;
  }

  #bottom {
    margin-bottom: 20px !important;
  }

  #bottoms {
    margin-bottom: 33px !important;
  }

  /* .mt-5 {
  margin-top: 0px !important;
} */
  .mt-\[32px\] {
    margin-top: 11px !important;
  }

  .mt-\[45px\] {
    margin-top: 18px !important;
  }

  .w-\[274px\] {
    width: 274px;
    margin-top: -11px !important;
    margin-bottom: 7px !important;
  }

  .h-\[309px\] {
    height: 235px !important;
  }

  .mt-\[49px\] {
    margin-top: 16px !important;
  }

  .max-h-\[280px\] {
    max-height: 229px !important;
  }

  .gap-\[21px\] {
    gap: 4px !important;
  }

  .h-\[300px\] {
    height: 247px !important;
  }

  .w-\[50\%\] {
    width: 50%;
    height: 108px !important;
  }

  .mt-3 {
    margin-top: 0px !important;
  }
}

@media (min-width:381px) and (max-width:400px) {
  .accordion-item.open .accordion-content {
    max-height: 272px;
    border: 1px solid lightgray;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .mt-\[-4px\] {
    margin-top: 0px;
  }

  .modal-box section {
    width: 350px !important;
  }

  #bottom-space {
    margin-bottom: 356px !important;
  }

}

@media (min-width:401px) and (max-width:600px) {
  .accordion-item.open .accordion-content {
    max-height: 200px;
    border: 1px solid lightgray;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .modal-box section {
    width: 389px !important;
  }

}

@media (min-width: 600px) and (max-width: 900px) {
  .accordion-item.open .accordion-content {
    max-height: 1000px;
    border: 1px solid lightgray;
    overflow-x: hidden;
    overflow-y: hidden;
  }
}

@media (min-width: 1000px) and (max-width: 1200px) {
  .lg\:w-\[607px\] {
    width: 607px !important;
  }

  #gap {
    gap: 2px !important;
  }

  #stepper {
    margin-left: -33px !important;
  }

  #step-name {
    font-size: 13.8px !important;
  }

  .md\:rounded-bl-3xl {
    border-bottom-left-radius: 0px !important;
  }
}

@media (min-width: 1300px) and (max-width: 1600px) {
  #height {
    height: 100%;
    /* max-height: 74%; */
  }

  .xl\:max-h-\[495px\] {
    max-height: 454px !important;
  }

  #cvv-img {
    width: 29px !important;
  }

  #card-img {
    margin-top: -5px !important;
  }

  .xl\:max-h-\[501px\] {
    max-height: 454px !important;
  }

  #cvv {
    margin-left: 44px !important;
  }

  .md\:rounded-bl-3xl {
    border-bottom-left-radius: 0px !important;
  }

  #shift-type-w {
    margin-top: -20px !important;
  }

  #expiration-date {
    margin-left: 154px !important;
  }

  #h4 {
    margin-top: 6px !important;
  }

  /* .lg\:ml-0{
  margin-left: 72px !important;
} */
  #cvv {
    margin-left: 40px;
  }

  #market {
    margin-left: 242px !important;
  }

  .xl\:ml-\[-621px\] {
    margin-left: -498px !important;
  }

  .xl\:mr-\[-625px\] {
    margin-right: -498px !important;
  }


  .xl\:ml-\[-13px\] {
    margin-left: -2px !important;
  }

  #market1 {
    margin-left: 257px !important;
  }

  #tab-data {
    padding-top: 19px !important;
  }

  #tab-datas {
    padding-top: 17px !important;
  }

  #pay-rate-w {
    margin-top: -20px !important;
  }

  #shift-back {
    margin-bottom: 60px !important;
  }

  .xl\:mt-\[350px\] {
    margin-top: 208px !important;
  }

  #payment-w {
    margin-top: -20px !important;
  }

  #general {
    margin-top: 20px;
  }

  #pay-back-button {
    margin-top: 39px !important;
  }

  #payment-back-button {
    margin-top: 7px !important;
  }

  .xl\:mr-\[-647px\] {
    margin-right: -511px !important;
  }

  .xl\:ml-\[-647px\] {
    margin-left: -511px !important;
  }

  #payment-submit-button {
    margin-top: 18px !important;
  }

  #payments-back-button {
    margin-top: 365px !important;
  }

  #payments-submit-button {
    margin-top: 365px !important;
  }

  #payment {
    margin-top: 55px !important;
  }

  input {
    height: 35px !important;
  }

  select {
    height: 35px !important;
  }

  #credit {
    width: 200px !important;
  }

  #setup {
    margin-inline-start: -13px !important;
  }

  #transfer {
    width: 200px !important
  }

  #hcp-w {
    margin-top: -20px !important;
  }

  .xl\:mt-\[0vh\] {
    margin-top: 4vh !important;
  }

  .xl\:max-h-\[560px\] {
    max-height: 366px !important;
  }

  .xl-\:mt-\[2vh\] {
    margin-top: 6vh !important;
  }

  #pay-save-button {
    margin-top: 39px !important;
  }

  .xl\:gap-\[21px\] {
    gap: 0px !important;
  }

  .save-general {
    margin-top: 9px !important;
  }

  .xl\:ml-\[47px\] {
    margin-left: 67px !important;
  }

  .xl\:h-\[235px\] {
    height: 225px !important;
  }

  .py-2\.5 {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem;
  }

  .xl\:w-2\/12 {
    width: 31% !important;
  }

  .xl\:ml-8 {
    margin-left: 3rem !important;
  }

  .max-w-lg {
    max-width: 604px !important;
  }

  #agreements {
    height: 432px !important;

  }

  #col-9-auto {
    max-height: 605px !important;
  }

  #col-3 {
    height: 605px !important;
  }

  .modal-box section {
    width: 660px !important;
  }

  .xl\:max-h-\[535px\] {
    max-height: 493px !important;
  }

  .xl\:h-\[535px\] {
    max-height: 493px !important;
  }

  #step-name {
    font-size: 20px !important;
    letter-spacing: normal !important;
  }

  #point {
    padding-left: 0rem !important;
    padding: 0rem !important;
    padding-right: 0rem !important;
    margin-top: -20px;
  }

  #grid-state {
    padding-bottom: 0.25rem !important;
    padding-top: 0.25rem !important;
  }

  .px-8 {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
  }

  #width-tab {
    width: 330px;
  }

  #point-img {
    /* height: 345px !important;
    width: 411px !important; */
  }

  #hcp-back-button {
    margin-top: 19.7rem !important;

  }

  #hcps-back-button {
    margin-top: 9.8rem !important;

  }

  #hcps-save-button {
    margin-top: 9.8rem !important;

  }

  #py-22 {
    padding-bottom: 1.5rem !important;
  }

  #number-input {
    height: 44px !important;
  }

  .xl\:mt-\[356px\] {
    margin-top: 224px !important;
  }

  #backButton {
    margin-top: 4rem !important;

  }

  #payByCreditCardBtn {
    margin-top: 4rem !important;
  }

  #shift-back-button {
    margin-top: 38px !important;

  }

  #shift-save-button {
    margin-top: 38px !important;

  }

  .xl\:mt-\[451px\] {
    margin-top: 259px !important;
  }

  #mac {
    padding: 1rem !important;
  }

  #hcp-save-button {
    margin-top: 19.7rem !important;

  }

  .xl\:mt-\[423px\] {
    margin-top: 294px !important;
  }

  #legal-btn {
    margin-top: 24px !important;
  }

  #shift-img {
    height: 276px !important;
    width: 411px !important;
  }

  #payment-img {
    height: 276px !important;
    width: 411px !important;
    margin-top: -30px !important;
  }

  #contact-back-button {
    margin-top: 2.1rem !important;


  }

  .xl\:w-\[112\%\] {
    width: 106% !important;
  }

  #general-btn {
    margin-top: 25px !important;
    margin-left: 10px;
  }

  .xl\:mt-\[362px\] {
    margin-top: 175px !important;
  }

  .xl\:mt-5 {
    margin-top: 6px !important;
  }

  .xl\:pr-\[15px\] {
    padding-right: 0px !important;
  }

  .xl\:h-\[533px\] {
    height: 355px !important;
  }

  .xl\:pl-\[15px\] {
    padding-left: 0px !important;
  }

  #week-btn {
    margin-top: 169px !important;
    margin-left: -1px;
  }

  #legal {
    margin-top: -6px !important;
    margin-bottom: 14px !important;
  }

  #button-1 {
    padding-left: 0px;
    padding-top: 0rem !important;
  }

  .xl\:h-\[236px\] {
    height: 228px !important;
  }

  #contact-section {
    height: 365px !important;
  }

  .xl\:mt-\[5vh\] {
    margin-top: 3vh !important;
  }

  .step-1 {
    margin-top: -24px !important;
  }

  .xl\:h-\[74px\] {
    height: 71px !important;
  }

  #contact-save-button {
    margin-top: 2.1rem !important;

  }

  .modal {
    width: 46% !important;
  }


  .xl\:w-\[32\%\] {
    width: 46% !important;
  }

  #week {
    margin-top: 0px;
  }

  .mt-\[-15px\] {
    margin-top: -22px !important;
  }

  .step-1 {
    height: 5vh !important;
  }

  #step {
    margin-left: -5px !important;
    height: 42px;
    /* margin-top: 0.5px !important;
    margin-bottom: 0.5px !important; */
    margin-bottom: -7px !important;
    /* margin-top: -12px !important; */
  }

  #seperator-icon {
    margin-top: -22px;
    margin-bottom: -21px;
    margin-left: 15px;
  }

  #top {
    margin-top: -2px;
    padding: 1.3rem;
  }

  #save {
    margin-top: 140px;
  }

  #button {
    padding: 0px !important;
  }

  #gap {
    gap: 8rem !important;
  }

  #pay-rate {
    margin-top: 0.25rem;
    margin-left: 12rem;
  }
}