:root {
    --body-font: "Inter", sans-serif;
    --theme-bg: #1f1d2b;
    --body-color: #808191;
    --button-bg: #353340;
    --border-color: rgb(128 129 145 / 24%);
    --video-bg: #252936;
    --delay: 0s;
}

.app {
    background: linear-gradient(to top right, #7c89d5, #f599a5);
}
.bg-sub {
    background-color: #f6f6fc;
}

/*
body {
    font-family: var(--body-font);
    color: var(--body-color);
    background-image: url("https://images.unsplash.com/photo-1445251836269-d158eaa028a6?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1951&q=80");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: color-dodge;
    background-color: rgba(18, 21, 39, 0.86) !important;
}

body:before {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(163deg, rgba(31, 29, 43, 1) 21%, rgba(31, 29, 43, 0.3113620448179272) 64%);
    opacity: 0.4;
    content: "";

}

.container, .app-header, .app-sidepanel .sidepanel-inner {
    background-color: var(--theme-bg);
    box-shadow: 0 20px 50px rgb(0 0 0 / 30%);
}

.app-header {
    border: 1px solid var(--border-color);
}
.app-sidepanel {
    border-right: 1px solid var(--border-color);
}

.app-card, .modal-content {
    background-color: var(--video-bg);
}
*/
.cnt-wrapper {
    position: relative;
}
.cnt-wrapper .cnt {
    position: absolute;
    right: 0;
}

/*--- style override ---*/
.modal {
    z-index: 80000;
}
.swal2-container {
    z-index: 80002 !important;
}

.app-nav .nav-link {
    padding: .675rem 1rem .675rem 3rem;
}
.app-branding {
    height: 100px;
    margin: 0;
    padding: 0.5em !important;
}
.btn-outline-secondary {
    border: 1px solid #d4d4d4;
}
pre {
    color: inherit;
}

.app-logo img {
    object-fit: contain;
    height: 100%;
}

.btn-xs {
    font-size: 0.6em;
    padding: 0.6em 1em;
}

.required:before {
    content: '*';
    color: red;
    margin-right: 0.2em;
}