canvas {
    width: 100% !important;
    height: 100% !important;
    image-rendering: auto;
}

:root{
    --bg: #6090be;
}

@font-face {
    font-family: chimboheavy;
    src: url(../chimboheavy.ttf) format("truetype");
}

@font-face {
    font-family: jaggersf;
    src: url(../jaggersf.ttf) format("truetype");
}

@keyframes wakup {
  0% {transform:  translateX(0) translateY(0);}
  10% {transform:  translateX(4px) translateY(2px);}
  20% {transform:  translateX(-3px) translateY(-1px);}
  30% { transform:  translateX(5px) translateY(-3px);}
  40% { transform:  translateX(-4px) translateY(4px); }
  50% { transform:  translateX(3px) translateY(-2px); }
  60% { transform:  translateX(-2px) translateY(1px); }
  70% {transform:  translateX(4px) translateY(-4px);}
  80% {transform:  translateX(-5px) translateY(3px);}
  90% {transform:  translateX(2px) translateY(2px);}
  100% { transform: translateX(0) translateY(0); }
}

.wakup{
  animation: wakup 0.3s infinite;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul{ list-style-type: none; }
img{ vertical-align: middle;}

html, body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Arial;
}

body{
    background-color: var(--bg);
    display: flex;
    justify-content: center;
    align-items: center;
}

input, button{
    border: none;
    outline: none;
    background: transparent;
    user-select: none;
}

input{
    background-color: #FFFFFF;
    border-radius: 6px;
    box-shadow: inset 1px 1px 1px 1px #3a5d7d, inset -1px -1px 1px 1px #88b4e8;
    font-weight: bold;
    font-size: 9pt;
    color: #3a5d7d;
    line-height: 22px;
    padding: 0 10px;
    width: 100%;
    height: 18px;
}

