:root {
    --zpe-dark-grey: #3b3f42;
    --zpe-grey: #7d868c;
    --zpe-light-blue: #26cad3;
    --zpe-light-blue_hover: #60dadf;
    --zpe-medium-blue: #008aab;
    --zpe-dark-blue: #214c64;
    --zpe-soft-blue: #c9e2ea;
}
a {
    text-decoration: none;
}

body,
section#prodSlct_body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    font-size: 16px;
    color: var(--zpe-grey);
}

/* TO DEL */
#app {
    /* max-width: 1080px; */
    background: #fff;
    margin: 0 auto;
    line-height: 1.3em;
}

::-webkit-scrollbar-thumb {
    background: #214c64;
    border-radius: 2px;
}

::-webkit-scrollbar-track {
    background: #358aaf;
}

::-webkit-scrollbar {
    width: 12px;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loadingSystem {
    display: flex !important;
    flex-direction: column;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    /* height: calc(100vh - 100px); */
    height: 100vh;
    background: var(--zpe-dark-blue);
    z-index: 2;
    justify-content: center;
    align-items: center;
}

.loadingList {
    display: flex !important;
    flex-direction: column;
    position: relative;
    /* left: 0;
  top: 0; */
    width: inherit;
    height: 100%;
    background: #f3f3f3;
    z-index: 1;
    justify-content: center;
    align-items: center;
}

.loadingList p {
    font-size: 18px;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: var(--zpe-dark-blue) var(--zpe-dark-blue) transparent transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
.loader::after,
.loader::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent var(--zpe-light-blue) var(--zpe-light-blue);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotationBack 0.5s linear infinite;
    transform-origin: center center;
}
.loader::before {
    width: 32px;
    height: 32px;
    border-color: var(--zpe-soft-blue) var(--zpe-soft-blue) transparent transparent;
    animation: rotation 1.5s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

.deactivate {
    display: none;
}

/* #prodSlct_header {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFF;
  background: var(--zpe-medium-blue);
}

#prodSlct_header h2 {
  font-weight: 600;
  font-size: 2em;
  color: #FFFF;
} */

#prodSlct_body {
    justify-content: flex-start;
    align-items: flex-start;
}

#mobileFilters_btn {
    display: none;
}

#prodSlct_body-column {
    width: 100%;
    min-width: 200px;
    max-width: 20%;
    flex-direction: column;
    color: var(--zpe-dark-blue);
    font-weight: 500;
    top: 0;
    position: sticky;
    box-sizing: border-box;
}

.blockOptions {
    width: 100%;
    height: 100%;
    background: #00000030;
    position: absolute;
    top: 0;
    left: 0;
    cursor: not-allowed;
}

#counterFilterIcon_div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
}

#closeMenu {
    display: none;
}

#filters {
    width: 100%;
    background: var(--zpe-dark-blue);
    height: 55px;
}

#clearFilter {
    padding: 3px 25px;
    margin: 10px 0;
    color: #ffff;
    text-align: center;
    /* border: 2px solid #FFF; */
    background: var(--zpe-medium-blue);
    border-radius: 6px;
    cursor: pointer;
}

#clearFilter:hover {
    background: var(--zpe-light-blue_hover);
}

/* #################################################################################  */
#features {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

#features::-webkit-scrollbar {
    width: 2px;
}

#features::-webkit-scrollbar-thumb {
    background: var(--zpe-dark-blue);
    border-radius: 2px;
}

#features::-webkit-scrollbar-track {
    background: var(--zpe-light-blue);
}

.feature {
    flex-direction: column;
    font-size: 14px;
    letter-spacing: .01em;
    transition: all 0.2s;
    border-bottom: 1px solid #ffff;
}

.feature:first-child {
    border-top: 1px #fff solid;
}

#features > div:nth-child(1) {
    padding-top: 0;
}

.feature:last-child {
    border-bottom: none;
}

.option-body:hover {
    box-shadow: 0 3px 4px -4px var(--zpe-dark-blue);
    transition: all 0.2s;
}

.feature_body {
    justify-content: space-between;
    width: 100%;
    background: var(--zpe-soft-blue);
    padding: 8px 12px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s;
    gap: 4px;
}

