:root{
	--sv-default-color-tab-1:#615dfa;
	--sv-default-color-tab-2:#37AC97;
	--sv-default-color-tab-3:#d94869;
	--sv-default-color-tab-4:#e2a723;
	--sv-default-color-tab-5:#a770ef;
	--sv-default-color-tab-6:#e24f23;
	--sv-default-color-tab-7:#e265f9;
	--sv-default-color-tab-8:#65b5f9;
	--sv-default-color-tab-9:#1ca59a;
	--sv-default-color-tab-10:#61667e;
}

#shop-page .custom-nav {
	background-image: url(../../modern5/images/shop/shop-navicon.png),linear-gradient(to right,rgb(97,93,250) 10%,rgba(65,236,255,0.95) 100%),url(../../modern5/images/shop/bg.svg);
	background-position: -2.25rem 0,0 0,0 0;
}

#shop-page .custom-nav:before {
	background: url(../../modern5/images/shop/shop-navicon-alt.png) no-repeat center center/ contain
}

.shop-info{
	margin:1rem 0;
	font-size:calc(1em + 1px);
	padding: 2rem;
}

.shop-info > img {
	width:2.5rem;
	height:2.5rem;
	margin:0 1rem;
}

.shop-info headline, .shop-info desc{
	display:flex;
}

.shop-info headline{
    font-weight: 600;
    font-size: 15px;
    padding-bottom: .4rem;
}

.shop-info desc{
	font-size:calc(1em - 1px);
	color:#939393
}

.shop-content-box[data-item="1"]{
	--sr-color: var(--sv-default-color-tab-1);
}

.shop-content-box[data-item="2"]{
	--sr-color: var(--sv-default-color-tab-2);
}

.shop-content-box[data-item="3"]{
	--sr-color: var(--sv-default-color-tab-3);
}

.shop-content-box[data-item="4"]{
	--sr-color: var(--sv-default-color-tab-4);
}

.shop-content-box[data-item="5"]{
	--sr-color: var(--sv-default-color-tab-5);
}

.shop-content-box[data-item="6"]{
	--sr-color: var(--sv-default-color-tab-6);
}

.shop-content-box[data-item="7"]{
	--sr-color: var(--sv-default-color-tab-7);
}

.shop-content-box[data-item="8"]{
	--sr-color: var(--sv-default-color-tab-8);
}

.shop-content-box[data-item="9"]{
	--sr-color: var(--sv-default-color-tab-9);
}

.shop-content-box[data-item="10"]{
	--sr-color: var(--sv-default-color-tab-10);
}

.shop-page{
    display:flex;
	margin-left:calc(1rem * -1);
	margin-bottom:calc(1rem * -1);
}

.shop-page > div{
	margin-left:1rem;
	margin-bottom:1rem;
}

.shop-nav{
    flex-basis:20%
}

.shop-contents{
    flex:1;
    margin-left:1rem;
}

.shop-content{
	opacity:0;
	visibility:hidden;
	transition:250ms ease;
}

.shop-content.hidden{
	display:none
}

.shop-content.active{
	visibility:visible;
	opacity:1;
}

.shop-content_head{
    background:#fcfcfd;
    padding:1rem;
    border-radius:1rem 1rem 0 0;
    border-bottom:1px solid #eeeeee;
    font-weight:500
}

.shop-content_body {
    background: #ffffff;
    border-radius:0 0 1rem 1rem;
}

.shop-content_body ~ .shop-content_head , form ~ form .shop-content_head{
	margin-top:1rem;
}

.shop-content_row:not(:last-child){
    margin-bottom:1rem
}

.shop-content_submitrow{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:1rem;
    border-top:1px solid #eeeeee;
    border-radius:0 0 1rem 1rem
}

.shop-content_submitrow input.button{
	padding: calc(1rem * .75) calc(1rem * 1.25);
}

.shop-content_row_title{
    padding:1rem;
    border-bottom: 1px solid #eeeeee;
    text-transform:uppercase;
    font-weight:500;
    font-size:calc(1em - 1px);
    letter-spacing: .5px;
}

.shop-content_row_title:empty{
	display:none
}

.shop-content_row_content{
    display:flex;
    align-items:center;
    padding:calc(1rem * 3 / 4) 1rem
}

