#myInput {
  align-self: center;
  justify-content:center;
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 25rem;
  font-size: 0.9rem; /* Increase font-size */
  padding: 0.41rem; 
  border: 0px;
  border-radius: 2px;
  box-sizing: border-box;
  padding-right: 2rem;
  color: white;
  background-color: #141312;
}
* {
      touch-action: manipulation;
}
.disable-dbl-tap-zoom {
  touch-action: manipulation;
}
body{
    margin: 0rem;
    padding: 0rem;
}
#info{
    position: relative;
    padding-left: 0.1rem;
    font-size: 1rem;
    margin-top: -0.1rem;
    font-weight: lighter;
}
#myTable {
  display: relative;
  font-size: 1rem; 
  border-collapse: collapse;
  z-index: 0;
  justify-content: center;
  align-self: stretch;
  flex-basis: 85vw;
  background-color: #141312;
  color: white;
  font-weight: bold;
  border: 0px;
  margin-top: 4rem;
  margin-right:0rem;
  margin-left:0rem;
 /* padding-top: 2rem; */
}
.scroller {
  width: 0.95rem;
}
#myTable th, #myTable td {
  align-self: center;
  display: table-cell;
  text-align: center; 
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 0.4rem;
  padding-left: 0.4rem;
  border: 0px;
  white-space: pre;
}

#currentTr{
  white-space: pre;
  padding-top: 0rem;
  padding: 1rem;
  color: white;
  background-color: #262626;
  border-bottom: 0.4rem solid #141312;
}
#sortMenu:before{
    content: 'Sort: ';
    font-size: 0.8rem;
    color: white;
    font-weight: bold;
    align-self: center;
}
#myTable tr.header{
  z-index: 9998;
  position: -webkit-sticky;
  position: sticky;
  top: 3rem;
  flex-basis: 85vw;
  align-self: flex-start; 
  background-color: #141312;
}

.buyTd{
    padding-right: 2rem;
    width: fit-content;
}

.drop-down1:hover {
  cursor: pointer;
}
.drop-down2:hover {
  cursor: pointer;
}
 details > summary::-webkit-details-marker {
   display: none;
 }
#range1:before {
  content: "$";
}
#range2:before {
  content: "$";
}
#range3:after {
  content: '"';
}
#range4:after {
  content: '"';
}
#range5:after {
  content: 'Hz';
}
#range6:after {
  content: 'Hz';
}
#range11:after {
  content: 'GHz';
}
#range12:after {
  content: 'GHz';
}
#range21:after {
  content: 'GHz';
}
#range22:after {
  content: 'GHz';
}

.drop-down1{
  -webkit-user-select: none;
  -ms-user-select: none; 
  user-select: none; 
  font-weight: bold;
  list-style: none;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  padding-left: 0.5rem;
  padding-right: 1rem;
  transition-duration: 0.25s;
  border-bottom: 0.1rem solid #ddd;
  background-color: #141312;
}

#simplified{
  position: absolute;
  transform: rotate(90deg);
  left: 85%;
}

#price{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}

#brands{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#display{
   position: absolute;
   transform: rotate(90deg);
   left: 85%; 
}
#cpu{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#gpu{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#ram{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#storage{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#weight{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#os{
   position: absolute;
   transform: rotate(90deg);
   left: 85%; 
}
#features{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#screen-size{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#features-ports{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#features-hardware{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#storage-type{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#storage-size{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#ram-type{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#ram-size{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#gpu-memory{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#amd-gpu{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#recommended{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#intel{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#nvidia{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#core-count{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#base-freq{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#boost-freq{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#amd-cpu{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#screen-type{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#refresh-rate{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#screen-features{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#resolution{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#dealDrop{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
.drop-down2{
  -webkit-user-select: none;
  -ms-user-select: none; 
  user-select: none; 
  font-weight: bold;
  list-style: none;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 0.5rem;
  border-bottom: 0.1rem solid #ddd;
  text-align: center; 
}


#checkcol1{
  display:flex;
  flex-direction: column;
  justify-content: center;
   background-color: #141312;
}

#checkcol2{
  display:flex;
  justify-content: center;
  flex-direction: column;
   background-color: #141312;
}


*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins",sans-serif;
}

#border{
  position: fixed;
  width: 18.5rem;
  min-width: 13rem;
  border: 0px;
  top: 3rem;
  flex-direction: column;
  z-index: 98;
  background-color: #141312;
  color: white;
  border-right: 1px solid white;
  padding-bottom: 1rem;
  border-bottom: 1px solid white;
  overflow-x: hidden;
  max-width: 100%;
}

