body,
html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
    /*font-family: 'Raleway', sans-serif;*/
    font-size: 15px;
    color: #ccc;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /*position: fixed;*/
    top: 0;
    left: 0;
    /*overflow: hidden;*/
    background-color: #1f1f1f;
    box-sizing: border-box;
    -webkit-user-select: none;
    transition: all ease-in-out 0.3s;
}

* {
  touch-action: manipulation;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1{
  text-shadow: rgba(204,204,204,0.7);
}

p{
  margin: 5px;
}
.frame {
  top: 0;
  position: absolute;
  right: 0;
  /*padding: 1rem;*/
}

.frame__title {
  font-size: 1rem;
  display: inline-block;
}

.frame__links {
  display: inline-block;
  font-size: 20px;
  margin-right: 10px;
  /*text-transform: lowercase;*/
}

.frame__price {
  font-size: 2rem;
  display: inline-block;
  margin: 0 0.5rem;
  /*text-transform: lowercase;*/
  color: gray;
}

.frame__links a {
    display: inline-block;
    margin: 0 0.5rem;
    text-decoration: none;
    color: gray;
}

.frame__links a:focus,
.frame__links a:hover {
    text-decoration: underline;
}

#customCanvasID {
    width: 100vw;
    height: 100vh;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden; /*J27*/
    /*margin-left: 0.5s;*/ /*J27*/
}

/*Selections: fabric, details...*/
.controls {
    position: absolute;
    width: 100%;
}


.options {
    position: absolute;
    right: 0;
    bottom: 100px;
}

/*main buttons*/
.option {
    background-size: cover;
    /*background-position: 100%;*/
    /*background-color: black;*/
    /*margin-bottom: 3px;*/
    padding: 8px;
    height: 85px;
    width: 85px;
    display: flex;
    justify-content: center;
    align-items: right;
    cursor: pointer;
}

.option:hover {
    /*border-left: 5px solid white;*/
    width: 60px;
}

.option.--is-active {
    /*border-right: 3px solid green;*/
    width: 100px;
    background-color: rgba(180, 180, 180, 0.35);
    cursor: default;
}

.option.--is-active:hover {
    border-left: none;
}

.option img {
    height: 100%;
    width: auto;
    pointer-events: none;
}



/*bags buttons*/
.bagsOption {
    background-size: cover;
    /*background-position: 100%;*/
    /*background-color: black;*/
    /*margin-bottom: 3px;*/
    padding: 8px;
    height: 150px;
    width: 150px;
    display: flex;
    /*justify-content: left;*/
    align-items: left;
    cursor: pointer;
}

.bagsOption:hover {
    /*border-left: 5px solid white;*/
    width: 60px;
}

.bagsOption.--is-active {
    /*border-right: 3px solid green;*/
    width: 100px;
    background-color: rgba(180, 180, 180, 0.35);
    cursor: default;
}

.bagsOption.--is-active:hover {
    border-left: none;
}

.bagsOption img {
    height: 100%;
    width: auto;
    pointer-events: none;
}


.info {
    padding: 0 1em;
    display: flex;
    justify-content: flex-end;
}

.info p {
    margin-top: 0;
}

.tray {
    width: 100%;
    height: 85px; /*okie*/
    bottom: 0px;
    position: fixed;
    overflow-x: hidden;
}

.trayDetail {
    width: 100%;
    height: 85px;
    bottom: 0px;
    position: fixed;
    overflow-x: hidden;
}

.trayNeck {
    width: 100%;
    height: 80px;
    bottom: 0px;
    position: fixed;
    overflow-x: hidden;
}

.tray2 {
    width: 100%;
    height: 80px;
    bottom: 0px;
    position: fixed;
    overflow-x: hidden;
}

.tray3 {
    width: 100%;
    height: 80px;
    bottom: 0px;
    position: fixed;
    overflow-x: hidden;
}

.trayBkg {
    width: 100%;
    height: 80px;
    bottom: 0px;
    position: fixed;
    overflow-x: hidden;
}

.tray__slide {
    position: absolute;
    display: flex;
    left: 0; /*cannot scrollback if change it to right*/
    transform: translateX(-50%);
    animation: wheelin 1s 2s ease-in-out forwards; 
}

.trayDetail__slide {
    position: absolute;
    display: flex;
    right: 0; /*ODze!!!*/

    /*   transform: translateX(-50%);
  animation: wheelin 1s 2s ease-in-out forwards; */
}

.trayNeck__slide {
    position: absolute;
    display: flex;
    right: 0;
    /*   transform: translateX(-50%);
  animation: wheelin 1s 2s ease-in-out forwards; */
}

.tray2__slide {
    position: absolute;
    display: flex;
    right: 0;
    /*   transform: translateX(-50%);
  animation: wheelin 1s 2s ease-in-out forwards; */
}

.tray3__slide {
    position: absolute;
    display: flex;
    right: 0;
    /*   transform: translateX(-50%);
  animation: wheelin 1s 2s ease-in-out forwards; */
}

.trayBkg__slide {
    position: absolute;
    display: flex;
    right: 0;
    /*   transform: translateX(-50%);
  animation: wheelin 1s 2s ease-in-out forwards; */
}

.tray__swatch {
    transition: 0.1s ease-in;
    height: 80px;
    min-width: 80px;
    flex: 1;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    background-size: cover;
    background-position: center;
}

.trayDetail__swatch {
    transition: 0.1s ease-in;
    height: 80px;
    width: 80px;
    /*bottom: 20px;*/
    flex: 1;
    
    background-size: cover;
    background-position: center;
}

.trayNeck__swatch {
    transition: 0.1s ease-in;
    height: 80px;
    min-width: 80px;
    flex: 1;
    background-size: cover;
    background-position: center;
}

.tray2__swatch {
    transition: 0.1s ease-in;
    height: 80px;
    min-width: 80px;
    flex: 1;
    background-size: cover;
    background-position: center;
}

.tray3__swatch {
    transition: 0.1s ease-in;
    height: 80px;
    min-width: 80px;
    flex: 1;
    background-size: cover;
    background-position: center;
}

.trayBkg__swatch {
    transition: 0.1s ease-in;
    height: 60px;
    min-width: 120px;
    flex: 1;
    background-size: cover;
    background-position: center;
}

.tray__swatch:nth-child(5n+5) {
    margin-right: 10px;
}

.drag-notice {
    display: flex;
    justify-content: right;
    align-items: right;
    padding: 1em;
    width: 6em;
    height: 6em;
    box-sizing: border-box;
    font-size: 3em;
    font-weight: 800;
    text-transform: uppercase;
    text-align: right;
    border-radius: 5em;
    background: white;
    position: absolute;
}

