*{
   padding: 0px;
   margin: 0px;
}

body{
   background-color: #ffffff;
   overflow-y: auto;
}

.header{
   height: 50px;
   width: -webkit-fill-available;
   background-color: rgb(255, 255, 255);
   padding: 0px 20px;
   top: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: fixed;
   z-index: 1;
   box-shadow: 0 2px 4px 0 rgb( 0 0 0 / 10%), 0 1px 0 0 rgb(0 0 0 / 10%);
}

 .msg{
         background: #00000063;
         border: 1px solid rgb(138 138 138);
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 8px;
         padding: 5px 30px;
         font-family: sans-serif;
         position: absolute;
         top: 0;
         width: -webkit-fill-available;
         height: -webkit-fill-available;
         z-index: 3;
      }

.logo{
   font-size: x-large;
   font-family: sans-serif;
   display: flex;
   align-items: center;
   justify-content: center;

}

.input-form{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   margin: 50px 0px 40px 0px;
   background-color: #fff;
}

@media screen and (min-width:280px) and (max-width:768px) {

   .greetingmsg{
      background: aliceblue;
      padding: 20px;
      border: 1px solid blue;
      border-radius: 7px;
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
   }


   .input-form{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 50px 0px 40px 0px;
      background-color: #fff;
      padding: 20px;
   }
.up-side{
   display: flex;
   justify-content: space-between;
   flex-direction: column-reverse;
}

.left-side{
   display: flex;
   flex-direction: column;
   align-items: center;
}

.right-side{
   display: flex;
   flex-direction: column;
   align-items: center;
}

.inside{
   margin-bottom: 15px;
}

#imagePreview{
   height: 170px;
}

.miniature{
   border-radius: 10px;
   width: -webkit-fill-available;
   height: 73px;
   background-color: rgb(245, 245, 245);
   border: 2px dashed #2196F3;
}

.titre,.model,.price{
   border: 1px solid #8686864a;
   height: 40px;
   font-family: sans-serif;
   padding: 0 17px;
   width: -webkit-fill-available;
   border-radius: 10px;
   font-size: 20px;
}

.decription{
      font-family: sans-serif;
      height: 200px;
      padding: 17px 17px;
      width: -webkit-fill-available;
      border-radius: 10px;
      font-size: 16px;
}

.options::-webkit-scrollbar {
   height: 0px;
   background-color: #fff;
}

.options::-webkit-scrollbar-track {
   background: #ffffff;
   height: 0px;
}

.options{
   display: flex;
   gap: 4px;
   width: 100%;
   margin-bottom: 17px;
   font-family:sans-serif;
   overflow-x: scroll;
}

.options .option{
   background-color: #404040;
   color: #fff;
   padding: 7px;
   height: 15px;
   border-radius: 10px;
   display: flex;
   flex-direction: row;
   white-space: nowrap;
   align-items: center;
   cursor: pointer;
}

.option input[type="checkbox"]{
   margin-left: 13px;
}

.details{
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   padding: 0 17px;
   justify-content: center;
}

.details input,select{
   border: 1px solid #8686864a;
   color: #757575;
   border-radius: 7px;
   padding: 2px;
}

.submit{
   width: 150px;
   height: 32px;
   background-color: #2ea3ff;
   border-radius: 6px;
   color: white;
   border: 2px solid #98d1ff;
}

.submit-container{
   display: flex;
   padding: 0 40px;
   justify-content: center;
   width: -webkit-fill-available;
}

   
}

