/* HOME PRESENTATION */
.presentation-container{
  background: linear-gradient(180deg, #ffbf00, transparent) !important;
}
.presentation-container span{
  font-size: 1rem !important;
  font-weight: 100 !important;
  padding: 10px 10px !important;
  margin: 4px 1px;
  border-radius: 12px;
  /* border: 1px solid; */
  /* font-size: 1rem; */
  font-family: 'Alfa Slab One';
}

@media(max-width:767.98px) {
  .presentation-container span{
    /* display: none; */
    font-size: .85rem!important;
    margin: 4px;
  }
}

.presentation-container .fonctionnalities .fct-1{
  background: hsl(354deg 78% 90.15%);
  color: hsl(354deg 100% 49% / 1) !important;
}

.presentation-container .fonctionnalities .fct-2{
  background: hsl(216 98% 90% / 1);
  color: hsl(216 98% 49% / 1);
}

.presentation-container .fonctionnalities .fct-3{
  background: hsl(45 100% 90% / 1);
  color: hsl(45 100% 36% / 1);
}

.presentation-container .fonctionnalities .fct-4{
  background: hsl(152 69% 90% / 1);
  color: hsl(152 69% 36% / 1);
}


.presentation-container .fonctionnalities .fct-5{
  background: hsl(17 100% 90% / 1);
  color: hsl(17 100% 49% / 1);
}

.presentation-container .fonctionnalities .fct-7{
  background: hsl(196 100% 90% / 1);
  color: hsl(196 100% 36% / 1);
}

.pres-item {
  padding:4%;
  padding-top: 1%;
  height: 238px;
  width: 168px;
  float: left;
  margin: 6px;
  border-radius: 5px;
  font-family: 'Alfa Slab One';
  /* font-size: 1.7rem; */
  color: var(--bs-gray-900);
}

.slick-slider-presentation .item-1{
  /*background: linear-gradient(6deg, #dc3746, #ffc93c) !important;*/
  /* color:aliceblue!important; */
}

.slick-slider-presentation .item-2{
  /* background: linear-gradient(6deg, var(--bs-teal), #ffc93c)!important; */
  /* color:aliceblue!important; */
}

.slick-slider-presentation .item-4{
  background: linear-gradient(6deg, var(--bs-teal), #ffc93c)!important;
  /* color:aliceblue!important; */
}

.slick-slider-presentation .slick-prev ,.slick-slider-presentation .slick-next{
  color: aliceblue;
  display: block;
  z-index: 1;
}
.slick-slider-presentation .slick-next{
  right:32px;
}

.slick-slider-presentation .slick-prev{
  left:2px;
}

.slick-slider-presentation .slick-prev:before, .slick-slider-presentation .slick-next:before{
  font-size: 49px;
}
.slick-slider-presentation .slick-prev:before{
  text:'';
}
.slick-slider-presentation .slick-next:before{
  text:'';
}

.slick-slider-presentation .slick-dots{
  bottom:-12px;
}
/* ************************************** */

#playground{
  background-size: cover!important;
  max-width: 732px;
  margin: auto!important;
  overflow: hidden;
}
#bgstyle_1 {
  position: fixed;
  background: linear-gradient(to right top, #7f8bff17, #fff);
  /* background: linear-gradient(to top right, #2196f3, #fff); */
  width: 80vw;
  top: -11%;
  left: 50%;
  height: 125vh;
  border-radius: 50%;
  margin: auto;
  z-index: -1;
  display: none;
}

#bgstyle_2 {
  position: fixed;
  background: linear-gradient(to left top, #1925c614, #f8f8fa1a);
  /* background: linear-gradient(to top left, #2296f3, #d7ecfd); */
  width: 80vw;
  top: -13%;
  left: 48%;
  height: 125vh;
  z-index: -2;
  border-radius: 50%;
  display: none;
}


#bgstyle_1_playground {
  /* position: fixed;
  background: linear-gradient(to right top, #7f8bff17, #fff); */
  /* background: linear-gradient(to top right, #2196f3, #fff); */
  /* width: 80vw;
  top: -11%;
  left: 50%;
  height: 125vh;
  border-radius: 50%;
  margin: auto;
  z-index: -1;
  display: none; */
  position: fixed;
  /* background: linear-gradient(to right top, #7f8bff17, #fff); */
  background: linear-gradient(to top right,rgba(255,255,255,0), #ffc107)!important;
  width: 150px;
  top: 35%;
  left: 50%;
  height: 150px;
  border-radius: 50%;
  margin: auto;
  z-index: -1;
  /* display: none; */
  opacity: .2!important;
}

#bgstyle_2_playground {
  /* position: fixed;
  background: linear-gradient(to left top, #1925c614, #f8f8fa1a); */
  /* background: linear-gradient(to top left, #2296f3, #d7ecfd); */
  /* width: 80vw;
  top: -13%;
  left: 48%;
  height: 125vh;
  z-index: -2;
  border-radius: 50%;
  display: none; */
position: fixed;
/* background: linear-gradient(to left top, #1925c614, #f8f8fa1a); */
/* background: linear-gradient(to top left, #2296f3, #d7ecfd); */
/* min-height: 100%; */
/* background-image: linear-gradient(278deg,rgb(102 16 242 / 0%), #ffd3001f) ,url(/images/categories/SPOR.jpg) !important; */
/* background-size: cover; */
/* -webkit-background-size: cover; */
-moz-background-size: cover;
-o-background-size: cover;
/* background-size: cover; */
/* background-repeat: no-repeat; */
background-size: 100% 100%!important;
width: 350px;
top: 40%;
left: 0;
height: 350px;
z-index: -2;
border-radius: 50%;
/* display: none; */
/* opacity: .4; */
}

/* #bgstyle_1_playground {
  position: fixed;
  background: linear-gradient(to right top, #7f8bff17, #fff);
  width: 125vh;
  height: 125vh;
  top: -11%;
  left: -30%;
  border-radius: 50%;
  margin: auto;
  z-index: -1;
}

#bgstyle_2_playground {
  position: fixed;
  background: linear-gradient(to left top, #1925c614, #f8f8fa1a);
  width: 125vh;
  height: 125vh;
  top: -13%;
  left: 48%;
  z-index: -1;
  border-radius: 50%
} */

@media(min-width:767.98px) {
  #bgstyle_1_playground {
    /* width: 201vh;
    height: 201vh;
    display: none; */
  }
  #bgstyle_2_playground {
    /* width: 201vh; */
    /* height: 201vh; */
    /* display: none; */
  }
}



@font-face {
  font-family: 'bubble';
  src: url('Double_Bubble_shadow.otf');
  font-weight: normal;
  font-style: normal
}

@font-face {
  font-family: 'big john';
  src: url('BIG_JOHN.otf');
  font-weight: normal;
  font-style: normal
}

@font-face {
  font-family: 'cocogoose';
  src: url('cocogoose.ttf');
  font-weight: normal;
  font-style: normal
}

@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  src: url('alfa-slab-one-v7-latin-regular.eot');
  src: local('Alfa Slab One Regular'), local('AlfaSlabOne-Regular'), url('alfa-slab-one-v7-latin-regular.eot?#iefix') format('embedded-opentype'), url('alfa-slab-one-v7-latin-regular.woff2') format('woff2'), url('alfa-slab-one-v7-latin-regular.woff') format('woff'), url('alfa-slab-one-v7-latin-regular.ttf') format('truetype'), url('alfa-slab-one-v7-latin-regular.svg#AlfaSlabOne') format('svg')
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('roboto-mono-v5-latin-regular.eot');
  src: local('Roboto Mono'), local('RobotoMono-Regular'), url('roboto-mono-v5-latin-regular.eot?#iefix') format('embedded-opentype'), url('roboto-mono-v5-latin-regular.woff2') format('woff2'), url('roboto-mono-v5-latin-regular.woff') format('woff'), url('roboto-mono-v5-latin-regular.ttf') format('truetype'), url('roboto-mono-v5-latin-regular.svg#RobotoMono') format('svg')
}

.ui-dialog .ui-dialog-titlebar {
  background: 0;
  border: 0
}

.ui-dialog .ui-dialog-buttonpane {
  background: none!important;
  border: 0
}

.ui-dialog .ui-dialog-buttonpane button {
  margin: .5em .4em .5em 0;
  cursor: pointer;
  padding: 8px;
  width: 8em;
  border: 1px;
  box-shadow: none;
  border-radius: 5px;
  /* background: 0; */
  /* color: var(--bs-primary); */
  /* border: 1px solid var(--bs-primary) */
}

.ui-dialog .ui-dialog-buttonpane button:hover, .ui-dialog .ui-dialog-buttonpane button:active {
  /* background: var(--bs-primary) !important; */
  /* color: #fff !important */
}

table.dataTable.no-footer {
  border-bottom: 1px solid #c3c3c308 !important
}

:root {
  --text-warning-light :#ffcf3d; 
  --quizz-option-color: #ffd24d/*#ffc107*/;
  --linear-orange: linear-gradient(180deg, #ffe8cb, #ff7400);
}

.text-warning-light{
  color: var(--quizz-option-color/*--text-warning-light*/)!important;
}

.bg-linear-orange{background: var(--linear-orange);}

@font-face {
  font-family: lobster;
  src: url(lobster.otf);

  * {
    margin: 0
  }
}

html {
  height: 100%;
  width: 100%;
  margin: auto
}

body {
  min-height: 100vh;
  min-height: 100%;
  max-width: 720px;
  margin: auto!important;
  overflow: auto;
  overflow-y: auto !important;
  margin: auto;
  padding: 0;
  padding-right: 0 !important;
  /* background: #f5f5f7; */
  /*!important;*/
}

#app-title {
  font-family: Lobster;
  font-size: 1.2em;
  font-weight: bold;
  padding-left: 2.2vw;
  /* color: #ff9000; */
  /* text-shadow: 0 0 1.13e-25px #fff; */
  background-image: url(images/icons/ios/152.png);
  width: 64px;
  height: 64px;
  background-size: cover;
  border-radius: 50%;
  /* margin-top: -1vh; */
}

@media(max-width:767.98px) {
  #app-title {
    font-size: 1em;
    padding-top: .2em
  }
}

#app-title-sub {
  font-size: .2em;
  margin-top: -5px;
  padding-left: 4px
}

#app-title__:hover {
  color: var(--bs-primary);
  cursor: pointer
}

#current-title-displayer__ {
  text-transform: lowercase !important;
  font-size: 1.4rem;
  /* color: rgba(0, 0, 0, 0.08) !important; */
  font-variant-caps: all-small-caps;
  font-family: 'Alfa Slab One' !important
}

@media(max-width:767.98px) {
  #current-title-displayer__ {
    /* font-size: large */
  }
}

#top-menu-down {
  width: 100%
}

.breadcrumb-item+.breadcrumb-item::before {
  color: inherit !important;
  content: '' !important
}

.exp {
  font-size: .2em;
  margin-bottom: 50%;
  margin-left: 4%;
  background-color: #ff530d;
  font-weight: bold;
  padding: 1
}

#center {
  width: 100%;
  border: 0;
  height: auto;
  min-height: 30em;
  height: auto !important;
  height: 30em
}

#uppermain-box {
  width: 100%;
  font-size: .6em
}

.menu-open-button:hover, .contxt:hover, .resetlocalsession:hover {
  cursor: pointer;
  background-color: none !important;
  color: #fff
}

#tabs-tc {
  float: right;
  margin-right: 1%
}

.close-editor, .create-test, .reg, .hist {
  cursor: pointer;
  color: #005d7f
}

.close-editor:hover, .create-test:hover, .reg:hover, .hist:hover {
  cursor: pointer
}