#slider { 
  position: absolute;
}  

span.ui-slider-handle.ui-state-default.ui-corner-all:first-of-type {
	border-radius: 1px 50% 50% 1px;
}

span.ui-slider-handle.ui-state-default.ui-corner-all:last-of-type {
	border-radius: 50% 1px 1px 50%;
}

.wrapper{
    background-color: #141312;
    padding: 1.5rem 1rem 2rem 0.3rem;
    border-radius: 10px;
}
.container{
    position: relative;
    width: 100%;
    margin-top: 30px;
}
input[type="range"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    outline: none;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    background-color: transparent;
    pointer-events: none;
}
.slider-track{
    width: 100%;
    height: 5px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}
.slider-track1{
    width: 100%;
    height: 5px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}

.slider-track2{
    width: 100%;
    height: 5px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}

.slider-track3{
    width: 100%;
    height: 5px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}

.slider-track4{
    width: 100%;
    height: 5px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}

.slider-track5{
    width: 100%;
    height: 5px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}

.slider-track6{
    width: 100%;
    height: 5px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}

.slider-track7{
    width: 100%;
    height: 5px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}

.slider-track8{
    width: 100%;
    height: 5px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}

.slider-track9{
    width: 100%;
    height: 5px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}

.slider-track10{
    width: 100%;
    height: 5px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}

input[type="range"]::-webkit-slider-runnable-track{
    -webkit-appearance: none;
    height: 5px;
}
input[type="range"]::-moz-range-track{
    -moz-appearance: none;
    height: 5px;
}
input[type="range"]::-ms-track{
    appearance: none;
    height: 5px;
}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 1.7em;
    width: 1.7em;
    background-color: #3264fe;
    cursor: pointer;
    margin-top: -9px;
    pointer-events: auto;
    border-radius: 50%;
}
input[type="range"]::-moz-range-thumb{
   /* -webkit-appearance: none;*/
    height: 1.7em;
    width: 1.7em;
    cursor: pointer;
    border-radius: 50%;
    background-color: #3264fe;
    pointer-events: auto;
}
input[type="range"]::-ms-thumb{
    appearance: none;
    height: 1.7em;
    width: 1.7em;
    cursor: pointer;
    border-radius: 50%;
    background-color: #3264fe;
    pointer-events: auto;
}
input[type="range"]:active::-webkit-slider-thumb{
    background-color: #ffffff;
    border: 3px solid #3264fe;
}
.values{
    background-color: #3264fe;
    position: relative;
    margin: auto;
    padding: 0.5rem;
    border-radius: 5px;
    text-align: center;
    font-weight: 500;
    font-size: 1rem;
    color: #ffffff;
}
.values:before{
    content: "";
    position: relative;
    height: 0;
    width: 0;
    border-top: 0px solid #3264fe;
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
    margin: auto;
    bottom: 0px;
    left: 0;
    right: 0;
}

#filter-graph{
  display:flex;
  justify-content: center;
  padding: 0.5rem;
}

#checkbox-group{
  padding: 1rem 0rem 0.1rem 0rem;
  display:flex;
  justify-content: center;
}

.check{
  padding-bottom: 0.7rem;
}
input[type="checkbox"] {
  background-color: #3264fe;
  color: #3264fe;
  cursor: pointer;
}

#pagination-group {
  width: 100%;
  left: 0;
  position: static;
  background-color: #141312;
  margin-left: 0;
  margin-right: 0;
  display: inline-flex;
  align-self: center;
  column-gap: 0.65rem;
  justify-content:center;
  padding-bottom: 3rem;
  margin: auto;
}

#pagination {
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  font-size: 0.9rem;
  background-color: #141312;
  color: white;
  border: 0px;
  cursor: pointer;
  border-radius: 6px;
  font-weight: bold;
}

#pagination:Hover {
    background-color: white;
    color: #141312;
}

#pagination button {
  padding: 5px 10px;
  border-radius: 1px;
  
}


#pagination button.active {
  background-color: #141312;
}


