.add-bv-button {
  display: block;
  width: 100%;
  /* background: #17a2b8 !important; */
  border: none !important;
  border-radius: 8px;
}
.add-bv-button:hover {
  /* background: #1693a7 !important; */
}


.bank-tc-button {
  display: block;
  width: 100%;
  margin-left: 2%;
  background: #61a081 !important;
  border: none !important;
  border-radius: 8px;
}
.bank-tc-button:hover {
  background: #50856b !important;
}

.td-bank-column {
  vertical-align: middle;
  /* border-left: 1px solid #e5e4e4; */
}

.col-disabled {
  opacity: 0.5;
}

.link-like {
   cursor:pointer;
   color:blue;
   text-decoration:none;
}

.link-like:hover {
  text-decoration:underline;
}

.shipping-address-ul {
  line-height: 24px;
}

.shipping-address-li {
  margin-bottom: 0.05rem;
}

#address-details-div {
  height: 170px;
}

#my-bv-allocation {
  margin-bottom: 3rem;
}

#revert-bank-button {
  width: 73%;
  background: #bea89b !important;
  border: none !important;
  border-radius: 8px;
}

#main-error-div {
  color: red;
  font-weight: 900;
  font-size: 16px;
  margin-top: 3rem;
  margin-bottom: 4rem;
}

#revert-bank-button:hover {
  background: #a38777 !important;
}

#tc-ir-dropdown {
  width: 20rem;
}

#tc-ir-div, #point-manage-div {
  padding-top: 3rem;
}

#tc-verify-ir-input {
  display: inline-block;
  width: 13.5rem;
  margin-bottom: 10px;
}

#tc-verify-ir-button {
  display: inline-block;
  float: none;
  padding: 0px;
}

#remaining-bv-span {}

#tc-add-header-div, #point-manage-header-div {
  border-bottom: 1px solid #e5e4e4;
  width: 100%;
}

#tc-add-header-h, #point-manage-header-h {
  padding-top: 1rem;
  padding-bottom: 0.4rem;
}

#tc-verify-name-div {
}

#tc-verify-ir-spinner-span {
  margin-left: 3.35rem;
  margin-right: 3.35rem;
  margin-top: 0.5rem;
  margin-bottom: 0rem;
}

#next-spinner-span {
  margin-left: 2.16rem;
  margin-right: 2.16rem;
  margin-top: 0.5rem;
  margin-bottom: 0.4rem;
}

#bv-next-button {
  float: right;
  padding: 0px;
  line-height: 2.2rem;
  font-size: 1.8rem;
  border-radius: 5px;
}

#bv-next-span {
  padding: 7px 17px;
}

#shipping-next-button {
  float: right;
  padding: 0px;
  line-height: 2.2rem;
  font-size: 1.8rem;
  border-radius: 5px;
}

#shipping-next-span {
  padding: 7px 17px;
}

#tc-verify-ir-name-span {
  font-weight: bold;
  color: black;
  margin-left: 0.6rem;
}

#tc-tc-dropdown {
  width: 13.5rem;
}

#tc-verify-tc-div {}

#tc-verify-placement-div {}

#tc-place-div {
  margin-bottom: 3rem;
}

#tc-error-span {
  font-weight: 800;
  color: red;
}

#pickups-div {
  margin-left: 5rem;
}

#delivery-div {
}

.delivery-type-radio {
  height: 18px;
  margin-right: 10px !important;
  cursor: pointer;
}

.step-title {
  cursor: pointer;
}

.checkout-shipping-address, .checkout-shipping-method {
}

.validation-borders- { border-top: 0; border-bottom: 0; border-right: 0; }
.validation-borders-checking { border-top: 2px solid black; border-bottom: 2px solid black; border-right: 2px solid black; }
.validation-borders-error { border-top: 2px solid red; border-bottom: 2px solid red; border-right: 2px solid red; }
.validation-borders-success { border-top: 2px solid green; border-bottom: 2px solid green; border-right: 2px solid green; }

.validation-message-checking { color: black; }
.validation-message-error { color: red; }
.validation-message-success { color: green; }

input.tc-rl-radio:focus {
  outline: none;
}

.color-red {
  color: red;
}

.color-black {
  color: black;
}

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

.display-block {
  display: block !important;
}

.display-inline-block {
  display: inline-block !important;
}

.tc-labels {
  display: inline-block;
  width: 15rem;
}

.spaced-divs {
  margin-top: 1rem;
}

.dotted {
  border-bottom: 1px dotted;
}

