#selector-questions{
  height:auto !important;
}

p.selector-brow {
    display: none;
}

.title h1 {font-family: "Gotham-book",Arial,Verdana,sans-serif;color: #A2BEC6;font-weight: 500;margin-bottom: 2rem;text-transform: uppercase;letter-spacing: .125em;font-size: 14px;}

span.why_ask-toggle_icon:after{
    position: relative;
    display: inline-block;
    top: 0;
    left: 0;
    transform: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9.531' height='9.449' viewBox='0 0 9.531 9.449'%3E%3Cg id='Group_2038' data-name='Group 2038' transform='translate(-1.667 6.327) rotate(-45)'%3E%3Cline id='Line_338' data-name='Line 338' y1='0.045' x2='7.468' transform='translate(0 3.364)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='1'/%3E%3Cpath id='Path_3840' data-name='Path 3840' d='M0,0,3.444,3.444,0,6.888' transform='translate(4.296)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: ' ';
    height: 0.75rem;
    width: 0.75rem;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .5;
    }

.why_ask-toggle_title{visibility: visible;width: auto;height: auto;padding-left: 0;}

.question .question_text {background: transparent;color: #fff;padding: 0;flex-direction: column;align-items: center;text-align: center;}

button.why_ask-toggle {width: auto;height: auto;padding-left: 0;font-size: .75rem;}

.options-list li label{
    flex-direction: column-reverse;
    background-color: #315F72;
    padding: .75em;
    text-align: center;
}

.question_holder.answered .question:not(.multiple) input.optionInput:not(:checked) + label{
    opacity:.6
}

.question_holder.answered input.optionInput:not(:checked) + label:hover, 
.question_holder.answered input.optionInput:not(:checked) + label:active,
.question_holder.answered input.optionInput:not(:checked) + label:focus {
    opacity:1;
}

button.selector-nav.inactive {background: transparent;opacity: .3;}
button.selector-nav.previous{
  /* margin-right:0; */
}

button.selector-nav.next{
  /* margin-left:0; */
}

button.selector-nav{

}

.nav-icon:before{
    
}

div#Mattress_Selector-Progress {
    display: none;
}

.question_text h2 {
    font-size: 30px;
    font-family: "Gotham-book",Arial,Verdana,sans-serif;
    font-weight: 500;
    padding: 0 3.5rem;
    letter-spacing: 0.5px;
    line-height: 1.25;
}

span.why_ask-toggle_icon {
    background: transparent;
}

.question-container {
}

.options-container {
    background: transparent;
    overflow: visible;
}

.next .nav-icon:after {
    border-right-color: #fff;
    border-top-color: #fff;
}

.previous .nav-icon:before, .next .nav-icon:after {
    border-top-color: #fff;
    border-width: 1px;
    height: 1.5rem;
    width: 1.5rem;
    border-width: 3px;
       display:none;
}


.previous .nav-icon:after, .next .nav-icon:before {
    background: transparent;
    height: 0;
    display: none;
}
.previous .nav-icon:before{
    border-left-color: #fff;
}

span.option-icon.animated {
    /* border: #fff solid 1px; */
    background: transparent;
    border-radius: .5em;
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: center;
    height: 4rem;
    width: 4rem;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOC40OTgiIGhlaWdodD0iMTIuNTA0IiB2aWV3Qm94PSIwIDAgMTguNDk4IDEyLjUwNCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE0NC43NTIgLTEwOS43NDgpIiBvcGFjaXR5PSIwLjI4NyI+PHBhdGggZD0iTTE3ODk3LDE1NjU2aC0xNmExLDEsMCwwLDEtMS0xdi0yYTEsMSwwLDAsMSwxLTFoMS4wNDFhLjc1Ljc1LDAsMCwwLDEuNDE2LDBoMS41ODRhLjc1Ljc1LDAsMCwwLDEuNDE2LDBoMS41ODZhLjc0OS43NDksMCwwLDAsMS40MTQsMGgxLjU4NmEuNzQ5Ljc0OSwwLDAsMCwxLjQxNCwwaDEuNTg2YS43NS43NSwwLDAsMCwxLjQxNiwwSDE3ODk3YTEsMSwwLDAsMSwxLDF2MkExLDEsMCwwLDEsMTc4OTcsMTU2NTZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTc3MzUgLTE1NTQyKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjAuNSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE0NyAxMTQpIiBmaWxsPSIjZmZmIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMSI+PHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjQiIHN0cm9rZT0ibm9uZSIvPjxyZWN0IHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iMTMiIGhlaWdodD0iMyIgZmlsbD0ibm9uZSIvPjwvZz48cGF0aCBkPSJNMTc4OTcsMTU2NTZoLTE2YTEsMSwwLDAsMS0xLTF2LTJhMSwxLDAsMCwxLDEtMWgxLjA0MWEuNzUuNzUsMCwwLDAsMS40MTYsMGgxLjU4NGEuNzUuNzUsMCwwLDAsMS40MTYsMGgxLjU4NmEuNzQ5Ljc0OSwwLDAsMCwxLjQxNCwwaDEuNTg2YS43NDkuNzQ5LDAsMCwwLDEuNDE0LDBoMS41ODZhLjc1Ljc1LDAsMCwwLDEuNDE2LDBIMTc4OTdhMSwxLDAsMCwxLDEsMXYyQTEsMSwwLDAsMSwxNzg5NywxNTY1NloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4MDQzLjAwMiAxNTc3NCkgcm90YXRlKDE4MCkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48L2c+PC9zdmc+");
    margin: 0 auto;
}

ul.options-list li p {
    margin: 0.1rem 0 .75rem;
    font-size: .75rem;
}

.question {
    /* width: 600px; */
    /* padding: 0 3rem; */
}

span.question_holder.reaction > .question{
    transform: translateX(-100%);
}

ul.options-list {
    padding: 0;
    justify-content: center;
}

.options-list li {
    min-width: auto;
    max-width: none;
    width: 25%;
    flex-grow: 0;
    flex-shrink: 0;
}

button.selector-nav {}

.next .nav-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.01' height='44.02' viewBox='0 0 24.01 44.02'%3E%3Cpath id='Path_3840' data-name='Path 3840' d='M0,38.363,19.181,19.181,0,0' transform='translate(2.828 2.828)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'/%3E%3C/svg%3E%0A");
}