.chimboland{
    width: 900px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.banners{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.client{
    width: 900px;
    height: 550px;
    position: relative;
}

.textStroke{
    color: white;
    font-size: 16pt;
    -webkit-text-stroke: 8px #2a5380;
    paint-order: stroke fill;
}

span.textStroke,
h2.textStroke{
    font-size: 30px;
    letter-spacing: -2px;
    font-family: chimboheavy;
}

.view {
    width: 887px;
    height: 477px;
    position: relative;
    display: none;
}

.view.active {
    display: block;
}

[data-view="dispatcher"].active,
[data-view="loader"].active{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #6699CC;
    margin: 0 auto;
}

[data-view="register"].active,
[data-view="profile"].active,
[data-view="login"].active{
    background: url(/img/background.png) center center no-repeat;
    background-size: cover;
    border-radius: 4px;
    box-shadow: inset 1px 1px 1px 1px #3a5d7d, inset -1px -1px 1px 1px #88b4e8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;   
    margin: 0 auto;
}

[data-view="chat"].active{
    display: flex;
    gap: 4px;
}

.chatsize{
    width: 900px;
    height: 550px;
}

.toolbar{
    width: 100%;
    display: none;
    justify-content: space-between;
    align-items: end;
    height: 31px;
    font-family: chimboheavy;
    background: linear-gradient(to bottom, #6699cc 0%, #6699cc 10%, #6597CA 30%, #4A78A8 100%);
    position: relative;
    padding: 0 10px 0 10px;
    margin-bottom: 4px;
}

.toolbar.volumeonly{
    position: absolute;
    z-index: 2;
    display: flex;
    background: none;
    align-items: start;
}

.toolbar:not(.volumeonly)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #92A0CB, #274158);
}

.toolbar .roomTitle{
    color: #fff;
    line-height: 1.2;
    width: 289px;
}

.toolbar .buttons{
    display: flex;
    gap: 2px;
}

.toolbar .buttons button{
    width: 104px;
    height: 20px;
    background-color: #517AA3;
    font-family: inherit;
    border-radius: 6px 6px 0 0;
    color: #fff;
    font-size: 20px;
    box-shadow:
        inset 0 1px 0 #B7C9FE,
        inset 1px 0 0 #B7C9FE, 
        inset -1px 0 0 #274158;
}

.toolbar .buttons button:hover:not(.active),
.toolbar .buttons button.active{ 
    background-color: #6699CC;
    position: relative;
}

.toolbar .buttons button.active{
    z-index: 999;
    cursor: default;
}

.toolbar .buttons > button:nth-child(-n+2) {
    cursor: pointer;
}

.toolbar .volume{
    background-color: #6699CC;
    width: 95px;
    height: 23px;
    border-radius: 0 0 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.toolbar .volume button{
    width: 16px;
    height: 16px;
    background-color: #4B79AA;
    border-radius: 100%;
    cursor: pointer;
    font-family: inherit;
    font-size: 18px;
    color: #FF3399;
}

.toolbar .volume button:hover{
    background-color: #003366;
}

.toolbar .volume .vol_width{ width: 51px; }

.bubbleloader{
    width: 113px;
    height: 104px;
    background-color: #2A5380;
    position: absolute;
}

.bubbleloader .bubble{
    background: url(/img/bubbleloader.png) 0 0 no-repeat;
    width: 115px;
    height: 105px;
    position: absolute;
    z-index: 2;
    inset: -1px;
}

.bubbleloader .white{
    width: 98px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    z-index: 1;
}

.bubbleloader .bubble .percent{
    height: 86px;
    text-align: center;
    line-height: 86px;
    font-size: 18px;
    font-weight: bold;
    color: #ff3399;
}

.bubblepercent{
    display: flex;
    flex-direction: column;
    align-items: start;
    position: absolute;
    z-index: 2;
    top: 262px;
    left: 308px;
}

.bubblepercent > div:first-child{
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.bubblepercent > div:last-child{
    display: flex;
    align-items: center;
    gap: 4px;
}

.bubblepercent > div:last-child > div:last-child{
    font-size: 10px;
    color: #fff;
}

.bubblepercent .linepercent{
    width: 150px;
    height: 6px;
    border: 1px solid #fff;
    overflow: hidden;
}

.bubblepercent .linepercent .percent{
    width: 0%;
    height: 5px;
    background-color: #FF3399;
}

/* LOGIN */
@keyframes chimbolandarc {
    from{ background-position-y: 0;}
    to{ background-position-y: -976px; }
}

.chimbolandarc{
    background: url(/img/chimbolandarc.png) 0 0 no-repeat;
    width: 433px;
    height: 244px;
    animation: chimbolandarc .2s steps(4) infinite;
}

.chimbolandarc .avatar{
    top: 52px;
    left: 152px;
}

[data-view="login"] .buttons{
    display: flex;
    flex-direction: column;
    font-family: chimboheavy;
    gap: 8px;
}

[data-view="login"] .buttons button{
    font-family: inherit;
    cursor: pointer;
}

[data-view="login"] .buttons button:hover{
        -webkit-text-stroke: 8px #FF3399;
}

.loginform{
    width: 368px;
    height: 69px;
    border-radius: 10px;
    background-color: #2A5380;
    font-family: chimboheavy;
    color: #fff;
    font-size: 20px;
    padding: 6px;
}

.loginform > div:nth-child(2){
    height: 20px;
    display: flex;
    gap: 8px;
}

.loginform label:first-child{ width: 150px;display: inline-block;}
.loginform input{ width: 150px; }

@keyframes loginvalidation {
    from{ background-position-x: 0;}
    to{ background-position-x: -378px; }
}

button#loginvalidation{
    width: 42px;
    height: 35px;
    background: url(/img/loginsend.png) -378px 0 no-repeat;
    cursor: pointer;
    position: relative;
    top: -10px;
}

button#loginvalidation:hover{
    animation: loginvalidation .3s steps(9);
}

.rememberusername,
.loginform .publicomputer{
    color: #c9dfef;
    font-size: 11pt;
    font-family: chimboheavy;
    display: flex;
    align-items: center;
    gap: 4px;
}

.rememberusername .checked,
.rememberusername .unchecked,
.loginform .publicomputer .checked,
.loginform .publicomputer .unchecked{
    background: url(/img/publicomputer.png) -2px -24px no-repeat;
    width: 19px;
    height: 20px;
    cursor: pointer;
}

.rememberusername .checked,
.loginform .publicomputer .checked{
    background-position: -2px -2px;
}

.rememberusername span:last-child,
.loginform .publicomputer span:last-child{ position: relative; top: 1px;}

/* END LOGIN */

/* ALERT */ 
@keyframes alert {
    from{background-position: 0 0;}
    to{background-position: 0 -520px;}
}

.alert{
    width: 363px;
    height: 104px;
    background: url(/img/alert.png) 0 -520px no-repeat;
    animation: alert .3s steps(5, end);
    position: absolute;
    left: 50%;
    top: 36%;
    transform: translate(-50%, -50%);
    z-index: 999;
    font-size: 9pt;
    display: none;
    padding: 12px;
    color: #fff;
}

.alert.ingame{ left: 38%;}

.alert span{
    background: url(/img/alerticon.png) 0 0 no-repeat;
    width: 46px;
    height: 35px;
    display: inline-block;
}

button.ok,
.alert button.ok{
    background: url(/img/ok.png) 0 0 no-repeat;
    width: 25px;
    height: 24px;
    cursor: pointer;
}

button.ok:hover,
.alert button.ok:hover{ background-position-x: -25px; }
button.ok:active,
.alert button.ok:active{ background-position-x: -50px; }
.alert button#closealert{ position: absolute; bottom: 8px; right: 8px; }

/* END ALERT */

.loading{
    padding: 6px 12px;
    display: none;
}

.hideform{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* REGISTER */
[data-view="register"] p{
    color:#fff;
    width:644px;
    font-family: Verdana;
    font-size: 9pt;
}

.registerform{
    width: 644px;
    height: 218px;
    background: url(/img/registerform.png) 0 0 no-repeat;
    font-family: 'chimboheavy';
    color: #fff;
    font-size: 18px;
}

.registerform .hideform{
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: 225px;
}

.registerform .hideform > div{
    position: relative;
    top: -5px;
}

.registerform .hideform > div:not(:first-child){ top: -10px;}
.registerform .hideform > div:nth-of-type(-n+2) input {width: 80%;}
.registerform .hideform > div:last-child{display: flex;justify-content: end;}

.saveprofile,
.backtologin{
    display: none;
    justify-content: end;
    padding: 2px 4px 0px 0px;
}

.saveprofile{padding: 2px 6px 0px 0px;}

button#save,
button#backtologin{
    width: 104px;
    height: 42px;
    background: url(/img/back.png) 0 0 no-repeat;
    cursor: pointer;
}

button#saveprofile{
    width: 96px;
    height: 42px;
    background: url(/img/suite.png) 0 0 no-repeat;
    cursor: pointer;
}

button#save{ background: url(/img/save.png) 0 0 no-repeat; }

button#saveprofile:hover,
button#save:hover,
button#backtologin:hover{ background-position-y: -42px; }
/* END REGISTER */

/* PROFILE */ 
[data-view="profile"].active{
    padding: 10px;
    gap: unset;
    justify-content: start;
}

[data-view="profile"] > div{
    display: flex;
    gap: 20px;
}

[data-view="profile"] > div > div:first-child{
    display: flex;
    flex-direction: column;
    gap: 48px;
}

[data-view="profile"] > div > div:last-child{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[data-view="profile"] .hideform:first-of-type{
    flex-direction: row;
    font-family: 'chimboheavy';
    color: #fff;
    font-size: 18px;
}

[data-view="profile"] .hideform:first-of-type input{ text-align: center; }

.profileavatar{
    position: relative;
    background-image: url(/img/profileavatar.png);
    background-repeat: no-repeat;
    width: 178px;
    height: 281px;
}

button.hidden{ visibility: hidden; pointer-events: none;}
button.un{ position:absolute;z-index: 999; cursor: pointer;}

button.un.smallprev{
    background: url(/img/smallprev.png) 0 0 no-repeat;
    width: 25px;
    height: 24px;
}

button.un.prev{
    background: url(/img/prev.png) 0 0 no-repeat;
    width: 24px;
    height: 24px;
}

button.un.next{
    background: url(/img/next.png) 0 0 no-repeat;
    width: 24px;
    height: 24px;
}

button.un.smallnext{
    background: url(/img/smallnext.png) 0 0 no-repeat;
    width: 25px;
    height: 24px;
}

button.un.random{
    top: 252px;
    left: 73.5px;
    background: url(/img/random.png) 0 0 no-repeat; width:31px;height:25px;
}

button.un.random:hover{background-position-x: -31px;}
button.prev:hover{background-position-x: -24px;}
button.next:hover,
button.smallprev:hover,
button.smallnext:hover{ background-position-x: -25px;}

button.un.smallprev[data-slot="0"] { left: 58px; top: 10px; }
button.un.smallprev[data-slot="1"] { left: 38px; top: 26px; }
button.un.smallprev[data-slot="2"] { left: 28px; top: 46px; }

button.un.prev[data-slot="0"] { left: 4px; top: 70px; }
button.un.prev[data-slot="1"] { left: 4px; top: 113px; }
button.un.prev[data-slot="2"] { left: 4px; top: 156px; }

button.un.smallnext[data-slot="0"] { left: 95px; top: 10px; }
button.un.smallnext[data-slot="1"] { left: 114px; top: 26px; }
button.un.smallnext[data-slot="2"] { left: 124px; top: 46px; }

button.un.next[data-slot="0"] { left: 148px; top: 70px; }
button.un.next[data-slot="1"] { left: 148px; top: 113px; }
button.un.next[data-slot="2"] { left: 148px; top: 156px; }

@keyframes backgroundlight {
    from{background-position-x: 0;}
    to{background-position-x: -1010px;}
}

.profileavatar .backgroundlight{
    background: url(/img/profileavatarlight.png) 0 0 no-repeat;
    width: 101px;
    height: 113px;
    animation: backgroundlight .3s steps(10) infinite;
    position: absolute;
    top: 66px;
    left: 38px;
}

@keyframes backgroundsocle {
    from{background-position-x: 0;}
    to{background-position-x: -505px;}
}

.profileavatar .backgroundsocle{
    background: url(/img/profileavatarsocle.png) 0 0 no-repeat;
    width: 101px;
    height: 35px;
    animation: backgroundsocle .3s steps(5) infinite;
    position: absolute;
    left: 38px;
    top: 162px;
    z-index: 1;
}

.profileavatar .avatar{
    left: 26px;
    top: 75px;
    z-index: 3;
}

.profilepresence{
    width: 180px;
    height: 85px;
    border-radius: 6px;
    background-color: #6699CC;
    padding: 4px;
}

.profilepresence p{
    text-align: center;
    font-family: Verdana;
    color:#fff;
    font-size: 9pt;
}

.profilepresence p span{ font-weight: bold;}

button#profilepanpublic,
button#profilepanprivate{
    width: 156px;
    height: 23px;
    background-color: #6699CC;
    border-radius: 18px 20px 0 0;
    font-family: chimboheavy;
    -webkit-text-stroke: 4px #2a5380;
    cursor: pointer;
}

button#profilepanprivate{
    background-color: #2a5380;
    position: absolute;
    left: 160px;
    z-index: 4;
}

