/* Set-up */


div, span, img, svg, h1, h2, h3, h4, hr, input {
    display: flex;
    transition: var(--animate-main);
}

/* Curseur pour le texte lorsqu'il est sélectionné */
::selection {
    cursor: text;
  }
  
  /* Curseur pour les liens */
  a {
    cursor: url('sources/cursor-nm.png')20 20, auto , pointer;
  }
  
  /* Curseur pour les boutons */
  button {
    cursor: url('sources/cursor-click.png')20 20, auto , pointer;
  }
  
  /* Curseur pour les éléments cliquables */
  [role="button"], [role="checkbox"], [role="link"], [role="radio"], [role="switch"], [role="tab"], [role="treeitem"], [role="option"] {
    cursor: url('sources/cursor-click.png')20 20, auto , pointer;
  }

/*        */

/* Imorts */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100&family=Montserrat+Alternates:wght@100&family=Roboto:wght@100&display=swap');
/*        */
 
/* Var */
:root {
    /* --color-bg-main:#373f51; */
    --color-bg-aux:#008dd5;
    --color-bg-transparency: #181d251f;
    --color-btn-main:#e43f6f;
    --color-btn-aux:#f56476;
    --color-link:#cf4151;
    --color-text-main: rgb(252, 232, 232);
    --color-text-aux:rgb(177, 169, 169);
    --animate-main: 0.2s ease-in-out;
    --animate-aux: 0.5s ease-in;
    --br-1: 2px ;
    --br-aux: 4px;
    --font-main:'Jost', sans-serif;
    --font-aux:'Montserrat Alternates', sans-serif;
    --load: flex;
}
/*    */

a {
    color: var(--color-link)
}
#horloge {
    padding-right: 10px;
}


.svg-loader{
    display:flex;
    position: relative;
    align-content: space-around;
    justify-content: center;
  }
  .loader-svg{
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    fill: none;
    stroke-width: 5px;
    stroke-linecap: round;
    stroke: rgb(64, 0, 148);
  }
  .loader-svg.bg{
    stroke-width: 8px;
    stroke: rgb(151, 42, 102);
  }

  .animate{
    stroke-dasharray: 242.6;
    animation: fill-animation 1s cubic-bezier(1,1,1,1) 0s infinite;
  }
  
  @keyframes fill-animation{
    0%{
      stroke-dasharray: 40 242.6;
      stroke-dashoffset: 0;
    }
    50%{
      stroke-dasharray: 141.3;
      stroke-dashoffset: 141.3;
    }
    100%{
      stroke-dasharray: 40 242.6;
      stroke-dashoffset: 282.6;
    }
  }


.main {
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
    padding-left: 10px;
    padding-right: 10px;
    gap: 30px;
}
.app {
  
    height: 100%;
    width: 100%;
    display: flex;

}

.box {
    position: absolute;
    border-radius: var(--br-1);
    background-color:  var(--color-bg-transparency);
    padding: 25px;
    flex-direction: column;
    align-items: center;
}
.move-slot {
    height: 50px;
    width: 400px;
    flex-direction: row;
    font-size: 1.6rem;
    justify-content: space-around;
    background-color: var(--color-bg-transparency);
    border-radius: var(--br-1);
    align-items: center;
    transition: var(--animate-main);
    min-height: 45px !important;
    position: absolute;
}

.btn {
    height: 45px;
    min-width: 20px;
    max-width: 200px;
    padding: 2px 10px 2px 10px;
    align-items: center;
    justify-content: center;
    background-color: var(--color-btn-main);
    border-radius: var(--br-1);
    transition: color var(--animate-main);
    cursor: url('sources/cursor-click.png')20 20, auto , pointer;
    color: var(--color-text-aux);
    font-size: 1.2rem;
    margin: 5px;
}

.btn-disbled {
    cursor:no-drop;
    color:rgba(177, 169, 169, 0.897);
}
.btn-disbled:hover {
    background-color: initial!important;
    color: initial;
}
.btn span:nth-child(1){

}
.btn-action span:nth-child(2){
    position: relative!important;
    height: 45px;
    width: 50%;
    opacity: 1!important;
}


