:root {
  --background-color-1: #28a745;
  --color-2: white;
  --padding-3: 10px 20px;
  --border-radius-4: 5px;
  --border-5: 2px solid #007bff;
  --background-color-6: #f8f9fa;
  --height-7: 150px;
  --font-size-8: 3rem;
  --color-9: #6c757d;
  --border-10: 2px dashed #ccc;
  --padding-11: 20px;
  --border-color-12: #007bff;
  --background-color-13: #f0f8ff;
  --width-14: 100%;
  --height-15: 150px;
  --background-color-16: #fff;
  --border-17: 1px solid rgba(0,0,0,.125);
  --border-radius-18: .25rem;
  --padding-19: 1rem 1rem;
  --max-width-20: 100%;
}

.notification  {
 display: none;
 position: fixed;
 bottom: 20px;
 right: 20px;
 background-color: var(--background-color-1);
 color: var(--color-2);
 padding: var(--padding-3);
 border-radius: var(--border-radius-4);
 z-index: 1000;
}

.card-template  {
 cursor: pointer;
 margin-bottom: 10px;
}

.card-template:hover  {
 border: var(--border-5);
}

.card-img-placeholder  {
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: var(--background-color-6);
 height: var(--height-7);
 font-size: var(--font-size-8);
 color: var(--color-9);
}

.drag-drop-area  {
 border: var(--border-10);
 padding: var(--padding-11);
 text-align: center;
 cursor: pointer;
 margin-bottom: 20px;
}

.drag-drop-area.dragover  {
 border-color: var(--border-color-12);
 background-color: var(--background-color-13);
}

textarea  {
 width: var(--width-14);
 height: var(--height-15);
 font-family: monospace;
 white-space: pre;
}

.card  {
 position: relative;
 display: flex;
 flex-direction: column;
 min-width: 0;
 word-wrap: break-word;
 background-color: var(--background-color-16);
 background-clip: border-box;
 border: var(--border-17);
 border-radius: var(--border-radius-18);
}

.card-body  {
 flex: 1 1 auto;
 padding: var(--padding-19);
}

.card-title  {
 margin-bottom: .5rem;
}

.card-text:last-child  {
 margin-bottom: 0;
}

.mb-3  {
 margin-bottom: 1rem!important;
}

.mt-3  {
 margin-top: 1rem!important;
}
.card-img-container img {
var(--max-width-20);
}