button#profilepanpublic{
    position: absolute;
    z-index: 4;
}

.profilepanprivate,
.profilepanpublic{
    width: 564px;
    height: 251px;
    z-index: 1;
}

.profilepanpublic{ 
    background: url(/img/profilepublic.png) 0 0 no-repeat;
    font-family: 'chimboheavy';
    color: #fff;
    font-size: 20px;
    display: flex;
}
.profilepanprivate{ background: url(/img/profileprivate.png) 0 0 no-repeat;padding: 40px 14px;}

.profilepanpublic.active,
.profilepanprivate.active{ z-index: 2;}

[data-view="profile"] > div > div:last-child > div:nth-child(2) > div{
    position: absolute;
}

[data-view="profile"] > div > div:last-child > div:nth-child(2){
    position: relative;
    height: 251px;
}

.profilepanranksocial{ position: relative;}
.profilepanranksocial > button{
    width: 176px;
    height: 18px;
    background-color: #376DA8;
    border-radius: 12px 12px 0 0;
    font-family: chimboheavy;
    -webkit-text-stroke: 4px #2a5380;
    cursor: pointer;
    position: relative;
    font-size: 18px;
    box-shadow:
        inset 0 1px 0 #B7C9FE,
        inset 1px 0 0 #B7C9FE, 
        inset -1px 0 0 #274158;
}

