/*! Default */

/*###############  cores de fundos padrões ##############*/
.cor-padrao-1 {
    background-color: #454545;
}

.cor-padrao-2 {
    background-color: #acacac;
}

.cor-padrao-3 {
    background-color: #c4c4c4;
}

.cor-padrao-4 {
    background-color: #e6e6e6;
}

.cor-padrao-5 {
    background-color: #4a671e;
}

.cor-padrao-6 {
    background-color: #f7931e;
}

.cor-padrao-7 {
    background-color: #dc3545! important;
}

.cor-padrao-8 {
    background-color: #fff;
}
/*######################################################*/
.font-padrao {
    font-size: 12px;
}

/*###############  cores de fontes padrões ##############*/
.font-padrao-1 {
    color: #454545;
}

.font-padrao-2 {
    color: #acacac;
}

.font-padrao-3 {
    color: #c4c4c4;
}

.font-padrao-4 {
    color: #e6e6e6;
}

.font-padrao-5 {
    color: #4a671e;
}

.font-padrao-6 {
    color: #f7931e;
}

.font-padrao-7 {
    color: #dc3545;
}

.font-padrao-8 {
    color: #A02C2C;
}

.font-padrao-9 {
    color: #0078A3;
}
/*######################################################*/

body, html {
    overscroll-behavior:none !important;
    background-color: #e6e6e6; /* padrao 4 */
    overflow: hidden; /* Evita a rolagem no body */
    overflow-x: hidden; /* Desabilita rolagem horizontal */
    overflow-y: auto;   /* Permite rolagem vertical */
    touch-action: pan-y; /* Limita o toque à rolagem vertical */
    display: flex;
    /*margin: 0;*/
    /*margin: 0;*/
    padding: 0;
    width: 100%; /* Ocupa 100% da largura da tela */
    /*background-color: cor-padrao-4;*/
}

.html {
    width: 100%;
}
 /*################################## LOGIN #########################*/
.body_login, .html_login {
    background-color: #acacac; /* padrao 2 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
    /*margin: 0;*/
    /*margin: 0;*/
    padding: 0;
}

.card {
    border: 1px solid #999;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card img {
    width: 180px;
    height: 180px;
    margin-bottom: 0;
}
/*#####################################################################*/

/*#######################  Dialogs Modal ###############################*/
.modal-header {
    height: 60px;
}

.modal-title{
    width: 100%;
    text-align: right;
}

/*#####################################################################*/

.scrollable {
    width: 100%; /* Ocupa 100% da largura da tela */
    overflow-y: auto;
    height: 100vh;
    max-height: 100vh; /* Ajuste de acordo com o layout */
    -webkit-overflow-scrolling: touch; /* Melhor desempenho em dispositivos iOS */
}

.no-select {
    user-select: none; /* Impede a seleção de texto */
}

img{
    user-select: none; /* Impede a seleção de texto ou imagem */
    pointer-events: none; /* Bloqueia interações diretamente nas imagens */    
}

.container {
    width: 100%! important; /* Ocupa 100% da largura da tela */
    min-width: 100%! important; /* Ocupa 100% da largura da tela */
    max-width: 100%! important; /* Ocupa 100% da largura da tela */
    
}

.content {
    width: 100%; /* Ocupa 100% da largura da tela */
    margin: 0; /* Remove margens externas */
    padding: 0; /* Espaço interno */
    box-sizing: border-box; /* Inclui padding dentro da largura */
}

.btn-primary, .btn-primary:focus{
    background-color: #454545; /* padrao 1 */
    border: none;
}

.btn-primary:hover {
    background-color: #c4c4c4; /* padrao 3 */
}

.btn-secondary, .btn-primary:focus {
    background-color: #acacac; /* padrao 2 */
    border: none;
}

.btn-secondary:hover {
    background-color: #c4c4c4; /* padrao 3 */
}

.table td, .table th {
    padding: 0 0; /* Ajuste o padding para diminuir a altura das linhas */
    vertical-align: middle; /* Alinha o texto ao meio */
    font-size: 12px; /* Tamanho da fonte reduzido */
}

/* Ajusta o espaço entre as linhas */
.table tbody tr {
    height: 10px; /* Altura da linha, ajuste conforme necessário */
}
        
.table th {
    font-size: 14px; /* Tamanho da fonte do cabeçalho */
}

