/*********************************************
    Responsive Style for tablets and small screens width 900-1200 px
*********************************************/


/*********************************************
    Main Parameters
*********************************************/



/*********************************************
    Typography
*********************************************/



/*********************************************
    Header
*********************************************/
header {
    padding: 20px 30px;
    flex-direction: row;
    text-align: start;
}
header .logo-title-container {
    justify-content: start;
    margin-left: 0%;
    margin-bottom: 0px;
}
header .logo img {
    height: 50px;
    margin-right: 8px;
}
header .site-title {
    font-size: 1.2rem;
}

nav {
    margin-right: 0%;
}
nav ul {
    flex-direction: row;
    gap: 20px;
}

/*********************************************
    LAYOUT CONTAINERS
*********************************************/

.row{
    margin: 0 auto;
}

.column{
    width: 100%;
    padding: 10px 30px;
}

.filler {
    display: block;
    margin-top: 10px;
    width: 100%;
    padding: 10px 30px;
    font-size: 0.75rem;
}

/*********************************************
    FOOTER
*********************************************/
footer {
    font-size: 0.8rem;
}
.footer_element {
    width: 17%;
}



/*********************************************
 * Navigation Bar - left Panel
 *********************************************/




/*********************************************
 * Containers
 *********************************************/

.spacing-block {
    width: 100%; /* Set block width to 30% for three blocks per row */
}

.custom-nucleotides-container {
    font-size: 0.9rem;
}
.custom-nucleotide-block {
    width: 48%; /* Set block width to 30% for three blocks per row */
    min-width: 450px; /* Minimum width to prevent overcrowding on smaller screens */
}
.unit-cell {
    padding-left: 2px; /* Small padding to create a cozy space */
    white-space: nowrap; /* Prevent the unit from wrapping onto the next line */
}
.input-field {
    width: 100%; /* Ensure the input field takes up full width of the td, or adjust as needed */
}

/*********************************************
    Forms
*********************************************/



/*********************************************
 * TABLES
 *********************************************/

 /* Results Table */
/* To be used for math calculations on the main forms for instance*/
.result-table th:first-child {
    width: 30%;
}
.result-table th:nth-child(2) {
    width: 70%;
}


/*********************************************
    MISC
*********************************************/
.hide-on-mobile {
    display: block;
}


/*********************************************
 * LANDING PAGE
 *********************************************/
.landing-container {
    width: 80%;
}

.tools-container {
    flex-direction: row;
    align-items: stretch;
}

.tool-button {
    width: 30%;
    padding-bottom: 20%;
}