@font-face 
{
    font-family: 'DDG-Regular';
    src: url('../font/Aileron-Regular.otf');
}

@font-face 
{
    font-family: 'DDG-Bold';
    src: url('../font/Aileron-Bold.otf');
}

@font-face 
{
    font-family: 'DDG-Heavy';
    src: url('../font/Aileron-Heavy.otf');
}

@font-face 
{
    font-family: 'DDG-Light';
    src: url('../font/Aileron-Light.otf');
}

@font-face 
{
    font-family: 'DDG-UltraLight';
    src: url('../font/Aileron-UltraLight.otf');
}

:root
{
    --bg-color-site: #dddddd;
    --bg-color-base: #cccccc;
    --header-color-base: #ffffff;
    --footer-color-base: #aaaaaa;
    --base-color: #bbbbbb;
    --back-color: #000000;
    --layer0-color: #1a4b5a;
    --layer1-color: #1f6074;
    --layer2-color: #3e8a9a;
    --layer3-color: #89bfc9;
    --highlight-color: #e5ca6f;
    overflow-x: hidden;
}

html[class="dark"]
{
    --bg-color-site: #222222;
    --bg-color-base: #cccccc;
    --header-color-base: #ffffff;
    --footer-color-base: #aaaaaa;
    --base-color: #bbbbbb;
    --layer0-color: #ff0000;
    --layer1-color: #1f6074;
    --layer2-color: #3e8a9a;
    --layer3-color: #89bfc9;
    --highlight-color: #e5ca6f;
    overflow-x: hidden;
}

*
{
    --el-color-primary: var(--layer0-color);
    --el-color-primary-light-3: var(--layer1-color);
    --el-color-primary-light-5: var(--base-color);
    --el-color-primary-light-7: var(--layer2-color);
    --el-color-primary-light-8: var(--layer3-color);
    --el-color-primary-light-9: var(--highlight-color);
    --el-color-primary-dark-2: var(--layer3-color);
    --el-color-danger: #ce5b5b;
    --el-color-danger-light-3: #cc7b7b;
    --el-color-danger-light-5: #dda2a2;
    --el-color-danger-light-7: #fcd3d3;
    --el-color-danger-light-8: #fde2e2;
    --el-color-danger-light-9: #fef0f0;
    --el-color-danger-dark-2: #974545;
    --el-color-success: var(--layer2-color);
    --el-color-success-light-3: var(--layer1-color);
    --el-color-success-light-5: var(--base-color);
    --el-color-success-light-7: var(--layer2-color);
    --el-color-success-light-8: var(--layer3-color);
    --el-color-success-light-9: var(--highlight-color);
    --el-color-success-dark-2: var(--layer3-color);
    --el-input-text-color: #000000;
}

body
{
    font-family: 'DDG-Bold';
    margin: 0px;
    padding: 0px;
    background-color: var(--bg-color-site);
    overflow-x: hidden;
}

div.info
{
    color: #003366;
    padding: 8px 16px;
    background-color: #40a0ff88;
    border-radius: 12px;
    border-left: 12px solid #2288ff;
    margin: 20px 0;
}

div.warning 
{
    color: #444400;
    padding: 8px 16px;
    background-color: #ffdd7888;
    border-radius: 12px;
    border-left: 12px solid #d49f00;
    margin: 20px 0;
}

div.danger
{
    color: #220000;
    padding: 8px 16px;
    background-color: #ffa0a088;
    border-radius: 12px;
    border-left: 12px solid #fe6c6f;
    margin: 20px 0;
}

div.main
{
    margin-top: 55px;
    margin-bottom: 55px;
    z-index: 1;
}

div.default-content
{
    margin-left: 68px;
    margin-right: 5px;
}

div.collapse-content
{
    margin-top: 14px;
    margin-left: 10px;
    padding-top: 3px;
}

span.title-label
{
    position: relative;
    top: -8px;
    font-size: 16pt;
    margin-left: 10px;
}

main.content
{
    margin: 0px;
}

main.rounded-content
{
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    background-color: #ffffff88;
    backdrop-filter: blur(1px);
    padding: 10px;
    border: none;
    border-radius: 16px;
}


.el-button[class="dark"]
{
    --el-color-primary: #0000ff;
}

.el-input
{
    --el-input-focus-border-color: #0000ff;
}