.modal-content {
  position: fixed;
  margin: auto;
  overflow: auto;
  padding: 1rem;
  width: 55vw; 
  z-index: 98;
  background-color: #262626;/* #1B1A1A;*/
  color: white;
  border: 2px solid white;
  padding-bottom: 3rem;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 1.5rem;
  margin-top: -0.5rem;
  margin-right: 0rem;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

/* The Close Button */
.closeFilter {
  color: #aaa;
  float: right;
  font-size: 2rem;
  font-weight: bold;
}

.closeFilter:hover,
.closeFilter:focus {
  color: #1B1A1A;
  text-decoration: none;
  cursor: pointer;
}

#filterTitle{
  padding-right: 1.1rem;
  padding-bottom: 1.1rem;
}

dialog::backdrop {
    background-image:grey;
    opacity: 0.75;
  }
  

#modal-header{
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 2rem;
  font-size: 1.2rem;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
}

.buyTd{
  padding-right: 1rem;
}

.buyButton{
  border-radius: 4px;
  width: 3.3rem;
  height: 2rem;
  margin-left: 0.5rem;
  margin-right: 0.9rem;
  font-weight: bold;
  color: #1B1A1A;
  background-color: hsl(56, 100%, 45%);
  cursor: pointer;
}

.modButton{
  border-radius: 4px;
  width: 5rem;
  height: 2rem;
  margin-left: 0.5rem;
  margin-right: 0.9rem;
  font-weight: bold;
  color: #1B1A1A;
  background-color: hsl(56, 100%, 45%);
  cursor: pointer;
}

.modButton:hover{
  background-color: hsl(56, 100%, 60%);
}

.buyButton:hover{
  background-color: hsl(56, 100%, 60%);
}

.price{
  font-weight: bold;
  font-size : 1.2rem;
  padding-top: 0.5rem;
}

#modal-body {
  display: flex;
  justify-content:space-between;
  padding-left: 3rem;
  padding-right: 3rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color: white;
  color:black;
}


.buy{
  color: hsl(56, 100%, 45%);
  cursor: pointer;
  padding-right: 0.5rem;
}

.buy:hover{
  color: hsl(56, 100%, 60%);
}

#radioCPU{
  position: relative;
  cursor: pointer;
  text-decoration: none; 
  font-size: 0.65rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  background-color: #262626;
  justify-content: center;
  vertical-align: baseline;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}

.label:hover{
    cursor: pointer;
}

#radioRec{
  margin: auto;
  width: 14rem;
  position: relative;
  cursor: pointer;
  text-decoration: none; 
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  background-color: #262626;
  justify-content: center;
  text-align: center;
  border-right: 2px solid #1B1A1A;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}

.radioRec:checked + #radioRec{
      background-color: #3264fe;
}

.radioCPU:checked + #radioCPU{
      background-color: #3264fe;
}

#perfCPU{
  display: flex;
  justify-content: center;
  font-weight: bold;
  color: white;
  font-size: 0.7rem;
}

#perfLabel{
   text-align: center;
   justify-content: center;
   font-size: 0.92rem;
   display: flex;
   padding-top: 1rem;
   padding-bottom: 1rem;
   font-weight: bold;
    -webkit-user-select: none; 
    -ms-user-select: none;
     user-select: none;
    -moz-user-select: none;
}
#perfRec{
  display: flex;
  justify-content: center;
  font-weight: bold;
  color: white;
  font-size: 0.7rem;
  flex-direction: column;
  padding-bottom: 0rem;
  margin: 0rem;
}

#selectPerf{
  padding: 0.5rem;
}
#recWrapper{
  padding-bottom: 0.6rem;
}
#radioCPU:not(:last-of-type){
  border-right: 2px solid #1B1A1A;
}

#radioCPU:last-of-type{
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
}
#radioCPU:first-of-type{
 border-top-left-radius: 10px;
 border-bottom-left-radius: 10px;
}

#radioCPU:not(:last-of-type){
  border-right: 2px solid #1B1A1A;
}

#radioRec:last-of-type{
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
}
#radioRec:first-of-type{
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
}

#bar{
  column-gap: 0.2rem;
  align-items: center;  
  height: 3rem; 
  min-width: fill-available;
  min-width: -moz-available; 
  min-width: -webkit-fill-available;
  left: 0;
  background-color: #141312;
  position: sticky;
  z-index: 9999;
  margin-left: 0;
  margin-right: 0;
  top: 0;
  display: inline-flex;
  justify-content: space-between;
  border-bottom: 3px solid white;
}

#sideBar{
  width: 100vw;
  height: 3rem;
  background-color: #141312;
  position: sticky;
  z-index: 9999;
}

