.ribbon {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  overflow: hidden;
  width: 93px;
  height: 93px;
  text-align: right;
}

.ribbon span {
  font-size: 0.7rem;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  line-height: 24px;
  transform: rotate(45deg);
  width: 125px;
  display: block;
  background: #79a70a;
  background: linear-gradient(#ff902c 0%, #f25424 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 17px;
  right: -29px;
}

.ribbon span::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: -1;
  border-left: 3px solid #f25424;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #f25424;
}

.ribbon span::after {
  content: '';
  position: absolute;
  right: 0%;
  top: 100%;
  z-index: -1;
  border-right: 3px solid #f25424;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #f25424;
}

#spinner-div {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  padding-top: 45vh;
  top: 0;
  left: 0;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 1000;
}

.header {
  background-color: rgb(255 255 255 / 40%) !important;
  backdrop-filter: blur(24px) !important;
  padding: 16px 0 !important;
}

.hero {
  background-color: #F5F9FB !important;
  color: #434E54 !important;
}

.hero h2 {
  color: #151D21 !important;
}

.about .content ul li {
  margin-top: 18px !important;
}

.section-title {
  font-size: 2em;
  font-weight: 700;
  line-height: 51.2px;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration-skip-ink: none;
  margin-bottom: 48px;
}

.section-subtitle {
  font-size: 1.5em;
  font-weight: 600;
  text-align: center;
  margin-bottom: 16px;
}

.section-sub {
  font-size: 1.25em;
  font-weight: 600;
  margin-bottom: 8px;
}

.inquiry-panel {
  background-color: #EBF2F7;
  border-radius: 20px;
  padding: 48px 144px;
}

@media screen and (max-width: 756px) {
  .inquiry-panel {
    padding: 36px;
  }
}

.about .content h3 {
  font-weight: 600 !important;
  font-size: 32px !important;
  line-height: 41.8px !important;
  color: #0B1217 !important;
}

.section-header h2 {
  color: #0B1217 !important;
}

.section-header h2:after {
  background: #9F9F9F !important;
}

.core-values .card {
  border: 0 !important;
  background: rgba(245, 249, 251, 0.7) !important;
  border-radius: 20px !important;
  box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.25) inset, 0px 4px 4px 0px rgba(188, 206, 210, 0.16);
  backdrop-filter: blur(6px);
}

.core-values .card p {
  margin-bottom: 0 !important;
}

.core-values .card h3 {
  font-size: 24px !important;
  font-weight: bold;
  text-align: left;
}

.core-values .card-text {
  text-align: left;
}

.news .card {
  border: 1px solid #E2EAEF;
  background: #fff;
  position: relative;
  border-radius: 20px;
  height: 100%;
}

.news .card:hover {
  background-color: #F5F9FB;
}

.news .card .card-img {
  overflow: hidden;
  margin-bottom: 15px;
  border-radius: 0;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.news .card .card-img img {
  transition: 0.3s ease-in-out;
}

.news .card h3 {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 5px;
  padding: 10px 30px;
  text-transform: none;
}

.news .card a {
  color: #0B1217;
  transition: 0.3;
}

.news .card a:hover {
  color: var(--color-primary);
}

.news .card p {
  padding: 0 30px;
  margin-bottom: 30px;
  color: var(--color-secondary);
  font-size: 15px;
}

.news .card:hover .card-img img {
  transform: scale(1.1);
}

.dot {
  height: 5px;
  width: 5px;
  background-color: #1D98B3;
  border-radius: 50%;
  display: inline-block;
  margin-left: 6px;
  margin-bottom: 1px;
  margin-right: 6px;
}

img.round-corners {
  border-radius: 26px;
}

.faq .accordion-button {
  border-radius: 10px !important;
  color: #0B1217 !important;
  background: #EBF2F7 !important;
}

.faq .accordion-body {
  padding: 15px 30px 25px 60px;
  color: #595958;
}

.faq .accordion-button:after {
  top: 25px !important;
  right: 30px !important;
}

.hero form {
  background: #fff;
  border-top-right-radius: 10px;
  border-top-left-radius: 0 !important;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.hero form .btn-primary {
  background-color: #262626;
  margin-top: 2px;
}

.hero form .btn-primary:hover {
  background-color: #131313;
}

.scroll-top {
  background: #24BEE0;
}

.scroll-top:hover {
  background: #0BA5EC;
}

#filtertariff {
  background-color: #262626 !important;
  height: 36px;
}

#filtertariff:hover {
  background-color: #131313 !important;
}

