/* TRACKING STYLE */



.order-tracking{

	text-align: center;

	width: 33.33%;

	position: relative;

	display: block;

}

.order-tracking .is-complete{

	display: block;

	position: relative;

	border-radius: 50%;

	height: 30px;

	width: 30px;

	border: 2px solid #b2b2b2;

	background-color: #fff;

	margin: 0 auto;

	transition: all 0.25s linear;

	-webkit-transition: all 0.25s linear;

	z-index: 2;

}

.order-tracking .is-complete:after {

	display: block;

	position: absolute;

	content: '';

	height: 14px;

	width: 7px;

	top: -2px;

	bottom: 0;

	left: 5px;

	margin: auto 0;

	border: 0px solid #AFAFAF;

	border-width: 0px;

	transform: rotate(45deg);

	opacity: 0;

}

.order-tracking.completed .is-complete{

	border-color: #27aa80;

	border-width: 0px;

    background-image: linear-gradient(270deg, var(--darkgreen), var(--lightgreen));

}

.order-tracking.completed .is-complete:after {

	border-color: #fff;

	border-width: 0px 3px 3px 0;

	width: 7px;

	left: 11px;

	opacity: 1;

}

.order-tracking p {

	color: var(--grey);

	font-size: 0.9rem;

	margin-top: 8px;

	margin-bottom: 0;

	line-height: 1.1rem;

}

.order-tracking p span{ font-size: 0.8rem; }

.order-tracking.completed p{ color: var(--darkgreen); }

.order-tracking::before {

	content: '';

	display: block;

	height: 3px;

	width: calc(100% - 20px);

	background-color: #b2b2b2;

	top: 13px;

	position: absolute;

	left: calc(-50% + 10px);

	z-index: 0;

}

.order-tracking:first-child:before{display: none;}

.order-tracking.completed:before{ background-image: linear-gradient(270deg, var(--darkgreen), var(--lightgreen)); }



/* END TRACKING STYLE -------------------------------------------------------------------------------------------------- */



/* SELECT OPTION STYLE ------------------------------------------------------------------------------------------------- */



/*the container must be positioned relative:*/

.cart-form-select { position: relative; width: 100%; font-size: 1rem; line-height: 30px; margin-bottom: 1rem; padding: 0 1rem; }

.cart-form-select select { display: none; /*hide original SELECT element:*/ }

.select-selected { background-color: #dfe7ca; border-radius: 28px; height: 46px; }



/*style the arrow inside the select element:*/

.select-selected:after {

    position: absolute;

    content: "";

    top: 20px;

    right: 36px;

    width: 0;

    height: 0;

    border: 6px solid transparent;

    border-color: var(--darkgreen) transparent transparent transparent;

}

  

/*point the arrow upwards when the select box is open (active):*/

.select-selected.select-arrow-active:after {

    border-color: transparent transparent var(--darkgreen) transparent;

    top: 14px;

}

  

/*style the items (options), including the selected item:*/

.select-items { height: 200px; overflow-y: scroll;}

.select-items div,.select-selected {

    color: var(--dark);

    padding: 8px 16px;

    border: 1px solid transparent;

    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;

    cursor: pointer;

    user-select: none;

  }

  

  /*style items (options):*/

  .select-items {

    position: absolute;

    background-color: #dfe7ca;

    top: 100%;

    left: 2rem;

    right: 2rem;

    z-index: 99;

    line-height: 20px;

  }

  .select-items:last-child {

    border-radius: 0 0 12px 12px;

  }

  

  /*hide the items when the select box is closed:*/

  .select-hide {

    display: none;

  }

  

  .select-items div:hover, .same-as-selected {

    background-color: rgba(0, 0, 0, 0.1);

  }

  @media screen and (max-width: 425px) {

    .cart-form-select {font-size: 0.9rem; line-height: 20px; margin-bottom: 0.8rem; padding: 0 0.8rem;}

    .select-selected { border-radius: 28px; height: 38px; }

    .select-selected:after { top: 17px; right: 28px; }

    .select-selected.select-arrow-active:after { top: 10px; }

    .select-items { line-height: 12px; }

  }



/* END SELECT OPTION STYLE ---------------------------------------------------------------------------------------------- */



/* CUSTOM CHECK BOX ----------------------------------------------------------------------------------------------------- */

/* The container */

.check-container {

    display: block;

    position: relative;

    padding-left: 30px;

    margin-bottom: 1rem;

    cursor: pointer;

    font-size: 1rem;

    color: var(--dark);

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

  }

  

  /* Hide the browser's default checkbox */

  .check-container input.checkb {

    position: absolute;

    opacity: 0;

    cursor: pointer;

    height: 0;

    width: 0;

  }

  

  /* Create a custom checkbox */

  .checkmark {

    position: absolute;

    top: 0;

    left: 0;

    height: 22px;

    width: 22px;

    background-color: #eee;

    border: 1px solid var(--grey);

    border-radius: 4px;

  }

  

  /* On mouse-over, add a grey background color */

  .check-container:hover input ~ .checkmark {

    background-color: #ccc;

  }

  

  /* When the checkbox is checked, add a blue background */

  .check-container input:checked ~ .checkmark {

    background-image: linear-gradient(270deg, var(--darkgreen), var(--lightgreen));

    border: 1px solid var(--lightgreen);

  }

  

  /* Create the checkmark/indicator (hidden when not checked) */

  .checkmark:after {

    content: "";

    position: absolute;

    display: none;

  }

  

  /* Show the checkmark when checked */

  .check-container input:checked ~ .checkmark:after {

    display: block;

  }

  

  /* Style the checkmark/indicator */

  .check-container .checkmark:after {

    left: 6px;

    top: 4px;

    width: 7px;

    height: 10px;

    border: solid white;

    border-width: 0 3px 3px 0;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);

  }

  @media screen and (max-width: 425px) {

    .check-container { padding-left: 26px; margin-bottom: 0.8rem; font-size: 0.9rem; }

    .checkmark { height: 19px; width: 19px; border-radius: 3px; }

    .check-container .checkmark:after { left: 4px; top: 2px; }    

  }



  /* END CUSTOM CHECK BOX -------------------------------------------------------------------------------------------------- */



.cart-form input.form-control { width: 100%; height: 46px; background-color: #dfe7ca; border-radius: 28px; margin-bottom: 1rem; border: none; padding: 0px 20px; font-size: 1rem; color: var(--dark); }

.cart-form input.form-control:focus { border: none; box-shadow: none;}

.cart-form input.form-control::placeholder { color: #a6ae97; }



@media screen and (max-width: 425px) {

  .cart-form input.form-control { height: 38px; margin-bottom: 0.8rem; padding: 0px 17px; font-size: 0.9rem; }

}