.profilepanranksocial > button.active{ top: 1px; }

.profilepanranksocial button#profilepansocial{
    background-color: #2A5380;
}

.profilepanranksocial .profilepansocial,
.profilepanranksocial .profilepanranks{
    width: 569px;
    height: 85px;
    padding: 8px;
    background-color: #376DA8;
    border-radius: 0 6px 6px 6px;
    display: flex;
    justify-content: center;
    gap: 10px;
    box-shadow:
        inset 0 1px 0 #B7C9FE,
        inset 1px 0 0 #B7C9FE, 
        inset -1px 0 0 #274158;
}

.profilepanranksocial .profilepansocial{
    background-color: #2A5380;
    border-radius: 6px;
}

.profilepanranksocial select{ width: 100%; outline: none;}

.profilepanranksocial .ranktypes{ width: 156px; }
.profilepanranksocial .ranktypes p{     
    width: 156px;
    font-size: 12px;
    color: #fff;
    font-family: Verdana;
    padding: 4px;
}

.profilepanranksocial .rankdetails{
    width: 389px;
    height: 71px;
    background-color: #6699CC;
    border-radius: 6px;
    padding: 6px;
    display: flex;
}

.rankdetails > div:last-child{
    font-family: Verdana;
    font-size: 10px;
    color: #C9DFEF;
    padding: 6px 10px;
}

