/**
 * Basic typography style for text
 * Warning: These styles overrides without the default .dw-mod class, as they all target the most basic required elements
 */
/**
 * Basic typography style for text
 * Warning: These styles overrides without the default .dw-mod class, as they all target the most basic required elements
 */
/* Toetet add for header*/
#draftheader {
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#draftheader:hover {
  overflow: hidden;
  width: auto;
}
/* Toetet add for recovery password header*/
.RecoveryHeader {
  width: 75%;
}
/*Toetet add for language down arrow*/
.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  float: right;
  margin-top: 5px;
}
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
/* End*/
/* Toetet add for promo sticker text */
.promotext {
  font-style: italic;
  font-weight: bold;
}
/* Toetet add for vehicle model carousel*/
.vslide:first-child {
  display: block;
}
.vslide {
  display: none;
  margin-left: 15%;
}
.display-left-vehi {
  position: absolute;
  left: 10%;
  top: 40%;
}
.display-right-vehi {
  float: right;
  top: 40%;
  position: absolute;
  left: 78%;
}
/* End */
/* Toetet add for pagination design*/
.clickable input[type=number] {
  padding: 0px;
  height: 26px;
  border: 1px solid #BBB;
  border-radius: 5px;
  min-width: 14px;
  width: 60px;
}
/*end*/
/* TOetet add for sticky header */
.adv-table .gridTable {
  margin-top: -12px;
}
.gridTable th {
  position: -webkit-sticky;
  position: sticky;
  top: -12px;
  z-index: 1;
  background-color: #fff;
}
.gridTablevehi th {
  top: 0;
  position: sticky;
  z-index: 1;
  background-color: #fff;
}
table.footable {
  border-collapse: separate !important;
}
table.footable th {
  border-top: 1px solid lightgrey;
  border-bottom: 1px solid lightgrey;
}
.footable-filtering > th {
  border: none !important;
}
.adv-table {
  width: 150%;
  max-height: 500px;
}
.taxtable th {
  top: 0px;
}
#Add_modalbody {
  width: 100%;
}
#edit_modalbody {
  width: 100%;
}
/* End */
/***slider**/
.mySlides {
  display: none;
}
.column {
  float: left;
  width: 25%;
  padding-top: 10px;
}
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: black;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
.next {
  right: 10px;
  border-radius: 3px 0 0 3px;
}
.modal-body {
  position: absolute !important;
  background-color: white;
}
@media only screen and (min-width: 786px) {
  .cus-inline {
    display: inline-flex;
  }
}
.search-container {
  width: 100vw;
  justify-content: center;
  padding: 0 2em;
}
.typeahead.typeahead--centered {
  margin: unset;
}
.redbox {
  font-size: 16px;
  color: white;
  background: red;
  opacity: 0.5;
  padding: 0.5em 5em;
  border: red 1px solid;
  border-radius: 7px;
  text-align: center;
}
#errorbox {
  margin: 0 auto;
  padding-top: 20px;
}
#searchbtn:hover {
  color: white;
}
#searchbtn:focus {
  color: white;
}
#ProductSearchBar {
  margin-top: 23px;
  padding: 0px 5px;
}
@media screen and (min-width: 700px) {
  #ProductSearchBar {
    left: 3em;
    width: 90%;
  }
}
.error {
  border: 1px solid red !important;
}
.errorData {
  color: red;
}
#search {
  padding: 0px 5px;
}
#StopImpersonationModal {
  display: block;
  width: min-content;
  min-width: 500px;
  margin: auto;
  height: 250px;
  background: #fff;
  padding: unset !important;
}
.btn--half {
  width: 60%;
  margin: 10px auto;
}
.cus-logo {
  margin: 20px 50px;
}
.errormsg {
  color: red;
}
.modal h2 {
  color: black;
}
.u-va-bottom {
  vertical-align: bottom;
  border-top: unset !important;
}
/* Product detail */
.mainRowDetail {
  margin-top: 10px;
  padding: 5px 0px;
}
.subRowDetail {
  padding-top: 31px;
  padding-left: 0;
  padding-right: 0;
}
.noLeftPad {
  padding-left: 0px;
}
.display-left {
  position: absolute;
  top: 40%;
}
.display-right {
  float: right;
  top: 40%;
  position: absolute;
  right: 0%;
}
/* Product List Back Order Popup */
/* The Modal (background) */
.cus-content {
  background-color: #fefefe;
  margin: unset !important;
  padding: unset !important;
  border: 1px solid #888;
  width: unset !important;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.login-modal {
  padding: 10px 0px 0px 0px;
  text-align: center;
}
.login-dialog {
  width: 400px !important;
}
.impersonation-trigger:checked + .impersonation.impersonation--right-lower-box-layout {
  transition: width 0.5s 1s, transform 1s;
}
#transNo {
  float: right;
  position: absolute;
  top: 4%;
  left: 17%;
}
#NewDraftModal {
  display: block;
  width: 500px;
  height: 300px;
  margin: auto;
  background: white;
  padding: unset;
}
#MyAddressesSelectorModal,
#ManageAddressModal {
  display: block;
  background: white;
  height: 500px;
  width: 1000px;
  margin: auto;
  padding: unset;
}
#CountryIsNotAvailableModal {
  display: block;
  background: white;
  height: 200px;
  width: 500px;
  margin: auto;
  padding: unset;
}
#customWarehouse {
  display: inline-block;
  box-sizing: border-box;
  padding: 0.5em 2em 0.5em 0.5em;
  border: 0;
  font: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px top 1em, right 10px top 1em;
  background-size: 5px 5px, 5px 5px;
  margin-top: 11px;
}
.taxDetail {
  width: 50%;
  float: right;
  position: absolute;
  top: 33.8%;
  left: 22%;
}
.sellerDetail {
  width: 50%;
  position: absolute;
  top: 38.5%;
  left: 42%;
}
#StopImpersonationModal button {
  width: auto;
  margin: 10px 50px;
  min-width: -webkit-fill-available;
  min-width: -moz-available;
}
.impersonation__search-field.dw-mod {
  border-color: #fff;
  color: #000;
}
.b-lazy {
  opacity: 1;
}
.content-container {
  height: auto;
}
.center-container {
  height: auto;
}
.dropdown__btn {
  width: 100%;
}
.checkbox-facet::before {
  display: inline-table !important;
}
.btn.btn--primary:hover {
  color: white;
}
#deliveryToButton:hover {
  color: white;
}
.Wapp-style {
  font-size: 48px;
  background-color: white;
  color: green;
}
#myprofile_whatapplogo {
  background: transparent;
  border: none;
  position: absolute;
  z-index: 99;
  top: 65%;
  left: 14%;
}
.fa-whatsapp {
  color: green;
  font-size: 27px;
}
#scroll-design::-webkit-scrollbar-track {
  border: 1px solid black;
  background-color: #F5F5F5;
}
#scroll-design::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5;
}
#scroll-design::-webkit-scrollbar-thumb {
  background-color: #000000;
}
#scroll-design {
  height: 100%;
}
.original-scroll-height {
  padding-bottom: 0em;
}
.current-scroll-height {
  padding-bottom: 3em;
}
.scroll-height {
  height: auto;
}
.scroll-height-current {
  height: 50%;
}
.scroll {
  overflow-y: scroll;
}
.modal-height--auto {
  display: block;
  width: 500px;
  margin: auto;
  height: 250px;
  background: white !important;
  padding: unset !Important;
}
.modal__header {
  margin-top: 0em;
}
.modal--sm {
  display: block;
}
.btn--width {
  width: 13%;
}
.btn--pull-width {
  width: 11%;
}
/* Standard Modal Css*/
.multiselectpopup {
  background: #fff;
  border-radius: 5px;
  width: 50%;
  position: relative;
  transition: all 2s ease-in-out;
  max-height: 100%;
  padding: 1em;
  color: black;
  left: 0;
  right: 0;
  margin: auto;
  top: 37em;
  bottom: 0;
}
.promomodal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.4);
  padding-right: 17px;
  max-width: 100%;
  max-height: 100%;
}
.promo-dialog {
  width: 100%;
  margin: 30px auto;
  position: relative;
}
.promodeletebtn {
  background-color: #fff;
  border: unset;
  font-size: 23px;
  float: right;
  margin-top: -90px;
}
.popupbody {
  background-color: #fff;
  line-height: 25px;
}
.promoborder {
  border-bottom: 2px solid #ccc;
  width: 97%;
  margin-left: 14px;
}
.overlay {
  position: absolute;
  z-index: 100;
  background-color: #cccc;
  width: 100%;
  height: 100%;
  top: 0;
}
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.4);
  padding-right: 17px;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}