#filter{
  margin-left: 0.15rem;
  font-size: 2.2rem;
  margin-top: -0.2rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  background-color: transparent;
  border: 0px solid;
  color: #aaa;
  cursor: pointer;
  align-self: center;
  margin-left: 1rem;
  z-index: 9999;
}
#filter:hover{
  color: white;
}
#closeFilter{
  position: fixed;
  top: 0.3rem;
  margin-left: 1.5rem;
  font-size: 2.2rem;
  margin-top: -0.24rem;
  background-color: transparent;
  border: 0px solid;
  color: white;
  cursor: pointer;
  align-self: center;
 /* margin-left: 1.5rem;*/
  z-index: 9999;
}
#gpuPerformance{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#cpuPerformance{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
#threads-count{
   position: absolute;
   transform: rotate(90deg);
   left: 85%;
}
.slider-track11{
    width: 100%;
    height: 5px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}

#filter-drop{
 padding-right: 1rem;
 overflow: auto;
}

body {
  background-color: #141312;
}

#clearInput{
  position: absolute;
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  top: -0.45rem;
  bottom: 0rem;
  right: 0.2rem;
  margin: auto;
  background: #141312;
  padding: 0;
  outline: none;
  transition: .1s;
  color: #141312;
  border: 0px;
  z-index:10100;
  font-size: 1.3rem;
  font-weight: bold;
  cursor: text;
}

#search{
  position: relative;
  justify-content: center;
  margin: auto;
  left: -4.5rem;
}

#sort{
  justify-content: center;
  height: 2rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-weight: bold;
  margin: auto;
  color: white;
  background-color: #141312;
  cursor: pointer;
  border: 0px;
}

#sortMenu{
  justify-content: center;
  display: flex;
  margin-right: 2rem;
  margin-left: -11.8rem;
  font-size: 0.5rem;
}

#sortName{
  color: white;
  justify-content: center;
  font-size: 0.8rem;
  padding-right: 0.5rem;
  font-weight: bold;
  margin: auto;
}

#sortLabel{
  font-size: 0.8rem;
  text-align: center;
  background-color: #141312;
  cursor: pointer;
}

#plSmall{
  visibility: collapse;
  position: absolute;
}
@media screen and (max-width: 920px) {
    .modal-content{
        width: 90vw;
    }
    body{
        overflow-x: hidden;
    }
    .price{
        justify-content: center;
    }
    #myTable{
        width: 100%;
    }
    #myTable th {
         display: none;
    }
    #myTable td {
     display: grid;
     width: 100%;
     justify-content: center;
     padding: 0.5rem 1rem;
    }
    /*
    #myTable #display-th::before{
         content: attr(data-cell) ": ";
         font-weight: 700;
    }
    #myTable #cpu-th::before{
         content: attr(data-cell) ": ";
         font-weight: 700;
    }
    #myTable #gpu-th::before{
         content: attr(data-cell) ": ";
         font-weight: 700;
    }
    #myTable #memory-th::before{
         content: attr(data-cell) ": ";
         font-weight: 700;
    }
    #myTable #storage-th::before{
         content: attr(data-cell) ": ";
         font-weight: 700;
    }
    */
    #myTable #tableImg{
        background-color: white;/* #262626;*/
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    #model-th > p {
        white-space: normal;
    }
    #display-th > p {
        white-space: normal;
    }
    #cpu-th > p {
        white-space: normal;
    }
    #gpu-th > p {
        white-space: normal;
    }
    #os-th > p {
        white-space: normal;
    }
    #memory-th > p {
        white-space: normal;
    }
    #storage-th > p {
        white-space: normal;
    }
    #myTable #model-th{
        width: 100%;
        text-align: center;
        padding-bottom: 1rem;
    }
    #myTable #display-th{
        width: 100%;
        padding-top: 0.1rem;
        padding-bottom: 0rem;
        text-align: center;
    }
    #myTable  #cpu-th {
        width: 100%;
        text-align: center;
        padding-top: 0.1rem;
        padding-bottom: 0rem;
    }
    #myTable #gpu-th{
        width: 100%;
        text-align: center;
        padding-top: 0.1rem;
        padding-bottom: 0rem;
    }
    #myTable #os-th{
        width: 100%;
        padding-top: 0.1rem;
        padding-bottom: 0rem;
        text-align: center;
    }
    #myTable #memory-th{
        width: 100%;
        padding-top: 0.1rem;
        padding-bottom: 0rem;
        text-align: center;
    }
    #myTable #storage-th{
        width: 100%;
        padding-top: 0.1rem;
        padding-bottom: 0rem;
        text-align: center;
    }
    #myTable #price-th{
        width: 100%;
        padding-top: 1rem;
        padding-bottom: 0rem;
        text-align: center;
    }
   #myTable #buy-th{
        padding-bottom: 1rem;
        justify-content: center;
    }
    .buyButton{
        margin-right: 0.5rem;
    }
    #myTable {
    flex-basis: 100vw;
    }
  #myTable .buyTd{
      padding-bottom: 1rem;
      padding-top:0.25rem;
  }
}



