/* Bootstrap 5 CSS and icons included */
:root {
    --colorPrimaryNormal: #3967ed;
    --colorPrimaryDark: #00979f;
    --colorPrimaryGlare: #00cdd7;
    --colorPrimaryHalf: #3967ed;
    --colorPrimaryQuarter: #bfecee;
    --colorPrimaryEighth: #dff5f7;
    --colorPrimaryPale: #f3f5f7;
    --colorPrimarySeparator: #f3f5f7;
    --colorPrimaryOutline: #dff5f7;
    --colorButtonNormal: #00b3bb;
    --colorButtonHover: #00cdd7;
    --colorLinkNormal: #00979f;
    --colorLinkHover: #00cdd7;
}

.layout-demo-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 1rem;
}
.layout-demo-placeholder img {
    width: 900px;
}
.layout-demo-info {
    text-align: center;
    margin-top: 1rem;
}

.upload_dropZone {
    color: #0f3c4b;
    background-color: var(--colorPrimaryPale, #c8dadf);
    outline: 2px dashed var(--colorPrimaryHalf, #c1ddef);
    outline-offset: -12px;
    transition: outline-offset 0.2s ease-out, outline-color 0.3s ease-in-out,
        background-color 0.2s ease-out;
}
.upload_dropZone.highlight {
    outline-offset: -4px;
    outline-color: var(--colorPrimaryNormal, #0576bd);
    background-color: var(--colorPrimaryEighth, #c8dadf);
}
.upload_svg {
    fill: var(--colorPrimaryNormal, #0576bd);
}
.btn-upload {
    color: #fff;
    background-color: var(--colorPrimaryNormal, #0576bd);
}
.btn-upload:hover,
.btn-upload:focus {
    color: #fff;
    background-color: var(--colorPrimaryGlare);
}
.upload_img {
    width: calc(33.333% - (2rem / 3));
    object-fit: contain;
}