@charset "utf-8";
body,div,dl,dd,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0;padding:0; box-sizing:border-box; -moz-box-sizing:border-box;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style: none;}
ol, ul, li {font-family: inherit;font-size: 100%;font-weight: inherit;font-style: inherit;vertical-align: baseline;white-space: normal;text-align: left;margin: 0;padding: 0;border: 0;outline: 0;background: transparent;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;}
input:focus{outline:none;}
textarea:focus{outline:none;}
button{appearance: none; background: transparent;}

body{background:var(--bg); color:var(--fg); font-family:var(--poppins);}

div.bg{position:fixed; top:0; right:0; left:0; bottom:0; background:var(--bg); overflow:hidden; opacity:0.5; transition:all 0.5s; z-index:-11;}
div.firnissage{position:fixed; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 30%); z-index:-10;}
div.bg{
  --fa:0.0;
  --ta:260.0;
  --fx:30.0;
  --tx:-23.0;
  --fy:-17.0;
  --ty:10.0;
  --astep:calc((var(--ta) - var(--fa)) / 12.0 );
  --xstep:calc((var(--tx) - var(--fx)) / 12.0 );
  --ystep:calc((var(--ty) - var(--fy)) / 12.0 );
  --zoom:100;
}
div.bginner{position:absolute; top:-100%; bottom:-100%; left:-100%; right:-100%; background-size:cover; background-repeat:no-repeat; transition:all 2s;  background-position:center center; background-image:url(bg-accent.svg); 
  transform:rotate(calc(calc(var(--fa) + calc(var(--i) * var(--astep))) * 1deg)) translate(calc(calc(var(--fx) + calc(var(--i) * var(--xstep))) * 1%), calc(calc(var(--fy) + calc(var(--i) * var(--ystep))) * 1%));
inset:calc(var(--zoom) * 1%);
}
body.in div.bg{
  --zoom:-96;
}
 

            :root{
  --maxwidth:1200px;
  --gtime:0.4s;
  --glassblur:4px;
  --glassradius:10px;  
  --glasspadding:30px;   
}

.clearfix:after {visibility: hidden;display: block;font-size: 0; content:' '; clear: both; height: 0;}
.trans{transition:all var(--gtime);}
.transcolor{transition:color var(--gtime), background-color var(--gtime);}
.layer{display:block; position:absolute; top:0; right:0; bottom:0; left:0;}
.glass{border:1px solid var(--glassborder); background-color:var(--glassbg); backdrop-filter:blur(var(--glassblur));  -webkit-backdrop-filter:blur(var(--glassblur)); border-radius:var(--glassradius); padding:var(--glasspadding);}
@keyframes roticon{
  0% {transform:rotate(360deg);}
  100% {transform:rotate(0deg);}
}

@keyframes jello-horizontal {
  0% {transform: scale3d(1, 1, 1);}
  30% {transform: scale3d(1.25, 0.75, 1);}
  40% {transform: scale3d(0.75, 1.25, 1);}
  50% {transform: scale3d(1.15, 0.85, 1);}
  65% {transform: scale3d(0.95, 1.05, 1);}
  75% {transform: scale3d(1.05, 0.95, 1);}
  100% {transform: scale3d(1, 1, 1);}
}
.jello {animation: jello-horizontal 0.9s both;}
body{font-size:clamp(12px,1.4vw,20px)}
:root{
 --fg:rgb(255, 255, 255);
 --fg:oklch(1.000 0.000 0.000 / 1.000);
 --bg:rgb(0, 0, 0);
 --bg:oklch(0.000 0.000 0.000 / 1.000);
 --accent:rgb(178, 203, 11);
 --accent:oklch(0.795 0.184 118.333 / 1.000);
 --accentpale:rgb(135, 158, 0);
 --accentpale:oklch(0.655 0.184 118.333 / 1.000);
 --darkest:rgb(255, 255, 255);
 --darkest:oklch(1.000 0.000 0.000 / 1.000);
 --icon-white:rgb(255, 255, 255);
 --icon-white:oklch(1.000 0.000 0.000 / 1.000);
 --icon-dark:rgb(135, 158, 0);
 --icon-dark:oklch(0.655 0.184 118.333 / 1.000);
 --icon-accent:rgb(178, 203, 11);
 --icon-accent:oklch(0.795 0.184 118.333 / 1.000);
 --glassbg:rgba(255, 255, 255, 0.4);
 --glassbg:oklch(1.000 0.000 0.000 / 0.400);
 --glassborder:rgba(255, 255, 255, 0.2);
 --glassborder:oklch(1.000 0.000 0.000 / 0.200);
 --glassshadow:rgba(0, 0, 0, 0.3);
 --glassshadow:oklch(0.000 0.000 0.000 / 0.300);
 --error:rgb(255, 216, 219);
 --error:oklch(0.956 0.093 15.874 / 1.000);
 --info:rgb(222, 248, 255);
 --info:oklch(0.968 0.041 243.771 / 1.000);
 --ok:rgb(214, 255, 170);
 --ok:oklch(0.976 0.134 131.900 / 1.000);
 --icon-error:rgb(255, 5, 84);
 --icon-error:oklch(0.636 0.253 15.874 / 1.000);
 --icon-info:rgb(2, 166, 255);
 --icon-info:oklch(0.698 0.171 243.771 / 1.000);
 --icon-ok:rgb(90, 189, 0);
 --icon-ok:oklch(0.706 0.264 131.900 / 1.000);
 --cashbg:rgba(255, 255, 255, 0.67);
 --cashbg:oklch(1.000 0.000 0.000 / 0.670);
}

