@charset "UTF-8";
[data-pc-preset=preset-1] {
  --heading-black: #191919;
  --heading-black-invert: #191919;
  --text-color: #707070;
  --dark-color: #272727;
  --light-border: #00000029;
  --so-toggle-bg: #EBEBEB;
}

[data-pc-theme=dark] {
  --heading-black: #191919;
  --heading-black-invert: #efefef;
  --text-color: #c2c2c2;
  --light-border: #c2c2c2;
  --dark-color: #dddddd;
  --so-toggle-bg: #2a3338;
}

.btn-check:checked + .so-size-btn {
  background-color: #4C8D6E !important;
  color: #fff !important;
  border: none !important;
}

.no-border {
  border: none !important;
}

.so-size-btn {
  background-color: #E0E7DC !important;
  color: var(--dark-color) !important;
  min-width: 50px;
  border: 1px solid #4C8D6E !important;
}
.so-size-btn:hover {
  border-color: #4C8D6E !important;
}

html,
body {
  height: 100%;
}

.product-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  padding: 0 15px;
}
.product-top .left a {
  color: var(--text-color);
  font-size: 14px;
}
.product-top .right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.product-top .right .text {
  color: var(--text-color);
  font-size: 14px;
  font-weight: bold;
}
.product-top .right .tab-bubble {
  background-color: #E1E6DD;
  color: var(--text-color);
  font-weight: bold;
}

.border-none {
  border: none !important;
}

.border-none {
  border: none !important;
}

.pc-container {
  top: 0;
}

.dashboard-accordion ul {
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--text-color);
}
.dashboard-accordion ul li {
  width: 45%;
}
.dashboard-accordion ul button {
  border: none !important;
  border-radius: 0px !important;
  background: transparent !important;
  font-size: 18px;
  color: var(--text-color);
  position: relative;
  text-transform: uppercase;
}
.dashboard-accordion ul button:hover {
  color: #4C8D6E;
}
.dashboard-accordion ul button.active {
  color: var(--text-color) !important;
}
.dashboard-accordion ul button.active::after {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -18px;
  border-bottom: 7px solid #4C8D6E !important;
}
.dashboard-accordion .tab-content {
  margin-top: 25px;
}
.dashboard-accordion .tab-content .so-add-more-closing {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: var(--heading-black);
  gap: 27px;
  background-color: #f8f8f8;
  border: 0.5px solid var(--text-color);
  padding: 0px 25px;
  border-radius: 9px;
  margin-bottom: 1.25rem;
}

.dashboard-accordion .tab-content .so-add-more-closing .icon {
  width: 48px;
}

.dashboard-accordion .tab-content .so-add-more-closing h3 {
  margin-bottom: 0;
}

.breadcrumb li {
  font-size: 18px;
}
.breadcrumb a {
  font-size: 18px;
  color: var(--heading-black);
  opacity: 0.3;
}
.breadcrumb .breadcrumb-item:last-child {
  opacity: 1 !important;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item a {
  opacity: 1;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  font-size: 18px;
  top: 0 !important;
}

.btn-outline-gray {
  background-color: transparent;
  border: 2px solid var(--light-border);
  border-radius: 12px;
  min-height: 56px;
  display: flex;
  align-items: center;
  max-width: 230px;
  padding: 0px 24px;
  gap: 18px;
  color: var(--text-color);
  transition: all 0.3s ease-in-out;
}
.btn-outline-gray span {
  font-size: 42px;
  font-weight: medium;
  line-height: 1em;
}
.btn-outline-gray:hover {
  background-color: var(--light-border);
  color: var(--heading-black);
}

.numbers {
  display: flex;
  align-items: center;
  gap: 50px;
}
.numbers .item {
  max-width: 60px;
}
.numbers .item small {
  line-height: 1em;
  margin-bottom: 0;
  font-size: 14px;
  color: var(--text-color);
}
.numbers .item p {
  font-size: 37px;
  color: var(--heading-black-invert);
  font-weight: bold;
  margin-bottom: 0;
}

.pc-sidebar {
  border-right: 1px solid var(--text-color);
}

.employee-top {
  display: flex;
  align-items: center;
  gap: 100px;
  margin-bottom: 40px;
}
@media (max-width: 600px) {
  .employee-top {
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
  }
}

.green-circle {
  background-color: #A1C4A5;
  height: 17px;
  width: 17px;
  border-radius: 50%;
}
.green-circle.with-outline {
  border: 1px solid #4C8D6E;
}

.yellow-circle {
  background-color: #F8A579;
  height: 17px;
  width: 17px;
  border-radius: 50%;
}
.yellow-circle.with-outline {
  border: 1px solid #a95a00;
}

.red-circle {
  background-color: #DC6262;
  height: 17px;
  width: 17px;
  border-radius: 50%;
}
.red-circle.with-outline {
  border: 1px solid #ff846f;
}

.so-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}
.so-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  visibility: hidden;
}
.so-switch input:checked + .slider, .so-switch input:focus + .slider {
  background-color: var(--so-toggle-bg);
}
.so-switch input:checked + .slider:before {
  background-color: #fff;
  background-image: url("../images/icons/sun.svg");
  background-repeat: no-repeat;
  background-position-x: 2px;
  background-position-y: 2px;
  transform: translateX(24px);
}
.so-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--so-toggle-bg);
  transition: 0.4s;
  border: 1px solid rgba(0, 0, 0, 0.2509803922);
}
.so-switch .slider::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: -1px;
  bottom: -1px;
  background-image: url("../images/icons/moon.svg");
  background-repeat: no-repeat;
  background-position-x: 2px;
  background-position-y: 2px;
  background-color: #545b63;
  border: 1px solid rgba(0, 0, 0, 0.2509803922);
  transition: 0.4s;
}
.so-switch .slider.round {
  border-radius: 34px;
}
.so-switch .slider.round:before {
  border-radius: 50%;
}

.payday-table thead th {
  background-color: unset;
  border: unset;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--text-color);
  font-weight: 500;
  position: relative;
  text-align: left;
}
.payday-table thead th h3 {
  font-size: 13px;
  font-weight: normal;
  margin-bottom: 0;
}
.payday-table thead th .rotated {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(-180deg);
  margin: 0;
}
.payday-table thead th .rotated input {
  transform: rotate(180deg);
}
.payday-table thead th:not(.no-sort) {
  cursor: pointer;
}
.payday-table thead th:not(.no-sort)::before {
  content: "▲";
  color: #d1d1d1;
  font-size: 7px;
  left: -5px;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
}
@media (max-width: 600px) {
  .payday-table thead th:not(.no-sort)::before {
    left: 0px;
  }
}
.payday-table thead th:not(.no-sort)::after {
  content: "▼";
  color: #d1d1d1;
  font-size: 7px;
  left: -5px;
  position: absolute;
  bottom: 45%;
  transform: translateY(50%);
}
@media (max-width: 600px) {
  .payday-table thead th:not(.no-sort)::after {
    left: 0px;
  }
}
.payday-table thead th:not(.no-sort).asc::before {
  color: #6C6C6C;
}
.payday-table thead th:not(.no-sort).desc::after {
  color: #6C6C6C;
}
.payday-table tbody td {
  font-size: 16px;
  color: #000;
}
.payday-table .bg-green {
  background-color: #4C8D6E;
  color: #fff;
}
.payday-table .btn {
  pointer-events: none;
  border-radius: 6px;
  font-size: 13px;
  min-width: 80px;
}