.btn-black {
  background-color: #262626 !important;
  margin-bottom: 1px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.btn-black:hover {
  background-color: #131313 !important;
  color: #fff;
}

.btn-grey {
  background-color: #F5F9FB !important;
  border: 1px solid #0B1217;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #434E54;
}

.btn-grey:hover {

  background-color: #0B1217 !important;
  border: 1px solid #0B1217;
  color: #F5F9FB;
}

.btn-primary {
  --bs-btn-border-color: none !important;
}

.img-about-1 {
  width: 103px;
  height: 88.12px;
  margin: 35px 10px 0 7px;
}

.img-about-2 {
  width: 64px;
  height: 64px;
  margin-right: 10px;
}

.img-contact {
  width: 34px;
  height: 34px;
  margin-right: 25px;
}

.form-select-lg~.select2-container--bootstrap-5 .select2-selection {
  width: 98% !important;

}

.breadcrumbs nav {
  background-color: #EBF2F7 !important;
}

.breadcrumbs .page-header:before {
  background-color: rgba(14, 29, 52, 0);
}

input[readonly]:not(.td-input),
select[readonly] {
  pointer-events: none;
  background-color: #eee;
  cursor: no-drop;
}

input.td-input {
  pointer-events: none;
  cursor: no-drop;
}

.alert-warning {
  --bs-alert-color: #0B1217;
  --bs-alert-bg: #F5F9FB;
  --bs-alert-border-color: #F5F9FB;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

input[type=text]:not(#txt-username, #txt-password, #txt-confirmpass, #txt-custom1, #txt-custom2),
textarea {
  text-transform: uppercase;
}

select[readonly] option:not([selected]) {
  display: none;
}

select[readonly].select2-hidden-accessible+.select2-container {
  pointer-events: none;
  touch-action: none;
}

select[readonly].select2-hidden-accessible+.select2-container .select2-selection {
  background: #eee;
  box-shadow: none;
}

select[readonly].select2-hidden-accessible+.select2-container .select2-selection__arrow,
select[readonly].select2-hidden-accessible+.select2-container .select2-selection__clear {
  display: none;
}

.form-label {
  font-weight: 500;
}

.table>:not(caption)>*>* {
  font-size: 14px;
}

.get-a-quote {
  background: #F5F9FB;
  overflow: hidden;
}

.get-a-quote .php-email-form {
  background: #F5F9FB !important;
  padding: 40px 0;
  height: 100%;
}

.get-a-quote .php-email-form {

  border-radius: 20px;
}

.get-a-quote .php-email-form h3 {
  font-size: 24px;
  font-weight: 600;
  text-transform: none;
}

.get-a-quote .php-email-form h4 {
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  margin-bottom: 10px;
  ;
}

.get-a-quote .php-email-form input.is-valid {
  padding-right: 30px;
}

.get-a-quote .php-email-form input[type=text]:not(#txt-password, #txt-confirmpass, .td-input),
.get-a-quote .php-email-form input[type=number],
.get-a-quote .php-email-form input[type=email],
.get-a-quote .php-email-form input[type=tel],
.get-a-quote .php-email-form textarea,
.get-a-quote .php-email-form select,
.get-a-quote .php-email-form .select2-selection {
  border-radius: 8px !important;
}

.get-a-quote .php-email-form input#txt-password,
.get-a-quote .php-email-form input#txt-confirmpass,
.get-a-quote .php-email-form input.td-input {
  border-radius: 8px 0 0 8px !important;
}

.get-a-quote .php-email-form button[type=submit] {
  background-color: #262626 !important;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.get-a-quote .php-email-form button[type=submit]:hover {
  background-color: #131313 !important;
}

.get-a-quote .php-email-form .sent-message {
  margin-bottom: 0;
}

.btn-white {
  background-color: #fff !important;
  border: 1px solid #0B1217;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  color: #434E54;
}

.btn-white:hover {
  background-color: #fff !important;
  border: 1px solid #0B1217;
  color: #434E54;
}

.container-fluid.container-width-large {
  padding: 0 150px;
}

@media (min-width: 1280px) {

  .navbar a:hover,
  .navbar .active,
  .navbar .active:focus,
  .navbar li:hover>a {
    color: #262626;
    font-size: 14px;
    font-weight: 600;
    line-height: 22.4px;
    letter-spacing: 0.01em;
  }

  .navbar a,
  .navbar a:focus {
    color: #595959;
    font-size: 14px;
    font-weight: 400;
    line-height: 22.4px;
    letter-spacing: 0.01em;
  }
}

.pac-container {
  background-color: #FFF;
  z-index: 2001;
  position: fixed;
  display: inline-block;
  float: left;
}

.modal {
  z-index: 2000;
}

.modal-backdrop {
  z-index: 1000;
}

.marketplace {

}

.marketplace-card {
  --bs-card-border-color: #fff !important;
  --bs-card-border-radius: 1.375rem !important;
}

.marketplace-description {
  color: #595959;
}

.marketplace-title {
  color: #000;
  font-size: 14px;
  font-weight: 600;
}

.marketplace-detail {
  color: #000;
  font-size: 12px;
  border-radius: 12px;
  background: var(--greyscale-neutral-95, #EBF2F7);
}

.marketplace .accordion-button {
  border-radius: 6px !important;
  color: #0B1217 !important;
  background: #EBF2F7 !important;

  border: #dee2e6;
  border-style: solid;
  border-width: 1px;
  height: 30px;
}

.marketplace .accordion-body {
  padding: 0px 0px;
  color: #595958;
}

.marketplace .accordion-button {
  padding: .5rem 1rem !important;
}

.marketplace .accordion-button:after {
  top: 25px !important;
  right: 30px !important;
}

.marketplace .accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
  border-radius: 6px 6px 0px 0px !important;

  box-shadow: none;
}

.marketplace .list-group-item:first-child {
  border-top-left-radius: unset !important;
  border-top-right-radius: unset !important;
}

.marketplace .table-striped>tbody>tr:nth-child(2n+1)>td,
.table-striped>tbody>tr:nth-child(2n+1)>th {

  background-color: rgba(235, 242, 247, .1) !important;
}

.uk-slider-items:not(.uk-grid) {
  margin: 0 0 0 10px !important;
}

.ahref-mk-title {
  text-decoration: none !important;
}

.ahref-mk-title :hover {
  color: #916B40;
}

.carousel-indicators [data-bs-target] {
  background-color: #000 !important;
}

.light-orange {
  color: #FF6726;
}

@media only screen and (min-width: 768px) {
  .uk-panel {
    width: 310px !important;
  }

  .div-mk-detail {
    padding: 0px 25px;
  }
}

@media only screen and (min-width: 600px) {
  .div-mk-detail {
    padding: 0px 25px;
  }
}

@media only screen and (max-width: 600px) {
  .uk-panel {
    margin-right: 10px;
  }

  .div-mk-detail {
    padding: 0px 25px;
  }
}

.fab-contact-container {
  position: fixed;
  bottom: 24px;
  right: 1%;
  z-index: 800;
  display: flex;
  align-items: flex-end;
}

.fab-options-menu {
  position: absolute;
  right: 70px;
  bottom: 0;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(15px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.fab-options-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.fab-menu-item {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  text-decoration: none;
  color: #333333;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.fab-menu-item:hover {
  background-color: #f5f9fb;
  color: #262626;
}

.fab-menu-item img {
  width: 20px;
  height: 20px;
  margin-right: 12px;
}

.fab-divider {
  margin: 4px 0;
  border: none;
  border-bottom: 1px solid #e0e0e0;
}

.fab-main {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF9B44 0%, #FF6726 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(255, 103, 38, 0.4);
  position: relative;
  transition: transform 0.2s;
}

.fab-main:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(255, 103, 38, 0.5);
}

.fab-main::after {
  content: attr(data-title);
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #333333;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
}

.fab-main:hover::after {
  opacity: 1;
  visibility: visible;
}

.fab-options-menu.show~.fab-main::after {
  opacity: 0;
  visibility: hidden;
}

#whatsapp-modal {
  display: none;
  position: fixed;
  z-index: 801;
  bottom: 10%;
  right: 2%;
  border-radius: 16px;
  width: 400px;
  box-shadow: -4px 4px 8px 0px rgba(130, 46, 6, 0.25);
}

#whatsapp-modal-header {
  background: #ff792e;
  border-radius: 16px 16px 0px 0px;
}

#whatsapp-modal-header-wrapper {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
}

#whatsapp-modal-body {
  background: #ffffff;
  border-radius: 0px 0px 16px 16px;
}

#select-country-code {
  border-radius: 8px 0px 0px 8px;
  border-right: 0;
}

