:root {
  --bg-light: #fffaf7;
  --bg-mid-light: #ffe9df;
  --bg-light-hover: #ffd3bf;
  --main-color: #fe671f;
  --main-color-hover: #f05d19;
  --main-btn-color: #f67a3c;
  --main-btn-color-hover: #e26e34;
  --bg-cycle-option: #dceaff; 
  --cycle-option-check: #78b13f;
  
  --bg-cycle-option: var(--bg-mid-light); 
  --cycle-option-check: var(--main-color); 
}
html {
  scroll-behavior: smooth;
}
section#footer {
  border-top: 1px solid transparent;
}
.btn-primary, .btn-primary:focus {
  background-color: var(--main-color);
  border-color: var(--main-color);
}
.btn-primary:hover, .btn-primary:active, .btn-primary:active:focus {
  background-color: var(--main-color-hover);
  border-color: var(--main-color-hover);
}

/* custom header */
section#header {
  background-color: #fff;
}
ul.top-nav>li>a {
  color: #777;
}
ul.top-nav>li:active>a, ul.top-nav>li:focus>a, ul.top-nav>li:hover>a, ul.top-nav>li>a:focus {
  color: #fff;
  background-color: #ffffff29;
}
ul.top-nav>li.primary-action>a.btn {
  background-color: var(--main-btn-color);
}
ul.top-nav>li.primary-action>a.btn:hover {
  background-color: var(--main-btn-color-hover);
}
.navbar-main {
  background-color: var(--main-color);
}
.navbar-main .navbar-nav>.active>a, .navbar-main .navbar-nav>.active>a:focus, .navbar-main .navbar-nav>.active>a:hover, .navbar-main .navbar-nav>.open>a, .navbar-main .navbar-nav>.open>a:focus, .navbar-main .navbar-nav>.open>a:hover, .navbar-main .navbar-nav>li>a:focus, .navbar-main .navbar-nav>li>a:hover{
  background-color: #ffffff29;
}
.navbar-main li.account {
  background-color: #ffffff29;
}
.dropdown-menu {
  border: none;
}

/* sidebar */
.panel-sidebar a.list-group-item.active, .panel-sidebar a.list-group-item.active:focus, .panel-sidebar a.list-group-item.active:hover {
  background-color: var(--main-color);
  border-color: var(--main-color);
}
.panel-sidebar>.panel-heading{
  background-color: var(--bg-mid-light);
}
.panel-sidebar {
  border: none;
  background-color: var(--bg-light);
}
.list-group-item {
  border: none;
  background-color: transparent;
}
a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus, button.list-group-item:hover{
  background-color: var(--bg-light-hover);
}
.panel-sidebar a.list-group-item.active i, .panel-sidebar a.list-group-item.active:focus i, .panel-sidebar a.list-group-item.active:hover i{
  color: #fff !important;
}
#order-standard_cart .sidebar-collapsed{
  display: none;
}

/* body */
div.header-lined h1 {
  color: var(--main-color);
}
div.header-lined .breadcrumb>.active {
  color: var(--main-color-hover);
}
.dataTables_wrapper .dataTables_info {
  background-color: var(--main-color);
}
.announcement-single .title {
  color: var(--main-color);
}

/* product standard_cart*/
#order-standard_cart .products .product {
  border: none !important;
}
#order-standard_cart .products .product header{
  background: #ffe9df !important;
}
.domain-checker-container {
  background: -webkit-linear-gradient(top, #ffb898, #fe671f) !important;
}
#order-standard_cart label{
  width: 100%;
}
.product a.btn {
  background-color: var(--main-btn-color);
  border-color: var(--main-btn-color);
}
.product a.btn:hover {
  background-color: var(--main-btn-color-hover);
}

div.product-details div.product-icon {
  font-size: 14px;
}

/***** Select Billing Order *****/
/** load bellow jquery script for auto height of select (default add to js/custom.js in template or create it if it doesn't exist)
* 
  var ORD = {}
  ORD.billingcycle_selelct_custom = function(){
    if (window.location.search.includes('a=confproduct')){
      var style = '<style>#order-standard_cart .form-control#inputBillingcycle{height: unset !important;background-color: transparent !important;padding: 0;}</style>';
      $('#inputBillingcycle').attr('multiple', 'multiple').attr('size', $('#inputBillingcycle option').length + 1).before(style);
    }
  }
  ORD.billingcycle_selelct_custom();

/**  and then load custom.js by adding bellow script to bottom of footer.tpl in template
*
  <script type="text/javascript" src="{assetPath file='custom.js'}?v={$versionHash}"></script>
*/
#order-standard_cart .form-control#inputBillingcycle {
  border: none;
  box-shadow: none;
  overflow: hidden;
  width: 100%;
  /*padding: 0;
  background-color: transparent !important;
  height: unset !important;*/
  max-height: unset;
}
#order-standard_cart .form-control#inputBillingcycle{height: unset !important;background-color: transparent !important;padding: 0;}
#inputBillingcycle option {
  margin-bottom: 5px;
  padding: 8px 6px;
  border: 1px solid #e7e7e7;
  border-radius: 5px;
  white-space: normal;
  padding-left: 40px;
  position: relative;
  color: #7c8b9b;
}
#inputBillingcycle option:hover {
  background-color: var(--bg-cycle-option);
  border: 1px solid var(--bg-cycle-option);
  cursor: pointer;
}
#inputBillingcycle option:checked {
  background-color: var(--bg-cycle-option);
  border: 1px solid var(--bg-cycle-option);
  color: #626262;
  font-weight: 600;
}
#inputBillingcycle option:checked::before {
  content: '';
  display: inline-block;
  position: absolute;
  transform: rotate(45deg);
  height: 20px;
  width: 10px;
  border-bottom: 4px solid var(--cycle-option-check);
  border-right: 4px solid var(--cycle-option-check);
  left: 15px;
  top: 0;
  bottom: 4px;
  margin: auto;
}
#inputBillingcycle:focus option:checked {
  background: linear-gradient(0deg, var(--main-color) 0%, var(--main-color) 100%) !important;
  border: 1px solid var(--bg-cycle-option);
}
#inputBillingcycle:focus option:checked::before{
  border-bottom: 4px solid #fff;
  border-right: 4px solid #fff;
}

#order-standard_cart #frmConfigureProduct .product-info {
  background-color: var(--bg-light);
}
#order-standard_cart #frmConfigureProduct .order-summary {
  background-color: var(--main-color);
  border-bottom: 3px solid var(--main-color);
}

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