.drag-notice.start {
    -webkit-animation: popout 0.25s 3s forwards;
    animation: popout 0.25s 3s forwards;
}

@-webkit-keyframes popout {
    to {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}

@keyframes popout {
    to {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}

@-webkit-keyframes wheelin {
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes wheelin {
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@media (max-width: 960px) {
    .options {
        /*top: 0;*/
        margin-bottom: 60px;
    }

    .info {
        padding: 0 1em 1em 0;
    }

    .info__message {
        display: flex;
        align-items: flex-end;
    }

    .info__message p {
        margin: 0;
        font-size: 0.7em;
    }

    .frame {
        left: auto;
        right: 0;
        padding-left: 6rem;
    }

    .frame__links {
        display: block;
        margin: 0;
        text-align: right;
    }
}

@media (max-width: 720px) {
    .info {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 1em 1em;
    }

    .info__message {
        margin-bottom: 1em;
    }
}

@media (max-width: 680px) {
    .info {
        padding: 1em 2em;
    }

    .info__message {
        display: none;
    }

    .options {
        bottom: 50px;
    }

    .option {
        margin-bottom: 1px;
        padding: 5px;
        height: 55px;
        width: 55px;
        display: flex;
    }

    .option.--is-active {
        /*border-right: 2px solid red;*/
        width: 60px;
    }

    .option img {
        height: 100%;
        width: auto;
        pointer-events: none;
    }
   

}

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  }
  
  /* The navigation menu links */
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  /* When you mouse over the navigation links, change their color */
  .sidenav a:hover {
    color: #f1f1f1;
  }
  
  /* Position and style the close button (top right corner) */
  .sidenav .btnBags {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
  #main {
    transition: margin-left .5s;
    margin-left: 130px;
  }
  
  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }

/* Style the images inside the grid */
.column img {
  border-radius: 8px;
  /*border: 1px solid #51515151;*/
  opacity: 1;
  cursor: pointer;
  width: 100%;
}
/*
.column img:hover {
  border: 1px solid white;
}*/

.column .topleft {
  position: absolute;
  top: 10%;
  left: 10%;
  transition:(-10,-10);
  line-height: 0.3;
  color: #ccc;
  /*padding: 12px 24px;*/
}

.column .topright{
  position: absolute;
  top: 10%;
  right: 10%;
  transform: translate(10%,-10%);
  font-size: 18px;
  line-height: 0.3;
  color: #ccc;
  font-size: 16px;
}

/* Style the button and place it in the middle of the container/image */
.column .btnCustom {
  position: absolute;
  right: 15px;
  bottom:15px;
  color: black;
  font-size: 14px;
  /*padding: 10px 22px;*/
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-size: 2em;
  color:#ccc;
}

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
 

/*-----Customize Page-----*/
#dragToRotateID{
  position: absolute; 
  top: 10%; 
  left: 50%; 
  height: 24px; 
  width: 100vw;
  text-align: center; 
  vertical-align: middle; 
  transform: translate(-50%,-50%); 
  z-index: 3;
} 
.matTab{
  /*color: #ccc;*/
  background-color: gray;
}

.matTabs{
  position: absolute;
  width: 100%;
  height: 95%;
  bottom: 0;
  left: 0;
  transition: 0.3s all;
}

.mat-content{
  color: #111;
  background-color: gray;
  /*background-color: rgba(255, 255, 255, 0.3);*/
  /*box-shadow: 2px -2px 5px rgba(255,255,255,0.4);*/
}



.matTab span{
  /*color: #ccc;*/
  background-color: gray;
}

.settingZone {
  position: absolute;
  width: 272px;
  height: 310px;
  overflow: hidden;
  bottom: 0;
  left: 16.5%;
  z-index: 3;
}
  
/*
  .btnSetting, .btnSettingAc{
    display:inline-block;
    font-size: 1.4rem;
    z-index: 3;
    padding: 3px 10px 3px 10px;
    border-width: 0;
    background-color: Transparent;
    background: none;
  }

  .btnSetting{
    color: #555;
  }

  .btnSettingAc{
    color: white;
  }
*/
  #setting-dropdownID {
    position: absolute;
    display: block; /*don't set to "none" or the Brightness btn will work wrong!!!*/
    font-size: 1rem;
    color: #555;
    top: 30px;
    left: 0;
    z-index: 3;
  }
  /*.settingZone:hover #setting-dropdownID {display: block;}*/
  /*.settingZone:hover .whyNot {display: block;}*/
  
  
  .settingMenu {
    left: 0;
    top: 10px;
    color: #555;
    padding: 5%;
  }
    .settingMenu:hover{
      color: white;
    }
        
  .settingFullscreen{
    color: #555;
    font-size: 2rem;
    padding: 15px;
  }
    
    .settingFullscreen:hover{
      color: white;
    }

    /*.settingFullscreen img{
      ! width: 100%; 
    }*/

  .settingBkg{
    /*display: ruby-base;*/
    width: 100%;/*300px;*/
    color: gray;
    padding: 3px;
    white-space: pre-wrap;
  }
  

  .bkgImg{
    position: relative;
    display: inline-block;
    width: 45px;
    height: 35px;
    border-radius: 8px;
  }
  .bkgImg:hover{
    border: 2px solid white;
    cursor: pointer;
  }

  #noticeID{
    display: inline-block;
    font-size: 0rem;
    transition: 0.8s;
    color: rgba(200, 200, 200, 1);

    /*position: absolute;
    margin: auto;
    left: 45%;
    top: 15%;
    z-index: 5;*/
  }

  /* The thumbsScreen (background) */
.thumbsScreen {
    position: fixed;
    z-index: 50;
    padding-top: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #656565;
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* Modal Content */
  .canvasClass {
    position: fixed;
    margin: auto;
    align-items: center;
    padding: 0;
    width: 100vw;
    max-width: 1920px;
    /*overflow: hidden;*/
  }

  .btnOrder {
    position: absolute;
    z-index: 2;
    right: 10px;
    width: auto;
    padding: 10px;
    padding-right:0;
    transition: all ease-in-out 0.3s;
  }

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

  .priceClass {
    position: absolute;
    z-index: 2;
    right: 10px;
    display: inline-block;
    color: #000;
    margin-top:0;
    font-weight: bold;
    }

  /* The Bags Button */
  .btnBags {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: auto;
    padding: 10px;
    font-size: 1.5em;
    transition: all ease-in-out 0.3s;
  }
  .btnBags, .btnOrder{
    color: #000;
    font-size: 1.5em;
    /*text-shadow: 1px 1px 1px rgba(0,0,0,0.3);*/
  }

  .customPartName {
    color: #000;
    font-weight: bold;
  }
  
  .btnBags:hover,
  .btnBags:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
  }
  