.userLogin {
  display: none
}

#resetconbloc {
  margin-top: 1%;
  float: right;
  width: 40%
}

#resetconbloc span, #resetconbloc a {
  font-size: .9em;
  font-weight: bold
}

#resetconbloc a {
  min-width: 30%;
  padding: 30%
}

#closePlayGroundBtn {
  font-size:x-small;
  font-family: verdana;
  /* font-weight: 100; */
  cursor: pointer !important;
  /* z-index: 1  */
}

@media(max-width:767.98px) {
  #closePlayGroundBtn {
    /* border: 0; */
    /* top: 1vh; */
    /* right: -1vw; */
    /* font-weight: 100 */
  }
}

#closePlayGroundBtn:hover, #closePlayGroundBtn:active {
  color: var(--bs-secondary)
}

.shower-button a{
  /* text-shadow: 2px 2px 0 #ffbf00, 2px -2px 0 #ffbf00, -2px 2px 0 #ffbf00, -2px -2px 0 #ffbf00, 2px 0 0 #ffbf00, 0px 2px 0 #ffbf00, -2px 0 0 #ffbf00, 0px -2px 0 #ffbf00, 0px 0px 2px; */
}

#main_container {
  width: 100% !important;
  height: 100% !important;
  margin-bottom: 0
}

#main_container_1 {
  width: 100% !important
}

#main-box {
  width: 100% !important
}

.levels li {
  float: left;
  margin: 5px;
  width: 150px;
  list-style: none;
  background-color: #fffae5;
  text-align: center;
  font-size: 2em;
  cursor: pointer
}

.levels {
  width: 100%
}

.word_shuffled_anag .letter-self {
  text-align: center !important;
  font-size: 3.5em;
  font-weight: bold
}

.word_shuffled_qcm .letter-self {
  display: inline-block;
  margin-bottom: 4px;
  min-width: 100%;
  text-align: center;
  text-shadow: none!important;
  font-family: 'Alfa Slab One';
  font-size: 1em;
  font-weight: 100;
  /* border-radius: 9px; */
  min-height: 100px;
  /* float: left; */
  vertical-align: middle;
  align-content: center!important;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.word_shuffled_qcm .letter-self:hover{
  cursor: pointer;
}

.word_shuffled_qcm .col:hover, .word_shuffled_qcm .col:active, .word_shuffled_qcm .col:focus {
  cursor: pointer;
  /* background: #f1f1f1 !important */
}

.word_shuffled_anag .col:hover, .word_shuffled_anag .col:active, .word_shuffled_anag .col:focus {
  cursor: pointer;
  /* background: #f1f1f1 !important */
}

.letter-self {
  color: #fff;
  font-family: 'Roboto';
}

/* Permet de s'assurer que toute option désactivée conserve son opacité naturelle */
.letter-self.disabled:not(.ui-state-disabled){
  opacity: 1!important;
}

/* Permet de s'assurer que toute option sélectionnée possède une opacité en décalage évident avec les autres */
.letter-self.disabled.ui-state-disabled,
.letter-self.ui-state-disabled{
  /* border:8px solid #ffbf01 !important; */
  border: 0px!important;
  /* opacity: .35!important; */
}
/* .letter-self.ui-state-disabled{ */
  /* background-color:rgba(254,201,41,.76)!important; */
  /* opacity:1!important; */
/* } */

 /* .letter-self.ui-state-disabled:hover,
.letter-self.ui-state-disabled:focus,
.letter-self.ui-state-disabled:active{
  background: none!important;
} */


.user-elements-container{
  /* position: absolute;
  top: 2%; */
}

.opponnent-elements-container{
  /* position: absolute;
  top: 2%;
  right: 0px; */
}

.opponnent-elements-container .stat-board-2{

}

.ui-state-highlight {
  width: 70px;
  height: 75px;
  border: 2px dotted #fff
}

.ui-state-selected {
  margin-left: auto;
  margin-bottom: 4px;
  min-width: 18em;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  color: #b1b2b1;
  border: 1px dashed #b1b2b1;
  padding: 2%
}

.ui-state-green {
  margin-left: 10%;
  margin-bottom: 4px;
  min-width: 18em;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  color: yellow;
  border: 4px solid yellow;
  padding: 2.5%
}

.answer {
  padding: 2px;
  font-size: 1.4
}

input:focus {
  outline: 0
}

#input-text-form:focus {
  color: #fff
}

.word-input-button {
  border: 0;
  background-image: none
}

.c-0 {
  font-weight: bold;
  text-align: center;
  color: #b1b2b1
}

#adhesion-box {
  font-size: .8rem;
  /* margin: auto;
  padding-top: 10% */
}

#go-button-prem {
  font-size: .2em;
  background-color: #b3213d !important;
  color: #ffe !important;
  margin-top: none
}

#menu-submit-button {
  width: 99.6%;
  height: 100%;
  padding: .2%;
  font-size: 2.2em;
  margin: 0;
  background: #005d7f;
  color: #fff;
  text-shadow: 1px 1px 12px #fff;
  font-family: Lobster
}

#menu-submit-button:hover {
  cursor: pointer;
  text-shadow: 1px 1px 12px #e82c0c
}

#menu-start-button, #menu-quit-button {
  display: block;
  width: 100%;
  margin: 0
}

.bg-danger.toastAnswerStatus,
.bg-success.toastAnswerStatus {
  left: 18vw !important;
  /* background: rgba(0, 0, 0, .5) !important; */
  background: rgba(255, 255, 255, 1) !important;
}

#toastRemainingValue {
  left: 20.5vw !important;
  background: rgba(255, 255, 255, 1) !important;
}

@media(max-width:767.98px) {
  #toastAnswerStatus {
    left: 20.5vw !important;
    background: rgba(255, 255, 255, 1) !important;
  }

  #toastRemainingValue {
    left: 20.5vw !important;
    background: rgba(255, 255, 255, 1) !important;
  }
}

/* Toast for online  */
/* On cache le status d'acceptation disponible par défaut dans le template useritem */
.toastAnswerStatus .status-item{
  display: none;
}

#search-opponent-dialog, #search-opponent-dialog table {
  width: 100%;
  margin: auto
}

#search-opponent-dialog table .userLogo, #search-opponent-dialog table .opponentLogo {
  width: 50px;
  height: 100px;
  font-size: 2.5em;
  margin: auto;
  text-align: center
}

#search-opponent-dialog table .userLogo {
  background: #feca40
}

#search-opponent-dialog table .opponentLogo {
  background: #fff;
  color: #005d7f;
  border: 1px dashed #005d7f
}

#search-opponent-dialog table .imgLoading {
  width: 20%;
  margin: auto
}

.ui-autocomplete-loading {
  background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat
}

.ui-autocomplete {
  /* left: 0 !important; */
  list-style: none;
  z-index:10000000!important;
}

.remove-selected-opponent{
  font-size:.4rem;
}

.remove-selected-opponent:hover,
.remove-selected-opponent:focus{
  font-size: .4rem;
  background: rgba(220,53,69,.2);
  color: rgba(220,53,69,1)!important;
}

#button-container {
  /* width: 85%; */
  margin: auto
}

.ui-menu .ui-menu-item {
  /* background: #fff; */
  color: #005d7f
}

.ui-menu .ui-menu-item:hover {
  color: #e82c0c
}

.ui.item {
  opacity: .2;
  filter: Alpha(Opacity=20);
  border-radius: 5px;
  background: #fff
}

.ui-effects-transfer {
  border: 1px dotted black
}

.search-button-for-challenge-dual {
  width: 40%;
  float: right;
  background: #FFF;
  color: #005d7f;
  border: 1px solid #005d7f;
  padding: 4%;
  width: 34%;
  margin: auto;
  font-weight: bold
}

.quit-button-for-challenge-dual {
  width: 10%;
  float: left;
  /* background: #FFF; */
  /* color: #005d7f; */
  /* border: 1px solid #005d7f; */
  padding: 4%;
  width: 34%;
  margin: auto;
  font-weight: bold
}

.search-button-for-challenge-dual:hover, .quit-button-for-challenge-dual:hover {
  cursor: pointer;
  /* background: #005d7f;
  color: #fff */
}

.search-default-text {
  color: var(--bs-secondary)
}

#searchOpponent-menu {
  height: 100%;
  margin: 0
}

#searchOpponent-menu .search-box, #searchOpponent-menu .search-box-2 {
  margin-bottom: 2% !important;
  /* margin-top: 2% !important; */
  margin: auto;
  width: 40%;
  background: #fff
}

#searchOpponent-menu .search-box input, #searchOpponent-menu .search-box-2 input {
  padding: 2em;
  width: 94%;
  border: 1px solid #eae7e7
}

.selected-quizz-focus{
    background: #fffae9!important;
    width: 85%;
    font-weight: 100;
    font-size: small;
    /* font-family: Alfa Slab One; */
}

#searchOpponent-menu .results {
  /*margin-bottom: 4% !important;*/
  padding-top: 4%;
  min-height: 40px;
  width: 40%;
  margin: auto
}

#searchOpponent-menu li {
  margin: auto;
  margin-bottom: 1% !important;
  font-size: 1.1em;
  text-align: initial;
  font-weight: 500
}

.searchOpponent-menu .dropdown.bootstrap-select {
  width: 87%
}

.dynamic-figures-container {
  position: absolute;
  top: 15vh
}

.stats-deco {
  width: 143%;
  height: 130%;
  background: linear-gradient(88deg, #42a5f5, #2196f3);
  position: absolute;
  left: -237px;
  top: -28px;
  z-index: -1;
  border-radius: 50%;
  border: 4px solid #ffeb3b
}

.display-quizz-stats, .find-opponent-button {
  font-size: 1em
}

.find-opponent-button {
  padding: 4% 4% 1% 4%
}

.display-quizz-stats:hover, .find-opponent-button:hover {
  cursor: pointer;
  color: #ff530d
}




/* WAITING ROOM */
.waiting-room .online-multi-player-item-container{
  float: left;
}
.waiting-room .online-multi-answer-status-item{
  display:none;
}
/* ************************** */

/* PLAYGROUND */
.dialogBox-playground{
  padding:0;
  left:0!important;
  border:none!important;
  border-radius: 0!important;
  height:100vh!important;
  z-index:1050!important;
}
.playground-box{
  padding: 0 !important;
  /* height:100vh!important; */
  min-height:100vh!important;
}
.dialogBox-playground.ui-widget.ui-widget-content{
  border: none!important;
  padding: 0;
  background: #042443!important;
}
.dialogBox-playground .ui-dialog-titlebar{
  display: none!important;
}
/* END PLAYGROUND */

/* PAYGROUND BOTTOM */
#playgroundBottomContent .quizz-elements{
  font-size:.7rem!important;
  color: var(--quizz-playground-dynamic-2)!important;
}

#playgroundBottomContent .quizz-elements .element-title{
  font-size:.7rem!important;
  font-weight: 600!important;
  font-family: cursive!important;
}

#playgroundBottom{
  max-width: 615px!important;
  margin: auto;
  padding-top: 2px!important;
  padding-bottom: 16px!important;
}
/* END PLAYGROUND BOTTOM */

#recordSessionInfoInHistory .stepInfoItem span {
  margin: 1% 1% 5% 5%;
  font-size: .8em
}

.stepInfoItemHeader {
  font-size: .8em
}

.c-2 {
  color: var(--quizz-option-color);
  /* font-size: 2.5em; */
  font-family: 'Alfa Slab One' !important
}

.c-1 {
  color: var(--quizz-option-color);
  font-weight: bold;
  font-family: 'Alfa Slab One' !important;
  font-size: .8em !important;
  display:none;
}