.payday-table thead th {
  background-color: unset;
  border: unset;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--text-color);
  font-weight: 500;
  position: relative;
  text-align: left;
}
.payday-table thead th h3 {
  font-size: 13px;
  font-weight: normal;
  margin-bottom: 0;
}
.payday-table thead th .rotated {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(-180deg);
  margin: 0;
}
.payday-table thead th .rotated input {
  transform: rotate(180deg);
}
.payday-table thead th:not(.no-sort) {
  cursor: pointer;
}
.payday-table thead th:not(.no-sort)::before {
  content: "▲";
  color: #d1d1d1;
  font-size: 7px;
  left: -5px;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
}
@media (max-width: 600px) {
  .payday-table thead th:not(.no-sort)::before {
    left: 0px;
  }
}
.payday-table thead th:not(.no-sort)::after {
  content: "▼";
  color: #d1d1d1;
  font-size: 7px;
  left: -5px;
  position: absolute;
  bottom: 45%;
  transform: translateY(50%);
}
@media (max-width: 600px) {
  .payday-table thead th:not(.no-sort)::after {
    left: 0px;
  }
}
.payday-table thead th:not(.no-sort).asc::before {
  color: #6C6C6C;
}
.payday-table thead th:not(.no-sort).desc::after {
  color: #6C6C6C;
}
.payday-table tbody td {
  font-size: 16px;
  color: #000;
}
.payday-table .bg-green {
  background-color: #4C8D6E;
  color: #fff;
}
.payday-table .btn {
  pointer-events: none;
  border-radius: 6px;
  font-size: 13px;
  min-width: 80px;
}

.so-emp-table thead th {
  background-color: unset;
  border: unset;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--text-color);
  font-weight: 500;
  position: relative;
}
.so-emp-table thead th:not(.no-sort) {
  cursor: pointer;
}
.so-emp-table thead th:not(.no-sort)::before {
  content: "▲";
  color: #d1d1d1;
  font-size: 7px;
  left: -5px;
  position: absolute;
  top: 15px;
}
@media (max-width: 600px) {
  .so-emp-table thead th:not(.no-sort)::before {
    left: 0px;
  }
}
.so-emp-table thead th:not(.no-sort)::after {
  content: "▼";
  color: #d1d1d1;
  font-size: 7px;
  left: -5px;
  position: absolute;
  bottom: 15px;
}
@media (max-width: 600px) {
  .so-emp-table thead th:not(.no-sort)::after {
    left: 0px;
  }
}
.so-emp-table thead th:not(.no-sort).asc::before {
  color: #6C6C6C;
}
.so-emp-table thead th:not(.no-sort).desc::after {
  color: #6C6C6C;
}
.so-emp-table .heading {
  font-size: 13px;
  color: #467FFE;
  font-weight: 500;
  text-transform: uppercase;
}
.so-emp-table td {
  border: unset;
  font-size: 13px;
  color: var(--text-color);
  font-weight: normal;
}
.so-emp-table td a {
  font-size: 13px;
  color: var(--text-color);
  font-weight: normal;
}
.so-emp-table td .bold {
  font-weight: 600;
}

#closingForm fieldset:not(:first-of-type) {
  display: none;
}
#closingForm fieldset {
  padding: 0px;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  min-height: 830px;
  position: absolute;
}
#closingForm #map {
  width: 100%;
  height: 50vh;
}
#closingForm #map .gm-bundled-control-on-bottom {
  bottom: unset !important;
  right: unset !important;
}
#closingForm #map .gm-bundled-control-on-bottom .gmnoprint > div {
  background-color: unset !important;
  box-shadow: unset !important;
}
#closingForm #map .gm-bundled-control-on-bottom .gmnoprint > div button {
  color: #fff !important;
}
#closingForm #map .gm-bundled-control-on-bottom .gmnoprint > div button img:last-child {
  display: block !important;
}
#closingForm #map .gm-bundled-control-on-bottom .gmnoprint > div button:first-child {
  border-radius: 10px 10px 0 0 !important;
  margin-bottom: 3px !important;
}
#closingForm #map .gm-bundled-control-on-bottom .gmnoprint > div button:last-child {
  border-radius: 0 0 10px 10px !important;
}
#closingForm #map .gm-bundled-control-on-bottom .gmnoprint > div > div {
  display: none !important;
}
#closingForm .header {
  text-align: center;
}
#closingForm label {
  font-size: 18px;
  color: var(--text-color);
  margin-bottom: 16px;
}
#closingForm label.error {
  color: red;
  width: 100%;
  text-align: center;
  margin: 10px auto 0;
  font-size: 14px;
}
#closingForm input,
#closingForm textarea {
  border: 1px solid #195C14;
  filter: drop-shadow(rgba(0, 0, 0, 0.1607843137) 0 5px 14px);
}
#closingForm .address,
#closingForm .address-display {
  margin: 30px auto 40px;
  padding: 0 0.75rem;
}
#closingForm .address h4,
#closingForm .address-display h4 {
  font-size: 14px;
  font-weight: bold;
}
#closingForm .address p,
#closingForm .address-display p {
  max-width: 60%;
  font-size: 14px;
  color: var(--text-color);
}
#closingForm .main {
  display: flex;
  align-items: start;
  justify-content: space-between;
}
#closingForm .main .sub-item {
  display: none;
}
#closingForm .main .sub-item.show {
  display: block;
}
#closingForm .install-date {
  margin-top: 12px;
  margin-bottom: 28px;
}
#closingForm .action-button {
  width: 100%;
}
#closingForm .action-button.disabled {
  pointer-events: none;
  opacity: 0.75;
}
#closingForm .time-input,
#closingForm .extra-labour,
#closingForm .remark,
#closingForm .picture {
  margin-bottom: 28px;
}
#closingForm .top {
  color: var(--text-color);
  font-size: 14px;
  position: relative;
  margin-bottom: 3.5rem;
}
#closingForm .top .bold {
  color: #000;
  font-weight: 600;
  margin-left: 5px;
}
#closingForm .top::after {
  content: "";
  width: 100vw;
  position: absolute;
  left: -2.25rem;
  bottom: -1.25rem;
  border: 0.5px solid #000;
}
#closingForm .customer-info {
  display: flex;
  align-items: center;
  gap: 38px;
  margin-bottom: 25px;
}
#closingForm .customer-info small {
  font-size: 14px;
  color: var(--text-color);
  margin-bottom: 13px;
  display: block;
}
#closingForm .customer-info h3 {
  font-size: 16px;
  margin-bottom: 0;
  font-weight: bold;
}
#closingForm .customer-info p {
  font-size: 14px;
  color: var(--text-color);
  margin-bottom: 0;
}
#closingForm .summary {
  margin-bottom: 10px;
}
#closingForm .summary th,
#closingForm .summary td,
#closingForm .summary tr {
  border: none;
  padding: 0;
}
#closingForm .summary th {
  font-size: 16px;
  font-weight: 500;
  padding: 10px 0;
}
#closingForm .summary th h4 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0;
}
#closingForm .summary th p {
  font-size: 16px;
  color: var(--text-color);
  margin-bottom: 0;
  font-weight: normal;
}
#closingForm .summary td {
  font-size: 16px;
  color: var(--text-color);
}
#closingForm .what-done .up-down-divider,
#closingForm .picture-installed .up-down-divider {
  margin-bottom: 30px;
}
#closingForm .picture-installed {
  margin-bottom: 30px;
}
#closingForm .picture-installed .pictures {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-wrap: wrap;
  gap: 20px;
}
#closingForm .picture-installed .pictures img {
  width: 104px;
  height: 104px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}
