p {
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(90deg, #5383b1, #1f3d59);
    padding: 40px 80px;
}

    body > div:not(#toast) {
        display: flex;
        flex: 1;
    }

        body > div:not(#toast) > main[role="main"] {
            display: flex;
            width: 100%;
        }

#root {
    display: flex;
    justify-content: center;
    gap: 40px;
    background: #f9f9f9;
    border-radius: 5px;
    padding: 40px;
    width: 100%;
}

    #root > div,
    #root > form {
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 100%;
    }

#content {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #fff;
    padding: 40px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

    #content > h1 {
        font-size: 2rem;
        color: #1f3d59;
        font-weight: 700;
    }

    #content > p {
        color: #1f3d59;
        font-weight: 600;
        margin-block: 40px;
    }

    #content ~ footer {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }


/* BOTÕES */

button:not(.btn-default) {
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 5px;
    padding: 8px 20px;
    font-size: 0.9rem;
}

button:not(.btn-default, .btn-success) {
    background: #ccc;
}

.btn-default {
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    background: linear-gradient(90deg, #5383b1, #1f3d59);
    border-radius: 5px;
    padding: 8px 20px;
    font-size: 0.9rem;
    color: #fff;
}

button > p {
    user-select: none;
}

.btn-default:disabled {
    background: #ccc;
    color: #a0a0a0;
    cursor: not-allowed;
}

#content .form-group {
    margin-block: 15px;
}

    #content .form-group > label {
        position: relative;
        font-weight: 500;
        margin-bottom: 5px;
    }

#root > aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 40px;
    max-width: 100%;
    width: 700px;
}

    #root > aside > div {
        position: sticky;
        top: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding-top: 30px;
        margin-top: 80px;
    }

    #root > aside img {
        width: 150px;
        filter: invert(100%) opacity(15%);
        margin-bottom: 30px;
        text-align: center;
        margin-inline: auto;
    }

    #root > aside p {
        text-align: center;
    }


.form-group:has(#Comite), .form-group:has(#Parceria) {
    display: none;
}

#content:has(#possuiComite:checked) .form-group:has(#Comite) {
    display: block;
}

#content:has(#possuiParceria:checked) .form-group:has(#Parceria) {
    display: block;
}





input:-webkit-autofill, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:focus {
    transition: background-color 0s 1000000s, color 0s 1000000s !important;
}

.upload {
    display: block;
    border: 1px solid #1f3d59;
    border-radius: 5px;
    padding: 8px 16px;
    text-align: center;
    font-size: 0.9rem;
    max-width: 100%;
    width: 300px;
    cursor: pointer;
    position: relative;
}

    .upload.has-file > p {
        max-width: 100%;
        width: 240px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .upload > button {
        display: none;
        position: absolute;
        padding: 3px;
        border-radius: 50%;
        top: 9px;
        right: 14px;
    }

    .upload.has-file > button {
        display: flex;
    }



.checkbox-container {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    width: fit-content;
    gap: 8px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 16px;
    padding-left: 30px;
}

.checkmark {
    position: absolute;
    width: 100%;
    height: 18px;
    border-radius: 0.25rem;
    cursor: pointer;
}

    .checkmark::before {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        top: 0;
        left: 0;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
    }

.checkbox-container input:checked + .checkmark::after {
    content: '';
    position: absolute;
    left: 1px;
    top: 1px;
    margin: auto;
    height: calc(100% - 2px);
    aspect-ratio: 1 / 1;
    background: #5273ff;
    border: 2px solid transparent;
    border-radius: 4px;
    background-clip: content-box;
}

#root > form > .inciso-trigger {
    display: none;
}

@media (max-width: 1000px) {
    body {
        padding: 20px 40px;
    }

    #root > aside {
        width: 500px;
        padding-inline: 0;
    }
}

@media (max-width: 800px) {
    #root {
        flex-direction: column-reverse;
    }

        #root > aside {
            width: 100%;
            padding: 0;
            margin: 0;
        }

            #root > aside > div {
                padding: 0;
                margin: 0;
            }

                #root > aside > div > .inciso-trigger {
                    display: none;
                }

        #root > form > .inciso-trigger {
            display: block;
        }
}

@media (max-width: 600px) {
    body {
        padding: 10px;
    }

    #root, #content {
        padding: 20px;
    }
}