/* Keypad CSS v1.1 */
html .keypad-selector-wrapper{
    width:100vw;  
    max-width: calc(100vw - 8px) !important;
    margin-left: calc(50% - 50vw) !important;  
}

/* Slide 1 */
#keypad-slide-1{
    width:100%;
    max-width:100%;
    background: linear-gradient(
        to bottom,
        #E7F6FC 0%,
        #FFFFFF 100%
    ); 
}

#keypad-slide-1 .slide-content{
    padding-top:180px;
    padding-bottom: 180px;
    width:830px;
    max-width:90vw;
}

.keypad-selector-wrapper .slide-content{
    width: 1250px;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;  
    padding-top:80px;
    padding-bottom: 80px;  
}

.keypad-selector-wrapper .slide-input-wrapper {
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    width: 668px;
    display: flex;
    gap: 22px;
    position:relative;
    max-width: 90vw;
}

@media screen and (max-width:530px) {
    #keypad-slide-1 .slide-input-wrapper {
        flex-direction: column;
    }
}

.keypad-selector-wrapper button.keypad-btn.btn-next{
    all: unset;
    background-color: #FFCD03;
    border: 2px solid #FFCD03;
    color: #003E6B;
    text-align: center;
    padding: 18px 34px;
    font-family: Source Sans Pro;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    text-transform: uppercase;
    cursor:pointer;
}

.keypad-selector-wrapper button.keypad-btn.btn-next:hover{
    background-color: white;
}

.keypad-selector-wrapper input#email-input {
    flex: 1;
    border: 1px solid #3333334D;
    padding-left: 30px;
    font-family: Source Sans Pro;
    font-weight: 400;
    font-size: 20px;
    line-height: 64px;
}

.keypad-selector-wrapper input#email-input::placeholder {
    color: #000000;
}

/* Slide 2 */
div#keypad-slide-2 {
    position: relative;
}

div#keypad-slide-2:before {
    position: absolute;
    height: 350px;
    width: 100%;
    content: '';
    background: linear-gradient(180deg, #E7F6FC 0%, #FFFFFF 350px);
    z-index: -1;
}

/* breadcrumbs */
.keypad-breadcrumbs {
    display: flex;
    align-items: center;
    gap:10px;
    flex-wrap: wrap;
}

span.breadcrumb-item {
    display: block;
    padding: 2px 10px;
    font-family: Source Sans Pro;
    font-weight: 700;
    font-size: 16px;
    line-height: 36px;
    color:#003E6B;
}

span.breadcrumb-item.active {
    color:white;
    background-color:#003E6B;
}

span.breadcrumb-arrow {
    width: 24px;
    height: 24px;
    font-size: 0px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.29289 7.29289C9.68342 6.90237 10.3166 6.90237 10.7071 7.29289L14.7071 11.2929C15.0976 11.6834 15.0976 12.3166 14.7071 12.7071L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929L12.5858 12L9.29289 8.70711C8.90237 8.31658 8.90237 7.68342 9.29289 7.29289Z' fill='%23003E6B'/%3E%3C/svg%3E");
    background-position: center;
}

/* Keypad sizes grid */
.keypad-sizes-grid {
    display: grid;
    column-gap: 31.25px;
    row-gap: 25px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media screen and (max-width:1100px) {
.keypad-sizes-grid {
    display: grid;
    column-gap: 31.25px;
    row-gap: 25px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

@media screen and (max-width:865px) {
.keypad-sizes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.keypad-size-option img {
    height: 110px;
    width: auto !important;
}
}

@media screen and (max-width:540px) {
.keypad-sizes-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
}

.keypad-size-option {
    box-shadow: 0px 0px 13px 4px #0000000F;
    background-color: white;
    padding: 3px;
    text-align: center;
}

.keypad-size-inner {
    padding-left: 20px;
    padding-right: 20px;
}

.keypad-size-option img {
    width: 100%;
}

.size-title {
    font-family: Assistant;
    font-weight: 400;
    font-size: 32px;
    line-height: 32px;
    text-align: center;
}

button.size-select-btn {
    all: unset;
    color: #003E6B;
    font-family: Source Sans Pro;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    text-transform: uppercase;
    padding: 18px 34px;
    border: 2px solid #003E6B;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor:pointer;
}

.keypad-size-option:hover, .keypad-size-option:hover .size-select-btn,
.keypad-size-option.selected, .keypad-size-option.selected .size-select-btn {
    border-color: #FFCD03;
}

.slide-navigation {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 80px;
}

button.keypad-btn.btn-back {
    all: unset;
    color: #003E6B;
    font-family: Source Sans Pro;
    font-weight: 400;
    line-height: 28px;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    cursor:pointer;
}

button.keypad-btn.btn-back:hover {
    color:#FFCD03;
}

button.keypad-btn.btn-back:before {
    display: inline-block;
    content: '';
    height: 10px;
    width: 12px;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(0px, -2px);
    margin-right: 10px;
}

button.keypad-btn.btn-back:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.70711 0.292893C6.09763 0.683417 6.09763 1.31658 5.70711 1.70711L3.41421 4H11C11.5523 4 12 4.44772 12 5C12 5.55228 11.5523 6 11 6H3.41421L5.70711 8.29289C6.09763 8.68342 6.09763 9.31658 5.70711 9.70711C5.31658 10.0976 4.68342 10.0976 4.29289 9.70711L0.292893 5.70711C-0.0976311 5.31658 -0.0976311 4.68342 0.292893 4.29289L4.29289 0.292893C4.68342 -0.0976311 5.31658 -0.0976311 5.70711 0.292893Z' fill='%23003E6B'/%3E%3C/svg%3E");
}

button.keypad-btn.btn-back:hover:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.70711 0.292893C6.09763 0.683417 6.09763 1.31658 5.70711 1.70711L3.41421 4H11C11.5523 4 12 4.44772 12 5C12 5.55228 11.5523 6 11 6H3.41421L5.70711 8.29289C6.09763 8.68342 6.09763 9.31658 5.70711 9.70711C5.31658 10.0976 4.68342 10.0976 4.29289 9.70711L0.292893 5.70711C-0.0976311 5.31658 -0.0976311 4.68342 0.292893 4.29289L4.29289 0.292893C4.68342 -0.0976311 5.31658 -0.0976311 5.70711 0.292893Z' fill='%23FFCD03'/%3E%3C/svg%3E");
}

.slide-navigation span.error-message {
    position: absolute;
    bottom: 12%;
    color: red;
    left: auto;
    right: 0%;
    transform: translate(-44%, -24px);
}

/* Customize buttons - main */
div#customize-buttons-container,
div#customize-buttons-container-2 {
    height: 400px;
    background-repeat: no-repeat;
    text-align: center;
    background-position: center;
    background-size: contain;
    margin-top: 60px;
    position: relative;
    width: 671px;
    margin-left: auto;
    margin-right: auto;
}