.quizz-option-color{
  color: var(--quizz-option-color);
}

.stepInfoItem a {
  color: #005d7f
}

.stepInfoItem {
  color: #005d7f
}

@media(max-width:767.98px) {
  .stepInfoItem {
    width: 100%
  }
}

.good_answer {
  color: #fff;
  font-size: 1em;
  border: 1px solid #f7f7f7
}

.bad_answer {
  color: #bd1e00;
  font-size: 1em;
  border: 1px solid #f7f7f7
}

#question-and-prop {
  font-family: 'Roboto';
  min-height: 100% !important;
  padding-top: 0 !important;
  margin: auto;
  margin-bottom: 0 !important;
  overflow: hidden;
  vertical-align: top
}

#userSessionInfo {
  font-size: 3em;
  display: none;
  text-align: center;
  /* position: absolute;
  top: 14vh;
  left: 36vw */
}



/*LOAD NEXT STEP*/
/* @media(min-width:530px) {*/
  .modal-load-next-step, .load-next-step-displayer .modal-content{ 
    width : 97%!important;
  }
/*} */

.load-next-serie-msg{
  font-size:5rem;
  color:var(--bs-warning)!important;
  /* color : #ffd360; */
  /* text-shadow: 4px 4px 0 #ffc107, 4px -4px 0 #ffc107, -4px 4px 0 #ffc107, -4px -4px 0 #ffc107, 4px 0 0 #ffc107, 0px 4px 0 #ffc107, -4px 0 0 #ffc107, 0px -2px 0 #ffc107, 2px 2px 4px; */
}

.start-solo-from-showcase{
  /* background:#ffd360!important; */
  font-family:'Alfa Slab One';
  font-size:1em;
  font-weight:100!important;
}

.start-solo-from-showcase:hover{
  cursor:pointer;
}

.start-solo-from-showcase .start-btn-text{
  font-family: 'Alfa Slab One';
  font-weight: 100;
}
/* @media(min-width:992px) {
  .userSessionInfo-container{
    position: fixed;
    width: 84%;
    top: 3%;
    left: 0%;
  }
} */



@media(max-width:850px) {
  #userSessionInfo {
    font-size: 2.5em;
    display: none;
    width: 100% !important;
    text-align: center;
    /* position: inherit;
    top: 23vh;
    left: 0vw;
    margin-top: 18.5vh */
  }
}

#word_shuffled_generated{
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: var(--playground-color)!important;
}

#word_shuffled_generated::-webkit-scrollbar {
  width: 20px;
}

#word_shuffled_generated::-webkit-scrollbar-track {
  background-color: rgb(247,225,132,0.05);
  border-radius: 100px;
}

#word_shuffled_generated::-webkit-scrollbar-thumb {
  border-radius: 50px;
  border: 5px solid transparent;
  background-clip: content-box;
  background-color: var(--playground-color)
}

#word-box {
  height: 550px !important;
  margin: auto;
  z-index: 1
}

@media(max-width:767.98px) {
  #word-box {
    margin-top: 2vh;

  width: 100%;
  min-height: 100% !important;
  height: 100% !important;
  text-align: center;
  overflow: hidden;
  padding-bottom: 2%;
  margin: auto
  }

  #word_shuffled_generated {
    width: auto !important;
    height: auto !important;
    text-align: center;
    overflow: hidden;
    top: 8vh;
    left: -30vw
  }

  #word_shuffled_generated.word_shuffled_anag {
    left: -20vw !important
  }

  #word_shuffled_generated.word_shuffled_anag .letter-self {
    padding-left: .1em !important;
    padding-right: .1em !important
  }
}

#userSessionInfoHistory {
  width: 100%
}

#leftmain-box {
  font-family: lobster;
  min-height: 100%;
  margin-right: 2%
}

#rightmain-box {
  font-family: lobster;
  min-height: 100%;
  display: none;
  margin-right: 4%
}

.userSessionTrackMapContainerTxt, #opponentSessionTrackMapContainer .userSessionTrackMapContainerTxt, .cwih {
  font-size: .5em;
  color: #654b24;
  margin-left: 21%;
  text-decoration: underline
}

table#userSessionTrackMap, table#opponentSessionTrackMap {
  margin-left: 20%;
  width: 80%
}

table#userSessionTrackMap td, table#opponentSessionTrackMap td {
  width: 10%;
  text-align: center;
  font-size: .5em;
  color: #fff
}

#trackmap-box {
  font-family: lobster;
  min-height: 100%;
  display:none!important;
}

@media(max-width:767.98px) {
  #trackmap-box, #trackmap-box2 {
    display: none
  }
}

#trackmap-box2 {
  font-family: lobster;
  margin-right: 1%;
  min-height: 100%;
  display:none!important;
}

#trackmap-box .rt, #trackmap-box2 .rt {
  padding: 2%;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  color: #ff5722!important;
  font-family: 'verdana' !important;
  font-size: .8rem;
}

#trackmap-box .emptyTd, #trackmap-box2 .emptyTd {
  color: #b1b2b1 !important
}

#trackmap-box .s-level, #trackmap-box2 .s-level {
  font-family: lobster;
  color: #fff !important
}

.challenge-requested-dialog {
  font-size: x-small;
  font-family: Roboto;
  /* text-align: left; */
}

.challenge-requested-dialog .title{
  font-size: x-small;
  /* background: yellow; */
  text-align: center;
}

.online-sync-dialog {
  color: #fff !important;
}

/* On cache le status d'acceptation disponible par défaut dans le template useritem */
.online-sync-dialog .status-item{
  display:none;
}
/* ********************************** */

/* ********************************** */
/* On affiche uniquement les 4 premiers adversaires */
/* Pour voire les autres, il faut ouvrir la popover */
#opponnent-elements-multi .online-multi-player-item-container:nth-of-type(1n+6){
  display: none;
} /* should match your case */

#opponnent-elements-multi .line-item-container{
  padding: 4px;
}

.user-picture-container img{
  border: none!important;
}
/* ************************************************ */

.online-item.score-item{
 font-size: 0.7rem!important;
 font-family: 'Alfa Slab One';
}

.online-start-count-down, .countdown-online-start-box {
  margin: auto;
  font-size: 1.6rem;
  font-weight: 700;
  font-family:'Alfa Slab One';
  margin-top: 2% !important;
  text-align: center;
  /* color: #005d7f !important; */
}

/* Pour celui qui émet la requête de recherche */
.countdown-online-start-box-sent{
  margin: auto;
  font-size: 1.6rem;
  font-weight: 700;
  font-family:'Alfa Slab One';
  margin-top: 2% !important;
  text-align: center;
  /* color: #005d7f !important; */
}

/* .challenge-requested-dialog, .challenge-requested-dialog-2 {
  width: 100%
} */


/* FORCING DU STYLE DE LA POPOVER */
.popover .popover-body .status-item{
  display:none;
}
.popover .popover-body img{
  width:40px;
  height:40px;
}
.popover .popover-body .no-picture-icon-container{
  width:40px;
  height:40px;
}
.popover .popover-body .no-picture-icon{
  font-size: 2rem;
  position: relative;
	bottom:.33em;
	width:40px;
	height:40px;
}
.popover .popover-body .online-item{
  font-size:.5rem;
  text-align: center;
}
.popover .popover-body .line-item-container.online-multi-player-item-container {
    /* float: left; */
    display:inline-block;
    padding-left: 4px!important;
    padding-right: 4px!important;
}

/* ************** END POPOVER FORCE **************** */
.popup-container {
  font-family: 'Roboto';
  font-weight: 200;
  font-size: x-small
}

#countdown-box {
  /* visibility: hidden; */
  font-family: 'Alfa Slab One';
  width: 50px;
  /* margin-left: 3em !important; */
  text-align: center;
  /* color: hsl(0deg 0 100%); */
  color:#ff5722;
  z-index: 900
}

#countdown-box .item{
  position: absolute;
  top: -54px;
}

#countdown-box .item h2{
  text-align: center;
  position: relative;
  top: 76px;
  /* left: 23% !important; */
  font-size: 1.8rem;
}

@media(max-width:767.98px) {
  #countdown-box {
    width: 50px;
    margin-left: .5rem !important;
    text-align: center;
    color:#ff5722;
    /* z-index: 900; */
    /* position: absolute; */
    /* top: -3vh;
    left: 32vw */
  }
}

@media(min-width:1200px) {
  .fs-1 {
    font-size: 3.5rem !important
  }
}

/*#remainingAttempts, */#remainingAttempts2 {
  font-family: 'Alfa Slab One' !important
}

/*.remaining-attempts-label, */.remaining-attempts-label-opponent {
  font-size: xx-small;
  font-family: 'Roboto' !important
}

.common-label {
  font-size: xx-small;
  font-family: 'Roboto' !important
}

.common-value {
  font-size: 3.4rem !important
}

/*.remaining-attempts-value, */.remaining-attempts-value-opponent {
  font-weight: 800;
  font-family: 'Alfa Slab One' !important;
  color: #ff5722 !important;
  text-shadow: 2px 2px 0 var(--bs-info), 2px -2px 0 var(--bs-info), -2px 2px 0 var(--bs-cyan), -2px -2px 0 var(--bs-info), 2px 0 0 var(--bs-info), 0px 2px 0 var(--bs-info), -2px 0 0 var(--bs-info), 0px -2px 0 var(--bs-info), 1px 1px 2px;
}

/*.remaining-attempts-value, */
/* .remaining-attempts-value-opponent { */
  /* color: #ff5722 !important */
/* } */

@media(max-width:767.98px) {
  /* #remainingAttempts { */
    /* font-family: verdana;
    position: absolute;
    top: 10vh;
    left: -2vw;
    font-size: .4rem;
    border: 0;
    color: #fff !important;
    padding-right: .5rem !important;
    padding-left: .5rem !important */
  /* } */

  /*.remaining-attempts-value.common-value, */.remaining-attempts-value-opponnent.common-value {
    font-size: .8rem !important
  }

  /*.remaining-attempts-label, */
  /* .remaining-attempts-label-opponent {
    padding-right: .5rem !important;
    padding-left: .5rem !important;
    font-size: xx-small;
    margin-right: -4vw;
  } */

  /*.remaining-attempts-value, */.remaining-attempts-value-opponent {
    font-size: .8rem !important
  }

  #userBestScore {
    /* font-family: verdana; */
    /* position: absolute; */
    /* top: 10vh; */
    /* left: 7vw; */
    /* border: 0; */
    /* color: #fff !important; */
    /* padding-right: .5rem !important; */
    /* padding-left: .5rem !important */
  }

  #opponnentBestScore {
    font-family: verdana;
    position: absolute;
    top: 11vh;
    right: 25vw;
    border: 0;
    color: #fff !important;
    padding-right: .5rem !important;
    padding-left: .5rem !important
  }

  #userBestScore .common-label {
    color: #0ff;
    display: block !important;
    margin-top: 28px;
    margin-left: -8vw
  }

  #opponnentBestScore .common-label {
    margin-top: 17px;
    display: block !important
  }
}

@media(max-width:767.98px) {
  #remainingAttempts2 {
    font-family: verdana;
    position: absolute;
    top: 9.7vh;
    right: -4vw;
    font-size: .4rem;
    border: 0;
    color: #fff !important;
    padding-right: .5rem !important;
    padding-left: .5rem !important
  }

  /*.remaining-attempts-label, */.remaining-attempts-label-opponent {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
  font-size: .4rem;
  position: absolute;
  top: 19px;
  right: 2.6vw;
  }
}

#bbleft-box {
  display: none
}

