/*
      :::::::::   ::::::::  :::::::::  :::   :::
     :+:    :+: :+:    :+: :+:    :+: :+:   :+:
    +:+    +:+ +:+    +:+ +:+    +:+  +:+ +:+
   +#++:++#+  +#+    +:+ +#+    +:+   +#++:
  +#+    +#+ +#+    +#+ +#+    +#+    +#+
 #+#    #+# #+#    #+# #+#    #+#    #+#
#########   ########  #########     ###
*/

@font-face {
  font-family: OpenSans;
  src: url(../fonts/open-sans.ttf);
}

:root{
  --soft-lines-color: #ccc;
  --soft-gray-bg: #eee;
  /* --main-blue: #1837ff; */
  --main-blue: #2d45df;
  --main-blue-gradient: linear-gradient(to bottom, #5d73ff, #233acb);  
  --soft-blue: rgb(186, 204, 255);  
  
  --btn-trigger-gradient: linear-gradient(to bottom, white, #eee);

  /* --book-cover-shadow: radial-gradient(circle at 10% 0%, rgb(255 255 255 / 21%) 50%, rgba(0, 0, 0, 0.05)), linear-gradient(to right, transparent, rgba(0, 0, 0, 0.07) 12%, transparent 50%); */

  --book-cover-shadow: radial-gradient(circle at 10% 0%, rgb(255 255 255 / 21%) 50%, rgba(0, 0, 0, 0.07)), linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08) 12%, transparent 50%), linear-gradient(to top, transparent, rgba(255,255,255,0.5) 10px,transparent 5%);
}

:root{
  --reco-bg-large: "";

  /* --main-focus-yellow-gradient: linear-gradient(to bottom, #fffa7e, #efb800); */
  --main-focus-yellow-gradient: linear-gradient(to bottom, #fffb9a, #ffeb00);
  --main-focus-yellow-gradient-hover: linear-gradient(to bottom, #fff69a, #ffc400);

  --items-bg-color-1: linear-gradient(45deg, rgba(227, 233, 255, 0.813), rgba(255, 255, 255, 0.567));
  /* --items-bg-color-1: linear-gradient(45deg, rgb(221 227 252 / 86%), rgb(255 255 255 / 25%)); */

  /* --items-bg-color-1: linear-gradient(15deg, rgba(145, 165, 255, 0.708), rgb(145 166 255 / 40%)  20%, rgb(255 255 255 / 42%)); */

  --items-bg-color-1-semi-opaque: linear-gradient(45deg, rgb(215 223 255), rgb(255 255 255 / 89%));
  --backdrop-filter-items-1: blur(20px);
  --border-blur-items-1: 1px solid #d2d9ff;
  --box-shadow-blur-items-1: 0 8px 15px -3px rgba(95, 143, 255, 0.3);

  --curve-top-right-form: polygon(calc((100% - 68px - 20px) - (20px - 0.00px)) calc(20px - 20.00px), calc((100% - 68px - 20px) - (20px - 6.18px)) calc(20px - 19.02px), calc((100% - 68px - 20px) - (20px - 11.76px)) calc(20px - 16.18px), calc((100% - 68px - 20px) - (20px - 16.18px)) calc(20px - 11.76px), calc((100% - 68px - 20px) - (20px - 19.02px)) calc(20px - 6.18px), calc((100% - 68px - 20px) - (20px - 20.00px)) calc(20px - 0.00px) , calc((100% - 68px) - 20.00px) calc((20px) + 0.00px), calc((100% - 68px) - 19.02px) calc((20px) + 6.18px), calc((100% - 68px) - 16.18px) calc((20px) + 11.76px), calc((100% - 68px) - 11.76px) calc((20px) + 16.18px), calc((100% - 68px) - 6.18px) calc((20px) + 19.02px), calc((100% - 68px) - 0.00px) calc((20px) + 20.00px), calc((100%) - (20px - 0.00px)) calc((40px) + (20px - 20.00px)), calc((100%) - (20px - 6.18px)) calc((40px) + (20px - 19.02px)), calc((100%) - (20px - 11.76px)) calc((40px) + (20px - 16.18px)), calc((100%) - (20px - 16.18px)) calc((40px) + (20px - 11.76px)), calc((100%) - (20px - 19.02px)) calc((40px) + (20px - 6.18px)), calc((100%) - (20px - 20.00px)) calc((40px) + (20px - 0.00px)) , calc(100% - (20px - 20.00px)) calc(100% - (20px - 0.00px)), calc(100% - (20px - 19.02px)) calc(100% - (20px - 6.18px)), calc(100% - (20px - 16.18px)) calc(100% - (20px - 11.76px)), calc(100% - (20px - 11.76px)) calc(100% - (20px - 16.18px)), calc(100% - (20px - 6.18px)) calc(100% - (20px - 19.02px)), calc(100% - (20px - 0.00px)) calc(100% - (20px - 20.00px)), calc(20px - 0.00px) calc(100% - (20px - 20.00px)), calc(20px - 6.18px) calc(100% - (20px - 19.02px)), calc(20px - 11.76px) calc(100% - (20px - 16.18px)), calc(20px - 16.18px) calc(100% - (20px - 11.76px)), calc(20px - 19.02px) calc(100% - (20px - 6.18px)), calc(20px - 20.00px) calc(100% - (20px - 0.00px)), calc(20px - 20.00px) calc(20px - 0.00px), calc(20px - 19.02px) calc(20px - 6.18px), calc(20px - 16.18px) calc(20px - 11.76px), calc(20px - 11.76px) calc(20px - 16.18px), calc(20px - 6.18px) calc(20px - 19.02px), calc(20px - 0.00px) calc(20px - 20.00px));


}

svg{
  fill: var(--fill, black);
}

*[data-icon]{
  animation: fadeIn 0.2s ease 0.1s 1 both;
}

.website_o_dev_msg{
  width: 100%;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 20px 0;
}

.website_o_dev_msg .msg{
  width: 100%;
  max-width: 600px;
  border-radius: 15px;
  background: rgb(255, 255, 231);
  text-align: center;
  padding: 10px 20px;
}

@media only screen and (max-width: 600px), (max-height: 600px){
  .website_o_dev_msg{
    margin: 10px 0;
  }

  .website_o_dev_msg .msg{
    font-size: 13px;
  }
}


@media (pointer:fine) {
  
  ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
  }  
  
  ::-webkit-scrollbar-track {    
    background: #f1f1f199;
    border-radius: 20px;    
  }  
  
  ::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: var(--soft-lines-color);
    border: 3px solid #f1f1f1;
  }  
  
  ::-webkit-scrollbar-thumb:hover {
    background: #aaa;
  }
}

table{
  display: none;
}


.disabled{
  opacity: 0.5;
  pointer-events: none;
}
  

*{
  box-sizing: border-box;  
  user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body{
  padding: 0;
  margin: 0;  
  font-family: OpenSans, sans-serif;
  transition: background 0.1s ease;
}

.cont-page{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, white, #7588ff);
}

@media only screen and (min-width: 2200px), (min-height: 1100px){
  .cont-page{
    padding: 20px;
  }

  .page{
    border-radius: 20px;
  }
}




/*
      :::::::::     :::      ::::::::  ::::::::::
     :+:    :+:  :+: :+:   :+:    :+: :+:
    +:+    +:+ +:+   +:+  +:+        +:+
   +#++:++#+ +#++:++#++: :#:        +#++:++#
  +#+       +#+     +#+ +#+   +#+# +#+
 #+#       #+#     #+# #+#    #+# #+#
###       ###     ###  ########  ##########
*/

.page{
  width: 100%;
  max-width: 2200px;
  height: 100%;
  max-height: 1100px;
  display: flex;  
  overflow: hidden;
  position: relative;
  background: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  padding: 0;
}


.btn-trigger{
  transition: background 0.1s ease;
}

.page-background{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fadeIn 0.4s ease 0s 1 both;  
}

.page-background picture,
.page-background img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-background.dark{
  display: none;
}

.page-background.light{
  display: block;
}

/*
      :::::::: ::::::::::: :::::::::  ::::::::::
    :+:    :+:    :+:     :+:    :+: :+:
   +:+           +:+     +:+    +:+ +:+
  +#++:++#++    +#+     +#+    +:+ +#++:++#
        +#+    +#+     +#+    +#+ +#+
#+#    #+#    #+#     #+#    #+# #+#
######## ########### #########  ##########
      :::::::::      :::     :::::::::
     :+:    :+:   :+: :+:   :+:    :+:
    +:+    +:+  +:+   +:+  +:+    +:+
   +#++:++#+  +#++:++#++: +#++:++#:
  +#+    +#+ +#+     +#+ +#+    +#+
 #+#    #+# #+#     #+# #+#    #+#
#########  ###     ### ###    ###
*/



.side-bar{
  width: 250px;
  margin: 10px 0 10px 10px;
  height: calc(100% - 20px);  
  flex-shrink: 0;
  padding: 10px;
  display: flex;
  flex-flow: column;
  background: var(--items-bg-color-1);
  border-radius: 20px;
  position: relative;
  backdrop-filter: var(--backdrop-filter-items-1);
  border: var(--border-blur-items-1);
  box-shadow: var(--box-shadow-blur-items-1);;
}



.logo{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  z-index: 1;
}

.logo img{  
  width: 80%;
}

.logo img.logo-250px-blanco{
  display: none;
}

.nav-links{
  display: flex;
  flex-flow: column;  
  border-radius: 20px;
  padding: 10px 20px 10px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1;
}

.nav-links .link{
  padding: 0 9px 0 20px;
  display: flex;
  align-items: center;  
  margin: 0 0 10px 0;
  /* background: var(--btn-trigger-gradient); */
  /* background: white; */
  background: linear-gradient(45deg, rgb(255, 255, 255), #ffffff 50%);
  border: 1px solid #ccc;
  border-radius: 30px;
  color: inherit;
  text-decoration: none;
  height: 38px;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
  /* box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); */
}

.nav-links .link svg{
  margin: 0 10px 0 0;
}

.nav-links .link:hover{
  background: linear-gradient(45deg, rgb(191, 190, 255), #ffffff 50%);
  /* background: #eee; */
}

.nav-links .link.selected{  
  background: var(--main-blue-gradient);
  box-shadow: 0 2px 4px -1px rgb(134, 134, 255);
  /* background: #283fff; */
  border: 1px solid transparent;
  color: white;
}

.nav-links .link.selected svg{
  fill: white;
}



.btn-close{
  width: 30px;
  height: 30px;
  font-size: 30px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-trigger-gradient);
  border-radius: 30px;
  cursor: pointer;
  transition: opacity 0.1s ease;
  box-shadow: var(--box-shadow-blur-items-1);
}

.btn-close:hover{
  opacity: 0.6;
}

.side-bar-blur{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  background: rgb(0 6 23 / 66%);
  z-index: 20;
  display: none;
  animation: fadeIn 0.2s ease 0s 1 both;
}

.side-bar .cont-tags{
  display: flex;
  flex-wrap: wrap;
}

.side-bar .cont-tags h4{
  width: 100%;
  font-size: 12px;
}

.side-bar .cont-tags .tag{
  font-size: 12px;
  padding: 1px 3px;
  border-radius: 5px;
  border: 1px solid var(--soft-lines-color);
  margin: 0 0 5px 5px;
  cursor: pointer;
  background: white;
}

.side-bar .cont-tags .tag:hover{
  background: var(--soft-gray-bg);
}

.side-bar-extra-links .settings-trigger svg{
  width: 18px;
  height: 18px;
}


@media only screen and (max-width: 1099px){
  .side-bar .btn-close{
    position: absolute;
    top: 15px;
    right: 15px;
  }

  .side-bar{
    display: none;
    position: absolute;
    top: 0px;
    right: 10px;
    border-radius: 15px;
    z-index: 20;
    flex-flow: column;
    justify-content: space-between;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    max-width: 270px;
    padding: 60px 0 130px 0;
    background: var(--items-bg-color-1-semi-opaque);
    border: var(--border-blur-items-1);
    box-shadow: var(--box-shadow-blur-items-1);    
    animation: fadeIn 0.4s ease 0s 1 both;
  }

  .side-bar .logo{
    display: none;
  }

  .side-bar .nav-links{
    padding: 10px;
  }

  .side-bar .nav-links .link{
    justify-content: flex-start;    
    flex-flow: row-reverse;
  }

  .nav-links .link svg {
    margin: 0 0 0 10px;
  }

  .side-bar .cont-tags h4{
    text-align: right;
    padding: 0 10px 0 0;
  }

  .side-bar .cont-tags{
    justify-content: flex-end;
  }

  .side-bar .cont-tags .tag{
    margin: 0 5px 5px 0;
  }  
  
}

@media only screen and (min-width: 1100px){
  .side-bar{
    display: flex!important;
  }

  .side-bar-extra-links{
    flex-shrink: 0;    
    display: flex!important;
    position: absolute;
    align-items: center;
    top: 17px;
    right: 36px;
    z-index: 12;
  }

  .side-bar .btn-close{
    display: none;
  }

  .side-bar-extra-links .btn-trigger.rounded span{
    display: none;
  }

  .top-tools .btn-trigger.rounded.dark-mode-trigger{
    margin: 0 290px 0 0;
  }

  .side-bar-blur,
  .show-side-bar-trigger
  {
    display: none!important;
  }
}

/*
        :::   :::       :::     ::::::::::: ::::    :::
      :+:+: :+:+:    :+: :+:       :+:     :+:+:   :+:
    +:+ +:+:+ +:+  +:+   +:+      +:+     :+:+:+  +:+
   +#+  +:+  +#+ +#++:++#++:     +#+     +#+ +:+ +#+
  +#+       +#+ +#+     +#+     +#+     +#+  +#+#+#
 #+#       #+# #+#     #+#     #+#     #+#   #+#+#
###       ### ###     ### ########### ###    ####
*/


.page-content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;  
  /* padding: 0px 20px 20px 25px; */
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  padding: 10px 30px 0 30px;
}

@media only screen and (max-width: 600px){
  .page-content{
    padding: 0px 10px 20px 10px;
  }
}

/*
  ::::::::::: ::::::::  :::::::::
     :+:    :+:    :+: :+:    :+:
    +:+    +:+    +:+ +:+    +:+
   +#+    +#+    +:+ +#++:++#+
  +#+    +#+    +#+ +#+
 #+#    #+#    #+# #+#
###     ########  ###
  ::::::::::: ::::::::   ::::::::  :::        ::::::::
     :+:    :+:    :+: :+:    :+: :+:       :+:    :+:
    +:+    +:+    +:+ +:+    +:+ +:+       +:+
   +#+    +#+    +:+ +#+    +:+ +#+       +#++:++#++
  +#+    +#+    +#+ +#+    +#+ +#+              +#+
 #+#    #+#    #+# #+#    #+# #+#       #+#    #+#
###     ########   ########  ########## ########
*/

.top-tools{
  width: calc(100% + 20px);
  margin: 0 0 0 -10px;
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0px;
  flex-shrink: 0;
  padding: 5px;
  border-radius: 10px;
  z-index: 10;
  background: var(--items-bg-color-1);
  border-radius: 20px;
  backdrop-filter: var(--backdrop-filter-items-1);
  border: var(--border-blur-items-1);
  box-shadow: var(--box-shadow-blur-items-1);
  animation: fadeIn 0.3s ease 0s 1 both;
}

@media only screen and (min-width: 601px){
  .top-tools{
    --items-bg-color-1: var(--items-bg-color-1-semi-opaque);
  }
}


.top-tools .logo{
  display: none;
  flex-shrink: 0;
}

.top-tools .btn-trigger.rounded,
.side-bar-extra-links .btn-trigger.rounded
{
  width: 30px;
  height: 30px;    
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  cursor: pointer;    
  border: 1px solid var(--soft-lines-color);
  margin: 0 10px 0 0;
  position: relative;
}

@media only screen and (max-width: 1099px){


  .side-bar-extra-links{    
    box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.2);
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 20;
    width: 270px;
    background: white;
    border-radius: 0 0 15px 15px;
    display: none;
    flex-flow: column;
    padding: 10px;
    animation: fadeIn 0.4s ease 0s 1 both;
  }

  .side-bar-extra-links .btn-trigger.rounded{
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: row-reverse;
    margin: 0 0 10px 0;
    font-size: 14px;
  }

  .side-bar-extra-links .btn-trigger.rounded span{
    margin: 0 5px 0 0;
  }
}

