/*
Description: steps.tpl styles
*/

@media only screen and (min-width: 320px) {
	.special-category-filter > .special-category-filter-content > .flex-box {
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.category-steps.flex-box {
		align-items: center;
		height: 100%;
	    flex-wrap: wrap;
	    flex: 1;
	    text-align: left;
	}
	.category-steps > div {
	    flex: 1 1 100%;
		margin-bottom: 5px;
	}
	.category-steps > div:not(:last-child) {
		margin-right: 0;
	}
	.category-steps a {
        padding: 2px 15px;
	    display: block;
	    background-color: #f6f6f6;
	    border-radius: 5px;
	    color: #676767;
	    font-weight: bold;
	    text-decoration: none;
	}
	.category-steps a:hover {
		text-decoration: none;
	}
	.category-steps .active a {
	    background-color: #e20018;
	    color: #fff;
	}
	.special-category-filter-navigation {
		flex: 1 0 100%;
		display: flex;
		justify-content: flex-start;
	}
	.special-category-filter-content .special-category-filter-content-title {
		flex: 0 0 100%;
		order: 1;
		margin-top: 10px;
	}
	.special-category-filter-content-list li a {
		padding: 10px 0;
		border-radius: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		-webkit-transition: background-color border-radius box-shadow padding 400ms ease;
		-moz-transition: background-color border-radius box-shadow padding 400ms ease;
		-ms-transition: background-color border-radius box-shadow padding 400ms ease;
		-o-transition: background-color border-radius box-shadow padding 400ms ease;
		transition: background-color border-radius box-shadow padding 400ms ease;
	}
	.special-category-filter-content-list li a i {
		padding: 0;
	}
	.special-category-filter-content-list li:first-child a {
		border-top: 1px solid transparent;
	}
	.special-category-filter-content-list li:not(:first-child) a {
		border-top: 1px solid #d9d9d9;
	}
	.special-category-filter-content-list li a:hover {
		color: #005AA9;
		background-color: #f9f9f9;
		border-radius: 5px;
		border-top: 1px solid transparent;
		box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
		padding: 10px;
		
		-webkit-transition: background-color border-radius box-shadow padding 400ms ease;
		-moz-transition: background-color border-radius box-shadow padding 400ms ease;
		-ms-transition: background-color border-radius box-shadow padding 400ms ease;
		-o-transition: background-color border-radius box-shadow padding 400ms ease;
		transition: background-color border-radius box-shadow padding 400ms ease;
	}
	.special-category-title-hr {
		border-bottom-color: rgba(0, 0, 0, 0.5);
	}
	.special-category-filter .oxshortinfo {
		color: #e20018;
		font-weight: bold;
		padding: 0 15px;
		margin-left: auto;
		order: 2;
		flex: 0 0 100%;
		text-align: left;
	    padding: 0;
	}
	.special-category-filter .special-category-filter-content-oxinfo {
		color: #e20018;
		font-weight: bold;
		margin-top: 15px;
	}
}

@media only screen and (min-width: 558px) {
	.category-steps.flex-box {
		align-items: center;
		height: 100%;
	    flex-wrap: wrap;
	    flex: 1;
	    justify-content: flex-end;
	}
	.cl-flexia_article_types_register_formcontroller .category-steps.flex-box,
	.cl-flexia_article_types_register_sendcontroller .category-steps.flex-box {
	    justify-content: flex-start;
	}
	.category-steps > div {
	    flex: 1;
		margin-bottom: 5px;
	}
	.category-steps > div:not(:last-child) {
		margin-right: 7px;
	}
}

@media only screen and (min-width: 768px) {
	.special-category-filter .oxshortinfo {
		padding: 0 15px;
		flex: 0 0 auto;
	}
	.special-category-filter-content-list li a i {
		order: 3;
	}
}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {
	.special-category-filter-content .special-category-filter-content-title {
		flex: 0 0 50%;
		margin: 0;
		order: 0;
	}
	.special-category-filter-navigation {
		flex: 1 0 50%;
		justify-content: flex-end;
	}
	.category-steps > div {
	    flex: none;
		margin-bottom: 0;
	}
}