html.dark-mode {
    --wa-color-indigo-95: #c9c9cc !important /* oklch(96.143% 0.00133 286.37) */;
    --wa-color-indigo-90: #aeafb1 !important /* oklch(92.276% 0.00403 286.32) */;
    --wa-color-indigo-80: #94959b !important /* oklch(83.679% 0.00413 286.31) */;
    --wa-color-indigo-70: #72747d !important /* oklch(75.381% 0.00306 264.54) */;
    --wa-color-indigo-60: #565861 !important /* oklch(67.089% 0.00884 278.56) */;
    --wa-color-indigo-50: #43454d !important /* oklch(56.027% 0.01402 275.93) */;
    --wa-color-indigo-40: #313134 !important /* oklch(46.18% 0.01474 275.83) */;
    --wa-color-indigo-30: #1d1d20 !important /* oklch(39.154% 0.01373 274.58) */;
    --wa-color-indigo-20: #101113 !important /* oklch(31.432% 0.00529 286.09) */;
    --wa-color-indigo-10: #000000 !important /* oklch(23.201% 0.00571 285.95) */;
    --wa-color-indigo-05: #000000 !important /* oklch(17.739% 0.00442 264.46) */;
    --wa-color-indigo: var(--wa-color-indigo-40);
    --wa-color-indigo-key: 40;
    --wa-color-fill-loud: #000!important;
    --wa-color-border-loud: #000!important;
    --wa-color-on-loud: #fff;
}

html.no-transition * {
  transition: none !important;
  animation: none !important;
}

html.dark-mode body{
    background-image:url('/media/assets/bg-dark.png');
    color:#fff!important;
}

html.dark-mode wa-button[variant="brand"] {
    --wa-color-fill-loud: #000!important;
    --wa-color-border-loud: #000!important;
    --wa-color-on-loud: #fff!important;
}
html.dark-mode wa-button[variant="neutral"] {
    --wa-color-on-loud: #fff!important;
}

html.dark-mode wa-callout[variant="brand"] {
    color:#fff!important;
}

html.dark-mode .scroll-dialog::part(dialog){
-webkit-filter:saturate(0%);
}

html.dark-mode .section-illustration{
-webkit-filter:saturate(0%);
}

html.dark-mode .settings-dialog::part(dialog){
background-color: var(--wa-color-gray-10);
color:#fff!important;
}

.settings-dialog::part(backdrop){
    background-color:rgba(0,0,0,0)!important;
}

.settings-dialog::part(body){
padding:0px;
background-color: var(--wa-color-gray-90);
}

.context-dialog::part(header){
background-color: var(--wa-color-gray-90);
padding-bottom:.8rem;
}

html.dark-mode .context-dialog::part(header){
background-color: var(--wa-color-gray-10);
}

html.dark-mode .context-dialog::part(body){
background-color: #000;
color:#fff!important;
}

html.dark-mode .settings-dialog::part(body){
padding:0px;
background-color: var(--wa-color-gray-30);
}

.settings-dialog::part(dialog){
background-color: var(--wa-color-gray-90);
}

.settings-dialog::part(title){
color: #000;
padding-bottom:0.8rem;
}

html.dark-mode .settings-dialog::part(title){
color: #fff!important;
}

.settings-dialog .tab-pane.show
{
    background:#fff;
}

.settings-dialog .tab-content
{
    background:#fff;
}

html.dark-mode .settings-dialog .tab-pane.show
{
    background:#000;
}

html.dark-mode .settings-dialog .tab-content
{
    background:#000;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--wa-color-gray-90);
}

.nav-tabs .nav-link {
    background-color: var(--wa-color-gray-90);
    font-size:1rem;
}

.display-link{
    border-top-left-radius: 0;
    border-top-right-radius: 1rem!important;

}

.content-link{
    border-top-left-radius: 1rem!important;
    border-top-right-radius: 0!important;

}

.nav-tabs .nav-item{
    margin-inline-start:0;
    margin-inline-end:0;
}

