@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,500&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Times New Roman", Times, serif;
    /* transition: all 5s ease-in-out; */
}
body{
    background-color: #000;
    overflow-x: hidden;

    
    box-sizing: border-box;
}
.container1{
    height: 100vh;
    display: flex;
    flex-direction: column;

}

.header{
    background-color:#222121;
    width: 100%;
    height: 107px;
    
  
    
}
.fa-solid{
    display: none;
}
#log{
    font-size: 50px;
}
.inner-content{
  
    width: 100%;
    /* flex-grow: 1; */
      /* background-image: url(images/background.PNG);background-position: center;background-size: cover;background-repeat: no-repeat; */
      /* border: 1px solid red; */
     height: calc(100vh - 107px);
      /* display: flex; */
      position: relative;
     
      
    
}
.header nav{
    width: 95%;
    margin: 0 auto;
     display: flex;
    justify-content: space-between;
    align-items: center;
    padding:20px 0px;

}
.header nav i{
    font-size: 40px;
    color:#fff;
}
.logoimage{
       max-width: 235px
}
.logoimage img{
    width: 100%;
}



.content{

    height: 100%;
    /* border: 2  px solid rgba(0, 255, 221, 0.76); */
    width: 80px;
    /* left: 0; */
   background: #222121;
   top: 0;
   

   /* opacity: 0.2; */
   
   position: absolute;
}

#content-element{
    /* position: absolute;
    top: 50%;
    transform: translateY(-50%); */
    width: 100%;
    height: 100%;
 
}
.image{
    width: 40px ;
   margin: 40px 20%;
   text-align: center;
   
    
}

.image img{
    width: 100%;
    cursor: pointer;
 opacity: 0.5;
   
    
}
.imagecontent{
    font-size: 12px;
    color: #fff;
    margin: 5px auto;
    text-align: center;
    font-weight: bold;
}
#secondbox{
    background-color: #424242;
   opacity: 0.8;
   overflow-y: scroll;
   height: 100%;
   scrollbar-width: none;
  
   position: absolute;
   left: -1000px;
   transition: all 1s ease-in-out;

}

/* ///////////27///////// */
#firstbox{
    overflow-y: scroll;
    scrollbar-width: none;
}
#firstbox::-webkit-scrollbar{
    display: none;
}

/* //////////////////27//////////// */
#fourthbox{
    background-color: #828282;
    opacity: 0.8;
    overflow-y: scroll;
    height: 100%;
    scrollbar-width: none;
 
    position: absolute;
    left: -1000px;
    transition: all 1s ease-in-out;
}
#fifthbox{
    background-color: #8e8e8e;
    opacity: 0.8;
    overflow-y: scroll;
    height: 100%;
    scrollbar-width: none;
position: absolute;
    left: -1000px;
    transition: all 1s ease-in-out;

}
#secondbox::-webkit-scrollbar{
    display: none ;
}



.secoondimages{
    width: 100% ;
    
  

}
.secoondimages img{
    width: 100%;
   
    
} 
#thirdbox{
    background-color: #616161;
    opacity: 0.8;
    overflow-y: scroll;
    height: 100%;
    scrollbar-width: none;
   
    position:absolute;
   left: -1000px;
    transition: all 1s ease-in-out;

}
#thirdbox::-webkit-scrollbar{
    display: none ;
}
#fourthbox::-webkit-scrollbar{
    display: none ;
}
#fifth::-webkit-scrollbar{
    display: none ;
}
.colorElement{
    width: 50px;
    margin: 20px auto;
}

