:root{
    --color-dark-blue: #00222E;
    --color-light-blue: #4A99B6;
    --color-light-blue2: #0E6483;
    --color-gold-mid:#EFBB49;
    --color-yellow:#FFB400;
    --color-red:#E40037;
    --color-twitch:#9146FF;
    --color-green:#59BC6C;
}

html{
/*    transform: rotate(0.1deg) translateZ(1px) scale(1.02);
 */ 
} 

/* @font-face {
    font-family: 'Tobi';
    font-display: swap;
    src: url('font/tobiregular-webfont.eot');
    src: url('font/tobiregular-webfont.eot?#iefix') format('embedded-opentype'), url('font/tobiregular-webfont.woff2') format('woff2'), url('font/tobiregular-webfont.woff') format('woff'), url('font/tobiregular-webfont.ttf') format('truetype'), url('font/tobiregular-webfont.svg#tobiregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TobiBlack';
    font-display: swap;
    src: url('font/tobi_black-webfont.eot');
    src: url('font/tobi_black-webfont.eot?#iefix') format('embedded-opentype'), url('font/tobi_black-webfont.woff2') format('woff2'), url('font/tobi_black-webfont.woff') format('woff'), url('font/tobi_black-webfont.ttf') format('truetype'), url('font/tobi_black-webfont.svg#tobi_blackregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TobiLight';
    font-display: swap;
    src: url('font/tobilight-webfont.eot');
    src: url('font/tobilight-webfont.eot?#iefix') format('embedded-opentype'), url('font/tobilight-webfont.woff2') format('woff2'), url('font/tobilight-webfont.woff') format('woff'), url('font/tobilight-webfont.ttf') format('truetype'), url('font/tobilight-webfont.svg#tobilight') format('svg');
    font-weight: normal;
    font-style: normal;
} */