.cont-search-box{
  display: flex;
  align-items: center; 
  height: 100%;
  width: 100%;
}

.search-box{
  display: flex;
  height: 100%;
}

.search-box input{
  border-radius: 20px 0 0 20px;
  padding: 7px 7px 7px 12px;
  font-family: 'Consolas', monospace;
  font-size: 13px;
  border: 1px solid #ccc;
  outline: none;
  appearance: none;
  width: 100%;
  max-width: 276px;
}

.search-box input::placeholder{
  font-style: italic;
  opacity: 0.6;
}

.cont-search-in{
  display: flex;
  position: relative;
  margin: 0 0 0 15px;
  align-items: flex-end;
  height: 100%;
}

.search-in{
  padding: 1px 8px;
  border: 1px solid black;
  cursor: pointer;
  border-radius: 10px;
  outline: none;
  font-size: 14px;  
}


.cont-search-in span{
  position: absolute;
  top: -5px;
  left: 0;
  font-size: 11px;
}

.search-box .search-trigger{  
  background: #ccc;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px 0 7px;
  cursor: pointer;
  border-radius: 0 20px 20px 0;
}


.search-box .search-trigger:hover
{
  background: #bbb;
}

.top-tools .right{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.light-icon{
  display: none;
}
  
.dark-icon{
  display: block;
}

.session-tools{
  display: flex;
}


.session-tools .user{  
  display: flex;
  align-items: center;
  padding: 5px;
  cursor: pointer;
  border-radius: 20px;
  position: relative;
}
  
.session-tools .user:hover{
  background: #eee;
}

.session-tools .user .avatar{
  width: 30px;
  height: 30px;
  border-radius: 20px;
  background: var(--soft-lines-color);
  margin: 0 10px 0 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.session-tools .arrow{
  margin: 2px 0 0 5px;
}

.session-tools .arrow div{
  border-width: 8px 6px 0 6px;
  border-color: #888 transparent transparent transparent;
  border-style: solid;
}

.login-actions{
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: 2px 10px 2px 2px;
  font-size: 14px;
  justify-content: flex-end;
}

.login-actions .btn-trigger{
  padding: 2px 7px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  cursor: pointer;
}

.login-actions .btn-trigger.focus{  
  background: var(--main-focus-yellow-gradient);
  margin: 0 0 0 5px;
  color: black;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.login-actions .btn-trigger:not(.focus){
  border: var(--border-blur-items-1);
}




@media only screen and (max-width: 1099px){
  .top-tools .logo{
    display: flex;
    width: 100%;
    max-width: 180px;
    justify-content: flex-start;
    margin: 0 0 0 10px;
  }

  .top-tools .cont-search-box{
    top: calc(100% + 5px);
    display: none;    
    position: absolute;    
    background: var(--items-bg-color-1-semi-opaque);
    box-shadow: var(--box-shadow-blur-items-1);
    justify-content: center;
    align-items: center;
    padding: 7px;
    height: auto;
    width: auto;
    right: 0;
    border-radius: 10px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .cont-search-in{
    align-items: center;
  }

  .cont-search-in span{
    font-size: 15px;
    position: relative;
    top: unset;
    left: unset;
    margin: 0 10px 0 0;
  }

  .top-tools .cont-search-box.active{
    display: flex;
  }

  .search-box .search-trigger,
  .search-box .search-ops-trigger
  {
    height: initial;
  }

  .search-box{
    justify-content: flex-end;
  }

  .btn-trigger.search-responsive-trigger{
    display: flex;
  }

  .btn-trigger.search-responsive-trigger span{
    display: none;
  }

  .btn-trigger.search-responsive-trigger.active span{
    display: block;
  }

  .btn-trigger.search-responsive-trigger.active svg{
    display: none;
  }

}




@media only screen and (max-width: 600px){
  .page-content{
    padding-top: 0;
  }

  .top-tools{
    top: 2px;
    left: -5px;
    border-radius: 10px;
    position: sticky;
    margin: 0 -10px 10px -10px;
    width: calc(100% + 10px);

    --items-bg-color-1: linear-gradient(45deg, rgb(215 224 255 / 58%), rgb(255 255 255 / 66%));
    background: var(--items-bg-color-1);
    backdrop-filter: blur(10px);
  }

  .top-tools .cont-search-box *{
    font-size: 14px;
  }

  .search-in{
    padding: 6px;
  }

  .top-tools .session-tools .username{
    display: none;
  }

  .section.welcome{
    margin-top: 10px!important;
  }
}

@media only screen and (max-height: 500px){
  .top-tools{
    position: relative;
  }
  .section-headline{
    position: relative!important;
  }
  .section.search .section-headline{
    top: 0!important;
  }
}

@media only screen and (min-width: 1100px){
  .btn-trigger.search-responsive-trigger{
    display: none!important;
  }
}


/*
      ::::::::  :::::::::: ::::::::
    :+:    :+: :+:       :+:    :+:
   +:+        +:+       +:+
  +#++:++#++ +#++:++#  +#+
        +#+ +#+       +#+
#+#    #+# #+#       #+#    #+#
########  ########## ########
  ::::::::::: ::::::::::: ::::::::  ::::    :::  ::::::::
     :+:         :+:    :+:    :+: :+:+:   :+: :+:    :+:
    +:+         +:+    +:+    +:+ :+:+:+  +:+ +:+
   +#+         +#+    +#+    +:+ +#+ +:+ +#+ +#++:++#++
  +#+         +#+    +#+    +#+ +#+  +#+#+#        +#+
 #+#         #+#    #+#    #+# #+#   #+#+# #+#    #+#
###     ########### ########  ###    ####  ########
*/



.section:not(.welcome, .recommended, .slideshow){
  width: 100%;
  margin: 20px 0;
  flex-shrink: 0;
  display: flex;
  flex-flow: column;
  background: var(--items-bg-color-1);
  border-radius: 20px;
  backdrop-filter: var(--backdrop-filter-items-1);
  border: var(--border-blur-items-1);
  box-shadow: var(--box-shadow-blur-items-1);

}


.section-headline{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.modal .section-headline{
  margin: -20px 0 20px 0;
}

.page-content .section-headline{
  border-radius: 20px;
  padding: 0 10px;
}

.page-content .section-headline h2,
.modal.settings h2,
.section.recommended .section-name h2,
.modal.expanded-section .section-headline h2
{
  --fill: #454c6f;
  display: flex;
  align-items: center;
}

.page-content .section-headline h2 svg,
.modal.settings h2 svg,
.section.recommended .section-name h2 svg,
.modal.expanded-section .section-headline h2 svg
{
  margin: 0 5px 0 0;
}

.section.recommended .section-name h2 svg{
  width: 19px;
  height: 19px;
}

.page-content .section-headline h2 span,
.modal.expanded-section .section-headline h2 span
{  
  color: #454c6f;
}

@media only screen and (max-width: 600px){
  .page-content .section-headline h2,
  .modal.settings h2,
  .modal.expanded-section .section-headline h2
  {
    font-size: 18px;
  }

  .page-content .section-headline h2 svg
  .modal.settings h2 svg,
  .modal.expanded-section .section-headline h2 svg
  {
    width: 18px;
    height: 18px;
  }

  .section.recommended .section-name h2 svg{
    width: 16px;
    height: 16px;
  }
}

.page-content .section.general .section-headline{
  --items-bg-color-1: linear-gradient(45deg, rgb(215 223 255), rgb(255 255 255 / 89%));
    background: var(--items-bg-color-1);
  border-radius: 20px;
  backdrop-filter: var(--backdrop-filter-items-1);
  border: var(--border-blur-items-1);
  box-shadow: var(--box-shadow-blur-items-1);
  padding: 5px 10px;
}

.page-content .section.general .section-headline h2{
  margin: 0;
}

.section-headline .btn-trigger {
  padding: 5px 7px;
  border: 1px solid var(--soft-lines-color);
  font-size: 15px;
  border-radius: 8px;
  cursor: pointer;
  background: white;
}

.section-headline .btn-trigger:hover {
  opacity: 0.7;
}

.section-headline .cont-filters{
  display: flex;
  align-items: flex-end;
}

.section-headline .cont-filters .cont-order-by-select{
  display: flex;
  flex-flow: column;
}

.section-headline .cont-filters .cont-order-by-select label{
  font-size: 9px;
}

.section-headline .cont-filters .cont-order-by-select select{
  border-radius: 10px;
  outline: none;
  border: 1px solid var(--soft-lines-color);
  background: white;
  padding: 5px;
  font-size: 10px;
  color: inherit;
  cursor: pointer;
}

.section-headline .cont-filters .btn-trigger.direction{
  width: 30px;
  height: 30px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  flex-shrink: 0;
  margin: 0 0 0 10px;
}

.section-headline .cont-filters .btn-trigger.direction.desc{
  transform: rotate(180deg);
}

.section-headline .cont-filters .btn-trigger.direction svg{
  width: 24px;
  height: 24px;
}

@media only screen and (max-width: 600px){
  .section-headline .cont-filters .cont-order-by-select label{
    font-size: 8px;
  }
  .section-headline .cont-filters .cont-order-by-select select{
    font-size: 11px;
    padding: 2px 4px;
  }
  .section-headline .cont-filters .btn-trigger.direction{
    width: 28px;
    height: 28px;
  }
  .section-headline .cont-filters .btn-trigger.direction svg{
    width: 24px;
    height: 24px;
  }
}


.cont-carousel{
  width: 100%;
  display: flex;
  padding: 0 0 0 0px;
  mask-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 20px, rgba(0,0,0,1) calc(100% - 20px), rgba(0,0,0,0) );
  /* border: 1px solid red; */
}

@media only screen and (max-width: 600px){
  .cont-carousel{
    mask-image: none;
  }
}

.section .carousel{
  min-width: 100%;
  display: flex;
  overflow-x: auto;
  /* border: 1px solid blue; */
}

.carousel .item{
  margin: 0 20px 0 0;
  cursor: pointer;
}

.info .cont-tags{
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0 0 0;
}

.info .cont-tags .tag{
  padding: 2px 2px;
  border-radius: 5px;
  border: 1px solid #555;
  font-size: 10px;
  margin: 0 5px 5px 0;
}


@media only screen and (max-width: 600px){
  .section .cont-carousel{
    width: calc(100% + 20px);
    margin-left: -10px;
  }
}

.section.welcome{  
  width: 100%;
  height: 50vh;
  min-height: 300px;
  max-height: 450px;
  display: flex;
  flex-shrink: 0;
  margin: 30px 0 0 0;
}

@media only screen and (max-width: 700px){
  .section.welcome{
    flex-flow: column;
    height: auto;
    max-height: none;
  }
}


/*
.dP"Y8 88     88 8888b.  888888 .dP"Y8
`Ybo." 88     88  8I  Yb 88__   `Ybo."
o.`Y8b 88  .o 88  8I  dY 88""   o.`Y8b
8bodP' 88ood8 88 8888Y"  888888 8bodP'
*/

.section.slideshow{
  width: calc(35% - 20px);  
  display: flex;  
  position: relative;
  padding: 10px;
  flex-flow: column;  
  border-radius: 30px;
}


.section.slideshow .section-headline h2{
  color: #454c6f;    
  margin: 0px 0 10px 0;
  display: flex;
  align-items: center;
  position: relative;
}

.section.slideshow .section-headline a.link{
  display: flex;
  align-items: center;
  margin: 0 5px 0 0;
  text-decoration: none;
  padding: 1px 4px;
  border-radius: 5px;
  background: rgb(246, 248, 255);
}

.section.slideshow .section-headline img{
  width: 15px;
  margin: 0 2px 0 0;
}

@media only screen and (max-width: 700px){
  .section.slideshow {
    border-radius: 20px;
   background: var(--items-bg-color-1);
    box-shadow: var(--box-shadow-blur-items-1);
    border: var(--border-blur-items-1);
    backdrop-filter: var(--backdrop-filter-items-1);
  }
}

@media only screen and (max-width: 600px){
  .section.slideshow .section-headline h2{
    font-size: 14px;
  }
}

.section.welcome .slides-carousel{
  display: flex;
  width: 100%;
  flex-flow: column;
  position: relative;
}

@media only screen and (min-width: 701px){
  .section.slideshow{
    padding: 10px;
  }

  .section.slideshow .curve-form{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .section.slideshow .curve-form::before,
  .section.slideshow .curve-form::after
  {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--items-bg-color-1);
    clip-path: var(--curve-top-right-form);
  }

  .section.slideshow .curve-form::before{  
    filter: blur(9px);
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    top: -3px;
    left: -3px;
    backdrop-filter: blur(9px);
    background: #7fa0ff38;
    backdrop-filter: var(--backdrop-filter-items-1);
  }

  .section.slideshow .section-headline h2{
    font-size: 12px;
    color: #454c6f;    
    margin: 10px 0 0px 0;
  }
  
  .section.slideshow .scroll-wrapper{
    overscroll-behavior: contain;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 20px, rgba(0,0,0,1) calc(100% - 20px), rgba(0,0,0,0) );
    width: 100%;
    height: 100%;
    display: flex;
    /* arrastart con el mouse o touch ------------------ */
    /* overflow-y: auto; */
    overflow: hidden;
    position: relative;
  }

  .section.slideshow .scroll-wrapper::-webkit-scrollbar-track{
    margin: 12px 10px;
  }

  .section.slideshow .slides-carousel{
    display: flex;
    width: 100%;
    flex-flow: column;
    padding: 15px 10px 0px 10px;
    flex-shrink: 0;
    min-height: fit-content;
    position: relative;
  }
}

.section.slideshow .slide{
  width: 100%;
  height: calc(50% - 40px);
  --slide-border-radius: 20px;
  border-radius: var(--slide-border-radius);
  flex-shrink: 0;
  /* background: #ddd; */
  position: relative;
  padding: clamp(10px, 1vw, 20px);
  display: flex;
  align-items: flex-end;
  box-shadow: var(--box-shadow-blur-items-1);  
  margin: 0 0 20px 0;
}

.section.slideshow .slide .bg-curve-top-right,
.section.slideshow .slide .bg-curve-bottom-right
{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /* background: cyan; */
  /* z-index: 3; */
  background-size: cover!important;
  background-position: center!important;
}

.section.slideshow .slide .bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.section.slideshow .slide .text{
  width: calc(100% - 60px);
  background: #0000005b;
  backdrop-filter: blur(10px);
  color: white;
  border-radius: calc(var(--slide-border-radius) - 10px);
  padding: 10px;
  display: flex;
  flex-flow: column;
  position: relative;
  z-index: 1;
}

.section.slideshow .slide .text .headline{
  font-size: 17px;
}

.section.slideshow .slide .text .caption{
  font-size: 12px;
}




@media only screen and (max-width: 700px){  

  .section.slideshow{
    width: 100%;    
    overflow: visible;
    padding: 10px 10px 0 10px;
  }

  .section.slideshow .scroll-wrapper{
    overflow-x: auto;
    width: calc(100% + 40px);
    margin: 0 0 0 -20px;
    padding: 0 0px 0 20px;
    display: flex;
  }

  .section.slideshow .slides-carousel{
    flex-flow: row;
    flex-shrink: 0;
    min-width: 100%;
    width: fit-content;
    padding: 0 0 15px 0;
  }

  .section .slideshow .slide{
    height: 20vh;
    width: calc(90vw - 20px);
    max-width: 450px;
    margin: 0 20px 0 0!important;
  }

  .section.slideshow .slide .bg-curve-top-right,
  .section.slideshow .slide .bg-curve-bottom-right
  {
    clip-path: none!important;
    border-radius: 20px;
  }
}

@media only screen and (max-width: 700px), (max-height: 700px){
  .section.slideshow .slide .text .headline{
    font-size: 15px;
  }
  
  .section.slideshow .slide .text .caption{
    font-size: 12px;
  }
}

.section.slideshow{
  --nav-arrow-width: 36px;
}

.section.slideshow .nav-arrow{  
  position: absolute;  
  width: var(--nav-arrow-width);
  height: var(--nav-arrow-width);
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: linear-gradient(to top, #ccc, white); */
  background: linear-gradient(to left, black, #555);
  box-shadow: 0px 2px 4px rgb(0 0 0 / 20%);
  z-index: 5;
  border-radius: 40px;
  cursor: pointer;  
  display: none;
}

.section.slideshow .nav-arrow svg{ 
  fill: white;
 }

.section.slideshow .nav-arrow.prev{
  right: 0;
  top: calc( 50% - (var(--nav-arrow-width) + 10px));
  transform: rotate(90deg);
}

.section.slideshow .nav-arrow.next{
  right: 0;
  top: calc( 50% + 10px);
  transform: rotate(90deg);
}

@media only screen and (max-width: 700px){
  .section.welcome{
    flex-flow: column;
    height: auto;
    max-height: none;
  }
}

@media only screen and (max-width: 700px), (max-height: 700px){

  .section.slideshow{
    --nav-arrow-width: 40px;
  }

  .section.slideshow .nav-arrow{    
    width: var(--nav-arrow-width);
    height: var(--nav-arrow-width);
    top: calc(100% - (var(--nav-arrow-width) + 2px));
  }

  .section.slideshow .nav-arrow.prev{
    left: -4px;
  }
  
  .slideshow.recommended .nav-arrow.next{
    right: -4px;
  }
}



/*
88""Yb 888888  dP""b8  dP"Yb  8b    d8
88__dP 88__   dP   `" dP   Yb 88b  d88
88"Yb  88""   Yb      Yb   dP 88YbdP88
88  Yb 888888  YboodP  YbodP  88 YY 88
8b    d8 888888 88b 88 8888b.  888888 8888b.
88b  d88 88__   88Yb88  8I  Yb 88__    8I  Yb
88YbdP88 88""   88 Y88  8I  dY 88""    8I  dY
88 YY 88 888888 88  Y8 8888Y"  888888 8888Y"
*/


.recommended{
  display: flex;
  position: relative;
  padding: 45px 0 20px 2%;
  flex-flow: row;
  align-items: flex-end;
  border-radius: 30px;
  flex-shrink: 0;
  margin: 0 20px 0 0;
  width: 65%;
}


.recommended .section-name{
  position: absolute;
  top: 10px;
  left: 2%;
  z-index: 2;
}

.recommended .section-name h2{
  margin: 0;
  font-size: 16px;
  color: #454c6f;
}

@media only screen and (max-width: 600px){
  .recommended .section-name h2{
    font-size: 12px;
  }
}

.recommended .cont-items.books{
  border-radius: inherit;
  display: flex;
  width: 100%;
}


.recommended{
  --nav-arrow-width: 36px;
}

.recommended .curve-form{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;  
  /* filter: drop-shadow( 0 0 1px #d2d9ff) drop-shadow(0 8px 15px rgba(95, 143, 255, 0.3)) ; */
  
  /* animation: fadeIn 0.2s ease 0s 1 both; */
  
}

.recommended .curve-form::before,
.recommended .curve-form::after
{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--items-bg-color-1);
  
  
  clip-path: var(--curve-top-right-form);
}

.recommended .curve-form::before{  
  filter: blur(9px);
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  top: -3px;
  left: -3px;
  backdrop-filter: blur(9px);
  background: #7fa0ff38;
  backdrop-filter: var(--backdrop-filter-items-1);
}

.recommended .nav-arrow{
  top: 0;
  position: absolute;  
  width: var(--nav-arrow-width);
  height: var(--nav-arrow-width);
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to top, #ccc, white);
  box-shadow: 0px 2px 4px rgb(0 0 0 / 20%);
  z-index: 5;
  border-radius: 40px;
  cursor: pointer;
}

.recommended .nav-arrow.prev{
  right: calc(var(--nav-arrow-width) + 10px);
}

.recommended .nav-arrow.next{
  right: 0;
}

.recommended .item{
  animation: fadeIn 0.2s ease 0s 1 both;
  display: flex;
  align-items: flex-end;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  border-radius: inherit;  
}

.recommended .reco-bg{  
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 60px);
  top: 50px;
  left: 10px;
  z-index: 0;
  border-radius: 20px;
  background: #666;
  background-position: center!important;
  background-size: cover!important;
  transition: background 0.3s ease;
}


@media only screen and (max-width: 600px) and (-webkit-max-device-pixel-ratio: 2), only screen and (max-width: 600px) and (max-resolution: 287dpi){
  .recommended .reco-bg{
    background-image: var(--reco-bg-350px);
  }
}

@media only screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2.01), only screen and (max-width: 600px) and (min-resolution: 288dpi){
  .recommended .reco-bg{
    background-image: var(--reco-bg-700px);
  }
}

@media only screen and (min-width: 601px){
  .recommended .reco-bg{
    background-image: var(--reco-bg-1200px);
  }
}

.recommended .info{  
  display: flex;
  width: 70%;  
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  padding: 15px 10px 10px 10px;
  flex-flow: column;  
  color: white;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  background: rgb(0 0 0 / 40%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.recommended .info .title{
  font-size: 25px;
  font-weight: bold;  
  margin: 0 0 10px 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.recommended .info .author{
  font-size: 17px;
  font-style: italic;
  margin: 0 0 10px 0;
  cursor: pointer;
  opacity: 0.6;
  width: fit-content;
}

.recommended .info .author:hover{
  font-weight: bold;
  opacity: 1;
}

.recommended .info .review{
  font-size: 14px;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recommended .info .cont-triggers{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  margin: 10px 0;
}

.recommended .info .btn-trigger{
  padding: 7px 12px;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  margin: 0 10px 10px 0;
  cursor: pointer;
}

.recommended .info .btn-trigger.rounded{
  padding: 0;
  border: none;
  width: 33px;
  height: 33px;
}

.recommended .info .btn-trigger svg{
  fill: white;
}

.recommended .info .btn-trigger.focus{
  background: var(--main-blue);
}

.recommended .info .btn-trigger:hover{
  filter: brightness(0.8);
}


.recommended .cont-cover{
  width: 25%;
  max-width: 180px;
  position: absolute;
  bottom: 37%;
  right: 5%;
  z-index: 2;
  perspective: 1000px;
  transform-style: preserve-3d;  
}

.recommended .cover{  
  width: 100%;
  position: absolute;
  bottom: -126px;
  right: 0;
  transform-origin: left;
  transform: rotateY(-13deg);  
}

.recommended .cover::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;  
  background-image: radial-gradient(circle at 128% 0%, rgb(255 255 255 / 0%) 50%, rgb(83 83 83 / 57%)), linear-gradient(to right, transparent, rgba(0, 0, 0, 0.137) 12%, transparent 50%);
  z-index: 7;  
}

.recommended .cover::after{
  content: '';
  position: absolute;  
  top: 5%;
  height: 93%;
  right: -5%;
  width: 95%;
  transform: translateZ(-50px);
  background: linear-gradient(to right, #4f4f4f 81%, white);
  z-index: 4;
  box-shadow: -8px 8px 14px -2px rgba(0, 0, 0, 0.4);
}

.recommended .cover img{
  width: 100%;
  display: block;
  position: relative;
  z-index: 5;
}

.recommended .books .cover svg.author,
.recommended .books .cover svg.title
{
  z-index: 6;
}

.recommended .books .cover svg.author text{
  font-size: 7px!important;
}


.recommended .books .cover svg.title text{
  font-size: 11px!important;
}


@media only screen and (max-width: 900px){  

  /* .section.recommended {
    margin: 0 0 20px 0;
    width: 100%;
    height: 35vh;
    min-height: 320px;    
  } */

  .section.recommended .item.active{
    perspective: 1500px;
    padding-bottom: 30px;
  }

  .section.recommended .cont-cover{
    top: calc(clamp(30px,5vh, 100px) + (var(--nav-arrow-width) + 10px));    
    width: 21%;
    max-width: 96px;
    right: 3%;
    bottom: initial;
  }

  .section.recommended .cover{    
    transform: rotateY(-20deg);
  }

  .recommended .books .cover svg.author text{
    font-size: 5px!important;
  }
  
  
  .recommended .books .cover svg.title text{
    font-size: 9px!important;
  }

  .recommended .info{
    width: 100%;
  }

  .recommended .info .title{
    font-size: 18px;
  }

  .recommended .info .title{
    font-size: 18px;
  }

  .recommended .info .author{
    font-size: 13px;
  }

  .recommended .info .review {
    font-size: 12px;
  }
}

@media only screen and (max-width: 700px){  

  .section.recommended {
    margin: 0 0 20px 0;
    width: 100%;
    height: 35vh;
    min-height: 320px;    
  }

  .section.recommended .item{
    padding: 10px;
  }
}

@media only screen and (max-width: 700px), (max-height: 700px){
  .section.recommended .cont-cover{
    top: 21%;
  }
}

@media only screen and (max-width: 450px){  

  .section.recommended .cont-cover{
    top: 13%;
    min-width: 80px;  
  }
}


/*
.#####....####....####...##..##...####..
.##..##..##..##..##..##..##.##...##.....
.#####...##..##..##..##..####.....####..
.##..##..##..##..##..##..##.##.......##.
.#####....####....####...##..##...####..
........................................
*/

.carousel.books{
  padding: 60px 0 20px 20px;
}

.carousel.books .item{
  border-radius: 15px;
  display: flex;
  align-items: center;
  padding: 0 20px 10px 20px;
  height: 160px;
  flex-shrink: 0;
  width: 400px;
  border: var(--border-blur-items-1);
  background: var(--items-bg-color-1-semi-opaque);
  box-shadow: var(--box-shadow-blur-items-1);
  animation: fadeIn 0.4s ease 0s 1 both;
  transition: box-shadow 0.2s ease;
}

.carousel.books .item .cover{
  display: flex;
  flex-shrink: 0;
  width: 130px;
  position: relative;
  box-shadow: 0 5px 10px -1px rgba(0,0,0,0.3);
  margin: -50px 0 0 0;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  animation: fadeIn 0.4s ease 0.2s 1 both;
}

.carousel.books .item:hover{
  box-shadow: 0 9px 17px -4px rgb(112 138 255), 0 12px 33px 0px rgb(18 74 255 / 56%);
}

.carousel.books .item:hover .cover{
  box-shadow: 0 9px 17px -4px rgb(112 138 255);
  transform: translateY(-5px);
}

.carousel.books .cover::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: var(--book-cover-shadow);
}

.carousel.books .item .cover img{
  width: 100%;
  display: block;
}

.books .cover svg.author,
.modal.details .cover svg.author
{
	position: absolute;	
	height: 11px;
	width: calc(100% - 10px);
	z-index: 2;
  top: 7%;
  left: 4%;
}

.books .cover svg.title,
.modal.details .cover svg.title
{
	position: absolute;
	width: calc(100% - 10px);
	z-index: 1;
  top: 11%;
  left: 4%
}



.carousel.books .item .info{
  display: flex;
  flex-flow: column;
  margin: 0 0 0 10px;
}

.carousel.books .item .info .title{
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carousel.books .item .info .author{
  font-size: 14px;
  margin: 10px 0 0 0;
  opacity: 0.7;
  font-style: italic;
  /* text-decoration: underline; */
  cursor: pointer;
}

.carousel.books .item .info .author:hover{
  font-weight: bold;
  opacity: 1;
}

@media only screen and (max-width: 600px){
  .carousel.books {
    padding: 50px 0 20px 15px;
  }

  .carousel.books .item{
    width: calc(100% - 50px);
    padding: 10px 10px 10px 10px;
    height: auto;
  }

  .carousel.books .item .cover{
    width: 33%;
    margin: -30px 0 0 0;
  }

  .carousel.books .item .info {
    margin: 0 0 0 15px;
  }
}

.original-cover{
  display: block;
}

.original-cover.hidden{
  display: none!important;
}

/*
.#####....####...#####...######..#####....####...######..######...####..
.##..##..##..##..##..##....##....##..##..##..##....##......##....##.....
.#####...##..##..#####.....##....#####...######....##......##.....####..
.##......##..##..##..##....##....##..##..##..##....##......##........##.
.##.......####...##..##....##....##..##..##..##..######....##.....####..
........................................................................
*/



.carousel.portraits{
  padding: 20px 20px 10px 20px;
}


.carousel.portraits .item{
  display: flex;
  flex-flow: column;
  /* border: 1px solid red; */
  margin: 0 40px 0 0;
  cursor: pointer;
  flex-shrink: 0;
  width: 150px;
}

:root{
  --frame-border-portraits: 8px;
  --frame-external-portraits: 4px;
}

.cont-portrait{
  width: 150px;
  height: 225px;
  background-position: center;
  background-size: cover;
  margin: 0 0 20px 0;
  position: relative;
  padding: var(--frame-border-portraits);
  background: white;
  box-shadow: 0 9px 17px -4px rgb(112 138 255), 0 5px 6px -4px rgb(90 129 255 / 33%);
  transition: box-shadow 0.2s ease;
}

.authors .item:hover .cont-portrait{
  box-shadow: 0 9px 17px -4px rgb(112 138 255), 0 12px 33px 0px rgb(18 74 255 / 56%);
}

.cont-portrait .frame
 {
  /* content: ""; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;  
}

.cont-portrait::before,
.cont-portrait::after
{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block; 
  top: var(--frame-external-portraits);
  left: var(--frame-external-portraits);
  width: calc(100% - (var(--frame-external-portraits) * 2));
  height: calc(100% - (var(--frame-external-portraits) * 2));
}

.cont-portrait::before
 {
  background-image: radial-gradient(circle at -29% -34%, transparent, rgba(255, 255, 255, 0.5) 56%, transparent 57%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 25%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 25%);
}

.cont-portrait::after {
  background-image: radial-gradient(circle at 108% 91%, transparent, rgba(255, 255, 255, 0.45) 48%, transparent 49%);
  mask-image: linear-gradient(-78deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 60%);
  -webkit-mask-image: linear-gradient(-78deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 60%);
}

.cont-portrait .frame{ 
  
  border-style: solid;
  border-width: 4px;

  --top-color: #aaa;
  --right-color: #ddd;
  --bottom-color: #eee;
  --left-color: #ddd;
  border-color: var(--top-color) var(--right-color) var(--bottom-color) var(--left-color);
  outline: 3px solid #ccc;
  transition: border-color 0.2s ease, outline 0.2s ease;
}


.authors .item:hover .frame{      
  --top-color: #88abff;
  --right-color: #b9caff;
  --bottom-color: #d9deff;
  --left-color: #acc0ff;
  border-color: var(--top-color) var(--right-color) var(--bottom-color) var(--left-color);
  outline: 3px solid #cbd3ff;
}

  

.item .portrait{
  position: absolute;
  top: var(--frame-border-portraits);
  left: var(--frame-border-portraits); 
  width: calc(100% - (var(--frame-border-portraits)*2));  
  height: calc(100% - (var(--frame-border-portraits)*2));
  background-position: center;
  background-size: cover;
  margin: 0;
  display: block;
}

.carousel.portraits .item .info{
  width: 100%;
  text-align: center;
  display: flex;
  flex-flow: column;
}

@media only screen and (max-width: 600px){
  .carousel.portraits .item{
    width: calc(44% - 10px);
    flex-shrink: 0;
    margin: 0 20px 0 0;
    max-width: 150px;
  }

  .carousel.portraits .cont-portrait{
    width: 100%;
    padding-top: 140%;
    height: auto;
  }

}


/*
.##..##..######..##...##...####...#####....####...#####...######..#####....####..
.###.##..##......##...##..##......##..##..##..##..##..##..##......##..##..##.....
.##.###..####....##.#.##...####...#####...######..#####...####....#####....####..
.##..##..##......#######......##..##......##..##..##......##......##..##......##.
.##..##..######...##.##....####...##......##..##..##......######..##..##...####..
.................................................................................
*/

.carousel.news{
  padding: 5px 0 20px 20px;
}

.newspapers .item{
  display: flex;
  flex-flow: column;  
  width: 350px;
  border-radius: 30px;
  padding: 10px 10px 10px 10px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  background: white;
  border: var(--border-blur-items-1);
  box-shadow: var(--box-shadow-blur-items-1);
}

.newspapers .item .cont-bg{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  opacity: 0.65;
  border-radius: inherit;
}

.newspapers .info .cont-tags{
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0 0 0;
  position: absolute;
  top: calc(var(--h) - 25px); /* CALC BY JS FROM COVER IMG HEIGHT */
  left: 15px;
}


.newspapers .info .cont-tags .tag{
  padding: 1px 4px;
  border-radius: 10px;
  font-size: 10px;
  margin: 0 5px 0 0;
  background: black;
  color: white;
  border: none;
  letter-spacing: 0.5px;
}



.newspapers .item .cont-bg .bg{
  position: absolute;
  width: 80%;
  height: 30%;
  top: 35%;
  left: 10%;
  filter: blur(20px) saturate(2.5);
}

.newspapers .item .cover{
  background: #eee;
  width: 100%;
  border-radius: 25px;
  aspect-ratio: 1 /0.5;  
  position: relative;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3);
  transition: filter 0.1s ease;
  grid-area: cover;
}

.newspapers .item .bg picture,
.newspapers .item .bg img,
.newspapers .item .cover picture,
.newspapers .item .cover img
{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}


.newspapers .cont-triggers{
  display: flex;
  justify-content: flex-end;
  margin: -39px 0 0 0;
  padding: 0 5px 0px 0;
  width: 100%;
  z-index: 1;
  grid-area: contTriggers;
}

.newspapers .cont-triggers .btn-trigger{
  margin: 0 0 0 5px;
  /* background: var(--main-blue-gradient); */
  background: #eee;
  --fill: black;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 40px;
}

.newspapers .cont-triggers .btn-trigger.download-trigger{
  background: var(--main-focus-yellow-gradient);
  --fill: black;
}

.newspapers .cont-triggers .btn-trigger svg{
  width: 22px;
  height: 22px;
  fill: var(--fill, white);
}

.newspapers .info{
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  margin: 15px 0 0 0;
  grid-area: info;
  padding: 0 10px;
}

.newspapers .info .headline{
  width: 100%;
  text-align: justify;
  font-weight: bold;
  font-size: 15px;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  hyphens: auto;
}

.newspapers .info .cont-metadata{
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.newspapers .info .origin{
  display: flex;
  align-items: center;
  padding: 5px;
  width: auto;
  border-radius: 7px;  
  cursor: pointer;
  position: relative;
}


.newspapers .info .origin img{
  margin: 0 5px 0 0;
}

.newspapers .info .publisher{
  font-size: 14px;
}

.newspapers .info .origin .publisher{
  font-size: 15px;
}

.newspapers .info .timestamp{
  text-align: right;
  font-size: 10px;
  font-style: italic;
  margin: 0 0 0 10px;
  width: auto;
}

.newspapers .info .timestamp.short{
  display: none;
}

@media only screen and (max-width: 600px){
  .newspapers .item{
    width: calc(100% - 50px);
  }
}

.modal.expanded-section.newspapers .section-headline{
  margin: 0 0 20px 0;
}

.modal.expanded-section.newspapers .section-details{
  display: flex;
  justify-content: center;
  font-size: 14px;
  animation: fadeIn 0.1s ease 0s 1 both;
  margin: -20px 0 30px 0;
}

.modal.expanded-section.newspapers .section-details.hidden{
  display: none;
}

.modal.expanded-section.newspapers .section-details p{
  width: 100%;
  max-width: 800px;
  text-align: justify;
  text-align-last: center;
}



/*
..####...######..##..##..######..#####....####...##.....
.##......##......###.##..##......##..##..##..##..##.....
.##.###..####....##.###..####....#####...######..##.....
.##..##..##......##..##..##......##..##..##..##..##.....
..####...######..##..##..######..##..##..##..##..######.
........................................................
*/

.section.general{
  padding: 10px;
}

.cont-scroll-flow{
  width: 100%;
  display: flex;
  padding: 25px 5px 5px 5px;
}

.scroll-flow.books{
  padding: 20px 0 0 0;
  width: 100%;
  display: grid;
  align-items: flex-start;
  gap: var(--gap);
  grid-template-columns: repeat(var(--columns), calc( (100% / var(--columns)) - ((var(--gap) * (var(--columns) - 1) ) / var(--columns) ) ) );  
}

@media only screen and (max-width: 299px){
  .scroll-flow.books{
    --gap: 10px;
    --columns: 1;
  }
}

@media only screen and (min-width: 300px){
  .scroll-flow.books{
    --gap: 10px;
    --columns: 2;
  }
}

@media only screen and (min-width: 351px){
  .scroll-flow.books{
    --gap: 20px;
    --columns: 2;
  }
}

@media only screen and (min-width: 470px){
  .scroll-flow.books{
    --gap: 10px;
    --columns: 3;
  }
}

@media only screen and (min-width: 670px){  
  .scroll-flow.books{
    --columns: 4;        
  }
}

@media only screen and (min-width: 880px){  
  .scroll-flow.books{
    --columns: 5;
  }
}

@media only screen and (min-width: 1100px){
  .scroll-flow.books{
    --columns: 4;
  }
}

@media only screen and (min-width: 1151px){
  .scroll-flow.books{
    --columns: 5;    
  }
}

@media only screen and (min-width: 1300px){
  .scroll-flow.books{
    --columns: 6;    
  }
}

@media only screen and (min-width: 1500px){
  .scroll-flow.books{
    --columns: 7;    
  }
}

@media only screen and (min-width: 1700px){
  .scroll-flow.books{
    --columns: 8;
  }
}

.section.general .section-headline{  
  position: sticky;
  top: 45px;
  z-index: 2;
  backdrop-filter: blur(20px);
  border-radius: 10px;
}


@media only screen and (max-width: 600px){
  .section.general .section-headline{  
    top: 42px;
    align-items: flex-end;
  }
}

.scroll-flow.books .cont-btn-load-more{
  grid-column: 1 / span var(--columns);
}

.scroll-flow.books .item{
  display: flex;
  flex-flow: column;
  padding: 15px;  
  border-radius: 20px;
  transition: box-shadow 0.2s ease;
  cursor: pointer;
  animation: fadeIn 0.1s ease 0s 1 both;
  background: white;
  border: var(--border-blur-items-1);
  box-shadow: var(--box-shadow-blur-items-1);
}

.scroll-flow.books .item:hover{
  box-shadow: 0 9px 17px -4px rgb(112 138 255), 0 12px 33px 0px rgb(18 74 255 / 56%);
}


.scroll-flow.books .item .cover{
  width: 100%;
  position: relative;
  margin: 0px 0 10px 0;
  box-shadow: var(--box-shadow-blur-items-1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.scroll-flow.books .item:hover .cover{
  box-shadow: 0 9px 17px -4px rgb(112 138 255);
  transform: translateY(-10px);
}


.scroll-flow.books .item .cover img{
  width: 100%;
  display: block;
}

.scroll-flow.books .cover::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: var(--book-cover-shadow);
}

.scroll-flow.books .item .info{
  display: flex;
  width: 100%;
  flex-flow: column;
}

.scroll-flow.books .item .info .title{
  font-size: 15px;
}

.scroll-flow.books .item .info .author{
  font-size: 12px;
  font-style: italic;
  opacity: 0.7;
  /* text-decoration: underline; */
  cursor: alias;
  margin: 2px 0 0 0;
  color: #002eff;
}

.scroll-flow.books .item .info .author:hover{
  font-weight: bold;
}


/*
      ::::::::   ::::::::   ::::::::  :::    ::: ::::::::::: :::::::::: ::::::::
    :+:    :+: :+:    :+: :+:    :+: :+:   :+:      :+:     :+:       :+:    :+:
   +:+        +:+    +:+ +:+    +:+ +:+  +:+       +:+     +:+       +:+
  +#+        +#+    +:+ +#+    +:+ +#++:++        +#+     +#++:++#  +#++:++#++
 +#+        +#+    +#+ +#+    +#+ +#+  +#+       +#+     +#+              +#+
#+#    #+# #+#    #+# #+#    #+# #+#   #+#      #+#     #+#       #+#    #+#
########   ########   ########  ###    ### ########### ########## ########
*/


.cont-cookies-bar{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: fixed;
  bottom: 0;
  padding: 20px 20px 20px 20px;
  /* background-image: linear-gradient(to top, rgba(0,0,0,0.6), transparent);   */
  background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
  backdrop-filter: blur(5px);
}

.cookies-bar{
  background: black;
  width: 100%;
  max-width: 800px;
  display: flex;
  border-radius: 20px;
  padding: 20px;
  align-items: center;
  color: white;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

.cookies-bar p{
  margin: 0;  
}

.cookies-bar i{
  font-weight: bold;
}

.cookies-bar p .link{
  color: rgb(25, 153, 153);
  font-size: 14px;
  text-decoration: none;
  margin: 0 0 0 5px;
}

.cookies-bar p .link:hover{
  color: cyan;
}

.cookies-bar .cont-triggers{
  display: flex;
  margin: 0 0 0 20px;
}

.cookies-bar .btn-trigger{
  padding: 7px 12px;
  border-radius: 15px;
  background: #555;
  cursor: pointer;
  text-align: center;
}

.cookies-bar .btn-trigger.focus{
  background: orange;
  color: black;
  margin: 0 0 0 10px;
}

.cookies-bar .btn-trigger:hover{
  opacity: 0.8;
}

@media only screen and (max-width: 450px){
  .cookies-bar{
    flex-flow: column;
    font-size: 14px;
  }

  .cookies-bar .cont-triggers{
    margin: 20px 0 0 0;
  }

  .cookies-bar p{
    text-align: justify;
    text-align-last: left;
  }
}

@media only screen and (min-width: 451px) and (max-width: 600px){
  .cookies-bar .cont-triggers{
    flex-flow: column-reverse;
  }

  .cookies-bar .btn-trigger.focus{
    margin: 0;
  }

  .cookies-bar .btn-trigger{
    width: 100%;
    margin: 10px 0 0 0;
  }

}

/*
      ::::::::   ::::::::  :::::::::   ::::::::  :::        :::
    :+:    :+: :+:    :+: :+:    :+: :+:    :+: :+:        :+:
   +:+        +:+        +:+    +:+ +:+    +:+ +:+        +:+
  +#++:++#++ +#+        +#++:++#:  +#+    +:+ +#+        +#+
        +#+ +#+        +#+    +#+ +#+    +#+ +#+        +#+
#+#    #+# #+#    #+# #+#    #+# #+#    #+# #+#        #+#
########   ########  ###    ###  ########  ########## ##########
*/

.scroll-top-button{
  
  background: yellow;

	right: 12px;
	/* position: fixed; */
  position: absolute;
	bottom: 12px;
	display: none;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50px;
	z-index: 10;
	cursor: pointer;
	animation: fadeIn 0.2s ease 0s 1 both;
	/* box-shadow: 0 5px 10px -3px rgba(0, 0, 0, 0.585); */
  box-shadow: 0 0px 19px rgb(105 70 0);
  padding: 2px 0 0 0;
}

.modal.expanded-section .cont-scroll-top-button{
  position: sticky;
  bottom: 0;  
  width: 100%;
  display: flex;
  justify-content: flex-end;
  z-index: 12;
}

.modal.expanded-section .cont-scroll-top-button .scroll-top-button{
  position: absolute;
  bottom: 0;
  right: 0;
}

.scroll-top-button:hover{
	background: rgb(231, 239, 0);
}

.scroll-top-button svg{
	fill: black;
}

@media (pointer: fine){
	.scroll-top-button{		
		right: 30px;
    bottom: 30px;
	}
	/* .modal .scrollButton{
		right: 35px;
		bottom: 20px;
		position: absolute!important;
	} */
}


/*
      ::::    :::     :::     :::     :::
     :+:+:   :+:   :+: :+:   :+:     :+:
    :+:+:+  +:+  +:+   +:+  +:+     +:+
   +#+ +:+ +#+ +#++:++#++: +#+     +:+
  +#+  +#+#+# +#+     +#+  +#+   +#+
 #+#   #+#+# #+#     #+#   #+#+#+#
###    #### ###     ###     ###
  ::::::::::: ::::::::   ::::::::  :::        ::::::::
     :+:    :+:    :+: :+:    :+: :+:       :+:    :+:
    +:+    +:+    +:+ +:+    +:+ +:+       +:+
   +#+    +#+    +:+ +#+    +:+ +#+       +#++:++#++
  +#+    +#+    +#+ +#+    +#+ +#+              +#+
 #+#    #+#    #+# #+#    #+# #+#       #+#    #+#
###     ########   ########  ########## ########
*/

.nav-tools{
  display: flex;  
}

.nav-tools .index-storage{
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.nav-tools .arrow{
  width: 40px;
  height: 40px;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  margin: 0 0 0 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background 0.1s ease;
}

.nav-tools .arrow:hover{
  background: #ddd;
}


/*
      ::::::::  :::        ::::::::::: :::::::::  :::::::::   ::::::::      :::
    :+:    :+: :+:            :+:     :+:    :+: :+:    :+: :+:    :+:   :+: :+:
   +:+        +:+            +:+     +:+    +:+ +:+    +:+ +:+    +:+  +:+   +:+
  +#+        +#+            +#+     +#++:++#+  +#++:++#+  +#+    +:+ +#++:++#++:
 +#+        +#+            +#+     +#+        +#+    +#+ +#+    +#+ +#+     +#+
#+#    #+# #+#            #+#     #+#        #+#    #+# #+#    #+# #+#     #+#
########  ########## ########### ###        #########   ########  ###     ###
*/

.btn-trigger.ok-copy{
  position: relative;
  pointer-events: none;
}

.btn-trigger.ok-copy svg,
.btn-trigger.ok-copy span
{
  visibility: hidden;
  opacity: 0;
}

.btn-trigger.ok-copy::after{
  content: "";
  position: absolute;
  left: calc(50% - 3px);
  top: calc(50% - 7px);
  width: 5px;
  height: 10px;  
  border: solid lime;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

body:not(.dark-mode) .modal .btn-trigger.ok-copy::after{
  border-color: green;
}

.modal.custom-alert{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: none;  
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10px;
  z-index: 10;
}

.modal.custom-alert.ok-copy{  
  background-image: linear-gradient(to bottom, rgba(56, 255, 96, 0.7), rgba(43, 255, 75, 0.3), transparent 30%);
}

.modal.custom-alert.error-copy,
.modal.custom-alert.error-download
{  
  background-image: linear-gradient(to bottom, rgba(255, 56, 56, 0.7), rgba(255, 43, 43, 0.3), transparent 30%);
}

.modal.custom-alert.ok-download{  
  background-image: linear-gradient(to bottom, rgba(255, 235, 56, 0.7), rgba(255, 234, 43, 0.3), transparent 30%);
}
  
.modal.custom-alert .content{
  background: white;
  border-radius: 10px;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0 40px 0;
  max-width: 350px;
  font-weight: bold;
  box-shadow: 0 25px 10px -6px rgba(0, 0, 0, 0.2);
  animation: fadeIn-toDown 0.3s ease 0.1s 1 both;
}
  
.modal.custom-alert.ok-copy .content{
  background: rgb(239, 255, 217);
  color: black;
}

.modal.custom-alert.ok-download .content{
  background: rgb(255, 255, 217);
  color: black;
}
  
.modal.custom-alert.error-copy .content,
.modal.custom-alert.error-download .content
{
  background: rgb(255, 209, 209);
  color: black;
}

/*
        :::   :::    ::::::::  :::::::::      :::     :::
      :+:+: :+:+:  :+:    :+: :+:    :+:   :+: :+:   :+:
    +:+ +:+:+ +:+ +:+    +:+ +:+    +:+  +:+   +:+  +:+
   +#+  +:+  +#+ +#+    +:+ +#+    +:+ +#++:++#++: +#+
  +#+       +#+ +#+    +#+ +#+    +#+ +#+     +#+ +#+
 #+#       #+# #+#    #+# #+#    #+# #+#     #+# #+#
###       ###  ########  #########  ###     ### ##########
*/

.modal{  
  background: linear-gradient(to top,rgb(71, 71, 255), rgba(152, 164, 255, 0.21));
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  animation: fadeIn 0.3s ease 0s 1 both;
  backdrop-filter: blur(3px);  
}

@media (pointer:fine){
  .modal ::-webkit-scrollbar-track {    
    border-radius: 20px;
  }
}

.modal .scroll-helper{
  width: 100%;
  border-radius: 20px;
  max-height: 100%;
  display: flex;  
  position: relative;
  
  --items-bg-color-1: linear-gradient(45deg, rgb(215 223 255), rgb(255, 255, 255));
      background: var(--items-bg-color-1);
    border-radius: 20px;
    backdrop-filter: var(--backdrop-filter-items-1);
    border: var(--border-blur-items-1);
    box-shadow: var(--box-shadow-blur-items-1);
  
}

.modal .scroll-helper .content::-webkit-scrollbar-track{
  margin: 20px 0;
}

.modal .content{
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center; 
  padding: 40px 15px 30px 15px;
  animation: fadeIn 0.4s ease 0.2s 1 both;
  box-shadow: var(--box-shadow-blur-items-1);
}

.modal.expanded-section .scroll-helper{
  border-radius: 30px ;
}

.modal.expanded-section .scroll-helper::-webkit-scrollbar-track{
  margin: 20px 0;
}

.modal.expanded-section .content{
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 20px, rgba(0,0,0,1) calc(100% - 20px), rgba(0,0,0,0) );
  border-radius: 30px;
}


.modal .cont-btn-close{
  position: sticky;  
  top: 0;
  left: 0;
  width: 100%;
  z-index: 21;
  /* margin: 0 0 20px 0; */
}


.modal .btn-close{
  position: absolute;
  bottom: -5px;
  right: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.modal.expanded-section .btn-close{
  bottom: -8px;
}


/*
      :::::::::  :::::::::: ::::::::::: :::     ::::::::::: :::        ::::::::
     :+:    :+: :+:            :+:   :+: :+:       :+:     :+:       :+:    :+:
    +:+    +:+ +:+            +:+  +:+   +:+      +:+     +:+       +:+
   +#+    +:+ +#++:++#       +#+ +#++:++#++:     +#+     +#+       +#++:++#++
  +#+    +#+ +#+            +#+ +#+     +#+     +#+     +#+              +#+
 #+#    #+# #+#            #+# #+#     #+#     #+#     #+#       #+#    #+#
#########  ##########     ### ###     ### ########### ########## ########
*/




@media (pointer:fine){
  .modal.details ::-webkit-scrollbar-track {    
    border-radius: 20px;
  }
}

.modal.details .scroll-helper{  
  max-width: 600px;
}

.modal.details .content{    
  flex-flow: column;
  justify-content: flex-start;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 20px, rgba(0,0,0,1) calc(100% - 20px), rgba(0,0,0,0) );
}

.modal.details .item{
  display: flex;
  align-items: center;
  width: 100%;
  animation: fadeIn 0.4s ease 0.2s 1 both;
}

.modal.details .item .cover{
  --focusCoverUpdateShadow: rgba(0, 19, 112, 0.4);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 130px;
  margin: 0 20px 0 0;
  position: relative;
  /* box-shadow: var(--box-shadow-blur-items-1); */
  perspective: 1000px;
  transform-style: preserve-3d;
  filter: drop-shadow(0px 8px 13px rgba(95, 143, 255, 0.8));
  grid-area: cover;
}

.modal.details .item .cover .cont-img,
.modal.details .item .cover .title,
.modal.details .item .cover .author
{
  
  transform-origin: left;
  transform: rotateY(0deg);
  transition: transform 0.3s ease;
}

.modal.details .item.perspective .cover .title,
.modal.details .item.perspective .cover .author,
.modal.details .item.perspective .cover .cont-img
{
  transform: rotateY(-30deg);
  z-index: 22;
}

.modal.details .cover svg.title,
.modal.details .cover svg.author
{
  left: 0;
  padding-left: 4%;
  z-index: 23!important;
}


.modal.details .item:not(.perspective) .cover .back-page{
  display: none;
}

.modal.details .item .cover .back-page{
  background: linear-gradient(to right, #d8d8d8 81%, white);
  display: flex;
  position: absolute;
  top: 0%;
  height: 100%;
  right: -5%;
  width: 100%;
  transform-origin: left;
  transform: rotateY(11deg);
  z-index: 21;
  overflow: hidden;
  /* padding: clamp(2px,1vh,10px); */
}

.modal.details .item .cover .back-page .demo-text{
  position: absolute;
  overflow: hidden;
  text-align: justify;
  text-align-last: left;
  font-size: clamp(3px,1vh,8px);
  width: calc(100% - (clamp(2px,1vh,10px) * 2));
  height: calc(100% - (clamp(2px,1vh,10px) * 2));
  top: clamp(2px, 1vh, 10px);
  left: clamp(2px, 1vh, 10px);
}

.modal.details .item.perspective:not(.sepia-black, .black-white) .back-page{
  color: black;
}

.modal.details .item.perspective.sepia-black .back-page{
  background: rgb(255, 244, 197);
  color: black;
}

.modal.details .item.perspective.black-white .back-page{
  background: #222;
  color: white;
}

.modal.details .item.plain-text-preview-enabled .cont-img,
.modal.details .item.plain-text-preview-enabled .cover .title,
.modal.details .item.plain-text-preview-enabled .cover .author
{
  opacity: 0;
}

.modal.details .item.plain-text-preview-enabled .back-page{
  display: flex!important;
  color: black!important;
  transform: unset!important;
  hyphens: auto;
  right: 0!important;
  background: linear-gradient(45deg, #d8d8d8, white);
}

.modal.details .item .cover.svg-white svg{
  fill: white!important;
}

.modal.details .item .cover .cont-img{
  display: flex;  
  flex-shrink: 0;  
  width: 100%;
  position: relative;
}

.modal.details .cover .cont-img::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(to right, transparent 3%, rgba(0, 0, 0, 0.1) 12%, transparent 60%);
}

.modal.details .item .cover img{
  width: 100%;
  display: block;
}

.modal.details .cover .cont-img .unsplash-cover-desing{
  width: 100%;
  height: 195px;
  display: flex;
  align-items: flex-end;
  padding: 6px;
  background: white;
}

.modal.details .item.perspective.unsplash-cover-black .unsplash-cover-desing{
  background: black;
}

.modal.details .item.perspective.unsplash-cover-black{
  --fill: white!important;
}

.modal.details .cover .cont-img .unsplash-cover-desing img{
  border-radius: 7px;
  animation: fadeIn 0.2s ease 0s 1 both;  
}


.modal.details .item .info{
  width: 100%;  
  grid-area: info;
}

@media only screen and (min-width: 601px){
  .modal.details .item .info{
    width: calc(100% - 150px);
  } 
}

.modal.details .item .info .title{
  font-size: 20px;
  font-weight: bold;  
  margin: 0 0 10px 0;  
}

.modal.details .item .info .author{
  font-size: 15px;
  font-style: italic;
  margin: 0 0 10px 0;
  cursor: pointer;
  /* text-decoration: underline; */
  display: inline-block;
}

.modal.details .item .info .author:hover{
  font-weight: bold;
}

.modal.details .item .info .review{
  font-size: 14px;
  text-align: justify;
  text-align-last: left;
}

.modal.details .item .info .review.compressed{
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal.details .item .info .cont-triggers{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  margin: 10px 0 0 0;
  justify-content: flex-end;
}

.modal.details .item .info .btn-trigger{
  
  background: #eee;  
  padding: 5px 12px;
  font-size: 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  margin: 5px;
  cursor: pointer;  
  position: relative;  
}

.modal.details .item .info .btn-trigger.copy-url-short-trigger{
  border: var(--border-blur-items-1);
}

.modal.details .item .info .btn-trigger.rounded{
  padding: 0;
  border: none;
  width: 33px;
  height: 33px;
  border: var(--border-blur-items-1);
}

.modal.details .item .info .btn-trigger svg{
  fill: black;
}

.modal.details .item .info .btn-trigger.focus{  
  background: var(--main-focus-yellow-gradient);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  color: black;
}

.modal.details .item .info .btn-trigger.focus:hover{  
  background: var(--main-focus-yellow-gradient-hover);
}

.modal.details .item .info .btn-trigger.rounded.focus{
  background:#fff2b2;
  box-shadow: none;
}

.modal.details .item .info .btn-trigger.focus svg{
  fill: black;
}


.download-ops-trigger{  
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border-radius: 0 25px 25px 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 2px 13px 0 12px;
  transition: background 0.1s ease;
}

.download-ops-trigger svg{ 
  width: 20px;
  height: 20px;
}

.download-ops-trigger .deco-arrow{
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: white transparent transparent transparent;
}

.download-ops-trigger:hover{  
  background: rgba(0, 0, 0, 0.1);
}

.modal.details .item .info .download-trigger-composed{
  padding: 0 33px 0 0;
}

.modal.details .item .info .download-trigger{
  position: relative;
  height: 100%;
  padding: 7px 11px 7px 12px;
  border-radius: 25px 0 0 25px;
}


@media (pointer: fine){
  .download-ops-trigger{
    padding: 2px 10px 0 8px;
  }

  .modal.details .item .info .download-trigger{
      padding: 7px 7px 7px 12px;
  }

  .modal.details .item .info .download-trigger-composed{
    padding: 0 26px 0 0;
  }
}


@media only screen and (max-width: 600px){

  .modal.details .content{
    padding: 30px 10px 10px 10px;
    justify-content: flex-start;
  }

  .modal.details .item{
    display: flex;
    align-items: center;
    flex-flow: column;    
    max-width: 400px;
  }

  .modal.details .item .cover{
    margin: 0 0 20px 0;
  }

  .modal.details .item.perspective {
    display: grid;
    grid-template-columns: minmax(100%, 400px);
    grid-template-areas: 'cover' 'info';
    grid-template-rows: 25% 75%;
    justify-items: center;
    align-items: unset;
    height: 100%;
    padding: 10px 0;
  }

  .modal.details .item.perspective .cover{
    width: auto;
    height: 100%;
  }

  .modal.details .item.perspective .cover .cont-img{
    height: 100%;
  }

  .modal.details .item.perspective .info{
    border-radius: 20px;
    border: 2px solid #ccc;
    padding: 10px;
    overflow-y: auto;
    margin: 20px 0 0 0;
  }

  .modal.details .item.perspective .info::-webkit-scrollbar-track{
    margin: 10px 0;
  }

  .modal.details .item.item.perspective .cover .cont-img .unsplash-cover-desing{
    width: auto;
    height: 100%;
    aspect-ratio: 0.66 / 1;
  }

}

.modal.details h3{
  font-size: 16px;
}

.modal.details h4{
  font-size: 14px;
}

.modal.details .dor{
  animation: fadeIn 0.3s ease 0.1s 1 both;
}

.modal.details .dor.hidden{
  display: none!important;
}

.modal.details .cont-download-ops{
  display: flex;
  border: 1px solid var(--soft-lines-color);
  padding: 10px;
  flex-flow: column;
  border-radius: 15px;
  width: 100%;
}

.modal.details .download-op:not(:last-child){
  margin: 0 0 5px 0;
}

.modal.details .download-op-headline{
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  padding: 5px;
  border-radius: 10px;
  font-size: 14px;
}

.modal.details .download-op-headline:hover{
  background: var(--soft-gray-bg);
}

.modal.details .download-op.selected .download-op-headline{
  background: var(--soft-blue);
  cursor: pointer;
  color: black;
}

.modal.details .download-op .download-op-headline input{
  appearance: auto;
}

.modal.details .download-op-headline label{
  width: 100%;
  cursor: pointer;
  font-style: italic;
}

.modal.details .download-op-headline .input{
  transform: scale(1.1);
}

.modal.details select{
  padding: 3px 0px;
  border-radius: 7px;
  border: 1px solid #ddd;
}




.modal.details .custom-pdf-ops{
  display: flex;
  border: 1px solid var(--soft-lines-color);
  padding: 10px;
  flex-flow: column;
  border-radius: 15px;
  width: 100%;
}

.modal.details .custom-op:not(:last-child){
  margin: 0 0 10px 0;
}

.modal.details .custom-op{
  display: flex;
  width: 100%;
  font-size: 14px;
  align-items: center;
  justify-content: space-between;
}

.modal.details .custom-op label{
  display: flex;
  width: 100%;
}

.modal.details .cop-gallery.scroll{
  display: flex;
  width: 100%;
  flex-flow: column;
}

.modal.details .cop-gallery.scroll .gallery{
  position: relative;
  width: 100%;
  overflow: hidden;
}

.modal.details .cop-gallery.scroll .gallery .grid{
  display: flex;
  width: 100%;
  overflow-x: auto;  
  padding: 10px 20px;
  height: auto;
  mask-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 20px, rgba(0,0,0,1) calc(100% - 20px), rgba(0,0,0,0) );
}

.modal.details .cop-gallery.scroll .gallery .grid::-webkit-scrollbar-track{
  margin: 0 20px;
}

.modal.details .cop-gallery.scroll .gallery .grid .gallery-ops{
  display: flex;
}

@media (pointer:fine){
  .modal.details .cop-gallery.scroll .gallery ::-webkit-scrollbar-track,
  .modal.details .cop-gallery.scroll .gallery ::-webkit-scrollbar-thumb  
  {    
    border-radius: 0!important;
  }  
}

.modal.details .cop-gallery.scroll .gallery .gop{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  margin: 0 10px 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}

.modal.details .cop-gallery.scroll .gallery .gop:hover
{
  outline: 2px solid var(--main-blue);
}

.modal.details .cop-gallery.scroll .gallery .gop.selected{
  outline: 2px solid lime;
}

.modal.details .cop-gallery.scroll .gallery .gop img{
  width: 100%;
  display: block;
}

.modal.details .cop-gallery.scroll .gallery .gop.selected img{
  filter: brightness(0.5);
} 

.modal.details .cop-gallery.scroll .gallery .gop.selected::after{
  content: "";
  position: absolute;
  left: calc(50% - 3px);
  top: calc(50% - 7px);
  width: 5px;
  height: 10px;
  border: solid lime;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.modal.details .short-link{
  width: 100%;
  display: flex;  
  align-items: center;
  margin: 10px 0 0 0;
  justify-content: center;
  padding: 10px;
  border: 1px solid var(--soft-lines-color);
  border-radius: 15px;
  display: none;
}

.modal.details .short-link textarea{
  border-radius: 10px;
  padding: 5px;
  outline: none;
  border: 1px solid var(--soft-lines-color);
  font-family: monospace;
  font-size: 14px;
  resize: none;
  cursor: text;
}

.modal.details .item .info .short-link .btn-trigger{
  font-size: 12px;
  margin: 0 0 0 10px;
}

.select-images{
  display: flex;
  position: relative;
  width: 126px;
  height: 26px;
  flex-shrink: 0;
  background: #ddd;
  border-radius: 7px;
  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); */
}

.select-images .cont-ops{
  display: flex;
  flex-flow: column;
  width: calc(100% - 13px);
  position: absolute;
  bottom: 100%;
  background: #ddd;
  padding: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 7px;  
}

.select-images .cont-ops.hidden{
  display: none;
}

.select-images .op{
  height: 26px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 5px;
  cursor: pointer;
}

.select-images .cont-ops .op:hover{
  background: #ccc;
}

.select-images .op img{
  height: 100%;
  mix-blend-mode: darken;
}

.select-images .op.selected{
  align-items: center;
  padding: 5px 18px 5px 6px;
  cursor: pointer; 
}

.select-images .op.selected .arrow {
  background: linear-gradient(to bottom, #ccc, #aaa);
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px 5px 3px 5px;
  height: 100%;
  border-radius: 0 7px 7px 0;  
}

.select-images .op.selected:hover .arrow {
  filter: brightness(0.8);
}

.select-images .op.selected .arrow div {
  border-color: transparent transparent transparent black;
  border-style: solid;
  border-width: 4px 0 4px 5px;
  transform: rotate(90deg);
}


.downloadLink{
  position: absolute;
}




/*
        :::   :::    ::::::::  :::::::::      :::     :::
      :+:+: :+:+:  :+:    :+: :+:    :+:   :+: :+:   :+:
    +:+ +:+:+ +:+ +:+    +:+ +:+    +:+  +:+   +:+  +:+
   +#+  +:+  +#+ +#+    +:+ +#+    +:+ +#++:++#++: +#+
  +#+       +#+ +#+    +#+ +#+    +#+ +#+     +#+ +#+
 #+#       #+# #+#    #+# #+#    #+# #+#     #+# #+#
###       ###  ########  #########  ###     ### ##########
      :::::::::: :::    ::: :::::::::     :::     ::::    ::: :::::::::
     :+:        :+:    :+: :+:    :+:  :+: :+:   :+:+:   :+: :+:    :+:
    +:+         +:+  +:+  +:+    +:+ +:+   +:+  :+:+:+  +:+ +:+    +:+
   +#++:++#     +#++:+   +#++:++#+ +#++:++#++: +#+ +:+ +#+ +#+    +:+
  +#+         +#+  +#+  +#+       +#+     +#+ +#+  +#+#+# +#+    +#+
 #+#        #+#    #+# #+#       #+#     #+# #+#   #+#+# #+#    #+#
########## ###    ### ###       ###     ### ###    #### #########
*/

.modal.expanded-section .scroll-helper{
  max-width: 1180px;
}

.modal.expanded-section .content{  
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.modal.expanded-section.authors .content .item{
  width: clamp(110px,calc(50% - 34px), 150px);
  margin: 7px 10px 30px 10px;
  display: flex;
  flex-flow: column;
  text-align: center;
  cursor: pointer;
}

.modal.expanded-section.authors .content .item .cont-portrait{
  width: 100%;
  height: auto;
  padding-top: 144%;
  margin: 0 0 10px 0;
}

.modal.expanded-section.authors .content .item .info{
  width: 100%;
}

@media only screen and (max-width: 600px){

  .modal.expanded-section.authors .content .item{  
    width: clamp(85px,calc(33% - 34px), 150px);
  }

  .modal.expanded-section.authors .content .item .info{
    font-size: 14px;
  }
}

.modal.expanded-section.newspapers .item{
  width: clamp(250px,calc(100% - 34px), 350px);
  margin: 0 7px 20px 7px;
}

@media only screen and (max-width: 450px){
  .modal.expanded-section.newspapers:not(.preload) .content{
    padding: 30px 10px 15px 10px;
  }

  .modal.expanded-section.newspapers .item{
    width: clamp(250px,100%, 350px);
    margin: 15px 0;
    padding: 10px;
    display: grid;
    grid-template-areas: 'cover info' 'contTriggers info';
    align-items: center;
    grid-template-columns: 35% 1fr;
    gap: 0 10px;
    min-height: 130px;
  }

  .modal.expanded-section.newspapers .item .cont-bg .bg{
        position: absolute;
    width: 31%;
    height: auto;
    top: 18px;
    left: 16px;
    aspect-ratio: 1 / 0.5;
    filter: blur(10px) saturate(2.5);
  }


  .modal.expanded-section.newspapers .item .cover{
    margin: 0;
    align-self: baseline;
    aspect-ratio: 1 / 1;
  }



  .modal.expanded-section.newspapers .cont-triggers .btn-trigger{
    width: 38px;
    height: 23px;
  }

  .modal.expanded-section.newspapers .cont-triggers .btn-trigger svg{
    width: 19px;
    height: 19px;
  }

  .modal.expanded-section.newspapers .item .info{
    width: 100%;
    position: relative;
    margin: 0;
  }

  .modal.expanded-section.newspapers .item .info .headline{
    font-size: 14px;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    text-align: left;
  }

  .modal.expanded-section.newspapers .info .cont-tags{
    display: flex;
    flex-wrap: nowrap;
    margin: 10px 0 0 0;
    position: unset;
    top: 74%;
    left: -60%;
    width: 100%;
    /* font-size: 4px!important; */
    overflow: hidden;
  }

  .modal.expanded-section.newspapers .info .cont-tags .tag{
    letter-spacing: 0;
    font-size: 10px;
    margin: 0 2px 2px 0;
    white-space: nowrap;
  }

  .modal.expanded-section.newspapers .item .info .origin{    
    margin: 5px 0 0 0;
  }

  .modal.expanded-section.newspapers .item .info .origin span{    
    font-size: 11px;
  }

  .modal.expanded-section.newspapers .item .info .timestamp{    
    margin: 5px 0 0 0;
    font-size: 11px;
  }

  .modal.expanded-section.newspapers .info .timestamp.short{
    display: inline;
  }

  .modal.expanded-section.newspapers .info .timestamp.human{
    display: none;
  }
}

.modal.expanded-section .cont-btn-load-more,
.section.general .cont-btn-load-more,
.section.search .cont-btn-load-more
{
  width: 100%;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin: 30px 0 20px 0;
}

.modal.expanded-section .cont-btn-load-more .btn-trigger,
.section.general .cont-btn-load-more .btn-trigger,
.section.search .cont-btn-load-more .btn-trigger
{
  cursor: pointer;
  /* background: var(--main-blue); */
  background: var(--main-blue-gradient);
  width: 100%;
  max-width: 150px;
  height: 36px;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}






/*
      :::::::::  :::::::::  :::::::::: :::        ::::::::      :::     :::::::::
     :+:    :+: :+:    :+: :+:        :+:       :+:    :+:   :+: :+:   :+:    :+:
    +:+    +:+ +:+    +:+ +:+        +:+       +:+    +:+  +:+   +:+  +:+    +:+
   +#++:++#+  +#++:++#:  +#++:++#   +#+       +#+    +:+ +#++:++#++: +#+    +:+
  +#+        +#+    +#+ +#+        +#+       +#+    +#+ +#+     +#+ +#+    +#+
 #+#        #+#    #+# #+#        #+#       #+#    #+# #+#     #+# #+#    #+#
###        ###    ### ########## ########## ########  ###     ### #########
*/

.top-tools .cont-load-icon,
.cont-btn-load-more .cont-load-icon,
.cont-btn-load-more.load-more span,
.downloadTrigger .cont-load-icon
{
  display: none;
}

.dark-mode .top-tools .cont-load-icon,
.cont-btn-load-more.load-more .cont-load-icon
{
  display: flex;
}

.downloadTrigger.activeRequest{
  position: relative;
  pointer-events: none;
}

.downloadTrigger.activeRequest .cont-load-icon{
  display: block;
  position: absolute;
  top: calc(50% - 9px);
  left: calc(50% - 10px);  
}

.downloadTrigger.activeRequest span,
.downloadTrigger.activeRequest svg
{
  visibility: hidden;
  opacity: 0;
}

.modal.preload .scroll-helper{
  width: auto;
  max-width: none;
  padding: 0;
  border-radius: 10px;
}

.modal.preload .content{
  padding: 10px;
  overflow: hidden;
}

.item.preload{
  display: flex;
  align-items: center;
  justify-content: center;
  background: none!important;
  border: 1px dashed var(--soft-lines-color);
  box-shadow: none!important;  
}

.section .carousel.books .item.preload{
  height: 180px!important;
}

.section .scroll-flow.books .item.preload{
  padding-top: 140%!important;
}

.section .scroll-flow.books .item.preload .cont-load-icon{
  margin-top: -140%;
}

.section .portraits .item.preload{
  height: 180px!important;
  width: 120px;
}

.section .news .item.preload{
  height: 200px!important;
}

.item.preload.off .cont-load-icon{
  display: none;
}

.item.preload.on .cont-load-icon{
  display: block;
}

.cont-load-icon{
  transform: rotateY(180deg);
}

.load-icon {
	--b:4px;  /* border width*/
	color: #313149;
	display: inline-block;
	width: 20px;
	aspect-ratio: 1;
	position: relative;
	z-index: 5;
	animation: rotate 1s linear 0s infinite both;
	display: block;
	/* margin: 0 5px 0 0; */
}

:root{
  --load-icon-start-color: var(--main-blue);
}

.cont-btn-load-more .cont-load-icon,
.downloadTrigger .cont-load-icon

{
  --load-icon-start-color: black!important;
}

.load-icon:before {
	--c:conic-gradient(var(--load-icon-start-color), transparent);
	content:"";
	position:absolute;
	z-index:-1;
	inset: 0;
	background: var(--c,linear-gradient(to right, #9c20aa, #fb3570));
	padding: var(--b);
	border-radius: 50%;
	-webkit-mask: 
		linear-gradient(#fff 0 0) content-box, 
		linear-gradient(#fff 0 0);
			mask: 
		linear-gradient(#fff 0 0) content-box, 
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
			mask-composite: exclude;
}


/*
      ::::::::  :::::::::: ::::    ::: :::::::::: :::::::::  ::::::::::: ::::::::
    :+:    :+: :+:        :+:+:   :+: :+:        :+:    :+:     :+:    :+:    :+:
   +:+        +:+        :+:+:+  +:+ +:+        +:+    +:+     +:+    +:+
  :#:        +#++:++#   +#+ +:+ +#+ +#++:++#   +#++:++#:      +#+    +#+
 +#+   +#+# +#+        +#+  +#+#+# +#+        +#+    +#+     +#+    +#+
#+#    #+# #+#        #+#   #+#+# #+#        #+#    #+#     #+#    #+#    #+#
########  ########## ###    #### ########## ###    ### ########### ########
*/

.page.generic{
  --max-page-generic-width: 900px;  
}

.page-generic-wrapper{
  display: flex;
  flex-flow: column;
  width: 100%;
  padding: 20px;
  align-items: center;
  backdrop-filter: var(--backdrop-filter-items-1);
  box-shadow: var(--box-shadow-blur-items-1);
  background: var(--items-bg-color-1);
  margin: 30px 0 10px 0;
  border-radius: 30px;
}

.page-headline{
	width: 100%;
	max-width: var(--max-page-generic-width);
	border-radius: 20px;
	height: 30vh;
  max-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	box-shadow: 0 2px 4px 0px rgba(0,0,0,0.2);
  flex-shrink: 0;
  margin: 20px 0 20px 0;
}

@media only screen and (max-width: 600px){
  .page-generic-wrapper{
    margin: 10px 0 10px 0;
  }

  .page-headline{
    height: 25vh;
  }
}

.page-headline:not(.simple)::before{
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;;
  width: calc(100% + 40px);
  height: calc(100% + 40px);  
  background-position: center;
  background-size: cover;
  filter: blur(3px);
}

.page-headline::before{
  background-image: var(--phbg900);
}

@media only screen and (max-width: 450px){
  .page-headline::before{
    background-image: var(--phbg350);
  }
}

.page-headline *{
  position: relative;
}

.page-headline h1{
  font-size: 40px;
  color: white;
  text-shadow: 0 2px 3px rgba(0,0,0,0.4);
}



.page.generic .page-info{
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 100%;
  max-width: var(--max-page-generic-width);
  text-align: justify;
  hyphens: auto;
}

.page.generic .page-info p,
.page.generic .page-info li,
.page.generic .page-info b
{
  user-select: text;
}

.page.generic .cont-triggers{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;   
  padding: 20px;
  border: var(--border-blur-items-1);
  border-radius: 20px;
  margin: 20px 0;
}

.page.generic .page-info.voluntariado .cont-triggers{
  grid-template-columns: 1fr;
}

@media only screen and (max-width: 650px){
  .page.generic .cont-triggers{
    grid-template-columns: 1fr;
  }
}

.page.generic .cont-triggers .btn-trigger{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--main-blue-gradient);
  box-shadow: var(--box-shadow-blur-items-1);
  cursor: pointer;
  color: white;
  text-decoration: none;
  --fill: white;
}

.page.generic .cont-triggers .btn-trigger svg{
  margin: 0 5px 0 0;
}

.page.generic .page-info .cont-notes{
  padding: 20px;
  border: var(--border-blur-items-1);
  border-radius: 20px;
  margin: 20px 0;
}

.page.generic .page-info li{
  margin: 10px 0;
}

.page.generic .page-info a{
  color: rgb(37, 37, 255);
}


/*
      :::::::::   ::::::::  ::::    :::     :::
     :+:    :+: :+:    :+: :+:+:   :+:   :+: :+:
    +:+    +:+ +:+    +:+ :+:+:+  +:+  +:+   +:+
   +#+    +:+ +#+    +:+ +#+ +:+ +#+ +#++:++#++:
  +#+    +#+ +#+    +#+ +#+  +#+#+# +#+     +#+
 #+#    #+# #+#    #+# #+#   #+#+# #+#     #+#
#########   ########  ###    #### ###     ###
  ::::::::::: ::::::::::: :::     :::  ::::::::   ::::::::
     :+:         :+:     :+:     :+: :+:    :+: :+:    :+:
    +:+         +:+     +:+     +:+ +:+    +:+ +:+
   +#+         +#+     +#+     +:+ +#+    +:+ +#++:++#++
  +#+         +#+      +#+   +#+  +#+    +#+        +#+
 #+#         #+#       #+#+#+#   #+#    #+# #+#    #+#
###     ###########     ###      ########   ########
*/

.generic .page-info.donativos .btn-trigger{
  padding: 0 9px 0 20px;
  display: flex;
  align-items: center;  
  margin: 0 0 10px 0;
  border-radius: 30px;
  text-decoration: none;
  height: 38px;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;  
  background: var(--main-focus-yellow-gradient);
  box-shadow: var(--box-shadow-blur-items-1);
  color: black;
}


.generic .page-info.donativos .cont-triggers.column{
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  margin: 20px 0;
}


img.banner-pagos{
  width: 80%;
  max-width: 200px;
}

.brand-registry{
  opacity: 0.6;
}

.generic .page-info .cont-foundator{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 20px;
  gap: 20px;
  width: 100%;
  justify-items: center;
  max-width: 600px;
  border: var(--border-blur-items-1);
  padding: 20px;
  border-radius: 20px;
  align-items: center;
}

.generic .page-info .cont-foundator .profile-pic{
  width: 50%;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  justify-self: flex-end;
}

.generic .page-info .cont-foundator address{
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  font-size: 14px;
}






/*
      ::::::::  ::::::::::     :::     :::::::::   ::::::::  :::    :::
    :+:    :+: :+:          :+: :+:   :+:    :+: :+:    :+: :+:    :+:
   +:+        +:+         +:+   +:+  +:+    +:+ +:+        +:+    +:+
  +#++:++#++ +#++:++#   +#++:++#++: +#++:++#:  +#+        +#++:++#++
        +#+ +#+        +#+     +#+ +#+    +#+ +#+        +#+    +#+
#+#    #+# #+#        #+#     #+# #+#    #+# #+#    #+# #+#    #+#
########  ########## ###     ### ###    ###  ########  ###    ###
*/

.section.search{
  display: none;
  padding: 10px;
}

.search-results-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  background: rgb(240 255 202);
  padding: 10px 10px;
  width: calc(100% - 20px);
  max-width: 580px;
  margin: 20px auto 0 auto;
  font-size: 14px;
}

.search-results-bar p{
  margin: 0;
}

.section.search .section-headline{  
  top: 43px;
  position: sticky;
  z-index: 2;

  --items-bg-color-1: linear-gradient(45deg, rgb(215 223 255), rgb(255 255 255 / 89%));
    background: var(--items-bg-color-1);
  border-radius: 20px;
  backdrop-filter: var(--backdrop-filter-items-1);
  border: var(--border-blur-items-1);
  box-shadow: var(--box-shadow-blur-items-1);
  padding: 5px 10px;

  max-width: 600px;
  margin: auto;
}

.section.search .section-headline h2{
  margin: 0;
}

@media only screen and (max-width: 600px){
  .section.search .section-headline{  
    top: 44px;
  }
}





/*
      :::::::::: :::    :::
     :+:        :+:    :+:
    +:+         +:+  +:+
   :#::+::#     +#++:+
  +#+         +#+  +#+
 #+#        #+#    #+#
###        ###    ###
*/

@keyframes toBackLeft{
  0%{
    transform: translateX(0px) scale(1);
     opacity: 1; 
     visibility: visible;     
  }

  100%{
    transform: translateX(-100px) scale(1);
     opacity: 0; 
     visibility: visible;     
  }
}


@keyframes fromFrontRight{
  0%{
    transform: translateX(20px) scale(1.05);
     opacity: 0; 
     visibility: visible;     
  }

  100%{
    transform: translateX(0px) scale(1);
     opacity: 1; 
     visibility: visible;     
  }  
}

@keyframes toBackRight{
  0%{
    transform: translateX(0px) scale(1);
     opacity: 1; 
     visibility: visible;     
  }

  100%{
    transform: translateX(100px) scale(1);
     opacity: 0; 
     visibility: visible;     
  }
}


@keyframes fromFrontLeft{
  0%{
    transform: translateX(-20px) scale(1.05);
     opacity: 0; 
     visibility: visible;     
  }

  100%{
    transform: translateX(0px) scale(1);
     opacity: 1; 
     visibility: visible;     
  }  
}


@keyframes toDown{
  0%{transform: translateY(-150%)}
  100%{transform: translateY(0)}
}

@keyframes fadeIn-toDown {
  0%{opacity: 0; visibility: hidden; transform: translateY(-30%)}
  100%{opacity: 1; visibility: visible; transform: translateY(0%)}
}

@keyframes fadeOut-toUp {
  0%{opacity: 1; visibility: visible; transform: translateY(0%)}
  100%{opacity: 0; visibility: hidden; transform: translateY(-30%)}
}



@keyframes toLeft{
  0%{transform: translateX(50%)}
  100%{transform: translateX(0)}
}



@keyframes rotate{
	0%{
		transform: rotate(360deg);
	}
}

@keyframes rotateSVG{
	0%{
		transform: rotate(360deg);		
	}
}


@keyframes focusCoverUpdate{
  0%{
    position: relative;
    top: 0;
    z-index: 20;
    box-shadow: none;
    opacity: 0;
  }
  15%{
    position: sticky;
    top: 5px;
    z-index: 23;
    box-shadow: 0 15px 20px -3px var(--focusCoverUpdateShadow);
    opacity: 1;
  }
  85%{
    position: sticky;
    top: 5px;
    z-index: 23;
    box-shadow: 0 15px 20px -3px var(--focusCoverUpdateShadow);
    opacity: 1;
  }

  100%{
    position: relative;
    top: 0;
    z-index: 20;
    box-shadow: none;
    opacity: 0;
  }
}


@keyframes fadeIn {
  0%{opacity: 0; visibility: hidden;}
  100%{opacity: 1; visibility: visible;}
}

@keyframes fadeOut {
  0%{opacity: 1; visibility: visible;}
  100%{opacity: 0; visibility: hidden;}
}

/*
      ::::::::   ::::::::  ::::    ::: ::::::::::: :::      :::::::: :::::::::::
    :+:    :+: :+:    :+: :+:+:   :+:     :+:   :+: :+:   :+:    :+:    :+:
   +:+        +:+    +:+ :+:+:+  +:+     +:+  +:+   +:+  +:+           +:+
  +#+        +#+    +:+ +#+ +:+ +#+     +#+ +#++:++#++: +#+           +#+
 +#+        +#+    +#+ +#+  +#+#+#     +#+ +#+     +#+ +#+           +#+
#+#    #+# #+#    #+# #+#   #+#+#     #+# #+#     #+# #+#    #+#    #+#
########   ########  ###    ####     ### ###     ###  ########     ###
*/


/* CHAT MODAL //////////////////////////////////////////// */

.modal-contact{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 40;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: fadeIn 0.4s ease 0s 1 both;
	--social-icon-size: 30px;
	--social-icon-size-svg: 20px;
	display: none;
  padding: 0;
}


.modal-wrapper{
	padding: 20px 10px;
	max-height: 100%;
	overflow-y: auto;
	width: 100%;
	display: flex;
	justify-content: center;
	animation: fadeIn 0.4s ease 0.1s 1 both, toUp 0.8s ease 0.1s 1 both;
}


.modal-contact .content{
	width: 100%;
	max-width: 800px;
	/* background: radial-gradient(circle at 50% -30%, rgb(105 98 79), rgb(36 30 15)); */
	background: var(--items-bg-color-1-semi-opaque);
	--border-color: #7d7d7d;
	border: 1px solid var(--border-color);
	--border-radius: 20px;
	border-radius: var(--border-radius);
	padding: 0 0 20px clamp(1px,50%,400px);
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.5);
	height: fit-content;
	overflow: hidden;
	position: relative;
  flex-flow: column;
	
}

.modal-contact .ilust{
	position: absolute;
	width: 50%;
	max-width: 400px;
	height: 100%;
	top: 0;
	left: 0;
	background: #222;
	border-radius: var(--border-radius) 0 0 var(--border-radius);
	overflow: hidden;
}

.modal-contact .ilust picture,
.modal-contact .ilust img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}


@media only screen and (max-width: 700px){
	.modal-contact .content{
		padding: 0 0 20px 0;
		max-width: 400px;
	}

	.modal-contact .content .ilust{
		position: relative;
		width: 100%;
		aspect-ratio: 1 / 0.3;
		border-radius: 0;
	}

	.modal-contact .ilust picture,
	.modal-contact .ilust img
	{
		object-position: 50% 40%;
	}

	.modal-contact .ilust img{
		transform: rotateY(0deg);
	}

	.modal-contact .modal-title{
		margin: 0;
	}
}


.modal-contact .instructions{
	font-size: 15px;
	text-align: center;
	padding: 0 20px;
	margin: 20px 0 10px 0;
}

.modal-contact .social{
	justify-content: center;
	padding: 10px;
	margin: 0 0 10px 0;
}



.modal-title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 20px;
	margin: 0 0 10px 0;
  width: 100%;
}

.modal-title h3{
	margin: 0 0 0 0;
	font-size: 22px;
  width: 100%;
}

.modal-contact .btn-close{
	font-size: 30px;
	border-radius: 20px;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #ccc;
	cursor: pointer;
	font-family: monospace;
	font-style: normal;
  position: absolute;
  top: 10px;
  right: 10px;
}


.modal-contact .content form{
	width: 100%;
	display: flex;
	flex-flow: column;
	padding: 0 20px;
}




.modal-contact .content form .cont-input{
	display: flex;
	flex-flow: column;
	--border: var(--border-blur-items-1);
}

input,
textarea,
select,
form .select-plugin
{
	background: white;
	--border-radius: 7px;
	border-radius: var(--border-radius);
	border: var(--border);
	padding: 5px 7px;
	font-family: monospace;
	font-size: 14px;
	outline: none;
	cursor: pointer;
}

input:hover,
textarea:hover,
select:hover,
form .select-plugin:hover
{
	background: white;
}

input:focus,
textarea:focus,
select:focus,
.select-plugin:focus
{
	background: white;
	border-color: blue;
}

input,
textarea
{
	appearance: none;
}

textarea{
	resize: none;
}

form .select-plugin{
	position: relative;
}

form .select-plugin .selected-op{
	padding: 0 20px 0 0 ;
}

form .select-plugin .deco{
	position: absolute;
	top: 0;
	right: 0;
	background: linear-gradient(to bottom, #444, #111);
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
	height: 100%;
	width: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

form .select-plugin .deco::after{
	content: "";
	border-style: solid;
	border-color: white transparent transparent transparent;
	border-width: 5px 3px 0 3px;
}


form .select-plugin:hover .deco{
	background: linear-gradient(to bottom, #666, #333);
}


form .select-plugin .dropdown,
.dropdown-responsive .dropdown
{
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: fit-content;
	max-height: 200px;
	background: #444;
	border: 1px solid #aaa;
	border-radius: inherit;
	box-shadow: 0 5px 10px -3px rgba(0,0,0,0.8);
	overflow-y: auto;
	z-index: 45;
}

.dropdown-responsive .dropdown{
	border-radius: 7px;
}

form .select-plugin .dropdown.active,
.dropdown-responsive .dropdown.active
{
	display: block;
}

form .select-plugin .dropdown .group-label,
.dropdown-responsive .dropdown .group-label
{
	display: block;
	padding: 5px 7px;
}

form .select-plugin .dropdown .group-label.hide,
.dropdown-responsive .dropdown .group-label.hide
{
	display: none;
}

form .select-plugin .dropdown .group-label.active,
.dropdown-responsive .dropdown .group-label.active
{
	display: block;
	position: sticky;
	top: 0;
	background: #222;
	z-index: 48;
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.7);
	pointer-events: none;

}

/* form .select-plugin .dropdown .group-label.active::after,
.dropdown-responsive .dropdown .group-label.active::after */
form .select-plugin .dropdown .group-label::after,
.dropdown-responsive .dropdown .group-label::after
{
	content: " → ";
}

form .select-plugin .dropdown .optgroup,
.dropdown-responsive .dropdown .optgroup
{
	display: none;
	width: 100%;
	animation: fadeIn 0.2s ease 0s 1 both;
}

form .select-plugin .dropdown.active,
.dropdown-responsive .dropdown.active
{
	display: block;
}

form .select-plugin .dropdown .group-label:not(.active):hover,
form .select-plugin .dropdown .option:hover,
.dropdown-responsive .dropdown .group-label:not(.active):hover,
.dropdown-responsive .dropdown .option:hover
{
	background: orange;
	color: black;
}


form .select-plugin .optgroup.active,
.dropdown-responsive .dropdown .optgroup.active
{
	display: block;
}

form .select-plugin .option,
.dropdown-responsive .dropdown .option
{
	padding: 5px 7px;
	display: block;
}

form .select-plugin .dropdown::-webkit-scrollbar-track,
.dropdown-responsive .dropdown::-webkit-scrollbar-track
{
	border-radius: 5px;
	margin: 10px 0;
}

form .select-plugin .dropdown::-webkit-scrollbar-thumb,
.dropdown-responsive .dropdown.dropdown::-webkit-scrollbar-thumb
{
	border-radius: 5px;
}

@media (pointer: coarse){
	.dropdown-responsive{
		/* display: flex; */
		display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
		background: rgba(0, 0, 0, 0.5);
    z-index: 50;
		animation: fadeIn 0.2s ease 0s 1 both;
		padding: 10px;
	}

	.dropdown-responsive.active{
		display: flex;
	}

	.dropdown-responsive .dropdown
	{
		position: relative;
		left: unset;
    top: unset;
    width: calc(100vw - 20px);
		max-height: 100%;
		box-shadow: 0 10px 20px 7px rgb(0 0 0 / 79%);
		max-width: 400px;
		justify-self: anchor-center;
	}
}



.modal-contact .cont-input{
	margin: 10px 0;
}

.modal-contact form label{
	margin: 0 0 5px 0;
	font-weight: bold;
}

.modal-contact .cont-form-triggers{
	display: flex;
	justify-content: flex-end;
	margin: 20px 0 0 0;
}

.modal-contact .form-trigger{
	padding:  5px 7px;
	border: 1px solid #ccc;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.modal-contact .form-trigger.focus{
	border-color: orange;
}

.modal-contact .form-trigger:hover{
	background: #444;
}

.form-trigger.focus
{
  --load-icon-start-color: white!important;
}

@media only screen and (max-width: 500px), (max-height: 500px){
	.modal-contact .content form{
		padding: 0 10px;
		font-size: 14px;
	}

	input, textarea, select{
		font-size: 12px;
	}

	.modal-contact .content form .cont-input {
    margin: 0 0 10px 0;
	}

	.modal-title{
		padding: 10px 20px;
	}
	.modal-title h3{
		font-size: 18px;
	}

	.modal-contact .cont-form-triggers{
		margin: 10px 0 0 0;
	}

}

.social{
	--social-icon-size: 30px;
	--social-icon-size-svg: 20px;
}

.social{
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 4px 0 0 0;
}

.social .social-icon{
	width: var(--social-icon-size);
	height: var(--social-icon-size);
	background: var(--btn-bg, #2c3879);
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 5px 5px 0 0;
	border-radius: 4px;
	--fill: white;
	transition: background 0.1s ease;
}

.social .social-icon span{
	display: none;
}

.social .social-icon:hover{
	background: rgb(255, 221, 0);
	--fill: rgb(0, 0, 0);
}

.social .social-icon svg{
	width: var(--social-icon-size-svg);
	height: var(--social-icon-size-svg);
	fill: var(--fill);
	transition: fill 0.1s ease;
}

/*
      :::    ::: :::::::::: :::        :::::::::
     :+:    :+: :+:        :+:        :+:    :+:
    +:+    +:+ +:+        +:+        +:+    +:+
   +#++:++#++ +#++:++#   +#+        +#++:++#+
  +#+    +#+ +#+        +#+        +#+
 #+#    #+# #+#        #+#        #+#
###    ### ########## ########## ###
*/

.modal.help{
  display: none;
}

.modal.help .scroll-helper{
  max-width: 800px;
  width: 100%;
  height: 100%;
  display: flex;  
}

.modal.help .content{
  flex-flow: column;
  justify-content: flex-start;
  overflow-y: scroll;
}

.modal.help .section-headline svg{
  width: 24px;
  height: 24px;
}

.cont-collapsibles{
  display: flex;
  flex-flow: column;
  width: 100%;
  position: relative;
}

.cont-collapsibles .collapsible{
  display: flex;
  flex-flow: column;
  width: 100%;
  border-radius: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}

.cont-collapsibles .collapsible.expanded{
  border: 1px solid #3752ff;
}


.cont-collapsibles .collapsible:not(:last-of-type){
  margin: 0 0 10px 0;
}

.cont-collapsibles .headline{
  padding: 15px 10px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.1s ease, margin 0.2s ease;
  border-radius: 15px;
}

.cont-collapsibles .headline span{
  display: flex;
  align-items: center;
}

.cont-collapsibles .collapsible.expanded .headline{
  margin: 0 0 10px 0;
  color: rgb(22, 68, 255);
}

.cont-collapsibles .headline:hover{
  background: rgb(205, 216, 255);
}

.cont-collapsibles .caption{
  background: #d0c8ff;
  border-radius: 15px;
  overflow: hidden;
  font-size: 14px;
  font-style: italic;
  display: none;    
}

.cont-collapsibles .collapsible.expanded .caption{
  display: flex;
  flex-flow: column;
  animation: fadeIn 0.3s ease 0s 1 both;
  padding: 20px 10px;
}

.cont-collapsibles .caption p{
  margin: 0;
}

.inset-btn{
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.1);
  padding: 0 3px;
  border-radius: 5px;
  font-style: normal;
  text-decoration: none;
  color: inherit;
}

.inset-btn svg{
  width: 15px;
  height: 15px;
  margin: 0 2px 0 0;
}





/*
      ::::::::  :::::::::: ::::::::::: :::::::::::
    :+:    :+: :+:            :+:         :+:
   +:+        +:+            +:+         +:+
  +#++:++#++ +#++:++#       +#+         +#+
        +#+ +#+            +#+         +#+
#+#    #+# #+#            #+#         #+#
########  ##########     ###         ###
      ::::::::::: ::::    :::  ::::::::   ::::::::
         :+:     :+:+:   :+: :+:    :+: :+:    :+:
        +:+     :+:+:+  +:+ +:+        +:+
       +#+     +#+ +:+ +#+ :#:        +#++:++#++
      +#+     +#+  +#+#+# +#+   +#+#        +#+
     #+#     #+#   #+#+# #+#    #+# #+#    #+#
########### ###    ####  ########   ########
*/


.modal.settings .scroll-helper{
  max-width: 500px;
}

.modal.settings .content{
  flex-flow: column;
  align-items: flex-start;
  padding: 10px;
  padding: 10px 15px 15px 15px;
}

.modal.settings .cont-btn-close{
  top: 30px;
}

.modal.settings h2{
  color: #454c6f;
}

.modal.settings .cont-theme-triggers{
  display: flex;
  align-items: center;
}

.modal.settings .cont-theme-triggers .btn-trigger{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  margin: 0 10px 0 0;
}

.modal.settings .cont-theme-triggers .btn-trigger svg{
  width: 18px;
  height: 18px;
  margin: 0 5px 0 0
}

.modal.settings .cont-theme-triggers .btn-trigger.light{
  background: #ffffff;
  color: black;
  --fill: black;
}

.modal.settings .cont-theme-triggers .btn-trigger.dark{
  background: #21326b;
  color: white;
  --fill: white;
}

body:not(.dark-mode) .modal.settings .cont-theme-triggers .btn-trigger.light,
body.dark-mode .modal.settings .cont-theme-triggers .btn-trigger.dark
{
  outline: 2px solid lime;
}

.modal.settings .settings-option{
  display: flex;
  justify-content: space-between;
  width: 100%;  
}

.modal.settings .settings-option.input{
  border-radius: 5px;
  padding: 2px;
}

.modal.settings .settings-option.input:hover{
  background: #fffdd0;
  cursor: pointer;
}

.modal.settings .settings-option:not(:last-child){
  margin: 0 0 10px 0;
}

.modal.settings .settings-option label{
  width: 100%;
  cursor: pointer;
}

.modal.settings input[type=checkbox]{
  cursor: pointer;
  appearance: auto;
  transform: scale(1.05);
}

.settings-option-animations * {
  animation: none!important;
  transition: none!important;
}

.settings-option-composition .item .cover::after,
.settings-option-composition .newspapers .item .cont-bg,
.settings-option-composition .authors .item .cont-portrait::before,
.settings-option-composition .authors .item .cont-portrait::after,
.settings-option-composition .page-background,
.settings-option-composition .recommended .cover::before
{
  display: none!important;
}

.settings-option-composition .page{
  /* background-image: none!important; */
  mix-blend-mode: none!important;
}

.settings-option-composition *{  
  backdrop-filter: none!important;
  mask-image: none!important;
  -webkit-mask-image: none!important;
  box-shadow: none!important;
  transform: none!important;
}

.settings-option-composition .recommended .info{
  background: #333;
}

.settings-option-composition .curve-form::before,
.settings-option-composition .curve-form::after
{
  clip-path: none;
  display: none;
}

:root{
  --basic-color-composition: #eee;
}

.settings-option-composition .section:not(.welcome),
.settings-option-composition .side-bar,
.settings-option-composition .top-tools,
.settings-option-composition .page-content .section.general .section-headline,
.settings-option-composition .carousel.books .item,
.settings-option-composition .modal,
.settings-option-composition .modal .scroll-helper,
.settings-option-composition .side-bar-blur
{
  
  background: var(--basic-color-composition)!important;
}

.settings-option-composition .section.recommended .item{
  transform: none !important;
  margin: 0 10px;
}

.settings-option-composition .section.recommended .item::before,
.settings-option-composition .section.recommended .item::after
{
  display: none;
}


.modal.settings .cont-custom-bg{
  display: flex;
  flex-flow: column;
  width: 100%;
}

.modal.settings .instructions{
  display: block;
  margin: 10px 0;
  font-size: 13px;
}

.modal.settings .cont-custom-bg .cont-bg-gallery{
  overflow-x: auto;
  display: flex;
  padding: 10px 20px;
  border: var(--border-blur-items-1);
  border-radius: 15px;
}

.modal.settings .cont-custom-bg .cont-bg-gallery .item{
  display: flex;
  flex-shrink: 0;
  aspect-ratio: 1 / 0.7;
  border: 1px solid #aaa;
  border-radius: 5px;
  margin: 0 10px 0 0;
  width: 15%;
  cursor: pointer;
  overflow: hidden;
}

.modal.settings .cont-custom-bg .cont-bg-gallery .item picture,
.modal.settings .cont-custom-bg .cont-bg-gallery .item img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.modal.settings .cont-custom-bg .cont-bg-gallery .item:hover{
  outline: 2px solid orange;
}


body:not(.dark-mode) .modal.settings .cont-custom-bg .cont-bg-gallery .item.selected-light,
body.dark-mode .modal.settings .cont-custom-bg .cont-bg-gallery .item.selected-dark
{
  outline: 2px solid lime;
}