.profilepanpublic > div:first-child{
    padding: 25px 10px;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profilepanpublic > div:last-child{
    padding: 8px 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 4px;
}

.profilemoods{
    position: relative;
    display: flex;
    align-items: center;
}

.chatmoods button.nextlist,
.chatmoods button.prevlist,
.profilemoods button.nextlist,
.profilemoods button.prevlist{
    background: url(/img/buttons/little_arrow.png) 0 0 no-repeat;
    width: 10px;
    height: 10px;
    cursor: pointer;
    transform: scaleX(-1);
}

.chatmoods button.nextlist,
.profilemoods button.nextlist{ transform: scaleX(1);}

.chatmoods button.nextlist:hover,
.chatmoods button.prevlist:hover,
.profilemoods button.nextlist:hover,
.profilemoods button.prevlist:hover{ background-position-x: -10px; }

.chatmoodlist2, .chatmoodlist1,
.profilemoods .profilemoodlist2,
.profilemoods .profilemoodlist1{
    width: 274px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.chatmoodlist1, .chatmoodlist2{ width: 100%; }

.chatmoodlist2,
.profilemoods .profilemoodlist2{ display: none; }

.chatmoodlist2 span,
.profilemoods span{
    display: block;
    width: 25px;
    height: 25px;
    background-color: #3D79B6;
    border-radius: 100%;
}

button.mood{
    width: 25px;
    height: 25px;
    cursor: pointer;
}

button.mood.mood_1{ background: url(/img/buttons/mood_1.png);}
button.mood.mood_2{ background: url(/img/buttons/mood_2.png);}
button.mood.mood_3{ background: url(/img/buttons/mood_3.png);}
button.mood.mood_4{ background: url(/img/buttons/mood_4.png);}
button.mood.mood_5{ background: url(/img/buttons/mood_5.png);}
button.mood.mood_6{ background: url(/img/buttons/mood_6.png);}
button.mood.mood_7{ background: url(/img/buttons/mood_7.png);}
button.mood.mood_8{ background: url(/img/buttons/mood_8.png);}
button.mood.mood_9{ background: url(/img/buttons/mood_9.png);}
button.mood.mood_10{ background: url(/img/buttons/mood_10.png);}
button.mood.mood_11{ background: url(/img/buttons/mood_11.png);}
button.mood.mood_12{ background: url(/img/buttons/mood_12.png);}
button.mood.mood_13{ background: url(/img/buttons/mood_13.png);}
button.mood.mood_14{ background: url(/img/buttons/mood_14.png);}
button.mood.mood_15{ background: url(/img/buttons/mood_15.png);}
button.mood.mood_16{ background: url(/img/buttons/mood_16.png);}
button.mood.mood_17{ background: url(/img/buttons/mood_17.png);}
button.mood.mood_18{ background: url(/img/buttons/mood_18.png);}
button.mood.mood_19{ background: url(/img/buttons/mood_19.png);}
button.mood.mood_20{ background: url(/img/buttons/mood_20.png);}
button.mood.mood_21{ background: url(/img/buttons/mood_21.png);}
button.mood.mood_22{ background: url(/img/buttons/mood_22.png);}
button.mood.mood_23{ background: url(/img/buttons/mood_23.png);}
button.mood.mood_24{ background: url(/img/buttons/mood_24.png);}
button.mood.mood_25{ background: url(/img/buttons/mood_25.png);}

button.mood:hover{ background-position-x: -25px; }
button.mood:active, button.mood.selected{ background-position: -50px 1px; }

.profilegenders{
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
}

button.gender{
    width: 25px;
    height: 25px;
    cursor: pointer;
}

button.gender.inconnu,
button.gender.chimbo{ width: 24px; }

button.gender.chimbo{ background: url(/img/buttons/gender_chimbo.png) 0 0 no-repeat; }
button.gender.chimbette{ background: url(/img/buttons/gender_chimbette.png) 0 0 no-repeat;}
button.gender.inconnu{ background: url(/img/buttons/gender_inconnu.png) 0 0 no-repeat;}


button.gender.chimbette:hover{ background-position-x: -25px; }
button.gender.chimbette.selected,
button.gender.chimbette:active{ background-position-x: -50px; }

button.gender.inconnu:hover,
button.gender.chimbo:hover{ background-position-x: -24px;}

button.gender.inconnu:active,
button.gender.inconnu.selected,
button.gender.chimbo:active,
button.gender.chimbo.selected{ background-position-x: -48px;}

/* END PROFILE */

/* CHAT */

[data-view="chat"] .chat{
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    width: 604px;
    height: 449px;
    flex-shrink: 0;
    background-color: #204063;
}

[data-view="chat"] .chat:after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 4px;
    box-shadow: inset 1px 1px 1px 1px #3a5d7d, inset -1px -1px 1px 1px #88b4e8;
    pointer-events: none;
    z-index: 2;
}

.sidebar{
    width: 100%;
    height: 515px;
    background-color: #5282B3;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10px;
    overflow-y: hidden;
    gap: 10px;
    position: relative;
    border-radius: 6px;
    z-index: 0;
}

.sidebar::after,
.sidebar::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 6px;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
    pointer-events: none;
    z-index: 1;
}