.kp-button {
    width: 114px;
    height: 114px;
    position: absolute;
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kp-button img {
    max-width: 88%;
    max-height: 88%;
}

.kp-button svg {
    display: block;
    max-width: 88%;
    max-height: 88%;
    filter: invert(1);
}

/* Reduce opacity on elements that were originally white (now black after invert) */
.kp-button svg .was-white {
    fill: rgba(255, 255, 255, 0.88) !important;
}

.button-tip-line:after {
    display: block;
    content: '';
    position: absolute;
    right: -3px;
    height: 5px;
    width: 5px;
    background-color: #E7F6FC;
    border-radius: 5px;
    top: -2px;
}

.b-1x4 {
    top: 40%;
    width:15%;
    height:26%;
}

.b-1x4.kp-button-1 {
    left: 10%;
}

.b-1x4.kp-button-2 {
    left: calc(31.5%);
}

.b-1x4.kp-button.kp-button-3 {
    right: 31.5%;
}

.b-1x4.kp-button.kp-button-4 {
    right: 10%;
}

div#keyboard-button-popup {
    background-color: #3333334D;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    left: calc(50% - 50vw);
    padding: 80px;
    z-index:1;
}

.popup-content {
    background-color: white;
    width: calc(100% - 160px);
    height: calc(100% - 160px);
    position: relative;
    overflow-x: clip;
    overflow-y: auto;
}

span.close-popup {
    position: absolute;
    right: 30px;
    top: 20px;
    font-size: 0px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M17.4141 15.9996L25.7071 7.70664C25.8 7.61379 25.8736 7.50357 25.9238 7.38225C25.9741 7.26094 26 7.13092 26 6.99961C26 6.8683 25.9741 6.73828 25.9238 6.61697C25.8736 6.49566 25.7999 6.38543 25.7071 6.29259C25.6142 6.19974 25.504 6.12609 25.3827 6.07584C25.2614 6.0256 25.1313 5.99974 25 5.99974C24.8687 5.99974 24.7387 6.02561 24.6174 6.07586C24.4961 6.12611 24.3859 6.19976 24.293 6.29262L16 14.5856L7.70702 6.29262C7.61436 6.1989 7.50409 6.12443 7.38255 6.07348C7.26101 6.02252 7.1306 5.9961 6.99881 5.99573C6.86702 5.99536 6.73646 6.02104 6.61464 6.0713C6.49281 6.12157 6.38212 6.19542 6.28894 6.28861C6.19575 6.3818 6.12191 6.49249 6.07165 6.61432C6.0214 6.73615 5.99572 6.86671 5.9961 6.99849C5.99648 7.13028 6.0229 7.26069 6.07386 7.38223C6.12482 7.50377 6.1993 7.61403 6.29302 7.70668L14.586 15.9997L6.29302 24.2927C6.20017 24.3855 6.12652 24.4958 6.07627 24.6171C6.02602 24.7384 6.00015 24.8684 6.00015 24.9997C6.00015 25.131 6.02601 25.261 6.07626 25.3824C6.12651 25.5037 6.20016 25.6139 6.29301 25.7067C6.38586 25.7996 6.49609 25.8733 6.6174 25.9235C6.73871 25.9737 6.86873 25.9996 7.00004 25.9996C7.13135 25.9996 7.26137 25.9738 7.38269 25.9235C7.504 25.8733 7.61423 25.7996 7.70708 25.7068L16.0001 17.4138L24.2931 25.7068C24.4806 25.8943 24.7349 25.9996 25.0001 25.9996C25.2653 25.9996 25.5196 25.8943 25.7071 25.7067C25.8947 25.5192 26 25.2649 26 24.9997C26 24.7345 25.8947 24.4802 25.7071 24.2927L17.4141 15.9996Z' fill='%23003E6B'/%3E%3C/svg%3E");
    width: 30px;
    height: 30px;
}

