@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap);

* {
    font-family: 'Nunito', sans-serif;
}

html,
body {
    background-color: #21242c;
    color: #FFF;
    height: 100%;
}

#app {
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.card {
    background-color: #2e343e;
}

.digit {
    cursor: pointer;
    background-color: #2e343e;
    border: 1px solid #363d49;
}

.market-item {
    color: #ccc;
}

.market-item.selected-market {
    background-color: #434a56;
    border: 1px solid #737987;
    color: #EEE;
}

.digit.selected-digit {
    background-color: #434a56;
    border: 1px solid #737987;
}

.form-control:disabled,
.form-select:disabled {
    opacity: 0.5;
}

.form-control,
.form-select {
    border-color: #5a6374;
    font-size: 14px;
    color: #CCC !important;
    background-color: transparent !important;
    border-radius: 2px;
}

.form-control option,
.form-select option {
    color: #223;
}

.noty_bar.noty_type__success .noty_progressbar {
    opacity: .4;
    background-color: #d7e2d3;
}

.noty_theme__mint.noty_type__success {
    background-color: #519b41 !important;
    border-bottom: 1px solid #8ad082 !important;
}

.input-group-prepend .input-group-text:last-child {
    border-radius: 2px 0 0 2px;
}

.input-group-text {
    background-color: #adbfe43d;
}

.input-group.readonly {
    opacity: 0.9;
}

.input-group.readonly .input-group-text {
    border-color: #86929e;
}

.input-group.readonly .form-control {
    border-color: #464d5a;
    color: #848697;
}

.trade-win {
    border-radius: 4px;
    padding: 1px 4px;
    color: #EEE;
    background-color: #2b761a2f;
    border: 1px solid #519b41;
}

.trade-loss {
    border-radius: 4px;
    padding: 1px 4px;
    color: #EEE;
    background-color: #771d182e;
    border: 1px solid #9b4241;
}

.digits-wrapper-container {
    overflow: hidden;
    width: 100%;
}

.digits-wrapper>div {
    text-align: center;
    border: 1px solid rgb(255 255 255 / 10%);
    font-size: 14px;
    min-width: 1.5em;
    height: 1.5em;
}

.custom-table-wrapper table th,
.custom-table-wrapper table td {
    vertical-align: middle;
    border-color: rgb(235 245 255 / 15%) !important;
}

.badge-success {
    font-weight: 500;
    border: 1px solid rgb(83 213 100 / 81%);
    background-color: rgb(71 193 88 / 19%);
}

.badge-warning {
    font-weight: 500;
    border: 1px solid rgb(227 185 57 / 68%);
    background-color: rgb(150 100 0 / 27%);
}

.badge-danger {
    font-weight: 500;
    border: 1px solid rgb(227 57 57 / 68%);
    background-color: rgb(150 0 0 / 27%);
}

.badge-dark {
    font-weight: 500;
    border: 1px solid rgb(196 206 225 / 68%);
    background-color: rgb(114 126 141 / 27%);
}

.badge-primary {
    font-weight: 500;
    border: 1px solid rgba(23, 101, 246, 0.68);
    background-color: rgba(31, 126, 243, 0.244);
}

#topbar .btn {
    box-shadow: none!important;
    border-bottom: 3px solid transparent;
}

#topbar .router-link-exact-active {
    border-bottom-color: rgba(209, 66, 114, 0.345);
}

.app-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgb(0 0 0 / 75%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-modal > div {
    width: 100%;
    max-width: 450px;
    background-color: #21242c;
}

.item-success {
    border: 1px solid #4cba2d82;
    background-color: #40ca2127;
}

.item-danger {
    border: 1px solid #ba2d4982;
    background-color: #ca216227;
}

.item-orange {
    border: 1px solid #ba632d82;
    background-color: #ca702127;
}

.item-primary {
    border: 1px solid #2d5eba82;
    background-color: #216aca27;
}

.item-warning {
    border: 1px solid #baa72d82;
    background-color: #cab32127;
}