/* Botões */
.dark-btn {
    background-color: var(--dark);
    color: var(--light);
}

.dark-btn:hover, .dark-btn.active {
    background-color: var(--light);
    color: var(--dark);
}

.light-btn {
    background-color: var(--light);
    color: var(--dark);
}

.light-btn:hover, .light-btn.active {
    background-color: var(--dark);
    color: var(--light);
}

.semilight-btn {
    background-color: var(--semilight);
    color: var(--semidark);
}

.semilight-btn:hover, .semilight-btn.active {
    background-color: var(--semidark);
    color: var(--semilight) !important;
}

#btns-action-page {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9;
}

/* Road Links */
a.road-link {
    text-transform: uppercase;
    font-style: italic;
    font-weight: 500;
}

/* Mensagens */
#flash-msg-container {
    position: absolute;
    top: 5px;
    right: 0;
    bottom: 0;
    left: 0;
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
    padding: 5px;
    z-index: 999999;
}

/* Paginação */
.pagination .page-item .page-link {
    background-color: var(--light);
    color: var(--dark);
    border-color: var(--semigrey);
    cursor: pointer;
}

.pagination .page-item.active .page-link, #open-datepicker {
    background-color: var(--semilight);
    font-weight: 700;
}

/* Datepicker */
#div-datepicker {
    position: relative;
}

.ui-datepicker {
    position: absolute;

    right: -1px;
    bottom: calc(100% + 5px);

    background-color: var(--light);
    border-color: var(--semigrey) !important;
    color: var(--dark) !important;
}

.ui-datepicker-header {
    background-color: var(--semilight);
    border: none;
    color: var(--dark) !important;
}

.ui-datepicker-prev span, .ui-datepicker-next span {
    filter: brightness(var(--brightness));
}

.ui-state-default {
    background-color: var(--semilight) !important;
    border-color: var(--semilight) !important;
    color: var(--dark) !important;
}

.ui-state-default:hover {
    background-color: var(--semigrey) !important;
    border-color: var(--semigrey) !important;
}

.ui-state-default.ui-state-active {
    background-color: var(--semigrey) !important;
    border-color: var(--semigrey) !important;
}

.ui-datepicker-calendar .highlight a {
    background-color: var(--semigrey) !important;
    border-color: var(--semigrey) !important;
}

/* Inputs */
input:not(.btn), textarea, select, .custom-file .custom-file-label {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-color) !important;
}

.custom-file .custom-file-label::after, .input-group-text {
    background-color: var(--input-append) !important;
    border-color: var(--input-append) !important;
    color: var(--input-color) !important;
}

.custom-file .custom-file-label::after {
    content: "Procurar";
}

::-webkit-input-placeholder {
    color: var(--input-placeholder) !important;
}

:-moz-placeholder {
    color: var(--input-placeholder) !important;
}

::-moz-placeholder {
    color: var(--input-placeholder) !important;
}

:-ms-input-placeholder {  
    color: var(--input-placeholder) !important;
}

/* Modals */
.modal-content {
    background-color: var(--light);
}