/* The Close Button */
.btnClose {
    color: #555;
    position: absolute;
    top: 0;
    right: 3px;
    width: auto;
    padding: 3px;
    font-size: 1.5rem;
  }
  
  .btnClose:hover,
  .btnClose:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
  }


/* The Material/Decal/Setting Button */
.btnMat, 
.btnDecal,
.btnMatAc, 
.btnDecalAc,
.btnSetting, 
.btnSettingAc,
.btnSearch,
.btnSearchAc {
  display: inline-block;
  font-size: 1.5rem;
  z-index: 10;
  width: 22%;
  /*position: absolute;
  top: 0;
  width: auto;
  
  */
}

.btnSearch,
.btnSearchAc{
  padding-left: 5px;
}

.btnMat, 
.btnDecal,
.btnSetting,
.btnSearch,
#search_icon {
  color: #555;
}

.btnMatAc, 
.btnDecalAc,
.btnSettingAc,
.btnSearchAc {
  color: white;
}

.btnMatAc:hover, 
.btnDecalAc:hover,
.btnSettingAc:hover,
.btnSearchAc:hover {
  cursor: none;
}

.btnMat, .btnMatAc {
  left: 17%;
}

.btnDecal, .btnDecalAc {
  left: 43%;
}

.btnSetting, .btnSettingAc {
  left: 59%;
}
#btnPreNextGrpThumbsID{
  position: absolute;
  left: 50%; 
  height: 24px; 
  width: 160px; 
  text-align: center; 
  vertical-align: middle; 
  transform: translate(-50%,-5%); 
  z-index: 3;
  bottom: 5%;
}

#btnPreNextGrpID{
  position: absolute; 
  bottom: 0; left: 50%; 
  height: 24px; 
  width: 160px; 
  text-align: center; 
  vertical-align: middle; 
  transform: translate(-50%,-50%); 
  z-index: 3;
}
/*.btnMat:hover, .btnDecal:hover
{
  color: white;
  cursor: pointer;
}*/



  /* Hide the slides by default */
  .mySlides {
    display: none;
  }

  /* Add a pointer when hovering over the thumbnail images */
.cursor {
    cursor: pointer;
  }
  
.rowThumb:after {
  content: "";
  display: table;
  clear: both;
}
  

  .columnThumb {
  position: absolute;
  /*float: left;*/
  bottom: 0;
  padding: 10px;
  width: 10%;
}
  
  
  /* Add a transparency effect for thumnbail images */
  .demoThumb {
    opacity: 0.5;
  }
  
  .activeThumb,
  .demoThumb:hover {
    opacity: 1;
  }

  .loader-progress-wrapper {
    position: absolute;
    left: 40%;
    top: 30%;
    width: 20vw;
    height: 20px;
    background: #000;
    border: 2px solid white;
    z-index: 70;
  }
  .loader-progress-progress {
    position: absolute;
    width: 0;
    height: 90%;
    background: green;
    z-index: 70;
  }

  .loader-percent {
    position: absolute;
    left: 42%;
    top: -50px;
    font-size: 3rem;
    color: green;
    z-index: 71;
  }

  /*--------Customize Page--------*/
.settingGroup{
  margin-top: 2%;
  padding-left:5%;
}
/*---search function---*/
#fsearch{
  /*display:none;*/
  position: absolute;
  top: 40px;
  left: 6%;
  width: 85%;
  background: none;
  border: none;
  border-bottom: 1.5px solid #555;
  border-radius: none;
  color:#ccc;
  z-index: 5;
}

#fsearch:focus{
  background: none;
  border: none;
  box-shadow: none;
  border-radius: none;
  border-bottom: 1.5px solid #fff;
  -webkit-background: none;
  -webkit-border: none;
  -webkit-box-shadow: none;
}