#closingForm .what-we-think .experience {
  padding: 27px 25px;
}
#closingForm .what-we-think .experience h2 {
  margin-bottom: 20px;
}
#closingForm .what-we-think .experience .notes {
  text-align: left;
}
#closingForm .what-we-think .item {
  width: 40px;
  height: 30px;
}
#closingForm .what-we-think .aligned-stars {
  justify-content: space-between;
}
#closingForm .what-we-think .hexagons {
  gap: 5px;
}
#closingForm .what-we-think .number {
  font-size: 12px;
  font-weight: normal;
}
#closingForm .checkbox-wrapper-24 label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  line-height: 30px;
}
#closingForm .checkbox-wrapper-24 label span {
  display: inline-block;
  position: relative;
  background-color: transparent;
  width: 30px;
  height: 30px;
  transform-origin: center;
  border: 1px solid #4C8D6E;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 18px;
  transition: background-color 150ms 200ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
}
#closingForm .checkbox-wrapper-24 input[type=checkbox] {
  display: none;
}
#closingForm .checkbox-wrapper-24 input[type=checkbox]:checked + label span {
  background-color: #4C8D6E;
}
#closingForm .checkbox-wrapper-24 input[type=checkbox]:checked + label span:after {
  width: 10px;
  background: #fff;
  transition: width 150ms ease 100ms;
}
#closingForm .checkbox-wrapper-24 input[type=checkbox]:checked + label span:before {
  width: 5px;
  background: #fff;
  transition: width 150ms ease 100ms;
}

.timeline .up-down-divider {
  margin-bottom: 30px;
}
.timeline .timeline-body .item {
  margin-bottom: 30px;
}
.timeline .timeline-body h4 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0;
}
.timeline .timeline-body p {
  color: var(--text-color);
  font-size: 14px;
  margin-bottom: 0;
}

.up-down-divider {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}
.up-down-divider h4 {
  font-size: 16px;
  font-weight: 500;
  margin: 15px 0 15px 10px;
}

