#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;
}

/* .about .content h3 { 
    font-weight: 600 !important;
    font-size: 48px !important;
    line-height:76.8px !important;
    color: #0B1217 !important;
} */

.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: #F5F9FB !important;
    border-radius: 20px !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: #EBF2F7 !important;
    border: 1px solid #0B1217;    
    color: #434E54; */
  background-color: #0B1217 !important;
  border: 1px solid #0B1217;
  color: #F5F9FB;
}

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

/*
.footer { 
    background-color: #EBF2F7 !important;
    color: #151D21;
}

.footer .footer-links ul a {
    color: #151D21;
}

.footer .footer-links ul a:hover {
    color: #434E54;
}

.footer .social-links a {
    color: #151D21;
}

.footer .social-links a:hover {
    color: #434E54;
}
*/

.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;
  /* width: 414px !important; */
}

/* Breadcrumbs */
.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;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
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;
}

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

/* form get a quote */
.get-a-quote {
  background: #F5F9FB;
  padding: 0;
  overflow: hidden;
}

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

.get-a-quote .php-email-form {
  /* background: #F5F9FB !important; */
  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 {
        color: white;
        font-size: 14px;
        font-weight: 400;
        line-height: 22.4px;
        letter-spacing: 0.01em;
    } */

  .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;
  }
}

/* Container */
/* @media (min-width: 1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1650px !important;
    }
} */
/* 
@media (min-width: 1200px){
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1470px !important;
    }
}

@media (min-width: 992px){
    .container, .container-lg, .container-md, .container-sm {
        max-width: 1290px !important;
    }
}

@media (min-width: 768px){
    .container, .container-md, .container-sm {
        max-width: 1050px !important;
    }
}

@media (min-width: 576px){
    .container, .container-sm {
        max-width: 870px !important;
    }
} */


.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 {
  /* background: linear-gradient(3deg, #EBF2F7 2.72%, rgba(255, 255, 255, 0.00) 114.64%); */
}

.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;
  /* background: #fff !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: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); */
  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: var(--greyscale-neutral-95, #EBF2F7) !important; */
  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;
  }
}

/* WA STARTER */
#fab-wa-wrapper {
  position: fixed;
  z-index: 800;
  bottom: 6%;
  right: 1%;
}

#fab-wa-wrapper #btn-wa {
  border-radius: 99px;
  background-color: #60d669;
  outline: none;
  border: 0;
  box-shadow: -4px 4px 8px 0px rgba(130, 46, 6, 0.25);
}

#btn-wa #img-wa {
  width: 24px;
  height: 24px;
}

#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 BOOKING ======================== */
#fab-chatbot-booking-wrapper {
  position: fixed;
  z-index: 800;
  bottom: 14%;
  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 modal header, body and footer */
#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 chatlist */
#chatbot-booking-chatlist {
  overflow: hidden auto;
  width: 100%;
  height: 100%;
}

/* Chatbot chatlist scroll button */
#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 chatlist chat box item */
#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 chatlist avatar */
#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 chatlist time */
#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 footer input box */
#chatbot-booking-text,
#chatbot_address_id,
#chatbot-general-text {
  border-radius: 24px;
  padding: 8px 16px;
  font-size: 12px;
}

/* Chatbot footer button */
#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 content */
.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;
}

/* Chatbot confirmation message */
.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;
}

/* ======================== END OF CHATBOT BOOKING ========================  */

/* Customizeable Input File */
.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;
}

/* End of Customizeable Input File */

.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;
    /* visibility: visible !important; */
  }

  .desktop-mode {
    display: none !important;
    /* visibility: hidden !important; */
  }
}

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

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

  .mobile-mode {
    display: none !important;
    /* visibility: hidden !important; */
  }

  .desktop-mode {
    display: flex !important;
    /* visibility: visible !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;
  }
}

/* Chatbot Only */
@media screen and (max-height: 600px) {

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

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

  /* Chatbot Header */
  #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 Body */
  #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 Footer */
  #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;
  }
}

/* Mobile View */
@media screen and (max-width: 768px) and (min-height: 401px) {
  #fab-wa-wrapper {
    bottom: 2%;
  }

  #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;
  }

  #fab-chatbot-booking-wrapper {
    bottom: 10%;
  }

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

  /* Ubah width ini jika mau menyesuaikan lebar announcement pada mobile view */
  #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;
}

/* Booking Form Land LTL */
.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
  }
}