.promocodes-wrapper {
    display: flex;
    justify-content: center;
}
.promocodes-promocode-wrapper {
    flex: 1 0 40%;
    border-radius: 3px;
    border: 2px dashed #7578aa;
    color: #fff;
    margin: 0 0.5em;
    padding: 1rem 2rem;
}
.promocodes-promocode-wrapper:first-child, .promocodes-promocode-wrapper:last-child {
    opacity: 0.15;
}

.promocodes-promocode-wrapper .form-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.promocodes-code-fake-caption,
.promocodes-code-fake-field,
.promocodes-fake-button {
    height: 1.6em;
    background: #171822;
    border-radius: 3px;
}

.promocodes-code-fake-caption {
    width: 40%;
}
.promocodes-code-fake-field {
    width: 80%;
}
.promocodes-fake-button {
    width: 20%;
    margin: 0 0.5em;
}

.promocodes-code-caption {
    font-size: 0.875rem;
    color: #fff;
    text-transform: uppercase;
    padding: 0 0.5rem;
}

.promocodes-code-field-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0.5rem 0;
}
.promocodes-button {
    background: #ffa500;
    color: #000;
    font-size: 0.75rem;
    padding: 0.25rem 1rem;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    margin: 0 0.5em;
}

.promocodes-button:hover { background-color: #ff8e00; }
.promocodes-input,
.promocodes-code-field {
    position: relative;
    flex: 1 1 auto;
    border: none;
    border-radius: 3px;
    color: #fff;
    background-color: #171822;
    font-size: 1rem;
    box-sizing: border-box;
    box-shadow: inset 1px 1px 3px #000;
    border: 1px solid #262739;
    padding: 0.25rem 0.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.promocodes-block {
    display: flex;
    position: relative;
    flex-direction: row;
    margin: 1px 0;
    border-radius: 3px;
    justify-content: space-between;
    min-height: 50px;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
} 

.promocodes-history-caption {
    display: block;
    font-size: 0.875em;
    color: #d1d3ff;
    padding: 0.3125em 0.25em;    
    margin-top: 1em;
    text-transform: uppercase;
}
.promocodes-block:hover {
    background-color: #424262;
}
.promocodes-block:hover .promocodes-block-caption {
    color: #ffa500;
}

.promocodes-block-status {
    position: absolute;
    left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    color: transparent!important;
    background-color: #262739;
}

body[dir='rtl'] .promocodes-block-status {
    left: unset;
    right: -5px;
}
.promocodes-block-caption {
    text-transform: uppercase;
    padding: 0.3125em 0.875em;
}

.promocodes-block-description-wrapper,
.promocodes-block-amount-wrapper {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

.promocodes-block-amount-wrapper {
    flex: 1 1 100px;
    width: 100px;
}

.promocodes-block-info {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
}

.promocodes-block-title {
    color: #cecece;
    padding: 0.3125em 0.875em;
}
.promocodes-block-description {
    color: #A4C2EA;
    padding: 0.3125em 0.875em;
    text-overflow: ellipsis;
}

.promocodes-block-money-wrapper {
    display: flex;
    align-items: center;
}

.promocodes-block-balance {
    padding: 0.3125em 0.875em;
    font-weight: 400;
    color: #cecece;
    background-color: transparent!important;
}

.promocodes-block-details {
    display: none;
    background-color: #2e2f44;
    border-radius: 3px;
}

.promocodes-block-details-status {
    color: #1ca800;
    display: block;
    font-size: 1.2em;
    text-align: center;
    padding: 0.5em 0;
    text-transform: uppercase;
}

.promocodes-block-details-status-active { color: #42B742; }
.promocodes-block-details-status-closed { color: #666; }
.promocodes-block-details-status-new { color: #2EBCBC; }

.promocodes-block-details-activity {
    width: 20rem;
    margin: 0 auto;
}
.promocodes-block-details-terms {
    padding: 2em 1em;
    margin: 1em 0.875rem;
    line-height: 1.6em;
    border-top: 5px solid #ffa500;
    border-bottom: 5px solid #ffa500;
    background-color: #171822;
    color: #c2c2c2;
    border-radius: 3px;
    columns: 3;
    column-gap: 5em;
}

.promocodes-block-details-terms h3 {
    color: #fff;
}

.promocodes-field-error { border-color: rgb(185, 74, 72)!important; border-style: solid; border-width: 0.1em; }

.promocode-total { fill: #fff; font-size: 0.8em; font-weight: 900; }
.promocode-total-sup { fill: #fff; font-size: 0.8em; font-weight: 900; }
.promocode-current { fill: #fff; font-size: 1em!important; font-weight: 100; }
.promocode-current-sup { fill: #fff; font-size: 0.8em; font-weight: 100; }
.promocode-aux { font-size: 0.7em; fill: #000; font-weight: 400; }
.promocode-currency { font-size: 0.5em; fill: #fff; }