Site-Proximo/src/css/Components/createarticle.css

#nameandcatBox{
    display:flex;
}

#categoryBlock{
    display:flex;
    flex-direction: column;
}

#categoryAndAddBlock{
    display:flex;
}

    #categoryBlockInput{
        margin-left:5.5vw;
        margin-right:2vw;
        width:12vw;
        display:flex;
        flex-direction:column;
        color:#878787;
        font-family: 'Wellfleet', cursive;
        font-size:1vw;
    }

        #categoryBox{
            height:2.05vw;
            color:black;
            border-radius:0.6vw;
            padding-left:0.5vw;
            border: 0.2vw solid #000000;
            box-sizing: border-box;
            box-shadow: 0.2vw 0.4vw 0.2vw rgba(255, 255, 255, 0.25);
        }

        #categoryBox:focus{
            outline:none;
            color:black;
            border-radius:0.6vw;
            padding-left:0.5vw;
            border: 0.2vw solid #057B26;
            box-sizing: border-box;
            box-shadow: 0.2vw 0.4vw 0.2vw rgba(255, 255, 255, 0.25);
        }

            #errorCategoryBlock{
                height:3vw;
                display:flex;
                padding-top:0.5vw;
                padding-left: 6vw;
            }

                #errorCategory{
                    color:red;
                    font-family: 'Wellfleet', cursive;
                    font-size:0.75vw;
                }

#addCategoryBlock{
    display:flex;
    justify-content: center;
    
}

    #addCategoryBox{
        margin-top:0.5vw;
        display:flex;
        justify-content: center;
        align-items: center;
        background:#057B26;
        border-radius: 100vw;
        padding:0.5vw;
        width:3vw;
        height:3vw;
    }

#descriptionBlock{
flex:1;
width:80%;
display:flex;
flex-direction: column;
}

#descriptionBlockInput{
    flex:1;
    display:flex;
    flex-direction:column;
    color:#878787;
    font-family: 'Wellfleet', cursive;
    font-size:1vw;
}

    #descriptionBox{
        color:black;
        border-radius:0.6vw;
        padding-left:0.5vw;
        border: 0.2vw solid #000000;
        box-sizing: border-box;
        box-shadow: 0.2vw 0.4vw 0.2vw rgba(255, 255, 255, 0.25);
    }

    #descriptionBox:focus{
        outline:none;
        color:black;
        border-radius:0.6vw;
        padding-left:0.5vw;
        border: 0.2vw solid #057B26;
        box-sizing: border-box;
        box-shadow: 0.2vw 0.4vw 0.2vw rgba(255, 255, 255, 0.25);
    }

#errorDescriptionBlock{
    height:3vw;
    display:flex;
    padding-top:0.5vw;
    padding-left: 0.5vw;
}

    #errorDescription{
        color:red;
        font-family: 'Wellfleet', cursive;
        font-size:0.75vw;
    }

#quantandpriBox{
    display:flex;
}

    #quantityBlock{
        flex:1;
        display:flex;
        flex-direction: column;
    }

        #quantityBlockInput{
            width:5vw;
            display:flex;
            flex-direction:column;
            color:#878787;
            font-family: 'Wellfleet', cursive;
            font-size:1vw;
        }

            #quantityBox{
                color:black;
                border-radius:0.6vw;
                padding-left:0.5vw;
                border: 0.2vw solid #000000;
                box-sizing: border-box;
                box-shadow: 0.2vw 0.4vw 0.2vw rgba(255, 255, 255, 0.25);
            }
        
            #quantityBox:focus{
                outline:none;
                color:black;
                border-radius:0.6vw;
                padding-left:0.5vw;
                border: 0.2vw solid #057B26;
                box-sizing: border-box;
                box-shadow: 0.2vw 0.4vw 0.2vw rgba(255, 255, 255, 0.25);
            }

            #quantandpriBox{
                display:flex;
            }

        #errorQuantityBlock{
            height:3vw;
            display:flex;
            padding-top:0.5vw;
            padding-left: 0.5vw;
        }
        
            #errorQuantity{
                color:red;
                font-family: 'Wellfleet', cursive;
                font-size:0.75vw;
            }
            
    #priceBlock{
        flex:1;
        display:flex;
        flex-direction: column;
    }

        #priceBlockInput{
            width:5vw;
            display:flex;
            flex-direction:column;
            color:#878787;
            font-family: 'Wellfleet', cursive;
            font-size:1vw;
        }

            #priceBox{
                color:black;
                border-radius:0.6vw;
                padding-left:0.5vw;
                border: 0.2vw solid #000000;
                box-sizing: border-box;
                box-shadow: 0.2vw 0.4vw 0.2vw rgba(255, 255, 255, 0.25);
            }
        
            #priceBox:focus{
                outline:none;
                color:black;
                border-radius:0.6vw;
                padding-left:0.5vw;
                border: 0.2vw solid #057B26;
                box-sizing: border-box;
                box-shadow: 0.2vw 0.4vw 0.2vw rgba(255, 255, 255, 0.25);
            }

    #errorPriceBlock{
        height:3vw;
        display:flex;
        padding-top:0.5vw;
        padding-left: 0.5vw;
    }
    
        #errorPrice{
            color:red;
            font-family: 'Wellfleet', cursive;
            font-size:0.75vw;
        }

    #codeBlock{
        flex:1;
        display:flex;
        flex-direction: column;
    }

        #codeBlockInput{
            width:80%;
            display:flex;
            flex-direction:column;
            color:#878787;
            font-family: 'Wellfleet', cursive;
            font-size:1vw;
        }

            #codeBox{
                color:black;
                border-radius:0.6vw;
                padding-left:0.5vw;
                border: 0.2vw solid #000000;
                box-sizing: border-box;
                box-shadow: 0.2vw 0.4vw 0.2vw rgba(255, 255, 255, 0.25);
            }
        
            #codeBox:focus{
                outline:none;
                color:black;
                border-radius:0.6vw;
                padding-left:0.5vw;
                border: 0.2vw solid #057B26;
                box-sizing: border-box;
                box-shadow: 0.2vw 0.4vw 0.2vw rgba(255, 255, 255, 0.25);
            }

    #errorCodeBlock{
        height:3vw;
        display:flex;
        padding-top:0.5vw;
        padding-left: 0.5vw;
    }
    
        #errorCode{
            color:red;
            font-family: 'Wellfleet', cursive;
            font-size:0.75vw;
        }

    #imageBlock{
        flex:1;
        display:flex;
        margin-bottom:3vw;
    }

        #imageBlockInput{
            flex:1;
            font-family: 'Wellfleet', cursive;
            font-size:1vw;
        }

            #customImageBox{
                border: 0.2vw solid black;
                background:#FFFFFF;
                box-sizing: border-box;
                box-shadow: inset -0.3vw -0.4vw 0.3vw rgba(0, 0, 0, 0.75);
                display: inline-block;
                border-radius:0.8vw;
                padding:0.5vw 0.7vw 0.5vw 0.7vw;
                cursor: pointer;
            }

            #imageBox{
                display:none;
            }

        #errorImageBlock{
            flex:1;
            display:flex;
            justify-content: center;
            align-items: center;
        }

            #errorImage{
                color:red;
                font-family: 'Wellfleet', cursive;
                font-size:0.75vw;
            }

            #imageName{
                color:#878787;
                font-family: 'Wellfleet', cursive;
                font-size:0.8vw;
            }