@media screen and (max-width: 875px) {
  #myInput {
    width: 15rem;
  }
  /*
  #memory-th > p {
    white-space: normal;
  }
  #storage-th > p {
    white-space: normal;
  }
  #os-th > p {
    white-space: normal;
  }
  #price-th > p {
    white-space: normal;
  }
  #cpu-th > p {
    white-space: normal;
  }
  #gpu-th > p {
    white-space: normal;
  }
  #display-th > p {
    white-space: normal;
  }
  #model-th > p {
    white-space: normal;
  }
  */
  #sortName{
    visibility: hidden;
    width: 1px;
  }
  .modal-content{
    width: 90vw;
  }
}
@media screen and (min-width: 1080px) {
  #myTable {
    flex-basis: 75vw;
  }
}
@media screen and (max-width: 800px) {
  #myInput{
    width: 14rem;
  }
  #sortName{
    visibility: hidden;
  }
  .modal-content{
    width: 90vw;
  }
}
@media screen and (max-width: 719px), (max-height: 719px) {
    #search:before {
        font-size: 2.5rem;
        margin-top: 0.2rem;
    }

    #bar{
         justify-content: space-between;
    }
    #filter{
      margin-left: 0.15rem;
      font-size: 2.5rem;
      margin-top: -0.2rem;
    }
    #closeFilter{
      margin-left: 0.64rem;
      font-size: 2.5rem;
      margin-top: -0.38rem;
    }
    #closeFilter:focus{
        color: #aaa;
    }
    #sortMenu{
        margin-right: 1.5rem;
    }
    #filter:hover{
        color: #aaa;
    }
}
@media screen and (max-width: 665px) {
   #current-heading{  
      text-align: center;
   }
   #imageBackground{
       padding: 0rem;
   }
  #plSmall{
    visibility: visible;
    align-self: center;
    position: relative;
    color: white;
    width: auto;
  }

  #plLogo{
    visibility: collapse;
    position: absolute;
  }
  #sortName{
    visibility: hidden;
  }
  .modal-content{
    width: 90vw;
  }
}
@media screen and (max-width: 555px) {
   #imageModal{
    position: fixed;
    top:15vh;
    left:0;
   }
  #sort{
      width: 7rem;
  }
  #modal-body{
      top:0;
      justify-content: space-between;
      padding-left: 0.5rem;
       padding-right: 0.5rem;
  }
  #modelImage{
      margin-left: -3rem;
      padding-left: 0rem;
  }
  
}
@media screen and (max-width: 515px) {
  #body{
   min-width: 350px;
  }
  .modal-content{
    width: 90vw;
  }
  #myInput{
    text-overflow: ellipsis;
    width: 7.2rem;
  }
  #sortMenu:before{
    content: '';
  }
  
}

.filterHeader{
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}

#search:before {
  display: inline-block;
  position: absolute;
  content: '\2315';
  color: white;
  left: -1.5rem;
  top: -0.2rem;
  font-size: 1.6rem;
  transform: rotate(-80deg);
}

textarea:hover, .input:hover{
  outline: none;
  box-shadow: 0rem 0rem 0.1rem 0.11rem white; /*#719ECE;*/
}
textarea:focus, .input:focus{
  outline: none;
  box-shadow: 0rem 0rem 0.1rem 0.11rem white;
}
.input:focus{
  box-shadow: 0rem 0rem 0.1rem 0.11rem white;
  filter: brightness(110%);
}
#search:hover{
  outline: none;
  box-shadow: 0rem 0rem 0.1rem 0.13rem white;
  filter: brightness(110%);
}
#plLogo{
  align-self: center;
  margin-top: 0.3rem;
  color: white;
}