#input-phone-number {
  border-radius: 0px 8px 8px 0px;
  border-left: 0;
}

.desktop-banner {
  background-image: url('../img/RamadhanBannerDesktop.webp');
}

.chatbot-btn-animated {
  transition: all 0.25s ease-in-out;
  border-radius: 8px;
  font-size: 11.5px;
  padding: 8px 10px;
  border: 1px solid transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  word-wrap: break-word;
  white-space: normal;
}

.chatbot-btn-animated:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

.chatbot-btn-primary {
  background-color: #ff8856 !important;
  color: #fff !important;
}

.chatbot-btn-primary:hover {
  background-color: #e67a4d !important;
}

.chatbot-btn-secondary {
  background-color: #f1f3f4 !important;
  color: #333 !important;
  border: 1px solid #ddd;
}

.chatbot-btn-secondary:hover {
  background-color: #e2e6ea !important;
}

.chatbot-btn-title {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-bottom: 8px;
  text-align: center;
}

#fab-chatbot-booking-wrapper {
  position: fixed;
  z-index: 800;
  bottom: 128px;
  right: 0%;
}

#chatbot-booking-modal {
  position: fixed !important;
  z-index: 801;
  display: none;
  border-radius: 16px;
  font-size: 12px;
  top: calc(100% - 600px - 1%);
  left: calc(100% - 400px);
}

