/* styles für die online passliste webt - MEPA */
/* 2019 werbepartner huth - spi -------------- */

/*    Dunkler Grünton: #006963 */
/*    MEPA Grünton: #00a98a */
/*    heller Grünton: #94cec3 */


.onpa-webt_wrapper {
	width: 100%;
	display: block;
	background-color: #333;	
	min-height: 500px;
}


/* navigation container */

	.onpa-webt_nav {
		width: 100%;
		display: block;
		padding: 10px 0 0 5%; 
	}

	.onpa-webt_nav > div { 
		width: 30%;
		height: 20px;
		display: inline-flex;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;		
        color: #ccc;
        margin-bottom: 20px;
        border-bottom: 2px solid #333;
        height: 40px;
	    user-select: none;
	    -moz-user-select: none;
	    -khtml-user-select: none;
	    -webkit-user-select: none;
	    -ms-user-select: none;
	}

	.onpa-webt_nav > div > span {
		padding: 10px;
		display: block;
		width: 100%;
		text-align: center;
		font-size: 110%;
	}

	.onpa-webt_nav > div:hover {

	}

	.onpa-webt_nav > div.onpa-webt_nav_visited:hover {
		color: #fff;
		cursor: pointer;
		border-bottom: 2px solid #006963;
	}

	.onpa-webt_nav > div.onpa-webt_nav_visited {
		color: #fff;
	}	

	.onpa-webt_nav > div.onpa-webt_nav_active {
		border-bottom: 2px solid #00a98a;
		font-weight: bold;
		color: #fff;
	}

/* generel content container */

	.onpa-webt_content {
		width: 95%;
		display: block;
		color: #fff;
		padding: 0 0 0 5%;
	}  

/* manufactors screen */
	.onpa-webt_cont_produce {
	}

	/* abc - list */
		.onpa-webt_cont_produce ul {
			list-style: none;
			list-style-image: inherit;
			display: inline-flex;
			margin: 0 !important;
		}

		.onpa-webt_cont_produce li {
			height: 30px;
			min-width: 25px;
			float: left;
			padding: 3px 5px 10px 5px !important;
			margin: 0 2px 0 0;
			background-color: #666;
	        -webkit-transition: all 0.2s ease;
	        -moz-transition: all 0.2s ease;
	        -o-transition: all 0.2s ease;
	        transition: all 0.2s ease;		
		    user-select: none;
		    -moz-user-select: none;
		    -khtml-user-select: none;
		    -webkit-user-select: none;
		    -ms-user-select: none;		
		    cursor: pointer;
		}

		.onpa-webt_cont_produce li.abc_active {
			background-color: #00a98a;
		}

		.onpa-webt_cont_produce li:first-child, .onpa-webt_cont_produce li:last-child {
			background-position: 0 2px;
			background-repeat: no-repeat;

		}

		.onpa-webt_cont_produce li:first-child {
			background-image: url("img/onpa-webt_bgleft.svg");
		}

		.onpa-webt_cont_produce li:last-child {
			background-image: url("img/onpa-webt_bgright.svg");
		}

		.onpa-webt_cont_produce li:hover {
			background-color: #006963;	
		}	

		.onpa-webt_cont_produce li:active {
			background-color: #94cec3;
		}


	.onpa-webt_cont_produce_logowrapper {
		width: 100%;
		display: inline-flex;
		height: 300px;
		overflow-x: hidden;
		overflow-y: auto;
		margin-top: 20px;
		position: relative;
	}

	.onpa-webt_cont_produce_logowrapper button {
		width: 150px;
		display: inline-flex;
		background-color: #00a98a;
		height: 80px;
		float: left;
		margin-right: 10px;
		margin-bottom: 10px;
		padding: 5px;
		border: none;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;	
	    user-select: none;
	    -moz-user-select: none;
	    -khtml-user-select: none;
	    -webkit-user-select: none;
	    -ms-user-select: none;
	}

	.onpa-webt_cont_produce_logowrapper button:hover {
		background-color: #006963;
	}

	.onpa-webt_cont_produce_logowrapper button:active {
		background-color: #94cec3;
	}

	.onpa-webt_cont_produce_logowrapper button > img {
		width: 90%;
		height: 90%;
		margin: 0 auto;
	}

	.onpa-webt_cont_produce_logo {

	}