.active{

    display: block !important;
}
#content-element1,#content-element2,#content-element3,#content-element4{
  height: 100%;
  width: 100%;
}
.seconddivouter{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.secondiv{
    color: #fff;
    margin: 10px auto;
    cursor: pointer;
}
#sixthinnerdiv,#eightinnerdiv,#wheelthirdinnerdiv,#innerfirstboxdiv,#innerthirdboxdiv,#innerwheelboxdiv,#rearsuspension{
    position: absolute;
    top: 50%;
    text-align: center;
    font-weight: bolder;color: #fff;
    padding: 0px 10px;
    font-size: 14px;
    transform: translateY(-50%);

}
#outerseconddiv,#forkinnerdiv{
    position: absolute;
    top: 50%;
    text-align: center;
    font-weight: bolder;color: #fff;
    padding: 0px 20px;
    font-size: 14px;
     transform: translateY(-50%);

}
#innersecondboxdiv{
    position: absolute;
    top: 50%;
    text-align: center;
    font-weight: bolder;color: #fff;
    padding: 0px 30px;
    font-size: 30px;
    transform: translateY(-50%);
    
}
#tenthinnerdiv{
    position: absolute;
    top: 50%;
    text-align: center;
    font-weight: bolder;color: #fff;
    padding: 0px 10px;
    font-size: 14px;
     transform: translateY(-50%);

}
.userinter{
    position: absolute;
    top: 50%;
    text-align: center;
    font-weight: bolder;color: #fff;
    padding: 0px 15px;
    font-size: 14px;
    transform: translateY(-50%);
}
.wheelfirst{
    position: absolute;
    
    top: 50%;
    text-align: center;
    font-weight: bolder;color: #fff;
    padding: 0px 15px;
    font-size: 14px;
    transform: translateY(-50%);
}


.firstICon{
    margin-bottom: 30px;
    border-bottom: 2px solid #fff;
}


#headlightfirstoption,#sixth0,#ninth0,#ninth1,#ninth2,#handleoptionsecond,#Rims,#hubs,#handleoptionfirst,#showa_fork,#ohlims_fork,#NoHump,#hump{
    border-bottom: 2px solid #fff;
    line-height: 100px;
    cursor: pointer;
    text-align: center;
}
#headlightsecondoption,#sixth1,#ninth3{
    line-height: 100px;
    border-bottom: 2px solid #fff;

}
/* {
     border-bottom: 2px solid #fff; margin: 32px 0px;
     line-height: 20px;
     cursor: pointer;
   
     
} */
.leftIcon{
    opacity: 1 !important;
}

.firstoption,.wheeloption,.rearsusp{
    margin-bottom: 30px;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 1px solid #fff;
    color: #fff;
}
.userinter{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0px 15px;
}

.secondcls{
    left: 80px !important;
}
.thirdcls{
    left: 160px !important;
}
.fourthcls{
    left: 240px !important;
}
.fifthcls{
    left: 320px;
}