@font-face {
    font-family: 'Tobi';
    src: url('font/tobiregular-webfont.woff2') format('woff2'),
         url('font/tobiregular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'TobiBlack';
    src: url('font/tobi_black-webfont.woff2') format('woff2'),
         url('font/tobi_black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'TobiLight';
    src: url('font/tobilight-webfont.woff2') format('woff2'),
         url('font/tobilight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


html {
    scrollbar-gutter: stable;
  }
body, #user-menu {
    scrollbar-gutter: stable both-edges;
  }

  body {
    overflow-y: scroll; /* Show scrollbars */
  }

 

  @media (max-width: 768px){
    body.is-logged-in{
        padding-top: 1rem;
    }
  }

.font-bold{
    font-family: 'TobiBlack';
    font-weight: normal !important;
}
.font-light{
    font-family: 'TobiLight';
    font-weight: normal !important;
}
.font-normal{
    font-family: 'Tobi';
    font-weight: normal !important;
}

a, button, .icon{
    cursor: pointer !important;
}

.text-yellow{
    color: var(--color-yellow);
}


.text-gold{
    color: var(--color-gold-mid);
}
.text-gold::before{
    color: var(--color-gold-mid) !important;
}
.text-light-blue{
    color: var(--color-light-blue);
}
.text-red{ 
    color: var(--color-red) !important;
}
#user-menu .text-red::before{ 
    color: var(--color-red);
}

.divide-light-blue > :not([hidden]) ~ :not([hidden]) {
	--tw-divide-opacity: 1;
	border-color: var(--color-light-blue) ;
}

.bg-twitch{
    background-color: var(--color-twitch);
}
.bg-twitter{
    background-color:rgb(29, 155, 240);
}
.bg-instagram{
    background: rgb(91,81,216);
    background: linear-gradient(45deg, rgba(91,81,216,1) 0%, rgba(193,53,132,1) 50%, rgba(252,175,69,1) 100%);
}
.border-yellow-gradient{
    border-color: var(--color-yellow);
}

.border-blue{
    border-color: var(--color-light-blue2);
}
.bg-light-blue2{
    background-color: var(--color-light-blue2);
}

.page h2 {
	margin: 1.5rem 0 1rem;
}

body {
	/* background: url(../img/bg_pattern.png) no-repeat; */
    background-position: 50% 0;
    background-size: 100% auto;
    background-color: #031E2A;
    background-attachment: fixed;
    font-family: 'Tobi';

}

html::before { 
    content: ' '; 
    display: block; 
    background-image: url(../img/background_04_1080x1920.jpg); 
    background-position: center; 
    background-size: cover; 
    height: 100vh; width: 100vw; 
    top: 0; bottom: 0; left: 0; right: 0; 
    position: fixed; 
    z-index: -10;
}

@media (min-width: 768px) {
	html::before { 
        background-image: url(../img/background_04_1920x1080.jpg); 
    }
}

/* .logo{
    max-width: 320px;
    margin: 2rem auto 0;
} */

.bg-dark-blue{
    background-color: var(--color-dark-blue);
}

.bg-light-blue{
    background-color: var(--color-light-blue);
}

.container{
    max-width: 1024px !important;
} 

nav.footer{
    background: red;
}
body.hasHover .btn-primary:hover{
    background: linear-gradient(179.84deg, #FF9900 0%, #FDD504 100%);
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    color: #362000;
}
.btn-primary{
    background: linear-gradient(179.84deg, #FDD504 0%, #FF9900 100%);
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    color: #362000;
}

.btn-secondary{
background: linear-gradient(179.84deg, #115777 0%, #002F40 100%);
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
color: #EFBB49;
}

body.hasHover .btn-secondary:hover{
    background: linear-gradient(179.84deg, #002F40 0%, #115777 100%);
}

.btn-login{
    /* background: linear-gradient(179.84deg, #115777 0.14%, #002F40 99.86%); */
    box-shadow: 0px 2px 4px rgba(7, 23, 33, 0.3);
    border-radius: 8px;
    color: #4A99B6;
    background: linear-gradient(179.84deg, #115777 0.14%, #002F40 99.86%) padding-box, linear-gradient(to bottom, rgba(90,166, 193,1), rgba(7,70, 99,1)) border-box;
    border: 1px solid transparent;
    border-radius: 8px;
    /* transition-property: all;
    transition-duration: 0.35s; */
    }

    body.hasHover .btn-login:hover{
        color: #fff;
        background: linear-gradient(0, #115777 0.14%, #002F40 99.86%) padding-box, linear-gradient(to bottom, rgba(90,166, 193,1), rgba(7,70, 99,1)) border-box;
        }


.title::before {
	content: "";
	/* Vector */
    box-sizing: border-box;
    width: 100%;
    height: 4px;
    background: #1E3240;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25), inset 0px 1px 0px rgba(14, 100, 131, 0.5);
    display: inline-block;
    top: -4px;
    position: absolute;
    left: 0;
}

.title::after, .user-header::after {
	content: "";
	/* Vector */
    box-sizing: border-box;
    width: 100%;
    height: 4px;
    background: #1E3240;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25), inset 0px 1px 0px rgba(14, 100, 131, 0.5);
    display: inline-block;
    bottom: -4px;
    position: absolute;
    left: 0;
}

.divider{
    box-sizing: border-box;
    width: 100%;
    height: 4px;
    background: #1E3240;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25), inset 0px 1px 0px rgba(14, 100, 131, 0.5);
    display: block;
    margin: 0.6rem 0;
}

.divider-vertical{
    box-sizing: border-box;
    height: 48px;
    width: 5px;
    background: url(../img/vertical_divider.png) no-repeat;
    background-size: contain;
    /* box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25), inset 0px 1px 0px rgba(14, 100, 131, 0.5); */
    display: block;
    margin: 0 0;
}

.title{
    position: relative;
    margin-bottom: 0;
}

h2::before {
	content: "";
	background: url(../img/divider.png) no-repeat;
    background-size: contain;
	width: 58px;
	height: 16px;
	display: inline-block;
    margin-right: 5px;
}

h2::after {
	content: "";
	background: url(../img/divider.png) no-repeat;
    background-size: contain;
	width: 58px;
	height: 16px;
	display: inline-block;
    transform: scaleX(-1);
    margin-left: 5px;
}

.title {
	font-family: 'Tobi';
	font-style: normal;
	font-weight: 900;
	font-size: 28px;
	line-height: 22px;
	align-items: center;
	text-align: center;
	color: #4A99B6;
	text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.45);
	background: linear-gradient(90.03deg, rgba(0, 47, 64, 0) 0.02%, #115777 51.65%, rgba(0, 47, 64, 0) 99.97%);
	padding: 4px 0;
}

.title .active {
	color: #EFBB49 !important;
}


.title a.active{
    background: linear-gradient(180deg, #146280 0%, rgba(20, 98, 128, 0) 100%);
}

.title a{
    transition-property: all;
    transition-duration: 300ms;
    padding: 0 0.75em;
}

body.hasHover .title a:hover{
    color: #fff;
}

h2{
    font-family: 'Tobi';
font-style: normal;
font-weight: 900;
font-size: 28px;
line-height: 22px;

/* identical to box height, or 79% */
align-items: center;
text-align: center;

color: #FFFFFF;

text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.45);
}

.teaser-text{
    background: linear-gradient(180deg, rgba(0, 47, 64, 0.6) 0%, rgba(0, 47, 64, 0.2) 100%);

font-family: 'Tobi';
font-style: normal;
font-weight: 900;
font-size: 24px;

color: #FFFFFF;

/* text / shadow */
text-shadow: 0px 1px 0px #071721;
}

.hourglasses .teaser-text{
    background: linear-gradient(180deg, rgba(128, 83, 0, 0.6) 0%, rgba(128, 83, 0, 0.2) 100%);
}

.teaser-text-xl{
    background: #0E6483;

font-family: 'Tobi';
font-style: normal;
font-weight: 900;
font-size: 24px;

color: #FFFFFF;

/* text / shadow */
text-shadow: 0px 1px 0px #071721;
}

.icon::before{
    color: var(--color-light-blue);
}

.icon-user::before{
    color: var(--color-yellow);
}

.active .icon::before{
    color: var(--color-gold-mid);
}

.icon-trash::before{
    color: #fff;
}

.icon{
    font-size: 1.5rem;
}
.text-yellow.icon::before{
    color: var(--color-gold-mid);
}

.is-logged-in .icon-user.icon-user-status::before{
    color: var(--color-green);
}

#bottom-navigation{

/* background: linear-gradient(180deg, #00222E 49.48%, #071721 100%); */
/* box-shadow: 0px -4px 16px rgba(7, 23, 33, 0.5); */
padding: 1.25rem 0;
/* background: linear-gradient(180deg, rgba(3, 30, 42, 0) 0%, #031E2A 100%); */
/* background: linear-gradient(180deg, rgba(3, 30, 42, 0) 0%, #002F40 100%); */


}

.bottom-navigation-gradient{
    background: linear-gradient(180deg, rgba(3, 30, 42, 0) 0%, #031E2A 90%);
    height: 120px;
    pointer-events: none;
    width: 100%;
    z-index: -1;
}



/* #bottom-navigation::before {
	content: "";
	position: absolute;
	background-color: transparent;
	top: -50px;
	height: 50px;
	width: 50px;
	border-bottom-left-radius: 31px;
	box-shadow: -25px 25px 0 0 #00222E;
    pointer-events: none;
}

#bottom-navigation::after {
	content: "";
	position: absolute;
	background-color: transparent;
	top: -50px;
    right: 0;
	height: 50px;
	width: 50px;
	border-bottom-right-radius: 31px;
	box-shadow: 25px 25px 0 0 #00222E;
    pointer-events: none;
} */

#tabs a{
    background: 
    linear-gradient(179.84deg, #BE0000 0.14%, #1A708F 0.15%, #074562 99.86%) padding-box,
    linear-gradient(to bottom, rgba(90,166, 193,1), rgba(7,70, 99,1)) border-box;
    border-radius: 12px 12px;
    border: 1px solid transparent;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem; 
}

#tabs .tab-first{
    border-radius: 12px 0px 0px 12px;
}

#tabs .tab-last{
    border-radius: 0 12px 12px 0;
}

#tabs .tab-page .icon::before{
    color: #fff;
}


#tabs .tab-account {
	color: #fff;
}
.is-logged-in #tabs .tab-account .icon::before{
    color: var(--color-green);
}
.is-logged-in #tabs .tab-account {
	color: var(--color-green);
}

body.hasHover #tabs .tab-page:hover, #tabs .tab-page.active{
    color: #002F40;
     background: linear-gradient(179.84deg, #FDD504 0.14%, #FF9900 99.86%)padding-box,
    linear-gradient(to bottom, rgba(255,255, 255,1), rgba(255,153, 1,1)) border-box; 
} 

body.hasHover #tabs .tab-page:hover .icon::before, #tabs .tab-page.active .icon::before{
    color: #002F40;
}

#tabs .tab-center{
    border-radius: 0;

}
/* #tabs .tab-account .icon::before, #tabs .tab-account.active .icon::before{
    color: #fff !important;
} */
/* #tabs .tab-account:hover, #tabs .tab-account.active{
    color: #fff;
    background: linear-gradient(180deg, #ff003e 0.0%, var(--color-red) 100%)padding-box,
    linear-gradient(to bottom, var(--color-red), #ff003e) border-box;
} */
/* .is-logged-in #tabs .tab-account:hover, .is-logged-in #tabs .tab-account.active{
    color: #fff;
    background: linear-gradient(180deg, #79ff92 0.0%, var(--color-green) 100%)padding-box,
    linear-gradient(to bottom, var(--color-green), #79ff92) border-box;
} */



