.icon {
    aspect-ratio: 1 / 1;
	margin : 0;
    display : flex;
	mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.icon-1 {
    mask-image: url('/content/medias/icons/i-1.svg');
}
.icon-5 {
    mask-image: url('/content/medias/icons/i-5.svg');
}
.icon-backward {
    mask-image: url('/content/medias/icons/i-backward.svg');
}
.icon-bell {
    mask-image: url('/content/medias/icons/i-bell-solid.svg');
}
.icon-bell-slash {
    mask-image: url('/content/medias/icons/i-bell-slash.svg');
}
.icon-book {
    mask-image: url('/content/medias/icons/i-book.svg');
}
.icon-bookmark {
    mask-image: url('/content/medias/icons/i-bookmark.svg');
}
.icon-bookmark-solid {
    mask-image: url('/content/medias/icons/i-bookmark-solid.svg');
}
/*.icon-bracketleft {
    mask-image: url('/content/medias/icons/i-bracketleft.svg');
}*/
.icon-bracket-right {
    mask-image: url('/content/medias/icons/i-bracketright.svg');
}
.icon-bracket-left {
    mask-image: url('/content/medias/icons/i-bracket-left.svg');
}
.icon-checked {
    mask-image: url('/content/medias/icons/i-checked.svg');
}
.icon-checked-small {
    mask-image: url('/content/medias/icons/i-checked-small.svg');
}
.icon-code {
    mask-image: url('/content/medias/icons/i-code.svg');
}
.icon-config {
    mask-image: url('/content/medias/icons/i-config.svg');
}
.icon-cross {
    mask-image: url('/content/medias/icons/i-cross.svg');
}
.icon-cross-small {
    mask-image: url('/content/medias/icons/i-cross-small.svg');
}
.icon-eye {
    mask-image: url('/content/medias/icons/i-eye.svg');
}
.icon-eye-slash {
    mask-image: url('/content/medias/icons/i-eye-slash.svg');
}
.icon-forward {
    mask-image: url('/content/medias/icons/i-forward.svg');
}
.icon-garbage {
    mask-image: url('/content/medias/icons/i-garbage.svg');
}
.icon-get-file {
    mask-image: url('/content/medias/icons/i-get-file.svg');
}
.icon-home {
    mask-image: url('/content/medias/icons/i-home.svg');
}
.icon-home-user {
    mask-image: url('/content/medias/icons/i-home-user.svg');
}
.icon-instrument-bass {
    mask-image: url('/content/medias/icons/i-instrument-bass.svg');
}
.icon-instrument-drum {
    mask-image: url('/content/medias/icons/i-instrument-drum.svg');
}
.icon-instrument-guitar {
    mask-image: url('/content/medias/icons/i-instrument-guitar.svg');
}
.icon-instrument-guitar-electric {
    mask-image: url('/content/medias/icons/i-instrument-guitar-electric.svg');
}
.icon-instrument-harp {
    mask-image: url('/content/medias/icons/i-instrument-harp.svg');
}
.icon-lock {
    mask-image: url('/content/medias/icons/i-lock.svg');
}
.icon-login {
    mask-image: url('/content/medias/icons/i-login.svg');
}
.icon-logout {
    mask-image: url('/content/medias/icons/i-logout.svg');
}
.icon-maximize {
    mask-image: url('/content/medias/icons/i-maximize.svg');
}
.icon-minimize {
    mask-image: url('/content/medias/icons/i-minimize.svg');
}
.icon-minus {
    mask-image: url('/content/medias/icons/i-minus.svg');
}
.icon-minus-1 {
    mask-image: url('/content/medias/icons/i-minus-1.svg');
}
.icon-minus-5 {
    mask-image: url('/content/medias/icons/i-minus-5.svg');
}
.icon-minus-small {
    mask-image: url('/content/medias/icons/i-minus-small.svg');
}
.icon-music {
    mask-image: url('/content/medias/icons/i-music.svg');
}
.icon-music-slash {
    mask-image: url('/content/medias/icons/i-music-slash.svg');
}
.icon-music-plus {
    mask-image: url('/content/medias/icons/i-music-plus.svg');
}
.icon-pause {
    mask-image: url('/content/medias/icons/i-pause.svg');
}
.icon-pen {
    mask-image: url('/content/medias/icons/i-pen.svg');
}
.icon-play {
    mask-image: url('/content/medias/icons/i-play.svg');
}
.icon-playlist {
    mask-image: url('/content/medias/icons/i-playlist.svg');
}
.icon-plus {
    mask-image: url('/content/medias/icons/i-plus.svg');
}
.icon-plus-1 {
    mask-image: url('/content/medias/icons/i-plus-1.svg');
}
.icon-plus-5 {
    mask-image: url('/content/medias/icons/i-plus-5.svg');
}
.icon-plus-small {
    mask-image: url('/content/medias/icons/i-plus-small.svg');
}
.icon-refresh {
    mask-image: url('/content/medias/icons/i-refresh.svg');
}
.icon-report {
    mask-image: url('/content/medias/icons/i-circle-exclamation.svg');
}
.icon-scan {
    mask-image: url('/content/medias/icons/i-scan.svg');
}
.icon-search {
    mask-image: url('/content/medias/icons/i-search.svg');
}
.icon-share {
    mask-image: url('/content/medias/icons/i-share.svg');
}
.icon-sliders {
    mask-image: url('/content/medias/icons/i-sliders.svg');
}
.icon-star-music {
    mask-image: url('/content/medias/icons/i-star-music.svg');
}
.icon-star-solid {
    mask-image: url('/content/medias/icons/i-star-solid.svg');
}
.icon-switch-false {
    mask-image: url('/content/medias/icons/i-switch-left.svg');
}
.icon-switch-true {
    mask-image: url('/content/medias/icons/i-switch-right.svg');
}
.icon-textsize {
    mask-image: url('/content/medias/icons/i-textsize.svg');
}
.icon-theme-light {
    mask-image: url('/content/medias/icons/i-switch-left.svg');
}
.icon-theme-dark {
    mask-image: url('/content/medias/icons/i-switch-right.svg');
}
.icon-theory {
    mask-image: url('/content/medias/icons/i-theory.svg');
}
.icon-tuner {
    mask-image: url('/content/medias/icons/i-tuner.svg');
}
.icon-toolbox {
    mask-image: url('/content/medias/icons/i-toolbox.svg');
}
.icon-unlock {
    mask-image: url('/content/medias/icons/i-unlock.svg');
}
.icon-user {
    mask-image: url('/content/medias/icons/i-user.svg');
}
.icon-user-solid {
    mask-image: url('/content/medias/icons/i-user-solid.svg');
}
.icon-user-plus {
    mask-image: url('/content/medias/icons/i-user-plus.svg');
}
/* Regular */
@font-face {
  font-family: 'WijaamMono';
  src: url('/content/fonts/WijaamMono/WijaamMono.woff2') format('woff2'),
       url('/content/fonts/WijaamMono/WijaamMono.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Bold */
@font-face {
  src: url('/content/fonts/WijaamMono/WijaamMonoBold.woff2') format('woff2'),
       url('/content/fonts/WijaamMono/WijaamMonoBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

/* Italic */
@font-face {
  font-family: 'WijaamMono';
  src: url('/content/fonts/WijaamMono/WijaamMonoItalic.woff2') format('woff2'),
       url('/content/fonts/WijaamMono/WijaamMonoItalic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

/* Bold Italic */
@font-face {
  font-family: 'WijaamMono';
  src: url('/content/fonts/WijaamMono/WijaamMonoBoldItalic.woff2') format('woff2'),
       url('/content/fonts/WijaamMono/WijaamMonoBoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}
:root {

}
body {
    margin: 0;
    padding: 0;
    background-color: var(--body-bg);
	font-family : 'WijaamMono';
    font-size: 12px; /* Sets 1rem to 10px instead of the default 16px */
    color : var(--body-color);
}
form {
    margin : 0;
    padding : 0;
}
input, select {
    opacity : 1;
	margin : 0px 0px 0px 5px;
	padding : 7px 3px 7px 3px;
	color : var(--input-color);
	text-decoration : none;
	font-size : 1em;
	background-color : var(--input-bg);
	border : none;
	vertical-align : center;
	text-align : center;
	border-radius : 5px;
}
input:focus, textarea:focus, select:focus  {
    outline: 1px solid var(--input-focus-outline-color); /* Color and thickness */
}
input::placeholder {
  opacity: 0.9;
}
input:is(:-webkit-autofill, :autofill) {
    box-shadow: 0 0 0 30px var(--input-bg) inset;
    -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset;
	color : var(--input-color);
    -webkit-text-fill-color:  var(--input-color);
    caret-color: var(--input-color);
}
input:not(:placeholder-shown) {
	background-color : var(--input-bg);
}

input[type="text"], input[type="password"] {
    border: 0px;
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background-color : var(--input-bg);
    background-image: none;
    border: 2px solid var(--input-color);
    border-radius: 4px;
    cursor: pointer;
    opacity:0.4;
}
input[type="checkbox"]:checked {
    border: 1px solid var(--input-focus-outline-color);
    background-color: var(--input-color);
    mask-image: url("/content/medias/icons/i-checked.svg");
    -webkit-mask-image: url("/content/medias/icons/i-checked.svg");
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    opacity:0.7;
    /*background-image: url('/content/medias/icons/i-checked.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; /* Optional: centers the image */
}
button, input[type=button] {
    border : 0px;
	background-color : var(--input-bg);
	padding : 7px;
	border-radius : 5px;
    opacity : 0.8;
}
button:hover, input[type=button]:hover {
    opacity : 1;
    cursor : pointer;
	background-color : var(--input-focus-outline-color);
}
option {
    background-color : var(--input-bg);
    color : var(--input-color);
}

input:disabled, input:disabled:hover,
button:disabled, button:disabled:hover {
    cursor: default;
	background-color : var(--input-bg);
	opacity : 0.5;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
a {
    color: var(--orange);
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none;
}
a:link, a:visited, a:hover, a:active, a:focus {
    text-decoration: none;
    outline: none;
}
a.inactivated {
    pointer-events:none;
}
a.inactivated:hover {
	cursor: pointer;
}
.span-as-link {
    color: var(--orange);
    cursor: pointer;
}
ul, li, ol {
    margin : 0px;
    padding : 0px;
	list-style : none;
}
.nocolortext {
    color : var(--body-color);
}
.error{
    color : red;
}
.valid{
    color : green;
}
.iconcontainer {
    display : flex;
    /*height : 100%;*/
    align-items : center;
}
.icon {
    min-height : 1rem;
    background-color : var(--body-color);
}
.flexcontainer {
    display : flex;
}
.blockcontainer {
    display : block;
}
.align-items-center {
    align-items : center;
}
.flex-direction-column {
    flex-direction : column;
}
.flex-direction-row {
    flex-direction : row;
}
.flexelement {
    flex : 1;
}
.break-words {
    display: block;
}
.text-center {
    text-align : center;
}
.justifycontent-left {
    justify-content : left;
}
.justifycontent-center {
    justify-content : center;
}
.justifycontent-right {
    justify-content : right;
}
.fixedOnScroll {
	position : fixed;
}
.PageWithoutTopMenu {
	padding-top : 0em;
}
.mirror-h {
    transform: scale(-1, -1);
}
.mirror-v {
	transform: scaleX(-1);
}
.displayable {
    display : none;
}
.hidden {
    display : none;
}
.usertools {
	display : none;
}
.actionbutton {
    margin: 0;
	padding : 0px;
	color : var(--actionbutton-color);
	background-color : var(--actionbutton-bg);
    display: flex;
    align-items: stretch;
}
input.actionbutton {
	padding : 3px 5px 4px 5px;
	font-size : 0.8em;
}
.actionbutton:hover {
	cursor: pointer;
}
.actionbutton .icon{

}
.actionbutton-inactive{
    opacity : 0.3;
}
.actionbutton-withiconandtext {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.actionbutton-withiconandtext .icon{
    flex : 1 1 100%;

}
.actionbutton-withiconandtext span.icon-label{
    font-size : 0.9em;
}
.textlabel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.draggable {
    cursor: grab;
}
.dragging {
    cursor: grabbing;
}

/* Carousel */
div.carousel-container {
	position: relative;
	display : block;
	width : 100%;
	margin : 0px 0px 10px 0px;
	padding : 0px;

}
.carousel-title {
	display : block;
	margin: 0px 0 5px 20px;
	font-size : 1em;
}
ul.carousel {
	display: flex;
	transition: transform 0.5s ease-in-out;
	gap: 1vw;
	overflow-x: auto; /*Needed to make it scrollable on mobile touch*/
	overflow-y: hidden;
	scrollbar-width: none; /* for Firefox and latest Chromium */
    -ms-overflow-style: none; /* IE et Edge */
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
    overscroll-behavior: contain;
	padding : 0px;
}
ul.carousel::-webkit-scrollbar {
	display: none;
}
ul.carousel li{
	list-style : none;
	scroll-snap-align: center;
}
/* Top nav */
#top-nav {
	top: 0;
	left: 0;
	width: 100%;
	height : 2.5rem;
	padding : 0px;
	z-index: 1000;
	font-size : 1em;
    border-bottom : 2px solid var(--loadbar-color);
	background-color: var(--topnav-bg);
}

#top-nav .actionbutton {
    color : var(--topnav-actionbutton-color);
}


#top-nav .actionbutton:hover {
	background-color : var(--topnav-actionbutton-hover-bg);
}

#top-nav .icon {
    background-color : var(--topnav-icon-bg);
}



ul.nav-menu {
  	padding: 0;
	margin : 0;
}

ul.nav-menu .icon {
	opacity : 0.9;
}

ul#nav-topmenu {
	margin : 0px;
	padding: 0;
	height : 100%;
	display: flex;
	justify-content: flex-start;
  	list-style: none;
	gap : 0; /* Prevents space between li */
 	white-space: nowrap; /* Prevents wrapping */

}

ul#nav-topmenu li{
	height : 100%;
}

#nav-topmenu-logozone {
    min-width : 5.5rem;
    flex : 0 0 2.1em;
	padding : 0px;
	background-color : var(--logozone-bg);
	font-family: sans-serif;
	display: flex;
}
.actionbutton-logozone-1 {
    min-width : 2.1em;
	flex : 1 1 100%;
	text-align : center;
	padding : 0px 0px 0px 0px;
	text-decoration : none;
	background-image : url('content/medias/Wijaam-logo.png');
    background-repeat: no-repeat;
	background-size: contain;
    background-position: center center;
}

.actionbutton-logozone-2 {
    min-width : 1.1em;
	flex : 1 1 50%;
	text-align : center;
	padding : 0px 0px 0px 0px;
	text-decoration : none;
}

#nav-topmenu-logozone .icon {
	background-color : var(--logozone-icon-bg);
}

.actionbutton-logozone-2 .icon {
	margin : 5px;
}

#nav-topmenu-logozone .actionbutton:hover{
	background-color : var(--logozone-actionbutton-hover-bg);
}

#nav-topmenu-midzone {
	flex : 1;
	display : flex;
	justify-content: space-between;
	margin: 0 auto;
	max-width : 60rem;
}
#nav-topmenu-midzone a, #nav-topmenu-midzone span{
	flex : 1;
}

