:root {
    
    --color-black: #000;
    --color-white: #fff;
    
    --color-gray: #212529;
    --color-medium-gray: #6C757D;
    --color-dark-gray: #878A99;
    --color-light-gray: #F8F9FB;
    
    --perfil-green:#28A745;
    --perfil-yellow: #ffc107;
    --perfil-red: #dc3545; 
    --perfil-blue: #405189;
    
    --btn-success-color: #28a745;
    --btn-danger-color: #f06548;
    --btn-warning-color: #ffc107;
    --btn-primary-color: #405189;
    --btn-secondary-color: #405189;
    
    --icon-square-linear-gradient: linear-gradient(145deg, #d0ad987a, #fafafa);
    --icon-square-linear-gradient-hover: linear-gradient(145deg, #d0ad98aa, #fafafa);
    --icon-square-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4), -2px -2px 4px rgba(255, 255, 255, 0.05);
    --icon-square-box-shadow-hover: inset 2px 2px 4px #6a6a6a73,
                                    inset -2px -2px 4px rgba(255, 255, 255, 0.05);
                                    
    --datatable-hover:#e0e0e0bb;
    --vz-vertical-menu-bg-dark:#000000;
}


@media (prefers-color-scheme: dark) {
    :root {
        --color-white: #fff; 
    }
    
    .icon-square {
        border-color: #fff;
        color: #fff;
        
        &:hover {
            border-color: var(--color-dark-gray);
            color: var(--color-dark-gray);
        }
    }
}

html[data-layout-mode="dark"]{
        --datatable-hover:#000000bb;
}

.choices--locked .choices__inner {
  pointer-events: none;
  background-color: #eff2f7; /* opcional */
}


#form-whatsapp {
    & small.tex-muted{
        min-width:44px;    
    }
    & #wa-message-feedback{
        padding-right:44px;
    }
}

tr.even:hover {
    background-color: var(--datatable-hover);
}
tr.odd:hover {
    background-color: var(--datatable-hover);
}

.employee-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;    
  overflow: hidden;      
  display: inline-block;
}

.employee-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* faz o “cover” da imagem */
  display: block;
}


.dataTables_filter{
    display: flex;
    justify-content: flex-end;
}
.pagination{
    justify-content: flex-end;
}

.label-whats{
    text-align: start !important;
}

.choices__list--dropdown{
    z-index: 1000 !important;
}

.choices__inner {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.choices__list--dropdown .choices__item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.choices__list--multiple .choices__item {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.choices__list--single .choices__item {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  display: block;
}


.card-header-select{
    border-bottom: 1px solid #d0d0e9ca;
    
    & .row {
    
        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

.card-select-box {
    position: relative;
    padding: 10px;
    padding-top: 15px;
    padding-bottom: 0px;
    text-align: center;
    border-right: 1px solid #d0d0e9ca;
    transition: 0.1s ease-in-out;
    cursor: pointer;
    
    & p {
        font-weight: 500;
    }
}

.card-select-box::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 0;
    background-color: var(--btn-primary-color);
    transition: width 0.3s ease-in-out;
    border-radius: 2px;
}

.card-select-box:hover::after {
    width: 100%;
}

.card-select-box.activate::after {
    width: 100%;
}

.fields-form .card-body{
    & .row {
        display:none;
        & .row{
            display: flex;
        }
        &.activate{
            display:flex;
        }    
    }
}

@keyframes pulseString {
    0%, 100% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.1);
    }
}


#model-datatables td.dt-control {
    pointer-events: none !important;
}

#model-datatables td.dt-control * {
    pointer-events: auto !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control{
    
    padding-left: 20px !important;
    
}

table.dataTable td.dtr-control::before {
    display: none !important;
    content: none !important;
}

.link-painel{
    color: var(--color-dark-gray);
    text-decoration:none !important;
    
    &:hover{
        color: var(--color-black);
    }
}

.fi-rr-rotate-right:hover{
    
    transform:rotate;
    
}

