:root{
	--sv-default-color-tab-1:#615dfa;
	--sv-default-color-tab-2:#23d2e2;
	--sv-default-color-tab-3:#f16caf;
	--sv-default-color-tab-4:#e2a723;
	--sv-default-color-tab-5:#99e223;
	--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(../../../stabilizer/assets/images/shop-navicon.png),linear-gradient(to right,rgb(97,93,250) 10%,rgba(65,236,255,0.95) 100%),url(../../../stabilizer/assets/bg.svg);
	background-position: -2.25rem 0,0 0,0 0;
}

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

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

.shop-info > img {
	width:2.5rem;
	height:2.5rem;
	margin:0 var(--default-margin);
}

.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:var(--default-light-color)
}

.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(var(--default-margin) * -1);
	margin-bottom:calc(var(--default-margin) * -1);
}

.shop-page > div{
	margin-left:var(--default-margin);
	margin-bottom:var(--default-margin)
}

.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:var(--trow-bg-hover);
    padding:var(--default-padding);
    border-radius:var(--default-border-radius) var(--default-border-radius) 0 0;
    border-bottom:1px solid var(--default-border-color);
    font-weight:500
}

.shop-content_body {
    background: var(--trow-bg);
    border-radius:0 0 var(--default-border-radius) var(--default-border-radius)
}

.shop-content_body ~ .shop-content_head , form ~ form .shop-content_head{
	margin-top:var(--default-margin)
}

.shop-content_row:not(:last-child){
    margin-bottom:var(--default-margin)
}

.shop-content_submitrow{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:var(--default-padding);
    border-top:1px solid var(--default-border-color);
    border-radius:0 0 var(--default-border-radius) var(--default-border-radius)
}

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

.shop-content_row_title{
    padding:var(--default-padding);
    border-bottom: 1px solid var(--default-border-color);
    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(var(--default-padding) * 3 / 4) var(--default-padding)
}

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

.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(var(--default-margin) / 2);
}

.shop-nav-inner{
    background:var(--trow-bg);
    border-radius: var(--default-border-radius);
}

.shop-nav-head{
    padding:var(--default-padding);
    font-weight:500;
    border-bottom:1px solid var(--default-border-color)
}

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

.shop-nav-item-head:first-child{
	border-radius:var(--default-border-radius) 0 0 0
}

.shop-nav-item-head.active{
	border-left:2px solid var(--main-cyan);
}

.shop-nav-item:last-child .shop-nav-item-head{
	border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);
	padding: 1.5rem 1.6rem 1.5rem 1.6rem;
}

.shop-nav-item-head.shop-nav-item-showprofilehead{
	padding: var(--default-padding);
}

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

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

.shop-nav-item-head svg {
    fill: #23d2e2;
    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:var(--default-color);
	margin-left:auto;
	position:absolute;
	right:var(--default-padding);
	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: calc(1em + 2px);
	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: var(--default-light-color);
}

.shop-nav-item-body{
	background:var(--trow-bg-hover);
	border-bottom:1px solid var(--default-border-color);
    padding:calc(var(--default-padding) * 1.5) var(--default-padding);
	overflow:hidden;
	transition:250ms ease
}

.shop-nav-item-body.close{
    max-height:0!important;
	padding:0 var(--default-padding);
	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: var(--default-border-color)
}

.shop-nav-item-body-link svg {
    width: .5rem;
    height: .5rem;
    stroke: var(--default-link-color);
}

.shop-content-box{
	background:var(--trow-bg);
	border-radius:var(--default-border-radius);
	padding:var(--default-padding);
	margin-bottom:var(--default-margin)
}

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

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

.shop-content-row-info{
	flex:1;
	display:flex;
	flex-direction:column;
	margin-left:var(--default-margin);
}

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

.shop-content-row-info desc svg{
	width:.5rem;
	height:.5rem;
	stroke:var(--sr-color);
}

.shop-content-row-opt select{
	margin-right:var(--default-margin);
	padding: 0.8125rem;
	padding-right: calc(var(--default-padding) * 4);
}

.shop-content-iteminfo svg{
	width:.5rem;
	height:.5rem;
	stroke:var(--sr-color);
	margin-right:var(--default-margin);
}

.shop-content-iteminfos.show {
    padding: var(--default-padding);
}

.shop-content-iteminfos {
    padding: var(--default-padding);
    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(var(--default-padding) / 8) 0;
}

a.button.shop-content-row-sbutton{
	background:orange!important
}

.header-welcomeblock > a > svg {
    animation: none;
    fill: rgba(255,255,255,0.5)!important
}

.header-welcomeblock > a:hover > svg {
    fill: white!important
}

@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:var(--default-margin) 0;
    }

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

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

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