.description[data-v-6d9bb7e6] {
	font-size: 16px;
	text-align: left;
	padding: 5px 10px;
	max-width: 700px;
	color: var(--titleG);
}


ul[data-v-1293e8ce] {
    padding: 0;
    width: 95%;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
    grid-gap: 25px;
    overflow: hidden;
    max-width: 825px;
}
.description[data-v-1293e8ce] {
		font-size: 13pt;
		text-align: left;
		padding: 5px 10px;
		max-width: 700px;
		color: var(--titleG);
}
.title[data-v-1293e8ce] {
    flex-grow: 1;
    text-align: left;
    justify-content: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    font-size: 17px;
    height: 100%;
}
li button[data-v-1293e8ce] {
    font-family: 'Roboto';
		color: var(--imageBg);
		border: none;
		background-color: var(--gold);
		border-radius: 5px;
    flex-shrink: 0;
    flex-grow: 1;
    max-width: 100px;
    height: 25px;
		font-size: 16px;
    margin: auto 0;
    cursor: pointer;
}
li button[data-v-1293e8ce]:hover {
    background-color: var(--disabledg);
}
.img[data-v-1293e8ce] {
    width: 62px;
    max-height: 100%;
}
img[data-v-1293e8ce] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
span[data-v-1293e8ce] {
    font-size: 16px;
    color: var(--textf);
    width: 100%;
    display: flex;
    text-align: left;
}
li[data-v-1293e8ce] {
    padding: 8px;
    display: flex;
    flex-direction: row;
    gap: 15px;
    list-style-type: none;
    height: 65px;
    border: 1px solid var(--home);
    background: var(--fixtureTeam);
    border-radius: 8px;
}


#role[data-v-0a110d04] {
  display: flex;
  flex-direction: column;
}
.perm[data-v-0a110d04] {
  display: flex;
  flex-direction: row;
  align-items: center;
}
h3[data-v-0a110d04] {
  padding: 0;
  margin: 0;
  margin-left: auto;
  font-size: 16px;
  font-weight: 500;
}
.switch[data-v-0a110d04] {
  position: relative;
  background: none!important;
  border: none!important;
  width: 60px!important;
  height: 34px!important;
}
.switch input[data-v-0a110d04] {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider[data-v-0a110d04] {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg2hh);
  -webkit-transition: .4s;
  transition: .4s;
}
.slider[data-v-0a110d04]:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider[data-v-0a110d04] {
  background-color: var(--gold);
}
input:focus + .slider[data-v-0a110d04] {
  box-shadow: 0 0 1px var(--gold);
}
input:checked + .slider[data-v-0a110d04]:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round[data-v-0a110d04] {
  border-radius: 34px;
}
.slider.round[data-v-0a110d04]:before {
  border-radius: 50%;
}


/**
  #UserRoles
*/
#userRole[data-v-1a01f323] {
    padding: 25px;
    min-height: 300px;
    width: 90%;
    position: relative;
}
#userRole[data-v-1a01f323]::before {
    background: linear-gradient(0deg, #18171796 0%, #00000070 50%);
    width: 100%;
    height: 20px;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}
#userRole[data-v-1a01f323]::after {
    background: var(--fadingbgq);
    width: 100%;
    height: 20px;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
}


/**
  #Other
*/
#role[data-v-1a01f323] {
    gap: 10px;
    display: flex;
}
.description[data-v-1a01f323] {
		font-size: 12pt;
		text-align: left;
		max-width: 700px;
		color: var(--titleG);
}
.createRole[data-v-1a01f323] {
    text-align: left;
    gap: 20px;
    display: flex;
    flex-direction: row;
}
h2[data-v-1a01f323] {
    margin: 0;
}
li[data-v-1a01f323] {
    list-style-type: none;
    width: 120px;
    text-align: left;
    border: 1px solid var(--textff);
    background: var(--bg1);
    padding: 5px;
}
li[data-v-1a01f323]:hover {
    background: var(--bg2);
    cursor: pointer;
}
.createRole .title[data-v-1a01f323] {
    height: max-content;
    margin: auto 0;
}
.createRole button[data-v-1a01f323] {
    color: var(--textf);
		border: 1px solid var(--textff);
		background-color: var(--bg1);
		border-radius: 5px;
    border-radius: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    height: max-content;
		font-size: 42pt;
}
.createRole button span[data-v-1a01f323] {
    height: 70px;
    width: 70px;
}
.createRole button[data-v-1a01f323]:hover {
    background: var(--bg2h);
    cursor: pointer;
}
.createRole button[data-v-1a01f323]:active {
    background: var(--bg2);
}