.modal {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 10px;
  border: 1px solid #888;
  /* width: 60%; Could be more or less, depending on screen size */
  width: fit-content;

  /* width: 70rem; */
  padding-top: 1rem;
  padding-bottom: 3rem;
  padding-left: 3rem;
  padding-right: 2rem;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
  background-clip: padding-box;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 40px;
  font-weight: bold;
}

.font-bold {
  font-weight: bold;
}

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

.button-span-text-for-spinner {
  margin-left: 2rem;
  margin-right: 2rem;
  margin-top: 0rem;
  margin-bottom: 0rem;
  font-size: 16px;
  font-weight: 800;
}


.tc-validate-placements {
  overflow: auto;
  width: 100%;
}

.tc-verify-boxes {
  /* border: solid 1px #ccc; */
  float: left;
}

.success-details-div {
  font-size: 14px;
  color: #006400;
  background: #e5efe5;
  padding-bottom: 0px;
  border-radius: 4px;
  padding-left: 4px;
}

.success-details-div td {
  border: none !important;
  padding-top: 0px !important;
}

.error-details-div {
  font-size: 14px;
  color: #b30000;
  background: #fae5e5;
  padding-bottom: 0px;
  border-radius: 4px;
  padding-left: 4px;
}

.col-slim {
  padding-bottom: 0px !important;
  padding-left: 0px !important;
  font-size: 12px;
}


.qnet-spinner {
  width:32px;
  height:32px;
  background-image: url('data:image/png;base64,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');
}


.qnet-delete {
  width:16px;
  height:16px;
  cursor: pointer;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAnRJREFUOI1l0l9I3XUYx/HX7+s5+We6g6UZbEbpNqSoizYvdlNRYIMNXAQH6kYoL4ySIOgiKLzZjdCuoi5jNwWb2R/6czGJrgpCySxizumYDCJw5496jk70d75ddCZOH/jw5fvwfB+e7+f9JA5G8gFPP85LLfRksM3yv0y9y++o3Ve89/I+fcf5uI0XMyQBDcj+f8a7/LrE6DvMHmjwIc/18nUj7Q3I1B/fU6auhMpNXnud7yDAm/Q8ymSmoaH96NCQjoGBA/9qP3tW59CQEEJrD59f5KndKS5y5RLx6rlzsVAoxGKhEH8bHo7fEr8n/jk6Givr67Farca5gYH4C/EHphAyL3OkhUGozM/bXl2VzeUcHx8XYpRpbvbYhQsidgoFmwsLIMcLY/Ql7/HqCb6oG+Wh/n7PXL4sm8tJkIQghCAtl904f97W7OyuL9d5KzRydC+K8vS0P/J56eamWM/trK+bHxxUnd01X4JGukO6jysc7u+XNDaKMarVapLmZodOnTpgbI1aKLIY9yS7R0b0jo2JMdouleysrZEkusfHdQ4P79ZFlFhMTtDxNouHyXWcPu3k5KQkBOnqqmv5vEw264mJCZlcjhjdPHPG1vS0Le5+RF9YoPAPlyJimqqlqe1i0d/5vOrcnMrMjOv5vJ1yWUxT0lTEMld+5HYCx+gc4ecunmzr7RXX1sSVlfs2samrywOtrdKlJSVufcKzV7ndAEU2tvnpCM83lUoP29gQ6mt6T6pVtVLJHRa/5JVvWFBvDm5R+IuJRwgtHGviUKjjisQKpWt89ilvTHFjL879kbTx4AAnu+kJJCssf8VMlTv2Yf8P80/stXd0zqEAAAAASUVORK5CYII=');
}

.tooltip {
  position:relative; /* making the .tooltip span a container for the tooltip text */
  border-bottom:1px dashed; /* little indicater to indicate it's hoverable */
}
/* before is for the actual tooltip box */
.tooltip:before {
  content: attr(tooltip-text); /* here's the magic */
  position:absolute;
  /* vertically center */
  top:50%;
  transform:translateY(-50%);
  /* move to right */
  left:100%;
  margin-left:15px; /* and add a small left margin */
  /* basic styles */
  width:400px;
  padding:10px;
  border-radius:10px;
  background:#000;
  color: #fff;
  text-align:center;
  display:none; /* hide by default */
}
.tooltip:hover:before {
  display:block;
}
/* after is for the arrow */
.tooltip:after {
  content: "";
  position:absolute;
  /* position tooltip correctly */
  left:100%;
  margin-left:-5px;
  /* vertically center */
  top:50%;
  transform:translateY(-50%);
  /* the arrow */
  border:10px solid #000;
  border-color: transparent black transparent transparent;
  display:none;
}
.tooltip:hover:before, .tooltip:hover:after {
  display:block;
}