body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #f1f1f1 !important;
  font-size: 13px !important;
}

body,
html {
  /*font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;*/
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif !important;
}
.text-small{
font-size: 11px;
font-weight: 400;
}

.btn {
  font-size: 13px;
  font-weight: 400;
}

.card{
  border-radius: .75rem;
  margin-bottom: 8px;
}

.card-body{
  padding-top: 0px !important;
}

.card-title {
  font-size: 13px !important;
  font-weight: 650;
}

.ui-title-bar-container{
  margin-top: 10px;
  margin-bottom: 20px;
}

.custom-banner-info {
border: solid 1px #98c6cd;
box-shadow: none;
border-radius: 3px;
background-color: #ebf9fc;
}

.custom-banner-info .banner__ribbon {
margin-right: 12px;
}

.custom-banner-info .banner__ribbon svg {
fill: #00a0ac;
}

.custom-banner-info h3 {
line-height: normal;
font-size: 13px;
font-weight: 500;
}

.banner__ribbon {
  flex: 0 0 2.2rem;
}

.btn{
 min-height: 1.75rem !important;
 min-width: 1.75rem !important;
}

.btn-info1{
  position: relative !important;
  gap: 0.125rem !important;
  background: linear-gradient(180deg,rgba(48,48,48,0) 63.53%,hsla(0,0%,100%,.15)), #303030 !important;        
  box-shadow: 0rem -0.0625rem 0rem 0.0625rem rgba(0,0,0,.8) inset,0rem 0rem 0rem 0.0625rem #303030 inset,0rem 0.03125rem 0rem 0.09375rem hsla(0,0%,100%,.25) inset !important;
      color: #fff !important;
  box-sizing: border-box !important;    
  font-size: 13px !important;
  font-weight: 550 !important;
  padding: 0.500rem 1.1rem !important;
  border: none !important;
  border-radius: 0.5rem !important;
  color: #fff !important;
  user-select: none !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
}

.button:focus {
outline: 2px solid #FF4081; /* Adding focus ring for accessibility */
}

.btn-info1:active{
background: linear-gradient(180deg,rgba(48,48,48,0) 63.53%,hsla(0,0%,100%,.15)), #1a1a1a !important;
box-shadow: 0rem 0.1875rem 0rem 0rem #000 inset !important;
fill: #fff !important;
transform: translate3d(0, .0625rem, 0) !important;
}

.btn-info1:hover, .btn-info1:visited:hover {
  background: linear-gradient(180deg,rgba(48,48,48,0) 63.53%,hsla(0,0%,100%,.15)), #1a1a1a !important;
}

.btn-info1:hover, .btn-info1:visited{
  background: linear-gradient(180deg,rgba(48,48,48,0) 63.53%,hsla(0,0%,100%,.15)), #1a1a1a !important;
}

.btn-info1:focus{
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

.btn-default1 {
position: relative !important;
gap: 0.125rem !important;
background: #fff !important;
box-shadow: 0rem -0.0625rem 0rem 0rem #b5b5b5 inset,0rem 0rem 0rem 0.0625rem rgba(0,0,0,.1) inset,0rem 0.03125rem 0rem 0.09375rem #fff inset !important;
box-sizing: border-box !important;  
font-size: 13px !important;
font-weight: 550 !important;
padding: 0.500rem 1.1rem !important;
border: 1px 1px !important;
border-radius: 0.5rem !important;
user-select: none !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
cursor: pointer !important;
color: #1e1e1e !important;
border-width: 1px !important;
border-color: #888888 !important;
}

.btn-default1:hover {
background: #fafafa !important;
color: #000000 !important;
box-shadow: -0.0625rem -0.0625rem 0rem 0rem #4b4949 inset,0rem 0rem 0rem 0.0625rem rgba(0,0,0,.1) inset,0rem 0.03125rem 0rem 0.09375rem #fff inset !important;
}

.btn-default1:active {
background: #f7f7f7 !important;
color: #303030 !important;
box-shadow: -0.0625rem 0rem 0.0625rem 0rem rgba(26,26,26,.122) inset,0.0625rem 0rem 0.0625rem 0rem rgba(26,26,26,.122) inset,0rem 0.125rem 0.0625rem 0rem rgba(26,26,26,.2) inset !important;
transform: translate3d(0, .0625rem, 0) !important;
}

.btn-default1:active:focus {
box-shadow: -0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, .122) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(26, 26, 26, .122) inset, 0rem 0.125rem 0.0625rem 0rem rgba(26, 26, 26, .2) inset !important;
}


