:root {
    --gray: #474747;
    --loader-color: #222222;
}

html {
    background: #e9e9e9;
}

#title {
    color: var(--gray);
}

.drop {
    border: 2px dashed #212529;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    background: white;
}
.dragging {
    border: 2px dashed #dc3545 !important;
}
#drop-svg {
    fill: var(--gray);
}
#change-input {
    border: 1px solid #212529;
}
#units {
    color: var(--gray);
}
#change-input:focus {
    border-color: #00b5dd;
    box-shadow: 0 0 2px 1px #00b5dd66;
}
.blue-button {
    color: white;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    background-image: linear-gradient(to bottom, #00d2ff 0%, #3a7bd5 100%);
}
.blue-button:active {
    box-shadow: inset 0 0 6px 4px #205660, 0 1px 0 #eeeeee;
    background-image: linear-gradient(to bottom, #00bcd9 0%, #2855a6 100%);
}
.preview {
    color: var(--gray);
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%);
    background: #ffffff;
}

#theme-wrapper svg {
    fill: #000000;
}

.popup {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 2px 7px 14px -5px rgba(0, 0, 0, 0.2);
}
.popup-header .popup-text {
    color: rgba(0, 0, 0, 0.6);
}
.popup-text {
    color: rgba(0, 0, 0, 0.6);
}