/*##################### Estilização de DIV Clicavel Menu ##############################*/
.button-like-menu {
    /*margin-top: 15px;*/
    height: 50px;
    width: 100%;
    display: inline-block;
    padding: 10px 8px;
    margin-bottom: 15px;
    border: 0 solid #e6e6e6; /* padrao 4 */
    border-radius: 8px;
    background-color: #e6e6e6; /* padrao 4 */
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    user-select: none; /* Impede a seleção de texto */
    transition: all 0.1s ease-in-out;
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
}

.button-like-menu img {
    width: 30px;  /* Define o tamanho das imagens */
    height: 30px;
}

.button-like-menu span {
    color: #454545; /* padrao 1 */
    width: 100%;
}

.button-like-menu:active span {
    color: #e6e6e6; /* padrao 4 */
}

.button-like-menu:active {
    background-color: #454545; /* padrao 1 */
    transform: scale(0.98); /* Dá a sensação de clique */
}

.button-like-menu.selected {
    background-color: #454545; /* Cor de destaque ao pressionar */  /* padrao 1 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/*################################################################################*/

/*##################### Estilização de DIV Clicavel Menu Disable ##############################*/
.button-like-menu-disable {
    /*margin-top: 15px;*/
    height: 50px;
    width: 100%;
    display: inline-block;
    padding: 10px 8px;
    margin-bottom: 15px;
    border: 0 solid #e6e6e6; /* padrao 4 */
    border-radius: 8px;
    background-color: #e6e6e6; /* padrao 4 */
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    user-select: none; /* Impede a seleção de texto */
    /*transition: all 0.1s ease-in-out;*/
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
}

.button-like-menu-disable img {
    width: 30px;  /* Define o tamanho das imagens */
    height: 30px;
}

.button-like-menu-disable span {
    color: #acacac; /* padrao 2 */
    width: 100%;
}

/*################################################################################*/

/*##################### Estilização de DIV Clicavel Defautl ##############################*/
.button-like-default {
    margin-bottom: 0;
    height: 70px;
    width: 100%;
    display: inline-block;
    padding: 12px 8px;
    border: 0 solid #999;
    border-radius: 8px;
    background-color: #454545;  /* padrao 1 */
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    user-select: none; /* Impede a seleção de texto */
    transition: all 0.1s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    align-content: center;
}

.button-like-default img {
    width: 40px;  /* Define o tamanho das imagens */
    height: 40px;
}

.button-like-default span {
    color: #e6e6e6; /* padrao 4 */
    width: 100%;
}

.button-like-default:active span {
    color: #454545;
}

.button-like-default:active {
    background-color: #acacac; /* padrao 2 */
    transform: scale(0.98); /* Dá a sensação de clique */
}

.button-like-default.selected {
    background-color: #acacac; /* Cor de destaque ao pressionar */ /* padrao 2 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/*################################################################################*/

/*##################### Estilização de DIV Clicavel Delete ##############################*/
.button-like-delete {
    margin-bottom: 0px;
    height: 70px;
    width: 100%;    
    display: inline-block;    
    /*display: inline-flex;*/
    /*justify-content: center;*/ 
    /*align-items: center;*/
    padding: 12px 8px;
    border: 0 solid #999;
    border-radius: 8px;
    background-color: #dc3545;  /* padrao 7 */
    text-align: center;
/*    font-size: 16px;
    font-weight: bold;*/
    cursor: pointer;
    user-select: none; /* Impede a seleção de texto */
    transition: all 0.1s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    align-content: center;
}

.button-like-delete img {
    width: 40px;  /* Define o tamanho das imagens */
    height: 40px;
}

.button-like-delete span {
    color: #e6e6e6; /* padrao 4 */
    width: 100%;
}

.button-like-delete:active span {
    color: #454545;
}

.button-like-delete:active {
    background-color: #acacac; /* padrao 2 */
    transform: scale(0.98); /* Dá a sensação de clique */
}

.button-like-delete.selected {
    background-color: #acacac; /* Cor de destaque ao pressionar */ /* padrao 2 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/*################################################################################*/

/*##################### Estilização de DIV Clicavel Disable ##############################*/
.button-like-disable {
    margin-bottom: 0;
    height: 70px;
    width: 100%;
    display: inline-block;
    padding: 12px 8px;
    border: 0 solid #999;
    border-radius: 8px;
    background-color: #acacac; /* padrao 2 */
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    user-select: none; /* Impede a seleção de texto */
    /*transition: all 0.1s ease-in-out;*/
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    align-content: center;
}

.button-like-disable img {
    width: 40px;  /* Define o tamanho das imagens */
    height: 40px;
}

.button-like-disable span {
    color: #454545; /* padrao 1 */
    width: 100%;
}
/*################################################################################*/

/*##################### Estilização de DIV List  ##############################*/
.button-like-list {
    /*margin-top: 15px;*/
    height: 70px;
    width: 100%;
    display: inline-block;
    padding: 12px 8px;
    border: 0 solid #999;
    border-radius: 8px;
    background-color: #fff; /* padrao 8 */
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    user-select: none; /* Impede a seleção de texto */
    transition: all 0.1s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    align-content: center;
}

.button-like-list img {
    width: 40px;  /* Define o tamanho das imagens */
    height: 40px;
}

.button-like-list span {
    width: 100%;
}

.button-like-list:active span {
    color: #FFF; /* padrao 8 */
}

.button-like-list:active {
    background-color: #454545; /* padrao 1 */
    transform: scale(0.98); /* Dá a sensação de clique */
}

.button-like-list.selected {
    background-color: #454545; /* Cor de destaque ao pressionar */ /* padrao 1 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/*################################################################################*/


/*##################### Estilização de DIV Lista Box  ##############################*/
.button-like-box {
    margin-bottom: 2px;
    /*height: 130px;*/
    width: 100%;
    display: inline-block;
    padding: 10px 8px;
    border: 0.5px solid #999;
    border-radius: 8px;
    background-color: #fff; /* padrao 8 */
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    user-select: none; /* Impede a seleção de texto */
    transition: all 0.1s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button-like-box img {
    width: 40px;  /* Define o tamanho das imagens */
    height: 40px;
}

.button-like-box span {
    width: 100%;
}

.button-like-box:active span {
    color: #e6e6e6; /* padrao 4 */
}

.button-like-box:active {
    background-color: #454545; /* padrao 1 */
    transform: scale(0.98); /* Dá a sensação de clique */
}

.button-like-box.selected {
    background-color: #454545; /* Cor de destaque ao pressionar */ /* padrao 1 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/*################################################################################*/

/*##################### Estilização de DIV Lista Fixa  ##############################*/
.button-like-fixo {
    /*margin-bottom: 2px;*/
    /*height: 130px;*/
    width: 100%;
    display: inline-block;
    padding: 10px 8px;
    border: 0.5px solid #999;
    border-radius: 8px;
    background-color: #fff; /* padrao 8 */
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    /*cursor: pointer;*/
    user-select: none; /* Impede a seleção de texto */
    /*transition: all 0.1s ease-in-out;*/
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button-like-fixo img {
    width: 40px;  /* Define o tamanho das imagens */
    height: 40px;
}

.button-like-fixo span {
    width: 100%;
}

/*################################################################################*/

.rodape {
    margin: 0;
    position: fixed;         /* Fixado na janela */
    bottom: 0;               /* Alinhado ao fundo da página */
    left: 0;
    width: 100%;             /* Ocupa toda a largura da tela */
    text-align: center;      /* Centraliza o texto */
    padding: 0 0;         /* Espaçamento interno */
}

.rodape p {
    margin: 5px 0;           /* Espaçamento entre as linhas */
    font-size:0.6rem;
}

.img-zap {
    content: url('/afmobile/images/ic_whatsapp.svg');
}

.img-edit {
    content: url('/afmobile/images/ic_editar.svg');
}

.img-edit:hover {
    content: url('/afmobile/images/ic_editar_hover.svg');
}

.img-delete {
    content: url('/afmobile/images/ic_excluir.svg');
}

.img-delete:hover {
    content: url('/afmobile/images/ic_excluir_hover.svg');
}

.img-final {
    content: url('/afmobile/images/ic_finalizar.svg');
}

.img-final:hover {
    content: url('/afmobile/images/ic_finalizar_hover.svg');
}

.img-lupa {
    content: url('/afmobile/images/ic_lupa.svg');
}

.img-lupa:hover {
    content: url('/afmobile/images/ic_lupa_hover.svg');
}

.img-placa {
    content: url('/afmobile/images/ic_placa.svg');
}

.img-placa:hover {
    content: url('/afmobile/images/ic_placa_hover.svg');
}

/*@keyframes blink {
    50% {
        opacity: 0;
    }
}*/

@-webkit-keyframes blink {
    50% {
        opacity: 0;
    }
}

/*@keyframes blink {
    50% {
        opacity: 0;
    }
}*/

.blink {
    animation: blink 1s infinite;
}