.popup-filters {
    margin-top: 42px;
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width:950px) {
.popup-filters {
    flex-direction: column;
    gap: 30px;
}}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-group label {
    font-family: Source Sans Pro;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
}

.popup-filters > div {
    flex: 0 0 40%;
}

.filter-group input, .filter-group select {
    border: 1px solid #3333334D;
    height: 56px;
    padding-left: 21px;
    padding-right: 21px;
    color: #3333334D;
    font-family: Source Sans Pro;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
}

.filter-group select{
    appearance: none;
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.29289 9.29289C7.68342 8.90237 8.31658 8.90237 8.70711 9.29289L12 12.5858L15.2929 9.29289C15.6834 8.90237 16.3166 8.90237 16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L12.7071 14.7071C12.5196 14.8946 12.2652 15 12 15C11.7348 15 11.4804 14.8946 11.2929 14.7071L7.29289 10.7071C6.90237 10.3166 6.90237 9.68342 7.29289 9.29289Z' fill='%23333333' fill-opacity='0.3'/%3E%3C/svg%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px top 15px;
}

.icon-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 17px;
    row-gap: 30px;
    width: calc(100% - 34px);
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width:1200px) {
.icon-options-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}}

@media screen and (max-width:1041px) {
.icon-options-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}}

@media screen and (max-width:875px) {
.icon-options-grid {
    grid-template-columns: 1fr 1fr 1fr;
}}

@media screen and (max-width:852px) {
.icon-options-grid {
    grid-template-columns: 1fr 1fr;
}}

.icon-option {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor:pointer;
}

.popup-header {
    background-color: #E7F6FC;
    padding: 30px;
}

.all-options-header {
    padding: 30px 30px 30px 30px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}

@media screen and (max-width:750px) {
.all-options-header {
    flex-direction: column;
    align-items: flex-start;
}}

h3.all-options-title {
    font-family: Assistant;
    font-weight: 400;
    font-size: 32px;
    line-height: 32px;
    text-transform: uppercase;
    color: #003E6B;
}

button#upload-your-image-btn {
    all: unset;
    font-family: Source Sans Pro;
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    color: #003E6B;
    position: relative;
    cursor: pointer;
    border: #003E6B 1px solid;
    padding: 12px 30px;
    height: 28px !important;
}

.icon-option img {
    border: 2px solid #333333;
    border-radius: 12px;
    height: 110px;
    width: 110px;
    padding: 10px;
}

.icon-outer {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #333333;
    border-radius: 12px;
    height: 110px;
    width: 110px;
    padding: 10px;
    box-sizing: border-box;
}

.icon-outer svg {
    width: 90px !important;
    height: 90px !important;
}

/* Button lights */

.button-lights {
    height: 10px;
    position: absolute;
    top: -28px;
    left: 6%;
    display: flex;
    width: 124%;
    gap: 15%;
}

.button-light {
    width: 14%;
    height: 161%;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.9);
}

.button-light.active-light {
    background-color: lightgrey;
    border-radius: 3px;
}

.b-1x4.kp-button.kp-button-3 .button-lights {
    left: 4%;
}

.b-1x4.kp-button.kp-button-4 .button-lights {
    left: 4%;
}

@media screen and (max-width:550px) {
div#keyboard-button-popup {
    padding: 30px;
}
.popup-content {
    width: 87vw;
    margin-left: auto;
    margin-right: auto;
    height: 90vh;
}
}

@media screen and (max-width:742px) {
    .button-lights {
    top: -31%;
}
.b-1x4 {
    top: 42%;
    height: 21%;
}
}

@media screen and (max-width:582px) {
    .button-lights {
    top: -35%;
}
.b-1x4 {
    top: 43%;
    height: 18%;
}
}

@media screen and (max-width:495px) {
    .b-1x4 {
    top: 46%;
    width: 15%;
    height: 12%;
}
    div#customize-buttons-container,
    div#customize-buttons-container-2 {
    max-width: 300px !important;
}
.button-light {
    height: 126%;
}
.b1x4 .button-tip.show-button-tip {
    bottom: -57%;
}
}

.button-tip.show-button-tip{
    position: absolute;
    top: 29%;
    left: -124%;
}

.button-tip-text, .light-tip {
    border-width: 2px;
    border-style: solid;
    border: 2px solid #CCDEE5;
    font-family: Source Sans Pro;
    font-weight: 700;
    font-size: 16px;
    line-height: 36px;
    background-color: #E7F6FC;
    color: #003E6B;
    width: 90px;
    z-index: 1;
    position: absolute;
}

.light-tip{
    position: absolute;
    left: -188px;
    top: -12px;
}

.button-tip-line {
    width: 125px;
    height: 0px;
    opacity: 1;
    top: 18px;
    border-style: dashed;
    position: absolute;
    left: 44px;
    border: 1px #E7F6FC dashed;
}

