:root { --surface: #121212; --on-surface: #ffffff; --primary: #FF00FF; --secondary: #03dac6; --text-color: #ffffff; --red: #b00020; }
::selection { background-color: var(--primary); color: var(--text-color); }

body { background-color: var(--surface); color: var(--text-color); font-family: Montserrat; height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3 { color: var(--primary); font-weight: 800; text-align: center; letter-spacing: 1; margin: 15px auto; }
a { text-decoration: none; color: var(--secondary); }
a:hover { text-decoration: underline; color: var(--secondary); }
.highlight { color: var(--primary); }

.container { min-height: calc(100% - 50px - 57px); background-color: var(--surface); border-radius: 30px; padding-top: 25px; padding-bottom: 25px; }

.navbar { border-bottom: 1px solid var(--secondary); }
.nav-item { margin: auto; padding-right: 10px; }
.nav-link { color: var(--text-color); }
.nav-link:hover { color: var(--secondary); }
.dropdown-menu { background-color: var(--surface); color: var(--secondary); margin-top: 5px; }
.dropdown-item { color: var(--on-surface); }
.dropdown-item:hover { background-color: transparent; color: var(--secondary); }
.dropdown-divider { border-color: var(--secondary); }

input[type="file"] { display: none; }
.input-group-text { background-color: transparent; color: var(--text-color); border: 0; }
.input-group-text { border-bottom: 1px solid; border-radius: 0; }
.form-control, .form-control:focus { background: transparent; color: var(--text-color); border-radius: 0; border: 0; border-bottom: 1px solid var(--text-color); }
.form-control:focus { box-shadow: none; }

.logo { max-height: 40px; }
.avatar { max-width: 40px; height: auto; padding: 0; margin: 0 auto; border-radius: 100%; }
.loadImage { cursor: pointer; }
.loadImage .avatar { max-height: 37px; padding: 2px; margin-right: 10px; }
.loadImage:hover { color: var(--secondary); text-decoration: underline; }

.toast-container { top: 50px; }
.toast-header { background-color: var(--red); color: var(--text-color); border: 0; border-radius: calc(.25rem - 1px); }
.btn-close { background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat }
.btn-close:focus { box-shadow: none; }

.btn-personalized { position: relative; color: var(--text-color); background-color: var(--primary); border-color: var(--primary); margin-bottom: 15px; }
.btn-personalized:hover, .btn-personalized:active { color: var(--text-color); font-weight: 600; background-color: transparent; border-color: var(--primary); }
.btn-personalized:focus { color: var(--text-color); background-color: transparent; border-color: var(--primary); box-shadow: 0 0 .25rem rgba(167, 133, 162, 0.4); }
.btn-personalized i { position:absolute; line-height: 24px; top:50%; margin-top: -12px; left: 10px; font-size: 1.75rem; }

.modal-content { background-color: var(--surface); }

.accordion { border: 1px solid var(--primary); }
.accordion-header { border-bottom: 1px solid; }
.accordion-button { background-color: var(--surface) !important; color: var(--secondary) !important; }
.accordion-button:focus { border-color: transparent; box-shadow: none; }
.accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2303dac6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
.accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2303dac6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
.accordion-item { background-color: var(--surface); }
.accordion-collapse.collapse.show { border-bottom: 1px solid var(--primary); }

.telephone { height: 750px; }
.telephone iframe { width: 100%; height: 100%; }

.footer { position: relative; text-align: center; font-size: 12px; margin: 15px auto; }
.footer p { margin-bottom: 0; }

@media only screen and (max-width: 600px) {
    .accordion-middle { margin-top: 0; }
    .container { min-height: max-content; }
}