.btn-danger1 {
position: relative !important;
gap: 0.125rem !important;  
box-sizing: border-box !important;  
font-size: 13px !important;
font-weight: 550 !important;
padding: 0.500rem 1.1rem !important;
border: none !important;
border-radius: 0.5rem !important;
user-select: none !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
cursor: pointer !important;
}

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


.btn i{    
  padding-top: 4px !important;
  padding-right: 4px !important;
}

a i{    
  padding-left: 0px !important;
}

b{
font-weight: 700;
}

.modal-dialog {
margin: 150px auto;
}

.table .table {
background-color: #ffffff !important;
}

@media screen and (max-width: 720px) {
.bootstrap-table .fixed-table-toolbar{
  width: 100%;
}

.table .btn-second{
  margin-top: 5px;
}

.review_page .updatebutton{
  margin-top: 5px !important;
}

.table-responsive {
  border: none;
}

.card-header-tabs{
  width: 100%;
  overflow-x: scroll;
}
}

.btn:active:focus, .btn:focus .btn:visited{
outline: 1px !important;
}

.table thead{
background-color: #ffffff !important;
}

.btn-info.disabled, .btn-info:disabled {
background-color: #287945 !important;
border-color: #287945 !important;
}

.btn-info:disabled:hover {
background-color: #287945 !important;
border-color: #287945 !important;
}

/*.btn:active, .btn:visited .btn:focus{
-webkit-box-shadow: none !important;
box-shadow: none !important;
}*/

.contactus_page .btn i{    
  padding-right: 4px !important;
}

.next-label{
font-size: 13px !important;
font-weight: 500 !important;
}

.form-control{
font-size: 13px !important;
}

.polaris-tabs-main .card-body div.tab-content:not(:first-child) {
  display: none;
}

.polaris-tabs-main .card-header-tab {
  margin-left: 3rem;
}

.card-header-tabs > li.active{
color: #000 !important;
border-bottom: 3px solid #000 !important;
font-weight: 500;
}

.card-header-tabs > li.active > a{
color: #000 !important;
}

.card-header-tabs > li {
display: block !important;
}
.card-header-tab>a:hover {
  /* border-color: #c4cdd5; */
  font-weight: 500 !important;
}

.card-header-tab>a { 
  border-bottom: none;
  font-size: 14px !important;
  color: #303030 !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 5px;
}

::-webkit-scrollbar-track {
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #c5ccd1;
}

.vip-tier-upgrade.active {
border: 1px solid #b4e7c4;
padding: 0;
margin: 0;
background-color: #f1f8f5;
}

.vip-tier-upgrade .card-header-actions h2 {
padding: 14px;
}
.display-2 {
font-size: 2.8rem;
font-weight: 600;
line-height: 3.2rem;
}

.vip-tier-upgrade .active-badge {
position: absolute;
top: 0;
left: 0px;
padding: 0;
display: inline-block;
}

.vip-tier-upgrade .active-badge span {
background-color: #008060;
color: #fff;
padding: 2px 5px;
border-radius: 2px;
font-size: 12px;
}

.vip-tier-upgrade {
position: relative;
}

.vip-tier-upgrade .tier-button {
padding: 10px;
}

.vip-tier-upgrade .card-body h2 {
margin-bottom: 20px;
font-size: 24px;
}

.vip-tier-upgrade .card-body {
padding-top: 20px !important;
}

.vip-tier-upgrade .tier-button {
padding: 10px;
}

.payment_page .price-table-wrap{  
flex: 0 0 34.33333%;
max-width: 34.33333%;
}

.footer-help {
display: flex;
-webkit-box-pack: center;
justify-content: center;
width: 100%;
margin: 2rem 0;
padding: 0 2rem;
}

.footer-help__content {
display: inline-flex;
-webkit-box-align: center;
align-items: center;
padding: 1.6rem 2rem 1.6rem 1.6rem;
border: 1px solid #dfe3e8;
border-radius: 999px;
}

.modal .close{
font-size: 20px !important;
}

input[type="radio"], input[type="checkbox"] {
height: 13px !important;
width: 13px !important;
margin: 3px 0 0 !important;
z-index: 100 !important;
accent-color: #303030 !important;
}

