:root {
    --bg-color: #121212;
    --bg2-color: #222222;
    --border-color: #444444;
    --font-color: #e0e0e0;
    --font2-color: #b0b0b0;
    --focus-color: #2b2b2b;
    --control-bg-color: var(--bg-color);
    --control-font-color: var(--font-color);
}

html,
body {
    background: var(--bg-color);
    color: var(--font-color);
    font-size: 14px;
    font-family: "Courier New", Courier, monospace;
}
.wrapper {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    overflow: auto;
}
.inner-bg {
    background-color: var(--bg-color);
    background-image: var(--bg-img);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
}
.panel {
    background-color: var(--bg-color);
    border-color: var(--border-color);

    &.panel-login {
        padding: 50px;
        max-width: 400px;
    }

    &.panel-credit {
        padding: 2rem 3rem;
    }

    &.panel-log {
        padding: 1rem 2rem;
    }
}
.loading {
    & .loading-dialog {
        &::before {
            background-image: var(--bg-logo);
        }
    }
}
.loader {
    background: var(--bg-color);

    & .loader-sign {
        background-image: var(--bg-logo);
        transform: scale(2);

        &::before {
            border-color: darkgoldenrod;
            border-top-color: transparent;
        }
    }
}

.loading {
    & .loading-dialog {
        border-color: var(--border-color);
        background: rgba(0, 0, 0, 0.8);
    }
}

.form-control,
.custom-select.form-control {
    border-color: var(--border-color) !important;
    background-color: var(--control-bg-color);
    color: var(--control-font-color);
    font-size: 14px;
    padding: 10px 20px;

    &:focus {
        background-color: var(--focus-color) !important;
        border-color: var(--border-color) !important;
        color: var(--control-font-color) !important;
    }
    &::placeholder {
        color: var(--font2-color);
    }

    & + .password-reveal {
        top: 11px;
    }
}

.btn2 {
    outline: none;
    box-shadow: none;
    border: 0px;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    padding: 12px 12px;
    min-width: 120px;
    border-radius: 0.5rem;

    background-image: linear-gradient(
        to right,
        #ff512f 0%,
        #f09819 51%,
        #ff512f 100%
    );

    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    display: block;
    box-shadow: none;

    &:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }

    &.btn-small {
        font-size: 12px;
        padding: 6px 12px;
        min-width: 80px;
        border-radius: 0.25rem;
    }

    &:focus,
    &:hover {
        outline: none;
        box-shadow: none;
        position: relative;
        top: 1px;
    }

    &.btn-spin {
        background-image: linear-gradient(
            to right,
            #dc2424 0%,
            #4a569d 51%,
            #dc2424 100%
        );

        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        box-shadow: 0 0 20px #eee;
        display: block;
        box-shadow: none;

        &:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
        }
    }

    &:disabled,
    &:hover:disabled,
    &:focus:disabled {
        background: #e0e0e0;
        color: #a0a0a0;
        cursor: not-allowed;
    }
}

.swal2-container {
    & .swal2-modal {
        background-color: var(--bg-color);
        border-color: var(--border-color);
        color: white;
    }
}

.superWheel {
    margin-top: 0px;

    & .sWheel-wrapper {
        & .sWheel-inner {
            & .sWheel {
                & .sWheel-bg-layer {
                    & svg {
                        & defs {
                            & clipPath {
                                & path {
                                }
                            }
                        }

                        & g {
                            & line {
                                stroke: white;
                                stroke-width: 0px;
                            }
                        }

                        & g.sw-slicesGroup {
                            & path {
                            }
                        }

                        & circle.outerLine {
                            stroke: white;
                            stroke-width: 4px;
                        }

                        & circle.innerLine {
                            stroke: white;
                            stroke-width: 4px;
                        }
                    }
                }

                & .sWheel-txt-wrap {
                    & .sWheel-txt {
                        & .sWheel-title {
                            padding-right: 5% !important;
                            & .sWheel-text {
                                text-transform: uppercase;
                                transform: rotate(180deg);
                                text-align: left;
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
            & .sWheel-center {
                position: relative;
                background-image: var(--bg-icon);
                background-size: 80px;
                background-position: center center;
                background-repeat: no-repeat;
            }
        }

        & .sWheel-marker {
            margin-top: 13%;
            & svg {
                & g {
                    & path {
                        &:nth-child(1) {
                            fill: red;
                        }
                        &:nth-child(2) {
                            fill: white;
                        }
                    }
                }
            }
        }
    }
}

.btn-container {
    display: flex;
    justify-content: center;
}

.list-hist {
    list-style: none;
    margin: 0px;
    padding: 0px;

    & li {
        list-style: none;
        margin: 0px;
        border-radius: 0.35rem;
        background: #1b1b1b;
        padding: 5px 10px;
        text-transform: uppercase;

        & + li {
            margin-top: 0.5rem;
        }
    }
}

.modal {
    & .modal-content {
        background: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;

        & .modal-header {
            background: var(--bg2-color);
            border-bottom: 1px solid var(--border-color);
            border-radius: 0.5rem 0.5rem 0 0;
        }

        & .modal-body {
            background: none;
        }

        & .modal-footer {
            border-top: 1px solid var(--border-color);
        }
    }
}