html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

.light {
    background: #f8f9fa
}

.dark {
    background: #121212;
    color: #fff
}

.container {
    flex: 1;
}

footer {
    margin-top: auto;
    opacity: .6;
}

.form-control-color{
    width: 25rem;
    height: 25rem;
}

.circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 10px solid #0d6efd;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    margin: auto;
}

#dropZone {
    border: 2px dashed #999;
    padding: 35px;
    border-radius: 12px;
    cursor: pointer;
    transition: .3s;
    display: block;
}

#dropZone input {
    display: none;
}

#dropZone.hover {
    border-color: #0d6efd;
    background: rgba(13, 110, 253, .05);
}

.dark button svg use {
  fill: #fff;
}

.dark {
    background: #121212;
    color: #fff;
}

.dark header,
.dark .nav-tabs {
    background: #1e1e1e;
    border-color: #333;
}

.dark .nav-link {
    color: #aaa;
}

.dark .nav-link.active {
    background: #1e1e1e;
    color: #fff;
}