body{
    margin:auto;
    height:100%;
    width:100%;
    overflow:hidden; 
    /* background:rgb(44, 44, 44); */
    font-family:"Courier New", helvetica;
}

button, select{
    outline:none;
    border:none;
    pointer-events:all;
    cursor:pointer;
    transition:0.2s;
    /* background:#abd231; */
    background:transparent;
    border:1px solid rgb(110, 110, 110);

    padding:5px 7px;
    border-radius:3px;
    font-size:12px;
    /* font-weight:600; */
    text-transform: uppercase;
    font-family:"Courier New", helvetica;
}
button:hover{
    opacity:0.8;
}

#product-container{
    display:none;
    position:absolute;
    width:100%;
    height:100%;
    left:0px;top:0px;
    /* cursor:pointer; */
}

#product-img{
    /* display:none; */
    position:absolute;

    left:0px;
    top:0px;
    /* width:100%; */
    width:calc(100% - 300px);
    height:100%;

}

#product-bar{
    /* display:none; */
    position:absolute;

    /* left:0px; */
    right:0px;
    top:0px;
    bottom:auto;
    

    padding:25px;
    height:calc(100% - 50px);
    width:calc(300px - 50px);

    /* background:#f5f5f3; */

}

#buy-quan{
    width:45px;
    height:30px;
    font-size:12px;
    transform: translateY(-1px);
}

#buy-button{
    font-size:16px;
    width:calc(100% - 40px - 15px);
    height:30px;
    transition:0.2s;
}
#buy-button:hover{
    background:#000;
    color:#fff;
    border:1px solid #000;
}

#product-description{
    width:100%;
    margin-top:25px;
    font-size:13px;
}


@media only screen and (max-width: 700px) {

    #product-img{

        /* display:none; */
        position:absolute;
    
        left:0px;
        top:0px;
        width:100%;
        height:calc(100% - 185px);
        /* height:100%; */
    
    }

    #product-bar{

        /* display:none; */
        position:absolute;
    
        left:0px;
        /* right:0px; */
        top:auto;
        bottom:0px;
        
    
        padding:20px;
        width:calc(100% - 40px);
        height:calc(185px - 40px);
        /* height:auto; */
        /* padding-bottom:0px; */
    
        /* background:#f5f5f3; */
    
    }

    #product-description{
        position:relative;
        width:100%;
        margin-top:5px;
        margin-bottom:0px;
        font-size:10px;
        /* height:calc(100% - 30px - 15px); */
        height:auto;
        /* overflow:scroll; */
    }

}

/* @media only screen and (max-aspect-ratio: 1/1) {

    body{
        background:Red;
    }

} */




/* -- LOADING -- */
#main-loading{
    left:0px;top:0px;bottom:0px;right:0px;margin:auto;
}

.loading{
    position:absolute;
    pointer-events:none;
    /* left:0px;top:0px;bottom:0px;right:0px;margin:auto; */

    opacity:0.2;
    width:50px;width:50px;
    animation: loading 3s linear infinite;
}
.loading > img{
    position:absolute;
    height:100%;width:100%;
    top:0px;left:0px;
}

@keyframes loading {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

/* -- LOGIN -- */
#log-out{
    display:none;
    z-index:1000;
    position:relative;
    /* left:15px;top:15px; */
    position:relative;
    /* margin:15px; */
    
}

#log-in-container{
    display:none;
    z-index:1000;
    position:absolute;
    left:0px;right:0px;margin:auto;
    top:75px;
    width: 300px;
    height: auto;
    background-color: white;
    /* box-shadow: rgb(0 0 0 / 25%) 0px 2px 4px 0px; */
    margin: auto;
    padding: 15px;
    border-radius:5px;
}

.login{
    position: relative;
    width: calc(100% - 2px - 20px);
    height: auto;
    margin: 0px 0px 10px 0px;
    padding:10px;
    border-radius: 3px;
    /* border: 1px solid #e5e7ea; */
    /* border: 1px solid #c9cacc; */
    border:1px solid rgb(189, 187, 187);
}
input{
    font-family:"Courier New";
    text-transform: uppercase;
}
input:focus{
    outline-width: thin;
    outline-color: #606063;
}
input::placeholder{
    color:#6e7072;
}

#login-header{
    border:none;
    text-transform:uppercase;
    /* font-weight:600; */
    /* font-family:helvetica; */
    width:calc(100% - 10px);
    padding:10px 5px;
    /* background:Red; */

}

#login-button{
    width: 100%;
    height: 40px;
}


#error-field{
    position:relative;
    width:100%;
    height:auto;
    color:red;
    font-size:12px;
    /* background:blue; */
    margin-bottom:10px;

}