/*vo Tom*/
/*----------------------DESKTOP VERSION----------------------*/
  /*----Large screen----*/
  @media only screen and (min-width: 1800px){
    /* 6 columns*/
    .column {
      float: left;
      width: 16%;
      padding: 15px;
      position: relative;
      user-select: none;
      -webkit-user-select: none;
    }
    /*--------Image Page--------*/
    #thumbsScreenID .columnFabric img,
    #thumbsScreenID .isClicked img{
      width: 100%;
    }
    .priceClass{
      top: 1%;
    }
    .btnOrder{
      top:3.3%;
    }

    /*--------Customize Page--------*/
    .matTab{
      position: absolute;
      color: #555;
      background-color: gray;
      z-index: 2;
      /*width: 250px;*/
      width: 15%;
      max-width: 300px;
      height: 100%;
      top: 0;
      overflow: hidden;
      /*margin-left: 0.5s; J27*/
      /*transition: all ease-in-out 0.5s;*/
    }
    
    .matTabs{
      position: absolute;
      width: 100%;
      height: 94%;
      bottom: 0;
      left: 0;
      transition: 0.3s all;
    }

    .heightDown{
      height: 90%;
    }

    /* Mat Modal Content */
    .mat-content, .whyNot{
      position: absolute;
      z-index:2;
      width: 95%;
      height: 100%;
      left: 5%;
      bottom: 0;
      overflow: scroll;
      overflow-x: hidden; /* Disable horizontal scroll */
      margin: 0 auto;
    }
    .whyNot{
      display: inline-block;
    }

    /*.whyNot{
      position: absolute;
      background-color: gray;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 95%;
      z-index: 3;
    }*/

    /* The Fabric grid: 3 equal columns*/
    .columnFabric,
    .isClicked {
      position: relative;
      /*float: left;*/
      /*width: 95%;
      height: 10%;*/
      padding: 5px;
    }
    /* Style the images inside the grid */
    .columnFabric img {
      width: 80px;
      height: auto;
      border-radius: 5px;
      /*border: 1px solid #51515151;*/
      /*opacity: 1;*/
      cursor: pointer;
      transition: all ease-in-out 0.25s;
    }

    .columnFabric img:hover {
      opacity: 0.8;
      transition: all ease-in-out 0.25s;
    }

    .isClicked img {
      width: 80px;
      height: auto;
      border-radius: 50%;
      border: 2px solid white;
      /*opacity: 1;*/
      transition: all ease-in-out 0.25s;
      /*cursor: pointer;*/
    }

    .isClicked text{
      display: block;
      position: absolute;
      left:38%;
      top: 5%;
      padding-left: 5px;
      line-height: 2em;
      transition: all ease-in-out 0.3s;
      white-space: pre-wrap;
      /*font-size: 17px;*/
    }

    .fabricPrice{
      position: absolute;
      top: 5px;
      left: 100px;
      font-size: 14px;
      color: gray;
    }
    .isClicked{
      color: #ccc;
    }

    .columnFabric .matText{
      display: block;
      position: absolute;
      /*vertical-align: top;*/
      left:36%;
      top: 5%;
      padding-left: 5px;
      line-height: 2em;
      white-space: pre-wrap;
    }

    /*.columnFabric .fabricPrice {
      top: 25px;
      font-size: 13px;
    }*/

    #fsearch{
      left: 7%;
    }
    
    .priceClass{
      font-size: 1.5em;
    }
    /* Next & previous buttons */
    .btnPrev,
    .btnNext {
      position: absolute;
      bottom: 0;
      color: #555;
      font-weight: bold;
      font-size: 20px;
    }
      
    /* Position the "next button" to the right */
    .btnPrev {
      /*left: 44%;*/
      left: 0;
    }

    .btnNext {
      /*right: 44%;*/
      right: 10px;
    }
    
    /* On hover, add a black background color with a little bit see-through */
    .btnPrev:hover,
    .btnNext:hover {
      color: white;
      text-decoration: none;
      cursor: pointer;
    }
    
    .customPartName {
      display: inline-block;
      font-size: 1.3rem;
    }

    #selectedBag{
      transform: translate(-50%);
      width:50vw; 
    }

    /* Setting buttons */
    #rotID, #briID, #bkgImgID, #fullID, #resetID{
      position: absolute;
      display: inline-block;
      text-align: center;
    }

    #rotID, #briID{
      width: 45%;
    }

    #rotID, #fullID{
      left: 0;
    }

    #briID, #resetID{
      right: 0;
    }

    #bkgImgID{
      top: 10%;
      width: 100%;
      left: 0;
    }

    #fullID, #resetID{
      top: 23%;
      width: 45%;
    }

    #rotID p,
    #briID p,
    #bkgImgID p,
    #fullID p,
    #resetID p{
      margin-top: 15px;
    }
    #fullID div,
    #resetID div{
      padding: 5px;
    }
    /* End of Setting buttons */

  }/*end Query Desktop Large Size*/

  /*----Big screen----*/
  @media only screen and (min-width: 1025px) and (max-width: 1799px){
    /* 6 columns*/
    .column {
      float: left;
      width: 20%;
      padding: 15px;
      position: relative;
      user-select: none;
      -webkit-user-select: none;
    }

    /*--------Image Page--------*/
    #thumbsScreenID .columnFabric img,
    #thumbsScreenID .isClicked img{
      width: 120%;
    }
    .priceClass{
      top: 1%;
      font-size: 1.5em;
    }
    .btnOrder{
      top:3%;
    }

    /*--------Customize Page--------*/
    .matTab{
      position: absolute;
      z-index: 2;
      width: 24%;
      max-width: 300px;
      height: 100%;
      top: 0;
      overflow: hidden;
      margin-left: 0.5s; /*J27*/
    }
    
    .matTabs{
      position: absolute;
      width: 100%;
      height: 94%;
      bottom: 0;
      left: 0;
      transition: 0.3s all;
    }

    .heightDown{
      height: 90%;
    }

    /* Mat Modal Content */
    .mat-content, .whyNot{
      position: absolute;
      z-index: 2;
      width: 96%;
      height: 100%;
      left: 4%;
      bottom: 0;
      overflow: scroll;
      overflow-x: hidden; /* Disable horizontal scroll */
    }
    .whyNot{
      display: inline-block;
    }

    /* The Fabric grid: 3 equal columns*/
    .columnFabric,
    .isClicked {
      position: relative;
      padding: 5px;
      -webkit-user-select: none;
    }

    .fabricPrice{
      position: absolute;
      top: 5px;
      left: 60px;
      font-size: 13px;
      color: gray;
    }

    .isClicked{
      font-size: 14px;
      color: #ccc;
    }

    .isClicked text, .columnFabric .matText{
      display: block;
      position: absolute;
      /*vertical-align: top;*/
      left:29%;
      top: 5%;
      padding-left: 5px;
      line-height: 2em;
      white-space: pre-wrap;
    }

    /*.columnFabric .fabricPrice {
      top: 25px;
      font-size: 13px;
    }*/

    /* Style the images inside the grid */
    .columnFabric img {
      width: 65px;
      height: auto;
      border-radius: 8px;
      /*border: 1px solid #51515151;*/
      opacity: 1;
      cursor: pointer;
      transition: all ease-in-out 0.25s;
    }

    .columnFabric img:hover{
      /*border-radius: 50%;*/
      opacity: 0.8;
      transition: all ease-in-out 0.25s;
    }
    .isClicked img {
      width: 65px;
      height: auto;
      border-radius: 50%;
      border: 2px solid white;
      opacity: 1;
      transition: all ease-in-out 0.25s;
      /*cursor: pointer;*/
    }


    /* Next & previous buttons */
    .btnPrev,
    .btnNext {
      position: absolute;
      bottom: 0;
      color: #555;
      font-weight: bold;
      font-size: 20px;
    }
      
    /* Position the "next button" to the right */
    .btnPrev {
      /*left: 44%;*/
      left: 0;
    }

    .btnNext {
      /*right: 44%;*/
      right: 10px;
    }
    
    /* On hover, add a black background color with a little bit see-through */
    .btnPrev:hover,
    .btnNext:hover {
      color: white;
      text-decoration: none;
      cursor: pointer;
    }
    
    .customPartName {
      display: inline-block;
      font-size: 1.3rem;
    }

    #selectedBag{
      top:30vh;
      transform: translate(-50%, -30%);
      height:85vh;  
    }

    /* Setting buttons */
    #rotID, #briID, #bkgImgID, #fullID, #resetID{
      position: absolute;
      display: inline-block;
      text-align: center;
    }

    #rotID, #briID{
      width: 45%;
    }

    #rotID, #fullID{
      left: 0;
    }

    #briID, #resetID{
      right: 0;
    }

    #bkgImgID{
      top: 10%;
      width: 100%;
      left: 0;
    }

    #fullID, #resetID{
      top: 23%;
      width: 45%;
    }

    #rotID p,
    #briID p,
    #bkgImgID p,
    #fullID p,
    #resetID p{
      margin-top: 15px;
    }
    #fullID div,
    #resetID div{
      padding: 5px;
    }
    /* End of Setting buttons */
  }/*end Query Desktop Big Size*/

  /*----Small screen----*/
  @media only screen and (min-width: 769px) and (max-width: 1024px){

    html, body{
      font-size: 13px;
    }
    /*----Product list Page----*/
    /* 5 columns*/
    .column {
      float: left;
      width: 24%;
      padding: 15px;
      position: relative;
      user-select: none;
      -webkit-user-select: none;
    }

    .priceClass{
      top: 1%;
      font-size: 1.5em;
    }
    .btnOrder{
      top:4.3%;
      font-size: 1.5em;
    }


    /*-------------------Rotate------------------*/
    #btnPreNextGrpThumbsID{
      bottom: 10%;
    }
    /*--------Image Page--------*/
    #nailID.desktop{
      top:18%;
      overflow: scroll;
      overflow-x: hidden;
    }
    #thumbsScreenID .desktop .columnFabric img,
    #thumbsScreenID .desktop .isClicked img{
      width: 80%;
    }

    .desktop .btnOrder{
      top:5%;
    }

    .desktop #btnPreNextGrpThumbsID{
      bottom: 15%;
    }
    
    /*--------Custom Page--------*/
    div.matTab.desktop{
      position: absolute;
      z-index: 2;
      width: 26%;
      max-width: 300px;
      height: 100%;
      top: 0;
      overflow: hidden;
      margin-left: 0.5s;
    }

    .desktop div.matTabs{
      position: absolute;
      width: 100%;
      height: 94%;
      bottom: 0;
      left: 0;
      transition: 0.3s all;
    }

    div.heightDown.desktop{
      height: 90%;
    }

    /* Mat Modal Content */
    div.desktop .mat-content,  div.desktop .whyNot{
      position: absolute;
      z-index: 2;
      width: 96%;
      height: 100%;
      left: 4%;
      overflow: scroll;
      overflow-x: hidden; /* Disable horizontal scroll */
    }

    div.desktop .whyNot #rotID,
    div.desktop .whyNot #briID,
    div.desktop .whyNot #bkgImgID,
    div.desktop .whyNot #fullID,
    div.desktop .whyNot #resetID{
      display: block;
      position: unset;
      width: 100%;
      text-align: left;
    }


    div.desktop .whyNot #fullID div,
    div.desktop .whyNot #resetID div{
      padding: 5px;
    }

    /* The Fabric grid: 3 equal columns*/
    div.desktop .columnFabric,
    div.desktop .isClicked {
      position: relative;
      display: block;
      width: auto;
      height: auto;
      top: auto;
      left: auto;
      padding: 5px;
      -webkit-user-select: none;
    }

    div.desktop .fabricPrice{
      position: absolute;
      top: 5px;
      left: 60px;
      font-size: 12px;
      color: gray;
    }

    div.desktop .isClicked{
      font-size: 14px;
      color: #ccc;
    }

    div.desktop .isClicked text, div.desktop .columnFabric .matText{
      vertical-align: top;
      padding-left: 5px;
      padding-top: 5px;
      display: inline-block;
    }

    /* Style the images inside the grid */
    div.desktop .columnFabric img{
      width: 65px;
      height: auto;
      border-radius: 8px;
      opacity: 1;
      cursor: pointer;
      transition: all ease-in-out 0.25s;
    }

    div.desktop .isClicked img {
      width: 65px;
      height: auto;
      border-radius: 50%;
      border: 2px solid white;
      opacity: 1;
      transition: all ease-in-out 0.25s;
    }

    /*-------------------Normal--------------------*/
    /*--------Image Page--------*/

    #imageList #nailID{
      bottom: 0;
      margin: 0 auto;
      text-align: center;
      width:100vw;
      height: auto;
    }

    #nailID .columnFabric,
    #nailID .isClicked{
      width: 15%;
    }

    /*--------Customize Page--------*/
    .matTab{
      position: fixed;
      z-index: 2;
      width: 100vw;
      height: 20%;
      bottom: 0;
      white-space: nowrap;
    }
    
    .matTabs{
      position: absolute;
      width: 100%;
      height: 75%;
      bottom: 0;
      left: 0;
      transition: 0.3s all;
    }

    .heightDown{
      height: 92%;
    }

    /* Mat Modal Content */
    .mat-content, .whyNot{
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
      bottom: 0;
      overflow-y: hidden;
      background-image: none;
      overflow-x: scroll;
    }
    .whyNot{
      display: inline-block;
    }

    /* The Fabric grid: 3 equal columns*/
    .columnFabric,
    .isClicked {
      position: relative;
      display:inline-block;
      bottom:0;
      width: 19%;
      height: 10%;
      padding: 0 5px 0 5px; 
      -webkit-user-select: none;
    }

    .fabricPrice{
      position: absolute;
      top: 5px;
      left: 60px;
      font-size: 14px;
      color: gray;
    }

    .isClicked{
      font-size: 14px;
      color: #CCC;
    }

    .isClicked text, .columnFabric .matText{
      display: block;
      /*left:32%;
      top: 5%;*/
      padding-left: 5px;
      line-height: 2em;
      white-space: pre-wrap;
    }

    /*.columnFabric .fabricPrice {
      top: 25px;
      font-size: 13px;
    }*/

    /* Style the images inside the grid */
    .columnFabric img {
      width: 90%;
      height: 500%;
      border-radius: 8px;
      /*border: 1px solid #51515151;*/
      opacity: 1;
      cursor: pointer;
      transition: all ease-in-out 0.25s;
    }

    .columnFabric img:hover{
      border-radius: 50%;
      transition: all ease-in-out 0.25s;
    }
    .isClicked img {
      width: 90%;
      height: 500%;
      border-radius: 50%;
      border: 2px solid white;
      opacity: 1;
      transition: all ease-in-out 0.25s;
      /*cursor: pointer;*/
    }

    .priceClass{
      font-size: 1.7em;
      top:1.5%;
    }
  
    /* Next & previous buttons */
    .btnPrev,
    .btnNext {
      position: absolute;
      bottom: 0;
      color: #555;
      font-weight: bold;
      font-size: 20px;
    }
      
    /* Position the "next button" to the right */
    .btnPrev {
      /*left: 44%;*/
      left: 0;
    }

    .btnNext {
      /*right: 44%;*/
      right: 10px;
    }
    
    /* On hover, add a black background color with a little bit see-through */
    .btnPrev:hover,
    .btnNext:hover {
      color: white;
      text-decoration: none;
      cursor: pointer;
    }
    
    .customPartName {
      display: inline-block;
      font-size: 1.5rem;
    }

    #selectedBag{
      top:30vh;
      transform: translate(-50%, -30%);
      height:75vh
    }
    /* Setting buttons */
    #rotID, #briID, #bkgImgID, #fullID, #resetID{
      position: absolute;
      display: inline-block;
      text-align: center;
    }

    #rotID, #briID{
      width: 20%;
    }

    #rotID, #fullID{
      left: 0;
    }

    #briID, #resetID{
      left: 23%;
    }

    #bkgImgID{
      width: 25%;
      left: 46%;
    }

    #fullID, #resetID{
      width: 10%;
    }

    #fullID{
      left: 75%;
    }

    #resetID{
      left: 88%;
    }

    /* End of Setting buttons */

  }/*end Query Desktop*/
  /*----------------------TABLET VERSION----------------------*/
  @media only screen and (min-width: 600px) and (max-width: 768px){
    html, body{
      font-size: 15px;
    }
    .column {
      float: left;
      width: 33%;
      padding: 15px;
      position: relative;
      user-select: none;
      -webkit-user-select: none;
    }
    .btnOrder{
      top:2.8%;
      font-size: 1.7em;
    }
    .priceClass{
      font-size: 1.7em;
      top: 0.8%;
    }
    /*Rotate*/
    .desktop .btnOrder{
      top: 6%;
    }
    /*--------Image Page--------*/
    .desktop #selectedBag{
      width:50vw;
      height: auto;
      top:30vh;
      transform: translate(-50%,-30%);
    }

    #imageList{
      width: 100%; 
    }

    #nailID.desktop{
      top:5%;
      width:auto;
      overflow: scroll;
      overflow-x: hidden;
      left:10%;
      transform: translateX(-10%);
    }

    /*#thumbsScreenID .desktop .columnFabric img,
    #thumbsScreenID .desktop .isClicked img{
      width: 120%;
    }*/

    .desktop #btnPreNextGrpThumbsID{
      bottom: 15%;
    }
    /*Customer Page*/
    div.matTab.desktop{
      position: absolute;
      z-index: 2;
      width: 30%;
      max-width: 300px;
      height: 100%;
      top: 0;
      overflow: hidden;
      margin-left: 0.5s;
    }

    div.matTab.desktop .matTabs{
      position: absolute;
      width: 100%;
      height: 90%;
      bottom: 0;
      left: 0;
      transition: 0.3s all;
    }

    div.matTab.desktop .matTabs.heightDown{
      height: 82%;
    }

    /* Mat Modal Content */
    div.desktop .mat-content {
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
      bottom: 0;
      overflow: scroll;
      overflow-x: hidden; /* Disable horizontal scroll */
    }

    div.desktop #fsearch{
      top: 8%;
    }

    /* The Fabric grid: 3 equal columns*/
    div.desktop .columnFabric,
    div.desktop .isClicked {
      position: relative;
      display: block;
      width:auto;
      height:auto;
      top:auto;
      left:auto;
      padding: 5px;
      -webkit-user-select: none;
    }

    div.desktop .fabricPrice{
      position: absolute;
      top: 5px;
      left: 60px;
      font-size: 12px;
      color: gray;
    }

    div.desktop .isClicked{
      font-size: 14px;
      color: #CCC;
    }

    div.desktop .isClicked text, div.desktop .columnFabric .matText{
      vertical-align: top;
      padding-left: 5px;
      padding-top:5px;
      display:inline-block;
    }

    /* Style the images inside the grid */
    div.desktop .columnFabric img {
      width: 65px;
      height: 65px;
      border-radius: 8px;
      /*border: 1px solid #51515151;*/
      opacity: 1;
      cursor: pointer;
      transition: all ease-in-out 0.25s;
    }

    div.desktop .isClicked img {
      width: 65px;
      height: 65px;
      border-radius: 50%;
      border: 2px solid white;
      opacity: 1;
      transition: all ease-in-out 0.25s;
      /*cursor: pointer;*/
    }

    /* Setting buttons */
    div.desktop #rotID, 
    div.desktop #briID, 
    div.desktop #bkgImgID
    {
      display: block;
      text-align: center;
    }

    div.desktop #bkgImgID,
    div.desktop #rotID, 
    div.desktop #briID{
      position: relative;
    }
    
    div.desktop #bkgImgID p{
      display: none;
    }
     
    div.desktop #fullID, 
    div.desktop #resetID{
      position: absolute;
    }

    div.desktop #rotID, 
    div.desktop #briID{
      width: auto;
    }

    div.desktop #rotID{
      left: 0;
    }

    div.desktop #briID{
      right: 0;
    }

    div.desktop #bkgImgID{
      top: 13%;
      width: 80%;
      left: 0;
      margin-top: 15px;
    }

    div.desktop #fullID, 
    div.desktop #resetID{
      top: 48%;
      width: 48%;
    
    }

    div.desktop #fullID{
      left: 0;
    }
    
    div.desktop #resetID{
      right: 0;
    }

    /* End of Setting buttons */

    /*Normal*/
    /*------Image Page------*/
    #selectedBag{
      height:55vh;
      width: auto;
      top:40vh;
      transform: translate(-50%,-40%);
    }
    /*
    #imageList{
      width: 100%; 
    }*/
    #nailID{
      bottom: 2%;
      left:0;
      margin: 0 auto;
      text-align: center;
    }
    #btnPreNextGrpThumbsID{
      bottom: 20%;
    }
    /*--------Customize Page--------*/
    .matTab{
      position: fixed;
      z-index: 2;
      width: 100vw;
      height: 17%;
      bottom: 0;
      white-space: nowrap;
    }
    
    .matTabs{
      position: absolute;
      width: 100%;
      height: 75%;
      bottom: 0;
      left: 0;
      transition: 0.3s all;
    }

    .heightDown{
      height: 82%;
    }

    /* Mat Modal Content */
    .mat-content {
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
      bottom: 0;
      overflow-y: hidden;
      background-image: none;
      overflow-x: scroll;
    }

    /* The Fabric grid: 3 equal columns*/
    .columnFabric,
    .isClicked {
      position: relative;
      display:inline-block;
      top: 15px;
      width: 16%;
      height: 10%;
      padding: 0 5px 0 5px; 
      -webkit-user-select: none;
    }
    
    .fabricPrice{
      position: absolute;
      bottom: 10px;
      left: 100px;
      font-size: 14px;
      color: #ccc;;
    }

    /* Style the images inside the grid */
    .columnFabric img {
      width: 95%;
      height: 500%;
      border-radius: 8px;
      /*border: 1px solid #51515151;*/
      opacity: 1;
      cursor: pointer;
      transition: all ease-in-out 0.5s;
    }

    .matText{
      display: block;
      font-size: 13px;
      white-space: pre-wrap;
      position: absolute;
      text-transform: uppercase;
    }
    .isClicked img {
      width: 95%;
      height: 500%;
      border-radius: 50%;
      border: 2px solid white;
      opacity: 1;
      transition: all ease-in-out 0.25s;
    }

    /*.isClicked text, .columnFabric .matText{
      vertical-align: top;
      padding-left: 5px;
    }*/

    .isClicked {
      color:#ccc;
      transition: all ease-in-out 0.25s;
    }

    #fsearch{
      width: 95%;
      top: 40px;
      left: 5px;
    }
      
    /* Next & previous buttons */
    .btnPrev,
    .btnNext {
      position: absolute;
      /*! bottom: 40%; */
      color: #555;
      font-weight: bold;
      font-size: 20px;
      display: inline-block;
    }
      
    /* Position the "next button" to the right */
    .btnPrev {
      /*left: 44%;*/
      left: 0;
    }

    .btnNext {
      /*right: 44%;*/
      right: 10px;
    }
  
    /* On hover, add a black background color with a little bit see-through */
    .btnPrev:hover,
    .btnNext:hover {
      color: white;
      text-decoration: none;
      cursor: pointer;
    }
  
    .customPartName {
      display: inline-block;
      font-size: 1.2rem;
    }
    /* Setting buttons */
    #rotID, #briID{
      position: absolute;
      display: block;
      text-align: center;
    }


    #rotID, #briID{
      width: 40%;
      left:0;
    }
    #briID{
      top: 50%;
    }

    #rotID, #bkgImgID{
      top: 0;
    }

    #fullID, #bkgImgID{
      left: 50%;
    }

    #bkgImgID{
      width: 25%;
      left: 50%;
      display: block;
      top: 0;
      position: absolute;
    }

    #fullID, #resetID{
      width: 10%;
      display: block;
      position: absolute;
      top: 50%;
    }

    #fullID p, #resetID p{
      display: none;
    }

    #resetID{
      left: 70%;
    }
    /* End of Setting buttons */
  }/*end Query Tablet*/

  /*----------------------MOBILE VERSION----------------------*/
  @media only screen and (max-width: 599px) and (min-width: 300px){
    html, body{
      font-size: 16px;
    }
    .column {
      float: left;
      width: 50%;
      padding: 10px;
      position: relative;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Position the "next button" to the right */
    div.btnPrev {
      left: 0;
    }

    div.btnNext {
      right: 0;
    }

    .priceClass{
      font-size: 1.2em;
    }

    /*Rotate*/
    /*--------Image Page--------*/
    .desktop #selectedBag{
      height: 85vh;
      width:auto;
      top:30vh;
      transform: translate(-50%,-30%);
    }

    #imageList{
      width: 100%; 
    }

    #nailID.desktop{
      top:4%;
      left:15%;
      width:auto;
      overflow-x: hidden;
      background-image: none;
      overflow-y: scroll;
      transform: translateX(-15%);
    }

    .desktop #btnPreNextGrpThumbsID{
      bottom: 15%;
    }
    /*Customer Page*/
    div.matTab.desktop{
      position: absolute;
      z-index: 2;
      width: 27%;
      max-width: 300px;
      height: 100%;
      top: 0;
      overflow: hidden;
      margin-left: 0.5s;
    }

    div.matTabs.desktop{
      position: absolute;
      width: 100%;
      height: 95%;
      bottom: 0;
      left: 0;
      transition: 0.3s all;
    }

    div.heightDown.desktop{
      height: 90%;
    }

    /* Mat Modal Content */
    div.desktop .mat-content {
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
      bottom: 0;
      overflow: scroll;
      overflow-x: hidden; /* Disable horizontal scroll */
    }

    /* The Fabric grid: 3 equal columns*/
    div.desktop .columnFabric,
    div.desktop .isClicked {
      position: relative;
      display: block;
      width:auto;
      height:auto;
      top:auto;
      left:auto;
      padding: 5px;
      -webkit-user-select: none;
    }

    div.desktop .fabricPrice{
      position: absolute;
      top: 5px;
      left: 60px;
      font-size: 12px;
      color: gray;
    }

    div.desktop .isClicked{
      font-size: 14px;
      color: #CCC;
    }

    div.desktop .isClicked text, div.desktop .columnFabric .matText{
      vertical-align: top;
      padding-left: 5px;
      padding-top:5px;
      display:inline-block;
    }

    /* Style the images inside the grid */
    div.desktop .columnFabric img {
      width: 65px;
      height: 65px;
      border-radius: 8px;
      /*border: 1px solid #51515151;*/
      opacity: 1;
      cursor: pointer;
      transition: all ease-in-out 0.25s;
    }

    div.desktop .isClicked img {
      width: 65px;
      height: 65px;
      border-radius: 50%;
      border: 2px solid white;
      opacity: 1;
      transition: all ease-in-out 0.25s;
      /*cursor: pointer;*/
    }

    /*Normal*/
    /*--------Image Page--------*/
    #selectedBag{
      width:95vw;
      top:30vh;
      transform: translate(-50%,-30%);
    }

    #imageList{
      width: 100%; 
    }
    div#nailID{
      bottom: 0;
      left:0;
      margin: 0 auto;
      text-align: center;
      overflow-y: hidden;
      background-image: none;
      overflow-x: scroll;
      white-space: nowrap;
      padding-left: 0;
    }

    div#nailID img{
      margin-bottom: 15px;
    }
    .thumbImg, #clickedImg{
      display: inline-block;
    }

    #priceID{
      top:2%;
    }
    .btnOrder{
      top:3.5%;
    }
    #btnPreNextGrpThumbsID{
      bottom: 20%;
    }

    /*--------Customize Page--------*/
    .matTab{
      position: fixed;
      z-index: 2;
      width: 100vw;
      height: 26%;
      bottom: 0;
      white-space: nowrap;
    }
    
    .matTabs{
      position: absolute;
      width: 100%;
      height: 77%;
      bottom: 0;
      left: 0;
      transition: 0.3s all;
    }

    .heightDown{
      height: 64%;
    }

    /* Mat Modal Content */
    .mat-content {
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
      bottom: 0;
      overflow-y: hidden;
      background-image: none;
      overflow-x: scroll;
    }
    /* The Fabric grid: 3 equal columns*/
    .columnFabric,
    .isClicked {
      display:inline-block;
      position: relative;
      top: 15px;
      width: 28%;
      height: 10%;
      padding: 0 5px 0 5px; 
      -webkit-user-select: none;
    }
    
    .fabricPrice{
      position: absolute;
      bottom: 10px;
      left: 100px;
      font-size: 14px;
      color: #ccc;;
    }

    /* Style the images inside the grid */
    .columnFabric img {
      width: 95%;
      height: 500%;
      border-radius: 8px;
      /*border: 1px solid #51515151;*/
      opacity: 1;
      cursor: pointer;
      transition: all ease-in-out 0.5s;
    }

    .matText{
      display: block;
      font-size: 13px;
      white-space: pre-wrap;
      position: absolute;
      text-transform: uppercase;
    }
    .isClicked img {
      width: 95%;
      height: 500%;
      border-radius: 50%;
      border: 2px solid white;
      opacity: 1;
      transition: all ease-in-out 0.25s;
    }

    .isClicked text, .columnFabric .matText{
      vertical-align: top;
      padding-left: 5px;
    }

    .isClicked {
      color:#ccc;
      transition: all ease-in-out 0.25s;
    }

    #fsearch{
      top:24%;
      left: 25px;
    }
      
    /* Next & previous buttons */
    .btnPrev,
    .btnNext {
      position: absolute;
      bottom: 0;
      color: #555;
      font-weight: bold;
      font-size: 20px;
    }
      
    /* Position the "next button" to the right */
    .btnPrev {
      /*left: 44%;*/
      left: 0;
    }

    .btnNext {
      /*right: 44%;*/
      right: 10px;
    }
  
    /* On hover, add a black background color with a little bit see-through */
    .btnPrev:hover,
    .btnNext:hover {
      color: white;
      text-decoration: none;
      cursor: pointer;
    }
  
    .customPartName {
      display: inline-block;
      font-size: 1.1rem;
    }

    .whyNot{
      display: inline-block;
    }

    /* Setting buttons */
    #rotID, #briID, #bkgImgID, #fullID, #resetID{
      position: absolute;
      display: inline-block;
      text-align: center;
    }

    #rotID, #briID{
      top: 0;
      width: 45%;
    }

    #rotID
    {
      left: 0;
    }
    #briID
    {
      right: 0;
    }

    #bkgImgID{
      top: 32%;
      left: 0;
      width: 100%;
      font-size: 0.9em;
    }

    #fullID, #resetID{
      top: 56%;
      width: 45%;
    }

    #fullID{
      left: 0;
    }

    #resetID{
      right: 0;
    }

    #rotID p, #briID p{
      margin: 0;
      font-size: 0.9em;
    }

    #bkgImgID p, #fullID p, #resetID p{
      top: 0;
      margin-top: 0;
      margin-bottom: 8px;
      display: none;
    }
    /* End of Setting buttons */

  }/*end Query Mobile*/