.description[data-v-67d65de2] {
	font-size: 13pt;
	text-align: left;
	padding: 5px 10px;
	max-width: 700px;
	color: var(--titleG);
}


form[data-v-1cfd4586] {
  position: relative;
}
.SubmitPanel[data-v-1cfd4586] {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.fields[data-v-1cfd4586] {
  background: #0c0c0c;
  padding: 20px;
  width: auto;
  border: 2px solid var(--bg2h);
  border-radius: 5px;
}
.row .input[data-v-1cfd4586] {
  flex-grow: 1;
  max-width: 70%;
  border: 1px solid var(--bg2);
  background: var(--bg2);
  color: #fff;
  border-radius: 5px;
  padding: 5px;
}
.edit[data-v-1cfd4586] {
  position: absolute;
  right: 20px;
  top: 50%;
  font-size: 20px;
  margin-top: -7.5px;
  cursor: grab;
  z-index: 4;
}
.edit[data-v-1cfd4586]:active {
  cursor: grabbing;
}
.icon[data-v-1cfd4586] {
  fill: #fff !important;
}
#form[data-v-1cfd4586] {
  position: relative;
  list-style: none;
  gap: 15px;
  max-height: calc(100vh - 90px);
  overflow: auto;
  max-width: 600px;
  width: 100%;
  padding: 10px;
  background-color: var(--fixtureTeam);
}
ul[data-v-1cfd4586] {
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.section[data-v-1cfd4586] {
  position: relative;
  padding: 15px;
}
input[data-v-1cfd4586] {
  border-radius: 5px;
  background-color: var(--bg1);
  color: var(--titleG);
  margin-top: 5px;
  margin-left: 0;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  padding: 9px 8px;
  display: flex;
  border: 1px solid var(--textff) !important;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;

  /* make it glow! */
  -webkit-box-shadow: 0px 0px 4px var(--textff);
  -moz-box-shadow: 0px 0px 4px var(--textff);
  box-shadow: 0px 0px 4px var(--textff);
}
input.text[data-v-1cfd4586] {
  width: calc(100% - 55px);
}
.description[data-v-1cfd4586] {
  font-size: 16px;
  color: var(--titleG);
  text-align: left;
  width: 100%;
  margin-top: 3px;
  margin-left: 3px;
}
.title[data-v-1cfd4586] {
  font-size: 18px;
  font-family: "Roboto";
  color: var(--titleG);
  text-align: center;
  margin: auto;
}
.inputTitle[data-v-1cfd4586] {
  font-size: 16px;
  font-family: "Roboto";
  text-align: left;
  margin-bottom: 25px;
}
.top[data-v-1cfd4586] {
  padding: 20px;
  flex-direction: row;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}


.mini[data-v-49c05f10] {
    background: var(--imageBg);
    border: 3px solid var(--bg2h);
    border-radius: 4px;
    padding: 20px;
    max-width: 480px;
    width: 100%;
    margin: auto;
    min-height: 300px;
    max-height: 80vh;
    z-index: 102;
    overflow: auto;
}
.backgg[data-v-49c05f10] {
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 101;
}
.members[data-v-49c05f10] {
    padding-left: 0;
    gap: 15px;
    display: flex;
    flex-direction: column;
}
.background[data-v-49c05f10] {
    width: 100%;
    background: #000000b2;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 101;
    display: flex;
    position: absolute;
}
.username[data-v-49c05f10] {
    color: var(--gold);
    cursor: pointer;
    text-decoration: underline;
}
.line[data-v-49c05f10]::before, .line[data-v-49c05f10]::after {
    color: #595c61;
    content: "";
    left: 0;
    margin: auto;
    width: 100%;
    flex-shrink: 1;
    flex-grow: 1;
    height: 1px;
}
.line[data-v-49c05f10] {
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}
.text[data-v-49c05f10] {
		resize: vertical;
		border-radius: 5px;
		border: 3px solid var(--textff);
		background-color: var(--bg2);
		color: var(--titleG);
		flex-grow: 1;
		font-size: 11.8pt;
		padding: 9px 8px;
}


.wrapper404[data-v-1938d278] {
  width: 100%;
  height: 50vh;
  display: flex;
  flex-direction: column !important;
  justify-content: center;
  font-size: 1.8rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: #fff;
}
.err[data-v-1938d278] {
  display: flex;
  flex-direction: column;
}
.return[data-v-1938d278] {
  color: var(--textf);
  text-decoration: underline;
  font-size: 0.9em;
  cursor: pointer;
}
.return[data-v-1938d278]:hover {
  color: var(--titleG);
}
.err span[data-v-1938d278] {
  font-size: 5em;
}
a[data-v-1938d278]:visited {
  color: inherit;
}


.wrapper404[data-v-029e79a2] {
  width: 100%;
  height: 50vh;
  display: flex;
  flex-direction: column !important;
  justify-content: center;
  font-size: 1.8rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: #fff;
}
.err[data-v-029e79a2] {
  display: flex;
  flex-direction: column;
}
.return[data-v-029e79a2] {
  color: var(--textf);
  text-decoration: underline;
  font-size: 0.9em;
  cursor: pointer;
}
.return[data-v-029e79a2]:hover {
  color: var(--titleG);
}
.err span[data-v-029e79a2] {
  font-size: 5em;
}
a[data-v-029e79a2]:visited {
  color: inherit;
}


.invite[data-v-e84c2e12] {
  width: 0;
  height: 0;
  position: absolute;
  left: -99999px;
}
.input[data-v-e84c2e12] {
  border: 2px solid rgba(0, 0, 0, 0);
  background-color: var(--fixtureTeam);
  border-radius: 5px;
  color: #616161;
  flex-grow: 1;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  min-height: 28px;
  resize: vertical;
  padding: 5px 8px;
}
.input[data-v-e84c2e12]:hover {
  border: 2px solid #2c2c2c;
}
.status span[data-v-e84c2e12] {
  border-width: 3px;
  height: 16px;
  width: 16px;
  transform: translate3d(0px, 0px, 0px);
  border-radius: 100%;
  display: flex;
  border: 0;
  border-style: solid;
}
.online span[data-v-e84c2e12] {
  background-color: #64be56;
}
.fullname.loader[data-v-e84c2e12] {
  width: 160px;
}
.loader[data-v-e84c2e12] {
  margin: auto;
  width: 200px;
}
.offline span[data-v-e84c2e12] {
  background: red;
}
.status[data-v-e84c2e12] {
  height: 16px;
  display: flex;
  flex-direction: row;
  gap: 2px;
  margin: auto 5px;
  justify-content: center;
  align-items: center;
  line-height: 0;
}
.settings[data-v-e84c2e12] {
  margin-top: 20px;
  width: 100px;
  margin-left: auto;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-right: 10px;
  border: 1px solid var(--textff)!important;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;


    /* make it glow! */
    -webkit-box-shadow: 0px 0px 4px var(--textff);
       -moz-box-shadow: 0px 0px 4px var(--textff);
            box-shadow: 0px 0px 4px var(--textff);
}
.settings[data-v-e84c2e12]:hover {
  background: var(--home);
}
.content[data-v-e84c2e12] {
  overflow: auto;
}
.image[data-v-e84c2e12] {
  width: 100%;
  height: 100%;
  background: var(--fadingbg);
}
.image img[data-v-e84c2e12] {
  background: var(--fadingbg);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu[data-v-e84c2e12] {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: max-content;
  margin: 20px auto;
  padding-left: 0;
  padding-bottom: 15px;
  border-bottom: 4px solid var(--textff);
}
.menu li[data-v-e84c2e12] {
  color: var(--titleG);
  cursor: pointer;
  padding: 10px 25px;
}
.menu li[data-v-e84c2e12]:hover {
  color: #fff;
}
.menu .active[data-v-e84c2e12] {
  background: var(--home);
  color: #fff;
  border: 1px solid var(--textff)!important;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;


    /* make it glow! */
    -webkit-box-shadow: 0px 0px 4px var(--textff);
       -moz-box-shadow: 0px 0px 4px var(--textff);
            box-shadow: 0px 0px 4px var(--textff);
}
h1[data-v-e84c2e12] {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-bottom: 5px;
  justify-content: center;
}
.username[data-v-e84c2e12] {
  font-size: 32px;
  color: var(--gold);
}
.banner[data-v-e84c2e12] {
  margin-bottom: 130px;
  height: 350px;
  width: 100%;
  z-index: 3;
	position: relative;
	background-clip: padding-box;
	/* !importanté */
	/* !importanté */
}
/**

  .Winrate

*/
.winrate[data-v-e84c2e12] {
  width: 200px;
  height: 50px;
  margin: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  border: 1px solid var(--textff)!important;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;


    /* make it glow! */
    -webkit-box-shadow: 0px 0px 4px var(--textff);
       -moz-box-shadow: 0px 0px 4px var(--textff);
            box-shadow: 0px 0px 4px var(--textff);
  gap: 10px;
}
.profile[data-v-e84c2e12] {
  position: absolute;
  left: 50%;
  border: 1px solid var(--gold);
  width: 200px;
  height: 200px;
  z-index: 4;
  border-radius: 100%;
  background: var(--bg1);
  bottom: -102px;
  display: flex;
  margin-left: -100px;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.profile img[data-v-e84c2e12] {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  object-fit: contain;
}
.banner .image[data-v-e84c2e12] {
  width: 100%;
  height: 100%;
}
.banner[data-v-e84c2e12]::after {
  content: "";
  width: 100%;
  display: flex;
  position: absolute;
  height: 60px;
  bottom: -8px;
  z-index: 3;
  background: var(--fadingline2);
  border-bottom: 8px solid #fffb00;
}
.fullname[data-v-e84c2e12] {
  display: flex;
  flex-direction: row;
  margin: auto;
  width: max-content;
}
.options[data-v-e84c2e12] {
  max-width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin: auto;
  flex-grow: 1;
  gap: 10px;
  margin: 20px auto;
}
.options svg[data-v-e84c2e12] {
  width: 36px;
  padding: 0;
  height: 36px;
  font-size: 32px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.options svg[data-v-e84c2e12]:hover {
  color: var(--gold);
}
.content[data-v-e84c2e12] {
  background: var(--fadingbg2);
  flex-grow: 1;
  z-index: 1;
  padding-bottom: 200px;
}


li[data-v-64bdcc9f] {
    width: 90%;
    display: flex;
    flex-direction: row;
    padding: 12px;
    background: var(--bg1);
    border: 1px solid #2c2c2c;
}
li[data-v-64bdcc9f]:hover {
    cursor: pointer;
    background: var(--bg2);
}
li span[data-v-64bdcc9f] {
    flex-shrink: 0;
}
li .row[data-v-64bdcc9f] {
    display: flex;
    gap: 10px;
    justify-content: center;
    width: 100%;
    flex-direction: row;
}
.title[data-v-64bdcc9f] {
    width: 300px;
}
.input[data-v-64bdcc9f] {
    width: 100%;
    display: flex;
    flex-direction: row;
}
.input span[data-v-64bdcc9f] {
    min-width: 150px;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    font-size: 16px;
    text-align: start;
}
.settings[data-v-64bdcc9f] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    height: 100%;
}
  /*

    SETTINGS

  */
.settings input[data-v-64bdcc9f], .settings textarea[data-v-64bdcc9f] {
    border: 2px solid rgba(0, 0, 0, 0);
    background-color: var(--fixtureTeam);
    border-radius: 5px;
    color: #616161;
    flex-grow: 1;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    min-height: 28px;
    resize: vertical;
    padding: 5px 8px;
}
.settings input[data-v-64bdcc9f]:hover, .settings textarea[data-v-64bdcc9f]:hover {
    border: 2px solid #2c2c2c;
}
.settings .fields[data-v-64bdcc9f] {
    margin: 10px;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    max-width: 500px;
    gap: 18px;
}
.settings .label[data-v-64bdcc9f] {
    background-color: var(--gold);
    border-radius: 12px;
    height: 40px;
    flex-shrink: 0;
    width: 100%;
    min-width: 210px;
    max-width: max-content;
    color: #000;
    font-family: 'Roboto';
    border: 0;
    padding: 4px 15px;
    font-weight: 500;
    margin-left: 20px;
    font-size: 20px;
    margin-bottom: 120px;
}

:root {
  --primary-line: #e1f01a;
  --sec-line: #89720E;
  --ytext: #f3cc1e;
  --sec-bg: #b18f08;
  --primary-bg: #ddb40a;
  --primary-bgh: #f8c90a;
  --bg1: #141414;
  --home: #1A1A1A;
  --fixtureTeam: #131313;
  --home2: #1C1C1C;
  --homeBorder: #414141;
  --gold: #DBB50C;
  --disabledg: #AE9004;
  --bg2: #1c1c1c;
  --inputTextColor: #2d2d2d;
  --bg3: #191b1a;
  --nav: #141414;
  --imageBg: #0C0C0C;
  --bg2h: #292929;
  --bg2hh: #464545;
  --çerçeve: #323232;
  --textf: #716f6f;
  --red: #c43855;
  --textff: #373737;
  --titleG: #ADADAD;
  --fadingbg3: linear-gradient(180deg, #1c1c1c 50%, #0f0f0f 100%);
  --fadingbg2: linear-gradient(180deg, #1c1c1c 70%, #0b0b0b 100%);
  --fadingbg: linear-gradient(180deg, #141414 70%, #0b0b0b 100%);
  --fadingbgq: linear-gradient(180deg, #18171796 0%, #00000070 50%);
  --fadingline: linear-gradient(60deg, #FDEC86 0%, #F0BD58 100%);
  --fadingline2: linear-gradient(0deg, #fffb00 5%, #fffb0034 60%, #fffb0000 100%);
}
.tooltip-transition-leave-duration {
  transition: 20ms;
}
#content .slideshow .VueCarousel-pagination {
  position: absolute;
  margin: 5px;
  width: 100%;
  height: 16px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  bottom: 20px;
  z-index: 50;
}
img {
  user-select: none;
}
.VueCarousel-wrapper, .VueCarousel-slide {
  height: 100%!important;
  width: 100%;
}
.games .VueCarousel-slide {
  display: flex;
  flex-direction: row;
}
.VueCarousel-inner {
  height: 100%!important;
  align-items: center;
}
.VueCarousel-dot-container {
  display: flex!important;
  flex-direction: row;
  justify-content: center;
  width: 100%!important;
  gap: 20px;
}
#content .VueCarousel-dot {
  border-radius: 0!important;
  width: 7%!important;
  height: 7px!important;
}
li {
  list-style-type: none!important;
}
* {
  scrollbar-width: auto;
  scrollbar-color: var(--disabledg) var(--bg2);
}
::-webkit-scrollbar {
  z-index: 998;
  height: 8px;
  width: 8px;
}
::-webkit-scrollbar-thumb {
  z-index: 998;
  background-color: var(--primary-bg);
  border-radius: 15px;
}
::-webkit-scrollbar-track {
  background-color: var(--bg1);
  z-index: 998;
}
/*

  SETTINGS

*/

.v-skeleton-loader__avatar {
  width: 100%;
  height: 100%;
}
.ButtonLabel {
  background-color: var(--gold);
  border-radius: 12px;
  height: 40px;
  flex-shrink: 0;
  width: 100%;
  min-width: 210px;
  max-width: max-content;
  color: #000;
  font-family: 'Roboto';
  border: 0;
  padding: 4px 15px;
  font-weight: 500;
  margin-left: 20px;
  font-size: 20px;
  margin-bottom: 120px;
}

.buttons {
  max-height: 40px;
  max-width: 500px;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  gap: 20px;
  justify-content: flex-end;
}
.buttons button {
  border: none;
  font-family: 'Roboto';
  background-color: var(--bg1);
  border-radius: 5px;
  width: 170px;
  height: 40px;
  color: var(--textf);
  cursor: pointer;
  font-size: 16px;
}
.buttons .exit:hover {
  background-color: var(--imageBg);
}
.buttons .save {
  background-color: var(--gold);
  color: #000;
}
.buttons .save:hover {
  cursor: pointer;
  background-color: var(--disabledg);
}