#nav-topmenu-midzone .actionbutton-withiconandtext {
    padding : 0px 5px 0px 5px;
}
#nav-topmenu-midzone .actionbutton-withiconandtext .icon{
    margin-top : 6px;
}
#nav-topmenu-midzone .actionbutton-withiconandtext span.icon-label{
    font-size : 0.9em;
	padding : 0px;
	margin : 0px 0px 0px 0px;
}
#nav-topmenu-rightzone {
	/*flex : 0 0 2.1em;*/
	display : flex;
}
#nav-topmenu-rightzone .icon {
	margin : 5px;
}
#top-nav .button-submenu {
	background-color : var(--topnav-submenubutton-bg);
}
#top-nav .button-submenu-active {
	background-color : var(--topnav-submenubutton-active-bg);
}

ul.nav-submenu {
	background-color : var(--subnav-bg);
	margin: 0px;
	padding : 0px;
}
ul.nav-submenu li {
	margin: 0px;
	padding : 0px 0px;
}

#nav-searchmenu, #nav-songsmenu, #nav-toolsmenu {
    border-radius : 0px 0px 10px 10px;
}

/* search menu */
#nav-searchmenu {
    padding : 10px 0px;
    font-size: 1.3em;
}
#nav-searchmenu .icon {
    height : 2rem;
}