@media screen and (min-width:768px) and (max-width:1044px) {

   .input-form{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 50px 0px 40px 0px;
      background-color: #fff;
      padding: 20px 10%;
   }
   .up-side{
      display: flex;
      justify-content: space-between;
      flex-direction: column-reverse;
   }
   
   .left-side{
      display: flex;
      flex-direction: column;
      align-items: center;
   }
   
   .right-side{
      display: flex;
      flex-direction: column;
      align-items: center;
   }
   
   .inside{
      margin-bottom: 15px;
   }
   
   #imagePreview{
      height: 170px;
   }
   
   .miniature{
      border-radius: 10px;
      width: -webkit-fill-available;
      height: 50px;
      background-color: rgb(245, 245, 245);
      border: 2px dashed #2196F3;
   }
   
   .titre,.model,.price{
      border: 1px solid #8686864a;
      height: 40px;
      font-family: sans-serif;
      padding: 0 17px;
      width: -webkit-fill-available;
      border-radius: 10px;
      font-size: 20px;
   }
   
   .decription{
         font-family: sans-serif;
         height: 200px;
         padding: 17px 17px;
         width: -webkit-fill-available;
         border-radius: 10px;
         font-size: 16px;
   }
   
   .options::-webkit-scrollbar {
      height: 0px;
      background-color: #fff;
   }
   
   .options::-webkit-scrollbar-track {
      background: #ffffff;
      height: 0px;
   }
   
   .options{
      display: flex;
      gap: 4px;
      width: 100%;
      margin-bottom: 17px;
      font-family:sans-serif;
      overflow-x: scroll;
   }
   
   .options .option{
      background-color: #404040;
      color: #fff;
      padding: 7px;
      height: 15px;
      border-radius: 10px;
      display: flex;
      flex-direction: row;
      white-space: nowrap;
      align-items: center;
      cursor: pointer;
   }
   
   .option input[type="checkbox"]{
      margin-left: 13px;
   }
   
   .details{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 0 17px;
      justify-content: center;
   }
   
   .details input,select{
      border: 1px solid #8686864a;
      color: #757575;
      border-radius: 7px;
      padding: 2px;
   }
   
   .submit{
      width: 150px;
      height: 32px;
      background-color: #2ea3ff;
      border-radius: 6px;
      color: white;
      border: 2px solid #98d1ff;
   }
   
   .submit-container{
      display: flex;
      padding: 0 40px;
      justify-content: center;
      width: -webkit-fill-available;
   }
   
      
   }

   @media screen and (min-width:1044px)  {

      .input-form{
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         margin: 50px 0px 40px 0px;
         background-color: #fff;
         padding: 20px 40px;
      }
      .up-side{
         display: flex;
         justify-content: space-between;
         flex-direction: row;
         gap: 2%;
      }
      
      .left-side{
         display: flex;
         flex-direction: column;
         align-items: center;
         width: 49%;
      }
      
      .right-side{
         display: flex;
         flex-direction: column;
         align-items: center;
         width: 49%;
      }
      
      .inside{
         margin-bottom: 15px;
      }
      
      #imagePreview{
         height: 170px;
      }
      
      .miniature{
         border-radius: 10px;
         width: -webkit-fill-available;
         height: 50px;
         background-color: rgb(245, 245, 245);
         border: 2px dashed #2196F3;
      }
      
      .titre,.model,.price{
         border: 1px solid #8686864a;
         height: 40px;
         font-family: sans-serif;
         padding: 0 17px;
         width: -webkit-fill-available;
         border-radius: 10px;
         font-size: 20px;
      }
      
      .decription{
            font-family: sans-serif;
            height: 200px;
            padding: 17px 17px;
            width: -webkit-fill-available;
            border-radius: 10px;
            font-size: 16px;
      }
      
      .options::-webkit-scrollbar {
         height: 0px;
         background-color: #fff;
      }
      
      .options::-webkit-scrollbar-track {
         background: #ffffff;
         height: 0px;
      }
      
      .options{
         display: flex;
         gap: 4px;
         width: 100%;
         margin-bottom: 17px;
         font-family:sans-serif;
         overflow-x: scroll;
      }
      
      .options .option{
         background-color: #404040;
         color: #fff;
         padding: 7px;
         height: 15px;
         border-radius: 10px;
         display: flex;
         flex-direction: row;
         white-space: nowrap;
         align-items: center;
         cursor: pointer;
      }
      
      .option input[type="checkbox"]{
         margin-left: 13px;
      }
      
      .details{
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
         padding: 0 17px;
         justify-content: center;
      }
      
      .details input,select{
         border: 1px solid #8686864a;
         color: #757575;
         border-radius: 7px;
         padding: 2px;
      }
      
      .submit{
         width: 150px;
         height: 32px;
         background-color: #2ea3ff;
         border-radius: 6px;
         color: white;
         border: 2px solid #98d1ff;
      }
      
      .submit-container{
         display: flex;
         padding: 0 40px;
         justify-content: center;
         width: -webkit-fill-available;
      }
      
      .greetingmsg{
         background: rgba(0, 0, 0, 0.4);
         padding: 20px;
         z-index: 9;
         position: fixed;
         height: 100%;
         width: 100%;
         top: 0;
         display: flex;
         align-items: center;
         justify-content: center;
      }
      
     .msg{
         background: #00000063;
         border: 1px solid rgb(138 138 138);
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 8px;
         padding: 5px 30px;
         font-family: sans-serif;
         position: absolute;
         top: 0;
         width: -webkit-fill-available;
         height: -webkit-fill-available;
         z-index: 3;
      }
         
      }