.picture .added-imgs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.picture .added-imgs .items {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.picture .added-imgs .items .item {
  width: calc(50vw - 11px - 1em);
  max-width: 200px;
}

.picture .added-imgs .items .item .img{
  background: #eeeeee;
  border-radius: 12px;
  text-align: center;
  width: calc(50vw - 11px - 1em);
  height: calc(50vw - 11px - 1em);
  max-width: 200px;
  max-height: 200px;
}

.picture .added-imgs .items .item .img .lds-ripple {
  margin-top: 55px;
}

.picture .added-imgs .items img {
  width: calc(50vw - 11px - 1em);
  height: calc(50vw - 11px - 1em);
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
  max-width: 200px;
  max-height: 200px;
}

.plus-input {
  font-size: 67px !important;
  color: #fff !important;
  background-color: #D5DDD0;
  font-family: "Poppins";
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(50vw - 25px);
  height: calc(50vw - 25px);
  border-radius: 12px;
  margin-bottom: 0!important;
  max-width: 200px;
  max-height: 200px;
}

.plus-input input {
  width: 0;
  height: 0;
  border: none !important;
  visibility: hidden;
  visibility: hidden;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  z-index: 1000;
  display: none;
}

.overlay .lds-ripple {
  margin: 0 auto;
}
.input-with-location .left {
  width: 85%;
}
.input-with-location .right {
  width: 15%;
  text-align: right;
}
.input-with-location .right button {
  background-color: #4C8D6E !important;
  filter: drop-shadow(rgba(0, 0, 0, 0.1607843137) 0 5px 14px);
  border: 1px solid #195C14;
  border-radius: 6px !important;
  width: 48.59px;
  height: 48.59px;
  cursor: pointer;
}
.input-with-location .right button img {
  width: 20px;
}

.two-options-bubble {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .two-options-bubble {
    justify-content: space-between;
  }
}
.two-options-bubble label:not(.pills) {
  width: 100%;
}

.pills {
  border: 1px solid #4C8D6E;
  background-color: #E1E7DD;
  width: 165px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
  border-radius: 20px;
  font-size: 15px !important;
  color: #272727 !important;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
}
.pills input {
  height: 0;
  width: 0;
  visibility: hidden;
}
.pills:has(input:checked) {
  background-color: #4C8D6E;
  color: #fff !important;
}

.header h1 {
  margin-bottom: 0;
  padding: 0;
}
.header h4 {
  margin-bottom: 0;
  color: #fff;
  font-size: 20px;
  font-family: "Poppins", sans-serif;
}

.order-container {
  margin-top: 50px;
  align-items: stretch;
}
.order-container > .left {
  width: 25%;
  padding-right: 22.5px;
  border-right: 1px solid #D3D3D3;
}
.order-container > .left .search-input {
  margin-bottom: 40px;
}
.order-container > .left h3.heading {
  font-size: 16px;
  font-weight: medium;
  margin-top: 90px;
  padding-left: 20px;
  margin-bottom: 12px;
}
.order-container > .left h4 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 500;
}
.order-container > .left .time {
  margin-top: -40px;
  margin-bottom: 25px;
  color: var(--text-color);
}
.order-container > .left .time .accordion-item {
  border-top: unset;
  border-color: #D3D3D3;
}
.order-container > .left .time .accordion-button {
  background-color: #fff;
  border: 1px solid #D3D3D3;
  color: var(--text-color);
  font-size: 13px;
  box-shadow: unset !important;
  border-radius: 6px;
}
.order-container > .left .time label {
  font-size: 13px;
  color: var(--text-color);
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  text-transform: uppercase;
  position: relative;
}
.order-container > .left .time label input {
  width: 0;
  height: 0;
  visibility: hidden;
}
.order-container > .left .time label:has(input:checked) {
  color: #4C8D6E;
  font-weight: 500;
}
.order-container > .left .dates {
  margin-bottom: 25px;
}
.order-container > .left .dates input {
  border-color: #D3D3D3;
}
.order-container > .left .dates input:focus {
  box-shadow: unset !important;
}
.order-container > .left .dates label {
  background-color: #fff;
}
.order-container > .left .dates img {
  width: 25px;
}
.order-container > .left .action {
  margin-bottom: 50px;
}
.order-container > .left .action h4.with-badge {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.order-container > .left .action .item {
  position: relative;
  overflow: hidden;
  padding-left: 26px;
  margin-bottom: 15px;
  min-height: 48px;
  display: flex;
  align-items: center;
  border-radius: 6px;
}
.order-container > .left .action .item input {
  width: 0;
  height: 0;
  visibility: hidden;
}
.order-container > .left .action .item h3 {
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 500;
}
.order-container > .left .action .item:not(.active) {
  border: 1px solid rgba(0, 0, 0, 0.1607843137);
}
.order-container > .left .action .item::before {
  content: "";
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 12px;
  background-color: #000;
}
.order-container > .left .action .item.item-success::before {
  background-color: #4C8D6E;
}
.order-container > .left .action .item.item-muted::before {
  background-color: #F4F4F4;
}
.order-container > .left .action .item.item-danger::before {
  background-color: #D85942;
}
.order-container > .left .action .item.item-warning::before {
  background-color: #F8A579;
}
.order-container > .left .action .item:has(input:checked)::before {
  background-color: #4C8D6E;
}
.order-container > .right {
  width: 75%;
  padding-left: 40px;
}
.order-container > .right .what-done table tr:not(:last-child) td {
  padding-bottom: 30px;
}
.order-container > .right .what-done table h4 {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}
.order-container > .right .what-done table tfoot {
  border-top: 1px solid #000;
}
.order-container > .right .what-done table tfoot tr td {
  padding-top: 20px;
}
.order-container > .right .what-done table.with-tfoot tbody tr td {
  padding-bottom: 30px;
}
.order-container > .right .picture-installed .pictures {
  margin-top: 30px;
  display: flex;
  gap: 17px;
  flex-wrap: wrap;
}
.order-container > .right .what-done table tr:not(:last-child) td {
  padding-bottom: 30px;
}
.order-container > .right .what-done table h4 {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}
.order-container > .right .what-done table tfoot {
  border-top: 1px solid #000;
}
.order-container > .right .what-done table tfoot tr td {
  padding-top: 20px;
}
.order-container > .right .what-done table.with-tfoot tbody tr td {
  padding-bottom: 30px;
}
.order-container > .right .picture-installed .pictures {
  margin-top: 30px;
  display: flex;
  gap: 17px;
  flex-wrap: wrap;
}
.order-container > .right .buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.order-container > .right .buttons .right {
  display: flex;
  align-items: center;
  gap: 25px;
}
.order-container > .right .order-arrival-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--text-color);
  border-bottom: 1px solid var(--text-color);
  padding: 20px 15px;
  margin-top: 40px;
  margin-bottom: 25px;
}
.order-container > .right .order-arrival-info .item .text-orange {
  color: #D85942;
}
.order-container > .right .order-arrival-info .item .text-green {
  color: #4C8D6E;
}
.order-container > .right .order-arrival-info .item .text-orange {
  color: #D85942;
}
.order-container > .right .order-arrival-info .item .text-green {
  color: #4C8D6E;
}
.order-container > .right .order-arrival-info .left,
.order-container > .right .order-arrival-info .right {
  display: flex;
  align-items: center;
  gap: 15px;
  text-transform: uppercase;
}
.order-container > .right .order-arrival-info .right strong {
  font-size: 16px;
}
.order-container > .right .order-main-info {
  margin-bottom: 40px;
}
.order-container > .right .order-main-info small {
  display: block;
  font-size: 14px;
  color: var(--text-color);
}
.order-container > .right .order-main-info .customer-info {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
.order-container > .right .order-main-info .customer-info h3 {
  color: var(--dark-color);
  font-size: 16px;
  font-weight: medium;
  margin-bottom: 0;
}
.order-container > .right .order-main-info .customer-info h4 {
  font-size: 25px;
  -moz-columns: #191919;
       columns: #191919;
  font-weight: bold;
  margin-bottom: 0;
}
.order-container > .right .order-main-info .customer-info p {
  color: var(--text-color);
  font-size: 14px;
}
.order-container > .right .order-main-info .customer-info .details small {
  margin-bottom: 10px;
}
.order-container > .right .order-main-info .customer-info .sizes {
  display: flex;
  align-items: center;
  gap: 30px;
}
.order-container > .right .order-main-info .customer-info .sizes .item small {
  margin-bottom: 0;
}
@media (max-width: 430px) {
  .order-container {
    flex-direction: column;
  }
  .order-container > .left {
    width: 100%;
    padding: 0;
    border: none;
  }
  .order-container > .left .search-results {
    height: 285px;
    overflow-y: scroll;
    margin-bottom: 40px;
  }
  .order-container > .right {
    width: 100%;
    padding: 0;
  }
}
.order-container .products-summary th:first-child {
  width: 75%;
}
.order-container .products-summary.summary-2 th:first-child {
  width: auto;
}
.order-container .products-summary.summary-2 th:nth-child(2) {
  width: 75%;
}
.order-container .products-summary .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}
.order-container .products-summary .switch input {
  opacity: 0;
  width: 0;
  height: 0;
  visibility: hidden;
}
.order-container .products-summary .switch input:checked + .slider, .order-container .products-summary .switch input:focus + .slider {
  background-color: var(--so-toggle-bg);
}
.order-container .products-summary .switch input:checked + .slider:before {
  background-color: #4C8D6E;
  transform: translateX(24px);
}
.order-container .products-summary .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--so-toggle-bg);
  transition: 0.4s;
  border: 1px solid rgba(0, 0, 0, 0.2509803922);
}
.order-container .products-summary .switch .slider::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: -1px;
  bottom: -1px;
  background-color: white;
  border: 1px solid #4C8D6E;
  transition: 0.4s;
}
.order-container .products-summary .switch .slider.round {
  border-radius: 34px;
}
.order-container .products-summary .switch .slider.round:before {
  border-radius: 50%;
}
.order-container .products-summary .bold {
  font-size: 25px;
  font-weight: bold;
  color: #191919;
}
.order-container .products-summary .product-info {
  gap: 15px;
}
.order-container .products-summary .product-info .info h4 {
  font-size: 16px;
  color: var(--dark-color);
  text-transform: uppercase;
  margin-bottom: 0;
}
.order-container .products-summary .product-info .info p {
  margin: 0;
  font-size: 14px;
  color: var(--text-color);
}

