@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Material+Icons:400&display=swap');

.bth-scope {
    font-family: 'Open Sans', Arial, sans-serif !important;
    font-size: 14px !important;
    color: #242424 !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .3) !important;
}

    .bth-scope *,
    .bth-scope *::before,
    .bth-scope *::after {
        box-sizing: border-box;
    }

    .bth-scope > .modal-header,
    .bth-scope > .modal-body,
    .bth-scope > .modal-footer {
        display: none !important;
    }

    .modal .modal-content .modal-body {
        padding: 10px 15px;
    }

    /* ===== HEADER ===== */
    .bth-scope .bth-header {
        margin: 0 15px;
        padding: 10px 0;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .bth-scope .bth-title {
        font-size: 19px !important;
        font-weight: 500 !important;
        line-height: 1.42857 !important;
        color: inherit !important;
        margin: 0 !important;
        border: none !important;
        padding: 0 !important;
        background: none !important;
    }

    .bth-scope .bth-close-btn {
        color: #bfbfc0;
        font-size: 30px;
        font-weight: 300;
        line-height: 15px;
        opacity: 1;
        padding: 0;
        border: none !important;
        background: none !important;
        cursor: pointer;
        float: none;
    }

        .bth-scope .bth-close-btn:hover {
            color: #000;
            opacity: .5;
        }

    /* ===== BODY ===== */
    .bth-scope .bth-body {
        padding: 10px 15px 0 15px;
    }

    /* ===== CARD ===== */
    .bth-scope .bth-card {
        background-color: #f5f5f5 !important;
        border-radius: 6px !important;
        margin-bottom: 10px !important;
        padding: 8px 8px 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

        .bth-scope .bth-card::after {
            content: "";
            display: table;
            clear: both;
        }

    /* ===== GRID ===== */
    .bth-scope .bth-row {
        margin-left: -4px;
        margin-right: -4px;
        margin-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
    }

        .bth-scope .bth-row::after {
            content: "";
            display: table;
            clear: both;
        }

    .bth-scope .bth-row-nowrap {
        flex-wrap: nowrap !important;
    }

    .bth-scope .bth-col-12 {
        width: 100%;
        padding: 0 4px;
        min-height: 1px;
    }

    .bth-scope .bth-col-85 {
        width: calc(100% - 140px);
        padding: 0 4px;
        min-height: 1px;
    }


    .bth-scope .bth-col-15 {
        width: 140px;
        padding: 0 4px;
        min-height: 1px;
        flex-shrink: 0;
    }

    .bth-scope .bth-col-7 {
        width: 58.33333%;
        padding: 0 4px;
        min-height: 1px;
    }

    .bth-scope .bth-col-6 {
        width: 50%;
        padding: 0 4px;
        min-height: 1px;
    }

    .bth-scope .bth-col-4 {
        width: 33.33333%;
        padding: 0 4px;
        min-height: 1px;
    }

    .bth-scope .bth-col-3 {
        width: 25%;
        padding: 0 4px;
        min-height: 1px;
    }

    .bth-scope .bth-col-2 {
        width: 16.66667%;
        padding: 0 4px;
        min-height: 1px;
    }

    /* ===== LABELS ===== */
    .bth-scope .bth-label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 2px;
        color: #59595a !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        padding: 0;
    }

    .bth-scope .bth-required span {
        color: #c42722;
        margin-left: 2px;
    }

    .bth-scope .bth-label abbr[title] {
        text-decoration: none;
        cursor: help;
        border-bottom: 1px dotted #777;
    }

    /* ===== INPUTS ===== */
    .bth-scope .bth-input {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 13px !important;
        line-height: 1.42857;
        color: #242424 !important;
        background-color: #fff !important;
        border: 1px solid #bfbfc0 !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        transition: none;
        background-image: none;
        font-family: 'Open Sans', Arial, sans-serif;
    }

        .bth-scope .bth-input:focus {
            border-color: #3374db !important;
            outline: 0;
            box-shadow: none !important;
        }

        /* ===== INPUTS READONLY/DISABLED (Padrão Betha) ===== */
        .bth-scope .bth-input[disabled],
        .bth-scope .bth-input[readonly] {
            background-color: #ededed !important;
            cursor: not-allowed !important;
        }

        .bth-scope .bth-input[disabled] {
            border-color: #bfbfc0 !important;
            color: #757576 !important;
        }

    .bth-scope select.bth-input {
        -webkit-appearance: menulist;
        -moz-appearance: menulist;
        appearance: menulist;
    }

    .bth-scope .bth-row {
        margin-left: -4px;
        margin-right: -4px;
        margin-bottom: 10px;
        /* padding: 0 11px; */
        display: flex;
        flex-wrap: wrap;
    }

    /* ===================
   TABS
   =================== */
    .bth-scope .bth-tabs {
        margin: 0 0 15px 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        border-bottom: 2px solid #e3e3e3;
        color: #757576;
        font-weight: 600;
    }

        .bth-scope .bth-tabs li {
            margin-bottom: -2px;
        }

            .bth-scope .bth-tabs li a {
                display: block;
                padding: 8px 14px;
                font-size: 14px !important;
                font-weight: 400;
                text-transform: uppercase;
                color: #757576;
                text-decoration: none;
                cursor: pointer;
                border-bottom: 2px solid transparent;
            }

                .bth-scope .bth-tabs li a:hover {
                    color: #3374db;
                    border-bottom: 2px solid #e3e3e3;
                }

            .bth-scope .bth-tabs li.bth-tab-active a {
                font-weight: 600;
                color: #3374db;
                border-bottom: 2px solid #3374db;
            }

    /* ===== IMAGE CONTAINER ===== */
    .bth-scope .bth-image-container {
        background-color: #fff;
        background-image: url('https://cdn.betha.cloud/base/g4/design/4.0.2/assets/images/brasao.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        border: 1px solid #ededee;
        height: 128px;
        width: 128px;
        position: relative;
        overflow: hidden;
    }

    .bth-scope .bth-image-overlay {
        background: rgba(0, 0, 0, .3);
        display: block;
        height: 100%;
        opacity: 0;
        text-align: center;
        transition: opacity .5s;
        width: 100%;
        position: relative;
        z-index: 2;
    }

    .bth-scope .bth-image-container:hover .bth-image-overlay {
        opacity: 1;
    }

    .bth-scope .bth-status-title {
        font-size: 18px !important;
        font-weight: 500 !important;
        line-height: 1.42857 !important;
        color: #000 !important;
        border-top: 1px solid #e0e5ec !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        background: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    /* ===== CHECKBOXES BETHA ===== */
    .bth-scope .bth-checkboxes {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 10px 0;
    }

    .bth-scope .bth-checkbox {
        display: block;
        margin: 0;
        min-height: 20px;
        padding-left: 0;
        position: relative;
        user-select: none;
    }

        .bth-scope .bth-checkbox input[type="checkbox"] {
            opacity: 0;
            position: absolute !important;
            z-index: 1;
            width: 15px;
            height: 15px;
            cursor: pointer;
            margin: 0;
        }

        .bth-scope .bth-checkbox label {
            cursor: pointer;
            font-weight: 400 !important;
            margin-bottom: 0;
            min-height: 20px;
            display: inline-block;
            padding-left: 24px;
            position: relative;
            vertical-align: middle;
            color: #242424 !important;
            font-family: 'Open Sans', Arial, sans-serif;
            font-size: 14px !important;
            text-indent: 0;
            line-height: 20px;
        }

            .bth-scope .bth-checkbox label::before {
                content: "";
                background-color: #fff;
                border: 2px solid #bfbfc0;
                border-radius: 4px;
                display: inline-block;
                height: 16px;
                width: 16px;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                transition: border .15s ease-in-out, color .15s ease-in-out;
            }

            .bth-scope .bth-checkbox label::after {
                display: inline-block;
                height: 16px;
                width: 16px;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                text-align: center;
                text-indent: 0;
                color: #59595a;
                font-size: 14px;
                -webkit-font-smoothing: antialiased;
                line-height: 16px;
                content: "";
            }

        .bth-scope .bth-checkbox input[type="checkbox"]:checked + label::after {
            content: "check";
            font-family: 'Material Icons', Arial, sans-serif;
            background-color: #3374db;
            border-radius: 4px;
            color: #fff;
            text-transform: lowercase;
        }

    /* ===== FOOTER ===== */
    .bth-scope .bth-footer {
        margin: 0 15px;
        padding: 10px 0;
        border-top: 1px solid #f5f5f5;
        text-align: right;
    }

    /* ===== BUTTONS ===== */
    .bth-scope .bth-btn {
        display: inline-block;
        margin-bottom: 0;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        white-space: nowrap;
        padding: 6px 12px;
        font-size: 14px !important;
        line-height: 1.475;
        border-radius: 4px !important;
        font-family: 'Open Sans', Arial, sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        user-select: none;
        letter-spacing: 0.3px;
    }

        .bth-scope .bth-btn:hover {
            text-decoration: none;
        }

        .bth-scope .bth-btn + .bth-btn {
            margin-left: 5px;
        }

    .bth-scope .bth-btn-primary {
        background-color: #3374db !important;
        border: 1px solid #3374db !important;
        color: #fff !important;
    }

        .bth-scope .bth-btn-primary:hover {
            background-color: #215cba !important;
            border: 1px solid #215cba !important;
        }

    .bth-scope .bth-btn-default {
        background-color: #fff !important;
        border: 1px solid #bfbfc0 !important;
        color:  !important;
    }

        .bth-scope .bth-btn-default:hover {
            background-color: #ededee !important;
        }

.bth-scope .bth-btn-succes {
    background-color: #329a72 !important;
    border: 1px solid #329a72 !important;
    color: #fff !important;
}

    .bth-scope .bth-btn-succes:hover {
        background-color: #329a72 !important;
        border: 1px solid #329a72 !important;
    }

@media (max-width: 767px) {

    .bth-scope .bth-col-15,
    .bth-scope .bth-col-85,
    .bth-scope .bth-col-12,
    .bth-scope .bth-col-6,
    .bth-scope .bth-col-4,
    .bth-scope .bth-col-3 {
        width: 100% !important;
    }

    .bth-scope .bth-row-nowrap {
        flex-wrap: wrap !important;
    }

        .bth-scope .bth-row-nowrap > div {
            width: 100% !important;
            margin-bottom: 8px;
        }

    .bth-scope .bth-image-container {
        margin: 0 auto 10px;
    }
}

.field-error .form-control,
.field-error .select2-choice,
.field-error .select2-choices {
    border-color: #dd413c !important;
}


.bth-scope .bth-field-error .bth-input {
    border-color: #dd413c !important;
}

    .bth-scope .bth-field-error .bth-input:focus {
        border-color: #dd413c !important;
    }

.bth-scope .bth-tooltip-error {
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    padding: 8px 10px;
    font-size: 12px;
    color: #242424;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    border-radius: 4px;
    z-index: 9999;
    white-space: nowrap;
}

.bth-scope .bth-field {
    position: relative;
}

/* campo vermelho */
.bth-scope .bth-field-error .bth-input {
    border-color: #dd413c !important;
}

/* tooltip */
.bth-scope .bth-tooltip-error {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    padding: 6px 8px;
    font-size: 12px;
    color: #242424;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    border-radius: 4px;
    white-space: nowrap;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

/* mostra no hover */
.bth-scope .bth-field-error:hover .bth-tooltip-error {
    opacity: 1;
}

@keyframes bth-shake {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-8px);
    }

    40% {
        transform: translateX(8px);
    }

    60% {
        transform: translateX(-6px);
    }

    80% {
        transform: translateX(6px);
    }

    100% {
        transform: translateX(0);
    }
}

.bth-modal-shake {
    animation: bth-shake 0.4s ease;
}

.bth-page-wrapper {
    padding-bottom: 20px;
    width: calc(100% - 16px);
    padding-left: 15px;
    padding-right: 15px;
}

/* Alerta acima da modal */
#alert-container {
    z-index: 99999 !important;
}

/* Container principal */
.bth-scope .choices,
.bth-body .choices {
    margin-bottom: 0 !important;
}

.bth-scope .choices__inner,
.bth-body .choices__inner {
    background-color: #fff !important;
    border: 1px solid #d1d1d1 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    min-height: 34px !important;
    font-size: 14px !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
    line-height: 1.5 !important;
}

    .bth-scope .choices__inner:hover,
    .bth-body .choices__inner:hover {
        border-color: #b0b0b0 !important;
    }

.bth-scope .choices.is-focused .choices__inner,
.bth-body .choices.is-focused .choices__inner {
    border-color: #3374db !important;
    box-shadow: 0 0 0 1px rgba(51, 116, 219, 0.2) !important;
}

/* Input de busca */
.bth-scope .choices__input,
.bth-body .choices__input {
    background-color: transparent !important;
    font-size: 14px !important;
    color: #242424 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

    .bth-scope .choices__input::placeholder,
    .bth-body .choices__input::placeholder {
        color: #9a9a9a !important;
    }

/* Placeholder */
.bth-scope .choices__placeholder,
.bth-body .choices__placeholder {
    color: #9a9a9a !important;
    opacity: 1 !important;
}

/* Item selecionado */
.bth-scope .choices__item--selectable,
.bth-body .choices__item--selectable {
    padding: 8px 10px !important;
    font-size: 14px !important;
}

    .bth-scope .choices__item--selectable.is-highlighted,
    .bth-body .choices__item--selectable.is-highlighted {
        background-color: #f5f5f5 !important;
        color: #242424 !important;
    }

/* Dropdown */
.bth-scope .choices__list--dropdown,
.bth-body .choices__list--dropdown {
    border: 1px solid #d1d1d1 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    margin-top: 2px !important;
    z-index: 9999 !important;
}

    .bth-scope .choices__list--dropdown .choices__item,
    .bth-body .choices__list--dropdown .choices__item {
        padding: 8px 10px !important;
        font-size: 14px !important;
        color: #242424 !important;
    }

    .bth-scope .choices__list--dropdown .choices__item--selectable.is-highlighted,
    .bth-body .choices__list--dropdown .choices__item--selectable.is-highlighted {
        background-color: #f5f5f5 !important;
        color: #242424 !important;
    }

/* Seta do dropdown */
.bth-scope .choices::after,
.bth-body .choices::after {
    border-color: #757576 transparent transparent transparent !important;
    right: 12px !important;
    top: 50% !important;
    margin-top: -2px !important;
}

.bth-scope .choices.is-open::after,
.bth-body .choices.is-open::after {
    border-color: transparent transparent #757576 transparent !important;
    margin-top: -6px !important;
}

/* Item selecionado (single) */
.bth-scope .choices__list--single,
.bth-body .choices__list--single {
    padding: 0 !important;
}

    .bth-scope .choices__list--single .choices__item,
    .bth-body .choices__list--single .choices__item {
        padding: 0 !important;
        font-size: 14px !important;
        color: #242424 !important;
    }

/* Sem resultados */
.bth-scope .choices__list--dropdown .choices__item--disabled,
.bth-body .choices__list--dropdown .choices__item--disabled {
    color: #9a9a9a !important;
    font-style: italic !important;
}

/* Lista */
.bth-scope .choices__list--dropdown .choices__list,
.bth-body .choices__list--dropdown .choices__list {
    max-height: 250px !important;
}

.bth-scope .choices.is-disabled .choices__inner,
.bth-body .choices.is-disabled .choices__inner {
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
}

/* Input de busca dentro do dropdown */
.bth-scope .choices__list--dropdown .choices__input,
.bth-body .choices__list--dropdown .choices__input {
    padding: 10px 12px !important;
    border-bottom: 1px solid #e3e3e3 !important;
    margin-bottom: 5px !important;
}

/* Esconde a opção placeholder no dropdown */
.bth-scope .choices__list--dropdown .choices__item--choice[data-value=""],
.bth-body .choices__list--dropdown .choices__item--choice[data-value=""] {
    display: none !important;
}

/* Corrige Choices.js dentro da modal (dropdown sendo cortado quando no final da modal) */

/* Força o dropdown do Choices.js a aparecer por cima de tudo */
.choices__list--dropdown {
    z-index: 999999 !important;
}

/* Remove overflow hidden da modal */
#modalMovimentacaoFinanceira .modal-dialog,
#modalMovimentacaoFinanceira .modal-content,
#modalMovimentacaoFinanceira .bth-body,
#modalMovimentacaoFinanceira .bth-tab-content,
#modalMovimentacaoFinanceira .bth-row,
#modalMovimentacaoFinanceira .bth-col-6,
#modalMovimentacaoFinanceira .bth-field {
    overflow: visible !important;
}

/* Erro no Choices.js 
(corrige problema da classe .bth-field-error não aplicar a borda diretamente com choices.js) */

.bth-field-error .choices__inner {
    border-color: #dc3545 !important;
}