.feature-name {
    display: flex;
    gap: 4px;
    align-items: center;
}

.toolTipBox {
    display: none;
    background: var(--zpe-dark-grey);
    color: #fff;
    position: absolute;
    padding: 8px 12px;
    width: max-content;
    max-width: 200px;
    border-radius: 6px;
    border: 2px solid var(--zpe-medium-blue);
    line-height: 1.4em;
    font-weight: 200;
}

.showToolTip {
    display: block;
}

.closedFeature {
    background-color: var(--zpe-dark-blue);
    color: white;
    transition: all 0.2s;
}
.closedFeature .arrowSVG-rotate {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='10' viewBox='0 0 18 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.7027 1.98156L9.53271 9.74653C9.44735 9.8387 9.35489 9.90413 9.2553 9.94284C9.15572 9.98155 9.04902 10.0006 8.93521 9.99999C8.82141 9.99999 8.71471 9.98063 8.61513 9.94192C8.51554 9.90321 8.42307 9.83808 8.33772 9.74653L1.1464 1.98156C0.947239 1.76651 0.847656 1.49769 0.847656 1.17511C0.847656 0.852533 0.954352 0.576036 1.16774 0.345621C1.38114 0.115207 1.63009 -2.93221e-07 1.91462 -3.05716e-07C2.19914 -3.1821e-07 2.4481 0.115207 2.66149 0.345621L8.93521 7.11981L15.2089 0.345621C15.4081 0.130567 15.6536 0.0230402 15.9456 0.0230402C16.2375 0.0230402 16.4899 0.138247 16.7027 0.368662C16.9161 0.599076 17.0228 0.867893 17.0228 1.17511C17.0228 1.48233 16.9161 1.75115 16.7027 1.98156Z' fill='white'/%3E%3C/svg%3E%0A");
}

.arrowSVG-rotate {
    transform: rotate(180deg);
    transition: all 0.4s;
}

.feature_options {
    width: 100%;
    cursor: auto;
    padding: 8px 6px;
    box-sizing: border-box;
    visibility: visible;
    transition: all 0.5s ease-in-out;
    background: #ffff;
}

.feature_optionsHidden {
    transition: all 0.5s ease-in-out;
    visibility: hidden;
    padding-top: 0;
    padding-bottom: 0;
}

.feature_options > div {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.option {
    color: #fff;
    border-radius: 6px;
    padding: 3px 5px;
    background-color: var(--zpe-grey);
}

.option-body {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 4px;
    gap: 4px;
    cursor: pointer;
}

.option-check-body {
    height: auto;
    width: auto;
}

.option-check {
    width: 14px;
    height: 14px;
    border: 2px solid var(--zpe-dark-blue);
    border-radius: 4px;
}

.option-item {
    font-weight: 400;
}

.option-active > .option-check-body {
    background-color: var(--zpe-dark-blue);
    background-image: url("data:image/svg+xml,%3Csvg width='3' height='2' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.71715 6.38216L0.117152 3.76721C-0.0390508 3.61011 -0.0390508 3.35539 0.117152 3.19827L0.682825 2.62933C0.839028 2.47221 1.09231 2.47221 1.24851 2.62933L3 4.39087L6.75149 0.617826C6.90769 0.460725 7.16097 0.460725 7.31718 0.617826L7.88285 1.18677C8.03905 1.34387 8.03905 1.59859 7.88285 1.75571L3.28284 6.38218C3.12662 6.53928 2.87336 6.53928 2.71715 6.38216Z' fill='white'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 12px;
}

.option-check__active {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.07573 8.82324L0.175729 4.90081C-0.0585762 4.66516 -0.0585762 4.28308 0.175729 4.0474L1.02424 3.19399C1.25854 2.95832 1.63846 2.95832 1.87277 3.19399L4.5 5.8363L10.1272 0.176739C10.3615 -0.058913 10.7415 -0.058913 10.9758 0.176739L11.8243 1.03015C12.0586 1.2658 12.0586 1.64789 11.8243 1.88356L4.92426 8.82326C4.68994 9.05892 4.31004 9.05892 4.07573 8.82324Z' fill='white'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
}

#deviceList_body {
    width: 100%;
}

#deviceList_body-column {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

#deviceCount {
    font-size: 16px;
}