.previous .nav-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.01' height='44.02' viewBox='0 0 24.01 44.02'%3E%3Cpath id='previous_arrow-icon' d='M19.182,0,0,19.182,19.182,38.363' transform='translate(2 2.828)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'/%3E%3C/svg%3E%0A");
}

.next .nav-icon, .previous .nav-icon{
    background-repeat:no-repeat;
    background-size: contain;
    background-position: 50%;
    width: 100%;
    height: 100%;
    margin: 0;
}



button.selector-nav:not(.inactive):hover, button.selector-nav:not(.inactive):focus {
    background: #ffffff0f;
    box-shadow: none;
}

.nav_icon-holder {
    width: 100%;
    height: 100%;
    padding: 1.25em;
}


button.selector-nav {
    /* height: 4rem; */
    /* width: 5rem; */
    background: transparent;
}

#Question-CurrentMattress .options-list li:last-child, #Question-ProfileSleepPosition .options-list li:last-child {
    /* width: 25%; */
}

input.optionInput:checked+label p {
    font-weight: bold;
    /* font-size: .875rem; */
}

input.optionInput:checked+label .option-icon{
    position:relative;
}

.option-icon:after, .option-icon:before{
    transition: opacity .2s .4s ease;
     content: '';
     opacity:0;
}

input.optionInput:checked+label .option-icon:before {
    background-color: #F26D21;
    border-radius: 50%;
    content: '';
    display: block;
    width: 80%;
    height: 80%;
    box-shadow: 0 0 0 0px #F26D21, 0 0 0px 0px #c14f0c;
    opacity:1;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

input.optionInput:checked+label .option-icon:after{
       content: '';
       display: block;
       /* width: .5rem; */
       /* height: 1rem; */
       /* border:#fff solid 2px; */
       /* border-left-color:transparent; */
       /* border-top-color:transparent; */
       position:absolute;
       top:50%;
       left:50%;
       transform-origin:center center;
       /* transform:translate(-50%,-60%) rotate(40deg); */
       opacity:1;
}


input.optionInput:checked+label .option-icon:after{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.049' height='18.541' viewBox='0 0 24.049 18.541'%3E%3Cpath id='Path_3927' data-name='Path 3927' d='M-21023-6701.1l6.568,6.569,15.359-15.359' transform='translate(21024.061 6710.947)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/svg%3E%0A");
    background-position: center;
    height: 1.5em;
    width: 1.5em;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
}


input.optionInput:checked+label {
    box-shadow: 0 0 0px 0px #fff, 0px 0px 0px 0px #03435500, 0px 0px 0px 2px #fff, 0px 0px 5px 4px #033a4ab8, inset 0px 0px 0px 84px #ffffff;
    border: none;
}

.why_ask-copy p {
    font-size: .875rem;
    line-height: 1.75;
    text-align: center;
}

.why_ask-copy h4 {margin-top: 0;font-size: 2rem;font-weight: normal !important;margin-left: auto;margin-right: auto;}

.why_ask-opened .question_holder.active .why_ask-content {
    top: 30vh;
    transform: translate(-50%, 0%);
    background: transparent;
    color: white;
    box-shadow: none;
    transition: transform .5s .2s ease, opacity .2s .2s ease;
    width: 100%;
    max-width: 30rem;
}

.why_ask-opened .question_holder.active .selector-modal-background {
    backdrop-filter: none;
    background: rgba(23, 27, 29, 0.94);
}

.reaction-container {
    background: transparent;
    box-shadow: none;
    border-radius:0;
    color:#fff;
    transform: translateX(100%);
    top: 2rem;
}

.reaction .reaction-container {
    /* top: 2rem; */
    transform: translateX(-50%);
    }


span.reaction-timer {
    height: 2px;
}

.why_ask-close {
    box-shadow: none;
    top: -5rem;
    right: 0;
    transform: translate(-50%, 0%);
    height: 3em;
    width: 3rem;
    padding: .5em;
    left: 50%;
}

.why_ask-copy > h4 b {
    font-weight: inherit;
}

.why_ask-copy {
    position: relative;
}

span.close-icon {font-size: 1.2rem;}

span.close-icon:before, span.close-icon:after {
    font-size: 1em;
}


/*--- Absolute positioned nav buttons -----*/


  button.selector-nav.previous{
    left: 1rem;
    margin-right: 0;
  }

  button.selector-nav.next {
    right: 1rem;
    margin-left: 0;
  }

  .nav_icon-holder{
    padding: 0.9rem;
  }

  button.selector-nav{
    position: absolute;
    z-index: 2;
    top: 0rem;
    height: 3rem;
    width: 3rem;
  }



/*---- Current TempurSearch ----*/
div#Question-CurrentTempurSearch .option-icon {
    display: none;
}