.shop-content_row_content_info{
    flex-basis:calc(100% / 3);
    display:flex;
	flex-direction:column;
    justify-content:flex-end;
	text-align:right;
    margin-right:1rem;
    padding-right:1rem;
    border-right: 1px solid #eeeeee;
}

.shop-content_row_content_info:empty{
    display:none
}

.shop-content_row_content_info-desc{
	font-size:calc(1em - 2px);
}

.shop-content_row_content_content{
	flex:1;
    align-items:center;
}

.shop-content_row_content_content input{
    margin-right:calc(1rem / 2);
}

.shop-nav-inner{
    background:#ffffff;
    border-radius: 1rem;
}

.shop-nav-head{
    padding:1rem;
    font-weight:500;
    border-bottom:1px solid #eeeeee
}

.shop-nav-item-head {
    padding: calc(1rem * 1.5) 1rem;
    display:flex;
    /*align-items:center;*/
    border-bottom:1px solid #eeeeee;
    cursor:pointer;
	user-select:none;
	position:relative
}

.shop-nav-item-head:first-child{
	border-radius:1rem 0 0 0
}

.shop-nav-item-head:last-child{
	border-radius:0rem 0 1rem 1rem;
	border-bottom: 0;
}

.shop-nav-item-head.active{
	border-left:2px solid #3f5efb;
}

.shop-nav-item:last-child .shop-nav-item-head{
	border-radius: 0 0 1rem 1rem;
	padding: 1.5rem 1.6rem 1.5rem 1.6rem;
}

.shop-nav-item-head.shop-nav-item-showprofilehead{
	padding: 1rem;
}

.shop-nav-item-showprofilebutton{
	flex:1;
	font-size:calc(1em + 1px) !important;
	letter-spacing:.5px;
}

.shop-nav-item-head i{
    color: #3f5efb;
    font-size: 1.5rem;
    margin-right: .7rem;
    margin-left: .6rem;
    margin-top: .2rem;
}

.shop-nav-item-head svg {
    fill: #3f5efb;
    width: 1.5rem;
    height: 2rem;
    margin-right: .9rem;
    margin-left: .7rem;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    flex: 0 1 auto;
}

svg.shop-nav-item-head-plusicon, svg.shop-nav-item-head-minusicon{
	width:.625rem;
	height:.625rem;
	fill:#52536d;
	margin-left:auto;
	position:absolute;
	right:1rem;
	transition:250ms ease-in-out
}

svg.shop-nav-item-head-plusicon, .shop-nav-item-head.close svg.shop-nav-item-head-minusicon{
	opacity:0;
	visibility:hidden
}

.shop-nav-item-head.close svg.shop-nav-item-head-plusicon{
	opacity:1;
	visibility:visible
}

.shop-nav-item-head span {
	display:flex;
	flex-direction:column;
	font-weight: 500;
	font-size: 14px;
	flex: 0 1 auto;
}

.shop-nav-item-head span desc{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: calc(1em - 3px);
	color: #939393;
}

svg.icon{
	width:1.25rem;
	height:1.25rem;
}

.shop-nav-item-body{
	background:#fcfcfd;
	border-bottom:1px solid #eeeeee;
    padding:calc(1rem * 1.5) 1rem;
	overflow:hidden;
	transition:250ms ease
}

.shop-nav-item-body.close{
    max-height:0!important;
	padding:0 1rem;
	border-width:0
}

.shop-nav-item-body-link{
    display:flex;
    align-items:center;
}

.shop-nav-item-body-link {
    display: flex;
    align-items: center;
    font-weight:500
}

.shop-nav-item-body-link:not(:last-child) {
    margin-bottom: .75rem;
}

