.indexLeftBubble {
  top:15px;
  left:0;
  position:absolute;
  pointer-events:auto;
  width:330px;
  border-radius:20px;
  border:2px solid var(--grey-contour);
  background-color:var(--white)
}
.indexLeftContainer {
  display:flex;
  flex-direction:column;
  padding:12px;
  gap:14px
}
.indexLogoBannerBox {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column
}
.indexLogo {
  position:relative;
  top:10px;
  left:0px;
  width:283px;
  height:80px;
  background:url(../../assets/img/index/logo_habland2.png) no-repeat;
  background-size:contain
}
.indexLogoBanner {
  width:100%;
  height:24px;
  border-radius:8px;
  background:#ececec
}
.indexWelcomeTitle {
  font-size:22px
}
.indexPlayButton {
  height:60px;
  border-radius:14px;
  background:#0095F6;
  font-size:24px;
  display:flex;
  align-items:center;
  color: #FFF !important;
}
.indexPlayButton:hover {
  opacity:.7;
  cursor:pointer
}
.indexPlayButtonIcon {
  height:73px;
  width:73px;
  margin:0 12px;
  image-rendering:pixelated
}
.indexSeparatorBar {
  width:302px;
  height:1px;
  background:#b4b4b4
}
.indexAccountTitle {
  font-size:19px
}
.indexPseudo {
  height:52px;
  border-radius:14px;
  border:1px solid #cbcbcb;
  display:flex;
  width: 100%;
  align-items: center;
}
.indexPseudoIcon {
  width:34px;
  height:37px;
  padding:8px 15px;
  background-size:contain;
  image-rendering:pixelated
}
.indexPassword {
  height:22px;
  font-size:14px;
  text-decoration-line:underline
}
.indexPassword:hover {
  cursor:pointer;
  opacity:.7
}
.indexPasswordIcon {
  width:34px;
  height:37px;
  padding:8px 15px;
  background-size:contain;
  image-rendering:pixelated
}
.indexInput {
  border:0;
  background:0 0;
  width:98%;
  height:70%;
  border-radius:15px;
  padding:8px;
  font-size:19px;
  font-family:ubuntu x,sans-serif!important;
  color: #000;
}
.indexRight {
    margin-top: 15px;
    background-color: var(--white);
    padding: 10px;
    border: 1px solid var(--grey-contour);
    border-radius: 20px;
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .indexRight {
        display: flex;
    }
}
.indexInformations {
    height: 190px;
    gap: 10px;
    display: none;
}

@media (min-width: 768px) {
    .indexInformations {
        display: flex;
    }
}

.indexInformationsBubble {
    position: relative;
    float: left;
    width: calc(50%);
    height: 185px;
    background: #ececec;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.indexNewsTitle {
    font-size: 22px;
}

.indexNews {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.indexNewsBubble {
    position: relative;
    width: calc(32%);
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.indexNewsBubble img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.indexNewsBubble:hover {
    opacity: 0.7;
    cursor: pointer;
}

.indexNewsBubbleTitle {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 14px;
    padding: 8px;
    text-align: center;
    z-index: 1;
}


.indexNewsBubbleLargeTitle {
    position: absolute;
    width: 85%;
    background-color: #0095f6c7;
    border: 2px solid #0095f6;
    color: white;
    font-size: 16px;
    border-radius: 10px;
    padding: 8px;
    text-align: center;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}


.indexLoginButton {
  font-size:24px;
  height:60px;
  background:#00e07d;
  border-radius:14px;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center
}
.indexLoginButton:hover {
  opacity:.7;
  cursor:pointer
}
.indexInfo {
  margin-top:25px;
  display:flex;
  flex-direction:column;
  gap:55px
}
.indexInfoBubbleLeft {
  width:78%;
  height:142px;
  border-radius:20px;
  opacity:.9;
  margin-left:25px
}
.indexInfoBubbleRight {
  width:78%;
  height:142px;
  border-radius:20px;
  opacity:.9;
  margin-left:auto
}
.indexInfoBubbleOrange {
  background:#ffaf4e
}
.indexInfoBubbleRed {
  background:#ff6b57
}
.indexInfoBubblePurple {
  background:#ca73ff
}
.indexInfoBubbleBlue {
  background:#41b4ff
}
.indexInfoBubbleGreen {
  background:#00db7a
}
.indexInfoBubbleTitleLeft {
  position:absolute;
  margin-top:-12px;
  margin-left:20px;
  padding:8px 12px;
  border-radius:12px;
  font-size:25px;
  color:#fff;
  display:inline-block
}
.indexInfoBubbleTitleRight {
  position:absolute;
  margin-top:-12px;
  right:20px;
  padding:10px 12px;
  border-radius:12px;
  font-size:25px;
  color:#fff
}
.indexInfoBubbleTitleOrange {
  background:#ff9412
}
.indexInfoBubbleTitleRed {
  background:#ff3c21
}
.indexInfoBubbleTitlePurple {
  background:#b439ff
}
.indexInfoBubbleTitleBlue {
  background:#008ae4
}
.indexInfoBubbleTitleGreen {
  background:#00c165
}
.indexInfoBubbleContainer {
  display:flex;
  align-items:center
}
.indexInfoImage {
  margin-top:50px;
  margin-left:20px;
  width:165px;
  height:131px;
  margin-right:20px
}
.indexInfoTextLeft {
  margin-top:-15px;
  margin-right:25px;
  font-size:18px;
  color:#fff
}
.indexInfoTextRight {
  margin-top:-15px;
  margin-left:25px;
  font-size:18px;
  color:#fff
}
.container {
  display:block;
  position:relative;
  padding-left:35px;
  margin-bottom:12px;
  cursor:pointer;
  font-size:19px;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}
.container input {
  background:red;
  height:25px;
  width:25px;
  left:-3px;
  z-index:1;
  top:-2px;
  position:absolute;
  opacity:0;
  cursor:pointer
}
.checkmark {
  position:absolute;
  top:0;
  left:0;
  height:25px;
  width:25px;
  border-radius:8px;
  background-color:#eee
}
.container:hover input~.checkmark {
  background-color:#ccc
}
.container input:checked~.checkmark {
  background-color:#2196f3
}
.checkmark:after {
  content:"";
  position:absolute;
  display:none
}
.container input:checked~.checkmark:after {
  display:block
}
.container .checkmark:after {
  left:9px;
  top:5px;
  width:5px;
  height:10px;
  border:solid #fff;
  border-width:0 3px 3px 0;
  -webkit-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  transform:rotate(45deg)
}
.mobile .indexCenter {
  display:none
}
.mobile .indexLeftBubble {
  width:100%
}
@media(max-height:694px) {
  .indexLeftBubble {
    height:100%;
    overflow:auto
  }
}