@font-face {
  font-family: 'poppins';
  src: url('https://lemon7.club/exxite/res/poppins-medium-webfont.woff2') format('woff2'),
  url('https://lemon7.club/exxite/res/poppins-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'poppins';
  src: url('https://lemon7.club/exxite/res/poppins-black-webfont.woff2') format('woff2'),
  url('https://lemon7.club/exxite/res/poppins-black-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
:root{
  --poppins : 'poppins','Arial','Helvetica','Roboto',sans-serif;
}
:root{
 --icon-star-white:url(star-white.svg);
 --icon-star-dark:url(star-dark.svg);
 --icon-star-accent:url(star-accent.svg);
 --icon-star-error:url(star-error.svg);
 --icon-star-info:url(star-info.svg);
 --icon-star-ok:url(star-ok.svg);

 --icon-withdraw-white:url(withdraw-white.svg);
 --icon-withdraw-dark:url(withdraw-dark.svg);
 --icon-withdraw-accent:url(withdraw-accent.svg);
 --icon-withdraw-error:url(withdraw-error.svg);
 --icon-withdraw-info:url(withdraw-info.svg);
 --icon-withdraw-ok:url(withdraw-ok.svg);

 --icon-ok-white:url(ok-white.svg);
 --icon-ok-dark:url(ok-dark.svg);
 --icon-ok-accent:url(ok-accent.svg);
 --icon-ok-error:url(ok-error.svg);
 --icon-ok-info:url(ok-info.svg);
 --icon-ok-ok:url(ok-ok.svg);

 --icon-check-white:url(check-white.svg);
 --icon-check-dark:url(check-dark.svg);
 --icon-check-accent:url(check-accent.svg);
 --icon-check-error:url(check-error.svg);
 --icon-check-info:url(check-info.svg);
 --icon-check-ok:url(check-ok.svg);

 --icon-menu-white:url(menu-white.svg);
 --icon-menu-dark:url(menu-dark.svg);
 --icon-menu-accent:url(menu-accent.svg);
 --icon-menu-error:url(menu-error.svg);
 --icon-menu-info:url(menu-info.svg);
 --icon-menu-ok:url(menu-ok.svg);

 --icon-search-white:url(search-white.svg);
 --icon-search-dark:url(search-dark.svg);
 --icon-search-accent:url(search-accent.svg);
 --icon-search-error:url(search-error.svg);
 --icon-search-info:url(search-info.svg);
 --icon-search-ok:url(search-ok.svg);

 --icon-bg-white:url(bg-white.svg);
 --icon-bg-dark:url(bg-dark.svg);
 --icon-bg-accent:url(bg-accent.svg);
 --icon-bg-error:url(bg-error.svg);
 --icon-bg-info:url(bg-info.svg);
 --icon-bg-ok:url(bg-ok.svg);

 --icon-lang-white:url(lang-white.svg);
 --icon-lang-dark:url(lang-dark.svg);
 --icon-lang-accent:url(lang-accent.svg);
 --icon-lang-error:url(lang-error.svg);
 --icon-lang-info:url(lang-info.svg);
 --icon-lang-ok:url(lang-ok.svg);

 --icon-close-white:url(close-white.svg);
 --icon-close-dark:url(close-dark.svg);
 --icon-close-accent:url(close-accent.svg);
 --icon-close-error:url(close-error.svg);
 --icon-close-info:url(close-info.svg);
 --icon-close-ok:url(close-ok.svg);

 --icon-arrow_down-white:url(arrow_down-white.svg);
 --icon-arrow_down-dark:url(arrow_down-dark.svg);
 --icon-arrow_down-accent:url(arrow_down-accent.svg);
 --icon-arrow_down-error:url(arrow_down-error.svg);
 --icon-arrow_down-info:url(arrow_down-info.svg);
 --icon-arrow_down-ok:url(arrow_down-ok.svg);

 --icon-info-white:url(info-white.svg);
 --icon-info-dark:url(info-dark.svg);
 --icon-info-accent:url(info-accent.svg);
 --icon-info-error:url(info-error.svg);
 --icon-info-info:url(info-info.svg);
 --icon-info-ok:url(info-ok.svg);

 --icon-deposit-white:url(deposit-white.svg);
 --icon-deposit-dark:url(deposit-dark.svg);
 --icon-deposit-accent:url(deposit-accent.svg);
 --icon-deposit-error:url(deposit-error.svg);
 --icon-deposit-info:url(deposit-info.svg);
 --icon-deposit-ok:url(deposit-ok.svg);

 --icon-refresh-white:url(refresh-white.svg);
 --icon-refresh-dark:url(refresh-dark.svg);
 --icon-refresh-accent:url(refresh-accent.svg);
 --icon-refresh-error:url(refresh-error.svg);
 --icon-refresh-info:url(refresh-info.svg);
 --icon-refresh-ok:url(refresh-ok.svg);

 --icon-logo-white:url(logo-white.svg);
 --icon-logo-dark:url(logo-dark.svg);
 --icon-logo-accent:url(logo-accent.svg);
 --icon-logo-error:url(logo-error.svg);
 --icon-logo-info:url(logo-info.svg);
 --icon-logo-ok:url(logo-ok.svg);

 --icon-error-white:url(error-white.svg);
 --icon-error-dark:url(error-dark.svg);
 --icon-error-accent:url(error-accent.svg);
 --icon-error-error:url(error-error.svg);
 --icon-error-info:url(error-info.svg);
 --icon-error-ok:url(error-ok.svg);

 --icon-logout-white:url(logout-white.svg);
 --icon-logout-dark:url(logout-dark.svg);
 --icon-logout-accent:url(logout-accent.svg);
 --icon-logout-error:url(logout-error.svg);
 --icon-logout-info:url(logout-info.svg);
 --icon-logout-ok:url(logout-ok.svg);

}
div.xhead1{background:url(logo-dark.svg) no-repeat 20px center; background-size:180px; min-height:80px; max-width:var(--maxwidth); margin:0 auto; 
  display:flex; justify-content:flex-end; align-items:center; gap:10px; padding:0 20px;}

a.xxbutton{display:inline-block; color:var(--fg); text-transform:uppercase; margin:0; border:1px solid var(--accentpale); border-radius:5px;}
a.xxbutton:link{border-color:var(--accentpale);}
a.xxbutton:visisted{border-color:var(--accentpale);}
a.xxbutton:hover{border-color:var(--accent); background-color:var(--accentpale);}
a.xxbutton:active{border-color:var(--fg); background-color:var(--darkest);}

div.xhead1 a.xxbutton.xregister:link{background-color:var(--accentpale);}
div.xhead1 a.xxbutton.xregister:visisted{background-color:var(--accentpale);}
div.xhead1 a.xxbutton.xregister:hover{background-color:var(--accent);}
div.xhead1 a.xxbutton.xregister:active{background-color:var(--darkest);}

div.xhead1 a.xxbutton.xlang{position:relative; text-transform:none;}
div.xhead1 a.xxbutton.xlang:after{content:''; display:block; position:absolute; top:0; bottom:0; right:calc(100% - 20px); aspect-ratio:1 / 1; background:url(lang-white.svg) no-repeat center center; background-size:60%;}
div.xhead1 a.xxbutton.xlang:link{border-color:transparent; background-color:transparent;}
div.xhead1 a.xxbutton.xlang:visisted{border-color:transparent;background-color:transparent;}
div.xhead1 a.xxbutton.xlang:hover{border-color:transparent; color:var(--accent);background-color:transparent;}
div.xhead1 a.xxbutton.xlang:active{border-color:transparent;background-color:transparent;}

div.xhead1 a.xxbutton.xlogout{position:relative; padding-left:40px;}
div.xhead1 a.xxbutton.xlogout:after{content:''; display:block; position:absolute; top:0; bottom:0; right:calc(100% - 40px); aspect-ratio:1 / 1; background:url(logout-white.svg) no-repeat center center; background-size:60%;}
@media only screen and (max-width: 800px)
{
  div.xhead1{background:url(logo-dark.svg) no-repeat center 20px; background-size:240px; padding:120px 20px 20px 20px; justify-content:flex-start;}
  div.xhead1 a.xxbutton.xlang{margin-right: auto;}
}  

div.xbody{max-width:var(--maxwidth); margin:0 auto;}
div.gamelist{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); grid-gap:20px; margin:10px 20px 40px 20px;}
div.xfav{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); grid-gap:20px; padding:10px 20px 40px 20px; max-width:var(--maxwidth); margin:0 auto;}

div.game-item{position:relative;border:3px solid var(--accentpale); border-radius:10px; backdrop-filter:blur(var(--glassblur)); -webkit-backdrop-filter:blur(var(--glassblur)); background:url(star-white.svg) no-repeat center center; background-size:20%; background-color:var(--glassbg); transform-style: preserve-3d; transform: perspective(1000px);
  border-bottom: 30px solid var(--accentpale); box-shadow: var(--accentpale) 0 0 0 5px inset;
}

@media only screen and (max-width: 600px){
  div.xfav{grid-template-columns:1fr 1fr;}
  div.gamelist{grid-template-columns:1fr 1fr;}
}

@keyframes rot{
  0% {transform:scale(1); background-color:var(--accent);}
  100% {transform:scale(1.3);background-color:var(--accentpale);}
}
div.game-item:hover{border-color:var(--accent); box-shadow: var(--accent) 0 0 0 5px inset;}
div.game-item img{width:100%; aspect-ratio:2 / 1; object-fit:cover; display:block; border-radius:6px;}
div.game-item a.start{display:block; position:absolute; inset:0;}
div.game-item a.start span{display:none;}
div.game-item p{display:block; position:absolute; bottom:-1.2em; left:0; right:0; text-align:center; text-transform:uppercase; transform: translateZ(20px)}
div.game-item:hover p{text-shadow:0 1px 0 var(--accentpale);}
div.game-item.hidden{display:none;}
div.game-item a.fav span.remove{display:none;}
div.game-item:after{content:attr(data-fun); display:block; position:absolute; top:-10px; left:-10px; border-radius:10px; font-size:0.6em; padding:0.5em 1em; line-height:1em; background:var(--accent); color:var(--fg);}
body.in div.game-item:after{content:none;}

div.game-item a.fav{opacity:0; display:block; position:absolute; right:-10px; top:-10px; text-decoration:none; font-size:0.5em; padding:2px 25px 2px 10px; border-radius:10px; 
    background:var(--bg); color:var(--fg);}
div.game-item a.fav:after{content:''; display:block; position:absolute; top:0; right:0; background:url(star-white.svg) no-repeat center center var(--accentpale); background-size:15px; width:20px; height:20px; border-radius:50%;
  animation:rot 0.5s ease-in-out 0.1s infinite alternate;}
div.game-item:hover a.fav{opacity:1;}

div.xfav div.game-item a.fav:after{background-image:url(close-white.svg); animation:none; background-size:10px;}
div.xfav div.game-item a.fav span.add{display:none;}
div.xfav div.game-item a.fav span.remove{display:block;}


div.item_search{position:relative; background:url(search-white.svg) no-repeat 10px center var(--glassshadow); background-size:20px; border:1px solid var(--accentpale); border-radius:20px; display:grid; grid-template-columns:30px auto 30px; margin:0px 20px 0 20px;}
div.item_search input{width:100%; background:transparent; color:var(--fg); padding:10px 20px; border:none; grid-column-start:2; grid-column-end:3; text-transform:uppercase;}
a.full-btn{display:none; position:absolute; right:0; top:0; bottom:0px; width:40px;}
a.full-btn:after{content:''; display:block; position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; background:url(close-white.svg) no-repeat center center; background-size:15px;}
a.full-btn span{display:none;}
div.item_search.cnt a{display:block;}

div.xgameorder{margin:20px 20px 0 20px; width:250px;}
div.xgameorder a{padding:5px; font-size:0.6em; border:none; border-radius:0;}
div.xgameorder a.sel span{background: var(--darkest); padding: 2px 5px 0 5px; border-radius: 10px; color:var(--accentpale);}

div.xcash{max-width:var(--maxwidth); margin:0 auto 20px auto; padding:0 20px; display:flex; justify-content:flex-end; align-items:center; min-height:80px;}
div.xcash h4{font-size:2em; margin:0 20px 0 0; line-height:1em;}
div.xcash h4 span{font-size:0.4em;}
div.xcash p{font-size:0.6em; text-align:right; margin:0 20px 0 0;}
div#uncash{color:var(--accent);}
div#fun{color:var(--accent);}
a.xxbutton.xcash{height: 50px; width: 50px; padding: 0; border-radius: 50%;border-width: 4px;}


img.lazy{opacity:0;}
img.lazy.ready{opacity:1;}

form.glassform{}
form.glassform input{display:block; width:20vw; max-width:300px; min-width:200px; margin:0 0 20px 0; padding:10px; border-radius:5px; border:none; background:var(--glassshadow); color:var(--fg);}
form.glassform input:autofill{background:var(--glassshadow)!important; border:1px solid var(--accentpale) !important;}
form.glassform input:-webkit-autofill{background:var(--glassshadow) !important; border:1px solid var(--accentpale) !important;}
form.glassform input:-internal-autofill-selected{background:var(--glassshadow) !important; border:1px solid var(--accentpale) !important;}
form.glassform a.xxbutton:link{background-color:var(--accentpale); color:var(--fg);}
form.glassform a.xxbutton:visited{background-color:var(--accentpale); color:var(--fg);}
form.glassform a.xxbutton:hover{background-color:var(--accent); color:var(--fg);}
form.glassform a.xxbutton:active{background-color:var(--darkest); color:var(--fg);}
form.glassform a.xxbutton:focus{background-color:var(--accent); color:var(--fg);}
form.glassform label{display:block; text-transform:uppercase; color:var(--fg);font-size:0.8em;}

dialog{margin-top:20vh;}
dialog a.xclosebutton{display:block; position:absolute; top:10px; right:10px; width:25px; height:25px; border-radius:50%; background:url(close-white.svg) no-repeat center center; background-size:50%;}
dialog a.xclosebutton:hover{background-color:var(--accentpale);}
dialog a.xclosebutton:focus{outline:none; background-color:var(--accentpale);}
dialog a.xclosebutton span{display:none;}

dialog.cash{width:calc(80vw - var(--glasspadding)); max-width:1000px; background-color:var(--cashbg);}
dialog.cash a.bigcash{font-size:2em; border-width:5px; background: var(--fg); border-radius: 10px; background-size: 60px; margin: 0 0 20px 0; position:relative; padding: 0.7em 0;}
dialog.cash a.bigcash:after{content:''; display:block; position:absolute; top:0; right:0; bottom:0; aspect-ratio:1 / 1; background:var(--icon-check-ok) no-repeat center center; background-size:32px;}
dialog.cash a.bigcash:before{content:attr(data-ready);display: block;position: absolute;left:0;right:0;bottom:0;font-size: 0.4em; text-align: center;}

dialog.cash a.bigcash.offline{color:var(--glassshadow); pointer-events:none;}
dialog.cash a.bigcash.offline:after{content:''; display:block; position:absolute; top:0; right:0; bottom:0; aspect-ratio:1 / 1; background:var(--icon-error-error) no-repeat center center; background-size:32px;} 
dialog.cash a.bigcash.offline:before{content:attr(data-offline);display: block;position: absolute;left:0;right:0;bottom:0;font-size: 0.4em; text-align: center;}

dialog.cash a.bigcash.busy{color:var(--glassshadow); pointer-events:none;}
dialog.cash a.bigcash.busy:after{content:''; display:block; position:absolute; top:0; right:0; bottom:0; aspect-ratio:1 / 1; background:var(--icon-refresh-info) no-repeat center center;  background-size:32px; animation:roticon 1.2s linear infinite;} 
dialog.cash a.bigcash.busy:before{content: attr(data-busy);display: block;position: absolute;left:0;right:0;bottom:0;font-size: 0.4em; text-align: center;}

dialog.cash a.xxbutton.cash-back-button{background:var(--accentpale); color:var(--fg); text-align:left;}

dialog.cashdep{width:calc(80vw - var(--glasspadding)); max-width:1000px; background-color:var(--cashbg);}

dialog.cashdep div.bbmsg{text-align:center; padding:0.5em 0.5em 0.5em 4em; background:var(--glassshadow); color:var(--fg); border:15px solid var(--bg); border-radius:var(--glassradius); max-width:600px; margin: 10px auto 0 auto; position:relative; white-space:nowrap; font-size:minmax(16px,2vw);}
dialog.cashdep div.bbmsg:after{content:''; display:block; background:var(--bg); background-size:32px; position:absolute; top:0; left:0; bottom:0; aspect-ratio:1 / 1; border-right: 10px solid var(--bg);}
dialog.cashdep div.bbmsg:before{content:''; display:block; background:var(--icon-check-ok) no-repeat center center; background-size:32px; position:absolute; top:0; left:0; bottom:0; aspect-ratio:1 / 1; z-index:10}
dialog.cashdep div.bbmsg.error:before{background-image:var(--icon-error-error);}
dialog.cashdep div.bbmsg.busy:before{background-image:var(--icon-refresh-info); animation:roticon 1.2s linear infinite;}

dialog.cashdep div.xbanknotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr));max-width:600px; margin: 0 auto; padding:10px 0; grid-gap:10px;}
dialog.cashdep div.note{background:var(--fg); padding:4px 0;}
dialog.cashdep div.note div.number{font-size:1em; text-align:center; line-height:1.5em;}
dialog.cashdep div.note div.currency{font-size:0.6em; text-align:center; /*margin-top: -1em;*/}
dialog.cashdep a.xxbutton{background:var(--accentpale); box-sizing:border-box; max-width:600px; margin: 0 auto;}

