body {
    height: 100%;
    margin: 0;
    padding: 0;
    padding-top: 56px;
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8;
    -webkit-user-select: none;
    user-select: none;
    flex-direction: column;
}



.left {
    float: left;
    width: 45%;
    margin: auto 30px;
}

.list {
    height: 13em;
}

#formalizedExpression {
    font-weight: bold;
    font-size: 1.6em;
    text-align: center;
    width: 100%;
    letter-spacing: .12em;
}

table {
    /* font-size: 20px; */
}

td,
th {
    text-align: center;
    padding: 2px 15px;
    border: none;
}

.expressionTable {
    border: 1px solid #ddd;
    border-collapse: collapse;
}

.truthTable {
    border: none;
    border-collapse: collapse;
    user-select: none;
    margin-top: 10px;
    margin-bottom: 10px;
}

.truthTable caption {
    font-weight: bold;
    line-height: 2em;
    caption-side: top;
    text-align: center;
}

.truthTable>thead {
    border-top: 2px solid #ff6060;
    border-bottom: 2px solid #ff6060;
    color: #ff6060;
}

.truthTable>tbody tr:nth-child(odd) {
    background-color: #fff8f8;
}

.truthTable>tbody tr:nth-child(even) {
    background-color: #ffffff;
}

.truthTable>tbody tr.truthdifferent {
    background-color: #ffcccc;
}

.sel {
    cursor: pointer;
}

.sel:hover {
    background-color: #ffe8e8;
}





button {
    padding: 7px 15px;
    margin: 8px 5px;
    background-color: #FF6060;
    /* Material blue color */
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 2px;
    /* Slight border radius for a material feel */
    cursor: pointer;
    outline: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.2), 0 8px 8px rgba(0, 0, 0, 0.2);
    transition:
        box-shadow 0.2s ease-in-out,
        background-color 0.2s;
}

button:active {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 2px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.15);
}

button:hover {
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25), 0 6px 6px rgba(0, 0, 0, 0.25), 0 8px 8px rgba(0, 0, 0, 0.25);
}

button:disabled {
    background-color: #ffa7a7;
}

input {
    font-size: 16px;
    /* Adjust as needed */
    padding: 10px 0 10px 10px;
    border: none;
    border-bottom: 2px solid #9E9E9E;
    /* Underline color */
    outline: none;
    background: transparent;
    letter-spacing: .1em;
    color: #000;
    margin: 8px 0;
    /* Margin on top and bottom */
    transition: border-color 0.2s ease-in-out;
    /* Transition for border color */
}

input:focus {
    border-bottom: 2px solid #ffa0a0;
    /* Underline color when focused */
}

input::placeholder {
    color: #BDBDBD;
    /* Placeholder text color */
    font-size: 16px;
    /* Adjust as needed */
}


/* Style the select box */
select {
    font-size: 16px;
    padding: 3px 5px;
    border: 1px solid #9E9E9E;
    border-radius: 5px;
    outline: none;
    background: transparent;
    color: #000;
    cursor: pointer;
    text-align: center;
    /* width: 100%; */
    -webkit-appearance: none;
    /* Remove iOS default styles */
    -moz-appearance: none;
    /* Remove Firefox default styles */
    appearance: none;
    /* Remove default styles */
}

/* Style the select arrow */
select::after {
    content: '\25BC';
    /* Downward arrow */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    /* Ensure the arrow is not clickable */
}

/* Style the select options */
select option {
    padding: 10px;
    border: none;
    outline: none;
    background-color: #f0f0f0;
    /* Light background for dropdown options */
    color: #000;
}

/* Placeholder style */
select:placeholder {
    color: #BDBDBD;
}

/* Popup container - hidden by default */
.popup-container {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent background */
    z-index: 1000;
    /* Make sure it's on top */
    overflow: auto;
    /* Enable scroll if needed */
}

/* Popup itself */
.popup {
    background: white;
    border-radius: 2px;
    padding: 20px;
    position: relative;
    margin: 10% auto;
    width: 61.8%;
    font-size: 1.1em;
    /* Adjust width as needed */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    animation: popup-show 0.5s forwards;
    /* Animation for showing the popup */
}

/* Popup close button */
.popup .popup-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}

/* Popup close button hover effect */
.popup .popup-close:hover {
    color: #333;
}


