@import 'dynamic-header.css';
@import 'email-preview-cmp.css';
@import 'email-list-cmp.css';
@import 'email-stats.css';
@import 'email-aside.css';
@import 'email-filter-cmp.css';
@import 'email-status-cmp.css';
@import 'email-compose-cmp.css';
@import 'keep-todo-cmp.css';
@import 'note-container.css';
@import 'responsive-video.css';
@import 'email-details-cmp.css';
@import 'note-add-cmp.css';
@import 'note-list-cmp.css';
@import 'note-filter-cmp.css';

@import 'note-action-bar.css';
@import 'masonry-container.css';


/* Font-face */

@font-face {
  font-family: 'Lato-regular';
  src: url('../fonts/lato/Lato-Regular.ttf');
}

@font-face {
  font-family: 'Lato-black';
  src: url('../fonts/lato/Lato-Bold.ttf');
}

@font-face {
  font-family: 'Lato-light';
  src: url('../fonts/lato/Lato-Light.ttf');
}

/* Base */

* {
  box-sizing: border-box;
}

html {
  font-family: 'Lato-regular', sans-serif;
  font-size: 1rem;
}

body {
  background-color: #fafafa;
}

main {
  padding: 20px;
}

a {
  text-decoration-line: none;
  color: #b3b3b3;
  transition: .3s;
}

ul, li {
  padding: 0;
  margin: 0;
}

a:hover {
  text-decoration-line: underline;
  color: black;
}

body, h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

.mails-main {
  flex-grow: 19;
  padding-left: 20px;
  padding-right: 100px;
  width: 75vw;
}



.open-logo{
  width: 20vw;
  text-align: center;
}
.home-container{
  height: 85vh;
}


/* Helpers */

.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.space-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

.flex-col {
  flex-direction: column;
}

.container {
  padding-left: 20px;
  padding-right: 20px;
}

.clean-list {
  list-style: none;
}

.ui-box {
  box-shadow: 0px 4px 10px 0px #b3b3b3;
  background-color: white;
}

.justify-left {
  justify-content: left;
}
.justify-center {
	justify-content: center;
}
.col{
  flex-direction: column;
}

.wrap {
  flex-wrap: wrap;
}

.bold-text{
  font-family: 'Lato-black',sans-serif;
}
.regular-text{
  font-family: 'Lato-regular',sans-serif;
}
.light-text{
  font-family: 'Lato-light',sans-serif;
}

.header-keep{
  max-width: 300px;
  display: flex;
  flex-direction: column;
}


.dropdown-colors{
  visibility: hidden;
  transition: .3s;
}

.note-action-bar :hover .dropdown-colors{
     
     visibility: visible;
     
  
}

.note-action-bar i.colors span{
	  width: 10px;
    height: 10px;
    display: inline-block;
    cursor: pointer;
    border-radius: 50%;
    margin: 1px
    
}


.deleteTodoBtn{

  border: none;
  cursor: pointer;
  color: black;
  outline: none;
  background-color:transparent;
  font-size: 1rem;
}