li#nav-searchmenu-li-search{
	margin: 0px 0px 5px 0px;
	padding: 0px 20px 0px 20px;
    display : flex;
    justify-content: center;
    align-items: center;
}

#nav-searchmenu-searchinput {
    width : 90%;
    max-width : 600px;
    padding-left : 5px;
    padding-right : 5px;
    margin-right : 10px;
}

#nav-searchmenu-searchbutton {
    opacity : 0.9;
}

#nav-searchmenu-searchbutton:hover {
    opacity : 1;
}


/* songs top menu */
#nav-songsmenu {
	flex-direction: row;
    padding : 5px 0px 5px 0px;
    list-style : none;
}
#nav-songsmenu li.nav-songsmenu-li {
	padding : 0px 10px;
	width : 100%;
	box-sizing: border-box;
}
ul#nav-songsmenu {
    flex-wrap: wrap;
}
#nav-songsmenu li#nav-songsmenu-li-artists {
   order: 1;
}
#nav-songsmenu li#nav-songsmenu-li-songs {
  order: 2;
}
#nav-songsmenu-li-user{
    order: 0;
	width : 100%;
}
#nav-songsmenu-li-styles {
    order: 3;
}
#nav-songsmenu .carousel-title {
    font-size : 1em;
    padding : 5px 0px 0px 0px;
    opacity : 0.8;
}
#nav-songsmenu ul.carousel {
    justify-content : flex-start;
    gap: 1vw; /* Supprime l'espace entre les éléments */
}
#nav-songsmenu .carousel li {
	font-size : 0.9em;
	flex: 0 0 8%;
	max-width : 4rem;
	aspect-ratio: 1 / 1; /* Ensures height equals width */
}
#nav-songsmenu ul#nav-songsmenu-stylescarrousel-ul li {
	list-style: none;
	flex: 0 0 20%;
	max-width : 6rem;
	aspect-ratio: 1 / 1; /* Ensures height equals width */
}

