static/style.css

/* Estilos gerais */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #7fafcf;
    color: #31333F;
}

.stApp {
    padding: 4rem;
}


/* Estilo para o data editor */
.stDataFrame {
    border: none !important;
    width: 100% !important;
    padding: initial !important;
    align-self: center !important;
    cursor: pointer;
    border-radius: 15px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    box-shadow: rgba(85, 91, 100, 0.411) 20px 10px 17px 0px, rgb(99, 111, 119) 20px 8px 20px !important;
    background: linear-gradient(180deg, #5f5fe73b, #f0505047) !important;
}

.stDataFrame table {
    border-collapse: separate !important;
    background-color: #719fe7 !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.stDataFrame th {
    background-color: #E6E7EB !important;
    color: #31333F !important;
    font-weight: bold !important;
    padding: 15px 12px !important;
    text-align: left !important;
    border-bottom: 2px solid #D1D9E6 !important;
}

.stDataFrame td {
    background-color: #FFFFFF !important;
    color: #31333F !important;
    padding: 12px !important;
    border-bottom: 1px solid #E6E7EB !important;
}

.stDataFrame tr:last-child td {
    border-bottom: none !important;
}

.stDataFrame tr:hover td {
    background-color: #F8F9FA !important;
}

/* Estilo para as métricas */
div[data-testid="stMetricValue"] {
    background: linear-gradient(145deg, #E6E7EB, #FFFFFF) !important;
    border: none !important;
    border-radius: 15px !important;
    padding: 20px !important;
    box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF !important;
    transition: all 0.3s ease !important;
}

div[data-testid="stMetricValue"]:hover {
    transform: translateY(-5px) !important;
    box-shadow: 12px 12px 20px #D1D9E6, -12px -12px 20px #FFFFFF !important;
}

div[data-testid="stMetricLabel"] {
    font-size: 16px !important;
    color: #6C757D !important;
    margin-bottom: 8px !important;
}

div[data-testid="stMetricValue"] > div {
    font-size: 28px !important;
    font-weight: bold !important;
    color: #4A90E2 !important;
}


/* Estilo para os botões */
.stButton button {
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 24px !important;
    font-weight: bold !important;
    font-size: 18px !important;
    transition: all 0.3s ease !important;
    background: linear-gradient(145deg, #ebeae6, #FFFFFF) !important;
    color: #31333F !important;
    box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF !important;
}

.stCheckbox stCheckbox {
    margin-left: 1px !important;
    align-content: normal !important;
    transform: scale(0.8) !important;
    color: #2572b6 !important;
    font-palette: #a77406 !important;

}
.stButton button:hover {
    font-size: large !important;
    font-weight: bolder !important;
    transform: translateY(-2px) !important;
    box-shadow: 12px 12px 20px #D1D9E6, -12px -12px 20px #FFFFFF !important;
    background: linear-gradient(145deg, #E6F3FF, #C5E4FF) !important;
    color: #7aaad4 !important;
}

.stButton button:active {
    transform: translateY(1px) !important;
    box-shadow: inset 5px 5px 10px #B3D7FF, inset -5px -5px 10px #FFFFFF !important;
    background: linear-gradient(145deg, #9bc3e5, #E6F3FF) !important;
}


.stSelectbox selectbox {
    background: linear-gradient(145deg, #e6e7eb, #ffffff) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 20px !important;
    color: #31333F !important;
    box-shadow: 
        8px 8px 16px #d1d9e6,
        -8px -8px 16px #ffffff,
        inset 2px 2px 4px #d1d9e6,
        inset -2px -2px 4px #ffffff !important;
    transition: all 0.3s ease !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}




/* Estilo para inputs e selects */
.stTextInput input, .stSelectbox select {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    color: #31333F !important;
    align-content: jusify-content !important;
    box-shadow: inset 5px 5px 10px #D1D9E6, inset -5px -5px 10px #FFFFFF !important;
}

.stTextInput input:focus, .stSelectbox select:focus {
    box-shadow: inset 7px 7px 12px #D1D9E6, inset -7px -7px 12px #FFFFFF !important;
    outline: none !important;
}

/* Estilo para o título */
h1 {
    color: #9f4707 !important;
    font-size: 2.5rem !important;
    margin-bottom: 1.5rem !important;
    text-shadow: 2px 2px 4px #D1D9E6 !important;
}

/* Estilo para subheaders */
h2, h3 {
    color: #9f4707 !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    text-shadow: 2px 2px 6px #e9d3be !important;
    
}

h4, h5, h6 {
    color: #9f4707 !important;
    margin-top: 2rem !important;
    margin-bottom: 0rem !important;
    text-shadow: 2px 2px 6px #e9d3be !important;

}

/* Estilo para links */
a {
    color: #e28f4b !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

p, ol, ul, dl {
    margin: 0px 0px 1rem;
    padding: 0px;
    font-size: 1.1rem;
    font-weight: 400;
    color: #9f4707;
}


a:hover {
    color: #cea022 !important;
}
/* Estilo aprimorado para o text box de processamento de texto */
.stTextArea textarea {
    background: linear-gradient(145deg, #e6e7eb, #ffffff) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 20px !important;
    color: #31333F !important;
    box-shadow: 
        8px 8px 16px #d1d9e6,
        -8px -8px 16px #ffffff,
        inset 2px 2px 4px #d1d9e6,
        inset -2px -2px 4px #ffffff !important;
    transition: all 0.3s ease !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

.stTextArea textarea:focus {
    box-shadow: 
        12px 12px 20px #d1d9e6,
        -12px -12px 20px #ffffff,
        inset 4px 4px 8px #d1d9e6,
        inset -4px -4px 8px #ffffff !important;
    outline: none !important;
    transform: translateY(-2px) !important;
}

.stTextArea textarea::placeholder {
    color: #9aa0a8 !important;
}
/
/* Estilo para o container do text box */
/*.stTextArea > div {
    border-radius: 22px !important;
    padding: 2px !important;
    background: linear-gradient(145deg, #d1d9e6, #ffffff) !important;
    box-shadow: 
        10px 10px 20px #b8bfcc,
        -10px -10px 20px #ffffff !important;
}

/* Ajuste para o label do text box */
.stTextArea label {
    background: transparent !important;
    color: #4A90E2 !important;
    font-weight: bold !important;
    font-size: 18px !important;
    margin-bottom: 8px !important;
    text-shadow: 1px 1px 2px #ffffff, -1px -1px 2px #d1d9e6 !important;
}

/* Estilo para o formulário */
form {
    background: linear-gradient(145deg, #E6E7EB, #FFFFFF) !important;
    border-radius: 20px !important;
    padding: 25px !important;
    box-shadow: 8px 8px 15px #D1D9E6, -8px -8px 15px #FFFFFF !important;
    transition: all 0.3s ease !important;
}

form:hover {
    transform: translateY(-5px) !important;
    box-shadow: 12px 12px 20px #D1D9E6, -12px -12px 20px #FFFFFF !important;
}

/* Estilo para os inputs dentro do formulário */
/*form .stTextInput input, form .stTimeInput input, form .stNumberInput input {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    color: #31333F !important;
    box-shadow: inset 5px 5px 10px #D1D9E6, inset -5px -5px 10px #FFFFFF !important;
    transition: all 0.3s ease !important;
}

form .stTextInput input:focus, form .stTimeInput input:focus, form .stNumberInput input:focus {
    box-shadow: inset 7px 7px 12px #D1D9E6, inset -7px -7px 12px #FFFFFF !important;
    outline: none !important;
}

/* Estilo para o botão dentro do formulário */
form .stButton button {
    width: 100% !important;
    margin-top: 15px !important;
}