/* 

#tabs a{
    background: url(../img/nav_center_2.png) repeat-x;
    background-size: auto 100%;
    border-radius: 0;
    border: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem; 
    margin: 0 9px;
    position: relative;
    height: 60px;
}

#tabs a:hover, #tabs a.active{
    background: url(../img/nav_center.png) repeat-x;
    background-size: auto 100%;
}

#tabs .tab-first{
    border-radius: 0;
}
#tabs .tab-first::before{
    content: "";
    position: absolute;
    width: 12px;
    height: 100%;
    left: -12px;
    top: 0;
    background: url(../img/nav_left_2.png) no-repeat;
    background-size: auto 100%;
}
#tabs .tab-first::after{
    content: "";
    position: absolute;
    width: 12px;
    height: 100%;
    right: -12px;
    top: 0;
    background: url(../img/nav_right_2.png) no-repeat;
    background-size: auto 100%;
}
#tabs .tab-first:hover::before, #tabs .tab-first.active::before{
    background-image: url(../img/nav_left.png) ;
}
#tabs .tab-first:hover::after, #tabs .tab-first.active::after{
    background-image: url(../img/nav_right.png) ;
}

#tabs .tab-center::before{
    content: "";
    position: absolute;
    width: 12px;
    height: 100%;
    left: -12px;
    top: 0;
    background: url(../img/nav_left_2.png) no-repeat;
    background-size: auto 100%;
}
#tabs .tab-center::after{
    content: "";
    position: absolute;
    width: 12px;
    height: 100%;
    right: -12px;
    top: 0;
    background: url(../img/nav_left_2.png) no-repeat;
    background-size: auto 100%;
    transform: scaleX(-1);
}
#tabs .tab-center:hover::before, #tabs .tab-center.active::before{
    background-image: url(../img/nav_left.png) ;
}
#tabs .tab-center:hover::after, #tabs .tab-center.active::after{
    background-image: url(../img/nav_left.png) ;
}

#tabs .tab-last{
    border-radius: 0;
}
#tabs .tab-last::before{
    content: "";
    position: absolute;
    width: 12px;
    height: 100%;
    left: -12px;
    top: 0;
    background: url(../img/nav_right_2.png) no-repeat;
    background-size: auto 100%;
    transform: scaleX(-1);
}
#tabs .tab-last::after{
    content: "";
    position: absolute;
    width: 12px;
    height: 100%;
    right: -12px;
    top: 0;
    background: url(../img/nav_left_2.png) no-repeat;
    background-size: auto 100%;
    transform: scaleX(-1);
}

#tabs .tab-last:hover::before, #tabs .tab-last.active::before{
    background-image: url(../img/nav_right.png) ;
}
#tabs .tab-last:hover::after, #tabs .tab-last.active::after{
    background-image: url(../img/nav_left.png) ;
}
 */