.contentwidth{
    width:max-content !important ;
    
}
.color_parent{
 position: relative;
top: 50%;
transform: translateY;
transform: translateY(-50%);
}
/*//////////////////form cs/////////////////////""*/
#modelbtn{
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #222121;
    border: none;
    outline: none;
    padding: 10px 30px;
    color: #fff !important;
  
}
label{
    color: #fff;
    font-family: 'Roboto', sans-serif;
}
#modelbtn:focus{
    box-shadow: none;
}
.modal-content{
    background-color: #222121;
   
}
.form-control{
    opacity: 0.7;
    border: 1px solid #000;
    /* box-shadow: 0 5px 10px rgba(0,0,0,0.2); */
}
.form-control:focus{
   box-shadow: none;
}
#exampleModalLabel{
    color: #fff;
    font-family: 'Roboto', sans-serif;
   
}
.btn-close{
    color: #fff;
}
.form-check-input:focus {
  border-color:  #222121;
  outline: 0;
  /*box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);*/
}
.form-check-input:checked {
  background-color: #0b0a0a;
  border-color: #1c1919;
}
@media(max-width:576px){
    .firstoption p{
        margin-bottom: 0 !important;
        font-size: 10px;
    }
      #modelbtn{
       top:10px;
       bottom: unset !important;
       right: 10px;
       bottom: unset;
    }
        .contentwidth {
        width: 100% !important;
        height: 240px !important ;
        
      }  
      .color_parent{
          position: relative;
          left:20%;
      }
        .inner-content{
         height: calc(95vh - 107px) !important;
    }
     .contentwidth {
        width: 100% !important;
        height: 250px !important ;
        
      } 
   .content,#secondbox,#thirdbox,#fourthbox,#fifthbox{
     height: 80px;
     overflow-x: scroll;
     scrollbar-width: none;
     width: 100%;
     left: 0;
     overflow-y: hidden;
     
     position: absolute !important;
   }
   #firstbox{
    height: 80px;
    overflow-x: scroll;
    scrollbar-width: none;
    width: 100%;
    left: 0;
    bottom: 0px !important;
    position: absolute !important;
    overflow-y: hidden;

   }
   #secondbox{
    bottom: 80px !important;
    display: none;
   }
   #thirdbox{
    bottom: 160px !important;
    display: none;
   }
   #fourthbox{
    bottom: 240px !important;
    display: none;
   }
   #fifthbox{
    bottom: 320px !important;
    display: none;
   }
   .secondcls{
    display: block !important;
    left: 0 !important;
}
.thirdcls{
    display: block !important;
    left: 0 !important;
}
.fourthcls{
    display: block !important;
    left: 0 !important;
}
.fifthcls{
    display: block !important;
    left: 0 !important;
}
 

   #innerfirstboxdiv,#innersecondboxdiv,#innerwheelboxdiv,#content-element2,#content-element3,#content-element4,#sixthinnerdiv, #forkinnerdiv, #eightinnerdiv, #wheelthirdinnerdiv,#outerseconddiv, #innerfirstboxdiv, #innerthirdboxdiv, #innerwheelboxdiv, #rearsuspension{
    position: absolute;
    top: 40%;
    display: grid;
    grid-auto-flow: column;
    left: 40%;
    transform: translate(-40% , -40%);

   }
   #content-element{
    position: absolute;
    display: grid;
    grid-auto-flow: column;
    left: 40%;
    transform: translateX(-40%)

   }
 #innersecondboxdiv{
     gap:0px 30px
 }
   .image{
    width: 40px;
    margin: 20px 15px;
   }
.wheeloption{
    margin-left: 25px;
    margin-bottom: 0px;
    line-height: normal;
}
.colorElement{
    width: 40px !important;
     margin: 4px auto;
}
#headlightfirstoption,#headlightsecondoption,#sixth0,#ninth0,#ninth1,#ninth2,#handleoptionsecond,#handleoptionfirst,#showa_fork,#ohlims_fork,#NoHump,#hump,#Rims,#eadlightsecondoption,#sixth1,#hubs,#ninth3,#hubs,#rims.rearsuspension{
    line-height: normal;
    margin-left: 30px;
    /* border-bottom: 1px solid white; */
}
.firstoption,.rearsusp{
    margin-bottom: 0;
    margin-left: 30px;
    
}
.fa-solid{
    display: block;
}
.content{
    top:unset !important;
}
.userinter{
position: absolute;
top: 40%;
text-align: center;
font-weight: bolder;
color: #fff;
padding: 0px 10px;
font-size: 20px;
display: grid;
flex-direction: row;
left: 50%;
transform: translate(-50%,-40%);
grid-auto-flow: column;
gap:0px 30px;
}
.wheelfirst{
    position: absolute;
top: 40%;
text-align: center;
font-weight: bolder;
color: #fff;
padding: 0px 10px;
font-size: 20px;
display: grid;
flex-direction: row;


transform: translateY(-40%);
grid-auto-flow: column;
gap:0px 30px;

}

#content-element1,#eightinnerdiv{
    position: absolute;
top: 40%;
text-align: center;
font-weight: bolder;
color: #fff;
padding: 0px 10px;

display: grid;
flex-direction: row;
left: 40%;
transform: translate(-40%,-40%);
grid-auto-flow: column;
gap:0px 30px
   }
    #rearsuspension{
        gap:0px 30px
    }
  



    .imagecontent {
        font-size: 8px;
        color: #fff;
        margin: 0px auto;
        text-align: center;
        font-weight: bold;
      }
}