.modal-header {
  background: #2b6094;
  color: #fff;
  -webkit-border-radius: 5px 5px 0 0;
  border-bottom: none;
}
.modal-header .close {
  margin-top: -28px;
}
.inbox-body .modal .modal-body input,
.inbox-body .modal .modal-body textarea {
  border: 1px solid #e6e6e6;
  box-shadow: none;
}
.btn-send,
.btn-send:hover {
  background: #00A8B3;
  color: #fff;
}
.btn-send:hover {
  background: #009da7;
}
.footable-editing {
  width: 6em;
}
.modal-header h4.modal-title {
  font-weight: 300;
  font-family: 'Open Sans', sans-serif;
}
.modal-body label {
  font-weight: 400;
  font-family: 'Open Sans', sans-serif;
}
.modal.top-modal-with-space .modal-dialog {
  margin: 20px auto;
}
.modal.fade.left-modal-with-space .modal-dialog {
  position: absolute;
  left: 20px;
}
.modal.fade.right-modal-with-space .modal-dialog {
  position: absolute;
  right: 20px;
}
.modal-title {
  font-size: 1.5em;
}
.customgrip {
  width: 93%;
  margin: auto;
}
.checkbox-custom {
  width: 1em;
  height: 1em;
}
.tab {
  overflow: hidden;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.tab div {
  background-color: #7087A3;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 7px 12px;
  transition: 0.3s;
  font-size: 14px;
  height: 40px;
  text-align: center;
}
.tab div.active {
  background-color: white;
  color: black;
}
.tabcontent {
  display: none;
  padding: 6px 12px;
}
.tabcontentone {
  display: none;
  padding: 6px 12px;
}
.tabcontenttwo {
  display: none;
  padding: 6px 12px;
}
.span-gp-text {
  text-align: left;
}
.infofield {
  border: none;
  border-radius: 0px;
  margin-top: -1em;
  padding: 1.2px;
  background-color: #fff !important;
}
/* End Standard Modal Css*/
/* ------------------ Wrapper------------------------*/
.wrapper {
  max-width: 100%;
  min-height: 100%;
  padding: 1em;
}
input[readonly]:not(.flatpickr-input) {
  background-color: #eee !important;
  height: 38px !important;
  padding: 6px 10px !important;
}
.selectedname {
  text-align: left;
  margin-left: 24px;
}
.activeuser {
  background-color: #0085ca;
  color: #fff;
  width: 17.9em;
  margin-left: -15px;
}
.activeusergp {
  background-color: #0085ca;
  color: #fff;
  width: 17.9em;
  margin-left: -15px;
}
.selectboxview {
  width: 20%;
  border: 2px solid #cccc;
  height: 15%;
  margin-left: 14em;
  margin-top: 2em;
}
.removeaddicon {
  margin-top: 23px;
  margin-left: -17px;
}
.selecttitle {
  text-align: left;
  color: black;
}
.selectvaluetitle {
  margin-left: 5px;
}
.userselectedtable {
  margin-top: -32px;
}
.childactive {
  display: block !important;
}
.customloader {
  text-align: center;
  height: 300px;
  position: relative;
  width: 0em;
}
/*.page {
    min-height: unset !important;
}*/
/* ------------------End Wrapper------------------------*/
/*-------------------Button CSS--------------------------*/
.btn-primary,
.btn-primary.disabled,
.btn-primary[disabled],
.btn-primary.disabled.active,
.btn-primary.active[disabled] {
  background-color: #2b6094;
  border-color: #2b6094;
  color: #FFFFFF;
}
.btn--primary:focus {
  color: white;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary,
.btn-primary.disabled,
.btn-primary[disabled],
.btn-primary.disabled.active,
.btn-primary.active[disabled] {
  background-color: #2b6094;
  border-color: #2b6094;
  color: #FFFFFF;
}
.multiselectaddbtn {
  border: 2px solid #cccc;
  width: 38px;
  height: 29px;
  cursor: pointer;
}
.multiselectremovebtn {
  border: 2px solid #cccc;
  width: 38px;
  height: 29px;
  margin-top: -2px;
  cursor: pointer;
}
.add {
  margin-top: 5px;
  margin-left: -3px;
  color: green;
}
.remove {
  margin-top: 9px;
  margin-left: -1px;
  color: red;
  font-size: 14px;
}
.successicon {
  color: green;
}
.run {
  cursor: pointer;
}
.crossbtn {
  background-color: #2b6094;
  border: unset;
  font-size: 23px;
  float: right;
  margin-top: -32px;
}
.footable-edit {
  background-color: #2b6094 !important;
  border-color: #2b6094 !important;
  margin-right: 5px !important;
  border-radius: 5px !important;
  color: #fff !important;
  width: 30px;
}
.footable-edit:hover,
.footable-edit:focus,
.footable-delete:hover,
.footable-delete:focus {
  z-index: 0 !important;
}
.footable-view {
  /*    background-color: #2b6094 !important;*/
  /*    border-color: #2b6094 !important;*/
  margin-right: 5px !important;
  border-radius: 5px !important;
  /*    color: #fff !important;*/
  width: 30px;
}
.footable-delete {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  margin-right: 5px !important;
  border-radius: 5px !important;
  color: #fff !important;
  width: 30px;
}
.createonclass {
  width: 100%;
  text-align: right;
  height: 15px !important;
  border: unset !important;
  font-weight: 510;
}
.btn-submit {
  margin-top: 4em;
  margin-left: 32em;
}
.btn-danger {
  background-color: #ff6c60;
  border-color: #ff6c60;
  color: #FFFFFF;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
  background-color: #ec6459;
  border-color: #ec6459;
  color: #FFFFFF;
}
.addbutton {
  float: right;
  margin-bottom: 5px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 21px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 21px;
  width: 20px;
  left: -3px;
  bottom: 0px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
input:checked + .slider {
  background-color: #64bd63;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
/*-------------------Button CSS--------------------------*/
/*---------------------- Table Design-------------------*/
.table-striped > tbody > tr:nth-of-type(2n+1) {
  background-color: #f9f9f9;
}
.table-striped > thead {
  border: 2px solid #ddd;
}
.table-striped > tbody {
  border: 2px solid #ddd;
}
table thead th {
  vertical-align: inherit !important;
}
.table-striped {
  font-size: 14px;
}
/*---------------------- End Table Design-------------------*/
/*iframe css*/
.virtualclass {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.4);
  padding-right: 17px;
  max-width: 100%;
  max-height: 100%;
}
.virtualbg {
  position: fixed;
  z-index: 100;
  left: 0;
}
#loginfobackbtn {
  margin-top: 10px;
}
iframe {
  width: 1px;
  min-width: 100%;
}
/*end iframe css*/
/*Promotion Page CSS*/
.rowstyle {
  box-shadow: 0px 0px 5px 4px #ccc;
  border-radius: 9px;
  padding: 2em;
  margin-left: 0em;
  margin-bottom: 5em;
  width: 100%;
}
.imagestyle {
  border: 1px solid #ccc;
  border-radius: 15px;
  height: auto;
  padding: 2em;
}
.termofpromo {
  margin-top: 30px;
  margin-left: -16px;
}
.promoitemdesc {
  font-weight: 700;
  color: #ccc;
}
.promotabdesc {
  text-align: center;
  border-bottom: 2px solid #ccc;
}
.promoactive {
  border-bottom: 2px solid black;
}
.promoitemtitle {
  border-bottom: 2px solid #ccc;
}
.promoitemtablesection {
  margin-top: 10px;
}
.quantity-right-plus {
  border-radius: 14px;
}
.quantity-left-minus {
  border-radius: 14px;
}
.Activeitmelist {
  display: block !important;
}
.userlist {
  overflow: auto;
  height: 10em;
}
.selectinput {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-left: 3em;
}
.UserSelectorDivGroupsSelector {
  margin-left: -15px;
  width: 114%;
}
.selectusername {
  margin-left: 20px;
}
/*End Of Promotion Page Css*/
/*Permission page Css*/
.pagepermissionclass {
  border: 1px solid #ccc;
}
.pagepermissionheader {
  line-height: 4em;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  font-weight: 700;
}
.datapermissonheader {
  line-height: 4em;
  font-size: 16px;
  font-weight: 700;
}
.select2css {
  width: 20em;
}
.totalanddiscount {
  border: unset;
}
/*  End permission css*/
/* For address popup */
.addressList {
  border: 1px solid darkgrey;
  padding: 5px;
}
.checkIsDefault {
  position: absolute;
  float: right;
  text-align: right;
  left: 69%;
  top: 5%;
  border: 1px solid lightgray;
  background: lightgray;
  padding: 1px;
}
.fooicon-sort:before {
  content: "\21F5";
}
.fooicon-sort-asc:before {
  content: "\21F5";
}
.fooicon-sort-desc:before {
  content: "\21F5";
}
/* Toetett add for product list ffilter hover design*/
.btn--tag:hover {
  color: white;
}
/* Toetet add for currency font size*/
#currencyCode {
  font-size: 15px;
}
#Block__SummaryContainer {
  width: 101% !important;
}
#Block__StaticSummary {
  width: 101% !important;
}
.cartpromosticker {
  background-color: blue;
  border: 1px solid blue;
  color: white;
  width: 38px;
  font-size: 12px;
  margin-top: 4px;
}
.redemptionsticker {
  background-color: #59981A;
  border: 1px solid #59981A;
  color: #fff;
  min-width: 38px;
  font-size: 12px;
  margin-top: 4px;
}
.mini-cart-orderline__name {
  font-size: 15px;
  width: 35ch;
  overflow: hidden;
  white-space: normal;
  display: block;
  word-break: break-word;
}
.mini-cart__footer {
  border-top: unset;
  margin-top: -33px;
  font-weight: 600;
  z-index: 100;
}
.emptycartbtn {
  margin-bottom: 10px;
}
.reviewstepheader {
  background-color: #f6f6f6;
}
.totaldiscounttext {
  float: left;
  font-size: 17px;
  font-weight: 600;
}
.totalprice {
  font-size: 17px;
  font-weight: 600;
}
.deliveryprice {
  font-size: 17px;
  font-weight: 600;
}
.minicarttotal {
  font-size: 15px;
  color: #234e7b;
  font-weight: 600;
}
.cart-summary__subtotals {
  font-size: 17px;
}
#nhfEstDate {
  background-color: #fff !important;
  border: 1px solid #ccc !important;
}
.shippingtax {
  font-size: 17px;
  font-weight: 600;
  margin-top: 6px;
  margin-left: 3px;
}
.shippingprice {
  font-size: 17px;
  font-weight: 600;
  margin-top: 6px;
}
.step2shippingtax {
  font-size: 17px;
  font-weight: 600;
  margin-top: -2px;
  margin-left: 1px;
}
.step2shippingprice {
  font-size: 17px;
  font-weight: 600;
  margin-right: -2px;
}
.confirmtotaltax {
  font-size: 17px;
  font-weight: 600;
  margin-left: 3px;
}
.confirmtotalprice {
  font-size: 17px;
  font-weight: 600;
}
.homeaddress-modal-content {
  width: 60%;
  left: 0;
  right: 0;
  margin: auto;
  padding: 2em;
  top: 6em;
  height: 80%;
  position: absolute;
  background-color: #fff;
}
#searchbtn {
  margin-top: 24px !important;
}
.productlistbackorder-modal-content {
  left: 0;
  right: 0;
  margin: auto;
  padding: 2em;
  top: 6em;
  height: 50%;
  position: absolute;
  background-color: #fff;
  width: 50%;
}
.mini-cart-dropdown__body {
  width: 38em !important;
}
.mini-cart-dropdown__inner {
  width: auto !important;
}
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/