.form-check-label{
margin-left: 3px !important;
font-size: 13px !important;
cursor: pointer !important;
width: fit-content !important;
}

.home_page .card-body p{
margin-bottom: 1.8rem !important;
}

.pr-5{
padding-right: 5px !important;
}

.mr-5{
margin-right: 5px !important;
}

.mr-2{
margin-right: 2px !important;
}

label.error {
color: rgb(167 15 33) !important;
font-size: 13px !important;
margin-top: 2px !important;
}

.alert{
padding: 13px;
border-radius: .75rem !important;
}

table .btn-second{
margin-top: 3px;
}

.alert-success{
background-color: #008060 !important;
}

.alert-success span{
font-weight: 500;
}

.alert .close{
opacity: 1;
}

.alert-success .close, 
.alert-danger .close{
color: #fff;
}

.error-container{
color: #ec0606;
}
.custom-error-icon {
background: url("../assets/img/error-icon.png") no-repeat left center;
padding-left: 20px;
background-size: 16px 16px;
}
.custom-error-icon-setting {
background: url("../assets/img/error-icon.png") no-repeat left center;
padding-left: 20px;
background-size: 16px 16px;
}
.alert-warning{
  background-color: #ffb800 !important;
  border-color: #ffb800 !important;
  color: black !important;
  font-weight: 400;
}

.alert i{
position: static;
top: 18px;
}

.alert span{
  margin-top: -20px;
  margin-right: 50px;
  margin-left: 5px;
}

.alert-info{
background-color: #91d0ff !important;
border-color: #91d0ff !important;
color: black !important;
font-weight: 400;
}

.alert-info a{
color: black !important;
}

.alert .close{
margin-top: -3px;
}

.form-control:focus,.form-control:focus-visible {
border-color: #333 !important;
-webkit-box-shadow: inset 0 0 0 0 transparent, 0 0 0 1px #333 !important;
box-shadow: inset 0 0 0 0 transparent, 0 0 0 1px #333 !important;
}

select.form-control {
color: #303030 !important;
font-weight: 450 !important;
border: 1px solid #1c1e1e !important;
border-radius: 10px !important;
background-image: url(icon-arrow.png) !important;
background-size: auto 40%;
}

.form-control {
border: 1px solid #1c1e1e;
border-radius: 10px;
}

.input-group .input-group-addon {
border-color: #000000;
background-color: #dedede;
color: #000;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-radius: 10px;
}
.input-group .input-group-addon a{color: #000000;}
.field-info{
padding-top: 2px !important;
color: #212b36 !important;
}

.btn-danger:active:focus{
border-color: #761c19 !important;
box-shadow: 0 0 0 1px #8f220e !important;
}

.text-red{
color: rgb(167 15 33) !important;
}



.radio-group {
display: flex;
flex-direction: column;
}

Style for each radio button container
.radio-container {
display: flex;
align-items: center;
user-select: none;
font-size: 13px;
cursor: pointer;
width: fit-content;
}

/* Hide the default radio button */
.radio-container input[type="radio"] {
display: none;
}

/* Custom styled radio button */
.radio-custom {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid #a6b5ca;
margin-right: 5px;
position: relative;
background-color: white;
transition: all 0.3s;
}

/* Radio button checked state */
.radio-container input[type="radio"]:checked + .radio-custom {
background-color: #303030;
border-color: #303030;
}

.radio-container input[type="radio"]:checked + .radio-custom::after {
  content: "";
  position: absolute;
  top: 3.5px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: white;
}

/* Hover and focus states for better accessibility */
.radio-container:hover .radio-custom {
border-color: #616161;
}

.radio-container input[type="radio"]:focus + .radio-custom {
outline: 2px solid #303030;
outline-offset: 2px;
}

.radio-container input[type="radio"]:disabled + .radio-custom{
cursor: not-allowed !important;
}

.btn.disabled, .btn:disabled{
  cursor: not-allowed !important;
}

.form-control {
color: #303030 !important;
}

.bootstrap-table .fixed-table-toolbar {
border: 1px solid #ffffff !important;
}

#settingSection .card-body p{
margin-bottom: 1.8rem !important;
}

.form-control.error{
  border: 1px solid rgba(142, 11, 33, 1) !important;
  background-color: rgba(254, 232, 235, 1) !important;
}

