/* Default state */
.selector{
  font-family: 'Play', sans-serif;
  font-size: inherit;
  color: #A5A5A5;
  padding: 0px 10px 3px 5px;
  cursor: pointer;
  position: static;
  transition: 0.3s;
  overflow: hidden;
  /* no selectable text (content?) */
  /* include internal components? */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* IE 10 and IE 11 */
   user-select: none;        /* Standard syntax */
}

.selector:hover {color: #FFFFFF;} /* Color on mouse-over */
.selector.focus{color: #00FFFF;}  /* Color on focus */

/* ------------------------------------------------------------------------------------ */

/* Default state */
.submenu-button{
  font-family: 'Play', sans-serif;
  font-size:20px;
  text-align:right;
  color:#FFFFFF;
  padding: 0px 0px 3px 5px;
  cursor: pointer;
  position: absolute;
  top:0px;right:0px;z-index:200;
  transition: 0.3s;
  overflow: hidden;
  /* no selectable text (content?) */
  /* include internal components? */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* IE 10 and IE 11 */
   user-select: none;        /* Standard syntax */
}
.submenu-button:hover {color: #00FFFF;} /* Color on mouse-over */

.submenu-panel{
  display:flex;flex-direction:column; /* scroll-down */
  background-color: #00000030;backdrop-filter: blur(4px); /* bgblur */
  position:absolute;
  top:27px;
  right:0px;
  bottom:0px;
  width:300px;
  z-index:200;
}

@keyframes key_expand_downwards { from {bottom: 100%;} to {bottom: 0%;} }

.ani-expand-downwards{
  scroll-behavior: smooth;
  animation-name: key_expand_downwards;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

/* ------------------------------------------------------------------------------------ */

/* Variables en CSS !!! , se colocan en root
para escribir: document.documentElement.style.setProperty('--blurred_panel_width', '800px');
para leer: getComputedStyle(document.documentElement).getPropertyValue('--blurred_panel_width')
*/
:root {
  --blurred_panel_width: 540px;
}
@keyframes key_expand_leftwards { from {width: 0px;} to {width: var(--blurred_panel_width);} }

.ani-expand-leftwards{
  scroll-behavior: smooth;
  animation-name: key_expand_leftwards;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

/* ------------------------------------------------------------------------------------ */

/* Default state */
.selector-img{
  padding: 2px 2px 2px 2px;
  margin: 0px 2px 0px 0px;
  cursor: pointer;
  overflow: hidden;
  /* no selectable text (content?) */
  /* include internal components? */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* IE 10 and IE 11 */
   user-select: none;        /* Standard syntax */
}

.selector-img:hover{
  outline-style: solid;
  outline-color: #757575;
  outline-width: 2px;
  z-index:0;
} /* Color on mouse-over */
.selector-img.focus{
  outline-style: solid;
  outline-color: #00FFFF;
  outline-width: 2px;
  z-index:1;
}  /* Color on focus */

/* ------------------------------------------------------------------------------------ */

/* SELECTOR container */
.scontainer{
  position:relative;
  height: fit-content;
  background-color:#00000000;
  z-index:10;
}
/* PAGE container */
.pcontainer{
  scroll-behavior: smooth;
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  z-index:9;

  overflow: hidden;
  overflow-y: scroll; /* Add the ability to scroll */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.pcontainer::-webkit-scrollbar {display: none;}  /* Hide scrollbar for Chrome, Safari and Opera */

/* ------------------------------------------------------------------------------------ */

.iselector_small_title{
  font-family: 'Play', sans-serif;
  font-size: 18px;
  color: #00FFFF;
  text-align:right;
  margin:6px 3px 0px 0px;
  /* no selectable text (content?) */
  /* include internal components? */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* IE 10 and IE 11 */
   user-select: none;        /* Standard syntax */
}

/* index selector */
.iselector_small{
  font-family: 'Play', sans-serif;
  font-size: 14px;
  color: #00A5A5;
  padding: 4px 0px 4px 5px;
  margin: 0px 0px 0px 0px;
  cursor: pointer;
  position: static;

  transition: 0.3s;
  overflow: hidden;

  /* no selectable text (content?) */
  /* include internal components? */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* IE 10 and IE 11 */
   user-select: none;        /* Standard syntax */
}

.iselector_small:hover {color: #00FFFF;} /* Color on mouse-over */
.iselector_small.focus{color: #00A5A5;}  /* Color on focus */

/* ------------------------------------------------------------------------------------ */

.iselector_big_title{
  font-family: 'Play', sans-serif;
  font-size: 18px;
  color: #00FFFF;
  text-align:right;
  padding: 0px 0px 3px 5px;
  margin:5px 0px 0px 0px;
  /* no selectable text (content?) */
  /* include internal components? */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* IE 10 and IE 11 */
   user-select: none;        /* Standard syntax */
}

/* index selector */
.iselector_big{
  font-family: 'Play', sans-serif;
  font-size: 18px;
  text-align:right;
  color: #A5A5A5;
  padding: 0px 5px 3px 5px;
  margin:5px 5px 0px 0px;
  cursor: pointer;
  position: static;
  transition: 0.3s;
  overflow: hidden;
  /* no selectable text (content?) */
  /* include internal components? */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* IE 10 and IE 11 */
   user-select: none;        /* Standard syntax */
}

.iselector_big:hover {color: #FFFFFF;} /* Color on mouse-over */
.iselector_big.focus{color: #00FFFF;}  /* Color on focus */