.team-container {
  padding: 75px 20px;
}
.team-container .check-inputs {
  justify-content: start;
  gap: 40px;
  flex-wrap: wrap;
}
.team-container h3 {
  font-size: 20px;
  font-weight: 500;
  color: var(--dark-color);
  margin-bottom: 50px;
}
.team-container .heading-big-divider {
  border-top: 1px solid #D3D3D3;
  border-bottom: 1px solid #D3D3D3;
  display: flex;
  align-items: center;
  padding: 40px 0;
  margin: 50px 0;
}
.team-container .heading-big-divider.with-img {
  padding: 20px 0;
}
.team-container .heading-big-divider img {
  width: 75px;
  margin-right: 20px;
}
.team-container .heading-big-divider h3 {
  margin: 0;
}
.team-container .custom-width {
  max-width: 367px;
}
.team-container .custom-width .btn {
  width: 100%;
}

.member-selected .item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
  font-size: 18px;
  color: var(--text-color);
}
.member-selected .item img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
}
.member-selected .btn {
  margin-top: 20px;
}

.member-selection .dd-container {
  width: 100% !important;
  margin-bottom: 40px;
}
.member-selection .dd-container label {
  line-height: 1em !important;
}
.member-selection .dd-container a {
  gap: 20px;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: var(--text-color);
  font-weight: 400;
}
.member-selection .dd-container img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
}
.member-selection .dd-container .dd-options {
  width: 100% !important;
}
.member-selection .dd-container .dd-select {
  border: none;
  box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.1607843137);
  border-radius: 6px;
  background-color: #fff !important;
  width: 100% !important;
}

.btn-faded {
  background: #B4BFAD;
  border-radius: 6px;
  border: 1px solid #195C14;
  box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.1607843137);
  font-size: 12px;
  text-transform: uppercase;
  color: #030300;
  padding: 18px 40px;
}
.btn-faded:hover {
  background-color: #4C8D6E;
  color: #fff;
}

.team-container {
  padding: 75px 20px;
}
.team-container .check-inputs {
  justify-content: start;
  gap: 40px;
  flex-wrap: wrap;
}
.team-container h3 {
  font-size: 20px;
  font-weight: 500;
  color: var(--dark-color);
  margin-bottom: 50px;
}
.team-container .heading-big-divider {
  border-top: 1px solid #D3D3D3;
  border-bottom: 1px solid #D3D3D3;
  display: flex;
  align-items: center;
  padding: 40px 0;
  margin: 50px 0;
}
.team-container .heading-big-divider.with-img {
  padding: 20px 0;
}
.team-container .heading-big-divider img {
  width: 75px;
  margin-right: 20px;
}
.team-container .heading-big-divider h3 {
  margin: 0;
}
.team-container .custom-width {
  max-width: 367px;
}
.team-container .custom-width .btn {
  width: 100%;
}

.member-selected .item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
  font-size: 18px;
  color: var(--text-color);
}
.member-selected .item img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
}
.member-selected .btn {
  margin-top: 20px;
}

.member-selection .dd-container {
  width: 100% !important;
  margin-bottom: 40px;
}
.member-selection .dd-container label {
  line-height: 1em !important;
}
.member-selection .dd-container a {
  gap: 20px;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: var(--text-color);
  font-weight: 400;
}
.member-selection .dd-container img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
}
.member-selection .dd-container .dd-options {
  width: 100% !important;
}
.member-selection .dd-container .dd-select {
  border: none;
  box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.1607843137);
  border-radius: 6px;
  background-color: #fff !important;
  width: 100% !important;
}

.btn-faded {
  background: #B4BFAD;
  border-radius: 6px;
  border: 1px solid #195C14;
  box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.1607843137);
  font-size: 12px;
  text-transform: uppercase;
  color: #030300;
  padding: 18px 40px;
}
.btn-faded:hover {
  background-color: #4C8D6E;
  color: #fff;
}

.divider {
  height: 100%;
  width: 1px;
  background-color: var(--text-color);
  margin: 0 auto;
}

.track-address {
  min-width: 375px;
  border: 0.5px solid var(--text-color);
  background-color: #f8f8f8;
  padding: 20px 30px;
  border-radius: 9px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1440px) {
  .track-address {
    min-width: auto;
    padding: 20px 25px;
  }
}
.track-address p {
  font-size: 14px;
  color: var(--text-color);
  margin: 0;
}
.track-address h2 {
  margin: 0;
  font-size: 16px;
  color: var(--heading-black);
  line-height: 1.5em;
}

.track-driver {
  display: flex;
  min-width: 375px;
  gap: 15px;
  align-items: start;
  border: 0.5px solid var(--text-color);
  background-color: #f8f8f8;
  padding: 20px 30px;
  border-radius: 9px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1440px) {
  .track-driver {
    min-width: auto;
    padding: 20px 25px;
  }
}
.track-driver .left .driver-img {
  width: 83px;
}
.track-driver .left .driver-img img {
  border-radius: 50%;
}
.track-driver .right p {
  font-size: 14px;
  color: var(--text-color);
}
.track-driver .right h2 {
  margin: 0;
  font-size: 16px;
  color: var(--heading-black);
}