.form-control.error option{
  background-color: #fff !important;
}

.feature-model{
position: relative; 
left: 25px; 
font-size: 14px;
font-weight: 700;
}

.inv-feature-model{
position: relative;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}

.same-space {
margin-right: 8px;
}

.pl-10{
padding-left: 10px;
}
.pl-0{
padding-left: 0px !important;
}
.pl-25{
padding-left: 25px !important;
}

#stockyPOModel .modal-dialog {
margin: 290px auto;
}
#stripe-feature-modal .modal-dialog {
margin: 200px auto;
}
#gateway-feesync-settings .modal-dialog {
max-width: 960px !important;
}

.order-list .btn i{
padding-top: 6px !important;
padding-right: 1px !important;
}

.wizard-card .btn-previous.disabled {
display: block;
color: #403c37 !important;
}

#showSettings .parallel-div .marketplace-info.btn:hover{
color: rgb(12 12 12 / 85%);
}
#showSettings .parallel-div .marketplace-info.btn{
border-radius: 5px !important;
}
#showSettings .row{
margin-top: 0rem;
}
#showSettings .sync-link{
color: black !important;
}

#product_matching_div input[type="radio"],
.plan-card input[type="radio"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 16px;
height: 16px;
border: 2px solid #a6b5ca; /* Outer black border */
border-radius: 50%;
background-color: white; /* Inner white */
display: inline-block;
position: relative;
cursor: pointer;
}

/* When selected (checked state) */
#product_matching_div input[type="radio"]:checked,
.plan-card  input[type="radio"]:checked {
background-color: white !important; /* Keep inner white */
border: 4px solid #303030 !important; /* Thick black outer border */
}

/* Remove focus effect */
input[type="radio"]:focus {
outline: none;
box-shadow: none;
}