div.xdialoginner{max-width:600px; margin: 0 auto;}
div.xdialoginner a.wbtn{font-size:2em; border-width:5px; background: var(--fg);  margin-bottom:10px;}
div.numbers{display:grid; grid-gap:10px; padding:10px 0;}
div.numbers a{width:100%; font-size:1.2em;}
div.xnav{display:grid; grid-template-columns:1fr 1fr; grid-gap:10px; padding:10px 0 20px 0;}
div.xnav a{width:100%; font-size:1.2em;}
div.credits{display:grid; grid-template-columns:1fr 1fr; grid-gap:10px; color: var(--fg); background: var(--glassshadow); padding: 1em 2em; border-radius: var(--glassradius);}
div.credits div.credit{text-align:right;}
div.credits div.credit h4{font-size:3em;}
/*div.credits div.credit p{margin-top:-1em;}*/
div.credits div.credit span{font-size:0.8em;}

div.xnoterow{grid-column-start:1; grid-column-end:3; font-size:0.8em; text-align:right;}


div.xaccordicon-item{background:var(--accentpale); border-radius:5px;}
div.xaccordicon-item div.xaccordicon-item-inner{display:none; line-height:1.5em;}
div.xaccordicon-item.open div.xaccordicon-item-inner{display:block;}


 