#nav-songsmenu ul.carousel li a{
    height: 100%;
	aspect-ratio: 1 / 1; /* Ensures height equals width */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--carouselColor);
	text-decoration : none;
 	text-align : center;
	border : 1px solid var(--topnav-songscarousel-hover-bg);
	border-radius: 5px;
	background-color : var(--topnav-songscarousel-bg);
}
#nav-songsmenu ul.carousel li a:hover {
	background-color : var(--topnav-songscarousel-hover-bg);
}
/* Tools top menu */
#nav-toolsmenu {
    font-size : 1.2em;
    padding : 0px 0px 0px 0px;
}
#nav-toolsmenu .nav-toolsmenu-li{
    display: flex;
    align-items : center;
}

#nav-toolsmenu .actionbutton {
    opacity : 0.8;
}

#nav-toolsmenu .actionbutton:hover {
    opacity : 1;
}
.nav-toolsmenu-li a {
    flex : 1;
    padding: 10px 0px 5px 0px;
}

/* User top menu */
#nav-usermenu {
	padding : 5px 5px 10px 5px;
	float : right;
	max-width : 490px;
	border-radius : 10px 0px 0px 10px;
	min-width : 10rem;
	font-size : 1.3em;
}

#nav-usermenu li{
	vertical-align : center;
	margin : 0px 5px 0px 0px;
	padding : 5px 0px 5px 5px;
	margin-left : auto;
	text-align: right;
	display : flex;
    justify-content: right;
	align-items : center;
    min-height: 2.5rem;
}
li#userParametersDatas {
    display : none;
}
#nav-usermenu .icon {
	height : 1.5rem;
}
.nav-usermenu-label {
	font-size : 1em;
	opacity: 0.9;
	margin : 0px 10px;
	flex : 1;
}
.nav-usermenu-labelright {
	font-size : 1em;
	opacity:0.9;
	margin : 0px 10px;
}
#nav-usermenu .actionbutton, #nav-usermenu a {
	opacity:0.8;
}
#nav-usermenu .actionbutton:hover, #nav-usermenu a:hover {
	cursor: pointer;
	opacity:1;
}
#nav-usermenu-li-loginform input{
    opacity : 1;
	margin : 0px 10px 0px 0px;
	padding : 8px 0px 6px 0px;
}
#nav-usermenu-li-signin-actionbutton {
    align-items: center;
}
#nav-usermenu-li-signin-label{
    font-size : 1em;
}
.nav-usermenu-li-textonly span, .nav-usermenu-li-textonly a {
    font-size : 1em;
	color : var(--orange);
}
/* Bot nav*/
#bot-nav {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 1000;
	padding : 0px 0px 0px 0px;
	justify-content: center;
	display: flex;
	flex-direction: column;
	font-size : 1em;
}
#bot-nav .icon{
    min-height : 2rem;
}
#nav-botmenu-container {
	display: flex;
	flex-direction: column;
	align-items : center;
	background-color: var(--botnav-bg);
	border-top : 1px solid var(--botnav-border-color);
}
#nav-botmenu-container .nav-botmenu{

}
#nav-botmenu-container .nav-botmenu li{

}
/* Main content */
#main-content {
	margin : 0;
	padding : 4.5em 5px 10px 5px;
    min-height: 90vh; /* For 100% screen height */
}
.pagetitle {
    font-size: 1em;
    line-height: 1.3em;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--pagetitle-color);
    margin-bottom: 0.25rem;
    padding-left : 5px;
    display: block;
}
.defautpagetitle {
    font-size : 1.6em;
}
/*Listages*/
ul.artistssongs-list {
	max-width : 600px;
	list-style: none;
	margin-top: 10px;
}
/*
.songslist-item-artist {
	color : var(--bodyTextColor);
	font-weight : bold;
	padding : 2px 0px;
	margin-top : 5px;
}*/
.artistssongs-item {
	display : flex;
	flex-direction : column;
	padding : 6px 0px 6px 0px;
	margin : 0px;
    border-bottom : 1px solid var(--aslist-border-color);
    align-items: center;
}