#bbleft-box2{
  /* position: absolute;
  top: 17px; */
}

.bbleft-countpoint-header {
  width: 100%;
  margin-bottom: 5px;
  margin-left: 17%;
  text-align: left
}

table.stat-board {
  border-collapse: no-collapse;
  width: 75%;
  font-family: lobster
}

table.stat-board td {
  padding: 2%;
  font-weight: bold;
  box-shadow: 1px 1px 12px #fff
}

#opp-statistics-board, #user-statistics-board {
  min-height: 80%;
  vertical-align: top
}

.stat-board-1 {
  font-size: xx-small;
  font-weight: 700;
  font-family: 'Roboto' !important;
  /* position: absolute;
  top: 8px; */
}

/* VAINQUEUR DE LA PARTIE */
#winner .ranking-message{font-family: 'lobster';}

/* VAINQUEUR DE LA PARTIE */
#looser .ranking-message{
  font-family: 'Alfa Slab One';
}

.playground-user-name{
  padding: 0!important;
  font-weight: 100;
  /* position: absolute; */
  /* margin-top: 14px; */
  /* margin-right: -11px; */
  /* transform: rotateZ(-90deg); */
}
.playground-opp-name{
  /* margin-top: 14px; */
  /* margin-left: -6px; */
  /* transform: rotateZ(-90deg); */
  font-family: 'Alfa Slab One'!important;
  font-weight: 100;
}

@media(max-width:767.98px) {
  .stat-board-1 {
    /* position: absolute;
    top:8px; */

    /* display: none */
  }
  #current-user-name__{
    left:-8px;
  }

  #opponent-name__{
    right: -7px;
  }
}

.stat-board-2 {
  font-size: x-small;
  font-family: 'Alfa Slab One';
  text-align: center;
  font-weight: 100;
  /* text-shadow: 2px 2px 0 var(--bs-info), 2px -2px 0 var(--bs-info), -2px 2px 0 var(--bs-cyan), -2px -2px 0 var(--bs-info), 2px 0 0 var(--bs-info), 0px 2px 0 var(--bs-info), -2px 0 0 var(--bs-info), 0px -2px 0 var(--bs-info), 1px 1px 2px; */
  /* position: relative;
  top: 7px;
  left: 44px; */
}

#bbleft-countpoint {
 /* text-shadow: none; */
 /* color: var(--bs-yellow) !important; */
 /* text-shadow: 2px 2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, -2px -2px 0 #fff, 2px 0 0 #fff, 0px 2px 0 #fff, -2px 0 0 #fff, 0px -2px 0 #fff, 1px 1px 2px; */
}

@media(max-width:767.98px) {
  .stat-board-2 {
    /* font-size: 1.4rem !important;
    font-family: 'Alfa Slab One' !important;
    text-align: center;
    font-weight: 100;
    position: relative;
    top: 7px;
    left: 44px; */
  }

  #bbleft-countpoint {
    /* top: 0vh; */
    /* left: -5vw; */
    /* font-size: 1.4em !important; */
    /* color: var(--quizz-option-color) !important; */
    /* font-weight: 800 */
  }
}

table.stat-board td span {
  color: #7f5959
}

/* On cache le statut associé à chaque image utilisateur lors du mode multi */
#playground .online-multi-answer-status-item{
  display:none;
}

@media(min-width:767.98px) {
  #opponnent-elements-multi{
    /* position: absolute; */
    /* bottom: 9vh; */
    /* left: 36px; */
    /* background: #19875421; */
    border-width: 5px;
    border-color: rgba(255, 0, 0, 0.2);
    border-style: solid;
    border-radius: 10px!important;
  }
}


#livePoints2 {
  font-size: x-small;
  font-family: 'Alfa Slab One';
  text-align: center;
  font-weight: 100;
  /* text-shadow: 2px 2px 0 var(--bs-info), 2px -2px 0 var(--bs-info), -2px 2px 0 var(--bs-cyan), -2px -2px 0 var(--bs-info), 2px 0 0 var(--bs-info), 0px 2px 0 var(--bs-info), -2px 0 0 var(--bs-info), 0px -2px 0 var(--bs-info), 1px 1px 2px; */
  /* position: relative;
  top: 7px;
  right: 70%; */
}
@media(max-width:767.98px) {
  #livePoints2 {
    /* position: absolute!important;
    top: 7px!important;
    right: 79px!important; */
    /* width: 4vw!important; */
    /* font-size: 1.4rem !important;
    font-weight: 100; */
  }

  #bbleft-countpoint2.stat-board-2 {
    color: var(--quizz-option-color) !important;
    font-size: 1.4em !important;
    left: 2vw;
    top: -8px;
    text-shadow: none;
  }

  /* MODE MULTI JOUEURS : JOEURS DISPONIBLES */
  #opponnent-elements-multi{
    position: fixed;
    /* top: 0; */
    right: 30px;
    width: 35vw;
    z-index: 0;
  }
}



.effect3d {
  text-shadow: 1px 1px 12px #fff
}

.effect3d_new {
  text-shadow: 1px 1px 12px #000
}

/* Permet d'empêcher que le bouton "Refaire Une Partie" ne soit caché */
@media(min-width:767.98px) {
  #playground .endOnlineGame{
    margin-top: -25vh!important;
  }
}

#winner {
  font-weight: bolder;
  font-size: 4.2em;
  color: #247308;
  font-family: fantasy
}

#looser {
  font-weight: bolder;
  font-size: 4.2em;
  color:var(--bs-indigo);
  font-family: fantasy
}

#final-statistics {
  /* width: 95%; */
  min-height: 99% !important;
  margin: auto;
  margin-top: 1% !important
}

#final-statistics .header td {
  font-size: 2em;
  font-weight: 800;
  text-align: center
}

#final-statistics .user-box, #final-statistics .opponent-box {
  color:  var(--bs-indigo)!important;
  /* font-size: 1.5em!important; */
  /* text-shadow: 1px 1px 12px #fff !important */
  font-family: 'Alfa Slab One';
}

#final-statistics .header {
  /* color#fff !important; */
  /* text-shadow: 1px 1px 12px #fff !important */
  border-bottom: 2px solid;
}

/*#final-statistics .left-box,*/ #final-statistics .middle-box/*, #final-statistics .right-box*/{
  /* color: #247308!important; */
  border-bottom: 1px dashed #c8d0dc;
  font-size: small;
  font-family: 'Alfa Slab One' !important;
  /* text-align: center; */
  /* text-shadow: 1px 1px 0 #ffbf00, 1px -1px 0 #ffbf00, -1px 1px 0 #ffbf00, -1px -1px 0 #ffbf00, 1px 0 0 #ffbf00, 0px 1px 0 #ffbf00, -1px 0 0 #ffbf00, 0px -1px 0 #ffbf00, 0px 0px 1px */
}

/* @media(max-width:767.98px) { */
  #final-statistics .left-box,#final-statistics .middle-box, #final-statistics .right-box{
    font-size:1.5rem!important;
    text-align: center;
  }
  #final-statistics .user-box, #final-statistics .opponent-box{
    font-size:large!important;
  }
/* } */

#final-statistics .left-box, #final-statistics .right-box {
  font-size: 1.5rem!important;
  color: var(--bs-orange);
  /* font-weight: 700; */
  font-family: 'Alfa Slab One';
}

#final-statistics .color-red {
  color:var(--bs-indigo)!important;
  /* font-size: small; */
  /* text-shadow: 1px 1px 12px #ff530d !important; */
  /* font-family: 'Alfa Slab One' !important; */
}

#final-statistics .color-green {
  color: var(--bs-success) !important;
  /* font-size: small; */
  /* text-shadow: 1px 1px 12px #8ac575 !important; */
  /* font-family: 'Alfa Slab One' !important */
}

#final-statistics .options {
  padding: auto
}

#final-statistics .restart-button, #final-statistics .close-button {
  padding: 4%;
  width: 40%;
  /* font-weight: bold; */
  font-size: 1.5rem;
  /* color: #fff !important; */
  text-align: center;
  text-shadow: none;
  /* font-family: roboto; */
  /* color:#ff8c9d!important; */
  /* border-radius: 16px; */
  /* text-shadow: 2px 2px 0 var(--bs-primary), 2px -2px 0 var(--bs-primary), -2px 2px 0 var(--bs-primary), -2px -2px 0 var(--bs-primary), 2px 0 0 var(--bs-primary), 0px 2px 0 var(--bs-primary), -2px 0 0 var(--bs-primary), 0px -2px 0 var(--bs-primary), 1px 1px 2px */
}

@media(max-width:767.98px) {
  #final-statistics .restart-button, #final-statistics .close-button {
    display: block;
    width: auto;
    margin-bottom: 4%;
    padding: 7%;
    /* font-family: roboto; */
  }
}

#final-statistics .close-button {
  margin-left: 2%
}


#final-statistics .restart-button:hover, #final-statistics .close-button:hover {
  cursor: pointer;
  font-weight: 100!important;
  /* color: #fff !important */
}

#instant-dialog-container {
  display: none;
  font-size: 8em;
  position: absolute;
  left: 25vw;
  width: 100vw;
  z-index: 999999999999999999999;
  text-align: center;
  background-repeat: no-repeat !important
}

@media(max-width:767.98px) {
  #instant-dialog-container {
    font-size: 7.5em;
    top: 20% !important;
    left: -10vw;
    width: 120vw;    
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;

  }
}

.instant-dialog-1 {
  color: var(--bs-primary);
  background-repeat: no-repeat !important
}

.instant-dialog-2 {
  color: var(--bs-warning);
  font-size: 10em !important;
  background-repeat: no-repeat !important
}

.instant-dialog-3 {
  color: #ff530d;
  background-repeat: no-repeat !important
}

.instant-dialog-4 {
  color: #a9e67e;
  background-repeat: no-repeat !important
}

.instant-dialog-5 {
  color: #a9e67e;
  text-shadow: 2px 2px 0 #dc3545, 2px -2px 0 #dc3545, -2px 2px 0 #dc3545, -2px -2px 0 #dc3545, 2px 0 0 #dc3545, 0px 2px 0 #dc3545, -2px 0 0 #dc3545, 0px -2px 0 #dc3545, 1px 1px 2px;
  background-repeat: no-repeat !important
}

.instant-dialog-7{
  color : #fdbdd2!important;
  /* text-shadow: 2px 2px 0 #dcce38, 2px -2px 0 #dcce38, -2px 2px 0 #dcce38, -2px -2px 0 #dcce38, 2px 0 0 #dcce38, 0px 2px 0 #dcce38, -2px 0 0 #dcce38, 0px -2px 0 #dcce38, 1px 1px 2px; */
}

.instant-dialog-7 .instant-congratulations{
  color : #f7e77e!important;
  font-size: 4.5em!important;
}

.instant-dialog-7 .instant-failure{
  /* color : #f7e77e!important; */
  font-size: 4.5em!important;
}

.instant-dialog-7 .instant-failure.sub{
  color : #ffc93c!important;
  font-size: .5em!important;
  text-shadow: 2px 2px 0 #dc3545, 2px -2px 0 #dc3545, -2px 2px 0 #dc3545, -2px -2px 0 #dc3545, 2px 0 0 #dc3545, 0px 2px 0 #dc3545, -2px 0 0 #dc3545, 0px -2px 0 #dc3545, 1px 1px 2px;
  background-repeat: no-repeat !important
}


#instant-dialog-container .good-answer-image, #instant-dialog-container .bad-answer-image {
  background-repeat: no-repeat !important;
  background-repeat: no-repeat !important
}

.ajax-loader {
  margin-left: 35%;
  margin-top: -4%;
  font-size: .2em;
  color: #6b583b;
  position: fixed;
  z-index: 10000
}

