body{ background: #1f2426; color: #999; font-family: 'latoregular';}
a{ text-decoration: none;}
h4{color: #fff;}
h5{color: #fff;}
div{word-wrap: break-word;word-break: break-all;}
.header{ }
.header img{ width: 100%; }
.footer{ }
.footer img{ width: 100%; }

.configurator{ background: #1c2022; padding: 40px;}

.steps{	margin: 0 0px 30px; padding: 0; list-style: none; width: 100%; display: table; }
.steps li{ margin: 0 5px; padding: 0; display: inline-block; vertical-align: middle; 
	width: calc(16.3% - 10px); float: left; 
}
.steps li:first-child{ margin-left: 0; width: calc(16.3% - 0px);}
.steps li:last-child{ margin-right: 0; width: calc(16.3% - 0px);}

.steps li a{ display: block; background: #333739; padding: 10px; color: #fff; border-radius: 4px; text-align: center; font-size: 16px;
	height: 70px; line-height: 18px; position: relative;
}
.steps li a span{ color: #999; display: block; text-align: center; font-size: 14px;}
.steps li a:hover{ background: #4d4d4d;}
.steps li a.active{ background: #fff; color: #000;}
.steps li a:hover span{}
.steps li a.active span{ color: #000; }
.steps li a:hover::after{ position: absolute; z-index: 111; top: 100%; left: 50%; transform: translateX(-50%); content: ""; 
	border-top: 10px solid #4d4d4d; border-left: 10px solid transparent; border-right: 10px solid transparent; 
}
.steps li a.active::after{ position: absolute; z-index: 1111; top: 100%; left: 50%; transform: translateX(-50%); content: ""; 
	border-top: 10px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; 
}
.steps li a.completed{ /*background: #43bd52;*/ border: 1px solid #43bd52; position: relative;}
.steps li a.completed::before{position: absolute; z-index: 111; top: 5px; right: 10px; width: 20px; height: 20px;
	display: inline-block; background: url(../../img/right.png) no-repeat; background-size: 100%;
	content: "";  }
.steps li a.completed span{ color: #ddd; }
.steps li a.completed:hover::after{border-top: 10px solid #43bd52;}

.closeitem{ position: absolute; z-index: 1111; top: 10px; right: 15px; display: inline-block; }
.closeitem img{ width:15px; opacity: 0.7; }

.prolistbox{}
.prolistitem{ position: relative; background: #282d2f; border: 1px solid #3e4244; padding: 20px 180px 20px 200px; min-height: 160px;
	margin: 0 0 20px;}
.prolistitem:last-child{ margin: 0 0 0;}
.prolistitem h3{ color: #fff; font-size: 24px;}
.prolistitem p{ margin: 0 0 0;}
.prolistitem .picbox{position: absolute; z-index: 111; left: 20px; top: 20px; width:160px; height: 120px;}
.prolistitem .picbox img{ width: 100%; height: 100%; object-fit: contain;}
.prolistitem .btnbox{position: absolute; z-index: 111; right: 20px; bottom: 20px;}
.prolistitem .btnbox button{border: 1px solid #3e4244; background: #000; color: #fff; text-transform: uppercase; padding:7px 20px;
	color: #ffde14;  font-family: 'latobold';
}

.protitle{ text-align: center; color: #fff;}

/******/
.views{margin-left: 50px;}
.views ul{margin: 0; padding: 0; list-style: none;}
.views ul li{display: block; padding: 0; margin: 15px 0; text-align: left;}
.views ul li a{display: inline-block;}
.views ul li a:hover img{filter:opacity(0.5);}
.views ul li a img.on{display: none;}
.views ul li a img.off{display: block; opacity: 0.5;}
.views ul li a.active img.on{display: block;}
.views ul li a.active img.off{display: none;}

.productdetail{}
.prodetailbox {height: 400px; text-align: center; padding: 25px; background: #282d2f; border: 1px solid #3e4244;}
.prodetailbox img{width: 100%; height: 100%; object-fit: contain;}

.next{ text-align: right;}
.btn-next{ border: 1px solid #3e4244; background: #000; color: #fff; text-transform: uppercase; padding:7px 20px;
	color: #ffde14; font-family: 'latobold';}

.selectoption{padding: 0; margin:20px 0 0; list-style: none;}
/*
.selectoption li{position: relative; min-height: 25px; display: block; margin: 0 0 15px; padding-left: 30px;}
.selectoption li input[type="radio"]{position: absolute; left: 0; top: 5px;}
.selectoption li input[type="checkbox"]{position: absolute; left: 0; top: 5px;}
*/

.selectoption li{ margin: 0 0 15px; display: block; }
.selectoption li{position: relative; 
	width: 100%; padding: 12px 12px 12px 50px; background: #202426; border: 1px solid #2c3032;
	border-radius: 4px;
	display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    min-height: 100px;
    line-height: 20px;
}
.selectoption li input[type="radio"]{position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}
.selectoption li input[type="checkbox"]{position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}

.selectoption li .diviceimage{ width: 125px; height: 75px; padding: 5px; margin-right: 15px;}
.selectoption li .diviceimage img{ width: 100%; height: 100%; object-fit: contain; }
.selectoption li div:last-child{ width: calc(100% - 140px); }
.selectoption li div .shoplink{ width: 100%; display: block; margin-top: 5px; }

.selectoption li .required{position: absolute; z-index: 111; top: 10px; right: 20px; color: #efce15; font-size: 13px;}
.selectoption li .required span{font-size: 20px; display: inline-block; vertical-align: middle}
.resultitem{ position: relative;  padding: 0px 0px 15px 150px; min-height: 100px; margin: 0 0; border-bottom: 1px solid #333739;}
.resultitem h5{ color: #fff; }
.resultitem p{ margin: 0 0 0;}
.resultitem .picbox{position: absolute; z-index: 111; left: 0px; top: 0px; width:120px; height: 100px;}
.resultitem .picbox a{ display: inline-block;}
.resultitem .picbox img{ width: 100%; height: 100%; object-fit: contain;}

.resultoption{padding: 0; margin:20px 0 0; list-style: none; border-bottom: 1px solid #333739; padding: 0 0 10px;}
/*
.resultoption li{position: relative; min-height: 25px; display: block; margin: 0 0 10px; padding-left: 30px;}
.resultoption li::after{position: absolute; left: 0 ; top: 5px; content: ""; width: 14px; height: 14px; border-radius: 50%; background: #4f4f4f;}
*/

.resultoption li{position: relative; margin: 0 0 15px; 
	width: 100%; padding: 12px 12px 12px 50px; background: #202426; border: 1px solid #2c3032;
	border-radius: 4px;
	display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    min-height: 100px;
    line-height: 20px;
}
.resultoption li::after{ position: absolute; left: 20px ; top: 50%; transform: translateY(-50%); content: ""; 
	width: 14px; height: 14px; border-radius: 50%; background: #4f4f4f;
}
.resultoption li .diviceimage{ width: 125px; height: 75px; padding: 5px; margin-right: 15px;}
.resultoption li .diviceimage img{ width: 100%; height: 100%; object-fit: contain; }
.resultoption li div:last-child{ width: calc(100% - 140px); }
.resultoption li div .shoplink{ width: 100%; display: block; margin-top: 5px; }

.btn:hover {
    color: #fff;
}

/**********/
label.error, 
span.error{ display: block !important; color: #efce15; font-size: 13px; font-weight: normal;}

/**********/
.searchrow{ display: flex; justify-content: flex-end; flex-direction: row; }
.searchrow label{  }
.searchrow .input{ margin-left:10px; }
.searchrow button[type="submit"]{ margin-left:10px; }
.searchrow input[type="reset"]{ margin-left:10px; }

/**********/
.pagination{justify-content: flex-end; }
.pagination li{}
.pagination li a{ background: #282d2f; border: 1px solid #3e4244; padding:0 10px; margin: 10px; 
	color: #ffde14; display: inline-block; vertical-align: middle; line-height: 30px;
}
.pagination li:last-child a{ margin-right: 0px; }
.pagination{}
.clsdddd{}






/*New css***************************/

@media (max-width: 991px) {
	.configurator{ padding:10px 0px;}
	.steps{ margin: 0 0 30px;}
	.steps li:first-child{ margin-left: 0; width: calc(16.3% - 0px);}
	.steps li:last-child{ margin-right: 0; width: calc(16.3% - 0px);}
	.steps li a span{ word-wrap: break-word; word-break: break-all; }
	.container{
		max-width : 1140px !important;
	}
}
@media (max-width: 820px) {
	.configurator{ padding: 10px 0;}
	.steps{ width: calc(100% + 0px); margin: 0 0 20px; display: table;}
	.steps li{ margin: 0 4px; width: calc(16.3% - 8px); float: left;}
	.steps li:first-child{ margin-left: 0; width: calc(16.3% - 0px);}
	.steps li:last-child{ margin-right: 0; width: calc(16.3% - 0px);}
	.steps li a{ padding: 10px 5px; font-size: 14px; height: 82px;}
	.steps li a span{ font-size: 11px; word-wrap: break-word; word-break: break-all; line-height: 14px; margin-top: 4px;}

	.prolistitem{ padding: 15px; min-height: auto;}
	.prolistitem .picbox{ position: inherit; left: inherit; top: inherit; margin-right: auto; 
		margin-bottom: 20px;}
	.prolistitem .btnbox { position: inherit; bottom: inherit; padding: 20px 0px 0; right: inherit;
		text-align: right;
	}
	.steps li a.completed::before{ right:2px;top:60px;}
	.resultitem{ position: inherit; min-height: auto; padding: 0px;}
	.resultitem .picbox{ position: inherit; left: inherit; top: inherit; margin-right: auto; margin: 0 0 10px;}
	.selectoption li{ padding: 10px 10px 10px 40px;}
	

}