#logoBestBuy{
  height: 2.8rem;
  background-color: white;
}

#logoBH{
  height: 2.8rem;
  background-color: white;
}

#logoNewEgg{
  height: 2.8rem;
  background-color: white;
}

#logoWalmart{
  height: 1.7rem;
}

#logoAmazon{
  height: 1.7rem;
}

#laptopImg{
  color: black;
  font-size: 0.5rem;
  width: 80px;
  height: 80px;
  cursor:pointer;
}
#tableImg{
  background-color: white;
}
#imageBackground{
  background-color: white;
  padding: 0.5rem;
  align-content: center;
}
#imageModal{
  padding: 2.6rem;
  background-color: white;
  position: fixed;
  margin: auto;
  z-index: 98;
  justify-content: center;
}

.closeImage {
  color: #aaa;
  float: right;
  font-size: 1.5rem;
  font-weight: bold;
  right: 0.65rem;
  top: 0.2rem;
  position: absolute;
}

.closeImage:hover,
.closeImage:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
#image-th{
    justify-content: center;
    width: 7rem;
}
#model-th{
  color: white;
  width: max(12px,20rem);
  container-type: inline-size;
  display: grid;
  place-items: center;
  text-wrap: balance;
}

#display-th{
  color: white;
  width: max(12px,17rem);
  container-type: inline-size;
  display: grid;
  place-items: center;
  text-wrap: balance;
}

#gpu-th{
  color: white;
  width: max(12px,10rem);
  container-type: inline-size;
  display: grid;
  place-items: center;
  text-wrap: balance;
}

#cpu-th{
  color: white;
  width: max(12px,13rem);
  container-type: inline-size;
  display: grid;
  place-items: center;
}

#memory-th{
  color: white;
  width: max(12px,6rem);
  container-type: inline-size;
  display: grid;
  place-items: center;
  text-wrap: balance;
}

#storage-th{
  color: white;
  width: max(12px,6rem);
  container-type: inline-size;
  display: grid;
  place-items: center;
  text-wrap: balance;
}

#os-th{
  color: white;
  width: max(12px,5rem);
  container-type: inline-size;
  display: grid;
  place-items: center;
  text-wrap: balance;
}

#price-th{
  color: white;
  width: max(12px,6rem);
  container-type: inline-size;
  display: grid;
  place-items: center;
  text-wrap: balance;
}

#memory-th > p {
  font-size: max(12px,0.9rem);
  text-wrap:balance;
}
#storage-th > p {
  font-size: max(12px,0.9rem);
  text-wrap:balance;
}
#os-th > p {
  font-size: max(12px,0.9rem);
}
#price-th > p {
  font-size: max(12px,0.9rem);
  text-wrap:balance;
}
#cpu-th > p {
  font-size: max(12px,0.9rem);
  text-wrap:balance;
}
#gpu-th > p {
  font-size: max(12px,0.9rem);
  text-wrap:balance;
}
#display-th > p {
  font-size: max(12px,0.9rem);
  text-wrap:balance;
}
#model-th > p {
  font-size: max(12px,0.9rem);
  text-wrap:balance;
}
#buy-th > p {
    justify-content: center;
    width: 7rem;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px white;
  padding-left: 0.3rem;
  margin-top:-0.15rem;
  padding: 0.2rem;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}

#title{
    width: 100%;
    display: block;
    position: relative;
    color: white;
    padding: 1rem;
    font-size: 1rem;
    text-align: center;
}