#homepage-dynamic {
  width: 100%;
  height: 100%
}

.live-informations, .live-stats {
  height: 90%;
  min-height: 90% !important;
  margin-bottom: 0;
  padding: 0 2% 4% 2%;
  font-size: .9em;
  width: 100%
}

.label-title {
  font-weight: bold;
  margin-left: 30%;
  align: center;
  color: #fff;
  padding: 2%
}

.best-score .label-title {
  color: #ff530d;
  border-bottom: 4px solid #ff530d;
  float: left;
  margin-left: 0
}

.nb-quizz .label-title {
  color: #ff530d;
  border-bottom: 4px solid #ff530d;
  float: left;
  margin-left: 0
}

.live-informations .infos {
  background: #ff530d;
  padding: 4% 2% 4% 2%;
  vertical-align: top;
  text-align: left;
  height: 100%;
  min-height: 100% !important
}

.infos .mega-octicon {
  text-shadow: 1px 1px 12px #fff;
  font-size: 1.5em
}

.infos .details {
  font-family: Lobster;
  margin-bottom: 4%;
  color: hsl(9deg 83% 68%)
}

.infos .mega-octicon {
  color: #e82c0c;
  padding-bottom: 1%
}

.options-delimiter {
  margin: .5rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: .08;
  border-color: #1270fd
}

.option-social {
  font-size: x-large !important;
  width: 49px;
  height: 49px
}

.option-social-counter {
    font-size: .5rem!important;
    font-family: 'Roboto';
    position: relative;
    top: -16px;
    left: -12px;
    height: 4px;
    width: 4px;
    padding: 0 2px!important;
    border-radius: 50%;
    background: #ffe79e;
}

.best-score, .nb-quizz, .nb-categories {
  color: #000;
  font-size: .7em;
  padding: 2% 1% 1% 1%;
  margin-top: .5%
}

.nb-quizz table, .best-score table {
  border-collapse: collapse
}

.nb-quizz .rank, .best-score .rank {
  border-top: 0;
  border-left: none
}

#presentation {
  clear: both;
  min-height: 100% !important;
  height: 100% !important;
  background: #fff !important;
  overflow: hidden;
  padding: .5%
}

#presentation table {
  width: 100%
}

#p00 {
  text-align: left;
  color: hsl(210deg 27% 53%);
  font-family: "Times New Roman";
  min-height: 95% !important;
  height: 95% !important;
  overflow: hidden !important;
  padding-bottom: 17vh !important
}

#p11 {
  text-align: left;
  color: #f4f4f4;
  font-size: 1.2em;
  min-height: 95% !important;
  height: 95% !important;
  float: right;
  overflow: hidden
}

#p00 .text {
  font-size: 1.5em;
  font-family: lobster;
  font-weight: thinner
}

#p00 .text.card {
  border: 0
}

#p1-left, #p1-right {
  width: 48%;
  float: left;
  margin: auto;
  color: #FFF
}

#p1-left:hover {
  color: #fff !important;
  cursor: pointer
}

#p1-left .mega-octicon, #p1-right .mega-octicon {
  margin: auto
}

#p1-left .title, #p1-right .title {
  font-size: 1em !important
}

a.pres-stick-1, .pres-stick-2, a.pres-stick-3 {
  border: 1px solid #f1f1f1;
  margin: auto;
  margin-bottom: 1% !important;
  padding: 8%;
  display: block;
  font-size: 1.3em;
  text-align: left;
  color: #2c3e50;
  font-family: "Times New Roman"
}

a.pres-stick-3 {
  background: #e82c0c;
  color: #fff;
  text-decoration: none;
  border: 0
}

.pres-stick-3:hover {
  background: 0;
  color: #e82c0c;
  border: 1px solid #e82c0c
}

.pres-stick-1:hover, .pres-stick-2:hover {
  cursor: pointer;
  background: hsl(207deg 90% 54%) !important;
  color: #fff !important
}

#current-displayed-categories {
  text-transform: lowercase;
  overflow: hidden;
  width: 100%;
  border-collapse: collapse
}

#current-displayed-categories .mega-octicon {
  font-size: 4.2em !important
}

.cat-item-container .options {
  display: none;
  width: 100%;
  min-height: 2em !important;
  height: 2em !important
}

#categories {
  width: 100%;
  min-height: 100% !important;
  height: auto !important;
  overflow: hidden !important;
  margin-top: 0;
  padding-bottom: 2%
}

#categories-list{
  background: linear-gradient(180deg, #ffbf00, transparent) !important;
}

#categories .cat-item {
  width: 100%;
  font-size: .8rem;
  font-weight: 100!important;
  font-family: 'Alfa Slab One' !important;
  /*padding: 1% 0 1% 1%;*/
  text-transform: capitalize;
}


#categories .cat-item img{
  height: 124px!important;
}

@media(max-width:767.98px) {
  #categories .cat-item {
    font-size: .7em
  }
}

.cat-item-sub-label{
  font-size: xx-small!important;
  font-weight: 700;
  font-family: 'Roboto';
}
@media(max-width:767.98px) {
  .cat-item-sub-label{
    font-size: xx-small!important;
  }
}

#categories .cat-item-container {
  border-radius: 16px !important;
}

@media(max-width:767.98px) {
  #categories .cat-item-container {
    border-radius: 16px !important
  }
}

#categories .cat-item:hover {
  cursor: pointer
}

#categories .cat-item-container:hover, #categories .cat-item:hover {
  cursor: pointer
}

#categories .access-cat-item, #categories .generate-auto-quizz, #categories .generate-auto-quizz-dual, #categories .cat-ranking, #categories .permalink-cat-item {
  padding: 3% 1% 3% 1%;
  margin-bottom: .4rem !important;
  font-size: .7rem;
}

@media(max-width:767.98px) {
  #categories .access-cat-item, #categories .generate-auto-quizz, #categories .generate-auto-quizz-dual, #categories .cat-ranking, #categories .permalink-cat-item {
    padding: 1em .7em !important;
    width: 36vw;
    font-size: .71rem;
    margin-bottom: 0.4rem!important;
  }
}

#categories .generate-auto-quizz:hover, 
#categories .generate-auto-quizz-dual:hover, 
#categories .access-cat-item:hover, 
#categories .cat-ranking:hover, 
#categories .permalink-cat-item:hover,
#categories .permalink-cat-item:active {
  cursor: pointer;
  color: #fff
}

#categories .subtitle-category {
  font-size: .8em;
  padding-top: 2.5%;
  padding-bottom: 2.5%;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  /* background: #03a9f414 */
}

@media(max-width:767.98px) {
  #categories .subtitle-category {
    padding-top: 2%;
    padding-bottom: 2%
  }
}

/************* JQUERY SLICK SLIDER *********************/
/** CATEGORIES **/
#current-displayed-categories .slick-prev,
#current-displayed-categories .slick-next{
 z-index:-1;
 display:none!important;
}

#current-displayed-categories .slick-prev{
  left: 0%!important;
  width: 12px;
  z-index: 1;
}

#current-displayed-categories .slick-next{
    right:0%!important;
    width: 12px;
    z-index: 1;
}

#current-displayed-categories .slick-dots li button:before{
  font-size:16px;
}
/** END OF CATEGORIES **/

/** MOST PLAYED **/
#categories-most-played-quizz{
  border-radius: 16px!important;
  /* background:#ffc93c!important; */
}
#categories-most-played-quizz .slick-prev,
#categories-most-played-quizz .slick-next{
 z-index:-1;
 display:none!important;
}

#categories-most-played-quizz .slick-prev:before,
#categories-most-played-quizz .slick-next:before{
 color: rgba(255, 26, 26, .15);
 font-size: xx-large;
}

#categories-most-played-quizz .slick-prev{
  left: 76%!important;
  width: 12px;
  z-index: 1;
  top: 151px;
}

#categories-most-played-quizz .slick-next{
  right: 5%!important;
  width: 12px;
  z-index: 1;
  top: 151px;
}

#categories-most-played-quizz .slick-dots li button:before{
  font-size:16px;
}

#categories-most-played-quizz .section-title{
  /* color: #ffc93c !important; */
  font-family: 'Alfa Slab One';
  font-size: .7rem;
  font-weight: 100;
}
#categories-most-played-quizz .quizz-name{
  /* background-color: #ffc93c!important; */
  /* min-height: 124px!important; */
}
/** END OF MOST PLAYED **/

/**************** BEST RANKED USERS ***********************/
#categories-best-ranked-users-home{
 /* background: #fff; */
 border-radius: 1rem!important;
}

#categories-best-ranked-users-home .slick-dots{
  display:none!important;
}
#categories-best-ranked-users-home .items-container{
  margin-bottom:0px!important;
}

#categories-best-ranked-users-home .slick-prev:before,
#categories-best-ranked-users-home .slick-next:before{
 color: #ff1a1a;
 font-size: xx-large;
 display:none!important;
}

#categories-best-ranked-users-home .slick-dots li button:before{
  font-size:16px;
}
/*  END OF BEST RANKED USERS*/
/********************************************************/

#categories-detail {
  width: 100%;
  min-height: 100% !important;
  height: 100% !important;
  overflow: hidden
}

#current-displayed-category-details {
  height: 100%;
  margin-top: 0;
  border-spacing: 1.2em
}

#current-displayed-category-details_filter {
  padding: 4px 46px
}

#current-displayed-category-details-empty {
  width: 70%;
  color: #7f5959;
  float: right;
  padding-top: 2px;
  border-collapse: collapse;
  margin-top: 2px
}

#current-displayed-category-details-header th {
  font-size: 1em !important;
  color: var(--bs-primary) !important;
  font-weight: bold !important;
  border-bottom: 0
}

#current-displayed-category-details td {
  font-size: 1em;
  text-align: left;
  border-radius: 86px
}

@media(max-width:767.98px) {
  #current-displayed-category-details td {
    font-size: .8em;
    text-align: left
  }
}

#current-displayed-category-details .octicon {
  font-size: .7em !important;
  font-weight: 500;
  padding: 1em;
  margin-bottom: .3em;
  width: auto !important;
  text-align: left
}
#current-displayed-category-details .title,
#favquizz .title,
#categories-detail-created .title,
.search-box-results .title
{
  font-size: .7em !important;
  font-weight: 500;
  padding: 1em;
  margin-bottom: .3em;
  width: auto !important;
  text-align: left
}

@media(max-width:767.98px) {
  #current-displayed-category-details .octicon {
    font-size: .7em !important;
    font-weight: 500;
    padding: 1em;
    /* width: 100% !important; */
    text-align: center
  }
  #current-displayed-category-details .title,
  #favquizz .title {
    font-size: .7em !important;
    font-weight: 500;
    padding: 1em;
    /* width: 100% !important; */
    text-align: center
  }
}

#current-displayed-category-details .trigger-update-button{
  display: none!important;
}

#categories-detail-header .mega-octicon {
  text-align: center;
  font-size: 5em;
  text-shadow: 1px 1px 12px #fff
}

.detail-item {
  cursor: pointer;
  padding-left: 1%
}

.detail-item:hover, .find-opponent-button:hover, .watch-stats:hover {
  color: #ff530d
}

#current-displayed-category-details_filter input, .dataTables_filter input {
  padding: .5em;
  border: 1px solid var(--bs-primary) !important;
  border-radius: 20px !important
}

#current-displayed-category-details_info {
  display: none
}

.underline {
  color: var(--bs-dark) !important
}

.underline.sorting_1 {
  text-align: left !important
}

span.quizz-traing-desc-title, span.friends-desc-title {
  font-family: verdana;
  font-size: .5em;
  font-weight: 100!important;
}

