@import url(sabesp.css);
@import url(nav.css);

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
    user-select: none;
}

@media (min-width: 768px) {
}

body {
    margin-bottom: 40px;
}

footer {
    font-size: 8pt !important;
    height: 46px;
    width: 100%;
}

a {
    pointer-events: auto;
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
}

    a[disabled] {
        pointer-events: none !important;
        cursor: not-allowed !important;
    }

.hide {
    display: none !important;
}

ul.logout {
    position: absolute !important;
}

/*Formulários*/
input[readonly], input[readonly] + label[for], select[readonly], textarea[readonly] {
    pointer-events: none;
}

input[type='radio'], input[type='checkbox'] {
    accent-color: var(--color-sabesp-azul-escuro);
}

    input[type='radio'][readonly], input[type='checkbox'][readonly] {
        accent-color: var(--bs-secondary)
    }

label[for]:has(~ :is([disabled])) {
    color: var(--bs-gray-400) !important;
}

.form-label[for]::after {
    content: ":";
    color: inherit;
}

[disabled] {
    filter: grayscale(.75);
    opacity: .4;
}

textarea {
    outline: none;
    resize: none;
}

.bg-primary {
    background-color: var(--color-sabesp-azul-escuro) !important;
    border-color: var(--color-sabesp-azul-escuro) !important;
}

.btn.btn-primary {
    background-color: var(--color-sabesp-azul-escuro);
    border-color: var(--color-sabesp-azul-escuro);
    width: 100%;
}

.btn:hover {
    opacity: .9;
}

.btn.btn-link {
    border: 1px solid;
    border-color: #ccc;
    border-radius: 3px;
    color: var(--color-sabesp-cinza-escuro);
    text-decoration: none;
}

    .btn.btn-link:hover {
        color: var(--color-sabesp-azul-esverdeado);
    }

.far.fa-eye,
.far.fa-eye-slash {
    cursor: pointer;
    color: inherit;
    float: right;
    transform: translate(-10px, 28px);
}

    .far.fa-eye:hover,
    .far.fa-eye-slash:hover {
        opacity: .8;
        color: var(--color-sabesp);
    }

.fa-solid:hover {
    opacity: 0.8 !important;
}

.bg-transparent {
    background-color: transparent;
}

/*Validations*/
required-mark {
    font: inherit;
    color: inherit;
}

    required-mark::before {
        color: var(--bs-danger);
        content: "*";
        position: absolute;
        top: 0.25rem;
        left: 0.25rem;
    }

.input-validation-error,
textarea:has(+ .field-validation-error) {
    border-color: var(--bs-danger);
}

    .input-validation-error:focus,
    textarea:has(+ .field-validation-error):focus {
        border-color: var(--bs-danger);
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb),.25) !important;
    }

textarea + .field-validation-error {
    display: none;
}

.field-validation-error {
    color: var(--bs-danger);
}

.alert:has(.field-validation-valid) {
    display: none;
}

button:has(~ .alert .field-validation-error) {
    display: none;
}

.alert .field-validation-error {
    color: inherit;
}

/*Swall*/

.sa-button-container,
.sa-button-container button {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .sa-button-container button.cancel {
        order: 2;
    }

/*Summernote*/
.note-icon-caret {
    display: none;
}


/*Files*/

[filebox] {
    box-sizing: border-box;
    height: 180px;
    background-color: var(--bs-gray-100); /* !important;*/
}

    [filebox]:has(*) {
        overflow-x: scroll;
    }

    [filebox].drag {
        overflow: hidden;
    }

        [filebox]::before, [filebox].drag::before {
            display: flex !important;
            position: relative;
            height: 110px;
            min-width: calc(100% + 5px);
            left: inherit;
            content: attr(title);
            background-image: url("../img/fileIn.svg");
            background-repeat: no-repeat;
            background-position: 50%;
            color: var(--bs-gray);
            background-color: inherit;
            align-items: flex-end;
            justify-content: space-around;
            cursor: pointer;
            overflow: hidden;
        }

    [filebox]:has(*)::before, [filebox][readonly]::before {
        display: none !important;
    }

    [filebox] * {
        pointer-events: none;
    }

    [filebox] img {
        cursor: pointer;
        pointer-events: auto !important;
        min-height: 100px;
        max-height: 100px;
    }

    [filebox]:has(+ .field-validation-error:not(.d-none)) {
        border-color: var(--bs-danger);
    }

    [filebox] button {
        cursor: pointer !important;
        pointer-events: all;
        width: 1px;
        height: 1px;
        color: #000;
        background: transparent;
        border: 0;
        border-radius: .25rem;
        opacity: .5;
        transform: translate(50px, 10px)
    }

        [filebox] button:hover {
            text-shadow: 0px 0px 10px var(--bs-danger);
            opacity: .6;
        }

    [filebox] .card:has(button:hover) {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), .25) !important;
    }

/*Grupos*/
.group {
    margin-bottom: .25rem !important;
}

    .group label:first-child {
        font-weight: 600;
    }

    .group :has(~ .field-validation-error) ~ div {
        outline: 1px dashed rgba(var(--bs-danger-rgb), .35);
        margin-left: initial;
    }

/*Full-screen loader*/

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f9fb;
    opacity: 0.75;
    transition: opacity 0.75s, visibility 0.75s;
    z-index: 2000;
}

.loader-hidden {
    opacity: 0;
    visibility: hidden;
}

.loader::after {
    content: "";
    width: 75px;
    height: 75px;
    border: 15px solid #dddddd;
    border-top-color: #0083c7;
    border-radius: 50%;
    animation: loading 0.75s ease infinite;
}

@keyframes loading {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}

.hideControl {
    display: none;
}

nav h3 {
    color: var(--color-sabesp-cinza)
}

#dropdownLogout::after {
    display: none;
}

.span-table {
    color: #7F7F7F;
    font-size: 13px;
}

@media (min-width: 320px) and (max-width: 767px) {
    .span-table {
        font-size: 10px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .span-table {
        font-size: 12px;
    }
}

.renderBody {
    overflow: hidden;
}

/*Telas com filtro*/
.button-clear {
    right: 30px;
    z-index: 3;
}

@media (min-width: 320px) and (max-width: 1024px) {
    .negative-margin {
        margin-top: -16px;
    }

    .negative-container {
        margin-top: -5px;
    }
}

.input-group .btn {
    position: relative;
    z-index: 3;
}

td.dt-empty {
    display: none;
}

#filterButton {
    height: 42px;
    width: 42px;
    border-color: var(--color-sabesp-azul-petroleo) !important;
}

    #filterButton > i {
        color: var(--color-sabesp-azul-petroleo);
    }

#appliedFilters {
    background-color: var(--color-sabesp-verde-escuro);
    opacity: .7;
    height: 15px;
    font-size: xx-small;
    width: 15px;
    height: 12px;
    vertical-align: middle;
    text-align: center;
}

/*TabControl*/


.tabs-custom {
    color: var(--color-sabesp-cinza-escuro);
    border-bottom: 2px solid transparent;
}

    .tabs-custom:hover, .tabs-custom.active {
        color: var(--color-sabesp-azul-petroleo);
        border-bottom: 2px solid var(--color-sabesp-azul-petroleo);
    }

a[disabled].tabs-custom {
    color: var(--color-sabesp-cinza);
    opacity: .5;
}

/*input type number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.select2-container--bootstrap-5 
.select2-selection--multiple 
.select2-selection__rendered 
.select2-selection__choice {
    width: fit-content;
}

.select2-container--bootstrap-5 .select2-dropdown {
    z-index: 1000 !important;
}