.list-inline-item:not(:last-child) {
    margin-right: 0 !important;
}

#model-datatable .list-inline-item{
    margin: 0 !important;
    margin-right: 0 !important;
}

#model-datatable .table-sub-title{
    font-size: 12px;
    color: #ff0000;
}

#model-datatable .table-user-title{
    font-size: 15px !important;
    color: #00ff00;
}

.text-primary{
    color: var(--color-black) !important;
}

html[data-layout-mode="dark"] .text-primary {
    color: #fff !important;
}

.icon-square.password i {
    transition: transform 0.2s ease;
}
.icon-square.password:hover i {
    transform: scale(1.10);
}


.footer .text-center a.footer-icon{
    text-decoration: none;
    font-weight: 700;
    color: var(--color-black) !important;
}

html[data-layout-mode="dark"] .footer .text-center a.footer-icon{
    color: #fff !important;
}

.btn-warning {
    position: relative;
    overflow: hidden;
    background: transparent !important;
    border: 1.8px solid var(--btn-warning-color) !important;
    color: var(--color-black) !important;
    transition: color 0.25s ease !important;
    z-index: 0; 
    font-weight: 600;
}

.btn-warning::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--btn-warning-color);
    z-index: -1; 
    transition: width 0.4s ease;
}

.btn-warning:hover::before {
    width: 100%;
}

html:not([data-layout-mode="dark"]) .btn-warning:hover {
    color: #fff !important;
}

html[data-layout-mode="dark"] .btn-warning {
    color: #fff !important;
    border-color: var(--btn-warning-color) !important;
}

html[data-layout-mode="dark"] .btn-warning::before {
    background-color: var(--btn-warning-color);
}

html[data-layout-mode="dark"] .btn-warning:hover {
    color: var(--color-black) !important;
}

.btn-danger {
    position: relative;
    overflow: hidden;
    background: transparent !important;
    border: 1.8px solid var(--btn-danger-color) !important;
    color: var(--color-black) !important;
    transition: color 0.25s ease !important;
    z-index: 1;
    font-weight: 600;
}

.btn-danger::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--btn-danger-color);
    z-index: -1;
    transition: width 0.4s ease;
}

.btn-danger:hover::before {
    width: 100%;
}

html:not([data-layout-mode="dark"]) .btn-danger:hover {
    color: #fff !important;
}

html[data-layout-mode="dark"] .btn-danger {
    color: #fff !important;
    border-color: var(--btn-danger-color) !important;
}

html[data-layout-mode="dark"] .btn-danger::before {
    background-color: var(--btn-danger-color);
}

html[data-layout-mode="dark"] .btn-danger:hover {
    color: var(--color-black) !important;
}


.btn-success {
    position: relative;
    overflow: hidden;
    background: transparent !important;
    border: 1.8px solid var(--btn-success-color) !important;
    color: var(--color-black) !important;
    transition: color 0.25s ease !important;
    z-index: 1;
    font-weight: 600;
}

/* camada de fundo */
.btn-success::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--btn-success-color);
    z-index: -1;
    transition: width 0.4s ease;
}

/* animação hover */
.btn-success:hover::before {
    width: 100%;
}

/* --- MODO CLARO --- */
html:not([data-layout-mode="dark"]) .btn-success:hover {
    color: #fff !important;
}

/* --- MODO ESCURO --- */
html[data-layout-mode="dark"] .btn-success {
    color: #fff !important;
    border-color: var(--btn-success-color) !important;
}

html[data-layout-mode="dark"] .btn-success::before {
    background-color: var(--btn-success-color);
}

html[data-layout-mode="dark"] .btn-success:hover {
    color: var(--color-black) !important;
}

.btn-secondary {
    position: relative;
    overflow: hidden;
    background: transparent !important;
    border: 1.8px solid var(--btn-secondary-color) !important;
    color: var(--color-black) !important;
    transition: color 0.25s ease !important;
    z-index: 1;
    font-weight: 600;
}


.btn-secondary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--btn-secondary-color);
    z-index: -1;
    transition: width 0.4s ease;
}