#deviceList_body-header {
    flex-direction: row;
    width: 100%;
    background: var(--zpe-dark-blue);
    color: #fff;
    padding: 4px 8px;
    justify-content: space-between;
    box-sizing: border-box;
    height: 55px;
    top: 0;
    position: sticky;
}

#searchBar {
    width: 35%;
    max-width: 450px;
}

#searchBar input {
    color: var(--zpe-dark-blue);
    border-radius: 2px;
    border: none;
    padding: 8px 4px;
    font-size: 14px;
    width: -webkit-fill-available;
}

#searchBar input:focus-visible {
    outline: 1px solid var(--zpe-light-blue_hover);
    color: var(--zpe-dark-blue);
    outline-offset: 2px;
}

/* clears the ‘X’ from Internet Explorer */
#searchBar input[type='search']::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

#searchBar input[type='search']::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* clears the ‘X’ from Chrome */
#searchBar input[type='search']::-webkit-search-decoration,
#searchBar input[type='search']::-webkit-search-cancel-button,
#searchBar input[type='search']::-webkit-search-results-button,
#searchBar input[type='search']::-webkit-search-results-decoration {
    display: none;
}

/* ############# DEVICES LIST ############# */
#devices {
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    min-height: 90%vh;
}

.device {
    margin: 8px 0 0 0;
    width: 100%;
    flex-direction: column;
    gap: 12px;
}

.deviceHeader {
    flex-direction: row;
    justify-content: center;
    width: 100%;
    gap: 16px;
    padding: 12px 0;
}

.deviceHeader img {
    width: 100%;
    min-width: 125px;
    max-width: 300px;
}

.deviceContent {
    padding: 0 6px;
}

.deviceContent h2 {
    color: var(--zpe-dark-blue);
    margin: 0;
}

.deviceContent small {
    color: var(--zpe-medium-blue);
    font-weight: bold;
}

.deviceButtons {
    gap: 16px;
    margin-top: 8px;
    justify-content: flex-start;
}

.devicesList {
    width: 100%;
}

.devicesSkuDescription {
    background: var(--zpe-soft-blue);
    justify-content: flex-start;
}

.devicesSkuTitle {
    padding: 4px 12px;
    width: 272px;
    box-sizing: border-box !important;
    text-align: center;
}

.devicesDescriptionTitle {
    padding: 4px 12px;
    border-left: 1px solid var(--zpe-medium-blue);
    text-align: center;
}

.skuDescriptionText {
    justify-content: flex-start;
}

.skuDescriptionText:nth-child(odd) {
    background-color: #c9e2ea38;
}

.skuDescriptionText:nth-child(even) {
    background-color: #ffffff00;
}

.devicesSku {
    width: 272px;
    box-sizing: border-box !important;
    white-space: nowrap;
    padding: 4px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.devicesSku_contactButton {
    background: var(--zpe-medium-blue);
    color: #ffffff;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
}

.devicesDescription {
    padding: 10px 12px;
    font-size: 14px;
    border-left: 1px solid var(--zpe-medium-blue);
}

.devicesSku_text {
    width: inherit;
    box-sizing: border-box !important;
    text-align: center;
    white-space: nowrap;
    font-size: 14px;
}

.details {
    padding: 8px 22px;
    background: var(--zpe-dark-blue);
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s;
}

.details:hover {
    background: #316d8d;
    transition: all 0.2s;
}

.onSite-link {
    text-decoration: none;
}

.onSite {
    padding: 8px 22px;
    background: var(--zpe-light-blue);
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s;
}

.onSite:hover {
    background: var(--zpe-light-blue_hover);
    transition: all 0.2s;
}

#close_modal {
    position: relative;
    top: -10px;
    left: 50%;
    cursor: pointer;
}

#close_modal:hover span {
    transform: scale(1.1);
}

