.is-enhanced svg,
svg {
    width: auto;
    max-width: 100%;
    pointer-events: none
}

.EnhanceButton,
.is-hovered .DropText,
svg {
    display: block
}

.DropText,
.is-enhanced svg,
.wrapper span.num,
svg {
    pointer-events: none
}

@font-face {
    font-family: source_code_proregular;
    src: url(fonts/sourcecodepro-regular-webfont.woff2) format("woff2"), url(fonts/sourcecodepro-regular-webfont.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

svg {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    height: 100px;
    outline: 1px;
    margin: auto
}

.is-blackBg svg {
    outline: #fff solid 1px
}

.ColorToggleButton,
.EnhanceButton {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    font: inherit;
    display: block;
    background-color: transparent;
    margin: 0 0 1rem;
    padding: .25em
}

.ColorToggleButton:focus,
.EnhanceButton:focus {
    outline: 0
}

.EnhanceButton {
    cursor: zoom-in;
    box-shadow: 0 2px 8px 0 rgb(99 99 99/20%);
    margin: .25em;
    transition: background-color .25s, outline .25s, border-color .25s;
    background-color: #fff;
    border-radius: 8px;
    border: 3px solid transparent;
    min-width: 100px
}

.ColorToggleButton,
.ColorToggleButton:after,
.box {
    transition: background-color .25s, border-color .25s
}

.EnhanceButton:focus,
.EnhanceButton:hover {
    border-color: #22242b
}

.PreviewSection {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%
}

.PreviewSection:not(:empty) {
    margin-bottom: 1em
}

.is-showingSvg svg {
    position: static;
    opacity: 1
}

.ColorToggleWrap {
    display: flex;
    justify-content: center;
    flex-basis: 100%
}

.ColorToggleButton {
    position: relative;
    font-size: 1rem;
    border: 1px solid #fff;
    border-radius: 4px;
    background-color: #000;
    cursor: pointer;
    margin-top: 1em
}

.ColorToggleButton,
.ColorToggleButton:after {
    width: 20px;
    height: 20px
}

.ColorToggleButton:after {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    border: 1px solid #000;
    border-radius: 4px;
    background-color: #fff
}

.AccessibleText {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important
}

.is-blackBg .ColorToggleButton {
    background-color: #fff;
    border-color: #000
}

.is-blackBg .ColorToggleButton:after {
    background-color: #000;
    border-color: #fff
}

.is-enhanced svg {
    height: auto;
    max-height: 100%
}

.is-blackBg .EnhanceButton {
    background-color: #000
}

a:focus {
    outline: #fff dotted 1px;
    outline-offset: 2px
}

.box {
    position: relative;
    display: inline-block;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    border-radius: 8px;
    border: 6px solid #22242b;
    padding: 1em;
    margin: 1em;
    box-shadow: 0 7px 29px 0 rgba(100, 100, 111, .2);
    max-width: 1200px;
    width: 96%;
    flex-grow: 1;
    font-size: 1.5em
}

@media (min-width:800px) {
    .box {
        font-size: 2em
    }
}

@media (max-width: 576px) {
    .box {
        position: relative;
        display: inline-table;
        justify-content: center;
        text-align: center;
        align-items: center;
        border-radius: 8px;
        border: 6px solid #22242b;
        padding: 10px;
        margin: 10px;
        box-shadow: 0 7px 29px 0rgba(100,100,111,.2);
        max-width: 1200px;
        width: 96%;
        flex-grow: 1;
        font-size: 1.5em;
    }

    .transparency-grid {
        transform: scale(0.9);
        width: 95%;
        height: 95%;
    }
    .btn-danger {
        margin-top: 1rem;
    }
    .btn-primary {
        margin-top: 1rem;
    }
}


.box.is-hovered {
    background-color: hsla(0, 0%, 100%, .6);
    border-color: #3976d9
}

.DropText,
.is-hovered *,
input[type=file] {
    display: none
}

.DropText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0
}

label {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    background: inherit;
    padding: 0;
    border: 0;
    color: #3976d9;
    font-weight: 700;
    cursor: pointer
}

.MarkupButton:focus,
.MarkupButton:hover,
label:focus,
label:hover {
    text-decoration: underline
}

.CopyInput {
    position: absolute;
    transform: translateX(-9999px)
}

.boxContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1
}

.ButtonWrap:not(:empty) {
    margin-top: 1em
}

.CopyButton,
.DownloadButton,
a[download] {
    display: inline-block;
    transition: background-color .25s;
    cursor: pointer;
    font: inherit;
    border: 0;
    appearance: none;
    border: none;
    width: 290px;
    max-width: 290px;
    font-size: 16px !important
}

.DownloadButton,
a[download] {
    text-decoration: none;
    background: rgb(45,118,232);
    background: linear-gradient(245deg, rgba(45,118,232,1) 3%, rgba(66,134,240,1) 35%, rgba(32,87,177,1) 91%);
    border-radius: 8px;
    color: #fff;
    padding: 12px .5em
}

.DownloadButton:disabled,
.DownloadButton:disabled:focus,
.DownloadButton:disabled:hover,
a[download]:disabled,
a[download]:disabled:focus,
a[download]:disabled:hover {
    background: #6b6b6b
}

.DownloadButton:focus,
.DownloadButton:hover,
a[download]:focus,
a[download]:hover {
    background-color: #2f1187;
    outline: 0
}

.CopyButton {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 8px;
    color: #fff;
    padding: 12px .5em;
    background: #22242b
}

.CopyButton:focus,
.CopyButton:hover {
    background-color: #18191d
}

.MarkupInput {
    display: none;
    height: 29px;
    border-radius: 4px;
    margin: 10px auto
}

.MarkupButton {
    font: inherit;
    appearance: none;
    background: 0 0;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #3976d9;
    font-weight: 700
}

.wrapper {
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 10px rgb(0 0 0 / 20%)
}

.wrapper span {
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    cursor: pointer;
    user-select: none
}

.wrapper span.num {
    font-size: 30px;
    border-right: 2px solid rgba(0, 0, 0, .2);
    border-left: 2px solid rgba(0, 0, 0, .2)
}

.canvas_close svg,
.icon svg,
.icon-box svg {
    display: block !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 1 !important;
    height: 100% !important;
    max-width: 100% !important;
    width: auto !important;
    pointer-events: none !important;
    outline: 0 !important;
    margin: auto !important;
    padding: 10px !important
}