index.css

@keyframes textAnimation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.toolbarTitle {
    text-align: center;
}

.flexContainer {
    display: flex;
    flex-wrap: wrap;
}

.leftContainer {
    width: 100%;
}

.rightContainer {
    width: 100%;
}

.expressionContainer {
    margin: 1rem;
    display: flex;
}

.inputItemContainer {
    margin-right: 1rem;
    width: -webkit-fill-available;
}

.cardFullContainer {
    padding: 1rem;
}

.cardContainer {
    display: grid;
    animation: myanimation 1.5s;
    transition: all 2s ease-in;
}

.cardContent {
    animation: myanimation 1.5s;
}

.parseRulesContainer {
    margin: 1rem;
    padding: 1rem;
}

.borderBottom {
    border-bottom: 1px solid;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.tableContainer {
    padding: 0;
    border: 1px solid;
}

.columnCell {
    width: 10%;
    text-align: center;
    height: 25px !important;
    justify-content: center;
    display: flex;
    align-items: center;
    border: 1px solid;
}

.tableTitleText {
    text-align: center;
}

@media screen and (min-width: 576px) {
    .flexContainer {
        flex-wrap: nowrap;
    }
    .leftContainer {
        width: 50%;
    }
    
    .rightContainer {
        width: 50%;
    }
}

@media screen and (min-width: 768px) {
    .leftContainer {
        width: 40%;
    }
    
    .rightContainer {
        width: 60%;
    }
}

@media screen and (min-width: 992px) {
    .leftContainer {
        width: 35%;
    }
    
    .rightContainer {
        width: 65%;
    }
}