#loading{
    position: absolute;
    border-radius: var(--br-1);
    background-color:  var(--color-bg-main);
    padding: 25px;
    padding-top: 0;
    z-index: 999;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    width: 100vw!important;
    display: var(--load);
}
.btn span:nth-child(1){
    position: absolute;
    height: 45px;
    width: inherit;
    opacity: 0;
}


.hover-settings {
    width: 50%;
    background-color: red;
}

/* .btn-action:hover .hover-settings {

} */

.btn:hover {
    background-color: var(--color-btn-aux);
    color: var(--color-text-main);

}

.btn-load {
    cursor:no-drop;
}

.btn-load span:nth-child(1){
    opacity: 1;
    align-items: center;
    color:rgba(177, 169, 169, 0.295)!important;
}
.btn-load span:nth-child(2){
    opacity: 1;
    color:rgba(177, 169, 169, 0.897);
}

#btn-login {
    width: 200px;
}
#btn-login span:nth-child(1){
    color:rgba(177, 169, 169, 0.897);
}
#btn-login:hover {
    background-color: var(--color-btn-main);
    color: var(--color-text-aux);
}

.screen-c {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.box-login{
    min-width: 450px;
    flex-direction: column;
}
.box .entete {
    flex-direction: column;
    width: 100%;
}

.box .entete, .box span {
    height: 60px;
    align-items: center;
    justify-content: center;
}
.entete span {
    color: var(--color-text-main);
    font-size: 1.9rem;
}
.entete span:nth-child(2) {
    color: var(--color-text-main);
    font-size: 1.1rem;
}

.box form {
    display: flex;
    width: 100%;
    height: 200px;
    flex-direction: column;
    padding: 5px;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
form input[type="text"],form input[type="password"]   {
    width: 80%;
    height: 45px;
}

input {
    border: none;
    outline: none;
    background-color:#576179a8;
    border-radius: var(--br-1);
    padding-left: 8px;
    font-size: 1.5rem;
    color: var(--color-text-aux);
    cursor: url('sources/cursor-click.png')20 20, auto;
    font-size: 1.9rem;
}
.checkbox-contain{
    flex-direction: row;
    height: 25px;
    gap: 3px;

}
.checkbox-contain input {
    margin-top: -2px;
    width: 25px;
    height: 45px;
}

.box-choice {
    min-width: 450px;
    min-height: 300px;
    justify-content: center;
    gap: 30px;
}



#btn-join-lobby, #btn-create-lobby {
    width: 250px;
}

.input-lobby {
    gap: 4px;
    padding: 5px;
    margin-bottom: 20px;
    height: 45px;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}
.input-lobby span{
   font-size: 1.5rem;
}
.input-lobby input{
    width: 22px!important;
    height: 25px;
    padding-left: inherit;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

.id-error input{
  background-color: rgba(245, 124, 124, 0.616)!important;
  height :25px;
  animation: input-error 0.5s 2 ease-in-out;
  transition: all 0.2s ease-in-out;
}

@keyframes input-error {
    0%{
        height :23px;
    }
    25%{
        height :25px;
    }
    50%{
        height :23px;
    }
    75%{
        height :25px;

    }
    100%{
        height :24px;
    }
}


.box-create-lobby {
    height: auto!important;
}

#btn-generate-password {
    height: 1.4rem!important;
}
#btn-generate-password span{
    font-size: 0.90rem;
    height: 1.2rem!important;
    width: auto!important;
}
.more-settings-create {
    height: 0px!important;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}
.ms-overflow {
    height: auto!important;
    transition: all 0.2s ease-in-out;
}



/* REF APP  */

.nav .nav-logo {
    width: 200px;
    font-size: 2.5rem;
}
.nav div {
    width: 100%;
    height: 50px;
    align-items: center;
    justify-content: center;
    padding: 5px;
    justify-content: flex-start;
}
.nav div:nth-child(3){
    justify-content: flex-end;
    font-size: 0.8rem;
}