/* Keyframes for the popup show animation */
@keyframes popup-show {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.title {
    left: 20vh;
    font-size: 3vh;
    margin: 3vh auto;
}
.title .txt {
    margin-left: 5em;
}
.title h1 {
    font-size: 200%;
    margin: 0;
    font-weight: bold;
    color: #ff6060;
}

#main-container {
    display: flex;
    align-items: center;
    /*justify-content: space-between*/
}

aside {
    width: 35%;
    margin-left: 2vw;
    margin-bottom: 40px;
}

aside>* {
    margin: auto
}

aside>div {
    width: 100%
}

main {
    flex: .9;
}

#animation-container {
    /* height: 90%; */
    position: static;
    /* top: 70px; */
    /* TODO: why 70px? fix your magic number with calc() and var(), let others know its calculate expression (maybe force to display uppermost line?） */
    /* width: 55%; */
    /* max-width: 60%; */
    /* max-height: 80px; */
    padding-right: 5%;
    display: flex;
    flex-flow: column nowrap;
    /* align-items: center; */
}

.row-container {
    width: auto;
    height: 20%;
    /* margin: -2%; */
    font-size: 0px;
}

#row-1,
#row-4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3%;
}

#row-2,
#row-3 {
    text-align: right;
    margin: 3.5%;
}

.row-container div {
    display: inline-block;
    vertical-align: middle;
    margin: auto 0;
}

.image-wrapper {
    position: relative;
    height: 100%;
    /* padding: .1%; */
    /* border: 1px solid blue; */
}

.image-wrapper img {
    display: block;
    /* width: 50px; */
    vertical-align: middle;
    width: 100%;
}

.image-wrapper.terminator {
    width: 1.5%;
}

.image-wrapper.gene {
    width: 14%;
}

.image-wrapper.gene-2 {
    width: 8%;
}

.image-wrapper.site {
    width: 3.5%;
}

.image-wrapper.site-2 {
    width: 4.5%;
}

.image-wrapper.promoter {
    width: 8%;
    margin: auto -1.2%;
}

.image-wrapper.product {
    width: 5%;
}

.gap {
    width: 5%;
}

.product .icon {
    position: absolute;
    width: 120% !important;
    bottom: 540%;
    /* left: -40%; */
    /* margin: 100% auto; */
    /* left: -50%; */
}

.product .arrow {
    position: absolute;
    width: 675% !important;
    left: -680%;
    top: -1800%;
    margin: 100% auto;
}

.product .arrow-2 {
    position: absolute;
    width: 150% !important;
    left: -165%;
    top: -1200%;
    margin: 100% auto;
}

.line {
    position: absolute;
    top: calc(50% - .12vw);
    left: 0;
    width: 100%;
    height: .24vw;
    background-color: #171717;
    z-index: -1;
}

.line.single {
    left: auto;
    width: 50%;
    top: auto;
}

.inducer {
    position: absolute;
    width: 22% !important;
    top: -28%;
    left: 67%;
}

.inducer.arrow {
    left: 47%;
    top: -10%;
}

.inducer.arrow-2 {
    left: 6%;
    top: -600%;
    width: 300% !important;
}

.inducer.arrow-3 {
    left: 20%;
    top: -212%;
    width: 180% !important;
    z-index: -1;
}

.text {
    position: absolute;
    font-size: 1vw;
    white-space: nowrap;
    top: -12%;
}

.inducer.text {
    /* right: 400%; */
    top: 1%;
    width: 25%;
    font-style: italic;
    margin-left: auto;
}

ul { padding: 0; }

ul li.iAra::marker {
    color: #1770B0;
}

ul li.iATc::marker {
    color: #A61B29;
}

ul li.iDAPG::marker {
    color: #F4BD07;
}

ul li.iXylose::marker {
    color: #7C739F;
}

ul li.iCumate::marker {
    color: #FA8705;
}

ul li.i4-HBA::marker {
    color: #836B70;
}

.btn-container {
    bottom: 5%
}

.page_content {
    width: 100%;
    padding-left: 0;
    padding-right: 1vw;
    padding-top: 2vw;
    margin: 0;
    height: auto;
    overflow: visible;
}

/* override bootstrap, force to use full width */
.page_content > .container{
    max-width: 100%;
    width: 100%;
}