.light-tip-line {
    width: 113px;
    height: 0px;
    opacity: 1;
    top: 17px;
    border-style: dashed;
    position: absolute;
    left: 81px;
    border: 1px #E7F6FC dashed;
}

@media screen and (max-width:820px) {
    .button-tip.show-button-tip {
        top: auto;
        bottom: 0%;
        left: 50%;
        transform: translate(-48px, 4px);
    }
    .button-tip-line {
        width: 0px;
        height: 67px;
        top: -58px;
        left: 44px;
    }
}

@media screen and (max-width:495px) {
    .button-tip.show-button-tip {        
        bottom: 57%;        
    }
}
/*NB*/
/*div#keypad-slide-3 .button-lights {
    display: none;
}*/


/* Keypad 2 */
.b-2x2 {
    top: 40%;
    width: 15%;
    height: 26%;
}
.b-2x2.kp-button.kp-button-1 {
    left: 31%;
    top: 20%;
}
.b-2x2.kp-button.kp-button-2 {
    right: 31%;
    top: 20%;
}

.b-2x2.kp-button.kp-button-3 {
    left: 31%;
    bottom: 14%;
    top: auto;
}

.b-2x2.kp-button.kp-button-4 {
    right: 31%;
    bottom: 14%;
    top: auto;
}

.b-2x2 .button-lights {
    height: 11px;
    position: absolute;
    top: -33px;
    left: 3%;
    display: flex;
    width: 131%;
    gap: 16%;
}

@media screen and (max-width:495px) {
    .b-2x2 {
        top: 40%;
        width: 25%;
        height: 20%;
    }
    .b-2x2.kp-button.kp-button-1 {
        left: 18%;
        top: 27%;
    }
    .b-2x2.kp-button.kp-button-2 {
        right: 18%;
        top: 27%;
    }
    .b-2x2.kp-button.kp-button-3 {
        left: 18%;
        bottom: 22%;
    }
    .b-2x2.kp-button.kp-button-4 {
        right: 19%;
        bottom: 22%;
    }
    .b-2x2 .button-lights {
        top: -25px;
        left: 3px;
        gap: 15%;
    }
    .b-2x2.kp-button.kp-button-3,
    .b-2x2.kp-button.kp-button-4 {
    bottom: 22%;
}
    .b-2x2 .button-tip.show-button-tip {
        bottom: -18%;
    }
}

/* Keypad 3 */

.b-2x3 {
    top: 19%;
    width: 15%;
    height: 26%;
}

.b-2x3.kp-button.kp-button-1 {
    left: 19%;
}

.b-2x3.kp-button.kp-button-2 {
    left: 42%;
}

.b-2x3.kp-button.kp-button-3 {
    right: 20%;
}

.b-2x3.kp-button.kp-button-4 {
    top: auto;
    left: 19%;
    bottom: 14%;
}

.b-2x3.kp-button.kp-button-5 {
    top: auto;
    left: 42%;
    bottom: 14%;
}

.b-2x3.kp-button.kp-button-6 {
    top: auto;
    right: 20%;
    bottom: 14%;
}

.b-2x3 .button-lights {
    top: -31px;
    height: 11px;
    width: 131%;
}

.b-2x3.kp-button.kp-button-4 .button-lights, 
.b-2x3.kp-button.kp-button-5 .button-lights, 
.b-2x3.kp-button.kp-button-6 .button-lights {
    top: -34px;
}

@media screen and (max-width:495px) {
    .b-2x3 {
        top: 33%;
        width: 19%;
        height: 14%;
    }
    .b-2x3.kp-button.kp-button-1 {
        left: 13%;
    }
    .b-2x3.kp-button.kp-button-2 {
        left: 40%;
    }
    .b-2x3.kp-button.kp-button-3 {
        right: 13%;
    }
    .b-2x3 .button-lights {
        top: -17px;
        height: 11px;
        width: 131%;
        left: 3%;
        gap: 14%;
    }
    .b-2x3.kp-button.kp-button-4 {
        left: 13%;
        bottom: 30%;
    }
    .b-2x3.kp-button.kp-button-5 {
        left: 41%;
        bottom: 30%;
    }
    .b-2x3.kp-button.kp-button-6 {
        right: 13%;
        bottom: 30%;
    }
    .b-2x3.kp-button.kp-button-4 .button-lights, 
    .b-2x3.kp-button.kp-button-5 .button-lights, 
    .b-2x3.kp-button.kp-button-6 .button-lights {
        top: -24px;
    }
    .b-2x3 .button-tip.show-button-tip {
        bottom: -45%;
    }
}

/* Keypad 2x4 */

.b-2x4 {
    top: 21%;
    width: 15%;
    height: 26%;
}

.b-2x4.kp-button.kp-button-1 {
    left: 10%;
}

.b-2x4.kp-button.kp-button-2 {
    left: 31%;
}

.b-2x4.kp-button.kp-button-3 {
    left: 53%;
}

.b-2x4.kp-button.kp-button-4 {
    right: 10.5%;
}

.b-2x4.kp-button.kp-button-5 {
    top: auto;
    bottom: 15%;
    left: 10%;
}

.b-2x4.kp-button.kp-button-6 {
    top: auto;
    bottom: 15%;
    left: 31%;
}