.artistssongs-item:hover {
   	background-color: var(--aslist-hover-color);
}

a.artistssongs-item-toplink{
    display : block;
    width : 100%;
	color : var(--aslist-toplink-color);
	margin : 0px;
	padding : 2px 10px;
	text-decoration : none;
	font-size : 1.2em;

}


a.artistssongs-item-botlink{
    display : block;
    width : 100%;
    font-size : 0.9em;
	color : var(--aslist-botlink-color);
	margin : 0px;
	padding : 2px 10px;
	text-decoration : none;
	font-size : 1em;

}

ul#artistssongs-list-pagination {
    margin-top : 10px;
    display : flex;
    max-width: 600px;
    list-style : none;
    justify-content : center;
}

ul#artistssongs-list-pagination li {
    flex : 1;
    max-width : 2em;
    font-weight : bold;
    text-align : center;
    display : block;
}
ul#artistssongs-list-pagination li:not(:first-child) {

}
#artistssongs-list-pagination li a {
    font-weight : normal;
}
#searchresults-resume {
    padding-left : 5px;
    opacity : 0.8;
}
.searchresults-sectionname {
    padding-top : 15px;
    padding-left : 10px;
}
#popBox {
    width : 90%;
    max-width : 450px;
    position: fixed;
    top: 50%;
    left: 50%;
    max-height : 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translate(-50%, -50%);
    background-color: var(--popbox-bg);
    padding: 20px;
    border-radius: 8px;
    display: none;
    animation: fadeIn 0.1s ease-in-out;
    z-index: 5000;
    text-align : center;

}
#popBox.classic {
    background-color: var(--popbox-bg);
    color:  var(--popbox-color);
    animation: none !important;
    transition: none !important;
    font-size : 1em;
}