.select2-container--default .select2-selection--single{
border: 1px solid #000000 !important;
border-radius: .75em !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{
color: rgb(48, 48, 48)  !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
color: rgb(48, 48, 48)  !important;
border-color: rgb(48, 48, 48) transparent transparent transparent !important;
}

.select2.select2-container .selection .select2-selection{
border: 1px solid #000000 !important;
border-radius: .75em !important;
}

.dataTables_filter input[type="search"]{
border: 1px solid #000000 !important;
border-radius: .75em !important;
}
.panel{
border-radius: .75em;
}
.panel .panel-heading{
border-top-left-radius: .75em;
border-top-right-radius: .75em;
}

.modal-header{
background-color: #f1f1f1 !important;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.modal-header .modal-title{font-weight: bold;}
.modal-content{
border: 1px solid rgba(0, 0, 0, 0.2);
background-color: #fff;
background-clip: padding-box;
border-radius: 10px !important;
outline: 0;
}

@media (min-width: 1200px) {
.modal-xl {
    max-width: 1140px;
}
}

.red-note{
/* color: #d33724;font-size: 12px; */
font-weight: bold;
}


.btn-default{
background-color: #efefef;
border: 1px solid #ccc;
color: #333;
}

.btn-default:hover,.btn-default.hover,.btn-default:focus{
background-color: #e7e4e4;
border: 1px solid #ccc;
color: #333;
}


.btn-black{
background-color: #303030;
border: 1px solid #111;
color: #fff;
}
.btn-black:hover,.btn-black:focus{
background-color: #303030;
border: 1px solid #111;
color: #fff;
}


.btn-secondary{
background-color: #efefef;
border: 1px solid #1716161c;
color: #333;
}
.btn-secondary:hover,.btn-secondary.hover,.btn-secondary:focus{
background-color: #e7e4e4;
border: 1px solid #1716161c;
color: #333;
}

.btn-purple{
background-color: #b700ff;
color: #ffffff;
}
.btn-purple:hover,.btn-purple.hover,.btn-purple:focus{
background-color: #9002c7;
color: #ffffff;
}
.btn-tealgreen{
background: #3A8F85 !important;
color: #fff !important;
}
.btn-tealgreen:hover,.btn-tealgreen.hover,.btn-tealgreen:focus{
background: #24655d !important;
color: #fff !important;
}


.btn-back{
color: #000 !important;
background-color: #d2d6de !important;
}


.fw-100{font-weight: 100 !important;}
.fw-200{font-weight: 200 !important;}
.fw-300{font-weight: 300 !important;}
.fw-400{font-weight: 400 !important;}
.fw-500{font-weight: 500 !important;}
.fw-600{font-weight: 600 !important;}
.fw-700{font-weight: 700 !important;}
.fw-800{font-weight: 800 !important;}
.fw-900{font-weight: 900 !important;}
.fw-bold{font-weight: bold !important;}
.fw-bolder{font-weight: bolder !important;}
.fw-normal{font-weight: normal !important;}

.tooltip .tooltip-inner{white-space: normal;}

.nav-tabs>li{margin-bottom: 0px;}
.nav.nav-tabs>li>a{border: none;color:#555 !important;background: inherit;}
.nav.nav-tabs li.active{border-bottom: 4px solid #333;color:#333;font-weight: 700;} 
.nav.nav-tabs>li.active>a.tab{border: none;} 
.nav.nav-tabs>li>a:hover, .nav.nav-tabs>li>a:active, .nav.nav-tabs>li>a:focus{color: #444;background: inherit;border: none;}

.icheck-primary>input:first-child:checked+input[type=hidden]+label::before, .icheck-primary>input:first-child:checked+label::before{
background-color: #303030 !important;
border-color: #303030 !important;
}
[class*=icheck-]>input:first-child+input[type=hidden]+label::before, [class*=icheck-]>input:first-child+label::before{
border: 1px solid #7a7777;
}
.icheck-primary>input:first-child:not(:checked):not(:disabled):hover+input[type=hidden]+label::before, .icheck-primary>input:first-child:not(:checked):not(:disabled):hover+label::before{
border: 2px solid #7a7777;
}
.datepicker table tr td.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover{    background-image: linear-gradient(to bottom, #666a6c, #000000);}



/* On-boarding section CSS START */
.accordion-header {
width: 100%;
padding: 10px 5px 5px 5px;
font-size: 13px;
font-weight: 600;
background: none;
border: none;
text-align: left; 
cursor: pointer;
outline: none;
transition: background 0.3s ease;
}
.accordion-header span{
vertical-align: top;
}

.accordion-header:hover {
background-color: #f8f8f8;
border-radius: 6px;
}
button:focus {
outline: 0px auto;
}
.home_page .card-body .accordion-content p {
font-size: 13px;
color: #303030 !important;
margin-bottom: 0.8rem !important;
font-weight: 400;
}
.accordion-content {
max-height: 0;
overflow: hidden;
padding: 0 16px;
transition: max-height 0.4s ease, padding 0.3s ease;
color: #555;
}
.accordion-content .btn-info {
font-size: 14px !important;
padding: 0.5rem 2.1rem !important;
}
.accordion-content .col-md-10{
padding-left: 3.20rem;
padding-top: 10px;
}
.accordion-item.active .accordion-content {
max-height: 100px;
padding: 2px 5px 0px 20px
}
/* .accordion-item.active .accordion-header {
font-weight: 600;
} */
.accordion-content img.preview.small-image {
  width: 50px;
  opacity: 1;
  margin-left: 5rem;
  vertical-align: middle;
}
@media (max-width: 600px) {
  /* .accordion-content img.preview { display: block; margin: 1rem 0 0; } */
  .accordion-item.active .accordion-content img.preview.small-image{display: none !important;}
}
@media (max-width: 1000px) {
/* .accordion-content img.preview { display: block; margin: 1rem 0 0; } */
.accordion-item.active .accordion-content img.preview.small-image{top: -56px !important;}
}
.accordion-item.active {
background-color: #f8f8f8;
border: 1px solid #dbd8d8;
border-radius: 6px;
}

.accordion-item .accordion-content img.preview{display: none;}
.accordion-item.active .accordion-content{overflow: visible;}
.accordion-item.active .accordion-content img.preview.small-image{display: inline-block;position: absolute;top: -28px;right: 50px;}


.dotted-circle {
display: inline-block;
width: 20px;
height: 20px;
border: 2px dotted #dbd8d8;
border-radius: 50%;
margin-right: 10px;
}
.dotted-circle.completed {
background-color: #6c777c;
border: none;
text-align: center;
color: #ffffff;
font-size: 18px;
font-weight: bold;
line-height: 20px;
}
.accordion-header .fa-check-circle{
font-size: 18px !important;
margin-right: 10px;
}
/* On-boarding section CSS END */

.panel .panel-heading .panel-title{font-size: 18px !important;}