@keyframes fadeEffect {
    from {background-color: initial;}
    to {background-color: #323e48;} /* Bootstrap card 기본 배경색 */
}

.fade-background {
    animation: fadeEffect 0.2s forwards;
}

@media (max-width: 629px) {
    .realtime-card-container {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
    }
}
.realtime-card-container {
    margin: 0 auto;
}
.realtime-card {
    width:290px;
}

.realtime-card-column-half {
    max-width:50%;
    float:left;
    padding-left:0.625rem;
    padding-right:0.625rem;
    flex:0 0 50%;
    margin-bottom: 5px;
}
.realtime-card-column-full {
    max-width:100%;
    float:left;
    padding-left:0.625rem;
    padding-right:0.625rem;
    flex:0 0 100%;
    margin-bottom: 5px;
}

.realtime-resulttable-character {
    color: white !important;
    border-radius: 2px;
    padding: 9px 5px 5px;
    font-size: 0.70rem;
    cursor: pointer;
}

.rts-margin-left {
    margin-left:5px;
}

.rts-btn-selected {
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.7);
}

.background-gray {
    background-color:gray;
}

.background-red {
    background-color:#772d2c;
}
.background-blue {
    background-color:#2f519b;
}

.background-green {
    background-color:#3b7d3e;
}

.background-yellow {
    background-color:#bfae2b;
}

.background-purple {
    background-color:#6f3d8d;
}

.background-orange {
    background-color:#b35e1e;
}

.background-rainbow {
    background: linear-gradient(to bottom right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, #9400D3);
}
.background-dark-rainbow {
    background: linear-gradient(to bottom right, #800000, #804000, #808000, #008000, #000080, #400080, #800080);
}

.popup-input-pattern svg {
    display: inline-block;
}

.popup-input-pattern {
    width: 100%;
    text-align: left;
}

.stored-rules-table svg {
    display: inline-block;
}

.pattern-result svg {
    display: inline-block;
}


.border-red {
    border: 2px solid #772d2c;
}
.border-blue {
    border: 2px solid #2f519b;
}

.border-green {
    border: 2px solid #3b7d3e;
}

.border-yellow {
    border: 2px solid #bfae2b;
}

.border-purple {
    border: 2px solid #6f3d8d;
}

.border-orange {
    border: 2px solid #b35e1e;
}

.border-rainbow {
    border: 2px solid;
    border-image: linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, #9400D3) 1;
}