.checkbox-color{
  position: relative;
  cursor: pointer;
}
/*input[type=checkbox] {
    opacity: 0;
}*/
.checkbox-color-label{
  display: inline-block;
  padding-left: 17px;
  font-size:0;
}
.checkbox-color-label:before {
  content:'';
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
    border:2px solid #c7c7c7;
  border-radius:50%;
  left: 0;
  top: 0;
  background-color: #c7c7c7;
  font-size:20px;
}
.checkbox-color-input:checked + .checkbox-color-label:before {
  content: '\2713';
  position: absolute;
  text-align: center;
  font-size: 17px;
}
.checkbox-color-white:before{
  background-color: white;
}
.checkbox-color-pink:before{
  background-color: #ff8b8b;
  border-color:#ff8b8b;
}
.checkbox-color-blue:before{
  background-color: #4E8BD1;
  border-color:#4E8BD1;
}
.checkbox-color-green:before{
  background-color: #386B4E;
  border-color:#386B4E;
}
.checkbox-color-wood:before{
  background-color: #c19a6b;
  border-color:#c19a6b;
}
.checkbox-color-black:before{
  background-color: #333131;
  border-color:#333131;
}
.checkbox-color-red:before{
  background-color: #FF1212;
  border-color:#FF1212;
}
.checkbox-color-yellow:before{
  background-color: #DBC51F;
  border-color:#DBC51F;
}

@keyframes spinner {
      to {transform: rotate(360deg);}
    }
    .spinner:before {
      content: '';
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      margin-top: -10px;
      margin-left: -10px;
      border-radius: 50%;
      border: 2px solid #ccc;
      border-top-color: #000;
      animation: spinner .6s linear infinite;
    }

    .custom-blur{
      -webkit-filter: blur(.5px);
      -moz-filter: blur(.5px);
      -o-filter: blur(.5px);
      -ms-filter: blur(.5px);
      filter: blur(.5px);
      background-color: #ccc;
    }

    .error-message{
      font-size: 13px; 
      color: red;
    }

    ol.progtrckr {
    margin: 0;
    padding: 0;
    list-style-type none;
}

ol.progtrckr li {
    display: inline-block;
    text-align: center;
    line-height: 3.5em;
}

ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }

ol.progtrckr li.progtrckr-done {
    color: black;
    border-bottom: 4px solid yellowgreen;
}
ol.progtrckr li.progtrckr-todo {
    color: silver; 
    border-bottom: 4px solid silver;
}

ol.progtrckr li:after {
    content: "\00a0\00a0";
}
ol.progtrckr li:before {
    position: relative;
    bottom: -2.5em;
    float: left;
    left: 50%;
    line-height: 1em;
}
ol.progtrckr li.progtrckr-done:before {
    content: "\2713";
    color: white;
    background-color: yellowgreen;
    height: 2.2em;
    width: 2.2em;
    line-height: 2.2em;
    border: none;
    border-radius: 2.2em;
}
ol.progtrckr li.progtrckr-todo:before {
    content: "\039F";
    color: silver;
    background-color: white;
    font-size: 2.2em;
    bottom: -1.2em;
}

.border-radius-zero{
  border-radius: 0px !important;
}

.color-green{
  color: green;
}

.zoom:hover {
  transform: scale(4.5);
}

.login-method-seperator{
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 15px;
}

.no-border{
  border: none !important;
}

.custom-input-override{
  border-radius: 0px !important; 
  outline: none;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

.order-btn{
  background-color: #363f4d;
  color: #FFF;
}

.pb-100{
  padding-bottom: 100px !important;
}

.txt-dcr-none{
  text-decoration: none !important;
}

.txt-green{
  color: #41b468 !important;
}

.txt-purple{
  color: #3b5997 !important;
}

.mt-25{
  margin-top: 20px !important;
}

.custom-btn{
  font-weight: 400;
  text-transform: uppercase;
  color:#ffffff;
  background-color:#363f4d;
  border-color:#363f4d;
  width: 140px;
  border-radius: 3px;
}
.promo-applied{
  font-weight: bold;
  color: green;
  font-size: 15px;
  padding: 0px !important;
  margin: 0px !important;
}

/*Out of stock layer css*/
.stockoutlayer {
  position: relative;
  text-align: center;
  color: white;
}

.centered-layer-text {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  color: #eeebeb !important;
  background-color: #d91414;
  width: 100%;
  padding: 10px;
  opacity: 0.7;
}

.centered-layer-text-category {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  color: #eeebeb !important;
  background-color: #d91414;
  width: 100%;
  padding: 0px;
  opacity: 0.7;
}

/*Order Timeline CSS*/
.circle {
  padding: 13px 20px;
  border-radius: 50%;
  background-color: #15C979;
  color: #fff;
  max-height: 50px;
  z-index: 2;
}

.how-it-works.row .col-2 {
  align-self: stretch;
}
.how-it-works.row .col-2::after {
  content: "";
  position: absolute;
  border-left: 3px solid #15C979;
  z-index: 1;
}
.how-it-works.row .col-2.bottom::after {
  height: 50%;
  left: 50%;
  top: 50%;
}
.how-it-works.row .col-2.full::after {
  height: 100%;
  left: calc(50% - 3px);
}
.how-it-works.row .col-2.full-left::after {
  height: 100%;
  left: calc(50% - 0px);
}
.how-it-works.row .col-2.top::after {
  height: 50%;
  left: 50%;
  top: 0;
}


.timeline div {
  padding: 0;
  height: 40px;
}
.timeline hr {
  border-top: 3px solid #15C979;
  margin: 0;
  top: 17px;
  position: relative;
}
.timeline .col-2 {
  display: flex;
  overflow: hidden;
}
.timeline .corner {
  border: 3px solid #15C979;
  width: 100%;
  position: relative;
  border-radius: 15px;
}
.timeline .top-right {
  left: 50%;
  top: -50%;
}
.timeline .left-bottom {
  left: -50%;
  top: calc(50% - 3px);
}
.timeline .top-left {
  left: -50%;
  top: -50%;
}
.timeline .right-bottom {
  left: 50%;
  top: calc(50% - 3px);
}
/*Ends*/

a.nav-link:hover{
  background-color: #FFF5F5;
}