.content-message img {width:100%;}
.text-capitalize {text-transform: capitalize!important;}

[v-cloak] { display: none; }

.table-responsive hr {display: none!important;}
.dataTables_filter label {width: 100%;}
.txt-10 {font-size: 10px!important;}
.btn-icon {line-height: normal!important; padding: 3px 20px!important;}
.btn-icon span.text{position: relative!important;top: -7px!important;}
.btn-icon span.ico{line-height: normal!important; padding: 0!important;}
.icon-button {background: none;border: none;padding: 0;margin: 0;color: inherit;text-align: left;font: inherit;cursor: pointer;}

.nav-tabs .nav-link {padding: 0.5rem 0!important; border-bottom: 5px solid #ffc1c167!important}
.nav-tabs .nav-link.active {font-weight: bold!important; border-bottom: 5px solid #ffc1c1!important}

/* select2 */
.select2-container .select2-selection--single {height: 36px;}
.select2-container .select2-selection--single .select2-selection__rendered {padding-top:4px;}
.select2-container--default .select2-selection--single .select2-selection__arrow {height: 36px;}
.select2-container--default .select2-selection--single {border: 1px solid #e6e6ed;}
span.select2-container,
span.select2.select2-container.select2-container--default {width: 100%!important;}
.form-select:disabled {background-color: #f5f5fd; opacity: 1;}
.select2-container--default.select2-container--disabled .select2-selection--single,

.select-form-2 .choices {height: 58px!important;}
.select-form-2 label {font-size: 12px;color: #999;padding-top: 8px;}
.select-form-2 .choices div div div.choices__item--selectable {margin-top: 18px;}
.select-form-2 .choices div div div.choices__item.dropdown-item{margin-top: 0px;}

input[name="form-areaDisponivel"]:disabled {background-color: #ffc1c167!important; }
input[type="text"].form-control:disabled { background-color: #add8e63d; }

.dropdown-toggle-select {
    display: flex; /* Usar flexbox para alinhar o conteúdo */
    justify-content: space-between; /* Espaço entre o texto e a seta */
    align-items: center; /* Centraliza verticalmente */
    padding-right: 10px; /* Adiciona espaço à direita do texto */
}

.dropdown-toggle-select::after {
    margin-left: 10px; /* Espaço entre o texto e a seta */
}

/*backgrounds*/
.bg-striped:nth-child(even) {background-color:#FFF!important}

.scrollable-content { height: 60vh; overflow: scroll;  overflow-x: hidden;}

.overflow-x-scroll {width: 100%; overflow-x: auto;overflow-y: hidden;white-space: nowrap;}
.overflow-x-scroll::-webkit-scrollbar,
.board::-webkit-scrollbar {display: none;}
.overflow-x-scroll {-ms-overflow-style: none; scrollbar-width: none; }

.aside-menu {scrollbar-width: none;  -ms-overflow-style: none;overflow-y: scroll;}
.aside-menu::-webkit-scrollbar {width: 0;height: 0;}

/*****FUNIL DE VENDAS******/
.tasks-col {width: 260px!important;}
#clientDetailsOffCanvas,#activityAddOffCanvas {height:90%;max-height: 100%; }

.image-thumbnail {width: 130px;height: 130px;object-fit: cover; overflow: hidden; }

.dropzone {border: 2px dashed #aaa;padding: 20px;text-align: center;position: relative;cursor: pointer;}
.dropzone.dragging {border-color: #4CAF50; background: #007BFF;}
.dropzone .clickable {color: blue; text-decoration: underline;cursor: pointer; }
.dropzone input[type="file"] { display: none; }

/*****LOGIN******/
.bg-geral {
    background: url(/assets/v2/images/fundo_desktop.png) no-repeat center top;
    background-size: cover;
    height: 100vh;
}

.audit-required {
    background-color: rgba(255, 0, 0, 0.1)!important; /* Vermelho com 10% de opacidade */
}

.audit-required-stripe {
    background-color: rgba(255, 0, 0, 0.05)!important; /* Vermelho com 5% de opacidade */
}

/******* FATOR *******/
.edit-focus {padding: 10px;border: 1px solid #DDD!important; border-radius: 4px; }
.linha-focada { border: 1px solid #DDD!important; background-color: #FFF!important;}

/******** AJUDA **********/
.pos--5 {position: relative; top: -5px;}
.pos-3 {position: relative;top: 3px;}

.terminal {
    background-color: #000;
    color: #00ff00;
    font-family: monospace;
    padding: 20px;
    border-radius: 5px;
    overflow-y: auto;
    max-height: 300px;
}

.terminal p {
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.terminal-line {
    display: flex;
    justify-content: space-between;
}

.message {
    flex-grow: 1;
}

.dots {
    display: inline-block;
    flex-grow: 1;
    text-align: right;
    padding-right: 10px;
    animation: dots 1.5s steps(5, end) infinite;
}

#log-container pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Desativa a rotação para elementos com a classe .no-rotate */
.sidebar-trigger {
    transform: rotate(0) !important; /* Posição correta */
}

/* Estilo básico para a tooltip */
.sidebar-tooltip {
    position: fixed; /* Usamos 'fixed' para mantê-la visível fora da sidebar */
    left: 90px; /* Ajuste para colocá-la fora da barra lateral de 84px */
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10000;
    pointer-events: none;
    font-size: 14px;
  }

  .nav-item {
    position: relative;
  }

  .page-sidebar-mini .sidebar-tooltip {
    left: 90px; /* Certifica-se de que ela fique fora da barra lateral */
  }

/*VISITCA TÉCNICA*/
.file-input-container {
    position: relative;
    width: 100%;
    height: 70px;
}

.file-input {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

.file-label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border: 2px dashed #993886;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    background-color: #f8f9fa;
    color: #993886;
    font-weight: bold;
}

.image-container {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-top: 10px;
    margin-right: 10px;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.delete-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    color: red;
    cursor: pointer;
    background: white;
    border-radius: 50%;
    padding: 0;
}

.thumb {
    width: 200px; /* Define a largura dos thumbnails */
    height: 200px; /* Define a altura dos thumbnails */
    object-fit: cover; /* Faz com que a imagem se ajuste ao tamanho definido, mantendo a proporção */
}

@keyframes dots {
    0%, 20% {
        content: '.';
    }
    40% {
        content: '..';
    }
    60% {
        content: '...';
    }
    80%, 100% {
        content: '';
    }
}

/* Large desktop */
@media (min-width: 1200px) {
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
}

/* Landscape phones and down */
@media (max-width: 480px) {
    .custom-table-responsive {overflow-x: auto;width: 200px;}
    .custom-table-responsive table {width: 100%;border-collapse: collapse;}
    .custom-table-responsive table, .custom-table-responsive th, .custom-table-responsive td {border: 1px solid #ccc;}
    .custom-table-responsive th, .custom-table-responsive td {padding: 8px 12px;}

    /*****FUNIL DE VENDAS******/
    .image-thumbnail {width: 90px; height: 90px; object-fit: cover; overflow: hidden;}
    .text-break {white-space: normal!important;word-wrap: break-word!important;display: inline-block!important; width: 100%!important;}
}

/****ANIMAÇOES****/
.waitingS { border: 16px solid #3498db; border-top: 16px solid #3498db; border-radius: 50%;width: 120px;height: 120px;animation: spin 2s linear infinite; }
.piscar { animation: blink 1s linear infinite; }
.scroll-indicator { transform: translateX(-50%); animation: slideBounce 1.5s infinite; cursor: pointer; }
.loadingField { animation: loadingAnimation 1s infinite; min-width: 50%!important;height: 25px; }
.loaderBlock {display: inline-block; width: 100%; height: 50px;  background-color: #e0e0e0; animation: pulsar 1s infinite;}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes blink {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes slideBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes loadingAnimation {
    0% { background-color: var(--bs-gray-300); }
    50% { background-color: var(--bs-gray-200); }
    100% { background-color: var(--bs-gray-300);}
}

@keyframes pulsar {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}