.b-2x4.kp-button.kp-button-7 {
    top: auto;
    bottom: 15%;
    left: 53%;
}

.b-2x4.kp-button.kp-button-8 {
    right: 10.5%;
    top: auto;
    bottom: 15%;
}

@media screen and (max-width:495px) {
    .b-2x4 {
        top: 38%;
        width: 15%;
        height: 11%;
    }
    .b-2x4.kp-button.kp-button-5, 
    .b-2x4.kp-button.kp-button-6, 
    .b-2x4.kp-button.kp-button-7, 
    .b-2x4.kp-button.kp-button-8 {
        bottom: 34%;
    }
}

/* Keypad 2x6 */

.b-2x6 {
    top: 31%;
    width: 11%;
    height: 17%;
}

.b-2x6.kp-button.kp-button-1 {
    left: 6%;
}

.b-2x6.kp-button.kp-button-2 {
    left: 21%;
}

.b-2x6.kp-button.kp-button-3 {
    left: 37%;
}

.b-2x6.kp-button.kp-button-4 {
    left: 52%;
}

.b-2x6.kp-button.kp-button-5 {
    right: 22%;
}

.b-2x6.kp-button.kp-button-6 {
    right: 7%;
}

.b-2x6.kp-button.kp-button-7 {
    top: auto;
    bottom: 25%;
    left: 6%;
}

.b-2x6.kp-button.kp-button-8 {
    top: auto;
    bottom: 25%;
    left: 21%;
}

.b-2x6.kp-button.kp-button-9 {
    top: auto;
    bottom: 25%;
    left: 37%;
}

.b-2x6.kp-button.kp-button-10 {
    top: auto;
    bottom: 25%;
    left: 52%;
}

.b-2x6.kp-button.kp-button-11 {
    top: auto;
    bottom: 25%;
    right: 22%;
    left: auto;
}

.b-2x6.kp-button.kp-button-12 {
    top: auto;
    bottom: 25%;
    right: 7%;
    left: auto;
}

.b-2x6 .button-tip.show-button-tip {
    top: 21%;
    left: -179%;
}

.b-2x6 .button-lights {
    height: 8px;
    top: -24px;
    left: 10%;
    width: 125%;
    gap: 14%;
}

.b-2x6.kp-button.kp-button-3 .button-lights {
    height: 8px;
    left: 7%;
}

@media screen and (max-width:495px) {
    .b-2x6 {
        top: 41%;
        height: 9%;
    }
    .b-2x6.kp-button.kp-button-7, 
    .b-2x6.kp-button.kp-button-8, 
    .b-2x6.kp-button.kp-button-9, 
    .b-2x6.kp-button.kp-button-10, 
    .b-2x6.kp-button.kp-button-11, 
    .b-2x6.kp-button.kp-button-12 {
        bottom: 38%;
    }
    .b-2x6 .button-lights {
        height: 5px !important;
        top: -9px !important;
    }
    .b-2x6 .button-tip.show-button-tip {
        top: 195%;
        left: 55%;
    }
}

/* Keypad 2x8 */

.b-2x8 {
    left: 5%;
    top: 35%;
    height: 14%;
    width: 8%;
    background-color: rgba(255, 255, 255, 0.1);
}

.b-2x8.kp-button.kp-button-2 {
    left: 17%;
}

.b-2x8.kp-button.kp-button-3 {
    left: 28%;
}

.b-2x8.kp-button.kp-button-4 {
    left: 40%;
}

.b-2x8.kp-button.kp-button-5 {
    left: 52%;
}

.b-2x8.kp-button.kp-button-6 {
    left: 63%;
}

.b-2x8.kp-button.kp-button-7 {
    left: auto;
    right: 17%;
}

.b-2x8.kp-button.kp-button-8 {
    left: auto;
    right: 5%;
}

.b-2x8.kp-button.kp-button-9 {
    top: auto;
    bottom: 31%;
}

.b-2x8.kp-button.kp-button-10 {
    top: auto;
    left: 17%;
    bottom: 31%;
}

.b-2x8.kp-button.kp-button-11 {
    top: auto;
    left: 28%;
    bottom: 31%;
}

.b-2x8.kp-button.kp-button-12 {
    top: auto;
    left: 40%;
    bottom: 31%;
}

.b-2x8.kp-button.kp-button-13 {
    top: auto;
    left: 52%;
    bottom: 31%;
}

.b-2x8.kp-button.kp-button-14 {
    top: auto;
    left: 17%;
    bottom: 31%;
    left: auto;
    right: 29%;
}

.b-2x8.kp-button.kp-button-15 {
    left: auto;
    right: 17%;
    top: auto;
    bottom: 31%;
}

.b-2x8.kp-button.kp-button-16 {
    left: auto;
    right: 5%;
    top: auto;
    bottom: 31%;
}

.b-2x8 .button-lights {
    height: 6px;
    top: -16px;
    left: 6%;
    width: 130%;
    gap: 14%;
}

.b-2x8.kp-button.kp-button-9, 
.b-2x8.kp-button.kp-button-10, 
.b-2x8.kp-button.kp-button-11, 
.b-2x8.kp-button.kp-button-12, 
.b-2x8.kp-button.kp-button-13, 
.b-2x8.kp-button.kp-button-14, 
.b-2x8.kp-button.kp-button-15, 
.b-2x8.kp-button.kp-button-16 {
    bottom: 30.5%;
}