div#Question-CurrentTempurSearch ul.options-list li p{
 margin:1em auto;   
}

div#Question-CurrentTempurSearch .options-list li label{
   flex-direction:row;
}



/*---- Feel ----*/

div#Question-CurrentMattressFeelNotMemoryFoam .options-list li,
div#Question-CurrentMattressFeelAdjustableAir .options-list li,
div#Question-CurrentMattressFeelMemoryFoam .options-list li,
div#Question-CurrentTempurMattressFeatures  .options-list li{
    width: 20%;
}

div#Question-CurrentTempurMattressFeatures  .options-list li{
    padding:.75em;
}

/*---- Search ----*/
p.options-brow {
    color: #fff;
    margin-top: 1rem;
}

.options-search {
    padding: 1rem 1rem;
    position: relative;
}

input#myInput {}

input#mattressSearch {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIyMSIgdmlld0JveD0iMCAwIDIxIDIxIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzUwIC0xNTQpIj48cmVjdCB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM1MCAxNTQpIiBmaWxsPSJub25lIi8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS41OTIgLTQ1LjQwOCkiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM1MS40MDggMjAyLjQwOCkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwNjQ4MSIgc3Ryb2tlLXdpZHRoPSIyIj48Y2lyY2xlIGN4PSI2LjUiIGN5PSI2LjUiIHI9IjYuNSIgc3Ryb2tlPSJub25lIi8+PGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI1LjUiIGZpbGw9Im5vbmUiLz48L2c+PGxpbmUgeDI9IjMuNDA4IiB5Mj0iMy40MDgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM2MS45MDggMjEyLjkwOCkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwNjQ4MSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz48L2c+PC9nPjwvc3ZnPg=='); /* Add a search icon to input */
    background-position: 1em .9em; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%; /* Full-width */
    font-size: 1rem; /* Increase font-size */
    padding: 1em 2em 1em 3em; /* Add some padding */
    border: none;
    margin-bottom: 0; /* Add some space below the input */
    -webkit-appearance:none;
    border-radius: 2rem;
}

#clearSearch span.close-icon:before, 
#clearSearch span.close-icon:after {background-color: #fff;box-shadow: none;font-size: .75em;}

button#clearSearch {
    background-color: #034355;
    -webkit-appearance: none;
    border: none;
    border-radius: 1rem;
    position: absolute;
    top: 1.75rem;
    right: 1.75rem;
    min-height: 1.5rem;
    min-width: 1.5rem;
    display:none;
    cursor:pointer;
}