/* screen series and model */
	.onpa-webt_cont_model {
	}

	.onpa-webt_cont_model select {
		margin-bottom: 20px;
		display: block;
		min-width: 200px;
		color: #333;
	}

	.onpa-webt_cont_model_logomanufactor {
		width: 30%;
		max-width: 200px;
		display: inline-block;
		float: right;
		padding: 10px;
		background-color: #4b4b4b;
		border: 1px solid #ccc;
		border-left: none;
		border-right: none;
	}

	.onpa-webt_cont_model_logomanufactor img {
		width: 100%;
		height: auto;
	}

	.onpa-webt_cont_model_list {
		max-height: 300px;
		width: 60%;
		overflow-y: auto;
		overflow-x: hidden;
		display: inline-block;
	}

	.onpa-webt_cont_model_list > ul {
		margin: 0;
		color: #333;
	}

	.onpa-webt_cont_model_list > ul > li {
		background-color: #ededed;
		padding-left: 10px;
		list-style: none;
		list-style-type: none;
		cursor: pointer;
	}	

	.onpa-webt_cont_model_list > ul > li:nth-child(even) {
		background-color: #ccc;

	}

	.onpa-webt_cont_model_list > ul > li:hover {
		background-color: #94cec3;
	}

/* screen result */
	.onpa-webt_cont_result {

	}

	.onpa-webt_cont_result_prodimg {
		width: 50%;
		display: inline-flex;
	}

	.onpa-webt_cont_result_prodimg img {
		width: 100%;
		height: 100%;
	}


	.webt_cont_result_logomanufactor_wrapper {
		width: 35%;
		max-width: 400px;
		display: inline-block;
		float: right;
		padding: 10px;
		background-color: #4b4b4b;
		border: 1px solid #ccc;
		border-left: none;
		border-right: none;
	}

	.onpa-webt_cont_result h2 {
		font-size: 150%;
		margin-bottom: 0;
	}

	.onpa-webt_cont_result h3 {
		margin-top: 4px;
		font-size: 120%;
	}


	.onpa-webt_cont_result_logomanufactor {
		width: 50%;
	}

	.onpa-webt_cont_result_logomanufactor img {
		width: 100%;
		height: auto;		
	}

	.onpa-webt_cont_result_mepawrapper {
		display: block;
	}
	.onpa-webt_cont_result_mepawrapper a {
		display: inline-flex;
		background-color: #00a98a;		
		margin: 15px 10px 10px 0;
		padding: 5px 15px;
		border: none;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;	
	    user-select: none;
	    -moz-user-select: none;
	    -khtml-user-select: none;
	    -webkit-user-select: none;
	    -ms-user-select: none;
		-webkit-border-radius: @corner-radius;
	  	-moz-border-radius: @corner-radius;  
	  	border-radius: 15px;	    
	  	color: #fff;
	}

	a.onpa-webt_cont_result_buttspecial {
		background-color: #ccc;
		color: #333;
	}

	.onpa-webt_cont_result_mepawrapper a:hover {
		background-color: #006963;
		color: #fff;
	}

	.onpa-webt_cont_result_mepawrapper a:active {
		background-color: #94cec3;
	}



/* resultscreen - Extension Information: Additionaly required products and text messages*/

#wp_page_result_extension_wrapper .wp_page_result_head {
	font-weight: bold;
}

.wp_page_result_extension {
  color: #ccc;
  font-size: 12px;
  line-height: 1.25;
}
.wp_page_result_extension > span {
  font-size: 100%;  
  line-height: inherit;
}

/* Erweiterung Result Screen */
#wp_page_result_messages {
  margin-top: 10px;
}

#wp_page_result_messages .result_message {
  color: #ccc;
  font-weight: bold;
  font-size: 12px;
  line-height: 1.25;
  margin: 0 0 5px;
}

#wp_page_result_messages .result_message:last-child {
  margin-bottom: 0;
}

/* setting for small devices */  

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

	.webt_cont_result_logomanufactor_wrapper {
		margin-bottom: 20px;		
		width: 80%;
		float: none;
		clear: both;
	}

	.webt_cont_result_logomanufactor_wrapper img {
		width: 50%;
		height: 50%;
	}

}