#chatbot-booking-modal-wrapper {
  border-radius: 16px;
  box-shadow: -4px 4px 8px 0px rgba(130, 46, 6, 0.25);
  width: 400px;
  height: 600px;
}

#chatbot-booking-modal-header,
#chatbot-booking-modal-body,
#chatbot-booking-modal-footer {
  background: #F4E7E1;
}

#chatbot-booking-modal-header {
  border-radius: 16px 16px 0px 0px;
}

#chatbot-booking-modal-body {
  height: auto;
}

#chatbot-booking-modal-footer {
  border-radius: 0px 0px 16px 16px;
}

#chatbot-booking-chatlist {
  overflow: hidden auto;
  width: 100%;
  height: 100%;
}

#chatbot-booking-chatlist::-webkit-scrollbar {
  width: 5px;
  border-radius: 5px;
}

#chatbot-booking-chatlist::-webkit-scrollbar-track {
  background: #FEFEFF;
}

#chatbot-booking-chatlist::-webkit-scrollbar-thumb {
  background: #C7D8E4;
}

#chatbot-booking-chatlist::-webkit-scrollbar-thumb:hover {
  background: #95B1C5;
}

#chatbot-booking-chatlist .self,
#chatbot-booking-chatlist .other {
  max-width: 85%;
  min-width: 70px;
  color: #262626;
  padding: 12px 16px;
}