input#mattressSearch:not(:placeholder-shown){
    /* background-image:none; */
}

input#mattressSearch:focus + button#clearSearch,
input#mattressSearch:not(:placeholder-shown) +  button#clearSearch {
    display:block;
}




/*==================== Show off Final screen concept =========== */ 

label[for="infoShow"] {
    text-align: center;
    color: white;
    font-size: 16px;
    display:block;
    max-width: 800px;
    margin: 0 auto;
}

label[for="infoShow"] > span{
    vertical-align:middle;
    display:inline-block;
    padding: 0 1rem;
    text-decoration: underline;
    font-weight: bold;
    font-size: 1rem;
}


label[for="infoShow"]:before,
label[for="infoShow"]:after {
    content:'';
    display:inline-block;
    height:1px;
    width: calc(50% - 8rem);
    background-color:white;
    vertical-align:middle;
    opacity: .8;
}




div#recommendation-info {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .5s 0s ease;
}

label[for="infoShow"] span.info-opened,
#infoShow:checked + .recommendation-container > label[for="infoShow"] span.info-closed{
    display:none;
}



#infoShow:checked + .recommendation-container > label[for="infoShow"] span.info-opened{
    display:inline-block;
}


#infoShow:checked + .recommendation-container > #recommendation-info{
    max-height:2000px;
}

.recommendation-container {
    width: auto;
    max-width: none;
    padding-bottom: 6rem;
}

section#Mattress-Selector.match-active #final-match{
    width: auto;
    margin-top: -1rem;
    max-width: none;
}


section#Mattress-Selector.match-active button.selector-nav.previous {
    top: 2.5rem;
    left: -3rem;
}

.searchable.searching .options-brow .brow-text {
    display: none;
}
.searchable.popular:not(.searching) .options-list li:not(.popular) {
    display: none;
}


.searchable .options {
    overflow: hidden;
    position: relative;
}

.searchable.showShadow .options {
    height: 12rem;
    }

.searchable .options > span {
    height: 100%;
    position:relative;
    width:100%;
    display: block;
    overflow-x: scroll;
}


.searchable .options > span ul{
    justify-content:flex-start;
}


.searchable.showShadow .options:after{
    content:'';
    display:block;
    position:absolute;
    width:calc(100% - 2rem);
    bottom:-1px;
    height:1px;
    left:1rem;
    box-shadow:0 0 16px 10px rgba(0,0,0,0.4);
    z-index:2;
}


/*========= Continue Button ===========*/
button.selector-nav.continue-button {
    background: white;
    width: 100%;
    position: relative;
    border-radius: 4px;
    color: #034355;
    text-transform: uppercase;
    font-size: .875rem;
    margin: 0 auto;
    right: auto;
    border: #fff solid 2px;
    padding: 1rem 2rem;
    min-width: 300px;
    max-width: 320px;
    line-height: 0;
    /* font-weight: bold; */
    letter-spacing: 1.2px;
}

button.selector-nav.continue-button.inactive{
    background:#315F72;
    border-color:#315F72;
      color:#ffffffd2

}

button.selector-nav.continue-button:hover,
button.selector-nav.continue-button:focus{
    background:white;
}

/*==== Show all button =====*/

.searchable.showAll button.showAllToggle .showAll_text-all{
display:none;
}

button.showAllToggle > span{
    text-decoration:underline;
}

.searchable.showAll.showShadow .options:after{
    display:none;
}

.searchable .options-space-container{
    height:auto;
}

.searchable.showAll button.showAllToggle .showAll_text-less{
display:inline-block;
}

.searchable.showAll .options{
    height:auto;
    overflow:auto;
}

.searchable.showAll .options > span{    
    overflow:auto;
}

.searchable:not(.showShadow) button.showAllToggle {
display:none;
}

button.showAllToggle {-webkit-appearance: none;border: 0;padding: .5em 2em;font-size: .875em;border-radius: 5px;line-height: 0;background: transparent;color: #fff;font-size:1rem;margin-top: 1rem;}

button.showAllToggle:after{
    content:'';
    height:.5em;
    width:.5em;
    border-top:white 2px solid;
    border-right:white 2px solid;
    display:inline-block;
    border-radius:2px;
    transform:rotate(135deg) translateY(50%);
    top:0em;
    position:relative;
    margin-left:.5em;
}

.searchable.showAll button.showAllToggle:after{
   transform: rotate(-45deg) translateY(25%);
}

.showAll_text-less{
    display:none;
}