*::-webkit-scrollbar {
    width: 2px; 
    margin-left: 1px;
}

*::-webkit-scrollbar-track {
    background-color: #1d2330;
    margin-left: 1px;
}

*::-webkit-scrollbar-thumb {
    background-color: #888; 
    margin-left: 1px;
}


.player-slot {
    flex-direction: row;
    font-size: 1.6rem;
    justify-content: space-around;
    min-height: 45px!important;
    background-color: var(--color-bg-transparency);
    border-radius: var(--br-1);
    align-items: center;
    transition: var(--animate-main);
}
.player-slot:hover {
    background-color: rgba(65, 84, 170, 0.699);
}
.unnamed:hover {
    background-color: #1d2330;
}


.player-slot .number {
    width: 35px;
    justify-content: center;
}
.player-slot .username {
    width: 70%;
    overflow: hidden;
}
.player-slot .action {
    width: 100px;
}
.player-slot .action ion-icon {
    transition: var(--animate-main);
    width: 50%;
}
.player-slot .action ion-icon:hover {
    color: rgb(176, 150, 236);
}

.unnamed .action ion-icon {
    visibility: hidden;
}
.unnamed {
    background-color: #1d2330;
}
.host .action ion-icon:nth-child(2) {
    color: rgb(228, 178, 86);

}
.visible {
    display: flex!important;
    animation: var(--animate-main);
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* outline: 1px solid rgba(255, 0, 0, 0.192); */
    
}




body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    background-color: var(--color-bg-main);
    color: var(--color-text-main);
    cursor: url('sources/cursor-nm.png') 20 20, auto;
}

body {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Empêche le défilement global */
}

.nav {
    width: 100%;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.082);
    margin-bottom: 10px;
}

.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.top {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.player-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 300px;
    overflow-y: auto;
    padding-right: 1px;
}

.main-settings {
    flex: 3;
    padding: 10px;
    height: 100%;
    flex-direction: column;
    overflow: auto;
}

.beatmap-holder {
    flex: 3;
    min-height: 80px!important;
    overflow: auto;
}

.settings {
    flex: 3;
    min-height: 370px; 
    overflow-y: auto;
    flex-direction: column;
    gap: 10px;
}
.btns {
    flex-wrap: wrap;
}
.btns .btn {
    min-width: 190px!important;
    font-size: 1.1em;
}

.tchat {
    flex: 3;
    min-height: 300px; 
    flex-direction: column-reverse;
    display: flex;
    
    background-color: var(--color-bg-transparency);
}
.tchat input {
    border-radius: 0 0 2px 2px;
    width: 100%;
    font-size: 1.1rem;
    height: 34px;
   
}
.tchat-recipe {
    padding: 7px;
    flex-direction: column-reverse;
    gap: 5px;
    overflow-y: scroll!important;
    scroll-padding-bottom: 100px;
}
.tchat-recipe span:nth-child(1){
    min-width: 50px;
}
.tchat-recipe span:nth-child(2){
    min-width: 15px;
    padding-right: 10px;
}
.tchat-recipe span:nth-child(3){
    width: auto;
    flex:3;
}

.principals-configs {
    flex-direction: column;
    flex-wrap: wrap;
}

.pack-input {
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.pack-input label {
    width: 300px;
    font-size: 1.8rem;
}
.pack-input input {
   flex:1;
   height: 30px;
}



.set-up-language {
    height: 50px!important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.082);
    padding: 10px;
    height: 20px;
}
.set-up-language span{
    height: 50px!important;
    align-items: center;
    justify-content: center;
}
.set-up-language span img {
    height: 50px;
    
}