.special-offer-guest{
    background: linear-gradient(90deg, #B10101 0%, #510001 100%);
}

.textline{
    display: inline-block;
    font-weight: bold;
    padding: 0.25em;
    text-transform: uppercase;
    font-family: 'TobiBlack';
}

.textline-black{
    background: #000;
    color: #fff;
}

.textline-yellow{
    background: var(--color-yellow);
    color: #000;
}
.support-creator{
background: url("../img/bg_creator.jpg") no-repeat;
background-size: cover;
}

.welcome{
    background: url("../img/welcome.jpg") no-repeat;
    background-size: cover;
}

.discount-badge {
    background: url("../img/bonus_flag.svg") no-repeat;
    background-position: right center;
    background-size: auto 100%;
    position: absolute;
    text-align: center;
    color: #000;
    padding: 0 0.5rem;
    left: 0px;
    top: 20px;
    line-height: 26px;
    height: 27px;
    width: 62px;
    font-size: 1.25rem;
    filter: drop-shadow(0px 2px 4px rgba(7, 23, 33, 0.3));
}

.specialoffer .discount-badge {
    top: -21px;
    left: -1px;
    position: absolute;
    background: var(--color-red-bonus);
    width: calc(100% + 2px);
    text-transform: uppercase;
    z-index: -1;
    border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: #071721;
box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25);
height: 30px;
}