/*url(deposit-dark.svg) no-repeat 20px center */


div.langsel{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); grid-gap:10px; width:70vw; max-width:500px; margin:20px 0 0 0;}
div.langsel a.xxbutton{position:relative;}
div.langsel a.xxbutton:link{border-color:var(--accentpale); color:var(--fg); background-color:var(--glassshadow);}
div.langsel a.xxbutton:visisted{border-color:var(--accentpale); color:var(--fg);}
div.langsel a.xxbutton:hover{border-color:var(--accent); background-color:var(--accentpale); color:var(--fg);}
div.langsel a.xxbutton:active{border-color:var(--fg); background-color:var(--darkest); color:var(--fg);}
div.langsel a.xxbutton.sel:after{content:''; display:block; position:absolute; top:0; bottom:0; right:calc(100% - 40px); aspect-ratio:1 / 1; background:url(check-white.svg) no-repeat center center; background-size:60%;}

@keyframes toast
{
  0% {top:-100px; opacity:0;}
  4.5% {top:28px; opacity:1;}
  5% {top:25px; opacity:1;}
  95% {top:25px; opacity:1;}
  100% {opacity:0; top:25px; display:none;}
}

div.exxitetoast{position:fixed; left:50%; transform: translate(-50%); background:var(--darkbg); color:var(--bodybg); font-size:0.8em; padding:1em 2em; box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.4); max-width:30%;
  top:25px; opacity:0; animation:toast 3s 1; z-index: 100000;
}
div.exxitetoast.ok{background:var(--ok); color:var(--bg); padding-left:3.5em;}
div.exxitetoast.ok:after{content:''; font-family:var(--icon); display:block; position:absolute; top:0; left:0;  padding:1em; color:var(--okaccent); transform:scale(1.5);}
div.exxitetoast.info{background:var(--info); color:var(--bg);padding-left:3.5em;}
div.exxitetoast.info:after{content:''; font-family:var(--icon); display:block; position:absolute; top:0; left:0; padding:1em; color:var(--infoaccent); transform:scale(1.5);}
div.exxitetoast.error{background:var(--error); color:var(--bg);padding-left:3.5em;}
div.exxitetoast.error:after{content:''; display:block; position:absolute; top:0; left:0; bottom:0; aspect-ratio:1 / 1; background:url(error-error.svg) no-repeat center center; background-size:50%;}


