#cron-generator {
    text-align: center;
}

#cron-generator .cron_exp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0px;
}

#cron-generator input[type="text"]{
    flex: 4;
    font-family: 'Courier New', Courier, monospace;
    font-size: 28px;
    line-height: 60px;
    text-align: center;
    padding: 0 10px 0 70px;
    border-radius: 5px 0 0 5px;
}

/* Highlight color for text selected with the mouse */
#cron-generator input[type="text"]::selection {
    background-color: var(--accent-color);
    color: var(--accent-font-color);
}

#cron-generator button#translate {
    border-radius: 0 5px 5px 0;
}

#cron-generator input[type="text"]:focus, #cron-generator select:focus {
    outline: none;
}

#cron-generator .next_exec {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 5px;
}

.select_container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

.select_container span {
    text-align: left;
    margin: 15px 0 0 10px;
    padding: 0px;
    flex: 1;
    font-size: smaller;
}

.select_container select {
    text-align: left;
    padding: 10px;
    display: block;
}

.select_container:has(> #locale), .select_container:has(> #datetimeformat) {
    flex: 2;
    
}

.select_container:has(> #timezone) {
    flex: 2;
    
}

.select_container:has(> #nextexecutions) {
    flex: 1;
    
}

#cron-generator button {
    height: 60px;
    font-size: 20px;
}

button#calcexecution{
    height: 40px;
    font-size: 20px;
    padding:0 10px;
    flex:1;
}


#description {
    margin: 20px 0 10px 0;
    font-size: 30px;
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace;
}

#firstexecution {
    margin: 0px 0 20px 0;
    font-size: 15px;
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace;
}



#cron-legend {
    overflow-x: auto;
    padding: 20px;
    width: calc(100% - 40px);
}

#cron-legend table {
    width: calc(65% + 4px);
    border-collapse: collapse;
    margin: 0 auto;
    margin-bottom: 20px;
}

#cron-legend th,
#cron-legend td {
    border: 2px solid var(--background-color);
    padding: 8px;
    text-align: left;
}

#cron-legend th {
    background-color: var(--accent-color);
    color: var(--accent-font-color);
}

#cron-legend tr:nth-child(odd) {
    background-color: var(--form-border-background-color);
}

#cron-legend tr:nth-child(even) {
    background-color: var(--form-background-color);
}

#cron-legend ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#cron-legend li {
    margin-bottom: 5px;
}


.field-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px auto;
    width: 65%;
    gap: 2px;
}

.field-links a { 
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 5px;
    background: var(--secondary-color);
    color: var(--secondary-font-color);
    text-decoration: none;
    transition: background 0.3s;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    flex: 1;
    
}

.field-links .active { 
    background: var(--accent-color) !important;
    color: var(--accent-font-color) !important;
}

.hide { 
    display: none !important;
}

.break {
    flex-basis: 100%;
    height: 0;
}

#cron-legend {
    padding: 0px;
    width: calc(100%);
}

#next-executions{
    margin: 20px 0;
    padding: 0 20%;
    text-align: left;
}



#executiontimes table {
    border-collapse: collapse;
    margin: 20px auto 20px auto;
    width: 100%;
}

#executiontimes th,
#executiontimes td {
    border: 2px solid var(--background-color);
    padding: 8px;
    text-align: left;
}

#executiontimes th {
    background-color: var(--accent-color);
    color: var(--accent-font-color);
}

#executiontimes tr:nth-child(odd) {
    background-color: var(--form-border-background-color);
}

#executiontimes tr:nth-child(even) {
    background-color: var(--form-background-color);
}

/* Responsive styles */
@media (max-width: 768px) {
    #cron-generator{
        padding: 0;
    }
    
    #cron-generator form {
        flex-direction: column;
        padding: 20px 10px;
    }

    #cron-generator .next_exec {
        flex-direction: column;
    }

    #cron-generator input[type="text"],
    #cron-generator select,
    #cron-generator button {
        width: 100%;
        border-radius: 5px !important;
    }

    #cron-generator input[type="text"]{
        padding: 0 10px 0 10px;
    }


    .select_container {
        width: 100%;
    }

    #cron-legend {
        padding: 0;
    }

    #next-executions{
        padding: 0 10px;
    }

    .field-links {
        width: calc(100% - 20px);
        flex-direction: column;
    }

    #cron-legend table {
        width: 100%;
    }
}