.pop-up {
    position: absolute;
    border-radius: var(--br-1);
    background-color:  #181d25;
    padding: 25px;
    padding-top: 0;
    flex-direction: column;
    align-items: center;
    width: 50vw;
    min-height: 60vh;
    max-height: 50vh;
    min-width: 600px!important;
    height: max-content;
    display: none;
    /* justify-content: space-between; */
}
.window-main {
    margin-top: 0px;
    flex-direction: row;
    width: 100%;
    /* height: 100%; */
    min-height: 400px;
    height: calc(100% - 50px);
 
}
.window-main .window-part-content, .window-part-pineds {

}
.btn-toggle{
    background-color: #888!important;
}
.window-header{
    width: 100%;
    height: 50px!important;
    align-items: center;
}
.window-header span:nth-child(1){
    width: 50%;
}
.window-header .window-close {
    width: 50%;
    justify-content: end;
}

.window-part-pineds{
    width: 30%;
    min-width: 200px;
    justify-content:left;
    flex-direction: column;
    gap: 2px;
    border-right: 1px solid white;
    padding-right: 20px;
    
}
.window-part-pineds span {
    width: 100%;
    height: 40px;
    background-color: var(--color-bg-main);
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}

.window-part-content {
    width: 70%;
    min-width: 375px;
    flex-direction: column;
    overflow-y: scroll;
    max-height: 100%!important;
}

.window-part-content .part{
    display: none;
    padding: 10px;
    width: 100%;
    
    
}

.part {
    flex-direction: column!important;
}
.window-part-toggle {
    display: flex!important;
}
.window-part-toggle div{
    display: flex!important;
}
.part-setting {
    width: 100%;
    outline: 1px solid white;
    min-height: 20px;
    height: min-content;
    padding: 20px;
    flex-direction: row!important;
    margin-bottom: 15px;
}
.categorie-name {
    width: 100%;
    height: auto;
    font-weight: 600;

}


.data-title-theme::before{
    content: var(--g52h1r352h1);
}
.data-title-size::before{
    content: var(--j4h65ez45je);
}
.data-title-sc-advenced::before{
    content: var(--hge3436hhrh);
}
.data-title-sc-color-text::before{
    content: var(--gezjrhge54r);
}
.data-title-time-zone::before{
    content: var(--aghndf54hed);
}
.data-title-language:before{
    content: var(--mbd5gege54e);
}
.settings-names {
    flex-direction: column;
    width: max-content;
    z-index: 999;
    justify-content: center;
    margin-top: 9px;
    min-width: 120px;

}

.save-settings {
    width: 100%;
    justify-content: end;
    gap: 10px;
    position: relative;
    bottom: 25px;
    right: 25px;
    height: 60px;
}

.save-settings span{
    min-width: 100px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background-color: var(--color-btn-main);
    border-radius: var(--br-1);
}
.title-absolute {
    position: relative;
    height: 20px;
    min-width: 50px;
    width: auto;
    padding-left: 5px;
    padding-right: 5px;
    background-color:#181d25;
    margin-top: -30px;
    margin-left: 10px;
    align-items: center;
    justify-content: center;
}
.part-option {
    height: 40px!important;
    align-items: center;

}

.part-choices {
    width: auto!important;
    flex-direction: column;
    justify-content: flex-start!important;
    align-items: flex-start!important;
    z-index: 999;
}
.part-choice {
    width: 100%;
    align-items: center;
    height: 50px!important;
    padding-left: 4px; 
    padding-right: 4px;
    flex-direction: row;
    justify-content: left;
    gap: 10px;
}
.part-choice input[type="text"], select {
    max-width: 200px;
}
.part-choice input[type="number"]{
    width: 65px;
    height: 20px;
    font-size: 16px;
}

.set-bg-color {
    
    height: 20px;
    width: 20px;
    outline: 1px solid white;
}
.set-cursor{
    height: 20px;
    width: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.h30{
    height: 30px;
    width: 30px;
}
.h40{
    height: 40px;
    width: 40px;
}
.h55{
    height: 55px;
    width: 55px;
}

#bg-1{
    background-color: #373f51;
}
#bg-2{
    background-color: #503657;
}
#bg-3{
    background-color: #587166;
}
#bg-4{
    background-color: #716761;
}