/*javascript interface lib css begin*/
:root{
	--ifczoom:1.0;
	--ifcmargin: calc(5px * var(--ifczoom));
	--ifcpaddingx : calc(20px * var(--ifczoom));
	--ifcpaddingy : calc(8px * var(--ifczoom));
	--ifcpadding: var(--ifcpaddingy) var(--ifcpaddingx);
	--ifcfs: calc(0.7em * var(--ifczoom));
	--ifcshadow:0 2px 5px rgba(0,0,0,0.3);
}
div.xxitemframe label{font-size:calc(var(--ifcfs) * 0.8); text-transform:uppercase; color:var(--bodycolorlight);}
div.xxgrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(calc(40px * var(--ifczoom)), 1fr)); grid-gap:var(--ifcmargin); margin-bottom:var(--ifcmargin);}
div.xxgrid a.xxbutton{margin:0;}

a.xxbutton{display:grid; text-decoration:none; padding:var(--ifcpadding); margin:0 0 var(--ifcmargin) 0; font-size:var(--ifcfs);}
a.xxbutton:link{background:var(--bodybgaccent); color:var(--link);}
a.xxbutton:visited{background:var(--bodybgaccent); color:var(--link);}
a.xxbutton:hover{background:var(--link); color:var(--bodybg);}
a.xxbutton:active{background:var(--darkest); color:var(--bodybg);}
a.xxbutton:focus{background:var(--link); color:var(--bodybg); outline:none;}
a.xxbutton span{justify-self:center; align-self:center;}
a.xxbutton.icon{font-family:var(--icon);}
a.xxbutton.icon {font-size:calc(var(--ifcfs) * 1.6);}
a.xxbutton.round{aspect-ratio: 1 / 1; border-radius:50%; display:inline-block; font-size:var(--ifcfs); padding:2px;}