.nav-tabs .nav-link, .nav-tabs .nav-link.active {
    border-color: var(--wa-color-gray-90);
    border-bottom:none;
}

.nav-tabs .nav-link.active {
    border-color: var(--wa-color-gray-90);
    border-bottom:none;
}

html.dark-mode .nav-tabs {
    background-color: var(--wa-color-gray-10)!important;
    border:none!important;
}

:root{
    --wa-color-overlay-modal:rgba(0,0,0,0)!important;
}

html.dark-mode .nav-tabs .nav-link {
    background-color: var(--wa-color-indigo-30);
    color:#fff;
}

html.dark-mode .nav-tabs .nav-link.active {
    background-color: #000;
    color:#fff;
}

html.dark-mode .nav-tabs .nav-link, html.dark-mode .nav-tabs .nav-link.active {
    border-color: var(--wa-color-indigo-30);
    border-bottom:none;
    color:#fff;
}

html.dark-mode .list-group-item{
    background:#000!important;
    color:#fff!important;
    border:1px #333 solid!important;
}

html.dark-mode .list-group-item:hover{
    background:#111!important;
}

html.dark-mode .text-black-50{
    color:#888!important;
}

html.dark-mode .card{
    background:#000!important;
    border:1px #333 solid!important;
    color:#fff!important;
}



.nav-pills {
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: var(--wa-color-gray-50);
}

.nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--wa-color-gray-50);
    --bs-nav-link-hover-color: var(--wa-color-gray-70);
    --bs-nav-link-disabled-color: var(--wa-color-gray-90);
}

html{
    font-size: 1rem;
    transition: font-size 1s ease;
}

@media (min-width: 992px) { 
    
    .nav-bar wa-button{
    width:180px!important;
}

.welcome{
        border-radius: var(--bs-border-radius-lg) !important;
}



}


@media (min-width: 768px) { 
    
html.large-font{
    font-size:1.1rem!important;
    
}

.scroll-home{
border-image-width: 100px 55px 100px 55px!important;
}

.nav-tabs .nav-item{
    margin-inline-start:1rem;
    margin-inline-end:1rem;
}

.display-link{
    border-top-left-radius: 1rem!important;
    border-top-right-radius: 1rem!important;

}

.content-link{
    border-top-left-radius: 1rem!important;
    border-top-right-radius: 1rem!important;

}

    
}


html.large-font{
    font-size:1.1rem;
}

html.small-font{
    font-size:0.8rem;
}


body{
    font-family:'McLaren';
    background-size:400px;
    background-repeat:repeat;
    background-color: var(--wa-color-indigo-20);
    background-image:url('/media/assets/bg.png');
    background-size:300px;
    background-attachment:fixed;
}

p, a, h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .btn, .dropdown-item, .display-1, .display-2, .display-3, .display-4{
    font-family:'McLaren'!important;
}

wa-button{
}


.text-caption{
    color:var(--wa-color-indigo-70);
}

#comicPage{
    border-radius:0;
}


wa-details{
    --show-duration: .5s;
    --hide-duration: .5s;
    transition:ease-out all!important;
}

.setting-details:state(animating){
    transition:ease-out all!important;
}

.setting-item::part(label){
    width:100%!important;
}

.setting-inner::part(expand-button){
    display:none;
}

.setting-item::part(item){
        border-inline-start-color:rgba(0,0,0,0)!important;
        background-color:rgba(0,0,0,0)!important;
}

.popup {
    width:100% !important;
    max-width: 100% !important;
    
}

.navbar-nav{
max-width:1161.1px;
}

.navbar-collapse .row-nav{
    width:100%;
    max-width:100%;
}

.navbar-collapse{
    width:100%;
    max-width:100%;
}

.page-contents{
    max-width:850px;
    margin-left:auto;
    margin-right:auto;
}

.list-group-item{
    color: var(--wa-color-indigo-40)!important;
}