#close_modal span {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#deviceModal_body {
    background-color: #000000b5;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    padding: 62px 32px;
    margin: 0 auto;
    display: none;
    overflow-y: auto;
    z-index: 89;
}

#deviceModal_body::-webkit-scrollbar-thumb {
    background: #60dadf;
    border-radius: 2px;
}

#deviceModal_body::-webkit-scrollbar-track {
    background: #3b3f42;
}

#deviceModal_body::-webkit-scrollbar {
    width: 3px;
}

#device_headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

#deviceModal {
    background: #ffffff;
    border-radius: 8px;
    flex-direction: column;
    padding: 50px 10%;
    margin: auto;
    margin-bottom: 100px;
    z-index: 99;
    max-width: 1440px;
}

.expn_card-body {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.expn_card {
    background: var(--zpe-medium-blue);
    color: #ffffff;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    width: fit-content;
}

#device_content {
    width: 100%;
}

#device_content-body {
    width: 100%;
    gap: 25px;
    padding-bottom: 15px;
    flex-direction: column;
}

#device_headline h2 {
    margin: 5px;
    font-size: 34px;
    margin: 0;
    color: var(--zpe-dark-blue);
    line-height: 1em;
}

#device_headline p {
    font-weight: 600;
    margin: 0;
    color: var(--zpe-medium-blue);
    font-size: 20px;
}

#description_text {
    width: 100%;
    text-align: center;
}
.modal_img_array {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.modal_img {
    width: 25%;
    cursor: pointer;
    flex-direction: column;
    min-width: 200px;
}

.modal_img_single {
    width: 40%;
    cursor: pointer;
    flex-direction: column;
}

.modal_img img,
.modal_img_single img {
    width: 100%;
}

.hiddenModalImg {
    display: none;
}

.showingModalImg {
    display: flex;
}

#modalImg_buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    margin-top: 10px;
}
#modalImg_buttons div {
    font-family: sans-serif;
    font-size: 26px;
    line-height: 1em;
    font-weight: bolder;
    background: var(--zpe-medium-blue);
    color: #fff;
    padding: 0px 16px;
    border-radius: 8px;
    cursor: pointer;
}

.hideLightBox {
    color: #ffff;
    display: block !important;
    margin: 15px;
    padding: 10px 16px;
    background: var(--zpe-medium-blue);
    border-radius: 6px;
    position: absolute;
    top: 25vh;
    left: 75vw;
    font-weight: bolder;
}

.modal_img small,
.modal_img_single small {
    display: none;
}

.modal_img_onClick {
    width: 100% !important;
    position: absolute;
    height: 100%;
    left: 0;
    top: -50px;
    background: #3b3f42f2;
}

.modal_img_onClick img {
    height: auto !important;
    width: 100% !important;
    max-width: 60vw;
}

#device_features {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
}

#device_features div {
    width: 30%;
}

#device_features h3 {
    color: var(--zpe-dark-blue);
    font-size: 18px;
    margin: 5px 0;
}

.featuresInDetails {
    width: 100% !important;
}

.featuresInDetails li {
    color: var(--zpe-dark-blue);
    font-size: 14px;
    margin: 5px 0;
}

#loading_animation {
    display: flex;
    padding-top: 25px;
}

#loading_animation > span {
    font-size: 38px;
    font-weight: 400;
    color: #fff;
}