div.xxpopup{position:relative;}

div.xxmenu{position:absolute; box-shadow:var(--ifcshadow);}
div.xxmenu a.xxbutton{margin:0; padding:4px 10px;}
div.xxpopup div.xxmenu{display:none;}
div.xxpopup.open div.xxmenu{display:block;}


input.xxinput{width:100%; border:none; padding:var(--ifcpadding); border-bottom:1px solid var(--border); margin:0 0 var(--ifcmargin) 0; background:var(--bodybg); color:var(--bodycolor); font-size:var(--ifcfs);}
input.xxinput:hover{background:var(--semihover);}
input.xxinput:focus{background:var(--semihover); outline:none;}

textarea.xxtextarea{width:100%; border:none; padding:var(--ifcpadding); border-bottom:1px solid var(--border); margin:0 0 var(--ifcmargin) 0; resize: vertical; max-height:300px; box-sizing:border-box;  background:var(--bodybg); color:var(--bodycolor); font-family:var(--face);  font-size:var(--ifcfs);}
textarea.xxtextarea:hover{background:var(--semihover);}
textarea.xxtextarea:focus{background:var(--semihover); outline:none;}

div.xxselector{display:grid; grid-template-columns:repeat(auto-fit, minmax(40px, 1fr))}
div.xxselector a.xxbutton.sel{background:var(--a10); color:var(--bodybg);}