.btn-secondary:hover::before {
    width: 100%;
}

html:not([data-layout-mode="dark"]) .btn-secondary:hover {
    color: #fff !important;
}

html[data-layout-mode="dark"] .btn-secondary {
    color: #fff !important;
    border-color: var(--btn-secondary-color) !important;
}

html[data-layout-mode="dark"] .btn-secondary::before {
    background-color: var(--btn-secondary-color);
}

html[data-layout-mode="dark"] .btn-secondary:hover {
    color: var(--color-black) !important;
}

.btn-primary {
    position: relative;
    overflow: hidden;
    background: transparent !important;
    border: 1.8px solid var(--btn-primary-color) !important;
    color: var(--color-black) !important;
    transition: color 0.25s ease !important;
    z-index: 1;
    font-weight: 600;
}

.btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--btn-primary-color);
    z-index: -1;
    transition: width 0.4s ease;
}

.btn-primary:hover::before {
    width: 100%;
}

html:not([data-layout-mode="dark"]) .btn-primary:hover {
    color: #fff !important;
}

html[data-layout-mode="dark"] .btn-primary {
    color: #fff !important;
    border-color: var(--btn-primary-color) !important;
}

html[data-layout-mode="dark"] .btn-primary::before {
    background-color: var(--btn-primary-color);
}

html[data-layout-mode="dark"] .btn-primary:hover {
    color: var(--color-black) !important;
}


.btn-password-info{
    color: var(--color-dark-gray) !important;
    border: 1px solid var(--color-dark-gray);
    line-height: 0;
    border-radius: 80px;
    margin-left: 6px;
    height: 24px;
    width: 24px;
    z-index: 10;
    
    &:hover{
        background-color: var(--color-black);
    }
}

html[data-layout-mode="dark"] .btn-password-info:hover {
    color: #fff !important;
}

.btn-gerar-senha{
    color: var(--color-dark-gray) !important;

    &:hover{
        color: var(--color-black) !important;
    }
}

html[data-layout-mode="dark"] .btn-gerar-senha:hover {
    color: #fff !important;
}


.hidden{
    display:none;
}

.auth-page-wrapper {
    min-height: 100vh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-top: 0 !important;
}


.perfil-opcao{display:flex;align-items:center;gap:6px}
.perfil-bolinha{display:inline-block;width:12px;height:12px;border-radius:50%}
.perfil-bolinha.verde{background: var(--perfil-green)}
.perfil-bolinha.amarelo{background: var(--perfil-yellow)}
.perfil-bolinha.vermelho{background: var(--perfil-red)}

.container .input-group .btn-password{
    z-index: 10 !important;
}

.btn-password{
    z-index: 10 !important;
}

