/* ItCar Modern UI v4
Fonte sugerida: Plus Jakarta Sans
Inclua no antes deste CSS:
Depois inclua:
*/
/* =========================================
FONT AWESOME 5 - COMPATIBILIDADE
========================================= */
.fa,
.fas,
.far,
.fal,
.fab,
.glyphicon,
[class^="fa-"],
[class*=" fa-"] {
font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
font-style: normal;
}
.fa,
.fas {
font-weight: 900 !important;
}
.far {
font-weight: 400 !important;
}
.fal {
font-weight: 300 !important;
}
.fab {
font-family: "Font Awesome 5 Brands" !important;
font-weight: 400 !important;
}
/* =========================================
SETAS DO MENU - FA5
========================================= */
.nav > li > a > .fa.arrow,
#side-menu .fa.arrow,
.navbar-static-side .fa.arrow,
.nav > li > a > .arrow,
#side-menu .arrow,
.navbar-static-side .arrow {
float: right;
line-height: 1.2;
margin-top: 2px;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
}
.nav > li > a > .fa.arrow:before,
#side-menu .fa.arrow:before,
.navbar-static-side .fa.arrow:before {
content: "\f104" !important;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
}
.nav > li.active > a > .fa.arrow:before,
#side-menu li.active > a > .fa.arrow:before,
.navbar-static-side li.active > a > .fa.arrow:before {
content: "\f107" !important;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
}
/* =========================
FONTE GLOBAL
========================= */
html, body,
button, input, select, textarea,
label, .label, .badge,
.btn, .table, .ibox-title h5, .page-heading h2,
.dropdown-menu, .dropdown-menu > li > a,
.navbar-top-links li a, .welcome-message {
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
}
/* =========================
MENU LATERAL
========================= */
body,
body.fixed-sidebar .navbar-static-side,
body.mini-navbar .navbar-static-side,
.navbar-static-side,
.navbar-default,
#side-menu,
#side-menu.metismenu,
.navbar-static-side .nav-header,
.navbar-static-side .profile-element,
.navbar-static-side .logo-element {
font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
}
.navbar-static-side .nav > li > a,
.navbar-static-side .nav > li > a span,
.navbar-static-side .nav > li > a .nav-label,
.navbar-static-side .nav-header,
.navbar-static-side .nav-header a,
.navbar-static-side .nav-header span,
.navbar-static-side .profile-element,
.navbar-static-side .profile-element a,
.navbar-static-side .profile-element span,
.navbar-static-side .profile-element .clear,
.navbar-static-side .profile-element .font-bold,
.navbar-static-side .logo-element,
#side-menu > li > a,
#side-menu > li > a span,
#side-menu > li > a .nav-label,
#side-menu li a,
#side-menu li a span,
#side-menu li .nav-label,
#side-menu .nav-second-level li a,
#side-menu .nav-second-level li a span,
#side-menu .nav-third-level li a,
#side-menu .nav-third-level li a span,
#side-menu .label,
.nav.metismenu > li > a,
.nav.metismenu > li > a span,
.nav.metismenu .nav-second-level li a,
.nav.metismenu .nav-third-level li a {
font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
}
.navbar-static-side .nav > li > a,
#side-menu > li > a,
#side-menu li a,
.nav.metismenu > li > a {
font-weight: 600;
letter-spacing: -.01em;
}
.navbar-static-side .nav-header .font-bold,
.profile-element .font-bold,
.logo-element,
.page-heading h2,
.ibox-title h5 {
font-weight: 700;
letter-spacing: -.02em;
}
/* Ícones já tratados no bloco de compatibilidade do Font Awesome 5 */
/* =========================
TOKENS
========================= */
:root {
--itc-primary: #1ab394;
--itc-primary-dark: #15967d;
--itc-border: #d9e1ea;
--itc-border-strong: #cbd5e1;
--itc-text: #26323f;
--itc-text-soft: #6b7280;
--itc-shadow-sm: 0 4px 14px rgba(15,23,42,.06);
--itc-shadow-md: 0 10px 28px rgba(15,23,42,.10);
--itc-focus: 0 0 0 3px rgba(26,179,148,.10);
}
/* =========================
BASE
========================= */
body {
color: var(--itc-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
transition: color .18s ease, opacity .18s ease;
}
a:hover,
a:focus {
text-decoration: none;
}
/* =========================
FORMULÁRIOS
========================= */
.form-control,
.single-line {
height: 38px;
padding: 6px 12px;
font-size: 14px;
color: #374151;
background: #ffffff;
border: 1px solid var(--itc-border);
border-radius: 8px;
box-shadow: none;
-webkit-box-shadow: none;
transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.form-control:hover,
.single-line:hover {
border-color: var(--itc-border-strong);
}
.form-control:focus,
.single-line:focus {
border-color: var(--itc-primary) !important;
box-shadow: var(--itc-focus);
-webkit-box-shadow: var(--itc-focus);
outline: none;
}
.form-control::-webkit-input-placeholder {
color: #9aa4b2;
}
.form-control:-ms-input-placeholder {
color: #9aa4b2;
}
.form-control::-ms-input-placeholder {
color: #9aa4b2;
}
textarea.form-control {
min-height: 90px;
height: auto;
resize: vertical;
}
select.form-control {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 34px;
background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
.input-group-addon {
background: #ffffff;
border: 1px solid var(--itc-border);
color: var(--itc-text-soft);
border-radius: 8px 0 0 8px;
transition: border-color .18s ease, box-shadow .18s ease;
}
.input-group .form-control {
border-radius: 0 8px 8px 0;
}
.input-group:focus-within .input-group-addon {
border-color: var(--itc-primary);
box-shadow: var(--itc-focus);
}
/* =========================
BOTÕES
========================= */
.btn {
border-radius: 8px;
transition: all .18s ease;
background-image: none !important;
text-shadow: none !important;
font-weight: 700;
letter-spacing: -.01em;
}
.btn-xs {
border-radius: 6px;
}
.btn-sm {
border-radius: 7px;
}
.btn-primary,
.btn-success,
.btn-info {
box-shadow: 0 6px 16px rgba(26,179,148,.18);
}
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-primary:focus,
.btn-success:focus,
.btn-info:focus {
box-shadow: 0 10px 22px rgba(26,179,148,.24);
}
.btn-default,
.btn-white {
background: #ffffff;
border-color: var(--itc-border);
color: #475569;
box-shadow: 0 3px 10px rgba(15,23,42,.05);
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default,
.btn-white:hover,
.btn-white:focus,
.btn-white:active,
.btn-white.active,
.open > .dropdown-toggle.btn-white {
background: #f8fafc;
border-color: var(--itc-border-strong);
color: #1f2937;
box-shadow: 0 8px 18px rgba(15,23,42,.10);
}
/* =========================
LABELS / BADGES
========================= */
label,
.label,
.badge {
font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
}
.label {
display: inline-block;
border-radius: 6px;
padding: 5px 10px;
line-height: 1;
font-weight: 700;
letter-spacing: -.01em;
}
/* =========================
IBOX
========================= */
.ibox {
border-radius: 12px;
box-shadow: var(--itc-shadow-sm);
transition: none;
overflow: hidden;
}
.ibox:hover {
transform: none;
box-shadow: var(--itc-shadow-sm);
}
.ibox-title {
border-top-width: 1px;
padding: 16px 18px 10px;
}
.ibox-title h5 {
font-size: 15px;
}
.ibox-content {
border-top: 0;
}
/* =========================
IBOX SEM SOMBRA
========================= */
.ibox-plain {
border-radius: 12px;
background: #fff;
border: 1px solid var(--itc-border);
box-shadow: none;
overflow: visible;
}
/* =========================
DROPDOWN
========================= */
.dropdown-menu {
box-shadow: 0 14px 30px rgba(15,23,42,.12);
border-radius: 10px;
border: 1px solid #e5eaf0;
padding: 6px;
}
.dropdown-menu > li > a {
border-radius: 8px;
margin: 2px 0;
padding: 8px 12px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
background: #f4fbfa;
color: #0f766a;
}
/* =========================
TABELAS
========================= */
.table > thead > tr > th {
background: #f8fafc;
border-bottom: 1px solid #e5e7eb;
color: #64748b;
font-weight: 700;
letter-spacing: -.01em;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
padding: 10px 8px;
}
.table-hover > tbody > tr {
transition: none;
}
.table-hover > tbody > tr:hover {
background: #f9fbfd;
transform: none;
}
/* =========================
LISTAS
========================= */
.small-list li {
transition: none;
border-radius: 8px;
padding: 8px;
}
.small-list li:hover {
background: #f4f8fb;
transform: none;
}
/* =========================
ALERTAS
========================= */
.alert {
box-shadow: 0 4px 12px rgba(15,23,42,.06);
border-radius: 10px;
}
/* =========================
CHOSEN
========================= */
.chosen-container {
width: 100% !important;
font-size: 14px;
font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
}
.chosen-container-single .chosen-single {
height: 38px;
line-height: 36px;
padding: 0 12px;
background: #ffffff;
background-image: none !important;
border: 1px solid var(--itc-border);
border-radius: 8px;
box-shadow: none;
color: #374151;
transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
}
.chosen-container-single .chosen-single span,
.chosen-container .chosen-results li,
.chosen-container-single .chosen-search input[type="text"] {
font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
}
.chosen-container-single .chosen-single div {
right: 10px;
}
.chosen-container-single .chosen-single div b {
background: none !important;
position: relative;
}
.chosen-container-single .chosen-single div b:after {
content: "";
display: block;
width: 6px;
height: 6px;
margin-top: 14px;
margin-left: 4px;
border-right: 2px solid #6b7280;
border-bottom: 2px solid #6b7280;
transform: rotate(45deg);
}
.chosen-container-active.chosen-with-drop .chosen-single,
.chosen-container-active .chosen-single {
border-color: var(--itc-primary);
box-shadow: var(--itc-focus);
}
.chosen-container-single .chosen-drop {
margin-top: 6px;
border: 1px solid var(--itc-border);
border-radius: 10px;
box-shadow: 0 14px 30px rgba(15,23,42,.12);
overflow: hidden;
}
.chosen-container .chosen-results {
margin: 0;
padding: 6px;
}
.chosen-container .chosen-results li {
padding: 8px 10px;
border-radius: 8px;
color: #374151;
transition: background-color .15s ease, color .15s ease;
}
.chosen-container .chosen-results li.highlighted {
background: #f0fdfa !important;
background-image: none !important;
color: #0f766a !important;
}
.chosen-container-single .chosen-search {
padding: 8px;
}
.chosen-container-single .chosen-search input[type="text"] {
height: 34px;
padding: 6px 10px;
border: 1px solid var(--itc-border);
border-radius: 8px;
background: #ffffff !important;
box-shadow: none !important;
font-size: 14px;
}
.chosen-container-multi .chosen-choices {
min-height: 38px;
padding: 3px 8px;
background: #ffffff;
background-image: none !important;
border: 1px solid var(--itc-border);
border-radius: 8px;
box-shadow: none;
transition: border-color .18s ease, box-shadow .18s ease;
}
.chosen-container-active .chosen-choices {
border-color: var(--itc-primary) !important;
box-shadow: var(--itc-focus) !important;
}
.chosen-container-multi .chosen-choices li.search-choice {
background: #f3f4f6;
background-image: none !important;
border: 1px solid #e5e7eb;
border-radius: 999px;
box-shadow: none;
color: #374151;
padding: 5px 22px 5px 10px;
font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
top: 5px;
right: 8px;
background: none !important;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:after {
content: "×";
color: #6b7280;
font-size: 14px;
line-height: 14px;
}
.chosen-container-single .chosen-default {
color: #9aa4b2;
}
/* =========================
TOPO / TÍTULOS
========================= */
.page-heading h2 {
font-size: 20px;
}
.navbar-top-links li a,
.dropdown-menu > li > a {
font-weight: 600;
}
/* =========================
TOOLTIP / POPOVER
========================= */
.tooltip,
.popover {
z-index: 1070 !important;
}
a[title],
button[title],
input[title] {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* =========================
ITC CARD
========================= */
.itc-card {
padding-top: 10px;
padding-bottom: 0;
border: 0;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(15,23,42,.06);
background: #fff;
}
/* =========================
CORREÇÃO — BOTÃO "ATUALIZAR VEÍCULO"
div.row com height:0px inline no ASP colapsa
o contêiner e esconde o botão.
========================= */
.row[style*="height:0"] {
height: auto !important;
overflow: visible !important;
}
/* =========================================
MODAL MODERNA - ITCAR v2
Compatível com Bootstrap 3 + iframes +
chosen + modal dentro de modal com scroll
========================================= */
/* Camada externa — overflow-y:scroll (não auto)
garante scroll da modal principal sem bloquear
o scroll de modais internas carregadas via iframe */
.modal {
overflow-x: hidden !important;
overflow-y: scroll !important;
}
.modal-dialog {
z-index: 1051;
}
/* overflow:hidden é obrigatório para border-radius
aparecer nos cantos — chosen/dropdowns sobem via z-index */
.modal-content {
border: 1px solid var(--itc-border) !important;
border-radius: 16px !important;
box-shadow: 0 24px 60px rgba(15,23,42,.22) !important;
overflow: hidden !important;
background: #ffffff !important;
padding: 0 !important;
}
/* Cabeçalho */
.modal-header {
border-bottom: 1px solid #eef2f7 !important;
padding: 18px 22px 14px !important;
border-radius: 16px 16px 0 0 !important;
}
.modal-title {
font-weight: 600 !important;
font-size: 15px !important;
color: #1f2937 !important;
}
/* Botão fechar redondo — usa line-height + text-align
(compatível com