:root {
    --MainColor: #633A88;
    --MainColorInvert: #3f1268;
    --MainColorAccent: #4A226F;
    --MainColorBold: #2B0949;
    --MainColorDisabledAccent: #845EA6;
    --MainColorDisabled: #B294CD;
    --AccentColor: #95397E;
    --AccentColorBold: #791E62;
    --AccentColorAccent: #50053D;
    --AccentColorDisabledAccent: #D797C7;
    --AccentColorDisabled: #DB661A1;
    --SecondaryColor: #4A418D;
    --SecondaryColorInvert: #422383;
    --SecondaryColorBold: #150E4B;
    --SecondaryColorAccent: #6E66AB;
    --SecondaryColorDisabledAccent: #6E66AB;
    --SecondaryColorDisabled: #A19AD0;
}

table tr:nth-child(odd) td {
    background-color: var(--MainColor);
    color: #fff;
}

table.light tr:nth-child(odd) td {
    background-color: var(--MainColorDisabled);
    color: #000;
}

table.accent tr:nth-child(odd) td {
    background-color: var(--MainColorAccent);
    color: #fff;
}


/*Buttons*/
.btn-ghost {
    background-color: unset;
    border: unset;
    padding: unset;
    color: inherit;
}
.btn-smaller {
    padding: 0.1rem 0.2rem;
    font-size: .6rem;
    border-radius: 0.1rem;
}

.btn-primary, .btn-outline-primary {
    background-color: var(--MainColor);
    border-color: var(--MainColorBold);
}
.btn-primary {
    color: #fff !important;
}

    .btn-primary:hover, .btn-outline-primary:hover {
        color: #fff;
        background-color: var(--MainColorBold);
        border-color: var(--MainColorAccent);
    }

    .btn-primary:disabled, .btn-primary:disabled:hover, .btn-outline-primary:disabled, .btn-outline-primary:disabled:hover {
        color: #fff;
        background-color: var(--MainColorDisabled);
        border-color: var(--MainColorDisabledAccent);
    }


.btn-outline-primary {
    background-color: unset;
    color: var(--MainColor);
}

table tr:nth-child(odd) .btn-primary, table tr:nth-child(odd) .btn-outline-primary {
    color: var(--MainColorInvert);
    border-color: var(--MainColorInvert);
}

.btn-secondary, .btn-outline-secondary {
    color: #fff;
    background-color: var(--SecondaryColor);
    border-color: var(--SecondaryColorBold);
}

    .btn-secondary:hover, .btn-outline-secondary:hover {
        color: #fff;
        background-color: var(--SecondaryColorBold);
        border-color: var(--SecondaryColorAccent);
    }

    .btn-secondary:disabled:hover, .btn-secondary:disabled, .btn-outline-secondary:disabled {
        color: #fff;
        background-color: var(--SecondaryColorDisabled);
        border-color: var(--SecondaryColorDisabledAccent);
    }

.btn-outline-secondary {
    background-color: unset;
    color: var(--SecondaryColor);
}

table tr:nth-child(odd) .btn-outline-secondary, table tr:nth-child(odd) .btn-outline-secondary {
    color: var(--SecondaryColorInvert);
    border-color: var(--SecondaryColorInvert);
}

.btn-accent {
    color: #fff;
    background-color: var(--AccentColor);
    border-color: var(--AccentColorBold);
}

    .btn-accent:hover {
        color: #fff;
        background-color: var(--AccentColorBold);
        border-color: var(--AccentColorAccent);
    }

    .btn-accent:disabled:hover, .btn-accent:disabled {
        color: #fff;
        background-color: var(--AccentColorDisabled);
        border-color: var(--AccentColorDisabledAccent);
    }

.btn-light {
    color: #000;
    background-color: #c6c3ca;
    border-color: #adaab1;
}

    .btn-light:hover {
        color: #000;
        background-color: #e0dde4;
        border-color: #c6c3ca;
    }

/*Colors*/
.color-primary {
    color: var(--MainColor);
}

.color-secondary {
    color: var(--SecondaryColor);
}

.color-accent {
    color: var(--AccentColor);
}

.border-primary {
    border-color: var(--MainColor) !important;
}

.border-secondary {
    border-color: var(--SecondaryColor) !important;
}

.border-accent {
    border-color: var(--AccentColor) !important;
}

/*Background*/
.box-primary {
    box-shadow: 1px 1px 5px var(--MainColor);
    padding: 0.4rem !important;
}

.box-secondary {
    box-shadow: 1px 1px 5px var(--SecondaryColor);
    padding: 0.2rem !important;
}

.back-primary {
    background-color: var(--MainColor);
}

.back-secondary {
    background-color: var(--SecondaryColor);
}

.back-accent {
    background-color: var(--AccentColor);
}

/*Calendar*/
.insp-internal {
    cursor: pointer !important;
    background-color: var(--MainColor) !important;
}

    .insp-internal.insp-done {
        background-color: #2a9424 !important;
    }

.insp-external {
    cursor: pointer !important;
    background-color: #1c4898 !important;
}

.insp-internal:hover, insp-external:hover {
    font-weight: bold
}

.insp-external.insp-done {
    background-color: #2a9424 !important;
}

.IconValid {
    color: #006D05
}

.IconInvalid {
    color: #D1D1D1AA;
}
/*Drag Drop*/
.DropArea {
    border: 2px dashed var(--MainColor);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
    min-height: 200px;
}

    .DropArea:hover {
        background-color: var(--MainColorAccent);
        color: white;
    }

    .DropArea input[type=file] {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }
/*Reconnect*/
.BlazorReconnect > div {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    overflow: hidden;
    background-color: var(--MainColorDisabled);
    color: black;
    opacity: 0.95;
    text-align: center;
    vertical-align: central;
    font-weight: bold;
}

.components-reconnect-hide > div, .components-reconnect-show > div, .components-reconnect-failed > div, .components-reconnect-rejected > div {
    display: none;
}

.components-reconnect-show > .show, .components-reconnect-failed > .failed, .components-reconnect-rejected > .rejected {
    display: flex !important;
    justify-content: center;
    align-items: center;
}