.button-check {
    & input[type="radio"],
    & input[type="checkbox"] {
        display: none;
    }

    & label {
        padding: 0.5rem 1rem;
        border: 0.175rem solid var(--vz-input-border);
        border-radius: 0.25rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    & input[type="radio"]:checked + label,
    & input[type="checkbox"]:checked + label {
        background-color: var(--vz-btn-bg);
        color: white;
        border-color: var(--vz-btn-bg);
        font-weight: bold;
    }

    & label:hover {
        border-color: var(--vz-btn-bg);
    }
}

.bellow-dropArea{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    & small{
        height:30px;
        align-content: center;
    }
}

.vb-remove-btn {
    display: none;
    padding: 6px 12px;
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    height:30px;
}

.vb-remove-btn:hover {
    background: #c0392b;
}

.vb-droparea{
    position:relative; 
    border:2px dashed #ced4da; 
    border-radius:.5rem;
    padding:40px 36px ; 
    background:var(--color-light-gray); 
    text-align:center; 
    min-height:180px;
    transition:.15s; 
    cursor:pointer;
}

.vb-droparea:hover{ border-color:#86b7fe; background:#eef5ff; }
.vb-droparea.vb-dragover{ border-color:#0d6efd; background:#e7f1ff; }

html[data-layout-mode="dark"] .vb-droparea {
    background: #262a2f; 
}

.vb-file-input{
    position:absolute; inset:0; width:100%; height:100%;
    opacity:0; cursor:pointer; z-index:2;
}

.vb-dropcontent{ color:var(--color-medium-gray); }
.vb-dropcontent h6{ font-weight:600; margin-top:.5rem; }
.vb-cloud{ width:42px; height:42px; margin-bottom:.5rem; }
.vb-cloud path{ fill:currentColor; }

.vb-preview{
    position:absolute; inset:8px; 
    border-radius:.5rem; 
    overflow:hidden;
    display:none; 
    z-index:1;
    
    & img{
        width:100%; height:100%; object-fit:contain; background:transparent;
    }
}

.vb-droparea.has-image .vb-dropcontent{ opacity:0; pointer-events:none; }
.vb-droparea.has-image .vb-preview{ display:block; }

.select2-locked,
.select2-locked .select2-selection,
.select2-locked .select2-selection *{
  cursor: default !important;
}


.form-usuarios .select2-container .select2-selection--single {
    height: 35px !important;
    border:1px solid #ced4da !important;
    min-height: 35px !important;
    box-sizing: border-box !important;    
    padding: 0 40px 0 12px !important;  
    border-radius: 4px !important;
    display: block !important;           
}

.form-usuarios .select2-container .select2-selection__rendered {
    line-height: 35px !important;         
    padding: 0 !important;
    margin: 0 !important;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-usuarios .select2-container .select2-selection__arrow {
    height: 35px !important;
    top: 0 !important;
    right: 8px !important;
}
.select2-container--default .select2-selection--multiple {
    cursor: pointer;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: 0 !important;
}

.select2-container--default .select2-selection--multiple {
    position: relative;
    padding-right: 28px !important; /* espaço pra setinha */
}

.select2-container--default .select2-selection--multiple::after {
    content: '▾';                 
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #999;
    pointer-events: none; 
}

.form-usuarios #senha {
    margin-top: -1px;
    height: 35px;         
}

.form-usuarios #senha + .btn,
.form-usuarios #senha ~ .toggle-eye {
    margin-top: -1px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-usuarios #role_id.select2-hidden-accessible + .select2 .select2-selection--single {
    height: 35px !important;
    border:1px solid #ced4da !important;
    min-height: 35px !important;
    box-sizing: border-box !important;
    padding: 0 40px 0 12px !important; 
    border-radius: 4px !important;
    display: block !important;        
}

.form-usuarios #role_id.select2-hidden-accessible + .select2 .select2-selection__rendered {
    line-height: 35px !important;   
    padding: 0 !important;
    margin: 0 !important;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-usuarios #role_id.select2-hidden-accessible + .select2 .select2-selection__arrow {
    height: 35px !important;
    top: 0 !important;
    right: 8px !important;
}

.icon-square {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: transparent;
    border: 1.8px solid var(--color-dark-gray);
    box-shadow: none;
    transition: all 0.25s ease;
    cursor: pointer;

    filter: brightness(0) invert(1);

    & lord-icon {
        width: 22px !important;
        height: 22px !important;
        transition: transform 0.25s ease;
    }

    &:hover {
        transform: translateY(-2px);
        border-color: var(--color-black);
    }

    &:hover lord-icon {
        transform: scale(1.1);
    }
}

html[data-layout-mode="light"] .icon-square {
    border-color: #fff;
    filter: brightness(0) invert(0);
    
    &:hover {
        border-color: var(--color-dark-gray);
    }
}


.upload-area {
    border: 2px dashed #ccc;
    border-radius: 6px;
    padding: 30px;
    text-align: center;
    transition: border-color 0.3s ease;
    cursor: pointer;
    
    &.dragover {
        border-color: #6c63ff;
        background-color: var(--color-light-gray);
    }
}


.upload-content svg {
    display: block;
    margin: 0 auto;
}

.pgto-actions { 
    display: flex; 
    align-items: stretch;      
    gap: .5rem;                
}

.pgto-actions .select2-container {
    flex: 1 1 auto;            
    width: 1% !important;    
    min-width: 0;             
}

.pgto-actions .select2-selection--single {
    height: 100%;
    display: flex;
    align-items: center;
}

.pgto-actions .select2-selection__rendered { line-height: normal; }
.pgto-actions .select2-selection__arrow { align-self: center; }

.btn-icon { 
    width: 34px; 
    min-width: 34px; 
    padding: 0; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
}

.color-option {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.2s;
    position: relative;
}
.color-option input {
    display: none;
}
.color-option.selected {
    border: 2px solid var(--color-black); 
}
.color-option.selected::after {
    content: "✔";
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#pwd-bar {
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: 6px;
}

.cliente-nome {
    font-weight: 500;
    font-size: 15px;
    color: var(--color-black);
}

.cliente-doc {
    font-size: 13px;
}

.cliente-criador {
    font-size: 12px;
}

[data-layout-mode="dark"] .cliente-nome {
    color: var(--color-light-gray);
}

[data-layout-mode="dark"] .cliente-doc {
    color: #bbb;
}

[data-layout-mode="dark"] .cliente-criador {
    color: #bbb;
}

[data-layout-mode="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--vz-input-bg, #2a2c38) !important;
    border: 1px solid var(--vz-input-border, #424657) !important;
    color: var(--vz-body-color, #fff) !important;
}

[data-layout-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--vz-body-color, #fff) !important;
}

[data-layout-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--vz-body-color, #fff) transparent transparent transparent !important;
}

[data-layout-mode="dark"] .select2-dropdown {
    background-color: var(--vz-input-bg, #2a2c38) !important;
    border: 1px solid var(--vz-input-border, #424657) !important;
    color: var(--vz-body-color, #fff) !important;
}

[data-layout-mode="dark"] .select2-results__option--highlighted {
    background-color: var(--vz-primary, var(--btn-primary-color)) !important;
    color: #fff !important;
}

[data-layout-mode="dark"] #bindNaturalPerson .modal-lg .modal-body {
    background-color: var(--vz-input-bg, #2a2c38) !important;
}


.bg-dark {
    background-color: var(--color-black) !important;
}

[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"] {
    background-color: #222;
    color: #fff;
    color-scheme: dark;
}

.btn-group .btn {
    padding: 1rem 1.5rem;  
    font-size: 1.1rem;     
    line-height: 1.2;       
}

.btn-white {
    background-color: none !important;
    color: var(--color-medium-gray) !important;
    border: none;
    
    transition: background-color 0.2s, color 0.2s;
}

.btn-white:hover {
    background-color: transparent !important;
    color: none !important;
}

.input-block {
    pointer-events: none; 
    background-color: var(--color-light-gray); 
    color: #495057; 
    opacity: 1; 
}

[data-layout-mode="dark"] .input-block {
    background-color: var(--vz-input-bg, #2a2c38) !important;
    color: var(--color-white);
}

.nav-tabs {
    border: 1px solid #e9e9f1;
    border-bottom: none; 
    background-color: var(--color-light-gray);
    border-radius: 4px 4px 0 0;
    margin-bottom: 0 !important; 
}

.nav-tabs .nav-link {
    border: none;
    border-right: 1px solid #e9e9f1;
    border-bottom: 3px solid transparent;
    background-color: transparent;
    color: var(--color-medium-gray); 
    font-weight: 500;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link.active {
    background-color: #fff;
    color: var(--color-black);
    border-bottom: 3px solid var(--perfil-blue);
    font-weight: 600;
}

.nav-tabs .nav-item:last-child .nav-link {
    border-right: none;
}

.nav-tabs .nav-link:hover {
    background-color: var(--color-light-gray);
    color: var(--color-black);
}

.tab-content {
    margin-top: 0 !important; 
    border-top: none; 
    border-radius: 0 0 4px 4px;
    padding: 16px 20px 20px 20px;
}

.modal-content {
    position: relative; 
}

.btn-close-modal {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 34px;
    height: 34px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    opacity: 1 !important;
    transition: transform .2s ease, background-color .2s ease;
    z-index: 1056;
}

.btn-close-modal:hover,
.btn-close-modal:focus {
    opacity: 1 !important; 
    background-color: #fff !important; 
    transform: scale(1.1);
}

#resumo-valor-restante {
    font-size: 1.1rem;
    color: #198754; 
    font-weight: 700;
}

.invalid-feedback,
.valid-feedback {
  font-size: 0.75rem;    
  line-height: 1.2;    
}

#send-whatsapp .invalid-feedback {
  color: #dc3545cc; 
}

hr {
  border: none;
  border-top: 1px solid #ddd;
}

.sheet {
  background: #fff;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 25px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.via + .via { margin-top: 40px; border-top: 2px dashed #ccc; padding-top: 30px; }

/* Cabeçalho */
.hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--borda);
  padding-bottom: 10px;
}
.hdr img { height: 40px; }
.hdr .tt {
  text-align: right;
  line-height: 1.3;
}
.hdr .tt h1 {
  font-size: 15px;
  margin: 0;
  color: #111;
}
.hdr .tt small {
  font-size: 12px;
  color: var(--cinza);
}

/* Endereço central */
.info {
  text-align: center;
  margin: 15px 0;
  line-height: 1.4;
  color: #333;
}
.info strong { color: var(--azul); }

/* Bloco OS */
.os-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background: var(--cinza-claro);
  border-radius: 5px;
  padding: 10px 0;
  margin-bottom: 15px;
}
.os-id {
  font-size: 22px;
  font-weight: 700;
  color: var(--vermelho);
}
.os-label {
  font-weight: 600;
  color: #000;
  font-size: 12px;
}
.os-data {
  text-align: right;
  font-size: 12px;
}

/* Dados do cliente */
.dados {
  margin-bottom: 10px;
}
.dados .linha {
  margin: 4px 0;
}
.dados strong {
  color: #000;
  font-weight: 600;
  min-width: 100px;
  display: inline-block;
}

/* Objetos */
.obj-box {
  background: var(--cinza-claro);
  border-radius: 5px;
  padding: 10px 0px;
  margin-top: 10px;
}
.obj-box h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: #000;
}
.obj-box table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: center;
}
.obj-box th {
  font-weight: 600;
  padding-bottom: 4px;
  border-bottom: 1px solid #ccc;
}
.obj-box td {
  height: 22px;
  border-bottom: 1px solid #eee;
}

/* Defeito */
.defeito {
  margin-top: 15px;
  padding: 10px 0px;
}
.defeito h3 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #000;
}
.defeito .linha {
  border-bottom: 1px solid #ccc;
  height: 14px;
  margin-bottom: 6px;
}
.info .linha {
  border-bottom: 1px solid #ccc;
  height: 14px;
  margin-bottom: 6px;
}
.defeito small { color: #555; }

/* Assinatura */
.assin {
  display: flex;
  justify-content: flex-end; 
  margin-top: 25px;
}

.assin .linha {
  width: 50%;
  border-top: 1px solid #000;
  padding-top: 4px;
  text-align: right; 
  font-size: 11px;
  color: #000;
}


/* Termos */
.termos {
  margin-top: 18px;
  font-size: 11px;
  color: #444;
  background: var(--cinza-claro);
  padding: 10px 0px;
  border-radius: 5px;
  line-height: 1.45;
  text-align: justify;
}

/* QR */
.qr {
  position: absolute;
  right: 20px;
  top: 110px;
}
.qr img {
  height: 80px;
  border-radius: 6px;
  box-shadow: 0 0 3px rgba(0,0,0,0.15);
}
.relative { position: relative; }

.info-pessoal{
    
    display:flex;
    
    & .linha{
        margin-right:10px;
    }
    
}



#os-sheet .defeito p{
    margin-top: 1rem;
    margin-bottom: 0;
    margin-left:1rem;
}

#os-sheet .info-field{
    display: flex;
    justify-content: space-between;
}