.slide-menu{
background: rgba(0, 47, 64, 0.92);
box-shadow: 0px -4px 32px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(15px);

/* Note: backdrop-filter has minimal browser support */
border-radius: 12px 12px 0px 0px;
}

.app.is-logged-out .slide-menu{
    padding-bottom: 1rem;
}

.app.is-logged-out #bottom-navigation{
    display: none !important;
}

.trapezoid-top {
	clip-path: polygon(0 0, 100% 0%, 85% 100%, 10% 100%);
}

.parallelogram {
    clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
}

label{
    font-size: 10px;
    text-transform: uppercase;

color: #0E6483;
transform: scale(1.06) rotate(0.2deg) translateY(-2px) translateZ(1px);
transform-origin: left;
backface-visibility: hidden;
position: relative;
    left: 0;
    top: 0.5px;
    display: inline-block;
    will-change: transform;
}

 input[type=text]{
    background: linear-gradient(180deg, #071721 0%, #002F40 100%);
border: 1px solid #000000;
box-shadow: inset 0px 4px 10px rgba(0, 0, 0, 0.25);
border-radius: 8px;
padding: 20px;
height: 48px;
line-height: 48px;
color: var(--color-light-blue);
transition-property: all;
transition-duration: 0.5s; 
outline-width: 0;
box-shadow: none;
--tw-ring-color: transparent !important;
} 

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
}

input[type=text]:focus{
    background: linear-gradient(180deg, #002F40 0%, #115777 100%);
    border: 1px solid #5A99B0;
    outline: none !important;
    outline-width: 0;
} 

input:focus, input.form-control:focus {
    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    color: #fff;
}

:focus-visible {
    outline: none !important;
  }

  .input-error input[type="text"]{
    border-color: var(--color-red) !important;
}



.errortext{
    color: var(--color-red);
    font-size: 10px;
    font-family: "TobiLight";
    font-weight: 400;
}

.foundtext{
    color: var(--color-green);
    font-size: 10px;
    font-family: "TobiLight";
    font-weight: 400;
}

/* ---------------- default with text ------------------------------- */

/* .defaulticon{
    display: block;
 } */

.formcontrol #characterid.input:valid + .defaulticon{
   display: block;
}

input:not([value=""]) + .defaulticon{
    display: block;
 }

input:valid {
    /* color: greenyellow !important; */
 }

/* .formcontrol:focus-within .focusicon{
    display: block;
} */



/* input[value=""] + div, */
#characterid.input:invalid + .defaulticon{
    display: none;
 }

 #characterid.input:focus:valid + .defaulticon{
    filter: brightness(5);
 }
 input:not([value=""]):focus + .defaulticon{
    filter: brightness(5); 
}


.input-error input{
    color: var(--color-red);
}
.input-error .errortext{
    display: block;
}
.input-error .erroricon{
    display: block;
}
.formcontrol.input-error .defaulticon,
.formcontrol.input-error .focusicon{
    display: none !important;
}

.input-found input{
    color: var(--color-green);
}
.input-found .foundtext{
    display: block;
}
.input-found .foundicon{
    display: block !important;
}
.formcontrol.input-found .defaulticon,
.formcontrol.input-found .focusicon{
    display: none !important;
} 

.icon-circle-check:before {
    color: #59bc6c !important;
}

.input-found input[type="text"]{
    border-color: var(--color-green) !important;
}


