body {

}
#login{
	height: 100vh;
	width: 100vw;
	display:flex;
	flex-direction: column;
	justify-content:center;
	align-items:center;
}
#login-form{
	display:flex;
	width: 100%;
	height: 100%;
	flex-direction:column;
	align-items: center;
	justify-content: center;
	input{
		width:100px;
	}
}

#admin-common{
	display:flex;
	flex-direction: column;
	align-items: center;
	position:relative;
	margin-top: 14vh;
	max-height: calc(15vh - 6vh);
	height: fit-content;
	width:100vw;
}

#admin-header{
    font-size: var(--font-size-large);
}
#admin-menu {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 100%;
}
#admin-menu button {
    font-size: inherit;
}

#admin-page{
    display:flex;
	min-height:85vh;
	height:fit-content;
    width:100%;
    max-width: 100%;
    flex-direction:column;
}
.admin-content{
	width:96%;
	min-width: 96%;
	max-width:96%;
	padding: 2%;
	display:flex;
	flex-direction: column;
	-ms-overflow-style: scrollbar;  /* IE and Edge */
	scrollbar-width: thin;  /* Firefox */
	height: fit-content;

    align-items: center;
}

.product-list{
    display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	width:100%;
	justify-content: space-evenly;
}
#productes{
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.col_col{
    display:flex;
    flex-direction: column;
    width:fit-content;
    justify-content: start;
    height:fit-content;
}
.productes-titol-col{
    font-size: var(--font-size-extra-large);
    text-align: center;
    width: 100%;
    font-weight: bold;
    margin-bottom: 1rem;
}

.wrapper{
    display:flex;
    width:100%;
    height:fit-content;
}
.wrapper:not(:last-of-type){

}
.horizontal.wrapper{
    flex-direction: row;
    justify-content: space-between;
}

.vertical.wrapper{
    flex-direction: column;
    justify-content: start;
}

.spacer{
    min-width:5%;
    min-height:5%;
}
.horizontal.spacer{
    min-height:0;
}
.vertical.spacer{
    min-width:0;
}


.popup-info{
    width:90%;
    height:90%;
    min-height: 90%;
    padding:1rem;
}

.product-container{
	width: 20vw;
	padding: 1vw;
	height: 20vw;
	background-color: rgba(0, 255, 255, 0.1);
    position: relative;
    border: black solid 1px;
    margin-bottom: 1%;
}
.product-header{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    align-items: center;
    justify-content: center;
    padding: 1%;

}
.product-header:hover{
    cursor: pointer;
}

.product-button{
    position: absolute;
    z-index: 4;
    font-size: var(--font-size-small);
    
}
.product-show, .product-hide{
    bottom:0;
    
    
}
.product-hide{
    background-color: coral;
}
.product-show{
    background-color: lightgreen;
}
.product-delete{
    
    top:0;
    background-color: orangered;
    color: white;
    font-size: 4px;
}
.go-to-product{
	bottom:2rem;
	
}


.product-title{
    font-size: var(--font-size-extra-large);
    font-weight: bold;
    z-index: 5;
    max-width:100%;
    background-color: rgba(255,255,255,0.5);
    overflow-wrap:break-word;
}

.product-snapshot{
    position: absolute;
    height: 80%;
    width: 80%;
    background-size: cover;
    background-position: center;
    background-color: lightgray;
    z-index:0;

}
.product-data{
    display:none;
    background-color: rgba(255, 255, 255, 1);
    flex-direction: column;
    height: fit-content;
    padding-top: 2%;
    max-height: 50%;
}
.product-data.hide{
    display: none;
}

.product-element{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    background-color: white;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;

    font-weight: bold;
    font-size: var(--font-size-large);
}
.product-element:not(:last-of-type){
    /*padding-right:5%;*/

}
.product-element input{
    width: 30%;
    background-color: lightgoldenrodyellow;
    font-size: var(--font-size-large);
}
.product-element textarea{
    width: 75%;
    background-color: lightgoldenrodyellow;
    font-size: var(--font-size-large);
}
.product-element select{
    width: fit-content;
    font-size: var(--font-size-large);
}
.product-element.subtitle{
    display: none;
}




.product-images{
    margin-top: 2rem;
	display:flex;
	flex-wrap:wrap;
    width:100%;
    justify-content: space-between;

}

.product-image, .product-image-upload, .product-image-select{
	width:20vw;
	height:20vw;
	min-width:20vw;
	min-height:20vw;
    background-size: cover;
    background-position: center;
	justify-content: center;
	margin-bottom:2vw;

    position: relative;
}
.product-image-input{
	display:none;
}
.product-image-upload, .product-image-select{
	font-size: var(--font-size-extra-large);
}


.product-image-left, .product-image-right{
    position: absolute;
    bottom:0;
    background-color: rgba(255, 255, 255, 0.8);
}
.product-image-left{
    left:0;
}
.product-image-right{
    right:0;
}

.product-image-delete{
    position: absolute;
    top:0;
    right:0;
    background-color: rgba(255, 0, 0, 0.8);
}

.n-colors-input{
    width: 10% !important;
}
.all-colors{
    width:50%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.color-circle{
	border-radius: 0.5rem;
	height: 1rem;
	width:fit-content;
	padding-right: 0.5rem;
	padding-left:0.5rem;
	font-size: var(--font-size-extra-small);

}
.color-circle.selected{
	border: 2px solid black;
}

.hidden{
	display:none !important;
}

.var-lang{
    display: none !important;
}
.var-lang.active-lang{
    display: flex !important;
}


@media only screen and (max-width: 1025px) {
    .product-container {
        width: 45vw;
        padding: 1vw;
	margin-bottom: 2vw;
        height: 45vw;
    }
    .product-data{
	    max-width: 80% !important;
	    min-width:0;
    }
    .horizontal.wrapper{
	    flex-direction: column;
    }
    .product-image-upload, .product-image-select{
	    font-size: var(--font-size-extra-small);
    }
}