@media print {
  body * {
    visibility: hidden;            
  }
  
  #os-sheet p{
    margin-top: 0;
    margin-bottom: 0;
  }   

  #os-sheet,
  #os-sheet * {
    visibility: visible;        
  }
  #os-sheet {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    zoom: 0.82;
    transform-origin: top left;
    box-shadow: none;
    margin-left:0px;
  }

  #os-sheet .via {
    margin-top: 0;
    padding-top: 10px;
  }
}

.os-details {
    color: #444444; 
    font-size: 10px; 
    margin-left: 0;
}

.os-info-duas-colunas {
  display: flex;
  justify-content: space-between;
  gap: 30px;          
}

.os-info-duas-colunas .col-esq,
.os-info-duas-colunas .col-dir {
  flex: 1;            
}

.os-info-duas-colunas .linha {
  margin-bottom: 2px;  
}

.os-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.os-table col.col-desc  { width: 52%; }
.os-table col.col-qty   { width: 12%; }
.os-table col.col-value { width: 18%; }
.os-table col.col-total { width: 18%; }

.os-table th,
.os-table td {
  padding: 2px 4px;
  vertical-align: top;
}

.os-table thead th:nth-child(1),
.os-table tbody td:nth-child(1) {
  text-align: left;
}

.os-table thead th:nth-child(2),
.os-table tbody td:nth-child(2) {
  text-align: center;
}