span.friends-desc-title {
  font-size: .68rem;
}

.quizz-traing-desc-item, span.friends-desc-item {
  /* font-weight: 200; */
  font-size: .68rem;
  font-variant-caps: unicase;
}

.quizz-traing-desc-item-value, span.friends-desc-item-value {
  /* font-weight: 200; */
  color: var(--bs-dark);
  padding-left: 1em;
  /* font-style: italic; */
  font-size: .68rem;
}

.add-friend, .private-public, .friends-online-status {
  font-family: Roboto;
  font-weight: 100;
  cursor: pointer
}

.add-friend:hover, .add-friend:active, .add-friend:focus, .private-public:hover, .private-public:active, .private-public:focus, .friends-online-status:hover, .friends-online-status:active, .friends-online-status:focus {
  color: #fff !important
}

.dropdown-item.hover, .dropdown-item.focus, .dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background: none !important
}

.dropdown-item.hover, .dropdown-item.focus {
  background: rgba(0, 0, 0, .4) !important
}

.quizz-name, .quizz-name {
  padding: 1.5%;
  border-radius: 16px;
  /* background: #8fbdff!important; */
  background: rgba(255, 255, 255, 1) !important
}

.watch-stats:hover {
  cursor: pointer
}

/* .arrow-element-label {
  font-size: 3rem !important
} */

.arrow-element.fas {
  font-size: 3rem !important
}

.list-of-executed-quizz, .list-of-executed-quizz-dual, .list-of-sessions {
  font-size: 1.2rem
}

@media(max-width:767.98px) {
  .list-of-executed-quizz, .list-of-executed-quizz, .list-of-sessions, #current-displayed-statistics-details-header-user-by-session{
    font-size: .8rem
  }

  .list-of-executed-quizz-dual-header-dual, .list-of-sessions-header, #current-displayed-statistics-details-header-user-by-session{
    font-size: 1rem
  }
}

.list-of-executed-quizz-header-dual {
  font-size: .7rem
}
@media(max-width:575.98px) {
  .list-of-executed-quizz-header-dual {
    font-size: .5rem
  }
}

@media(max-width:991.98px) {
  .list-of-executed-quizz-header, .list-of-executed-quizz, .list-of-executed-quizz-dual, .list-of-sessions {
    font-size: .8rem
  }
}

#quizz-statistics {
  margin: 0
}

.__title {
  text-align: left;
  font-size: 1em
}

#statistics-header, #statistics-header-zoom {
  width: 25%;
  min-height: 100% !important;
  float: left;
  margin-top: 2%;
  margin-left: 1%
}

#statistics-header .mega-octicon {
  text-align: center;
  font-size: 5em;
  color: #005d7f;
  margin-top: 4px;
  text-shadow: 1px 1px 12px #fff
}

#quizz-statistics-detail__challenge__container {
  border-collapse: collapse;
  padding: .5%
}

.__title {
  text-align: left;
  font-size: 18px
}

#quizz-statistics-detail-zoom-zoom {
  min-height: 100% !important;
  border-collapse: collapse
}

#quizz-statistics-detail_filter input {
  padding: .5em;
  border: 2px solid var(--bs-primary);
  border-radius: 5px
}

#quizz-statistics-zoom, #quizz-statistics-zoom-detail {
  padding: .5%
}

#quizz-statistics-zoom tr {
  cursor: pointer;
  color: #005d7f;
  font-size: .8em
}

#quizz-statistics-detail-zoom-zoom tr {
  cursor: pointer;
  color: #005d7f;
  font-size: .8em
}

.ui-state-disabled {
  color: none!;
}

.ui-dialog-titlebar-close {
  visibility: hidden
}

.ui-corner-all {
  border: 0
}

#tabs-3 select {
  font-size: .7em;
  width: 100%;
  height: 100%
}

#tabs-3 td {
  color: #fff;
  font-weight: bold;
  font-size: .8em
}

.ui-dialog-titlebar {
  background: 0;
  color: #000
}

footer, footer a {
  font-size: .8em;
  font-family: verdana;
  text-decoration: none !important;
  color: #dedddd !important
}

#dialog-box p {
  font-size: .7em;
  color: var(--bs-primary)
}

#confirm-box .content {
  width: auto;
  background: #fff !important
}

#confirm-box.ui-dialog-content {
  height: auto !important;
  /* background: #0000 !important; */
  /* color: var(--bs-primary); */
  box-shadow: none !important
}

.ui-dialog .ui-dialog-content {
  background: #0000 !important
}

.confirm-dialog-custom {
  margin-top: -2%
}

.ui-widget-content {
  background: #fff !important;
  /* color: var(--bs-primary) !important; */
  text-align: center;
  height: auto !important
}

#reset-password-box {
  height: 370px !important
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  clear: both;
  width: 100%;
  margin: auto !important
}

.ui-dialog .ui-dialog-buttonpane button {
  padding: 1.2em .5em !important;
  border-radius: 24px !important;
  width: 45%
}

.ui-dialog-titlebar-close {
  border: none !important;
  background: 0;
  visibility: hidden
}

.ui-dialog-titlebar-close:before {
  content: 'x';
  font-family: verdana !important;
  color: #c1c1c1;
  outline-color: none !important
}

.ui-dialog .ui-button {
  color: #005d7f
}

.ui-dialog .ui-button:hover {
  cursor: pointer
}

.dialogBox {
  color: var(--bs-primary);
  background: #fff !important;
  border-radius: 0px !important;
  /* border:1px solid #fb7d4987!important; */
  max-width: 300px!important;
  top: 8vh !important;
  left: 41vw !important;
  /* border: 0 !important */
  z-index: 10000!important;
}

@media(max-width:767.98px) {
  .dialogBox {
    width: 100vw !important;
    left: 15vw !important;
    /* top: 20vh !important */
  }
}

.ui-widget-overlay.ui-front{
  z-index: 9900;
}

#adhesion-box, #connect-box, #reset-password-box {
  /* height: 64vh !important; */
  color: unset
}

#adhesion-box label, #connect-box label, #reset-password-box label {
  color: #8390a5 !important
}

#adhesion-box a, #connect-box a, #reset-password-box a {
  cursor: pointer
}

.toast-message {
  font-size: 2.5rem !important;
  font-family: 'Alfa Slab One';
  top: 50vh;
  position: absolute;
  height: 2%;
  
  /* display: inline; */
}

.toast-message .instant-points{
  font-size:1.5rem!important;
}

.toast-message .instant-points.flying-points{
  font-size:4rem!important;
}


.instant-points.instant-congratulations{
  font-size: 2em!important;      
}

.instant-points.instant-failure{
  color: #f88590!important;
  font-size: 2em!important;      
}

.toast-message .instant-points .i_boss_man,
.toast-message .instant-points .i_boss_woman{
  text-shadow: none!important;
}

.loader {
  width: 50px;
  height: 50px;
  display: inline-block;
  padding: 0;
  opacity: .5;
  border: 3px solid #09acfd;
  -webkit-animation: loader 1s ease-in-out infinite alternate;
  animation: loader 1s ease-in-out infinite alternate
}

.loader:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 3px solid #09acfd
}

.loader:after {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 3px solid #09acfd
}

@keyframes loader {
  from {
    transform: rotate(0deg) scale(1, 1);
    border-radius: 0
  }

  to {
    transform: rotate(360deg) scale(0, 0);
    border-radius: 50px
  }
}

@-webkit-keyframes loader {
  from {
    -webkit-transform: rotate(0deg) scale(1, 1);
    border-radius: 0
  }

  to {
    -webkit-transform: rotate(360deg) scale(0, 0);
    border-radius: 50px
  }
}

.loader1 {
  display: inline-block;
  font-size: 0;
  padding: 0
}

.loader1 span {
  vertical-align: middle;
  border-radius: 100%;
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 3px 2px;
  -webkit-animation: loader1 .8s linear infinite alternate;
  animation: loader1 .8s linear infinite alternate
}

.loader1 span:nth-child(1) {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
  background: rgba(9, 172, 253, 0.4)
}

.loader1 span:nth-child(2) {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
  background: rgba(9, 172, 253, 0.8)
}

.loader1 span:nth-child(3) {
  -webkit-animation-delay: -0.26666s;
  animation-delay: -0.26666s;
  background: rgba(9, 172, 253, 1)
}

.loader1 span:nth-child(4) {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
  background: rgba(9, 172, 253, 0.8)
}

.loader1 span:nth-child(5) {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
  background: rgba(9, 172, 253, 0.4)
}

@keyframes loader1 {
  from {
    transform: scale(0, 0)
  }

  to {
    transform: scale(1, 1)
  }
}

@-webkit-keyframes loader1 {
  from {
    -webkit-transform: scale(0, 0)
  }

  to {
    -webkit-transform: scale(1, 1)
  }
}

.loader2 {
  width: 25px;
  height: 25px;
  display: inline-block;
  padding: 0;
  border-radius: 100%;
  border: 5px solid;
  border-top-color: rgba(254, 168, 23, 0.65);
  border-bottom-color: rgba(57, 154, 219, 0.65);
  border-left-color: rgba(188, 84, 93, 0.95);
  border-right-color: rgba(137, 188, 79, 0.95);
  -webkit-animation: loader2 2s ease-in-out infinite alternate;
  animation: loader2 2s ease-in-out infinite alternate
}

@keyframes loader2 {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(720deg)
  }
}

@-webkit-keyframes loader2 {
  from {
    -webkit-transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(720deg)
  }
}

.loader3 {
  width: 50px;
  height: 50px;
  display: inline-block;
  padding: 0;
  text-align: left
}

.loader3 span {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: rgba(135, 211, 124, 1);
  -webkit-animation: loader3 1.5s linear infinite;
  animation: loader3 1.5s linear infinite
}

.loader3 span:last-child {
  animation-delay: -0.9s;
  -webkit-animation-delay: -0.9s
}

@keyframes loader3 {
  0% {
    transform: scale(0, 0);
    opacity: .8
  }

  100% {
    transform: scale(1, 1);
    opacity: 0
  }
}

@-webkit-keyframes loader3 {
  0% {
    -webkit-transform: scale(0, 0);
    opacity: .8
  }

  100% {
    -webkit-transform: scale(1, 1);
    opacity: 0
  }
}

.loader4 {
  width: 45px;
  height: 45px;
  display: inline-block;
  padding: 0;
  border-radius: 100%;
  border: 5px solid;
  border-top-color: rgba(246, 36, 89, 1);
  border-bottom-color: rgba(255, 255, 255, 0.3);
  border-left-color: rgba(246, 36, 89, 1);
  border-right-color: rgba(255, 255, 255, 0.3);
  -webkit-animation: loader4 1s ease-in-out infinite;
  animation: loader4 1s ease-in-out infinite
}

@keyframes loader4 {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}

@-webkit-keyframes loader4 {
  from {
    -webkit-transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(360deg)
  }
}

.loader5 {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #4183d7;
  border-top: 10px solid #f5ab35;
  -webkit-animation: loader5 1.2s ease-in-out infinite alternate;
  animation: loader5 1.2s ease-in-out infinite alternate
}

@keyframes loader5 {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(720deg)
  }
}

@-webkit-keyframes loader5 {
  from {
    -webkit-transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(720deg)
  }
}

.loader6 {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 2px solid #d24d57;
  border-top: 2px solid #d24d57;
  -webkit-animation: loader6 1.8s ease-in-out infinite alternate;
  animation: loader6 1.8s ease-in-out infinite alternate
}

.loader6:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 0;
  right: 0;
  bottom: 5px;
  border-left: 2px solid #d24d57;
  border-right: 2px solid #d24d57
}

