.header{align-self:flex-start;background-color:#22313f;background-color:var(--color-primary-dark);display:flex;flex-direction:column;height:100%;overflow:hidden;position:fixed;transition:.25s;width:100%;width:auto}.header__burger{cursor:pointer;display:block;margin:.2em .5em;width:3em}.header__burger:hover{border-radius:12px;opacity:.5}.header__burger--closed{position:fixed}.header--closed{width:0}.nav-main{display:flex;height:auto;padding:.75em;width:100%}.nav-main__list{align-items:center;display:flex;flex-direction:column;justify-content:flex-start;list-style:none;padding:1rem;width:100%}.nav-main__list-item{box-shadow:0 2rem 5rem #0000000f;box-shadow:var(--shadow-light);display:flex;margin:.5em;text-align:center;width:100%}.nav-main__list-item a{background-color:#2c3e50;background-color:var(--color-primary);border:2px solid #000;border-radius:12px;color:#faf9f9;color:var(--color-grey-light-1);flex-grow:1;font-size:1em;padding:.5em;text-decoration:none;transition:.25s;white-space:nowrap}.nav-main__list-item a:hover{background-color:#34495e;background-color:var(--color-primary-light);color:#faf9f9;color:var(--color-grey-light-1)}.nav-main__list-item a:first-child{margin-left:0}.nav-main__list-item a:last-child{margin-right:0}button{background-color:#e67e22;background-color:var(--color-tertiary);border:2px solid #f39c12;border:2px solid var(--color-tertiary-light);border-radius:6px;color:#222;color:var(--color-grey-dark-1);cursor:pointer;font-size:1rem;font-weight:500;transition:.25s}button:hover{background-color:#f39c12;background-color:var(--color-tertiary-light);border-color:#e67e22;border-color:var(--color-tertiary);color:#faf9f9;color:var(--color-grey-light-1)}button:disabled{cursor:not-allowed;opacity:.6}input{background-color:#faf9f9;background-color:var(--color-grey-light-1);border:2px solid #48c9b0;border:2px solid var(--color-secondary-light);border-radius:12px;cursor:text;font-size:1rem;font-weight:500;outline:none;transition:.25s}input,input::placeholder,input:focus,input:hover{color:#222;color:var(--color-grey-dark-1)}input:focus,input:hover{background-color:#48c9b0;background-color:var(--color-secondary-light);border-color:#1abc9c;border-color:var(--color-secondary)}input:focus::placeholder,input:hover::placeholder{color:#222;color:var(--color-grey-dark-1)}input:disabled{cursor:not-allowed;opacity:.6}.createRoom{background:#2c3e50;background:var(--color-primary);border-radius:12px;box-shadow:0 2rem 5rem #0000000f;box-shadow:var(--shadow-light);padding:2rem;text-align:center;width:50rem}.createRoom,.createRoom__form{display:flex;flex-direction:column}.createRoom__form{margin:auto;width:100%}.createRoom__input{flex-grow:1}.createRoom__button,.createRoom__input{font-size:2rem;margin:.5rem;padding:2rem}.notification{background-color:#34495e;background-color:var(--color-primary-light);border-radius:6px;color:#faf9f9;color:var(--color-grey-light-1);font-size:2rem;padding:.5rem 1rem}.notification--error{background-color:red}.notification--success{background-color:green}.chat{background-color:#fff;box-shadow:0 2rem 6rem #0000004d;box-shadow:var(--shadow-dark);display:flex;flex-direction:row;flex-grow:1;height:100%;min-height:fit-content;width:100%}.chat__left{background-color:#2c3e50;background-color:var(--color-primary);display:flex;flex-direction:column;width:30%}.chat__left-header{align-items:center;display:flex;flex-direction:row;justify-content:space-between}.chat__connection{margin:0 .5em}.chat__connection--connected{background-color:green;border-radius:100%;padding:.25em}.chat__connection--disconnected{border-radius:100%;color:red;padding:.25em}.chat__search{cursor:default;font-size:.8em;margin:1em 1em 1em 5.5em;opacity:0;padding:.5em .75em .5em .5em}.chat__room-create-button{font-size:.55em;justify-self:center;margin:.5em;padding:.5em;width:max-content}.chat__room-list{display:flex;flex-direction:column;flex-grow:1;overflow-y:scroll}.chat__room{background-color:#2c3e50;background-color:var(--color-primary);box-shadow:0 2rem 5rem #0000000f;box-shadow:var(--shadow-light);display:flex;overflow:hidden;padding:.1em .2em;transition:.25s}.chat__room,.chat__room--active{color:#faf9f9;color:var(--color-grey-light-1)}.chat__room--active{background-color:#22313f;background-color:var(--color-primary-dark)}.chat__room--unread{background-color:#16a085;background-color:var(--color-secondary-dark)}.chat__room--unread,.chat__room:hover{color:#222;color:var(--color-grey-dark-1)}.chat__room:hover{background-color:#1abc9c;background-color:var(--color-secondary);cursor:pointer}.chat__room-preview{display:flex;flex-direction:column;overflow:hidden;width:100%}.chat__room-image{align-self:center;aspect-ratio:1/1;border-radius:100%;box-shadow:0 2rem 5rem #0000000f;box-shadow:var(--shadow-light);height:2.5em;margin-right:.5em;width:2.5em}.chat__room-options{align-self:flex-end;color:var(--color-teritary-dark);font-size:.8em;position:absolute;transform:rotate(180deg)}.chat__room-options:hover{color:#34495e;color:var(--color-primary-light);cursor:pointer}.chat__room-options-checkbox{display:none}.chat__room-options-checkbox:checked+.chat__room-options{color:#2c3e50;color:var(--color-primary);transform:rotate(0deg)}.chat__room-options-checkbox:checked+.chat__room-options:hover{color:#34495e;color:var(--color-primary-light)}.chat__room-options-checkbox:checked+.chat__room-options+.chat__room-options-menu{display:flex}.chat__room-options-menu{align-self:flex-end;display:none;flex-direction:column;justify-content:space-around;margin-right:.75em;position:absolute;transition:all .3 ease}.chat__room-options-menu-item{display:flex;margin-bottom:.2em}.chat__room-options-menu-item button{background-color:#e67e22;background-color:var(--color-tertiary);font-size:.55em;padding:.25em}.chat__room-preview-name{font-size:.7em;font-weight:600;white-space:nowrap}.chat__room-preview-text{font-size:.55em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat__room-preview-text--me,.chat__room-preview-text--other{font-weight:600;margin-right:.25em}.chat__room-preview-date{align-self:flex-end;font-size:.45em;white-space:nowrap}.chat__main{background-color:#222;background-color:var(--color-grey-dark-1);display:flex;flex-direction:column;flex-grow:1}.chat__main-header{align-items:center;background-color:#2c3e50;background-color:var(--color-primary);display:flex;flex-direction:row;padding:.5em}.chat__main-header-image{border-radius:100%;height:3em;width:3em}.chat__main-header-image:hover{border-radius:100%;box-shadow:0 2rem 6rem #0000004d;box-shadow:var(--shadow-dark);cursor:pointer}.chat__main-header-info{color:#faf9f9;color:var(--color-grey-light-1);display:flex;flex-direction:column;justify-content:center;line-height:1.5;margin-left:.5em}.chat__main-header-info-name{font-size:.85em}.chat__main-header-info-user{display:flex;flex-direction:row;font-size:.6em}.chat__main-header-info-user--me,.chat__main-header-info-user--other{align-items:center;display:flex;flex-direction:row}.chat__main-header-info-user--me{color:#1abc9c;color:var(--color-secondary);margin-right:.5em}.chat__main-header-info-user--other{color:#e67e22;color:var(--color-tertiary);margin-right:.5em}.chat__main-header-info-user--online{background-color:green;border-radius:100%;height:.65em;margin-right:.25em;width:.65em}.chat__main-header-info-user--offline{background-color:red;border-radius:100%;height:.65em;margin-right:.25em;width:.65em}.chat__main-body,.chat__main-body-ref{background-color:#22313f;background-color:var(--color-primary-dark);display:flex;flex-direction:column;flex-grow:1;overflow-y:scroll}.chat__main-body-message{box-shadow:0 2rem 5rem #0000000f;box-shadow:var(--shadow-light);display:flex;flex-direction:column;font-size:.5em;margin:.25em .5em;max-width:80%;padding:.5em .75em;text-align:justify;transition:.5s;white-space:pre-wrap}.chat__main-body-message--me{align-self:self-end;background-color:#48c9b0;background-color:var(--color-secondary-light);border-bottom-right-radius:9px;border-top-left-radius:9px;color:#222;color:var(--color-grey-dark-1)}.chat__main-body-message--other{align-self:self-start;background-color:#f39c12;background-color:var(--color-tertiary-light);border-bottom-left-radius:9px;border-top-right-radius:9px;color:#222;color:var(--color-grey-dark-1)}.chat__main-body-message--read{border-radius:21px;box-shadow:0 2rem 5rem #0000000f;box-shadow:var(--shadow-light)}.chat__main-body-message--writing{animation-duration:3s;animation-iteration-count:infinite;animation-name:writing;border-radius:100%;box-shadow:0 2rem 5rem #0000000f;box-shadow:var(--shadow-light)}@keyframes writing{0%{background-color:#e67e22;background-color:var(--color-tertiary);margin-left:1em;padding:1em}50%{background-color:#1abc9c;background-color:var(--color-secondary);padding:1em}to{background-color:#e67e22;background-color:var(--color-tertiary);margin-left:1em;padding:1em}}.chat__main-body-message-username{border-radius:9px;font-size:1.1em;font-weight:600;width:max-content}.chat__main-body-message-username--me,.chat__main-body-message-username--other{align-self:flex-start}.chat__main-body-message-datetime{align-self:flex-end;border-radius:9px;font-size:.85em;padding:.25em .75em;text-align:center;white-space:nowrap;width:max-content}.chat__main-body-scrolldown{align-self:center;bottom:5em;color:#faf9f9;color:var(--color-grey-light-1);font-size:.75em;position:fixed;text-align:center}.chat__main-footer{align-items:center;background-color:#2c3e50;background-color:var(--color-primary);display:flex;flex-direction:row;justify-content:center;padding:.5em}.chat__main-footer form{align-items:center;display:flex;flex-grow:1}.chat__main-footer-button{border-radius:100%;box-shadow:0 2rem 5rem #0000000f;box-shadow:var(--shadow-light);font-size:.6em;height:fit-content;padding:.5em;transition:.25s}.chat__main-footer-button--hidden{display:none}.chat__main-footer-textarea{border-radius:9px;box-shadow:0 2rem 5rem #0000000f;box-shadow:var(--shadow-light);color:#222;color:var(--color-grey-dark-1);flex-grow:1;font-size:.7em;height:100%;margin:0 .5em;outline:none;padding:.5em;resize:vertical}.chat__main-footer-textarea:focus,.chat__main-footer-textarea:hover{box-shadow:0 2rem 6rem #0000004d;box-shadow:var(--shadow-dark);outline:none}.settings{background-color:#222;background-color:var(--color-grey-dark-1);display:flex;flex-direction:row;justify-content:center;min-height:100%;padding:3em;width:100%}.settings__menu{background-color:#2c3e50;background-color:var(--color-primary);border:1px solid #faf9f9;border:1px solid var(--color-grey-light-1);border-right:none;display:flex;flex-direction:column}.settings__menu-item{border-bottom:1px solid #faf9f9;border-bottom:1px solid var(--color-grey-light-1);border-top:1px solid #faf9f9;border-top:1px solid var(--color-grey-light-1);color:#faf9f9;color:var(--color-grey-light-1);cursor:pointer;font-size:1em;padding:.25em}.settings__menu-item:first-child{border-top:0}.settings__menu-item:hover{background-color:#34495e;background-color:var(--color-primary-light)}.settings__content{background-color:#2c3e50;background-color:var(--color-primary);border:1px solid #faf9f9;border:1px solid var(--color-grey-light-1);color:#faf9f9;color:var(--color-grey-light-1);flex:1 1;font-size:.75em;padding:.5em}.settings__content--hidden{display:none}.login{align-items:center;background-color:#2c3e50;background-color:var(--color-primary);display:flex;flex-direction:column;justify-content:center;min-height:100%;width:100%}.login a{color:#1abc9c;color:var(--color-secondary);display:none;font-size:2rem;margin:.25rem 1.75rem;padding:1rem;text-align:center;text-decoration:none}.login a:hover{color:#48c9b0;color:var(--color-secondary-light)}.login__form{background-color:#22313f;background-color:var(--color-primary-dark);border-radius:12px;display:flex;flex-direction:column;margin:1rem}.login__form-input{font-size:2.25rem;margin:.75rem 2rem;padding:1.25rem}.login__form-input:first-child{margin-top:2rem}.login__form-button{cursor:pointer;font-size:2.25rem;margin:.75rem 2rem 2rem;padding:1.25rem}.register{align-items:center;background-color:#2c3e50;background-color:var(--color-primary);display:flex;flex-direction:column;justify-content:center;min-height:100%;width:100%}.register a{color:#1abc9c;color:var(--color-secondary);display:none;font-size:2rem;margin:.25rem 1.75rem;padding:1rem;text-align:center;text-decoration:none}.register a:hover{color:#48c9b0;color:var(--color-secondary-light)}.register__form{background-color:#22313f;background-color:var(--color-primary-dark);border-radius:12px;display:flex;flex-direction:column;margin:1rem}.register__form-input{background-color:#faf9f9;background-color:var(--color-grey-light-1);border:none;border-radius:12px;color:#222;color:var(--color-grey-dark-1);font-size:2.25rem;margin:.75rem 2rem;outline:none;padding:1.25rem}.register__form-input:first-child{margin-top:2rem}.register__form-button{border:none;border-radius:12px;cursor:pointer;font-size:2.25rem;margin:.75rem 2rem 2rem;padding:1.25rem}.logout{align-items:center;background-color:#2c3e50;background-color:var(--color-primary);display:flex;justify-content:center;min-height:100%;width:100%}.logout__button{font-size:2rem;padding:1rem}:root{--color-primary:#2c3e50;--color-primary-light:#34495e;--color-primary-dark:#22313f;--color-secondary:#1abc9c;--color-secondary-light:#48c9b0;--color-secondary-dark:#16a085;--color-tertiary:#e67e22;--color-tertiary-light:#f39c12;--color-tertiary-dark:#d35400;--color-grey-light-1:#faf9f9;--color-grey-light-2:#f4f2f2;--color-grey-light-3:#f0eeee;--color-grey-light-4:#ccc;--color-grey-dark-1:#222;--color-grey-dark-2:#4f4f4f;--color-grey-dark-3:#868686;--shadow-dark:0 2rem 6rem #0000004d;--shadow-light:0 2rem 5rem #0000000f;--line:1px solid var(--color-grey-light-2);--bp-largest:75em;--bp-large:62.5em;--bp-medium:50em;--bp-small:37.5em}*,:after,:before{box-sizing:inherit;margin:0;padding:0}html{font-size:62.5%}body{box-sizing:border-box;color:#222;color:var(--color-grey-dark-1);font-family:Arial,Helvetica,sans-serif;font-size:calc(1rem + 2vmin);font-weight:400;line-height:1.7;min-height:100vh}#root{justify-content:center}#root,.App{align-items:center;display:flex}.App{flex-direction:column;height:100vh;justify-content:flex-start;width:100%}.dp-none{display:none!important}.hidden{cursor:default!important;opacity:0!important}.overlay{align-items:center;background:#000000b3;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}
/*# sourceMappingURL=main.972b0493.css.map*/