.ee_shop {

}

.ee_error {
	color:						#bf4743;
}

.ee_head, .ee_head th {	
	font-weight:				bold;
	color:						#FFF !important;
	background: 				rgba(100,100,100,0.8);
}
.ee_group {	
	font-weight:				bold;
	background: 				rgba(200,200,200,0.8);
}
.ee_test {	
	font-weight:				bold;	
	color:						#bf4743 !important;		
}

.ee_product .price {
	font-size:					24px;			
	font-weight: 				bold; 	
	color:						#000;
	text-align: 				center;
	height: 					auto;
}
.ee_product input[type="checkbox"] {
	margin:						24px 0 0 0;
	width: 						24px;
  	height: 					24px;
  	cursor: 					pointer;
	accent-color: 				#0071b8;
}

.ee_order_form
{
	padding:					2em;		
	border-radius: 				8px;
}

.ee_order_form input { 
	height: 					48px;
    font-size: 					18px;	
	padding: 					0 12px;
	color:						#808080;
    border-radius: 				6px;        
	border:						1px solid rgba(0,0,0,0.2);	
}
.ee_order_form input[type="text"] { 
	width:						100%;
}

.ee_products {	
	border:						none;
	border-radius: 				8px;	
}

.ee_product {
	display: 					grid;	    
	grid-template-columns: 		auto 147px;
    gap: 						24px;	

	margin: 					24px auto;	
	padding:					2em;

	align-items: 				start;	

	border:						1px solid rgba(0,0,0,0.2);
	border-radius: 				8px;
}
.ee_product:hover {		
	border: 					1px solid #0071b8;	
}

.ee_order_form > .ee_product { border:1px solid cyan; }

.ee_client {
	margin: 					24px auto;	
	border-radius: 				8px;
}
.ee_client input:not([type="radio"]):not([type="checkbox"]) {
	height: 					48px;
    font-size: 					18px;	
	padding: 					0 12px;
	color:						#808080;
    border-radius: 				6px;        
	border:						1px solid rgba(0,0,0,0.2);	
}
.ee_client input[type="text"] { 
	width:						100%;
}
.ee_client input.error {
    animation: 					error_flash 1s ease-in-out;
}
.ee_client input[type="checkbox"].error {    
    outline: 					2px solid #e53935;    		
}

.ee_order {
	margin: 					24px auto 0 auto;	
	text-align: center;	
}
.ee_order .title {
	font-size:					24px;
	font-weight: 				bold;
}
.ee_order .desciption {
	font-size:					18px;	
}

.ee-item {
    margin-bottom:10px;
}

.ee_button {
    font-size: 					18px;
	min-height: 				3em;
	_width: 						50%;
	min-width:					33%;	
	max-width:					80%;	
	margin:						0.5em auto;
	color:						#FFF;	
	border:						none;
	border-radius: 				6px;		
	padding: 					12px;		
	font-weight: 				bold;
	cursor:						pointer;	    
}
.ee_button:hover {	
	background: 				#bf4743;
}
.ee_button:disabled {
	color:						#CCCCCC;				
	background:					#888888;
	cursor: 					not-allowed;
}

#fl_fields {
	position: 					relative;
	margin-top: 				24px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
#fl_fields::before, #contact_fields::before {
    content: 					attr(data-label);
    position: 					absolute;
    top: 						-0.5em;
    left: 						0;

    font-size: 					14px;    
    color: 					#808080;
}
#contact_fields {
	position: 					relative;
	margin-top: 				24px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
#ul_fields {
	display:	none;	
}


.ee_btn_do {
	background: 				#0071b8;
}
.ee_btn_order {
	background: 				green;
}
.ee_btn_pay {
	background: 				#0071b8;
}


@keyframes error_flash {
    0% {
        background-color: #fff;
        border-color: rgba(0,0,0,0.2);
    }

    15% {
        background-color: #ffcccc;
        border-color: #e53935;
    }

    30% {
        background-color: #fff;
        border-color: rgba(0,0,0,0.2);
    }

    45% {
        background-color: #ffcccc;
        border-color: #e53935;
    }

    60% {
        background-color: #fff;
        border-color: rgba(0,0,0,0.2);
    }

    75% {
        background-color: #ffcccc;
        border-color: #e53935;
    }

    100% {
        background-color: #fff;
        border-color: rgba(0,0,0,0.2);
    }
}


/* MOBILE */
@media (max-width: 768px) and (any-pointer: coarse) 
{
	.ee_proinfo {			
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
	}

	#fl_fields, #contact_fields {
        grid-template-columns: 1fr;
    }
}