@keyframes loader6 {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(720deg)
  }
}

@-webkit-keyframes loader6 {
  from {
    -webkit-transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(720deg)
  }
}

.loader7 {
  display: inline-block;
  width: 30px;
  height: 4px;
  background: #be90d4;
  -webkit-animation: loader7 1.5s linear infinite;
  animation: loader7 1.5s linear infinite
}

@keyframes loader7 {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(720deg)
  }
}

@-webkit-keyframes loader7 {
  from {
    -webkit-transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(720deg)
  }
}

.loader8 {
  display: inline-block;
  background: rgba(247, 202, 24, 0.6);
  width: 30px;
  height: 30px;
  position: relative;
  text-align: center;
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -o-transform: rotate(20eg);
  -webkit-animation: loader7 3s linear infinite;
  animation: loader7 3s linear infinite
}

.loader8:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  background: rgba(247, 202, 24, 0.5);
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg)
}

.loader9 {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  -webkit-animation: loader9 1.5s linear infinite;
  animation: loader9 1.5s linear infinite
}

.loader9:before, .loader9:after {
  position: absolute;
  content: "";
  left: 30px;
  top: 0;
  width: 30px;
  height: 50px;
  background: red;
  -moz-border-radius: 30px 30px 0 0;
  border-radius: 30px 30px 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%
}

.loader9:after {
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%
}

@keyframes loader9 {
  0% {
    transform: scale(0, 0);
    opacity: 0
  }

  100% {
    transform: scale(1, 1);
    opacity: 1
  }
}

@-webkit-keyframes loader9 {
  0% {
    -webkit-transform: scale(0, 0);
    opacity: 0
  }

  100% {
    -webkit-transform: scale(1, 1);
    opacity: 1
  }
}
/* END OF CUSTOM LOADERS */

/* RIPPLE EFFECT */
/* usage: ripple ripple-{size} ripple-{color} */
.ripple {
  display: inline-block;
  border-radius: 50%;
  margin: 0 5px;
  position: relative;
  transform: scale(1);
  font-weight: 100!important;
}


.ripple-12{
  width: 12px;
  height: 12px;
}

.ripple-16{
  width: 16px;
  height: 16px;
}

.ripple-20{
  width: 20px;
  height: 20px;
  padding-top: 2px;
  margin:auto;
}

.ripple-25{
  width: 25px;
  height: 25px;
}

.ripple-36{
  width: 36px;
  height: 36px;
}

.ripple-49{
  width: 49px;
  height: 49px;
}

.ripple-64{
  width: 64px;
  height: 64px;
}

.ripple::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: inherit;
  border-radius: 50%;
  z-index: -1;
  animation: ripple 1.5s ease-out infinite;
}



/* .ripple{
  transform: scale(0.6);
} */

.ripple-success{
  background-color: #00F001;
}

.ripple-warning{
  background-color: var(--bs-warning);
}

.ripple-danger{
  background-color: rgba(4, 16, 29, 0.41);
}


.ripple::before {
  animation-delay: 1s;
}

@keyframes ripple {
  from {
    opacity: 1;
    transform: scale(0);
  }
  to {
    opacity: 0;
    transform: scale(3);
  }
}

/* END OF RIPPLE EFFECT */

/* NAVBARS */
.modal-content .nav-link{
  font-size: 1rem;
  color:#b6bec6;
}
.modal-content .nav-link.active{
  font-size: 1rem;
  font-family: Alfa Slab One;
  /* color: #6a7f94!important; */
  background: none!important;
  border: none!important;/*1px solid #6a7f94!important;*/
  border-radius: 4px;
}

.nav-final-statistics .nav-link{
  /* color: #7182ff!important; */
}
.nav-final-statistics .nav-link.active{
  color: #fd7e14 !important;
  border-bottom: 1px solid #d0350a !important;
  /* background:#fff!important; */
  border-radius: 0px;
}



.modal .modal-body {
  font-family: 'Alfa Slab One', cursive !important
}

#dialog-box-generic.messages-standard .modal-header {
  padding-right: 1.5rem !important;
  position: absolute;
  top: 0;
  z-index: 100000000
}

#dialog-box-generic.messages-standard .modal-footer {
  padding-right: 1.5rem !important;
  position: absolute;
  bottom: 0;
  z-index: 100000000
}

@media(max-width:767px) {
  #dialog-box-generic.messages-standard .modal-header {
    background: #fff;
    padding-top: .25rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    position: fixed;
    top: 0;
    z-index: 100000000
  }

  #dialog-box-generic.messages-standard .modal-footer {
    padding-top: .25rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    position: fixed;
    bottom: 0;
    z-index: 100000000
  }
}

#dialog-box-generic.messages-standard .modal-title {
  color: rgba(0, 0, 0, .5)
}

#dialog-box-generic.messages-standard .modal-dialog {
  max-width: 48%
}

#dialog-box-generic.messages-standard .modal-content {
  height: 94vh;
  padding-left: 2%;
  padding-right: 2%
}

#dialog-box-generic.messages-standard .modal-body {
  overflow-y: hidden !important;
  height: 84rem !important
}

#dialog-box-generic.messages-standard .modal-header .adress-depart, #dialog-box-generic.messages-standard .modal-header .adress-destination {
  text-transform: capitalize
}

#dialog-box-generic.messages-express .modal-footer {
  padding-right: 1.5rem !important;
  position: absolute;
  bottom: 0;
  z-index: 100000000
}

@media(max-width:767px) {
  #dialog-box-generic.messages-express .modal-header {
    position: fixed;
    top: 0;
    z-index: 100000000
  }

  #dialog-box-generic.messages-express .modal-footer {
    padding-top: .25rem !important;
    padding-right: 1.5rem !important;
    position: fixed;
    bottom: 0;
    z-index: 100000000
  }
}

#dialog-box-generic.messages-express .modal-title {
  color: rgba(0, 0, 0, .5)
}

#dialog-box-generic.messages-express .modal-dialog {
  max-width: 16%
}

#dialog-box-generic.messages-express .modal-content {
  height: 50vh;
  min-width : 280px;
  padding-left: 2%;
  padding-right: 2%;
  overflow: hidden !important;
  border-radius: 50px
}

#dialog-box-generic.messages-express .modal-body {
  overflow-y: hidden !important;
  height: 7484remvh !important
}

#dialog-box-generic.messages-express .modal-header .adress-depart, #dialog-box-generic.messages-express .modal-header .adress-destination {
  text-transform: capitalize
}

.messages-flow {
  overflow: hidden !important
}

#dialog-box-generic .messages-flow .message {
  font-size: .65em !important;
  font-weight: light;
  text-shadow: 0 !important;
  overflow: hidden !important
}

.messages-flow.my-5 {
  margin-bottom: 7rem !important
}

.messages-flow.pb-5 {
  padding-bottom: 7rem !important
}

.message-row-col {
  max-width: 80% !important
}

.message-received .bubble-arrow {
  display: none;
  content: '';
  position: relative;
  bottom: 0;
  left: 19%;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-bottom: 0;
  border-left: 0;
  margin-left: -4px;
  margin-bottom: -8px
}

.message-sent .bubble-arrow {
  display: none;
  content: '';
  position: relative;
  bottom: 0;
  left: 81%;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-bottom: 0;
  border-right: 0;
  margin-left: -4px;
  margin-bottom: -8px
}

.message-timestamp {
  text-transform: capitalize
}

.message-received .message-timestamp {
  padding-left: 2%
}

.message-sent .message {
  border-radius: 50px
}

.message-received .message {
  border-radius: 50px
}

.message .delete-message-trigger-button {
  position: absolute;
  top: 8px;
  right: 22px;
  width: 15px;
  height: 15px
}

#dialog-box-generic.dialog-box-notifications .modal-dialog {
  /* max-width: 48% */
}

#dialog-box-generic.dialog-box-notifications .modal-title {
  color: rgba(0, 0, 0, .5)
}

#dialog-box-generic.dialog-box-notifications .modal-content {
  min-height: 94vh;
  font-family: 'Alfa Slab One', cursive !important;
  overflow-x: hidden !important
}

#dialog-box-generic.dialog-box-notifications .modal-body {
  overflow-y: hidden
}

#dialog-box-generic.dialog-box-notifications .container-fluid {
  position: relative;
  height: auto
}

#dialog-box-generic.dialog-box-notifications div:not(.btn) {
  text-overflow: ellipsis !important
}

#dialog-box-generic.dialog-box-notifications .help-content {
  height: 100%
}

#dialog-box-generic.dialog-box-notifications .card-body:not(h5) {
  overflow: hidden !important
}

#dialog-box-generic.dialog-box-notifications .action-button small {
  cursor: pointer
}

#dialog-box-generic.dialog-box-notifications .notification-message {
  text-align: center
}

#dialog-box-generic.dialog-box-notifications .notification-container {
  overflow: hidden
}

.notification-center{
  /* color:#ffeb3b!important; */
  font-size:3em;
  /* top:10px!important; */
  /* position:absolute; */
  /* right:15px; */
  text-decoration:none;
}

.active-notifications-count-container{  
  width: 20px;
  height: 20px;
  font-size: small;
  font-family: 'Roboto';
  top: -24px;
  left: -54px;
  padding: 2px;
  border-radius: 50px;
  position: relative;
  /* background-color: var(--quizz-option-color) !important; */
  color: #f72b3f !important;
}
.active-notifications-count-container .active-notifications-count{
  height: 25px;
  width: 25px;
  line-height: 16px;
  font-size: small;
  font-family: verdana;
  background-color: #ffc93c !important;
}


.kolimaya-no-message-img {
  width: 36%
}

.border.user-template-container-2 {
  border-radius: 25px !important
}

#wrapper {
  position: absolute;
  z-index: 1;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 100%;
  overflow: hidden
}

#scroller {
  position: absolute;
  z-index: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none
}

#wrapper-notifs {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 5px;
  left: 0;
  width: 100%;
  overflow: hidden
}

#scroller-notifs {
  position: absolute;
  z-index: 1;
  width: 100%;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none
}

@media(max-width:767px) {
  .modal-dialog.modal-full {
    min-width: 100%;
    margin: auto;
    border: 0;
    border-radius: none
  }

  .modal-dialog.modal-full .modal-content {
    min-height: 100vh;
    height: 100vh !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    border: none !important
  }

  .messages-dialog .modal-dialog.modal-full .modal-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important
  }
}

.text-truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.rounded-100 {
  border-radius: 100px
}

.element-borderless {
  border: none !important;
  outline: none !important;
  box-shadow: none !important
}

.btn-indigo{
   background: rgba(102,16,242,1)!important;
   color:#fff!important;
}

.btn-indigo:hover,.btn-indigo:active{
  background: #6610f212!important;
  color: var(--bs-indigo)!important;
}

.btn-indigo-light{
  background: #6610f212!important;
  color: var(--bs-indigo)!important;
}

.btn-indigo-light:hover,.btn-indigo-light:active{
  background: var(--bs-indigo)!important;
  color:#fff!important;
}

.bg-primary-light {
  background: #f0f8ff !important
}
/*
.bg-blue-sky {
  background: #c1e6fa !important
} */

.bg-blue-sky {
  background: #c1e6fa !important
}


.bg-blue-sky-category {
  background: #e2f1ff !important
}

.bg-yellow{
  background: var(--bs-yellow)!important;
}

.bg-warning-light{
  background: rgba(255, 193, 7, 0.25)!important;
}