.b-2x8 .button-tip.show-button-tip {
    left: -269%;
    top: 17%;
}

@media screen and (max-width:934px) {
    .b-2x8 .button-tip.show-button-tip {
        top: auto;
        bottom: 0%;
        left: 50%;
        transform: translate(-48px, 4px);
    }
    .b-2x8 .button-tip-line {
        width: 0px;
        height: 64px;
        top: -36px;
        left: 45px;
    }
}

@media screen and (max-width:495px) {
    .b-2x8 {
        left: 5%;
        top: 43%;
        height: 6%;
        width: 8%;
    }

    .b-2x8.kp-button.kp-button-9, 
    .b-2x8.kp-button.kp-button-10, 
    .b-2x8.kp-button.kp-button-11, 
    .b-2x8.kp-button.kp-button-12, 
    .b-2x8.kp-button.kp-button-13, 
    .b-2x8.kp-button.kp-button-14, 
    .b-2x8.kp-button.kp-button-15, 
    .b-2x8.kp-button.kp-button-16 {
        bottom: 41.5%;
    }

    .b-2x8 .button-lights {
        height: 4px;
        top: -7px;
        left: 6%;
        width: 130%;
        gap: 14%;
    }
}

/* Keypad 2x8 */

.b-4x3 {
    left: 33%;
    top: 11%;
    height: 14%;
    width: 8%;
    background-color: rgba(255, 255, 255, 0.1);
}

.b-4x3.kp-button.kp-button-2 {
    left: 46%;
}

.b-4x3.kp-button.kp-button-3 {
    left: auto;
    right: 33%;
}

.b-4x3.kp-button.kp-button-4 {
    top: 34%;
}

.b-4x3.kp-button.kp-button-5 {
    left: 46%;
    top: 34%;
}

.b-4x3.kp-button.kp-button-6 {
    left: auto;
    right: 33%;
    top: 34%;
}

.b-4x3.kp-button.kp-button-7 {
    top: 56%;
}

.b-4x3.kp-button.kp-button-8 {
    left: 46%;
    top: 56%;
}

.b-4x3.kp-button.kp-button-9 {
    left: auto;
    right: 33%;
    top: 56%;
}

.b-4x3.kp-button.kp-button-10 {
    top: auto;
    bottom: 7%;
}

.b-4x3.kp-button.kp-button-11 {
    top: auto;
    bottom: 7%;
    left: 46%;
}

.b-4x3.kp-button.kp-button-12 {
    bottom: 7%;
    right: 33%;
    left: auto;
    top: auto;
}

.b-4x3 .button-lights {
    height: 7px;
    top: -21px;
    left: 4%;
    width: 133%;
    gap: 16%;
}

.b-4x3 .button-tip.show-button-tip {
    position: absolute;
    top: 16%;
}

@media screen and (max-width:495px) {
    .b-4x3 {
        left: 12%;
        top: 13%;
        height: 14%;
        width: 20%;
    }
    .b-4x3.kp-button.kp-button-2 {
        left: 40%;
    }
    .b-4x3.kp-button.kp-button-3 {
        right: 13%;
    }
    .b-4x3.kp-button.kp-button-5 {
        left: 41%;
    }
    .b-4x3.kp-button.kp-button-6 {
        right: 13%;
        top: 34%;
    }
    .b-4x3.kp-button.kp-button-8 {
        left: 40%;
        top: 56%;
    }
    .b-4x3.kp-button.kp-button-9 {
        right: 13%;
        top: 56%;
    }
    .b-4x3.kp-button.kp-button-10 {
        bottom: 9%;
    }
    .b-4x3.kp-button.kp-button-11 {
        bottom: 9%;
        left: 41%;
    }
    .b-4x3.kp-button.kp-button-12 {
        bottom: 9%;
        right: 12%;
    }
    .b-4x3 .button-lights {
        top: -37%;
        height: 8px;
        gap: 12%;
    }
    .b-4x3 .button-tip.show-button-tip {
        bottom: -42%;
    }
}

@media screen and (max-width: 495px) {
    .b-1x4 .button-tip.show-button-tip {
        bottom: -49%;
    }
}

.power-light {
    position: absolute;
    height: 20px;
    width: 21px;
    top: 32.5%;
    left: 5.5%;
    background-color: #90C53D;
}

.customize-buttons-interface-2:has(.b-2x2) .power-light {
    height: 20px;
    width: 21px;
    top: 51.5%;
    left: 25.5%;
}

.customize-buttons-interface-2:has(.b-2x3) .power-light {
    height: 20px;
    width: 21px;
    top: 51%;
    left: 14%;
}

.customize-buttons-interface-2:has(.b-2x4) .power-light {
    height: 20px;
    width: 21px;
    top: 51.2%;
    left: 5%;
}

.customize-buttons-interface-2:has(.b-2x6) .power-light {
    height: 15px;
    width: 17px;
    top: 51.5%;
    left: 3%;
}

.customize-buttons-interface-2:has(.b-2x8) .power-light {
    height: 11px;
    width: 11px;
    top: 51.2%;
    left: 2.5%;
}

