@import url('./fonts.css');
@import url(./reset.css);

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

body {
  height: 100vh;
  font-family: Playfair;
  background-image: url('./assets/images/background3.jpg');
  background-position-y: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  color: #3f3e3e;
}

@media screen and (max-width: 425px) {
  body {
    font-size: 0.9rem;
  }
}

.overlay {
  background-color: #5454e946;
  height: inherit;
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo {
  font-size: 2.5em;
  font-weight: 800;
  color: #363636;
  color: white;
  text-shadow: 2px 2px #5454e9;
}

.username-holder {
  /* color: white; */
}

.username-header {
  margin-bottom: 20px;
  color: #3f3e3e;
  color: white;
}

.username-text {
  height: 40px;
  padding: 10px;
  font-family: inherit;
}

.sign-btn {
  height: 40px;
  font-family: inherit;
  padding: 10px;
  border: 1px solid grey;
  cursor: pointer;
}

.sign-btn:hover {
  background-color: #5454e9;
  color: white;
}

.container {
  /* border: 1px solid black; */
  width: 100%;
  height: 100%;
  display: none;
}

.side-bar-container {
  height: 100%;
  border: 1px solid grey;
  width: 20%;
  min-width: 200px;
  background-color: #5454e9;
  color: white;
  /* border: 1px solid black; */
  overflow: hidden;
  font-family: inherit;
}

@media screen and (max-width: 425px) {
  .side-bar-container {
    max-width: 60px;
    min-width: 0;
    transition: min-width 0.3s ease-in-out;
    /* border: 1px solid black; */
  }
}

.show-side-bar {
  min-width: 200px;
  transition: min-width 0.3s ease-in-out;
}

.menu {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 0 10px;
  border-bottom: 1px solid grey;
}

.side-bar {
  /* height: 100; */
  flex-grow: 2;
  /* border: 1px solid black; */
  overflow: auto;
  height: 100%;
}

.menu-item {
  cursor: pointer;
}

@media screen and (min-width: 425px) {
  .menu-item {
    display: none;
  }
}

.menu-item:hover {
  color: #242479;
}

.name-item {
  border-bottom: 1px solid #d3d3d377;
  color: white;
  padding: 10px;
  cursor: pointer;
}

@media screen and (max-width: 425px) {
  .name-item {
    visibility: hidden;
  }
}

.show-name-item {
  visibility: visible;
}

.name-item:hover,
.settings:hover {
  background-color: #8888f5;
}

.user-active,
.user-active:hover {
  background-color: #2323f1;
}

.name-item-active,
.name-item-active:hover {
  background-color: #484849;
}

.name-header {
  /* border: 1px solid black; */
  margin-bottom: 10px;
}

.online {
  /* border: 1px solid black; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.online-status {
  /* border: 1px solid black; */
}

.online-circle {
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background-color: #1ddd57;
  /* border: 1px solid black; */
  margin-right: 5px;
  display: inline-block;
}

.offline {
  background-color: #fc4040;
}

.online-text {
  display: inline-block;
  /* border: 1px solid black; */
  display: inline-block;
}

.new-msg {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background-color: #f34545;
  color: white;
  display: none;
  justify-content: center;
  align-items: center;
}

.show-new-msg {
  display: flex;
}

.msg-holder {
  /* border: 1px solid black; */
  height: 100%;
  flex-grow: 2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.user-info {
  border-bottom: 1px solid #bbbbbb;
  height: 60px;
  color: #3f3e3e;
  color: white;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 10px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.exit-btn {
  height: 30px;
  font-family: inherit;
  padding: 0 10px;
  border: 1px solid grey;
  cursor: pointer;
  border-radius: 5px;
}

.exit-btn > svg {
  height: 15px;
}

.exit-btn:hover {
  background-color: #f53939;
  color: white;
}

.msg-box-holder {
  flex-grow: 2;
  position: relative;
  /* border: 1px solid black; */
}

.msg-box {
  /* border: 1px solid black; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  gap: 20px;
  flex-direction: column;
}

.hide-box {
  display: none;
}

#input-box {
  padding: 10px;
  /* border: 1px solid black; */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

@media screen and (max-width: 425px) {
  #input-box {
    gap: 10px;
  }
}

#msg-text {
  min-height: 40px;
  max-height: 100px;
  flex-grow: 2;
  border-radius: 10px;
  border: 1px solid grey;
  padding: 10px 10px;
  resize: none;
  font: inherit;
  font-size: 0.9em;
  line-height: 25px;
}

@media screen and (max-width: 425px) {
  #msg-text {
    width: 80px;
  }
}

#emit-msg,
#broadcast-msg {
  height: 40px;
  background-color: #5454e9;
  color: white;
  border: 1px solid grey;
  border-radius: 5px;
  cursor: pointer;
  padding: 10px;
  font-family: inherit;
}

#emit-msg:hover,
#broadcast-msg:hover {
  background-color: #9c9cf0;
  color: #3f3e3e;
}

#emit-msg > svg {
  height: 20px;
}

#broadcast-msg {
  display: none;
}

.send-msg,
.receive-msg {
  border: 1px solid grey;
  max-width: 300px;
  min-width: 200px;
  padding: 10px;
  align-self: flex-start;
  border-radius: 10px;
  background-color: #5454e9;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-items: center;
  font-size: 0.8rem;
}

.user-joined {
  text-align: center;
}

.receive-msg {
  /* Move to the right */
  align-self: flex-end;
  background-color: #474747;
}

.show-container {
  display: flex;
}

.hide-sign-in {
  display: none;
}