/* .bg-light-warning{
  background: rgba(255, 193, 7, 0.45)!important;
}

.bg-light-success{
  background: rgba(25,135,84, 0.45)!important;
}

.bg-light-danger{
  background: rgba(220,53,69, 0.45)!important;
}

.bg-light-white{
  background: rgba(255,255,255, 1)!important;
} */

.bg-success-fluo-light {
  background: #d9fad7 !important
}

.bg-danger-fluo-light {
  background: #faebd7 !important
}

.bg-none {
  background: none !important
}

.text-blue-sky-comp {
  color: #21b1ff !important
}

.text-secondary-4 {
  color: var(--bs-secondary) !important
}

.text-success-flashy {
  color: #4af5bf !important
}

.border.border-8, .border-8 {
  border: 8px solid !important;
}

.border.border-10, .border-10 {
  border: 10px solid !important
}

.border.border-12, .border-12 {
  border: 12px solid !important
}

.border.border-14, .border-14 {
  border: 14px solid !important
}

.border.border-16, .border-16 {
  border: 16px solid !important
}

.border-0_{
  border: 0px solid !important
}

.border.border-success-pastel {
  border-color: #4af596f5 !important
}

.font-family-ASO {
  font-family: 'Alfa Slab One' !important
}

.border-warning-light{
  border-color: rgba(255, 193, 7, 0.25)!important
}

/* border style */
.border-solid{border-style: solid!important;}
.border-dashed{border-style: dashed!important;}
.border-dotted{border-style: dotted!important;}
.border-dotted{border-style: double!important;}
/* border style end */

/* border width */
.border-width-1px{border-width: 1px!important;}
.border-width-2px{border-width: 2px!important;}
.border-width-3px{border-width: 3px!important;}
.border-width-4px{border-width: 4px!important;}
.border-width-5px{border-width: 5px!important;}
.border-width-6px{border-width: 6px!important;}
.border-width-7px{border-width: 7px!important;}
.border-width-8px{border-width: 8px!important;}
/* border style end */


/* Alert */
.alert-success{background-color: #ecfef6!important;}

/* Text shadow */
.text-shadow-1px-warning{text-shadow: 1px 1px 0 var(--bs-warning), 1px -1px 0 var(--bs-warning), -1px 1px 0 var(--bs-warning), -1px -1px 0 var(--bs-warning), 1px 0 0 var(--bs-warning), 0px 1px 0 var(--bs-warning), -1px 0 0 var(--bs-warning), 0px -1px 0 var(--bs-warning), 0px 0px 0px!important;}
.text-shadow-2px-warning{text-shadow: 2px 2px 0 var(--bs-warning), 2px -2px 0 var(--bs-warning), -2px 2px 0 var(--bs-warning), -2px -2px 0 var(--bs-warning), 2px 0 0 var(--bs-warning), 0px 2px 0 var(--bs-warning), -2px 0 0 var(--bs-warning), 0px -2px 0 var(--bs-warning), 1px 1px 2px!important;}
.text-shadow-2px-danger{text-shadow: 2px 2px 0 var(--bs-red), 2px -2px 0 var(--bs-red), -2px 2px 0 var(--bs-red), -2px -2px 0 var(--bs-red), 2px 0 0 var(--bs-red), 0px 2px 0 var(--bs-red), -2px 0 0 var(--bs-red), 0px -2px 0 var(--bs-red), 1px 1px 2px!important;}
.text-shadow-2px-primary{text-shadow: 2px 2px 0 var(--bs-primary), 2px -2px 0 var(--bs-primary), -2px 2px 0 var(--bs-primary), -2px -2px 0 var(--bs-primary), 2px 0 0 var(--bs-primary), 0px 2px 0 var(--bs-primary), -2px 0 0 var(--bs-primary), 0px -2px 0 var(--bs-primary), 1px 1px 2px!important;}
.text-shadow-2px-success{text-shadow: 2px 2px 0 var(--bs-success), 2px -2px 0 var(--bs-success), -2px 2px 0 var(--bs-success), -2px -2px 0 var(--bs-success), 2px 0 0 var(--bs-success), 0px 2px 0 var(--bs-success), -2px 0 0 var(--bs-success), 0px -2px 0 var(--bs-success), 1px 1px 2px!important;}
.text-shadow-2px-indigo{text-shadow: 2px 2px 0 var(--bs-indigo), 2px -2px 0 var(--bs-indigo), -2px 2px 0 var(--bs-indigo), -2px -2px 0 var(--bs-indigo), 2px 0 0 var(--bs-indigo), 0px 2px 0 var(--bs-indigo), -2px 0 0 var(--bs-indigo), 0px -2px 0 var(--bs-indigo), 1px 1px 2px!important;}
/* End Text-shadow */

/* Box shadow */
/* 4px */
.box-shadow-4px-white{
  box-shadow:4px 4px 0 var(--bs-white), 4px -4px 0 var(--bs-white), -4px 4px 0 var(--bs-white), -4px -4px 0 var(--bs-white), 4px 0 0 var(--bs-white), 0px 4px 0 var(--bs-white), -4px 0 0 var(--bs-white), 0px -4px 0 var(--bs-white), 1px 1px 4px!important;
}
.box-shadow-4px-success{
  box-shadow:4px 4px 0 var(--bs-success), 4px -4px 0 var(--bs-success), -4px 4px 0 var(--bs-success), -4px -4px 0 var(--bs-success), 4px 0 0 var(--bs-success), 0px 4px 0 var(--bs-success), -4px 0 0 var(--bs-success), 0px -4px 0 var(--bs-success), 1px 1px 4px!important;
}
.box-shadow-4px-warning{
  box-shadow:4px 4px 0 var(--bs-warning), 4px -4px 0 var(--bs-warning), -4px 4px 0 var(--bs-warning), -4px -4px 0 var(--bs-warning), 4px 0 0 var(--bs-warning), 0px 4px 0 var(--bs-warning), -4px 0 0 var(--bs-warning), 0px -4px 0 var(--bs-warning), 1px 1px 4px!important;
}
.box-shadow-4px-danger{
  box-shadow:4px 4px 0 var(--bs-danger), 4px -4px 0 var(--bs-danger), -4px 4px 0 var(--bs-danger), -4px -4px 0 var(--bs-danger), 4px 0 0 var(--bs-danger), 0px 4px 0 var(--bs-danger), -4px 0 0 var(--bs-danger), 0px -4px 0 var(--bs-danger), 1px 1px 4px!important;
}
/* 8px */
.box-shadow-8px-white{
  box-shadow:8px 8px 0 var(--bs-white), 8px -8px 0 var(--bs-white), -8px 8px 0 var(--bs-white), -8px -8px 0 var(--bs-white), 8px 0 0 var(--bs-white), 0px 8px 0 var(--bs-white), -8px 0 0 var(--bs-white), 0px -8px 0 var(--bs-white), 1px 1px 8px!important;
}
.box-shadow-8px-success{
  box-shadow:8px 8px 0 var(--bs-success), 8px -8px 0 var(--bs-success), -8px 8px 0 var(--bs-success), -8px -8px 0 var(--bs-success), 8px 0 0 var(--bs-success), 0px 8px 0 var(--bs-success), -8px 0 0 var(--bs-success), 0px -8px 0 var(--bs-success), 1px 1px 8px!important;
}
.box-shadow-8px-warning{
  box-shadow:8px 8px 0 var(--bs-warning), 8px -8px 0 var(--bs-warning), -8px 8px 0 var(--bs-warning), -8px -8px 0 var(--bs-warning), 8px 0 0 var(--bs-warning), 0px 8px 0 var(--bs-warning), -8px 0 0 var(--bs-warning), 0px -8px 0 var(--bs-warning), 1px 1px 8px!important;
}
.box-shadow-8px-danger{
  box-shadow:8px 8px 0 var(--bs-danger), 8px -8px 0 var(--bs-danger), -8px 8px 0 var(--bs-danger), -8px -8px 0 var(--bs-danger), 8px 0 0 var(--bs-danger), 0px 8px 0 var(--bs-danger), -8px 0 0 var(--bs-danger), 0px -8px 0 var(--bs-danger), 1px 1px 8px!important;
}

/* font-sizes */
.font-size-small{
  font-size: small!important;
}
.font-size-x-small{
  font-size: x-small!important;
}
.font-size-xx-small{
  font-size: xx-small!important;
}
/* End font-sizes  */


/* MODAL display-group-content*/
.display-group-content .modal-title{
  font-size: small!important;
  font-family: Alfa Slab One;
}
/* ************************** */

.search-container {
  width: auto !important
}

@media(min-width:992px) {
  .search-container {
    /* position: absolute; */
    top: 14vh;
    right: 17vw;
    width: 52% !important;
  }
  .group-users-main-container .search-container {
    position: inherit;
    width: auto!important;
  }
}

.pagination li {
  display: inline-block;
  border-radius: 50px
}

.pagination .active {
  background: var(--bs-white);
  border: 1px solid #dee2e6 !important
}

.pagination li a {
  text-decoration: none;
  padding: 8px
}

.pagination .active:hover, .pagination .active:active, .pagination .active:focus {
  background: var(--bs-primary);
  color: var(--bs-white) !important
}

.pagination li a:hover, .pagination li a:active, .pagination li a:focus {
  color: var(--bs-white) !important
}

.filepond--drop-label {
  color: #4c4e53
}

.filepond--label-action {
  text-decoration-color: #babdc0
}

.filepond--panel-root {
  background-color: #edf0f4
}

.filepond--root {
  width: 170px;
  margin: 0 auto
}

.rotate-45-deg {
  transform: rotate(45deg)
}

.rotate-90-deg {
  transform: rotate(90deg)
}

.rotate-180-deg {
  transform: rotate(180deg)
}

.rotate-270-deg {
  transform: rotate(270deg)
}

.cursor-pointer {
  cursor: pointer
}

* {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
    outline: none !important;
}

/* CUSTOM POOVER */
.quizzmaster-custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}


/**************** CHIPS START ****************/
.chip {
  display: inline-block;
  padding: 0 16px;
  height: 45px;
  font-size: .5rem;
  font-weight:700;
  line-height: 45px;
  border-radius: 25px;
  background-color: #f1f1f1;
}

.chip img {
  float: left;
  margin: 0 10px 0 -16px;
  height: 45px;
  width: 45px;
  border-radius: 50%;
}
/* *****************  CHIPS END  */

/* SCROLLBAR PLAYGROUND */
.modal-playground .modal-body {
  /* max-height: 250px; */
  /* padding: 1rem; */
  overflow-y: auto;
  /* direction: ltr; */
  scrollbar-color: #ffc107 rgb(247,225,132,0.05)!important;
  scrollbar-width: thin;
  /* transition: scrollbar-color 0.3s ease-out; */
}

.modal-playground .modal-body::-webkit-scrollbar {
  width: 20px;
}

.modal-playground .modal-body::-webkit-scrollbar-track {
  background-color: rgb(247,225,132,0.0);
  border-radius: 100px;
}

.modal-playground .modal-body::-webkit-scrollbar-thumb {
  border-radius: 100px;
  border: 5px solid transparent;
  background-clip: content-box;
  background-color: #ffc107;
}

/* .modal-playground .modal-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--bs-info);
} */

/* .modal-playground .modal-body:hover {
  scrollbar-color: var(--bs-info);
} */
/* ***************************************************************************** */


/*  MODAL MAIN SEARCH BOX  */
.modal-search-box .item-type{
  border-radius: 16px;
  padding: 4px 10px;
  font-size: .7rem;
}

.modal-search-box .item-type.quizz{
  background: rgba(13, 202, 240, 0.5);
  color:rgb(0,35,42);
}

.modal-search-box .item-type.player{
  background: rgba(255,201,60,0.5);
  color:rgb(49,35,0);
}