#chatbot-booking-chatlist .self {
  background-color: #FFFFFF;
  float: right;
  border-radius: 16px 16px 0px 16px;
}

#chatbot-booking-chatlist .other {
  background-color: #F7C099;
  float: left;
  border-radius: 16px 16px 16px 0px;
}

#chatbot-booking-chatlist .avatar-self,
#chatbot-booking-chatlist .avatar-other {
  width: 35px;
  height: 35px;
}

#chatbot-booking-chatlist .avatar-self {
  background: url('../icon/chatbot/icon_userChat.webp') no-repeat center;
  background-size: 35px;
}

#chatbot-booking-chatlist .avatar-other {
  background: url('../icon/chatbot/icon_Forsiva.webp');
  background-size: 35px;
}

#chatbot-booking-chatlist .avatar-name {
  font-size: 12px;
}

#chatbot-booking-chatlist .self .chat-time,
#chatbot-booking-chatlist .other .chat-time {
  font-size: 10px;
  margin-top: 8px;
  float: right;
}

#chatbot-booking-chatlist .self .chat-time {
  color: #9C9C9C;
}

#chatbot-booking-chatlist .other .chat-time {
  color: #666666;
}

#chatbot-booking-text,
#chatbot_address_id,
#chatbot-general-text {
  border-radius: 24px;
  padding: 8px 16px;
  font-size: 12px;
}

#chatbot-booking-plaintext-button,
#chatbot-booking-autocomplete-button,
#chatbot-booking-combobox-button,
#chatbot-general-plaintext-button {
  height: 100% !important;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 2px solid #EBF2F7;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

#chatbot-booking-plaintext-button i,
#chatbot-booking-autocomplete-button i,
#chatbot-booking-combobox-button i,
#chatbot-general-plaintext-button i {
  font-size: 1rem;
  color: #373737
}

.chatbot-booking-quotation {
  background: #F7C099;
  font-size: 11px !important;
}

.quotation-small-text {
  font-size: 10px !important;
}

.btn-chatbot-choose-quotation,
.btn-chatbot-choose-price {
  font-size: 11px !important;
  font-weight: bold;
  border-radius: 24px;
}

.summary-header {
  font-size: 14px;
  font-weight: bold;
}

.summary-title {
  font-size: 12px;
}