div.xxselector.xxalign{grid-template-columns:1fr 1fr 1fr; aspect-ratio:2 / 1; margin:0 0 var(--ifcmargin) 0;}
div.xxselector.xxalign a{margin:0; position:relative;}
div.xxselector.xxalign a:after{content:''; display:block; position:absolute; top:50%; left:50%; width:50%; transform:translate(-50%,-50%); height:1px; background:var(--bodycolor);}
div.xxselector.xxalign a:before{content:''; display:block; position:absolute; top:50%; left:50%; width:1px; transform:translate(-50%,-50%); height:50%; background:var(--bodycolor);}
div.xxselector.xxalign a.sel:before{background:var(--bodybg);}
div.xxselector.xxalign a.sel:after{background:var(--bodybg);}
div.xxselector.xxalign a:hover:before{background:var(--bodybg);}
div.xxselector.xxalign a:hover:after{background:var(--bodybg);}

div.xxselector.xxalign a:nth-child(2):before{left:25%;}
div.xxselector.xxalign a:nth-child(2):after{top:25%;}
div.xxselector.xxalign a:nth-child(3):after{top:25%;}
div.xxselector.xxalign a:nth-child(9):after{top:75%;}
div.xxselector.xxalign a:nth-child(4):before{left:75%;}
div.xxselector.xxalign a:nth-child(4):after{top:25%;}
div.xxselector.xxalign a:nth-child(5):before{left:25%;}
div.xxselector.xxalign a:nth-child(7):before{left:75%;}

div.xxselector.xxalign a:nth-child(8):before{left:25%;}
div.xxselector.xxalign a:nth-child(8):after{top:75%;}
div.xxselector.xxalign a:nth-child(10):before{left:75%;}
div.xxselector.xxalign a:nth-child(10):after{top:75%;}

