:root {
    --e-global-color-primary: #0a2663;
    --e-global-color-secondary: #2ca2fc;
    --e-global-color-text:  #6d6c6c;
    --e-global-color-accent: #fddc57;
    --e-global-color-white: #ffffff;
    --e-global-color-black: #000000;
    --e-global-color-vivid-blue: #2F4FFF;
    --e-global-color-light-blue: #1abcfe;
    --e-global-color-dark-blue: #20203e;
    --e-global-color-yellow: #f9970d;
    --e-global-color-light-yellow: #fdb913;
    --e-global-color-soft-green: #b3fb72;
    --e-global-color-moderate-green: #8bc53f;
    --e-global-color-dark-green: #005129;
    --e-global-color-desaturated-blue:#2e2e4f;
    --e-global-color-bright-red: #fa6437;
    --e-global-color-vivid-red: #E70108;
    --e-global-color-very-dark-grayish-blue: #6E7478;
    --e-global-color-very-dark-gray: #333333;
    --e-global-color-moderate-light-gray: #f0f0f0;
    --e-global-color-extra-moderate-light-gray: #f3f3f3;
    --e-global-color-dark-violet: #7e679a;
    --e-global-color-dark-cyan: #6aafa5;
    --e-global-color-dark-black: #1c1e21;
    --e-global-color-strong-cyan: #23b0ba;
    --e-global-color-very-dark-desaturated-blue: #2e4a71;
    --e-global-color-light-grayish-lime-green: #f0f2f1;
    --e-global-color-dark-moderate-lime-green: #2d8f3b;
    --e-global-color-extra-dark-blue: #111828;
    --e-global-color-very-pale: #effcff;
    --e-global-color-dark-gray: #777777;
}
/*Cart CSS*/
.skillboost-cart-btn a {
    position: relative;
    display: inline-block;
  }
  .skillboost-nav-menu--dropdown-mobile.skillboost-nav-menu--stretch{
    position: unset;
  }
  .navbar-area .navbar-area-2 .skillboost-cart-btn i {
    background: #f0d23f;
    border-radius: var(--e-global-button-border-radius);
    padding: 14px 13px;
    color: #fff;
    margin-left: 10px;
  }
  .skillboost-cart-btn span.skillboost-cart-count {
    font-size: 8px;
    color: var(--e-global-color-white);
    background-color: var(--e-global-color-accent);
    padding: 1px 4px 1px 4px;
    border-radius: var(--e-global-border-radius);
    position: absolute;
    top: 5px;
    right: 3px;
    min-width: 14px;
  }
  .skillboost-cart-btn .btn .badge{
    position: absolute !important;
  }
  .skillboost-cart-btn .btn:focus{
    box-shadow: none !important;
  }

/*-------- SEARCH FORM HEADER ------------ */
.search-form-header {
    cursor: pointer;
  }
  .search-form-header div#searchcontainer .searchFormInner{
    display: flex;
    align-items: center;
    background: #fff;
  }
  .search-form-header div#searchcontainer .form-control:focus{
    box-shadow: none;
    background: none;
  }
  .searchFormInner .search-button{
    background: #007bff;
    color: #fff;
    padding: 7px 15px;
  }
  .search-form-header label {
   
    border: 1px solid var(--e-global-color-very-dark-blue);
    background: var(--e-global-color-very-dark-blue);
    cursor: pointer;
    text-align: center;
    line-height: 0;
    margin: 0;
  }
  .search-form-header div#searchcontainer {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: block;
    background: rgba(0,0,0,.85);
    left: -100%;
    /* initially position search container out of view */
    top: 0;
    z-index: 9999;
    display: grid;
    align-items: center;
    /* shift container downwards so the header is still visible when search is shown */
    padding: 50px;
    opacity: 0;
    cursor: crosshair;
    text-align: center;
    font: bold 16px "Bitter", sans-serif;
    /* use google font */
    -webkit-transform: scale(0.9) translate3d(-0, -50px, 0);
    transform: scale(0.9) translate3d(-0, -50px, 0);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s, left 0s 0.5s;
    transition: transform 0.5s, opacity 0.5s, left 0s 0.5s;
  }
  .search-form-header div#searchcontainer div {
    font-weight: 400;
    padding: 5px;
    color: #fff;
  }
  .search-form-header div#searchcontainer form {
    width: 50%;
    margin: 0 auto;
    opacity: 0;
    -webkit-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
    -webkit-transition: all 0.5s 0s;
    transition: all 0.5s 0s;
  }
  
  .search-form-header div#searchcontainer form input[type="search"] {
    width: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    padding: 10px;
    outline: none;
    font-size: 26px;
  }
  .search-form-header div#searchcontainer.opensearch {
    left: 0;
    opacity: 1;
    -webkit-transform: scale(1) translate3d(0, 0, 0);
    transform: scale(1) translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s, left 0s 0s;
    transition: transform 0.5s, opacity 0.5s, left 0s 0s;
  } 
  .search-form-header div#searchcontainer.opensearch form {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: all 0.5s 0.5s;
    transition: all 0.5s 0.5s;
  }
  .search-form-header .close {
    top: 65px;
    right: 30px;
    position: absolute;
  }