/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

:root {
  --backgroud: #000; /*#343541;*/
  --content-background: #222;
  --content-text: #eee;
  --heading-background: #444;
  --selected-background: #222c;
  --help-background: #888;
  --help-text: #000;
  

  --primary-backgroud-inversed-color: #FFFFFF;
  --primary-text-inversed-color: #343541;

  

  --second-text-color: #eee;

  --sidebar-backgroud-color: #f1f1f1;
  --sidebar-text-color:#606060;
  --sidebar-backgroud-inverted-color: #393939;
  --sidebar-text-inverted-color: #ffffff ;
  /*--text-color: #FFFFFF;
  --icon-color: #ACACBE;
  --icon-hover-bg: #5b5e71;
  --placeholder-color: #dcdcdc;
  --outgoing-chat-bg: #343541;
  --incoming-chat-bg: #444654;
  --outgoing-chat-border: #343541;
  --incoming-chat-border: #444654;
  */
  --card-border-radius: 0px;
  --card-background-color: #FFFFFF;
  --card-text-color: #343541;
  --card-shadow-color: #111111;
}
.light-mode {
  --backgroud:#eee;
  --content-text: #000;
  --content-background: #fff;
  --heading-background: #ddd;
  --heading-text: #3e3e3e;
  --selected-background: #fffc;
  --help-background: #aaa;
  --help-text: #fff;

  --primary-backgroud-inversed-color: #343541;
  --primary-text-inversed-color: #FFFFFF;

  
  --second-text-color:#000;

  --sidebar-backgroud-color: #393939;
  --sidebar-text-color:#ffffff;
  --sidebar-backgroud-inverted-color:#ffffff;
  --sidebar-text-inverted-color:#393939;
  /*--text-color: #343541;
  --icon-color: #a9a9bc;
  --icon-hover-bg: #f1f1f3;
  --placeholder-color: #6c6c6c;
  --outgoing-chat-bg: #FFFFFF;
  --incoming-chat-bg: #F7F7F8;
  --outgoing-chat-border: #FFFFFF;
  --incoming-chat-border: #D9D9E3;
  */
  --card-border-radius:  0px;
  --card-background-color: #ffffff;
  --card-text-color: #343541;
  --card-shadow-color: #aaaaaa;

  --text-primary: #754FFE;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background: var(--backgroud);
  color: var(--content-text);
}

.hide {
    display:none;
}


div.content {
  margin-left: 50px;
  padding: 50px;
  height: calc(100vh - 56px);
}

@media screen and (max-width: 600px) {
  div.content {
    margin-left: 0;
    padding: 20px;
  }
}

/* flexible layout of card*/
.container-row {
  padding: 0px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.container-row > div {
  background: var(--content-background);
  margin: 10px;
  color: var(--content-text);
}

@media screen and (max-width: 600px) {
  .container-row > div {
    margin: 0px;
    margin-top: 20px;
  }
}

/* vertical alignment */

.vertical-align {
  width: 100%;
position: relative;
flex-direction: row;
align-items: flex-start;
display: flex;
justify-content: space-between;
}

.left-align {
  justify-content: flex-start;
}

.right-align {
  justify-content: flex-end;
  margin-top: auto;
}