body {
  background-color:#EEEEEE;
  font-family:Roboto, sans-serif;
  overscroll-behavior: contain;
}

.bg-primary {
  background-color:#30009A !important;
}

.navbar-brand img {
  margin-right:4px;
}

.navbar-expand .navbar-collapse {
  display:none !important;
}

#grid .col-6 {
  padding:5px;
}

.card-body {
  padding:0;
}

.card img {
  object-fit:cover;
  object-position:center top;
  width:100%;
  height:100%;
}

#add {
  background-color:rgba(255,255,255,0) !important;
}

#editor {
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:2000;
}

.btn-toolbar {
  height:60px;
  background-color:#30009A;
}

.btn-toolbar .btn {
  background-color:transparent;
  border-color:transparent;
}

.btn-group .btn:not(:only-child) {
  margin:0 6px;
}

.fa-pencil, .fa-eraser {
  font-size:22px;
}

#editor .container {
  width:100%;
  height:calc(100% - 70px);
  background-color:rgba(238,238,238,0.9);
}

#editor .card {
  background-color:transparent;
  max-width:100%;
  max-height:100%;
}

#canvas-card {
  background-color:white;
}

canvas {
  width:100% !important;
  height:100% !important;
  object-fit:contain;
  object-position:center center;
}

#color i {
  border-radius:100%;
  background-color:white;
  padding:8px;
  color:black;
  -webkit-text-stroke:0.5px black;
}