div.xxcheckbox{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); margin:0 0 var(--ifcmargin) 0; grid-gap:var(--ifcmargin);}
div.xxcheckbox a{margin:0; position:relative;}
div.xxcheckbox a span{justify-self:start; padding:0 0 0 20px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%;}
div.xxcheckbox a:after{content:''; display:block; position:absolute; top:0.4em; left:0.4em; bottom:0.4em; aspect-ratio:1 / 1; border:1px solid var(--bodycolorlight);}
div.xxcheckbox a.sel:before{content:''; display:block; position:absolute; top:0.65em; left:0.65em;  bottom:0.65em; aspect-ratio:1 / 1; background:var(--accent);}
div.xxcheckbox a:hover:after{border-color:var(--bodybg);}
div.xxcheckbox a:focus:after{border-color:var(--bodybg);}

div.xxswitch{background:var(--bodybgaccent); margin:0 0 var(--ifcmargin) 0; padding:var(--ifcpadding); padding-right:50px; font-size:var(--ifcfs); cursor:pointer; position:relative; transition:all 0.5s; color:var(--link);}
div.xxswitch:after{content:''; display:block; position:absolute; right:0.4em; top:0.4em; bottom:0.4em; aspect-ratio:2 / 1; border:1px solid var(--bodycolorlight); background:linear-gradient(90deg, var(--a10) 50%, var(--bodybgaccent) 50%); transition:all 0.2s;}
div.xxswitch.yes:after{background:linear-gradient(90deg, var(--bodybgaccent) 50%, var(--accent) 50%);}
div.xxswitch label{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%;}
div.xxswitch:hover{color:var(--accent);}
div.xxswitch:focus{color:var(--accent); outline:none;}



div.xxslider{display:grid; grid-template-columns:40px 1fr; margin:0 10px var(--ifcmargin) 0;}
input.xxslider-input{width:100%; border:none; padding:var(--ifcpadding); margin:0; text-align:right; background:var(--bodybg); color:var(--bodycolor); font-size:var(--ifcfs);}

input.xxslider-input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input.xxslider-input[type=number]{-moz-appearance: textfield;}
input.xxslider-input:focus{background:rgba(0,150,255,0.1); outline:none;}

input.xxslider-slido{-webkit-appearance: none; display:block; margin:0; width: 100%; background:transparent;}
input.xxslider-slido:focus {outline: none;}
input.xxslider-slido::-webkit-slider-runnable-track {width: 100%; height: 16px; cursor: pointer; transition:var(--trans); background:var(--bodybgaccent);}
input.xxslider-slido:hover::-webkit-slider-runnable-track {background:rgba(0,140,255,0.1);}
input.xxslider-slido:focus::-webkit-slider-runnable-track {background:rgba(0,140,255,0.1);}
input.xxslider-slido::-webkit-slider-thumb {box-shadow: none; border: 0px solid #000; height: 16px; width: 16px; margin-top:0; background:var(--a10); cursor: pointer; -webkit-appearance: none; transition:var(--trans);}
input.xxslider-slido:hover::-webkit-slider-thumb {background:var(--link);}
input.xxslider-slido:focus::-webkit-slider-thumb {background:var(--link);}


input.xxslider-slido::-moz-range-track {width: 100%;height: 16px; cursor: pointer; animate: 0.2s; background: var(--bodybgaccent);}

input.xxslider-slido::-moz-range-thumb {appearance: none; box-shadow: none; border-radius:0; border: 0px solid #000; margin-top:0; height: 16px; width: 16px; background:#999; cursor: pointer;}
input.xxslider-slido:hover::-moz-range-thumb {background:var(--link);}
input.xxslider-slido:focus::-moz-range-thumb {background:var(--link);}

input.xxslider-slido:hover::-moz-range-track{background:var(--semihover);}
input.xxslider-slido:focus::-moz-range-track{background:var(--semihover);}

div.xxselect{background:var(--bodybgaccent); padding:var(--ifcpadding); cursor:pointer; position:relative; font-size:var(--ifcfs); color:var(--bodycolor); margin:0 0 var(--ifcmargin) 0;}
div.xxselect:hover{background:var(--semihover);}
div.xxselect:focus{background:var(--semihover);outline:none;}
div.xxselect:after{content:'S'; display:block; position:absolute; right:10px; top:50%; transform:translate(0,-50%); font-family:var(--icon); color:var(--bodycolorlight);}
div.xxselect div.dropdown{position:absolute; z-index:1000; top:100%; left:0; min-width:100%; background:var(--bodybg); box-shadow:var(--ifcshadow);}
div.xxselect div.dropdown-item{padding:var(--ifcpadding); white-space: nowrap;}
div.xxselect div.dropdown-item:hover{background:rgba(0,140,255,0.1);}
div.xxselect div.dropdown-item:focus{background:rgba(0,140,255,0.1); outline:none;}
    

/*javascript interface lib css end*/