.summary-content {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.summary-title2 {
  font-size: 11px;
}

.summary-content2 {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.summary-information {
  font-size: 12px;
}

.chatbot-cta-button {
  font-size: 12px;
}

.custom-inquiry-modal {
  border: none;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.custom-inquiry-modal .modal-header {
  background: linear-gradient(135deg, #FF9B44 0%, #FF6726 100%);
  border-bottom: none;
  padding: 24px 32px;
  color: #ffffff;
}

.custom-inquiry-modal .modal-title {
  font-weight: 700;
  font-size: 1.5rem;
  color: #ffffff;
}

.custom-inquiry-modal .modal-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 8px;
  margin-bottom: 0;
  line-height: 1.5;
}

.custom-inquiry-modal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.8;
}

.custom-inquiry-modal .btn-close:hover {
  opacity: 1;
}

.custom-inquiry-modal .modal-body {
  padding: 32px;
}

.custom-inquiry-modal .col-form-label {
  font-size: 13px;
  font-weight: 600;
  color: #4a4a4a;
  padding-bottom: 4px;
  margin-bottom: 0;
}

.custom-inquiry-modal .col-form-label span {
  color: #FF6726;
}

.custom-inquiry-modal .form-control,
.custom-inquiry-modal .form-select {
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  color: #333333;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) inset;
}

.custom-inquiry-modal .form-control::placeholder {
  color: #adb5bd;
  font-weight: 400;
}

.custom-inquiry-modal .form-control:focus,
.custom-inquiry-modal .form-select:focus {
  background-color: #ffffff;
  border-color: #FF6726;
  box-shadow: 0 0 0 3px rgba(255, 103, 38, 0.15);
  outline: none;
}

.custom-inquiry-modal .modal-footer {
  border-top: none;
  padding: 0 32px 32px 32px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.custom-inquiry-modal .btn-cancel {
  background-color: transparent;
  border: none;
  color: #6c757d;
  font-weight: 600;
  padding: 10px 20px;
  transition: color 0.2s, background-color 0.2s;
}

.custom-inquiry-modal .btn-cancel:hover {
  color: #333333;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.custom-inquiry-modal .btn-submit {
  background: linear-gradient(135deg, #FF9B44 0%, #FF6726 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-weight: 600;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(255, 103, 38, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.custom-inquiry-modal .btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255, 103, 38, 0.4);
  color: #ffffff;
}

.upload-file-area {
  border: 1px dashed #CED4Da;
  border-radius: 8px;
  cursor: pointer;
  padding: 12px 0px;
  transition: 0.2s;
}

.upload-file-area.dragover {
  border-color: #000;
}

.upload-file-icon {
  width: 16px;
  height: auto
}

.upload-file-text {
  color: #0D6EFD;
  margin-left: 0.75rem;
  font-size: 12px;
}

.desktop-banner {
  background-image: url('../img/Banner.jpg');
}

@media screen and (max-width: 755px) {
  #core-value-wrapper-parent {
    margin: 0;
  }

  .mobile-banner {
    background-image: url('../img/Banner.jpg');
  }

  .mobile-mode {
    display: block !important;

  }

  .desktop-mode {
    display: none !important;

  }
}

@media screen and (min-width: 756px) {
  #core-value-wrapper {
    position: relative;
  }

  #core-value-content {
    position: absolute;
  }

  .mobile-mode {
    display: none !important;

  }

  .desktop-mode {
    display: flex !important;

  }
}

@media screen and (max-width: 576px) {
  #whatsapp-modal {
    width: 96%;
  }

  .page-header {
    padding: 100px 0 30px 0 !important;
  }

  .breadcrumbs .page-header h2 {
    font-size: 32px;
  }
}

@media screen and (max-height: 700px) {
  #chatbot-booking-modal {
    top: calc(100% - 400px - 1%);
  }

  #chatbot-booking-modal-wrapper {
    height: 400px;
  }
}