#popBox.success {
    background-color: var(--popbox-success-bg);
    color:  var(--popbox-success-color);
}
#popBox.error {
    background-color: var(--popbox-error-bg);
    color:  var(--popbox-error-color);
}
#popBox.popboxsignin {
    font-size : 1.2em;
}
#popBox.popboxplaylists {
    padding-top : 5px;
    font-size : 1.3em;
}
#popBox.popboxbookmarking {
    align-items: flex-start;

}
#popBox.popboxbookmarking .iconcontainer{
    /*display : none;*/

}
#confirmBoxTitle, #inputsBoxTitle {
    font-size : 1.2em;
    display : block;
    margin : 0px 0px 20px 0px;
}
.inputsbox-datacontent {
    display : none;
}
#inputsBoxContent {
    font-size : 1em;
    display : block;
    margin : 0px 0px 10px 0px;
}
#inputsBoxContent ul li{
    display : flex;
    align-items : center;
    justify-content: center;
    margin : 0px 0px 10px 0px;
}
#inputsBoxContent input {
    font-size : 1.2em;
}
#confirmBoxButtons, #inputsBoxSubmit {
    font-size : 1.2em;
    display : flex;
    justify-content: center;
}
#confirmBoxButtons input, #inputsBoxSubmit input {
    margin : 0px 10px;
}
#userplaylistsContent {
    display: none;
}
ul.userplaylistsBox {
    display: inline-block;
    width: fit-content;
    min-width : 80%;
    margin : 0px auto;
}
ul.userplaylistsBox li{
    padding : 8px 0px 8px 0px;
    border-bottom : 1px solid var(--popbox-userplaylist-item-border-color);
    display : flex;
    align-items: center;
    flex-direction: row;
}
ul.userplaylistsBox li a{
    flex : 1;
    height : 100%;
    display : flex;
    align-items: center;
    flex-direction: row;
}