.scroll-dialog::part(dialog){
box-sizing: border-box;
color: #53432C;
border-image-slice: 153 95 153 95 fill;
border-image-width: 50px 55px 50px 55px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch round;
border-image-source: url("https://dantesinfanto.goods.toys/media/assets/scroll.png");
border-style: solid;
background:none;
max-width:100%;
width:700px;
padding:45px;
color: var(--wa-color-indigo-40)!important;
}

.scroll-dialog::-webkit-scrollbar {
  width: 10px;
}
.scroll-dialog::-webkit-scrollbar-track {
  background: var(--wa-color-indigo-60);;
}
.scroll-dialog::-webkit-scrollbar-thumb {
  background: var(--wa-color-indigo-40); 
  border-radius: 5px;
}
.scroll-dialog::-webkit-scrollbar-thumb:hover {
  background: var(--wa-color-indigo-50);
}

.scroll-dialog::part(header){
padding:15px;
}

.scroll-dialog::part(title){
    font-size:1rem!important;
}

.scroll-dialog::part(close-button) {
    display:none;
}

.sheet-dialog::part(dialog){
box-sizing: border-box;
color: #53432C;
border-image-slice: 153 95 153 95 fill;
border-image-width: 50px 55px 50px 55px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch round;
border-image-source: url("https://dantesinfanto.goods.toys/media/assets/sheet.png");
border-style: solid;
background:none;
max-width:100%;
color: var(--wa-color-indigo-40)!important;
padding:15px;
}


.sheet-dialog::part(close-button) {
    display:none;
}

.fa-xl{
    font-size: 1.25em!important;
    line-height: .05em!important;
    vertical-align: -.075em!important;
}


@media (min-width: 576px) { 
    
.fa-xl {
    font-size: 1.5em!important;
    line-height: .0416667em!important;
    vertical-align: -.125em!important;
}
    
    .scroll-dialog::part(dialog){
padding: 10rem 7rem;
box-sizing: border-box;
color: #53432C;
border-image-slice: 153 95 153 95 fill;
border-image-width: 90px 95px 90px 95px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch round;
border-image-source: url("https://dantesinfanto.goods.toys/media/assets/scroll.png");
border-style: solid;
background:none;
max-width:100%;
width:700px;
padding:75px;
color: var(--wa-color-indigo-40)!important;
}
    
    
    
    #landingArt{
        border-radius:1rem;
    }
    
    #comicPage{
        border-radius:0px;
    }
    
    .popup  {
    width:var(--auto-size-available-width) !important;
    max-width: var(--auto-size-available-width) !important;
    }
    
    .navbar-collapse{
    width:auto!important;
    max-width:auto!important;
    }
}

.sat-slider::part(indicator){
    background-color:var(--wa-color-indigo-60)!important;
}

.sat-slider::part(references){
    padding-bottom:10px!important;
    max-height:15px!important;
}

.sat-slider::part(thumb){
    background-color:var(--wa-color-indigo-40)!important;
}

.cw{
    box-shadow:rgba(0,0,0, 0.5) 0px 5px 15px; position:absolute; left:50%;
   top:50%;
   -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   position:absolute; color:#fff; background:#f00; z-index:99; width:350px;
   display:none;
}

.cw-censor{
    filter:blur(15px) brightness(1);
    transition: filter 0.3s;
}

#pageContain{
    overflow:hidden;
}

.img-fluid{
    border-radius:0;
}

.about-book::part(body){
    padding:0px!important;
}

.scroll-home{
box-sizing: border-box;
color: #53432C;
border-image-slice: 153 95 153 95 fill;
border-image-width: 50px 35px 50px 35px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch round;
border-image-source: url("https://dantesinfanto.goods.toys/media/assets/scroll.png");
border-style: solid;
background:none;
max-width:100%;
width:1000px;
padding:45px;
color: var(--wa-color-indigo-40)!important;
}

html.dark-mode .scroll-home{
    border-image-source: url("https://dantesinfanto.goods.toys/media/assets/scroll_dark.png");
    color: #fff!important;
}