.customize-buttons-interface-2:has(.b-4x3) .power-light {
    height: 11px;
    width: 11px;
    top: 51%;
    left: 29.9%;
}

@media screen and (max-width:495px) {
    .power-light {        
        height: 10px;
        width: 8px;
    }
    .customize-buttons-interface-2:has(.b-1x4) .power-light {
        top: 42%;
        left: 5.5%;
    }
      
    .customize-buttons-interface:has(.b-2x2) .power-light {
        height: 20px;
        width: 21px;
        top: 51.5%;
        left: 25.5%;
    }
    .customize-buttons-interface-2:has(.b-2x3) .power-light {
        height: 13px;
        width: 13px;
        top: 50.5%;
        left: 6.5%;
    }
    .b-2x4 .button-tip.show-button-tip {
        bottom: -63%;
    }
    .customize-buttons-interface-2:has(.b-2x4) .power-light {
        height: 10px;
        width: 9px;
        top: 50.5%;
        left: 5%;
    }
    .customize-buttons-interface-2:has(.b-2x6) .power-light {
        height: 6px;
        width: 7px;
        top: 50.5%;
        left: 3%;
    }
    .b-2x8 .button-tip.show-button-tip {
        top: auto;
        bottom: -77%;
        left: 50%;
        transform: translate(-48px, 4px);
    }
    .customize-buttons-interface-2:has(.b-2x8) .power-light {
        height: 7px;
        width: 7px;
        top: 50.5%;
        left: 2.5%;
    }

    .customize-buttons-interface-2:has(.b-4x3) .power-light {
        height: 11px;
        width: 11px;
        top: 51%;
        left: 6.9%;
    }
}


div#keypad-slide-3 .power-light, div#keypad-slide-3 .light-tip.show-light-tip, div#keypad-slide-3 .button-light {
    display: none;
}

.light-tip.hide-tip {
    display: none !important;
}

@media screen and (max-width:963px) {
    .light-tip {
        left: -36px;
        top: 53px;
    }
    .light-tip-line {
        width: 0px;
        height: 53px;
        top: -47px;
        left: 42px;
    }
}

/* SLIDE 4 */
div#keypad-slide-4 .button-tip.show-button-tip {
    display: none;
}

div#keypad-slide-4 .kp-button {
    cursor: pointer !important;
}

/* Power Indicator LED */
#power-indicator-led {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#power-indicator-led p {
    font-family: Source Sans Pro;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #003E6B;
    margin: 0;
}

.power-indicator-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

span.power-toggle-label {
    font-family: Source Sans Pro;
    font-weight: 400;
    font-size: 20px;
    line-height: 46px;
    text-transform: uppercase;
    color: #003E6B;
    padding-left: 12px;
}

.power-toggle-switch {
    position: relative;
    width: 90px;
    height: 50px;
    background-color: lightgrey;
    border-radius: 40px;
    transition: background-color 0.3s;
}

.power-toggle-switch::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: transform 0.3s;
    left: auto;
    right: 6px;
    top: 9px;
    background-color: #90C53D;
}

.power-indicator-toggle.off .power-toggle-switch {
    background-color: #cccccc;
}

.power-indicator-toggle.off .power-toggle-label {
    color: #999999;
    right: 10px;
    position: absolute;
}

.power-indicator-toggle.off .power-toggle-switch::after {
    transform: translateX(-44px);
}

.power-indicator-toggle.off .power-toggle-label {
    color: #999999;
}

/* Hide all active lights when power is off */
/*#keypad-slide-4.lights-off .button-light.active-light {
    background-color: transparent !important;
}*/

/* Final Details Form */
.final-details-form {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    flex-wrap: wrap;
    flex-direction: column;
}

.final-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.final-inputs label {
    font-family: Source Sans Pro;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #003E6B;
}

/* Quantity Controls */
.quantity-controls {
    display: flex;
    align-items: center;
    border: 1px solid #3333334D;
    width: fit-content;
}

.quantity-btn {
    all: unset;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #003E6B;
    cursor: pointer;
    user-select: none;
    background-color: white;
}

.quantity-btn:hover {
    background-color: #f5f5f5;
}

.quantity-controls .max-value {
    all: unset;
    width: 74px;
    height: 42px;
    text-align: center;
    font-family: Source Sans Pro;
    font-weight: 400;
    font-size: 25px;
    line-height: 42px;
    color: #333333;
}

/* Protocol Select */
.protocol-select,
.prototypes-select {
    appearance: none;
    border: 1px solid #3333334D;
    padding: 8px 40px 8px 16px;
    color: #333333;
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.29289 9.29289C7.68342 8.90237 8.31658 8.90237 8.70711 9.29289L12 12.5858L15.2929 9.29289C15.6834 8.90237 16.3166 8.90237 16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L12.7071 14.7071C12.5196 14.8946 12.2652 15 12 15C11.7348 15 11.4804 14.8946 11.2929 14.7071L7.29289 10.7071C6.90237 10.3166 6.90237 9.68342 7.29289 9.29289Z' fill='%23333333' fill-opacity='0.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
    width: 199px;
    height: 42px;
    font-family: Source Sans Pro;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
}