.shop-nav-item-body-link-icon {
    flex-basis: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.shop-nav-item-body-link:not(:last-child) .shop-nav-item-body-link-icon:after {
    content: '';
    position: absolute;
    top: 100%;
    width: 1px;
    height: 1.5rem;
    background: #eeeeee
}

.shop-nav-item-body-link svg {
    width: .5rem;
    height: .5rem;
    stroke: #3e3f5e;
}

.shop-content-box{
	background:#ffffff;
	border-radius:1rem;
	padding:1rem;
	margin-bottom:1rem
}

.shop-content-row{
	display:flex;
	align-items: center;
	flex-wrap:wrap;
}

.shop-content-row-icon{
	background:var(--sr-color);
	border-radius:calc(1rem / 2);
	padding: 1rem calc(1rem * 2);
	fill:white;
}

.shop-content-row-info{
	flex:1;
	display:flex;
	flex-direction:column;
	margin-left:1rem;
}

.shop-content-row-info ititle{
	color:var(--sr-color);
	font-weight:700;
	font-size:15px;
}

.shop-content-row-info desc {
    font-size: 14px;
}

.shop-content-row-info desc svg{
	margin-bottom: 3px;
	width:.5rem;
	height:.5rem;
	stroke:var(--sr-color);
	display: inline-block;
}

.shop-content-row-opt select{
	border-color: #e5e5e5;
	margin-right:1rem;
	padding: 0.8125rem;
	padding-right: calc(1rem * 4);
	border-radius:1rem;
}

.shop-content-iteminfo svg{
	margin-bottom: 3px;
	width:.5rem;
	height:.5rem;
	stroke:var(--sr-color);
	display: inline-block;
}

.shop-content-iteminfos.show {
    padding: 1rem;
}

.shop-content-iteminfos {
    font-size: 14px;
    padding: 1rem;
    padding-top: 0;
    padding-bottom: 0;
	/*margin:var(--default-margin) 0;*/
    overflow: hidden;
    max-height: 0px;
    transition: padding 350ms ease,  max-height 350ms ease;
	will-change:max-height,padding;
}

.shop-content-iteminfo{
	padding: calc(1rem / 8) 0;
}

a.button.shop-content-row-sbutton{
	background:orange!important;
	padding: 10px 15px;
	border-radius: 10px;
	color: #fff;
	margin-right: 5px;
        font-weight: bold;
	font-size: 14px;
}

a.button.shop-content-row-tbutton{
	background:green!important;
	padding: 10px 15px;
	border-radius: 10px;
	color: #fff;
        font-weight: bold;
	font-size: 14px;
}

@media screen and (max-width: 1120px),screen and (max-device-width:1120px) {
    .shop-page {
        flex-direction:column
    }

    .shop-contents {
        margin-right: 0;
        margin-top: 2rem
    }

    .shop-content-row-opt{
        margin:1rem 0;
    }

    .shop-content-row-opt,
    .shop-content-row-opt select{
        width:100%
    }

    .shop-content-row a.button{
        flex:1
    }

    .shop-info > img{
        display:none
    }
}

.custom-nav {
    display:flex;
    align-items:center;
    width: 100%;
	height:9rem;
    border-radius: 1rem;
    background-image: url(../../modern5/images/shop/index-navicon.png),linear-gradient(to right,rgb(97,93,250) 10%,rgba(65,236,255,0.95) 100%),url(../../modern5/images/shop/bg.svg);
    background-size: contain,100%,100%;
    background-repeat: no-repeat,repeat,repeat;
    background-position: -1.25rem 0px,0 0,0 0;
	background-position: 0 0,0 0,0 0;
	margin:1rem 0;
    color:white;
	position:relative;
}

.custom-nav:before{
    content:'';
    background:url(../../modern5/images/shop/index-navicon-alt.png) no-repeat center center/ contain;
    display:block;
    position: absolute;
    width:3.25rem;
    height:3.25rem;
    left:6rem;
    top:-.75rem;
    z-index: 8;
    transition:250ms ease;
}

.custom-nav:hover:before{
    transform:translateY(-.25rem)
}

.custom-nav_inner{
    margin-left:11rem;
	padding: 1rem 0;
	font-size:calc(1em + 1px);
    text-shadow: 0 0 1px rgba(0,0,0,0.25);
}

.custom-nav span{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
    font-size:1.75rem;
    font-weight:600;
}

.custom-nav p{
	margin:calc(1rem / 4) 0
}

.flex-wbox{
	display:flex;
	align-items:center;
	background:#ffffff;
	padding:1rem;
	border-radius:1rem;
}

.flex-wbox-container{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	margin-bottom:-1rem;
	margin-right:-1rem;
}

.flex-wbox-container > *{
	margin-bottom:1rem;
	margin-right:1rem
}

.flex-wbox-item{
	margin-bottom:1rem;
	margin-right:1rem;
}