ul.userplaylistsBox li span.iconcontainer {
    height : 80%;
}
ul.userplaylistsBox li span.icon {
    display : inline-block;
    opacity : 0.5;
}

ul.userplaylistsBox li.userplaylistsBox-title{
    padding : 10px 0px 10px 0px;
    font-weight : bold;
    border-bottom : none;
    justify-content : center;
}
ul.userplaylistsBox li.userplaylistsBox-addnewli {
    margin-top  : 20px;
    border-bottom : none;
    justify-content : center;
    display : block;
}

ul.userplaylistsBox-addnewli-formul li{
    align-items : center;
    justify-content : center;
    padding : 5px 0px;
    border : 0px;

}
a.userplaylistsBox-addnewbutton {
    margin-top : 5px;
    width : 100%;
    justify-content : center;
}


ul.userplaylistsBox li.userplaylistsBox-songslist {
    display : none;
}


/*#signinBox {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 8px;

    z-index: 5000;
}*/

#signinform-ul {
    font-size : 1em;
}
#signinform-ul li{
    margin : 0px 0px 0px 0px;
    padding : 0px 5px 20px 5px;

}

.signinform-li-cgu {
    display: flex;
    align-items: center;
    justify-content : center;
}

li#signinform-title {
    padding-bottom : 20px;
    font-weight : bold;
}

