::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgb(183, 183, 183);
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: rgb(183, 183, 183);;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: rgb(183, 183, 183);;
}

.customCushion {padding: 1em 0 2em 0;}
.customCushion .optionFrame{ padding: 2em 0 0 0;}

.customCushion .imgbgchk:checked + label>.tick_container{
    opacity: 1;
}
/*         aNIMATION */
.optionFrame label {position: relative;}
.optionFrame .decription {padding-top: 1em;}
.optionFrame .decription h3 {font-size: 1em;color: #27838f;}
.customCushion .tick_container {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 52%;
    left: 0;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-40%, -40%);
    cursor: pointer;
    text-align: center;
}


.cushionBuildSteps .optionFrame .col-md-3 {padding-bottom: 2em;}
.cushionBuildSteps .optionFrame .col-md-3 img {width: 80%;}
.cushionBuildSteps .optionFrame .col-md-3:hover img {opacity: 0.4;}
.optionFrame .decription p {font-size: 0.8em;}

.customCushion .tick {
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    padding: 6px 12px;
    height: 40px;
    width: 40px;
    border-radius: 100%;
}

.StepTitle span {font-size: 12px;}
.StepTitle h2 {font-size: 1.5rem;}
.StepTitle {margin-top: 2em;}


/*progressbar*/
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    counter-reset: step;
  padding-left: 0;}
  #progressbar li {
    list-style-type: none;
    color: #27838f;
    text-transform: uppercase;
    font-size: 0.9rem;
    width: 20%;
    float: left;
    position: relative;
  text-align: center;}
  #progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 40px;
    line-height: 40px;
    display: block;
    font-size: 10px;
    color: #27838f;
    background: #fff;
    border-radius: 3px;
    margin: 0 auto 5px auto;
  border-radius: 100px;border: 1px solid #27838f;}
  /*progressbar connectors*/
  #progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: #27838f;
    position: absolute;
    left: -50%;
    top: 18px;
    z-index: -1; /*put it behind the numbers*/
  }
  #progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none; 
  }
  /*marking active/completed steps green*/
  /*The number of the step and the connector before it = green*/
  #progressbar li.active:before,  #progressbar li.active:after, #progressbar li.complete:before, #progressbar li.complete:after{
    background: #27838f;
    color: white;
  }

  @keyframes blinking{

     20% {
        background-color: #27838F;
        border: 1px solid #27838f;
      }
      100% {
        background-color: #eee;
        border: 1px solid #27838f;
      }
    }

#progressbar li.working:after, #progressbar li.working:before{ animation: blinking 5s infinite; }
  

button.NextButton.ButtonPosition {position: relative;float: right;}
.NextButton {border: 1px solid #27838f;padding: 1em 1em;color: #fff; font-size: 13px; text-transform: uppercase;font-weight: bold;background: #fff;background: #27838f;}
.cushionBuildSteps {padding-bottom: 6em;}
button.NextButton.ButtonPosition:hover {background: #27838f;color: #fff;}

.dimensionsSection  img {width: 90%;}
.dimensionsSection.justify-content-md-center {margin-top: 3rem;}
ul.dimensions {list-style: none;}
ul.dimensions li {float: left;width: 100%;}
ul.dimensions li span strong {float: left;width: 35px;line-height: 39px;}
ul.dimensions li span p {float: left;line-height: 39px;}
ul.dimensions li input {height: 38px;border: 1px solid #d5d7d7;font-size: 13px;}
ul.dimensions li small {color: #324BD8;font-weight: bold;line-height: 39px;}
ul.dimensions li.message p {margin-top: 1rem;}
ul.dimensions li.message {float: left;width: 100%;background: #f0f0f0;text-align: center;border: none;font-size: 12px;}
.dimensionsSection .continueButton {margin-top: 1em;}

.colorSelections {background: #F7F7F7;}
.colorPanel ul {list-style: none;padding: 0 13px;font-size: 0.9em;}
.colorPanel ul li {padding: 0 0 5px 0;}
.StepTitle p {font-size: 13px;}
.colorPanel {padding-top: 1em;}
.colorPanel ul.row.checkBoxOptions li input {display: inline-block;position: relative;top: 2px;}
.boldText{font-weight: bold;}
.subtitleSection{text-transform: uppercase; font-size: 1.1em; font-weight: bold; margin-top: 2em;}
.colorPalat {list-style: none;}
.colorPalat li {padding-bottom: calc(var(--bs-gutter-x) * 1);}

.tooltip-inner{ background-color: #27838F;}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #27838F !important;}

.coloPopup button.btn-close {float: right;width: 0.2em;height: 0.2em;}

.finalStep ul {list-style: none;padding-left: 0;margin-bottom: 2em;}
.finalStep ul li a {color: #000;text-decoration: underline;width: 137px;float: left;}
.finalStep h3 {font-size: 1.3em;}
.finalStep  .col-md-12 {margin-top: 2em;}
.finalStep .col-md-12 ul li input {margin-right: 6px;}
.finalStep .col-md-12 ul li.row.continueButton {margin-top: 2em;}
.finalStep li.row.message .col-md-7 {background: #F0F0F0;}
.finalStep li.row.message .col-md-7 h4 {font-size: 1.3em;padding: 10px 0 5px 0;}
.finalStep li.row.message {padding-left: 11px;margin-top: 2em;padding-right: 26px;}
.finalStep .col-md-12 ul li.row.continueButton button.NextButton {width: 100%;}
.how-it-works span {
	margin: 0!important;
}