@media screen and (max-height: 600px) {

  #chatbot-booking-modal {
    font-size: 9px !important;
    top: calc(100% - 350px - 1%);
  }

  #chatbot-booking-modal-wrapper {
    height: 350px;
  }

  #chatbot-booking-modal-header {
    padding: 10px !important;
  }

  #img-close-chatbot {
    width: 13px !important;
    height: 13px !important;
    margin: 0px !important;
  }

  #img-reset-chatbot {
    width: 7px !important;
    height: 7px !important;
    margin: 0px !important;
  }

  #btn-reset-chatbot,
  #btn-close-chatbot {
    width: 18px !important;
    height: 18px !important;
  }

  #chatbot-booking-chatlist {
    padding: 2px 4px !important;
  }

  #chatbot-booking-chatlist .other {
    max-width: 85% !important;
    min-width: 100px !important;
    padding: 6px 8px;
    border-radius: 8px 8px 8px 0px;
  }

  #chatbot-booking-chatlist .self {
    max-width: 85% !important;
    min-width: 100px !important;
    padding: 6px 8px;
    border-radius: 8px 8px 0px 8px;
  }

  #chatbot-booking-chatlist .avatar-self,
  #chatbot-booking-chatlist .avatar-other {
    width: 25px;
    height: 25px;
  }

  #chatbot-booking-chatlist .avatar-name {
    font-size: 9px;
  }

  #chatbot-booking-chatlist .self .chat-time,
  #chatbot-booking-chatlist .other .chat-time {
    font-size: 7px !important;
    margin-top: 4px;
  }

  #chatbot-quotation-icon-transport,
  #chatbot-quotation-icon-load,
  #chatbot-quotation-icon-vehicle {
    width: 8px !important;
  }

  .chatbot-booking-quotation {
    font-size: 8px !important
  }

  .choose-quotation-section>button {
    font-size: 0.7rem !important;
  }

  .btn-chatbot-choose-price {
    font-size: 8px !important;
  }

  .summary-header {
    font-size: 11px !important;
  }

  .summary-title {
    font-size: 9px !important;
  }

  .summary-content {
    font-size: 9px !important;
  }

  .summary-title2 {
    font-size: 8px !important;
  }

  .summary-content2 {
    font-size: 8px !important;
  }

  .summary-information {
    font-size: 9px !important;
  }

  .chatbot-cta-button {
    font-size: 9px !important;
  }

  #chatbot-booking-text,
  #chatbot_address_id,
  #chatbot-general-text {
    font-size: 7px !important;
    height: 25px !important;
    padding: 8px !important;
  }

  #chatbot-booking-plaintext-button,
  #chatbot-booking-autocomplete-button,
  #chatbot-booking-combobox-button,
  #chatbot-general-plaintext-button {
    width: 25px !important;
    height: 25px !important;
  }

  #chatbot-booking-plaintext-button i,
  #chatbot-booking-autocomplete-button i,
  #chatbot-booking-combobox-button i,
  #chatbot-general-plaintext-button i {
    font-size: 0.8rem !important;
  }

  .pac-item>span {
    font-size: 0.6rem !important;
  }
}

@media screen and (max-width: 768px) and (min-height: 401px) {

  #fab-chatbot-booking-wrapper {
    bottom: 128px;
  }

  #chatbot-booking-icon {
    width: 120px !important;
    height: auto !important;
  }

  #chatbot-booking-modal {
    z-index: 1050 !important;
    left: 1% !important;
    right: 1% !important;
    bottom: 1% !important;
    top: 1% !important;
    width: 98% !important;
    height: 98% !important;
  }

  #chatbot-booking-modal-wrapper {
    width: 100% !important;
    height: 100% !important;
  }

  .mobile-banner {
    background-image: url('../img/Banner.jpg');
  }

  #announcement-modal-content>div>div {
    width: 100%;
    margin: auto;
  }

  #announcement-modal-content img {
    width: 100%;
  }

  #close-announcement {
    color: white;
    font-size: 24px !important;
  }
}

.grecaptcha-badge {
  visibility: hidden;
}

#vouchercode.is-valid {
  border: 1px solid #d1d3e2 !important;
  background: none !important;
}

#announcementModal div,
#announcementModal button {
  background: transparent;
  border: 0;
  outline: none;
}

#close-announcement {
  color: white;
  font-size: 36px;
}

.spacing-24 {
  width: 24px;
  flex-shrink: 0 !important;
}

.col-quantity {
  width: 8%;
}

.col-packaging-unit {
  width: 16%;
}

.col-length {
  width: 8%;
}

.col-width {
  width: 8%;
}

.col-height {
  width: 8%;
}

.col-volume {
  width: 8%;
}

.col-weight {
  width: 8%;
}

.col-commodity-type {
  width: 16%;
}

.col-commodity-description {
  width: 16%;
}

.col-icon {
  width: 4%;
}

.col-quantity,
.col-packaging-unit,
.col-length,
.col-width,
.col-height,
.col-volume,
.col-weight,
.col-commodity-type,
.col-commodity-description {
  padding-right: 0.7rem;
}

@media screen and (max-width: 992px) {

  .col-quantity,
  .col-packaging-unit,
  .col-length,
  .col-width,
  .col-height,
  .col-volume,
  .col-weight,
  .col-commodity-type,
  .col-commodity-description,
  .col-icon {
    width: 100%;
    padding-right: 0;
  }

  .btn-cargo-delete {
    width: 100%
  }
}