.sidebar::after{ top: unset; bottom: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);}

.sidebar .module{
    position: relative;
    width: 100%;
}

.sidebar .module .header{
    width: 100%;
    height: 20px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(to bottom, #81ACD8, #5282B3);
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 4px;
    font-family: 'chimboheavy';
    color: #fff;
}

.sidebar .module .container{
    min-height: 182px;
    width: 100%;
    border-radius: 0 0 4px 4px;
    background-color: #C9DFEF;
    position: relative;
}

.sidebar .module .separator{
    height: 4px;
    border-radius: 10px;
    width: 80%;
    border: 1px solid #6699CC;
    border-bottom-color: #2E5E8B;
    margin: 0 auto;
}

.sidebar .module.ignore .container{
    height: 33px;
    min-height: auto;
}

.sidebar .module .controls{
    position: absolute;
    z-index: 1;
    right: 0;
}

.sidebar .module .buttons{
    width: 25px;
    height: 33px;
    background: url(/img/moduletopright.png) 0 0 no-repeat;
}

.sidebar .module .buttons button{
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background-color: #336AA6;
    cursor: pointer;
    font-weight: bold;
    font-family: cursive;
    color: #fff;
    font-size: 12px;
}

.sidebar .module .buttons button:hover{ background-color: #6699CC;}
/* END CHAT */

.chatmoods{
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chatmoods > div:first-child{
    display: flex;
    gap: 2px;
    align-items: center;
}

.chatmoods > div:first-child input{ height: 24px; }
.chatmoods > div:first-child button{ flex-shrink: 0; }

[data-view="chat"] > div:first-child{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chatmoods > div:last-child{
    display: flex;
    width: 398px;
    box-shadow: inset 0 3px 3px -2px rgb(0 0 0);
    border-radius: 4px;
    align-items: center;
}