.track-badge {
  display: flex;
  min-width: 375px;
  gap: 15px;
  align-items: center;
  border: 0.5px solid var(--text-color);
  background-color: #f8f8f8;
  padding: 20px 30px;
  border-radius: 9px;
  position: relative;
  overflow: hidden;
}
.track-badge .left img {
  max-width: 100px;
}
.track-badge .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}
.track-badge .switch input {
  opacity: 0;
  width: 0;
  height: 0;
  visibility: hidden;
}
.track-badge .switch input:checked + .slider, .track-badge .switch input:focus + .slider {
  background-color: var(--so-toggle-bg);
}
.track-badge .switch input:checked + .slider:before {
  background-color: #4C8D6E;
  transform: translateX(24px);
}
.track-badge .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--so-toggle-bg);
  transition: 0.4s;
  border: 1px solid rgba(0, 0, 0, 0.2509803922);
}
.track-badge .switch .slider::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: -1px;
  bottom: -1px;
  background-color: white;
  border: 1px solid #4C8D6E;
  transition: 0.4s;
}
.track-badge .switch .slider.round {
  border-radius: 34px;
}
.track-badge .switch .slider.round:before {
  border-radius: 50%;
}
.track-badge .text-success {
  color: #4C8D6E !important;
}
.track-badge .left img {
  max-width: 100px;
}
.track-badge .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}
.track-badge .switch input {
  opacity: 0;
  width: 0;
  height: 0;
  visibility: hidden;
}
.track-badge .switch input:checked + .slider, .track-badge .switch input:focus + .slider {
  background-color: var(--so-toggle-bg);
}
.track-badge .switch input:checked + .slider:before {
  background-color: #4C8D6E;
  transform: translateX(24px);
}
.track-badge .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--so-toggle-bg);
  transition: 0.4s;
  border: 1px solid rgba(0, 0, 0, 0.2509803922);
}
.track-badge .switch .slider::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: -1px;
  bottom: -1px;
  background-color: white;
  border: 1px solid #4C8D6E;
  transition: 0.4s;
}
.track-badge .switch .slider.round {
  border-radius: 34px;
}
.track-badge .switch .slider.round:before {
  border-radius: 50%;
}
.track-badge .text-success {
  color: #4C8D6E !important;
}
@media (max-width: 1440px) {
  .track-badge {
    min-width: auto;
    padding: 20px 25px;
  }
}
.track-badge:before {
  content: "";
  height: 100%;
  width: 12px;
  background-color: #000;
  position: absolute;
  left: 0;
  top: 0;
}
.track-badge .right h3 {
  font-size: 14px;
  font-weight: bold;
  color: var(--heading-black);
  margin-bottom: 10px;
}
.track-badge .right .order-info {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}
.track-badge .right .steps p {
  margin-bottom: 0;
  font-size: 14px;
  color: var(--text-color);
}
.track-badge.badge-danger::before {
  background-color: #D85942;
}
.track-badge.badge-danger .right .order-info {
  color: #D85942;
}
.track-badge.badge-danger .switch .slider {
  background-color: #D85942;
}
.track-badge.badge-danger .switch .slider::before {
  border-color: #D85942;
}
.track-badge.badge-danger .switch input:checked + .slider:before {
  background-color: #D85942;
}
.track-badge.badge-muted::before {
  background-color: #F4F4F4;
  border-right: 1px solid #D3D3D3;
}
.track-badge.badge-muted .right .order-info {
  color: #D85942;
}
.track-badge.badge-danger .switch .slider {
  background-color: #D85942;
}
.track-badge.badge-danger .switch .slider::before {
  border-color: #D85942;
}
.track-badge.badge-danger .switch input:checked + .slider:before {
  background-color: #D85942;
}
.track-badge.badge-muted::before {
  background-color: #F4F4F4;
  border-right: 1px solid #D3D3D3;
}
.track-badge.badge-muted .right .order-info {
  color: #D85942;
}
.track-badge.badge-warning::before {
  background-color: #F8A579;
}
.track-badge.badge-warning .right .order-info {
  color: #F8A579;
}
.track-badge.badge-warning .switch .slider {
  background-color: #F8A579;
}
.track-badge.badge-warning .switch .slider::before {
  border-color: #F8A579;
}
.track-badge.badge-warning .switch input:checked + .slider:before {
  background-color: #F8A579;
}
.track-badge.badge-success::before {
  background-color: #4C8D6E;
}
.track-badge.badge-success .right .order-info {
  color: #4C8D6E;
}

.closing-support-badge {
  border: 0.5px solid var(--text-color);
  background-color: #f8f8f8;
  padding: 20px 30px;
  border-radius: 9px;
}
@media (max-width: 1440px) {
  .closing-support-badge {
    padding: 20px 15px;
  }
}
.closing-support-badge p {
  font-size: 14px;
  color: var(--text-color);
  margin-bottom: 0;
}
.closing-support-badge .support {
  display: flex;
  gap: 15px;
  max-width: 100%;
}
.closing-support-badge .support .left .driver-img {
  width: 83px;
}
.closing-support-badge .support .left .driver-img img {
  border-radius: 50%;
}
.closing-support-badge .support .right p {
  font-size: 14px;
  color: var(--text-color);
}
@media (max-width: 1440px) {
  .closing-support-badge .support .right p {
    font-size: 13px;
  }
}
.closing-support-badge .support .right h2 {
  margin: 0;
  font-size: 16px;
  color: var(--heading-black);
}
.closing-support-badge .experience h2 {
  margin-bottom: 20px;
}
.closing-support-badge .experience .notes {
  text-align: left;
}
.closing-support-badge .item {
  width: 40px;
  height: 30px;
}
@media (max-width: 1440px) {
  .closing-support-badge .item {
    width: 30px !important;
    height: 20px;
  }
}
.closing-support-badge .aligned-stars {
  justify-content: space-between;
}
.closing-support-badge .hexagons {
  gap: 5px !important;
  margin-bottom: 0 !important;
}
.closing-support-badge .number {
  font-size: 12px;
  font-weight: normal;
}

.bubble-muted {
  width: 24px;
  height: 27px;
  border-radius: 12px;
  background-color: #E1E6DD;
  color: var(--text-color);
  font-size: 14px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab-bubble {
  width: 24px;
  height: 27px;
  background-color: #eff0f2;
  color: #000;
  font-size: 13px;
  font-weight: medium;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-left: 8px;
}

.nav-link.active .tab-bubble {
  background-color: var(--bs-primary);
  color: #fff;
}

.btn-outline-green {
  border: 2px solid #4C8D6E;
  border-radius: 27px;
  color: #4C8D6E;
  font-size: 17px;
  text-transform: uppercase;
  padding: 10px 50px;
  transition: all 0.3s ease-in-out;
}
@media (max-width: 800px) {
  .btn-outline-green {
    font-size: 15px;
    padding: 10px 25px;
  }
}
.btn-outline-green:hover {
  color: #fff;
  background-color: #4C8D6E;
}

.btn-green {
  color: #fff;
  background-color: #4C8D6E;
  font-size: 17px;
  text-transform: uppercase;
  padding: 10px 50px;
  transition: all 0.3s ease-in-out;
  border: 2px solid #4C8D6E;
  border-radius: 27px;
}
@media (max-width: 800px) {
  .btn-green {
    font-size: 15px;
    padding: 10px 25px;
  }
}
.btn-green:hover {
  color: #4C8D6E;
  background-color: #fff;
  border: 2px solid #4C8D6E;
}

.polygon {
  display: inline-block;
  width: 39px;
  height: 39px;
  position: relative;
  margin-left: 5px;
}
.polygon span {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 12px;
}
.polygon svg {
  position: absolute;
  left: 0;
  top: 3.5px;
  fill: #4C8D6E;
}

.btn-triangle-green {
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 51%);
          clip-path: polygon(0 0, 0 100%, 100% 51%);
  border: 1px solid var(--text-color);
  border-radius: unset !important;
}

.dots {
  gap: 15px;
  margin-right: 20px;
}
.dots > label {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}
.dots > label input {
  position: absolute;
  z-index: 1;
  visibility: hidden;
  cursor: pointer;
}
.dots > label.active:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  height: 8px;
  width: 8px;
  border-radius: 50%;
}
.dots .red-dot {
  background-color: #FF7146;
}
.dots .yellow-dot {
  background-color: #FFAA46;
}
.dots .green-dot {
  background-color: #4C8D6E;
}

.bottom-text {
  padding: 0.75rem;
  margin: 75px auto;
}
.bottom-text p {
  margin-bottom: 0;
  color: var(--text-color);
  font-size: 14px;
}

.customer-img img {
  width: 85px;
  height: 85px;
  border-radius: 50%;
}

.mb-80p {
  margin-bottom: 80px;
}

.check-inputs {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.check-inputs label {
  position: relative;
  border: 1px solid #D3D3D3;
  border-radius: 20px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-width: 70px;
  min-height: 105px;
  cursor: pointer;
}
.check-inputs label::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2509803922);
}
.check-inputs label img {
  width: 50px;
  height: 50px;
}
.check-inputs label.active {
  background-color: #F4F4F4;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
}
.check-inputs label.active::after {
  background-color: #4C8D6E;
  border-color: #3D6F58;
}
.check-inputs label input {
  width: 0;
  height: 0;
  visibility: hidden;
}