/* Final Popup Form */
.final-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.final-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.final-popup-content {
    position: relative;
    background-color: white;
    padding: 40px;
    max-width: 440px;
    width: 90%;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
}

.final-popup-close {
    all: unset;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    color: #003E6B;
    cursor: pointer;
    line-height: 1;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.final-popup-close:hover {
    color: #000;
}

.final-popup-title {
    font-family: Source Sans Pro;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: #003E6B;
    margin: 0 0 30px 0;
    text-transform: uppercase;
}

.final-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.final-form input[type="text"],
.final-form input[type="email"],
.final-form input[type="tel"] {
    border: 1px solid #3333334D;
    padding: 12px 16px;
    font-family: Source Sans Pro;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
}

.final-form input[type="text"]::placeholder,
.final-form input[type="email"]::placeholder,
.final-form input[type="tel"]::placeholder {
    color: #999999;
}

.final-submit-btn {
    all: unset;
    background-color: #FFCD03;
    border: 2px solid #FFCD03;
    color: #003E6B;
    text-align: center;
    padding: 12px 20px;
    font-family: Source Sans Pro;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 10px;
}

.final-submit-btn:hover {
    background-color: white;
}

/* Final Success Popup */
.final-success-content {
    text-align: center;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.final-success-title {
    font-family: Source Sans Pro;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: #003E6B;
    margin: 0 0 40px 0;
    text-transform: uppercase;
}

.back-to-home-btn, .design-another-keypad {
    all: unset;
    background-color: #FFCD03;
    border: 2px solid #FFCD03;
    color: #003E6B;
    text-align: center;
    padding: 12px 30px;
    font-family: Source Sans Pro;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    cursor: pointer;
}

.design-another-keypad {
    display: none;
}

.design-another-keypad.visible {
    display: block;
}

.back-to-home-btn:hover, .design-another-keypad:hover {
    background-color: white;
}

#keypad-slide-4.lights-off .power-light {
    background-color: rgba(0, 0, 0, 0.9);
}

.keypad-slide.lights-off .button-light {
    cursor: auto;
}

#keypad-slide-4 .keypad-slide.lights-off .button-light {
    cursor: pointer;
}

.final-details-form > div {
    display: flex;
    flex-direction: row;
    gap:20px;
}

.final-details-form > div label {
    font-family: Source Sans Pro;
    font-weight: 400;
    font-size: 25px;
    line-height: 36px;
    color: #333333;
    width: 420px;
    max-width: 90vw;
}

.protocol-selector {
    gap: 12px;
}

@media screen and (max-width:450px) {
        .icon-options-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width:593px) {
    .final-details-form > div {
    display: flex;
    flex-direction: column;
}
}

.slide-text p {
    width: 800px;
    max-width: 90%;
}

span.icon-label {
    font-size: 16px;
}

.customize-buttons-interface, .customize-buttons-interface-2 {
    position: relative;
}

.zoom-container {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 58px;
    border-radius: 16px;
    overflow: hidden;
}

.zoom-container img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

@media screen and (min-width:495px) {
.zoom-container{
    display:none !important;
}
}

@media screen and (max-width:450px) {
.slide-navigation {
    flex-direction: column;
    gap: 20px;
}
}

@media screen and (min-width:400px) {
#power-indicator-led {
    flex-direction: column;
}
}

p.prototypes-note {
    font-family: Source Sans Pro;
    font-weight: 400;
    font-style: Italic;
    font-size: 16px;
    line-height: 100%;
    margin-top: 0px;
}

#keypad-slide-4 .button-light {
    cursor: pointer !important;
}

/* Keypad fixes */
.popup-content {
    margin-top: 112px;
}

.final-inputs.pax-selector button.quantity-btn {
    padding: 0px;
    background-color: white;
}

.final-inputs.pax-selector button.quantity-btn {
    border-width: 0px !important;
}

#final-popups h2.final-popup-title {
    font-family: Source Sans Pro;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: #003E6B;
    margin: 0 0 30px 0;
    text-transform: uppercase;
}

div#final-popups .final-popup-content {
    width: 520px;
	  max-width: 90vw;
}

div#final-popup-form button.final-submit-btn:hover {
    border-color: #FFCD03;
}

#final-popup-form button.final-submit-btn {
    all: unset;
    background-color: #FFCD03;
    border: 2px solid #FFCD03;
    color: #003E6B;
    text-align: center;
    padding: 12px 20px;
    font-family: Source Sans Pro;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 10px;
}

#final-popup-form button.final-submit-btn:hover {
    background-color: white;
}

#final-downloaded .final-popup-content.final-success-content h2.final-success-title {
    font-family: Source Sans Pro;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: #003E6B;
    margin: 0 0 40px 0;
    text-transform: uppercase;
}

#final-popups button.final-popup-close {
    all: unset;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    color: #003E6B;
    cursor: pointer;
    line-height: 1;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#final-popups .back-to-home-btn, #final-popups .design-another-keypad {
    all: unset;
    background-color: #FFCD03;
    border: 2px solid #FFCD03;
    color: #003E6B;
    text-align: center;
    padding: 12px 30px;
    font-family: Source Sans Pro;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    cursor: pointer;
}

#final-popups .back-to-home-btn:hover, #final-popups .design-another-keypad:hover {
    background-color: white;
}