.os-table thead th:nth-child(3),
.os-table tbody td:nth-child(3),
.os-table thead th:nth-child(4),
.os-table tbody td:nth-child(4) {
  text-align: right;
}


.os-table-payments thead th[colspan],
.os-table-payments tbody td[colspan] {
  text-align: left;
}

.os-table-payments thead th:nth-child(2) {
  text-align: right;     
}

.os-resumo {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid #444; 
  font-size: 12px;
}

.os-resumo .linha-resumo {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  margin-bottom: 2px;
}

.os-resumo .linha-resumo span:first-child {
  text-align: left;
}

.os-resumo .valor-resumo {
  min-width: 80px;        
  text-align: right;      
}


@media (max-width: 768px) {
  /* Cliente */
  table.dataTable td.col-cliente,
  table.dataTable th.col-cliente {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  table.dataTable td.col-equip,
  table.dataTable th.col-equip {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  table.dataTable td.col-acoes,
  table.dataTable th.col-acoes {
    max-width: 70px;
  }
}

#model-datatables td,
#model-datatables th {
  white-space: normal !important;
  word-wrap: break-word;
}

.acao-break {
    flex-basis: 100%;
    height: 0;
}
.acao-break {
    display: block;
    width: 100%;
}

.os-actions-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-left: 0;
  margin-bottom: 0;
  min-width: 150px;    
}


.os-actions-list > li.list-inline-item {
  flex: 0 0 calc(33.333% - 4px); 
  display: flex;
  justify-content: center;
}

.card .dataTables_wrapper .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.card .dataTables_wrapper {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}


.card .dataTables_wrapper .row + .row {
  margin-top: 0.25rem !important;
}

.card .dataTables_wrapper .dataTables_length,
.card .dataTables_wrapper .dataTables_filter {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.col-acoes{
   max-width:130px;
}

.select2-container--open .select2-dropdown {
  max-height: none !important;
  overflow: visible !important; 
}

.select2-container--open .select2-results > .select2-results__options {
  max-height: 200px !important;
  overflow-y: auto !important;
}

.select2-results__option {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.dataTables_filter{
    padding: 0rem  1rem ! important;
    
}

.os-focus-highlight {
  border-radius: 8px;
  border: 3px solid transparent !important;

  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #28a745 0%, #0d6efd 100%) border-box;

  box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.18), 0 0 0 0.25rem rgba(13, 110, 253, 0.12);
}

.fixed-button {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 9999;
  margin-bottom: 70px;
}