.btn-yellow {
  background-color: #F1B65E;
}
.btn-yellow:hover {
  background-color: #e89314;
}

.plus.btn {
  border-radius: 7px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 37px;
  color: #fff;
  margin: 24px 0;
}

.search-box .quants {
  border: none;
  box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.1607843137);
  border-radius: 6px;
  min-height: 57px;
  text-align: center;
  font-size: 21px;
  color: var(--heading-black);
  font-weight: bold;
}

.search-input input {
  box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.1607843137);
  border-radius: 6px;
  border: none;
  background: url("data: image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb24tdGFibGVyLXNlYXJjaCIgd2lkdGg9IjQ0IiBoZWlnaHQ9IjQ0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2U9IiMyYzNlNTAiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+CiAgPHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0iTTEwIDEwbS03IDBhNyA3IDAgMSAwIDE0IDBhNyA3IDAgMSAwIC0xNCAwIiAvPgogIDxwYXRoIGQ9Ik0yMSAyMWwtNiAtNiIgLz4KPC9zdmc+");
  min-height: 57px;
  background-size: 17px;
  background-repeat: no-repeat;
  background-position-x: 15px;
  background-position-y: 20px;
  padding-left: 40px;
}

.search-results .item {
  margin-bottom: 8px;
  border-radius: 6px;
  padding: 16px;
  cursor: pointer;
}
.search-results .item h3.order-number {
  font-size: 16px;
  font-size: medium;
  margin-bottom: 0;
}
.search-results .item p {
  margin-bottom: 0;
  color: var(--text-color);
}
.search-results .item.active, .search-results .item:hover {
  background-color: rgba(199, 199, 199, 0.19);
}
.search-results.with-badge .item {
  position: relative;
  overflow: hidden;
  padding-left: 26px;
}
.search-results.with-badge .item:not(.active) {
  border: 1px solid rgba(0, 0, 0, 0.1607843137);
}
.search-results.with-badge .item::before {
  content: "";
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 12px;
  background-color: #000;
}
.search-results.with-badge .item.item-gray::before {
  background-color: 	#808080;
}
.search-results.with-badge .item.item-success::before {
  background-color: #4C8D6E;
}
.search-results.with-badge .item.item-muted::before {
  background-color: #F4F4F4;
}
.search-results.with-badge .item.item-danger::before {
  background-color: #D85942;
}
.search-results.with-badge .item.item-warning::before {
  background-color: #F8A579;
}

.home .track-badge {
  margin-bottom: 1.25rem;
}
@media (min-width: 1200px) {
  .home {
    margin-top: 50px;
  }
  .home .home-track {
    margin-top: 50px;
  }
}

.news.top-margin {
  margin-top: 50px;
}
.news .content h2 {
  color: var(--heading-black);
}
.news .content p {
  color: var(--text-color);
}
.news .back {
  font-size: 14px;
  color: var(--text-color);
  margin-bottom: 30px;
  display: block;
}
.news .back:hover {
  color: #4C8D6E;
}
.news .img {
  border-radius: 10px;
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1607843137);
}
.news .img img {
  border-radius: 8px;
  width: 100%;
  max-height: 450px;
  -o-object-fit: cover;
     object-fit: cover;
}

.img-full {
  overflow: hidden;
  margin: 50px auto;
}
.img-full img {
  width: 100%;
  max-height: 800px;
  -o-object-fit: cover;
     object-fit: cover;
}

.video-full {
  margin: 50px auto;
}
.video-full iframe {
  width: 100%;
  min-height: 800px;
}

.cart {
  margin-top: 50px;
}
.cart #profile {
  margin-bottom: 0 !important;
  padding-bottom: 20px;
}
.cart #profile .profile-pic {
  margin: 0 !important;
}
.cart #profile .profile-details {
  margin: 0 !important;
}
@media (max-width: 600px) {
  .cart {
    margin-top: 35px;
  }
}
.cart .navs {
  margin: 30px auto;
}
.cart .navs a {
  padding-top: 0;
  padding-bottom: 0;
  color: var(--text-color);
  font-weight: normal;
  font-size: 14px;
}
.cart .navs h5 {
  color: var(--text-color);
}

.products-table {
  margin-bottom: 30px;
}
.products-table th {
  background-color: unset !important;
  border-color: var(--text-color) !important;
  font-size: 16px !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.products-table td {
  border: none !important;
}
.products-table td:nth-child(2) h5, .products-table td:nth-child(3) h5 {
  font-size: 28px;
}
.products-table td .media img {
  height: 50px;
  -o-object-fit: cover;
     object-fit: cover;
}
.products-table td:last-child a {
  font-weight: 100;
  font-size: 28px;
}
.products-table tbody {
  border-bottom: 1px solid var(--text-color);
}

.order-summary {
  padding: 0.5rem;
}
.order-summary h5 {
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.order-summary table th,
.order-summary table td {
  border: none;
  padding: 0 0 20px 0;
}
.order-summary table tr:last-child td {
  padding-bottom: 0;
}
.order-summary table .bold {
  font-size: 29px;
  font-weight: bold;
}
.order-summary table .bold.danger {
  color: #B22B2B;
}
.order-summary table .delivery {
  font-size: 16px;
  font-weight: bold;
}

.what-done .bold {
  font-size: 21px;
  font-weight: bold;
}

.cart-order-form {
  margin-top: 35px;
  margin-bottom: 80px;
}

.item-section {
  border-top: 1px solid var(--text-color);
  border-bottom: 1px solid var(--text-color);
  padding: 16px 0;
  margin-bottom: 1em;
}
@media (min-width: 1200px) {
  .item-section {
    border: unset;
  }
}
.item-section .item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 1.25rem;
}
.item-section .item .left img {
  min-width: 104px;
  border-radius: 6px;
  border: 0.5px solid var(--text-color);
}
.item-section .item .right {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--text-color);
  padding-bottom: 16px;
  gap: 20px;
}
.item-section .item .right .text h3 {
  font-size: 14px;
  font-weight: bold;
  color: #191919;
  margin-bottom: 5px;
}
.item-section .item .right .text p {
  font-size: 14px;
  font-weight: normal;
  color: var(--text-color);
  margin-bottom: 0;
}
.item-section .item .right .button .btn {
  width: 20px;
  height: 24px;
}
.item-section .more {
  font-size: 17px;
  color: #cecece;
  font-weight: medium;
}