.input-found input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color:  linear-gradient(180deg, #002F40 0%, #115777 100%) !important;
    color: var(--color-green) !important;
    border-color: var(--color-green) !important;
}

input:-internal-autofill-selected {
    appearance: none !important;
    background-image: none !important;
    background-color:  linear-gradient(180deg, #002F40 0%, #115777 100%) !important;
    color: #fff !important;
}


.input-found input:-webkit-autofill,
.input-found input:-webkit-autofill:hover, 
.input-found input:-webkit-autofill:focus,
.input-found textarea:-webkit-autofill,
.input-found textarea:-webkit-autofill:hover,
.input-found textarea:-webkit-autofill:focus,
.input-found select:-webkit-autofill,
.input-found select:-webkit-autofill:hover,
.input-found select:-webkit-autofill:focus {
  border: 1px solid var(--color-green);
  -webkit-text-fill-color: var(--color-green);
  -webkit-box-shadow: 0 0 0px 1000px #002F40 inset;
  transition: background-color 5000s ease-in-out 0s;
  -webkit-box-shadow: inset 0 1.5em 1.5em 0 #002F40, inset 0 -2.5em 1em 0 #115777;
}

@-webkit-keyframes autofillfound {
    to {
        color: var(--color-green);
        background: linear-gradient(180deg, #002F40 0%, #115777 100%);
    }
}

.input-found input:-webkit-autofill {
    -webkit-animation-name: autofillfound;
    -webkit-animation-fill-mode: both;
    caret-color: #fff;
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid #5A99B0;
  -webkit-text-fill-color: #5A99B0;
  -webkit-box-shadow: 0 0 0px 1000px #002F40 inset;
  transition: background-color 5000s ease-in-out 0s;
  -webkit-box-shadow: inset 0 1.5em 1.5em 0 #002F40, inset 0 -2.5em 1em 0 #115777;
}

@-webkit-keyframes autofill {
    to {
        color: #5A99B0;
        background: linear-gradient(180deg, #002F40 0%, #115777 100%);
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
    caret-color: white;
}

.input-error input:-webkit-autofill,
.input-error input:-webkit-autofill:hover, 
.input-error input:-webkit-autofill:focus,
.input-error textarea:-webkit-autofill,
.input-error textarea:-webkit-autofill:hover,
.input-error textarea:-webkit-autofill:focus,
.input-error select:-webkit-autofill,
.input-error select:-webkit-autofill:hover,
.input-error select:-webkit-autofill:focus {
  border: 1px solid var(--color-red);
  -webkit-text-fill-color: var(--color-red);
  -webkit-box-shadow: 0 0 0px 1000px #002F40 inset;
  transition: background-color 5000s ease-in-out 0s;
  -webkit-box-shadow: inset 0 1.5em 1.5em 0 #002F40, inset 0 -2.5em 1em 0 #115777;
}

@-webkit-keyframes autofillerror {
    to {
        color: var(--color-red);
        background: linear-gradient(180deg, #002F40 0%, #115777 100%);
    }
}

.input-error input:-webkit-autofill {
    -webkit-animation-name: autofillerror;
    -webkit-animation-fill-mode: both;
    caret-color: #fff;
}

 input:focus {
    -webkit-text-fill-color: #fff;
} 
.input-error input {
    -webkit-text-fill-color: var(--color-red);
} 


 input:focus:-webkit-autofill,
input:focus:-webkit-autofill:hover, 
input:focus:-webkit-autofill:focus,
textarea:focus:-webkit-autofill,
textarea:focus:-webkit-autofill:hover,
textarea:focus:-webkit-autofill:focus,
select:focus:-webkit-autofill,
select:focus:-webkit-autofill:hover,
select:focus:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
} 

@-webkit-keyframes autofillfocus {
    to {
        color: #fff !important;
        background: linear-gradient(180deg, #002F40 0%, #115777 100%);
    }
}

input:focus:-webkit-autofill {
    -webkit-animation-name: autofillfocus;
    -webkit-animation-fill-mode: both;
    caret-color: #fff;
}



.input-error input:focus:-webkit-autofill,
.input-error input:focus:-webkit-autofill:hover, 
.input-error input:focus:-webkit-autofill:focus,
.input-error textarea:focus:-webkit-autofill,
.input-error textarea:focus:-webkit-autofill:hover,
.input-error textarea:focus:-webkit-autofill:focus,
.input-error select:focus:-webkit-autofill,
.input-error select:focus:-webkit-autofill:hover,
.input-error select:focus:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-red) !important;
} 



.formcontrol input:focus::-webkit-input-placeholder { color:transparent !important;-webkit-text-fill-color: transparent !important; }
.formcontrol input:focus:-moz-placeholder { color:transparent !important;-webkit-text-fill-color: transparent !important; } /* FF 4-18 */
.formcontrol input:focus::-moz-placeholder { color:transparent !important; -webkit-text-fill-color: transparent !important;} /* FF 19+ */
.formcontrol input:focus:-ms-input-placeholder { color:transparent !important;-webkit-text-fill-color: transparent !important; } /* IE 10+ */


  #bottom-navigation a{
      cursor: pointer;
  }

  .cart-user{
    background: linear-gradient(90.00deg, #002F40 0%, #115777 50%, rgba(0, 47, 64, 0.5) 100%);

    /* blue_mid */
    border: 1px solid #0E6483;
    padding: 10px 20px;
  }

  .contents > div {
      border-bottom: 1px solid var(--color-light-blue);
  }

  .contents > div:last-of-type, .contents > div.last  {
    border-bottom: 0;
}

/* SPECIAL OFFER DEFAULT */
.so-title {
	/* background: linear-gradient(180deg, #52001C 0%, #9F0E3B 100%); */
	/* clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 24px 100%); */
	background: url("../img/so_default_header.svg") no-repeat;
	/* text-shadow: 0px 1px 0px #071721; */
	background-size: 100% 100%;
	min-width: 300px;
	height: 42px;
	/* top: -5; */
    line-height: 42px !important;
}
.so-title {
	/* background: linear-gradient(180deg, #52001C 0%, #9F0E3B 100%); */
	/* clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 24px 100%); */
	background: url("../img/so_default_header.svg") no-repeat;
	/* text-shadow: 0px 1px 0px #071721; */
	background-size: 100% 100%;
	min-width: 300px;
	height: auto;
	/* top: -5; */
	line-height: 42px !important;
	background-position: center top;
	/* padding: 1rem; */
}

.so-subtitle{
    position: relative;
background: linear-gradient(270deg, rgba(88, 2, 31, 0) 0%, rgba(88, 2, 31, 0.8) 10%, rgba(88, 2, 31, 0.8) 90%, rgba(88, 2, 31, 0) 100%);
color: #FFA7B1;

}

.so-subtitle::before,
.so-subtitle::after{
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
background: linear-gradient(270deg, rgba(252, 162, 172, 0) -0.16%, #FCA2AC 18.62%, #FCA2AC 80.9%, rgba(252, 162, 172, 0) 100%);
}

.so-subtitle::after{
    top: auto;
    bottom: 0;
}

.content-item{
    background: linear-gradient(180deg, #FA4B60 0%, rgba(134, 0, 32, 0.2) 100%);
box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25);
}
body.hasHover .so-default.btn:hover{
    background: linear-gradient(179.84deg, #760000 0%, #D9072D 100%);
    color: #fff;
}
.so-default.btn{
    background: linear-gradient(179.84deg, #D9072D 0%, #760000 100%);
    color: #fff;
}


/* SPECIAL OFFER WINTER */
.specialofferwinter .so-title{
  /*  background: linear-gradient(180deg, #002F40 0%, #0E6483 100%); */
  background-image: url("../img/so_winter_header.svg");
}

.specialofferwinter .so-subtitle{
  color: #013244;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.8) 90%, rgba(255, 255, 255, 0) 100%);
}

.specialofferwinter .so-subtitle::before,
.specialofferwinter .so-subtitle::after{
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) -0.16%, #FFFFFF 18.62%, #FFFFFF 80.9%, rgba(255, 255, 255, 0) 100%);
}
.specialofferwinter .content-item{
    background: linear-gradient(180deg, #0E6483 0%, rgba(0, 47, 64, 0.2) 100%);
background-blend-mode: multiply;
box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25);
}
.specialofferwinter .btnCart{
    background: linear-gradient(179.84deg, #3EA4D2 0%, #005E81 100%);
    color: #fff;
}
body.hasHover .specialofferwinter .btnCart:hover{
    background: linear-gradient(179.84deg, #005E81 0%, #3EA4D2 100%);
}
.so-login .so-title{
    /*  background: linear-gradient(180deg, #002F40 0%, #0E6483 100%); */
    background-image: url("../img/so_login_header.svg");
  }


.text-shadow{
    text-shadow: 0px 1px 0px #071721;
}

.dealer-glow{
    filter: drop-shadow(0px -10px 35px rgba(255, 255, 255, 1.0));
}

.dealer-glow-login{
    filter: drop-shadow(0px -10px 44px rgba(0, 0, 0, 0.25));
}



.line-through{
text-decoration-color: var(--color-red);
text-decoration-thickness: 2px;
}

.accountbar{
    background: linear-gradient(90deg, #002F40 0%, #115777 50%, #002F40 100%);

    /* image / shadow */
    box-shadow: 0px 2px 4px rgba(7, 23, 33, 0.3);
    border-radius: 0px 0px 16px 16px;
}


.splide__pagination {
	bottom: 0;
	left: 0;
	padding: 0 1em;
	position: relative !important;
	margin-top: 1em !important;
}

.splide__pagination__page {
	background: #ccc !important;
}

.modal h2::before, .modal h2::after{
    display: none;
}

.modal h2{
    text-align: left;
    color: #000;
    text-shadow: none;
}

.modal ol{
    padding-left: 1rem;
}

/* .erroricon { 
    display: block; 
    background-image: url(../img/x-circle.svg); 
    background-position: center; 
    background-size: cover; 
    height: 32px; width: 32px; 
} */
.foundicon { 
    display: block; 
   /*  background: var(--color-green); 
    height: 32px; width: 32px;  */
}/* .foundicon .icon::before { 
    color: #fff;
} */
 
#ot-sdk-btn.ot-sdk-show-settings, #ot-sdk-btn.optanon-show-settings {
	color: inherit !important;
	border: inherit !important;
	padding: inherit !important;
	font-size: inherit !important;
	line-height: 1;
    border-left: 0px solid var(--color-light-blue) !important;
    padding: 0 1rem !important;
}

#ot-sdk-btn.ot-sdk-show-settings:hover, #ot-sdk-btn.optanon-show-settings:hover {
    color: inherit !important;
    background-color: transparent !important;
  }

   @media (max-width: 767px) {
	#ot-sdk-btn.ot-sdk-show-settings, #ot-sdk-btn.optanon-show-settings, .creatorprogram {
        border-left: 0px !important;
        /* padding: 0 1rem !important;*/
       /*  display: block !important;
        text-align: center !important;
        width: 100% !important;  */
    }
    .creatorprogram {
        border-left: 0px !important;
        /* padding: 0 1rem !important;*/
        display: block !important;
        text-align: center !important;
        width: 100% !important; 
    }
}  


.input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgba(14, 100, 131, 0.5);
    opacity: 1; /* Firefox */
  }
  
  .input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(14, 100, 131, 0.5);
  }
  
  .input::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(14, 100, 131, 0.5);
  }

  .input:focus::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--color-light-blue);
    opacity: 1; /* Firefox */
  }
  
  .input:focus:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--color-light-blue);
  }
  
  .input:focus::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--color-light-blue);
  }


  .modal a, .modal button{
    text-decoration: underline;
  }

  .tooltip{
    transform: rotate(0.1deg);
    margin-left: 92px !important;
  }

  .tooltip-arrow{
    margin-left: -92px;
    opacity: 1 !important;
    position: absolute;
left: 0;
  }

  #tooltop-arrow-base{
    opacity: 0 !important;
  }

  @media (max-width: 767px) {
    .tooltip{
        margin-left: 60px !important;
      }
    
      .tooltip-arrow{
        margin-left: -60px;
      }
  }


.psst{
    background:url('../img/login_bar.jpg') no-repeat;
    background-size: cover;
    background-position: center center;
    filter: drop-shadow(0 -25px 25px rgb(0 0 0 / 0.5));
}

.psst button{
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 50px 70px #0E6483;
}

.psst .so-title{
    line-height: 56px !important;
    filter: drop-shadow(0px 8px 16px rgba(7, 23, 33, 0.5));
}