.tracking-detail {
  padding: 3rem 0
}

[class*=tracking-status-] p {
  margin: 0;
  font-size: 1.1rem;
  color: #fff;
  text-transform: uppercase;
  text-align: center
}

[class*=tracking-status-] {
  padding: 1rem 0
}

.tracking-status-intransit {
  background-color: #65aee0
}

.tracking-status-outfordelivery {
  background-color: #f5a551
}

.tracking-status-deliveryoffice {
  background-color: #f7dc6f
}

.tracking-status-delivered {
  background-color: #4cbb87
}

.tracking-status-attemptfail {
  background-color: #b789c7
}

.tracking-status-error,
.tracking-status-exception {
  background-color: #d26759
}

.tracking-status-expired {
  background-color: #616e7d
}

.tracking-status-pending {
  background-color: #ccc
}

.tracking-status-inforeceived {
  background-color: #214977
}

.tracking-list {
  border: 1px solid #e5e5e5
}

.tracking-item {
  border-left: 1px solid #e5e5e5;
  position: relative;
  padding: 2rem 1.5rem .5rem 2.5rem;
  font-size: .9rem;
  margin-left: 3rem;
  min-height: 5rem
}

.tracking-item:last-child {
  padding-bottom: 4rem
}

.tracking-item .tracking-date {
  margin-bottom: .5rem
}

.tracking-item .tracking-date span {
  color: #888;
  font-size: 85%;
  padding-left: .4rem
}

.tracking-item .tracking-content {
  padding: .5rem .8rem;
  background-color: #f4f4f4;
  border-radius: .5rem
}

.tracking-item .tracking-content span {
  display: block;
  color: #888;
  font-size: 85%
}

.tracking-item .tracking-icon {
  line-height: 2.6rem;
  position: absolute;
  left: -1.3rem;
  width: 2.6rem;
  height: 2.6rem;
  text-align: center;
  border-radius: 50%;
  font-size: 1.1rem;
  background-color: #fff;
  color: #fff
}

.tracking-item .tracking-icon.status-sponsored {
  background-color: #f68;
  color: #e5e5e5;
  border: 1px solid #e5e5e5;
  font-size: .6rem;
}

.tracking-item .tracking-icon.status-delivered {
  background-color: #4cbb87;
  color: #e5e5e5;
  border: 1px solid #e5e5e5;
  font-size: .6rem;
}

.tracking-item .tracking-icon.status-outfordelivery {
  background-color: #f5a551;
  color: #e5e5e5;
  border: 1px solid #e5e5e5;
  font-size: .6rem
}

.tracking-item .tracking-icon.status-deliveryoffice {
  background-color: #f7dc6f;
  color: #e5e5e5;
  border: 1px solid #e5e5e5;
  font-size: .6rem;
}

.tracking-item .tracking-icon.status-attemptfail {
  background-color: #b789c7;
  color: #e5e5e5;
  border: 1px solid #e5e5e5;
  font-size: .6rem
}

.tracking-item .tracking-icon.status-exception {
  background-color: #d26759;
  color: #e5e5e5;
  border: 1px solid #e5e5e5;
  font-size: .6rem
}

.tracking-item .tracking-icon.status-inforeceived {
  background-color: #214977;
  color: #e5e5e5;
  border: 1px solid #e5e5e5;
  font-size: .6rem;
}

.tracking-item .tracking-icon.status-intransit {
  color: #e5e5e5;
  border: 1px solid #e5e5e5;
  font-size: .6rem
}

@media(min-width:992px) {
  .tracking-item {
    margin-left: 10rem
  }

  .tracking-item .tracking-date {
    position: absolute;
    left: -10rem;
    width: 7.5rem;
    text-align: right
  }

  .tracking-item .tracking-date span {
    display: block
  }

  .tracking-item .tracking-content {
    padding: 0;
    background-color: transparent
  }
}