.zpeLogo {
    background-image: url("data:image/svg+xml,%3Csvg width='115' height='126' viewBox='0 0 115 126' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.3118 86.7922H4.07796C1.82659 86.7922 0 84.9656 0 82.7143C0 80.4629 1.82659 78.6363 4.07796 78.6363H12.2339V47.372H4.07796C1.82659 47.372 0 45.5454 0 43.294C0 41.0426 1.82659 39.2161 4.07796 39.2161H16.3118C18.5632 39.2161 20.3898 41.0426 20.3898 43.294V82.7143C20.3898 84.9656 18.5632 86.7922 16.3118 86.7922Z' fill='white'/%3E%3Cpath d='M16.3123 107.182C14.061 107.182 12.2344 105.355 12.2344 103.104C12.2344 100.852 14.061 99.0259 16.3123 99.0259C25.2966 99.0259 32.6242 91.7195 32.6242 82.714V43.2938C32.6242 34.3095 25.3178 26.982 16.3123 26.982C14.061 26.982 12.2344 25.1554 12.2344 22.904C12.2344 20.6526 14.061 18.826 16.3123 18.826C29.7993 18.826 40.7801 29.8068 40.7801 43.2938V82.714C40.7801 96.201 29.7993 107.182 16.3123 107.182Z' fill='white'/%3E%3Cpath d='M110.083 86.7922H97.8494C95.5981 86.7922 93.7715 84.9656 93.7715 82.7143V43.294C93.7715 41.0426 95.5981 39.2161 97.8494 39.2161H110.083C112.335 39.2161 114.161 41.0426 114.161 43.294C114.161 45.5454 112.335 47.372 110.083 47.372H101.927V78.6363H110.083C112.335 78.6363 114.161 80.4629 114.161 82.7143C114.161 84.9656 112.335 86.7922 110.083 86.7922Z' fill='white'/%3E%3Cpath d='M97.8496 107.182C84.3626 107.182 73.3818 96.201 73.3818 82.714V43.2938C73.3818 29.8068 84.3626 18.826 97.8496 18.826C100.101 18.826 101.928 20.6526 101.928 22.904C101.928 25.1554 100.101 26.982 97.8496 26.982C88.8653 26.982 81.5377 34.2883 81.5377 43.2938V82.714C81.5377 91.6983 88.8441 99.0259 97.8496 99.0259C100.101 99.0259 101.928 100.852 101.928 103.104C101.928 105.355 100.101 107.182 97.8496 107.182Z' fill='white'/%3E%3Cpath d='M86.5717 126C86.1894 126 85.8283 125.958 85.446 125.851C66.3518 120.372 53.0135 102.637 53.0135 82.7354V43.2939C53.0135 27.0034 42.0965 12.5181 26.4643 8.01537C24.2979 7.39943 23.0448 5.12682 23.6607 2.9604C24.2767 0.793987 26.5493 -0.459135 28.6944 0.156807C47.8099 5.63656 61.1482 23.3714 61.1482 43.2727V82.693C61.1482 98.9623 72.0652 113.469 87.6974 117.972C89.8638 118.587 91.1169 120.86 90.4797 123.026C89.9912 124.832 88.3558 126 86.5717 126Z' fill='white'/%3E%3Cpath d='M68.6676 18.9113C67.6481 18.9113 66.6074 18.529 65.8215 17.7431C64.2073 16.1714 64.1861 13.5802 65.7578 11.9872C71.1951 6.4013 78.0129 2.32335 85.4679 0.199409C87.6343 -0.416532 89.8857 0.836589 90.5016 3.003C91.1176 5.16942 89.8645 7.42079 87.698 8.05797C81.6024 9.7996 76.0376 13.1554 71.5774 17.7006C70.7915 18.5077 69.7296 18.9113 68.6676 18.9113Z' fill='white'/%3E%3Cpath d='M27.5902 126C25.8274 126 24.1919 124.831 23.6822 123.047C23.0663 120.881 24.3194 118.63 26.4858 117.992C32.5815 116.251 38.1462 112.895 42.6065 108.35C44.1782 106.736 46.7694 106.714 48.3623 108.286C49.9765 109.858 49.9978 112.449 48.4261 114.042C42.9888 119.628 36.1709 123.706 28.7159 125.83C28.3336 125.936 27.9513 126 27.5902 126Z' fill='white'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    width: 115px;
    height: 126px;
}

.filterSVG {
    background-image: url("data:image/svg+xml,%3Csvg width='31' height='30' viewBox='0 0 31 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_355_2)'%3E%3Cpath d='M29.0923 0H1.90788C0.658783 0 0.0284899 1.51559 0.913548 2.40064L11.75 13.2387V25.3125C11.75 25.7713 11.9739 26.2014 12.3498 26.4646L17.0373 29.7446C17.9621 30.392 19.25 29.7359 19.25 28.5926V13.2387L30.0867 2.40064C30.97 1.51734 30.344 0 29.0923 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_355_2'%3E%3Crect width='30' height='30' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    width: 20px;
    height: 20px;
}

.closeButton {
    background-image: url("data:image/svg+xml,%3Csvg width='26' height='23' viewBox='0 0 26 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.751 0.554688H2.43848C1.14453 0.554688 0.0947266 1.60449 0.0947266 2.89844V20.0859C0.0947266 21.3799 1.14453 22.4297 2.43848 22.4297H22.751C24.0449 22.4297 25.0947 21.3799 25.0947 20.0859V2.89844C25.0947 1.60449 24.0449 0.554688 22.751 0.554688ZM18.6689 14.7393C18.9033 14.9736 18.9033 15.3545 18.6689 15.5889L16.6914 17.5664C16.457 17.8008 16.0762 17.8008 15.8418 17.5664L12.5947 14.29L9.34766 17.5664C9.11328 17.8008 8.73242 17.8008 8.49805 17.5664L6.52051 15.5889C6.28613 15.3545 6.28613 14.9736 6.52051 14.7393L9.79687 11.4922L6.52051 8.24512C6.28613 8.01074 6.28613 7.62988 6.52051 7.39551L8.49805 5.41797C8.73242 5.18359 9.11328 5.18359 9.34766 5.41797L12.5947 8.69434L15.8418 5.41797C16.0762 5.18359 16.457 5.18359 16.6914 5.41797L18.6689 7.39551C18.9033 7.62988 18.9033 8.01074 18.6689 8.24512L15.3926 11.4922L18.6689 14.7393Z' fill='white'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    width: 26px;
    height: 23px;
}

.closeIcon {
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.126 0.894835C26.9332 0.701702 26.7043 0.548478 26.4523 0.443933C26.2002 0.339389 25.9301 0.285576 25.6572 0.285576C25.3844 0.285576 25.1142 0.339389 24.8622 0.443933C24.6101 0.548478 24.3812 0.701702 24.1885 0.894835L14.001 11.0615L3.81346 0.874001C3.62058 0.681122 3.3916 0.528122 3.13959 0.423736C2.88758 0.319351 2.61748 0.265625 2.34471 0.265625C2.07193 0.265625 1.80183 0.319351 1.54982 0.423736C1.29781 0.528122 1.06883 0.681122 0.875954 0.874001C0.683075 1.06688 0.530075 1.29586 0.425689 1.54787C0.321304 1.79988 0.267578 2.06998 0.267578 2.34275C0.267578 2.61552 0.321304 2.88563 0.425689 3.13763C0.530075 3.38964 0.683075 3.61862 0.875954 3.8115L11.0635 13.999L0.875954 24.1865C0.683075 24.3794 0.530075 24.6084 0.425689 24.8604C0.321304 25.1124 0.267578 25.3825 0.267578 25.6553C0.267578 25.928 0.321304 26.1981 0.425689 26.4501C0.530075 26.7021 0.683075 26.9311 0.875954 27.124C1.06883 27.3169 1.29781 27.4699 1.54982 27.5743C1.80183 27.6787 2.07193 27.7324 2.34471 27.7324C2.61748 27.7324 2.88758 27.6787 3.13959 27.5743C3.3916 27.4699 3.62058 27.3169 3.81346 27.124L14.001 16.9365L24.1885 27.124C24.3813 27.3169 24.6103 27.4699 24.8623 27.5743C25.1143 27.6787 25.3844 27.7324 25.6572 27.7324C25.93 27.7324 26.2001 27.6787 26.4521 27.5743C26.7041 27.4699 26.9331 27.3169 27.126 27.124C27.3188 26.9311 27.4718 26.7021 27.5762 26.4501C27.6806 26.1981 27.7343 25.928 27.7343 25.6553C27.7343 25.3825 27.6806 25.1124 27.5762 24.8604C27.4718 24.6084 27.3188 24.3794 27.126 24.1865L16.9385 13.999L27.126 3.8115C27.9176 3.01984 27.9176 1.6865 27.126 0.894835Z' fill='%23214C64'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    width: 16px;
    height: 16px;
    transition: all 0.2s;
}

.arrowSVG {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='10' viewBox='0 0 18 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.7027 1.98156L9.53271 9.74653C9.44735 9.8387 9.35489 9.90413 9.2553 9.94284C9.15572 9.98155 9.04902 10.0006 8.93521 9.99999C8.82141 9.99999 8.71471 9.98063 8.61513 9.94192C8.51554 9.90321 8.42307 9.83808 8.33772 9.74653L1.1464 1.98156C0.947239 1.76651 0.847656 1.49769 0.847656 1.17511C0.847656 0.852533 0.954352 0.576036 1.16774 0.345621C1.38114 0.115207 1.63009 -2.93221e-07 1.91462 -3.05716e-07C2.19914 -3.1821e-07 2.4481 0.115207 2.66149 0.345621L8.93521 7.11981L15.2089 0.345621C15.4081 0.130567 15.6536 0.0230402 15.9456 0.0230402C16.2375 0.0230402 16.4899 0.138247 16.7027 0.368662C16.9161 0.599076 17.0228 0.867893 17.0228 1.17511C17.0228 1.48233 16.9161 1.75115 16.7027 1.98156Z' fill='%23214C64'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    width: 16px;
    height: 9px;
    transition: all 0.4s;
}

.questionSVG {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='0.75em' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cstyle%3Esvg%7Bfill:%23008aab%7D%3C/style%3E%3Cpath d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z'/%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    width: 12px;
    min-width: 12px;
    height: 12px;
    display: inline-block;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 74px;
    height: 40px;
}

.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}

@media (max-width: 767px) {
    #filters {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    #closeMenu {
        color: #fff;
        height: 30px;
        width: 20px;
        padding: 0 8px;
        cursor: pointer;
        display: block;
    }

    #prodSlct_body-column {
        display: none;
        max-width: 90%;
        position: absolute;
        transform: scaleX(100%);
        transition: all 0.5s;
        left: 0;
    }

    #mobileFilters_btn {
        display: block;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 10px;
        line-height: 12px;
        border-right: 2px solid #fff;
        padding: 0 16px 0 0;
    }

    #searchBar input {
        font-size: 12px;
    }

    .deviceHeader {
        flex-direction: column-reverse;
    }

    .deviceButtons {
        justify-content: center;
    }

    .filters-active {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        z-index: 1;
        background: #fff;
        animation: open-menu 0.5s;
        transform: scaleX(25%);
        transition: all 0.5s;
    }

    .filters-active .feature-name {
        font-size: 14px;
    }

    .filters-active .option-item,
    .filters-active .option-check {
        font-size: 16px;
    }

    #deviceList_body-header {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        gap: 8px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    #searchBar {
        width: 100%;
        max-width: 100% !important;
    }

    .deviceHeader img {
        max-width: 250px;
    }

    #device_content-body {
        gap: 6px;
    }

    #device_content-body {
        display: flex;
        flex-direction: column;
    }

    #description_text {
        width: 100%;
    }

    #device_headline,
    #description_text {
        text-align: justify;
    }

    #device_features {
        flex-direction: column;
    }

    #device_features div {
        width: 100%;
    }

    #device_features h3 {
        font-size: 16px;
    }

    #device_features span {
        font-size: 14px;
    }

    .device {
        padding: 0px;
    }

    .deviceContent h2 {
        line-height: 0.8;
    }

    .devicesSkuTitle {
        width: 220px;
    }

    .devicesSku {
        white-space: normal;
        padding: 0;
        width: 220px;
    }

    .devicesDescription {
        font-size: 12px;
    }

    .devicesSku_text {
        width: 220px;
        font-size: 12px;
    }
}

@media (max-width: 460px) {
    .devicesSkuDescription {
        justify-content: center;
    }

    .skuDescriptionText {
        flex-direction: column;
        gap: 0;
    }

    .devicesSku_text {
        margin: 10px 0 0 0;
    }

    .devicesSku_text {
        font-size: 12px;
    }

    .devicesDescription {
        font-size: 12px;
        padding: 6px;
        border-left: none;
    }

    .devicesSkuTitle {
        width: auto;
    }
}