.tooltip .tooltiptext {
  background-color: #141312;
  padding: 0.5rem;
  visibility: hidden;
  text-align: center;
  width: 13.5rem;
  color: #fff;
  border-radius: 6px;
  /* Position the tooltip */
  position: absolute;
  z-index: 10000;
  border: 2px solid white;
  font-size:0.7rem;
}
.tooltiptext{
    font-weight: 500;
}
#cpuText{
  top: -11rem;
  left: -12rem;
  visibility: hidden;  
}
#cpuInfo:hover #cpuText{
  visibility: visible;
}
#gpuText{
  top: -8.3rem;
  left: -12rem;
  visibility: hidden;  
}
#gpuInfo:hover #gpuText{
  visibility: visible;
}
#ramText{
  top: -8.3rem;
  left: -12rem;
  visibility: hidden;  
}
#ramInfo:hover #ramText{
  visibility: visible;
}
#storageText{
  top: -9rem;
  left: -12rem;
  visibility: hidden;  
}
#storageInfo:hover #storageText{
  visibility: visible;
}
#displayText{
  top: -7.5rem;
  left: -12.3rem;
  visibility: hidden;  
}
#displayInfo:hover #displayText{
  visibility: visible;
}
#budgetChromeText{
    overflow: visible;
  top: -7.8rem;
  left: -9.8rem;
  visibility: hidden;  
}
#budgetChromeInfo:hover #chromeText{
  visibility: visible;
}
#chromeText{
    overflow: visible;
  top: -7.8rem;
  left: -9.6rem;
  visibility: hidden;  
}
#chromeInfo:hover #chromeText{
  visibility: visible;
}
#budgetText{
    overflow: visible;
  top: -7.5rem;
  left: -9rem;
  visibility: hidden;  
}
#budgetInfo:hover #budgetText{
  visibility: visible;
}
#basic256GBText{
    overflow: visible;
  top: -6.5rem;
  left: -8.8rem;
  visibility: hidden;  
}
#basic256GBInfo:hover #basic256GBText{
  visibility: visible;
}
#basic512GBText{
  top: -7rem;
  left: -9.5rem;
  visibility: hidden;  
}
#basic512GBInfo:hover #basic512GBText{
  visibility: visible;
}
#lowEndText{
  top: -9rem;
  left: -9.2rem;
  visibility: hidden;  
}
#lowEndInfo:hover #lowEndText{
  visibility: visible;
}
#midRangeText{
  top: -7rem;
  left: -9.5rem;
  visibility: hidden;  
}
#midRangeInfo:hover #midRangeText{
  visibility: visible;
}
#highEndText{
  top: -7rem;
  left: -9.2rem;
  visibility: hidden;  
}
#highEndInfo:hover #highEndText{
  visibility: visible;
}
#veryHighEndText{
  top: -6rem;
  left: -10.05rem;
  visibility: hidden;  
}
#veryHighEndInfo:hover #veryHighEndText{
  visibility: visible;
}
#entryWorkStationCPUText{
  top: -7rem;
  left: -11.5rem;
  visibility: hidden;  
}
#entryWorkStationCPUInfo:hover #entryWorkStationCPUText{
  visibility: visible;
}
#entryWorkStationGPUText{
  top: -8rem;
  left: -9.3rem;
  visibility: hidden;  
}
#entryWorkStationGPUInfo:hover #entryWorkStationGPUText{
  visibility: visible;
}
#highWorkStationText{
  top: -8rem;
  left: -9.9rem;
  visibility: hidden;  
}
#highWorkStationInfo:hover #highWorkStationText{
  visibility: visible;
}
#veryHighWorkStationText{
  top: -8rem;
  left: -10.8rem;
  visibility: hidden;  
}
#veryHighWorkStationInfo:hover #veryHighWorkStationText{
  visibility: visible;
}
#proWorkStationText{
  top: -9rem;
  left: -10.4rem;
  overflow: visible;
  visibility: hidden;  
}
#proWorkStationInfo:hover #proWorkStationText{
  visibility: visible;
}
#highProWorkStationText{
  top: -10rem;
  left: -12.1rem;
  visibility: hidden;  
}
#highProWorkStationInfo:hover #highProWorkStationText{
  visibility: visible;
}

#spacer{
  display: flex;
  width: 2rem;
  height: 1.8rem;
  align-items: flex-end;
  justify-content: center;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  text-align: center;
  font-size: 0.9rem;
  color: white;
  font-weight: bold;
}
#current-heading{  
  display: block;
  color: white;
  padding-bottom: 2rem;
  font-size: 1rem; 
  padding-top: 1rem;
  justify-content: center;
  position: absolute;
}    
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 2.2rem;
  height: 1.2rem;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1rem;
  width: 1rem;
  /*height: 20x;
  width: 26px;
  left: 2px;
  */
  top: 1.3px;
  left: 2px;
  background-color: white;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(1rem);
  -ms-transform: translateX(1rem);
  transform: translateX(1rem);
}

/* Rounded sliders */
.slider.round {
  border-radius: 15px;
}

.slider.round:before {
  border-radius: 50%;
}

#switchLabel{
align-self: center;   
 text-align: center;
 margin: auto;
 position: absolute;
 justify-content: center;
 padding-left: 0.5rem;
}
#dealsGroup{
  padding: 1rem 0rem 0.1rem 0rem;
  display:flex;
  justify-content: center;
}