li.signinform-password-checkerzone {
    padding-bottom : 10px;
}

.signinform-password-checkerzone {
    display : none;
}
.signinform-password-checkercondition {
    display : block;
    font-size : 0.8em;
}
#signinform-submit {
    margin : auto;
}
li.signinform-errormsg {
    display : none;
    color : red;
}
/* METRONOME */
/*.play {
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 50px solid #e9e9e9;
    margin-left: 15px;
}

.pause {
    width: 15px;
    height: 60px;
    border: none;
    border-left: 15px solid #e9e9e9;
    border-right: 15px solid #e9e9e9;
}*/

#footer {
	display : block;
	width : 100%;
	margin : 0px 0px 0px 0px;
	padding : 20px 20px;
	font-size : 0.85em;
	background-color: var(--footer-bg);
	color: var(--footer-color);

}
#footer-c {
	display : block;
    width : 100%;
    text-align : center;
}
ul#footer-linklist {
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content: center;
    margin : 5px 0px 0px 0px;
}
ul#footer-linklist li {
    padding : 0px 5px 0px 5px;
}
/*-- -------------------------- -->
<---       RESPONSIVE           -->
<--- -------------------------- -*/

/* From 490px */
/* First Responsive Step */
@media only screen and (min-width: 30.6rem) {


	#nav-topmenu .actionbutton-withiconandtext {
		display : flex;
        flex-direction : row;
        align-items: center;
		font-size : 1em;
	}

	#nav-topmenu .actionbutton-withiconandtext .icon{
        display : inline-block;
        height : 90%;
        max-width : 1.7rem;
        margin: 0px 5px 0px 5px;
        padding : 2px;
	}

	#nav-topmenu .actionbutton-withiconandtext span.icon-label{
        padding : 0px;
        margin : 0px;
	}

    #nav-topmenu-logozone, #nav-topmenu-rightzone {
	    flex : 0 0 2.5em;
    }

    #nav-songsmenu .carousel-title {
        font-size : 1.2em;
    }

    #nav-toolsmenu .icon {
        min-height : 1.5rem;
    }


    #nav-topmenu-rightzone span {
        padding-right : 5px;
        padding-left : 5px;

    }



    #nav-usermenu {
    }

    #nav-usermenu li{
	    padding : 0px 1vw 0px 2vw;
	    height : 1.5em;
    }


    #nav-songsmenu .nav-songsmenu-carousel-ul li {
	    flex: 0 0 12%;
    }


}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {

    #top-nav {

    }

	 #bot-nav {
		font-size : 1em;
	}


    #nav-songsmenu li#nav-songsmenu-li-artists, #nav-songsmenu li#nav-songsmenu-li-songs {
		width: 50%;
		/*display : inline-block;*/
		float: none; /* in case of legacy styles */
    }

	#nav-topmenu .actionbutton-withiconandtext {
		margin-left : 1em;
	}

	#home-maintitle {
		font-size : 1.5em;
	}

}

/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {

	/*ul.nav-menu li {
	  	padding: 0;
		margin : 0px 20px 0px 0px;

	}*/

	#main-content {
		padding : 4.5em 10px 10px 10px;
	}

	.PageWithoutTopMenu {
		padding-top : 0;
	}

	.carousel-title {
		margin-bottom: 0 0 5px 0;
	}



}


/* LES ANIMATIONS */
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}