/*----------------------SMALL MOBILE VERSION----------------------*/
@media only screen and (max-width: 299px){
  html, body{
    font-size: 14px;
  }
  .column {
    float: left;
    width: 95%;
    padding: 10px;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Position the "next button" to the right */
  div.btnPrev {
    left: 0;
  }

  div.btnNext {
    right: 0;
  }

  /*--------Customize Page--------*/
  .matTab{
    position: fixed;
    z-index: 2;
    width: 100vw;
    height: 26%;
    bottom: 0;
    white-space: nowrap;
  }
  
  .matTabs{
    position: absolute;
    width: 100%;
    height: 94%;
    bottom: 0;
    left: 0;
    transition: 0.3s all;
  }

  .heightDown{
    height: 90%;
  }

  /* Mat Modal Content */
  .mat-content {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    bottom: 0;
    overflow-y: hidden;
    background-image: none;
    overflow-x: scroll;
  }
  /* The Fabric grid: 3 equal columns*/
  .columnFabric,
  .isClicked {
    position: relative;
    top: 15px;
    width: 28%;
    height: 10%;
    padding: 0 5px 0 5px; 
    -webkit-user-select: none;
  }
  
  .fabricPrice{
    position: absolute;
    bottom: 10px;
    left: 100px;
    font-size: 14px;
    color: #ccc;;
  }

  /* Style the images inside the grid */
  .columnFabric img {
    width: 95%;
    height: 500%;
    border-radius: 8px;
    /*border: 1px solid #51515151;*/
    opacity: 1;
    cursor: pointer;
    transition: all ease-in-out 0.5s;
  }

  .matText{
    display: none;
    /*font-size: 13px;
    white-space: pre-wrap;
    position: absolute;
    text-transform: uppercase;*/
  }
  .isClicked img {
    width: 95%;
    height: 500%;
    border-radius: 50%;
    border: 2px solid white;
    opacity: 1;
    transition: all ease-in-out 0.25s;
  }

  .isClicked {
    color:#ccc;
    transition: all ease-in-out 0.25s;
  }

  #fsearch{
    top:24%;
    left: 25px;
  }
    
  /* Next & previous buttons */
  .btnPrev,
  .btnNext {
    position: absolute;
    bottom: 0;
    color: #555;
    font-weight: bold;
    font-size: 20px;
  }
    
  /* Position the "next button" to the right */
  .btnPrev {
    /*left: 44%;*/
    left: 0;
  }

  .btnNext {
    /*right: 44%;*/
    right: 10px;
  }

  /* On hover, add a black background color with a little bit see-through */
  .btnPrev:hover,
  .btnNext:hover {
    color: white;
    text-decoration: none;
    cursor: pointer;
  }

  .customPartName {
    display: inline-block;
    font-size: 1.0rem;
  }

  .btnMat, 
  .btnDecal,
  .btnMatAc, 
  .btnDecalAc,
  .btnSearch {
    padding: 3px 10px 3px 10px;
    transition: all ease-in-out 0.3s;
  }

  #btnMatID, 
  #btnDecalID,
  #btnSettingID,
  #searchGroup{
    width: 21%;
  }

  /*Image Page*/
  #selectedBag{
    width:80vw;
    top:40vh;
    transform: translate(-50%,-40%);
  }

  #imageList{
    width: 100%; 
  }
  #nailID{
    bottom: 8%;
    margin: 0 auto;
    text-align: center;
  }

  div.btnOrder{
    top:9%;
  }
  .priceClass{
    font-size: 1.1em;
  }
  .thumbImg, #clickedImg{
    display: inline-block;
  }

  /* Setting buttons */
  #rotID, #briID, #bkgImgID, #fullID, #resetID{
    position: absolute;
    display: inline-block;
    text-align: center;
  }

  #rotID{
    top: 35px;
    width: 45%;
    left: 0;
  }

  #briID{
    top: 35px;
    width: 45%;
    right: 0;
  }

  #bkgImgID{
    top: 120px;
    width: 100%;
    left: 0;
  }

  #fullID{
    top: 250px;
    width: 45%;
    left: 0;
  }

  #resetID{
    top: 250px;
    width: 45%;
    right: 0;
  }
  /* End of Setting buttons */
}/*end Query Small Mobile*/
  

.slider {
  position: relative;
  width: 90%;
  /*! height: 3px; */
  background: #222;
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

  
/*Image Page*/
#selectedBag{
  position: relative;
  left: 50%;
}

#imageList{
  position: absolute; 
  height: 100vh; 
  left: 0; 
  top: 0; 
  z-index: 3; 
  display: block;
}


#nailID{
  position: absolute;
  width: 100%; 
  display: block; 
  padding: 10px;
}

/*div#nailID.desktop{
  position: absolute;
  left: 5px;
  z-index: 2;
  width: 15%;
  max-width: 300px;
  height: 100%;
  overflow: scroll;
  bottom: 5px;
  margin-left: 0.5s;
}*/

.hideClass{
  display: none;
}