.experience {
  background-color: #f8f8f8;
  border-radius: 9px;
  border: 0.5px solid var(--text-color);
  padding: 24px 0;
  text-align: center;
  margin-bottom: 1.25rem;
}
@media (min-width: 1200px) {
  .experience {
    margin: 50px auto;
  }
}
.experience h2 {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #191919;
}
.experience h3 {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #4C8D6E;
  margin-bottom: 15px;
}
.experience .hexagons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
}
.experience .hexagons .item {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 56px;
  position: relative;
  margin-bottom: 0 !important;
}
.experience .hexagons .item svg {
  width: 100%;
  height: 100%;
}
@media (max-width: 1440px) {
  .experience .hexagons .item {
    width: 40px;
  }
}
.experience .hexagons .item input {
  width: 0;
  height: 0;
  visibility: hidden;
}
.experience .hexagons .item svg {
  stroke: var(--text-color);
  height: auto;
}
.experience .hexagons .item .number {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.experience .hexagons .item.active, .experience .hexagons .item:hover {
  cursor: pointer;
  color: #fff;
}
.experience .hexagons .item.active svg, .experience .hexagons .item:hover svg {
  stroke: #000;
  stroke-width: 3px;
  fill: #4C8D6E;
}
.experience .hexagons .item.active .number, .experience .hexagons .item:hover .number {
  color: #fff;
}
.experience .btn {
  min-width: 340px;
  margin: 0 auto;
}
.experience .so-form {
  text-align: left;
  padding: 0 22px;
}
.experience .so-form p {
  font-size: 14px;
  color: var(--text-color);
}
.experience .so-form .btn {
  margin-top: 20px;
  min-width: 170px;
}

.img-card {
  border: 1px solid #E7EAEE;
  border-radius: 12px;
  padding: 6px;
  text-align: center;
}
.img-card img {
  border-radius: 9px;
}
@media (min-width: 1200px) {
  .img-card img {
    width: 100%;
    margin-bottom: 20px;
  }
}
.img-card .text {
  font-size: 18px;
  color: #000;
  font-weight: medium;
  margin: 15px auto;
}

.spacer {
  height: 50px;
}

.status-container .top-bar {
  background: linear-gradient(318deg, rgb(77, 141, 110) 0%, rgb(95, 178, 136) 61%);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 15px 25px;
  position: relative;
}
.status-container .top-bar .left {
  display: flex;
  gap: 20px;
}
.status-container .top-bar .left .nav-btn {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  color: #000;
  font-size: 30px;
  border: 1px solid var(--text-color);
  border-radius: 6px;
  cursor: pointer;
}
.status-container .top-bar .left .greeting {
  color: #fff;
  font-size: 21px;
  font-weight: 500;
  line-height: 24px;
  font-family: "Poppins";
  max-width: 200px;
}
.status-container .top-bar .right {
  position: absolute;
  right: 25px;
}
.status-container .top-bar .right .img-box {
  position: relative;
}
.status-container .top-bar .right .img-box img {
  width: 102px;
  height: 102px;
  border-radius: 50%;
}
.status-container .top-bar .right .img-box .hexagons {
  position: absolute;
  bottom: -10px;
  left: -12px;
}
.status-container .top-bar .right .img-box .hexagons .item {
  position: relative;
}
.status-container .top-bar .right .img-box .hexagons .item .number {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: #fff;
}
.status-container .top-bar .right .img-box .hexagons .item svg {
  width: 60px;
  fill: #4C8D6E;
  height: auto;
}
.status-container .top-bar .menu-items {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  background-color: #f8f8f8;
  display: none;
  z-index: 10;
}
.status-container .top-bar .menu-items ul {
  list-style: none;
  padding: 25px;
}
.status-container .top-bar .menu-items ul li {
  margin-bottom: 1rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 1rem;
}
.status-container .top-bar .menu-items ul a {
  color: var(--text-color);
  font-size: 18px;
  font-weight: 500;
}
.status-container .top-bar .menu-items ul a:hover {
  color: #4C8D6E;
}
.status-container .content {
  margin-top: 280px;
  margin-bottom: 200px;
}
.status-container .content .so-divider {
  border: 1px solid var(--text-color);
  margin-bottom: 24px;
}
.status-container .content .selectors {
  margin-bottom: 16px;
}
.status-container .content .selectors .left,
.status-container .content .selectors .right {
  width: 45%;
}
.status-container .content .selectors .dropdown-menu label {
  position: relative;
  z-index: 2;
}
.status-container .content .selectors .dropdown-menu label span {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  z-index: 1;
}
.status-container .content .selectors .dropdown-menu label input {
  visibility: hidden;
}
.status-container .content .selectors .dropdown-menu label input:checked + span {
  background-color: #c1c1c1;
  opacity: 0.5;
  border-radius: 4px;
}
.status-container .content .selectors .btn {
  background-color: #f8f8f8 !important;
  max-width: 192px;
  width: 100%;
  border-radius: 6px !important;
  border: 1px solid #4C8D6E;
  filter: unset !important;
  height: auto;
  color: var(--heading-black);
  display: flex;
  gap: 5px;
  flex-direction: column;
  padding: 16px 22px !important;
  line-height: 1.25em !important;
  font-size: 14px;
  text-transform: uppercase;
  position: relative;
}
.status-container .content .selectors .btn::after {
  position: absolute;
  right: 13px;
  top: 30%;
  transform: translateX(-50%);
  font-size: 20px;
}
.status-container .content .selectors .btn p {
  line-height: 1em;
  margin: 0;
  color: #4C8D6E;
}
.status-container .content .content-body .track-badge {
  margin-bottom: 10px;
}

.pictures .item .img .gphoto {
  height: 100px;
  width: 100px;
  border-radius: 10px;
}


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.modal-content, #caption {  
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}





@media (min-width: 1200px) {
  #profile {
    padding: 0;
    height: auto;
    width: auto;
  }
  #profile .profile-pic {
    padding: 0;
  }
  #profile .profile-pic img {
    max-width: unset;
    height: 200px;
    width: 200px;
    margin: 0 auto;
    position: unset;
  }
}
@media (max-width: 430px) {
  .order-container .right .order-arrival-info {
    flex-wrap: wrap;
    gap: 20px;
  }
  .news .back {
    margin-left: 10px;
  }
  .news .content {
    padding: 20px 30px;
  }
  .news .content h2 {
    font-size: 14px;
    margin-bottom: 18px;
    font-weight: bold;
  }
  .news .content p {
    font-size: 14px;
  }
  .news .content p:last-child {
    margin-bottom: 0;
  }
  .img-full {
    margin: 30px auto;
  }
  .video-full {
    margin: 30px auto;
  }
  .video-full iframe {
    min-height: 230px;
  }
}/*# sourceMappingURL=new-styles.css.map */


.lds-ripple {
  box-sizing: border-box;
  background: url('/images/icons/loader.svg')
}
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 80px;
}

.img {
    position: relative;
    display: inline-block;
}

.delete-image {
    position: absolute;
    top: 5px; 
    right: 5px;
    color: white !important; 
    background-color: #4C8D6E;
    border-radius: 30%; 
    padding: 0px 7px; 
    text-decoration: none; 
    font-size: 16px; 
}

.delete-image:hover {
    color: #fff; 
    cursor: pointer;
}