/* ---------------------------------------
------------------------------------------
REGRAS GERAIS
------------------------------------------
--------------------------------------- */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Open Sans",Arial,sans-serif;
    background-color: #FFF;
    font-size: 12px;
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}
.center {
    text-align: center;
}
.vertical-divider {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ffffff;
    height: 30px;
    margin: 0 9px;
}
a, a:hover, a:focus {
   outline: 0;
}
a.excel {
    color: green;
}
a.pdf {
    color: red;
}
a.print {
    color: #666;
}
a.excel:hover, a.pdf:hover, a.print:hover {
    color: rgba(0, 0, 0, 0.8);
}
.table-responsive {
    overflow-x: auto;
}

.table-responsive-y {
  display: block;
  overflow-y: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.hidden {
    display: none;
}

.new-label-state {
    display: inline-block;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    border-radius: 3px;
    color: #FFFFFF;
    white-space: nowrap;
}

.view-hidden {
    display: none;
}

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
option:not(:checked) {
  color: black; /* prevent <option>s from becoming transparent as well */
}

/* ---------------------------------------
------------------------------------------
ALTERACAO BOOTSTRAP / CHOSEN
------------------------------------------
--------------------------------------- */
.row {
    margin-left: -10px;
    margin-right: -10px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    min-height: 1px;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}
.pagination {
    margin: 10px 0;
}

.chosen-container-multi .chosen-choices {
    border-radius: 4px;
}

/* ---------------------------------------
------------------------------------------
LAYOUT
------------------------------------------
--------------------------------------- */
.ui-layout-west {
    padding: 10px;
}
.ui-layout-south {
    padding: 10px;
}
.ui-layout-east {
    padding: 10px;
}
.ui-layout-center {
    padding: 10px;
    background-color: #eee;
}

/* Keeps the panel-footer visible while the heading + body scroll underneath it.
   The :has() rules let a pending-acceptance/closest-tow banner rendered as a
   sibling before the form panel keep its own natural height, so the form
   panel fills the remaining space instead of overflowing past it. */
.ui-layout-east:has(> .panel.panel-fixed-footer) {
    /* jquery.layout sets an inline display:block on this pane on every open/resize,
       so display needs !important here to actually take effect. */
    display: flex !important;
    flex-direction: column;
}
.ui-layout-east:has(> .panel.panel-fixed-footer) > *:not(.panel-fixed-footer) {
    flex: 0 0 auto;
}
.ui-layout-east > .panel.panel-fixed-footer {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}
/* .panel-AcceptBox's margin-top:20px (below) is meant for the old, non-flex
   layout; flex spacing already separates it from the acceptBox banner above it. */
.panel-AcceptBox.panel-fixed-footer {
    margin-top: 0;
}
.panel-fixed-footer > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.panel-fixed-footer > form > .panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.panel-fixed-footer > form > .panel-footer {
    flex: 0 0 auto;
}

/* Services form (Layout v2) save result bar, pinned above .panel-scroll the same way the footer is pinned below it.
   max-height keeps a long error list from taking over the form. */
.panel-fixed-footer > form > #service-form-status-bar {
    flex: 0 0 auto;
    max-height: 30vh;
    overflow-y: auto;
}
#service-form-status-bar > .alert {
    margin-bottom: 0;
    border-radius: 0;
}

/* Keeps a panel-footer pinned to the bottom of the .ui-layout-center scroll pane while the content above scrolls,
   returning to its natural place at the end so it never covers the last rows. bottom: -10px offsets the pane's
   padding (same as .chat-panel-footer). Breaks silently if any ancestor up to the pane gets an overflow value. */
.panel-footer-sticky {
    position: sticky;
    bottom: -10px;
    z-index: 10;
    box-shadow: 0 -2px 2px -1px rgba(0, 0, 0, 0.15);
}

.more-fields-toggle {
    display: inline-block;
    margin: 4px 0;
    font-size: 11px;
    line-height: 1;
}
.more-fields-toggle .fa {
    font-size: 10px;
    transition: transform 0.2s ease;
}
.more-fields-toggle.collapsed .fa {
    transform: rotate(-90deg);
}

/* ---------------------------------------
------------------------------------------
MODULOS
------------------------------------------
--------------------------------------- */
/* --- Login ------------------ */
.background-media, .background-overlay {
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.wrapForm {
    background-color: rgba(255, 255, 255, 0.9);
    width: 400px;
    margin: 15% auto auto !important;
    border: 1px solid #CCC;
    padding: 20px;
    z-index: 3;
    position: relative;
    margin-top: 15%;
    border-radius: 5px;
}
.wrapForm h2 {
    margin-top: 10px;
}
.fomulario {
    border-top: 1px solid #CCC;
    margin-top: 10px;
    padding-top: 10px;
}
.poweredBy {
    bottom: 0;
    padding: 20px 50px 20px 20px;
    position: absolute;
    text-align: right;
    width: 100%;
    z-index: 3;
}
.poweredBy p {
    margin: 0px;
    color: white;
    font-style: italic;
    font-size: 9px;
}
.btn-client {
    color: #FFF;
    background-color: #072031;
}
.btn-client:hover, .btn-client:focus {
    background-color: #17303f;
    color: #fff;
}

/* --- Barra Tarefas ------------------ */
.barraTarefas {
    padding: 10px 0px 20px 0px;
}
.barraTarefas .btUtil a {
    margin-right: 5px;
    line-height: 2.5;
}

/* --- NAVBAR ------------------------- */
.navbar {
	border-radius: 0px;
	border: none;
	margin-bottom: 0px;
}
.navbar-brand {
    padding: 0px;
    margin-right: 20px;
}
.navbar-client {
    background-color: #072031;
}
.navbar-client .navbar-nav > li > a {
    color: #8aafc7;
    font-size: 12px;
}
.navbar-client .navbar-nav > .active > a, .navbar-client .navbar-nav > .active > a:hover, .navbar-client .navbar-nav > .active > a:focus {
    background-color: #104E7B;
    color: #fff;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: #104E7B;
    color: #FFF;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #092E48;
    color: #FFF;
}
.logOut {
	background-color: #092E48;
    color: #FFF;
    margin-left: 10px;
    padding: 15px;
}
.navbar-nav .badge {
    background-color: #d9534f;
    border-radius: 2px;
    font-size: 10px;
    font-weight: normal;
    line-height: 13px;
    padding: 2px 5px;
    margin-left: 5px;
}

.navbar-right .btn-menuTop {
    padding: 12px 15px;
    height: 50px;
    font-size: 16px;
    background: transparent;
    color: #8aafc7;
    border: none;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}
.navbar-right .btn-menuTop:hover {
    background: #092E48;
    color: #FFFFFF;
}
.navbar-right .dropdown-menu::after {
    border-bottom: 6px solid #8aafc7;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    display: inline-block;
    right: 30px;
    position: absolute;
    top: -6px;
}
.navbar-right .dropdown-menu {
    border: 0;
    margin-top: 0px;
    margin-right: -1px;
    padding: 0px;
}
.dropdown-menu-head .title {
    background: #8aafc7;
    color: #072031;
    padding: 15px;
    text-transform: uppercase;
    font-size: 11px;
    margin: 0;
}
.navbar-right .dropdown-menu-head ul {
    border: 1px solid #ddd;
    border-top: 0;
    padding: 0 10px;
    max-height: 500px;
    overflow-y: auto;
}
.user-list {
    width: 300px;
}
.dropdown-list li {
    border-bottom: 1px solid #eee;
}
.navbar-right .dropdown-menu li {
    display: block;
    margin: 0;
    float: none;
    background: none;
    padding: 5px 5px;
}
.dropdown-list .desc {
    display: block;
}
.dropdown-list .desc h5 {
    font-size: 13px;
    margin-top: 7px;
}
.navbar-right .dropdown-menu-head li a {
    color: #333;
    padding: 0;
    opacity: 1;
}
.dropdown-list li .label {
    float: right;
}
.navbar-right .dropdown-menu-head li.all a {
    font-size: 12px;
    color: #CCC;
    text-align: right;
}

/* --- PANELS ------------------------- */
.panel-default > .panel-heading, .panel-default > .panel-body {
    background-color: #fff;
    border-color: #e7e7e7;
}
.panel-heading p {
    color: #999;
    font-size: 13px;
    margin-bottom: 0;
}
.panel .panel-btns {
    float: right;
    padding: 10px;
    position: relative;
}
.panel .pagination {
    margin: 0px;
}
/*.panel-AcceptBox {
    margin-top: 80px;
}*/
.panel-AcceptBox {
    margin-top: 20px;
}
h4.panel-title {
    overflow: hidden;
}
.panel-notification {
    padding: 15px 15px 0px;
}

/* --- TABLES ------------------------- */
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 5px;
    vertical-align: middle;
}
.table-action {
    text-align: right;
}
.table-state {
    text-align: left;
}
.tables h5 {
    font-weight: bold;
}

/* --- Tabela Lista Serviços (MAPA) ------------------------- */
.label-state {
    font-weight: 300;
    display: block;
    min-width: 120px;
}
.label-state-outline {
    font-weight: 300;
    display: block;
    border-radius: 4px;
    padding: 4px 8px;
}
.label-others {
    background-color: #CCC;
}
.label-state.label-attention {
    background-color: #ffc300;
}
.label-state.label-warning {
    background-color: #eb6d00;
}
.label-state.label-danger {
    background-color: #eb1700;
}
.label-state.label-info {
    background-color: #00c3ff;
}
.label-state.label-success {
    background-color: #40ab36;
}
tr.highlight td {
    background-color: #337ab7 !important;
    color: #FFF;
}
td.description {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}
tr[data-href] { 
    cursor: pointer 
}
.panel-search {
    padding: 15px 15px 0px;
}

/* --- formEdit (veiculos/motoristas) ------------------------- */
.basic-wizard .nav-justified {
    margin: -15px -15px 0px -15px;
    width: auto;
}
.basic-wizard .nav li a {
    background: #e4e7ea none repeat scroll 0 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    border-right: 1px solid #ccc;
    color: #4a535e;
    opacity: 0.75;
}
.basic-wizard .nav li.active a, .basic-wizard .nav li.active a:focus, .basic-wizard .nav li.active a:active {
    background: #fcfcfc none repeat scroll 0 0;
    border-bottom-color: #fcfcfc;
    color: #333;
    opacity: 1;
}
.nav > li > a {
    padding: 15px;
}
.basic-wizard ul li a span {
    font-weight: bold;

}
.basic-wizard .pager li a {
    background-color: #428bca;
    border-color: #357ebd;
    border-radius: 2px;
    color: #fff;
    border-radius: 2px;
}
.basic-wizard .pager li.disabled a {
    background: #eee none repeat scroll 0 0;
    border-color: #ccc;
    color: #999;
}
.basic-wizard ul.pager.wizard {
    margin: 0px;
}
.basic-wizard .tab-content {
    border-radius: 0;
    box-shadow: none;
}
.basic-wizard .nav > li > a {
    padding: 15px 10px;
    height: 50px;
    line-height: 1;
}
.tab-content {
    background: #fcfcfc none repeat scroll 0 0;
    padding: 15px 0px;
}
.tab-pane::after {
    clear: both;
    content: "";
    display: block;
}
.basic-wizard label {
    color: #4a535e;
    font-weight: normal;
    margin-bottom: 5px !important;
}
.form-group::after {
    clear: both;
    content: "";
    display: block;
}

.uploadFicheiros {
    padding-bottom: 15px;
    border-bottom: 1px solid #CCC;
}
/* --- formEdit (Serviços) ------------------------- */
/*.acceptBox {
    background-color: #fff;
    display: block;
    height: 80px;
    margin-top: -10px;
    padding: 10px 10px 10px 30px;
    position: fixed;
    right: 20px;
    text-align: right;
    width: inherit;
    z-index: 99;
}*/
.bg-warning {
    background-color: #fcf8e3 !important;
}


/* --- formularios ------------------------- */
form input {
  transition: border-color .5s ease-out;
}
/*form input:optional {
    border-left-color: #999;
}*/
form input:disabled,
form textarea:disabled,
form select:disabled,
form button.disabled  {
    border-left: 3px solid;
    border-left-color: #333;
}
form input:required,
form textarea:required,
form select:required,
form div.valid,
form button.valid {
    border-left: 3px solid;
    border-left-color: forestgreen;
}
form input:invalid,
form textarea:invalid,
form select:invalid,
form div.required,
form button.required{
    border-left: 3px solid;
    border-left-color: salmon;
}
form .bootstrap-select.required {
    border-left: none !important;
}
form input:required:focus:valid,
form textarea:required:focus:valid,
form select:required:focus:valid,
form .required:selected {
  background: url("../img/ok.png") no-repeat 95% 50%;
  background-size: 15px;
}



/* --- popup do mapa ------------------------- */
.panel-googleMaps {
	width: 300px !important;
	position: relative;
}
.panel-googleMaps .heading-googleMaps {
	background-color: #072031;
	color: #FFFFFF;
}
.panel-googleMaps .panel-body {
	padding: 8px;
}
.panel-googleMaps .table td {
	font-weight: 500;

}
.panel-googleMaps .titleLabel {
	font-weight: 100;

}
.panel-googleMaps .table {
	margin-bottom: 0px;
}

/* --- state labels ---------------------------------- */
.label-p {
	background-color: #ce4a49;
}
.label-outline-p {
	color: #ce4a49;
    border: 1px solid #ce4a49;
}

.label-am {
    background-color: #426db5;
}
.label-outline-am {
	color: #426db5;
    border: 1px solid #426db5;
}

.label-pm {
    background-color: #a591c5;
}
.label-outline-pm {
	color: #a591c5;
    border: 1px solid #a591c5;
}

.label-pm.label-striped {
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.40) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.40) 50%,rgba(255,255,255,.40) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.40) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.40) 50%,rgba(255,255,255,.40) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.40) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.40) 50%,rgba(255,255,255,.40) 75%,transparent 75%,transparent);
    background-size: 50px 50px;
}

.label-striped {
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.40) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.40) 50%,rgba(255,255,255,.40) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.40) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.40) 50%,rgba(255,255,255,.40) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.40) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.40) 50%,rgba(255,255,255,.40) 75%,transparent 75%,transparent);
    background-size: 50px 50px;
}

.label-s { background-color: #7e7095; }
.label-outline-s {
	color: #7e7095;
    border: 1px solid #7e7095;
}

.label-pa {
    background-color: #f79020;
}
.label-outline-pa {
	color: #f79020;
    border: 1px solid #f79020;
}

.label-cd {
    background-color: #fdc20e;
}
.label-outline-cd {
	color: #fdc20e;
    border: 1px solid #fdc20e;
}

.label-df {
    background-color: #36b55c;
}
.label-outline-df {
	color: #36b55c;
    border: 1px solid #36b55c;
}


.label-ra {
    background-color: #a91e22;
}
.label-outline-ra {
	color: #a91e22;
    border: 1px solid #a91e22;
}

/*** reboques **/
.label-rd{
	background-color: #36b55c;
}
.label-outline-rd {
	color: #36b55c;
    border: 1px solid #36b55c;
}


.bg-classes p {
    padding: 15px;
}


/* ---------------------------------------
------------------------------------------
DASHBOARD
------------------------------------------
--------------------------------------- */
/* --- panel stat ------------------------- */
.panel-stat {
    background: none;
}
.panel-stat .stat {
    color: #fff;
}
.panel-stat .panel-heading {
    padding: 15px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.panel-stat .stat .fa {
    font-size: 72px;
    color: #fff;
    opacity: 0.2;
}
.panel-stat .stat-label {
    text-transform: uppercase;
    font-size: 11px;
    opacity: 0.75;
    display: block;
    line-height: normal;
    margin-bottom: 2px;
}
.panel-stat h1 {
    margin: 0;
    line-height: 36px;
    font-size: 38px;
    font-weight: 700;
}

.panel-danger .panel-heading {
    background-color: #D9534F;
}
.panel-success .panel-heading {
    background-color: #1CAF9A;
}
.panel-warning .panel-heading {
    background-color: #F0AD4E;
}
.panel-client .panel-heading {
    background-color: #072031;
}



.progress-sm {

    height: 10px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
h5.title {
    margin-bottom: 0px;
}
p.sub-title {
    margin-bottom: 20px;
    color: #999;
}

.widget-today .panel-heading, .widget-time .panel-heading {
    height: 165px;
}
.panel-alt .panel-heading {
    padding: 20px 20px;
}
.widget-today .glyphicon, .widget-today .fa {
    font-size: 72px;
    color: #fff;
    opacity: 1;
}
.panel-alt .panel-body {
    padding: 15px;
}
.widget-today .today, .widget-time .today {
    line-height: normal;
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;;
}
.widget-today h1 {
    line-height: normal;
    margin: 0;
    color: #333;
    font-size: 56px;
    font-weight: 700;
}

.panel-body.companhias img {
    max-height: 30px;
    max-width: 120px;
}



/* ---------------------------------------
------------------------------------------
Tarifas
------------------------------------------
--------------------------------------- */
/* --- Lista Companhias --------------- */
.listaCompanhias  {
    position: relative;
	margin-bottom:60px;
}
.listaCompanhias .panel-body {
    padding: 10px;
}
.listaCompanhias .panel-active {
    border: 1px solid #999;
}
.listaCompanhias .panel-active a img,
.listaCompanhias .panel-default a:hover img {
    opacity: 1.0 !important;
}
.listaCompanhias .panel-default {
    margin-bottom: 10px;
}
.listaCompanhias .panel-default a img {
    opacity: 0.3;
	max-width:90%;
}
.listaCompanhias a {
    width: 100%;
    text-align: center;
    display: block;
    height: 50px;
    width: 100%; 
}
.listaCompanhias a img {
    max-height: 50px;
    width: auto;
}

#condictionsTable td input[type=checkbox] {
	margin: auto;
}


/* --- Regras Companhias --------------- */


/* --- formEdit (tarifas) -------------- */

/* ---------------------------------------
------------------------------------------
FILTROS TAGS
------------------------------------------
--------------------------------------- */
.tags {
    padding-top: 5px;
}
.tags .btn-label, .gritter-item-wrapper .btn-label  {
    position: relative;
    left: -12px;
    display: inline-block;
    padding: 6px 12px;
    background: rgba(0,0,0,0.15);
    border-radius: 3px 0 0 3px;
}
.tags .btn-labeled, .gritter-item-wrapper  .btn-labeled {
    padding-top: 0;
    padding-bottom: 0;
}
.tags .btn , .gritter-item-wrapper .btn { 
    margin-bottom:10px; 
}
.tags .btn-label-xs , .gritter-item-wrapper .btn-label-xs {
    position: relative;
    left: -6px;
    display: inline-block;
    padding: 0px 3px;
    background: rgba(0,0,0,0.15);
    border-radius: 3px 0 0 3px;
}
.tags .btn span.glyphicon, .gritter-item-wrapper  .btn span.glyphicon {               
    opacity: 0;             
}
.tags .btn.active span.glyphicon, .gritter-item-wrapper .btn.active span.glyphicon  {                
    opacity: 1;             
}


.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #777;
    border-radius: 10px;
}

/* ---------------------------------------
------------------------------------------
MEGA MENU
------------------------------------------
--------------------------------------- */
.navbar-nav>li>.dropdown-menu {
  margin-top: 0px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/*.navbar-default .navbar-nav>li>a {
  width: 200px;
  font-weight: bold;
}*/

.mega-dropdown {
  position: static !important;
  width: 100%;
}
.mega-dropdown > a > span.fa {
  margin-left: 10px;
}

.mega-dropdown-menu {
  padding: 20px 0px;
  width: 100%;
  box-shadow: none;
  -webkit-box-shadow: none;
}
/*
.mega-dropdown-menu:before {
  content: "";
  border-bottom: 15px solid #fff;
  border-right: 17px solid transparent;
  border-left: 17px solid transparent;
  position: absolute;
  top: -15px;
  left: 285px;
  z-index: 10;
}

.mega-dropdown-menu:after {
  content: "";
  border-bottom: 17px solid #ccc;
  border-right: 19px solid transparent;
  border-left: 19px solid transparent;
  position: absolute;
  top: -17px;
  left: 283px;
  z-index: 8;
}*/

.mega-dropdown-menu > li > ul {
  padding: 0;
  margin: 0;
}

.mega-dropdown-menu > li > ul > li {
  list-style: none;
}

.mega-dropdown-menu > li > ul > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #999;
  white-space: normal;
}

.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus , .mega-dropdown-menu > li ul > li.active > a {
  text-decoration: none;
  color: #444;
  background-color: #f5f5f5;
}

.mega-dropdown-menu .dropdown-header {
  color: #428bca;
  font-size: 18px;
  font-weight: bold;
}

.mega-dropdown-menu form {
  margin: 3px 20px;
}

.mega-dropdown-menu .form-group {
  margin-bottom: 3px;
}

.carousel.slide {
    padding: 0px 10px;
}
.carousel-control {
    background-image: none !important;
}

/* --- Simulador 2--------------- */
.simulador {
    position: fixed;
    bottom: 0px;
    width: 300px;
    margin: 0px -10px;
}

.simulador .btn {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    position:relative;
    display:inline-block;
    overflow:hidden;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    line-height:60px;
    font-size:16px;
    font-weight:bold;
    text-shadow:0px 1px 1px #888;
    background-color: #072031;
}
.btn span.icon,
.btn span.title {
    display:block;
    position:relative;
    line-height:60px;
    padding:0 30px;
    border-radius:0px;
}
.btn span.left {
    float:left;
    border-radius:0px;
}
.btn span.right {
    float:right;
    border-radius:0px;
}
.btn span.icon {
    font-size:23px;
    background-color: #00cdae;
    -webkit-box-shadow:0 3px 0 0 #007261;
    box-shadow:0 3px 0 0 #007261;
    text-shadow:0px 1px 1px #888;
}
.btn span.title {
    -webkit-box-shadow:0 3px 0 0 #00ae94;
    box-shadow:0 3px 0 0 #00ae94;
    background-color: #072031;
    text-transform: uppercase;
}
.btn span.arrow-left,
.btn span.arrow-right {
    position:absolute;
    width:0;
    height:0;
    border-top:30px solid transparent;
    border-bottom:30px solid transparent;
    -webkit-transition:all .15s;
    -transition:all .15s;
    -webkit-transition-property:left,right;
    transition-property:left,right;
}
.simulador .btn.right {
    color: #FFF;
    width: 100%;
    padding: 0px;
    border-radius: 0px;
    border: none;
}
.btn.right span.arrow-right {
    left:0;
    -webkit-box-shadow:-10px 0 0 0 #00cdae,-10px 3px 0 0 #00cdae;
    box-shadow:-10px 0 0 0 #072031,-10px 3px 0 0 #072031;
    border-left:10px solid #072031;
}
.btn:hover span.arrow-right {
    left:10px;
}

/* --- Chat --------------- */

.chat_window {
  position: relative;
  width: calc(100% - 20px);
  max-width: 900px;
  height: 520px;
  border-radius: 10px;
  background-color: #fff;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  background-color: #f8f8f8;
  overflow: hidden;
  z-index: 999;
}

.top_menu {
  background-color: #fff;
  width: 100%;
  padding: 20px 0 15px;
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
}
.top_menu .buttons {
  margin: -24px 0 0 820px;
  position: absolute;
}
.top_menu .buttons .button {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
  position: relative;
}
.top_menu .buttons .button.close {
  background-color: #d9534f;
}
.button.minimize {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: inline-block;
	margin-right: 10px;
	position: relative;
	background-color: #fdbf68;
	margin: 10px 0px 10px 0px;
}
.top_menu .buttons .button.maximize {
  background-color: #a3d063;
}
.top_menu .title {
  text-align: center;
  color: #bcbdc0;
  font-size: 20px;
}

.top_menu .textSearch {
	width: 75%;
    margin-left: 220px;
    margin-right: 5px;
	margin-top:5px;	
}

/*.top_menu .input-group .input-group-addon{
	background-color: #fff;
	border: none;
	border-bottom: 1px solid #CCC;
}*/

/*.top_menu .input-group input {
	border: none;
	border-bottom: 1px solid #CCC;
	
	-webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
	
}*/


.minimizeChat {
	margin-right:5px;
}

.chat_list {
	background-color: #fff;
}

.drivers_list{
	height: 437px;
	padding: 2px 0px 0px 8px;
}

/*.drivers_list .input-group .input-group-addon{
	background-color: #fff;
	border: none;
	border-bottom: 1px solid #CCC;
}*/

/*.drivers_list .input-group input {
	border: none;
	border-bottom: 2px solid #CCC;
	
	-webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
	
}*/

.chat_messages {
    padding-left: 0px;
    padding-right: 5px;
}

.chat_messages .col-sm-12{
    padding-left: 0px;
    padding-right: 6px;
}

.member_list {
	height: 380px;
	overflow-x: hidden;
	overflow-y: auto;
}

.member_list .chat-body {
	margin-left: 6px;
	margin-top: 0;
}

.member_list .chat-body .col-md-9{
	padding-left: 0px;
    padding-right: 0px;
}

.member_list .contact_sec {
	margin-top: 3px;
}
.member_list li {
	padding: 6px;
}
.member_list ul {
	border: 1px solid #dddddd;
}
.chat-img img {
	height: 34px;
	width: 34px;
}
.member_list li {
	background-color: #fbf9fa;
	border-bottom: 1px solid #dddddd;
	padding: 6px;
}
.member_list li:last-child {
	border-bottom:none;
}
.member_list {
	height: 380px;
	overflow-x: hidden;
	overflow-y: auto;
}

.member_list li:hover {
  background: #428bca none repeat scroll 0 0;
  color: #fff;
  cursor:pointer;
}

.member_list .unavailable{
	border-left:5px solid #d9534f;
}

.member_list .available{
	border-left:5px solid #4cae4c;
}


.member_list .highlight{
	background-color: #337ab7 !important;
    color: #FFF;
}

.messages {
  position: relative;
  list-style: none;
  padding: 20px 10px 0 10px;
  margin: 0;
  height: 347px;
  overflow: scroll;
}
.messages .message {
  clear: both;
  overflow: hidden;
  margin-bottom: 20px;
  transition: all 0.5s linear;
  opacity: 0;
}
.messages .message.left .avatar {
  background-color: #f5886e;
  float: left;
}
.messages .message.left .text_wrapper {
  background-color: #ffe6cb;
  margin-left: 20px;
}
.messages .message.left .text_wrapper::after, .messages .message.left .text_wrapper::before {
  right: 100%;
  border-right-color: #ffe6cb;
}
.messages .message.left .text {
  color: #c48843;
}
.messages .message.right .avatar {
  background-color: #fdbf68;
  float: right;
}
.messages .message.right .text_wrapper {
  background-color: #c7eafc;
  margin-right: 20px;
  float: right;
}

.messages .message.center .text_wrapper {
  background-color: #e2e2e2;
  float: right;
  text-align:center;
  margin-right:35px;
}

.messages .message.dateDisplay .text_wrapper {
	background-color: transparent;
}


.messages .message.right .text_wrapper::after, .messages .message.right .text_wrapper::before {
  left: 100%;
  border-left-color: #c7eafc;
}
.messages .message.right .text {
  color: #45829b;
}
.messages .message.appeared {
  opacity: 1;
}
.messages .message .avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-block;
}
.messages .message .text_wrapper {
  display: inline-block;
  padding: 2px 12px 2px 12px;
  border-radius: 6px;
  width: calc(100% - 85px);
  min-width: 100px;
  position: relative;
}
.messages .message .text_wrapper::after, .messages .message .text_wrapper:before {
  top: 18px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.messages .message .text_wrapper::after {
  border-width: 13px;
  margin-top: 0px;
}
.messages .message .text_wrapper::before {
  border-width: 15px;
  margin-top: -2px;
}
.messages .message .text_wrapper .text {
  font-size: 18px;
  font-weight: 300;
}

.messages .message .text_wrapper .timeStamp{
	font-size: 12px;
}

.bottom_wrapper {
  width: 100%;
  background-color: #fff;
  padding: 20px 12px 27px 1px;
  bottom: 0;
}
.bottom_wrapper .message_input_wrapper {
  display: inline-block;
  height: 40px;
  border-radius: 25px;
  border: 1px solid #bcbdc0;
  width: calc(100% - 140px);
  position: relative;
  padding: 0 20px;
}
.bottom_wrapper .message_input_wrapper .message_input {
  border: none;
  height: 100%;
  box-sizing: border-box;
  width: calc(100% - 40px);
  position: absolute;
  outline-width: 0;
  color: gray;
}
.bottom_wrapper .send_message {
  width: 120px;
  height: 40px;
  display: inline-block;
  border-radius: 50px;
  background-color: #a3d063;
  border: 2px solid #a3d063;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s linear;
  text-align: center;
  float: right;
}
.bottom_wrapper .send_message:hover {
  color: #a3d063;
  background-color: #fff;
}
.bottom_wrapper .send_message .text {
  font-size: 18px;
  font-weight: 300;
  display: inline-block;
  line-height: 40px;
}

.message_template {
  display: none;
}


/* ---------------------------------------
------------------------------------------
GRITTER (NOTIFICAÇÔES POPUP)
------------------------------------------
--------------------------------------- */
#gritter-notice-wrapper {
    position:fixed;
    top:20px;
    right:20px;
    width:301px;
    z-index:9999;
}

.gritter-item-wrapper {
    position:relative;
    margin:0 0 10px 0;
    background: #000;
    background: rgba(6,31,49,0.75);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.gritter-light {
    background: rgba(255,255,255,0.70);
}

.growl-primary {
    background: rgba(66,139,202,0.80);
}

.growl-success {
    background: rgba(28,175,154,0.80);
}

.growl-warning {
    background: rgba(240,173,78,0.80);
}

.growl-danger {
    background: rgba(217,83,79,0.80);
}

.growl-info {
    background: rgba(91,192,222,0.80);
}

.gritter-item {
    display:block;
    color:#eee;
    padding: 15px;
    font-size: 11px;
}

.gritter-item p {
    padding:0;
    margin:0;
    word-wrap:break-word;
    line-height: 18px;
    font-size: 13px;
    opacity: 0.75;
}

.gritter-close {
    display:none;
    position:absolute;
    top: 10px;
    right: 10px;
    background: url("../images/close-white.png") no-repeat center center;
    cursor:pointer;
    width:10px;
    height:11px;
    text-indent:-9999em;
}

.gritter-title {
    font-size: 14px;
    padding:0 0 7px 0;
    display:block;
/*    font-family: 'LatoBold';*/
}

.gritter-image {
    width:48px;
    height:48px;
    float:left;
}

.gritter-with-image,
.gritter-without-image {
    padding:0;
}

.gritter-with-image {
    width:220px;
    float:right;
    padding-left: 10px;
}


.gritter-light .gritter-item,
.gritter-light .gritter-bottom,
.gritter-light .gritter-top,
.gritter-light .gritter-close {
    color: #333;
}
.gritter-light .gritter-close {
    display:none;
    position:absolute;
    top: 10px;
    right: 10px;
    background: url("../images/close-dark.png") no-repeat center center;
    cursor:pointer;
    width:10px;
    height:11px;
    text-indent:-9999em;
}

/**** Label do Tow ****/
.towlabel{
	padding:5px;
	background-color:#fff;
	font-size:12px;
	font-weight:bold;
	color:#333;
}

/*** loader ***/
.loaderContainer {
	width: 100%;
    height: 100%;
	position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: black;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 0.8;
}
.loader {
	left: 50%;
    top: 50%;
    display: block;
    position: absolute;
	z-index: 10000;
	
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

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

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

#quickInsertMode{
	display:none !important;
}

.displayErrorField {
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
	padding: 4px 0px 4px 0px;
}

.displayErrorFieldInline input, 
.displayErrorFieldInline textarea, 
.displayErrorFieldInline .btn-default, 
.displayErrorFieldInline label {
    color: #a94442;
    /* background-color: #f2dede; */
    border-color: #a94442;
}

/* ---------------------------------------
------------------------------------------
MAPAS DE REPORTING
------------------------------------------
--------------------------------------- */
.collapse > .list-group {
    margin-bottom: 0px;
}
.collapse > .list-group > .list-group-item {
    border-radius: 0px !important;
    border-left: none;
    border-right: none;
}
.reporting {
    text-align: center;
}
.reporting th {
    text-align: center;
}
.reporting th.left,
.reporting td.left {
    text-align: left;
}
.reporting th.center,
.reporting td.center {
    text-align: center;
}
.reporting th.right,
.reporting td.right {
    text-align: right;
}
.reporting tr.resumo td {
    padding: 7px 5px;
}
td.highlight {
    background-color: #f9f9f9;
}
.reporting tbody tr th.highlight {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: #f9f9f9;
    border-right: 1px solid #FFF;
    border-left: 1px solid #FFF;
}
.reporting tbody tr.subTitulo th {
    border-top: 2px solid #ddd;
}
.reporting tr.resumo td.highlight {
    background-color: #eee;
    border-right: 1px solid #FFF;
    border-left: 1px solid #FFF;
}

/* ---------------------------------------
------------------------------------------
GRÁFICOS
------------------------------------------
--------------------------------------- */
.morris-hover {
   position: absolute;
   z-index: 1000;
}

.morris-hover.morris-default-style {
   border-radius: 3px;
   padding: 6px;
   color: #333;
   background: rgba(255, 255, 255, 0.8);
   border: 1px solid #ddd;
   font-size: 12px;
   text-align: center;
}

.morris-hover.morris-default-style .morris-hover-row-label {
   font-weight: bold;
   margin: 0.25em 0;
}

.morris-hover.morris-default-style .morris-hover-point{
   white-space: nowrap;
   margin: 0.1em 0;
}

/******* Tarifas motoristas ******/
.ratesList :first-child{
	margin-bottom: 5px;
}
.ratesList .well{
	margin-bottom:2px;
}

.ratesList .well-active {
	background-color: #d9edf7;
}

 #tab2Extra {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
}

#calendar {
	width: 100%;
	margin: 40px auto;
	padding: 0 10px;
}

/******* Mensages *******/
h5.title .label-client {
    color: #FFF;
    background-color: #092E48;
}

.label-client a {
    color: #FFF;
}


img.imgfluid {
    height: 18px;
}



/* ---------------------------------------
Coordenados
--------------------------------------- */
.btn-printCoordLines {
    z-index: 9;
    padding: 8px 11px;
    background-color: #EFEFEF;
    margin-right: 10px;
    color: #072031;
}
.btn-printCoordLines:hover,
.btn-printCoordLines:focus {
    color: #104E7B;
}
.btn-light {
    color: #212529;
    background-color: #efefef;
    border-color: #ccc;
}
.btn-light:hover,
.btn-light:focus {
    background-color: #dddddd;
    border-color: #cccccc;
}
.modal-xl {
    width: 1140px;
}
.modal-xxl {
    width: 95%;
}


/* ==============================================
9. Plano de SMS
===============================================*/
.pricing-plans, .historico {
    background-color: #fff;
    border-color: #e7e7e7;
    padding: 15px;
    overflow: hidden;
  }
  .historico {
    padding-top: 50px;
  }
  .pricing-plans h1 {
    font-weight: 600;
  }
  .text-price {
    color: #5cb85c;
  }

  /* ==============================================
  Plano de SMS
  ===============================================*/
  .pricing-plans ul {
    padding-left: 10px;
    list-style-type: none;
  }
  .pricing-plans li {
    font-size: 12px;
    font-weight: 300;
    color: #8da2b5;
    letter-spacing: .1em;
    margin-bottom: 0px;
  }
  .pricing-plans span.glyphicon.ok {
    color: #5cb85c;
  }
  .cta {
    padding-top: 2%;
    padding-left: 2%;
  }
  .conta {
    padding-top: 5%;
  }
  .conta h6 {
    font-size: 60px;
    font-weight: 700;
    color: #3a3f52;
    margin-bottom: 0px;
  }
  .pricing-box {
    background-color: #ffffff;
    padding: 40px 20px;
    border: 3px solid #FFFFFF;
    border-radius: 6px;
    box-shadow: 0 0 1px 0 rgba(0,12,32,0.04), 0 10px 16px 0 rgba(10,31,68,0.06);
    margin-top: 30px;
  }
  .pricing-box h3 {
    font-size: 22px;
    font-weight: 300;
    letter-spacing: .1em;
    color: #0095f7;
  }
  .pricing-box h6 {
    font-size: 60px;
    font-weight: 700;
    color: #3a3f52;
    margin-bottom: 0px;
  }
  .pricing-box p {
    font-size: 17px;
    margin-top: 15px;
    padding: 0px;
  }
  .pricing-box ul {
    padding-left: 10px;
    list-style-type: none;
  }
  .pricing-box li {
    font-size: 12px;
    font-weight: 300;
    color: #8da2b5;
    letter-spacing: .1em;
    margin-bottom: 15px;
  }
  .pricing-box span {
    font-weight: 500;
    color: #8da2b5;
  }
  .pricing-box small {
    color: #8da2b5;
    letter-spacing: .2em;
  }
  .pricing-box .glyphicon {
    margin-right: 10px;
  }
  .pricing-box span.glyphicon.ok {
    color: #5cb85c;
  }
  .pricing-box .demo {
    color: #6772e5!important;
  }
  .custom-control {
    border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(0,0,0,.125);
    background-color: #F1f1f1;
    text-align: center;
  }
  .custom-control label {
    font-size: 18px;
  }
  .pricing-box.popular {
    border: 3px solid #007bff;
    content: "";
    display: block;
    pointer-events: none;
    z-index: 1;
  }
  @media screen and (max-width: 768px) {
    .img-slogan {
      display: none;
    }
    
  }

ul.payment-list { text-align: center; margin: 0; padding: 0; }
ul.payment-list li { font-size: 16px; color: #3a4051; margin-bottom: 0; }
.label-ticket-d { pointer-events: none; background-color: #f79020; }
.label-ticket-o { pointer-events: none; background-color: #36b55c; }
.label-ticket-c { pointer-events: none; background-color: #ce4a49; }
.label-sm { font-size: 10px !important; }
.subtitle { font-size: 13px; text-transform: uppercase; font-weight: 700; }
.subtitle-lined { border-bottom: 1px dotted #ddd; padding-bottom: 5px; }
.no-margin { margin: 0 !important; }
.no-padding { padding: 0 !important; }
.generate-edd i { pointer-events: none; }
#print-excel { color: green; }
#print-pdf { color: red; }

.text-pre-wrap { white-space: pre-wrap !important; }

#cc::-webkit-input-placeholder { /* WebKit browsers */
    color:    gray;
    font-size: smaller;
}
#cc:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    gray;
    font-size: smaller;
}
#cc::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    gray;
    font-size: smaller;
}
#cc:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    gray;
    font-size: smaller;
}

#bcc::-webkit-input-placeholder { /* WebKit browsers */
    color:    gray;
    font-size: smaller;
}
#bcc:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    gray;
    font-size: smaller;
}
#bcc::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    gray;
    font-size: smaller;
}
#bcc:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    gray;
    font-size: smaller;
}
.nowrap { white-space: nowrap; width: 1%; }

.custom-hidden {
    display: none;
}

.custom-highlight, .custom-highlight:hover{
    background-color: #337ab7 !important;
    color: #FFF;
}

.invalid-feedback { color: #a94442; }
textarea.disable-when-loading[disabled] { background-color: #fff; }
#modal-subcontract-provider div.bootstrap-select div.dropdown-menu ul.dropdown-menu li.disabled { display: none;}

.message-list .media-object { width: 40px; height: 40px; object-fit: contain; }
.message-list a.pull-left { margin-right: 10px; }
.message-list a.pull-right { margin-left: 10px; }
.chat-panel-footer { position: sticky; bottom: -10px; }
.chat-message-header { position: sticky; top: -10px; background-color: #f1f1f1; margin: -15px -15px 15px -15px; padding: 15px; z-index: 9; }
#new-message-attachments, #private-service-new-message-attachments { display: none; }

div.bootstrap-select div.dropdown-menu { min-width: 160px !important; /*max-width: 100% !important; width: 100% !important;*/ }

div.customer-payment div.bootstrap-select { max-width: 160px;}

.towing-services-form div.dropdown-menu, #modal-subcontract-provider .subcontract-provider-select div.dropdown-menu, div[select-full-width=true] div.dropdown-menu { width: 100%;}

#towingServiceFormSubmit div.bootstrap-select div.dropdown-menu { width: 100% !important; }

.key-value-table > tbody > tr > td:first-child { width: 1%; white-space: nowrap; padding-right: 30px; }

body.panel-maximized-form .ui-layout-west,
body.panel-maximized-form .ui-layout-center,
body.panel-maximized-form .ui-layout-resizer-west,
body.panel-maximized-form .ui-layout-resizer-east,
body.panel-maximized-form .ui-layout-toggler-west { display: none !important; }

body.panel-maximized-form .ui-layout-east { left: 0 !important; width: 100% !important; }

/* Base timeline (used as-is by the simple activity-log style, e.g. towingServices Historial tab) */
.timeline-panel { margin-bottom: 15px; }
.timeline { position: relative; }
.timeline-item { display: flex; align-items: flex-start; gap: 12px; position: relative; padding: 8px 4px; }
.timeline-item:not(:first-child):not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: var(--table-border, #E5E7EB); }
.timeline-item:first-child::before { content: ""; position: absolute; left: 8px; top: 17px; bottom: 0; width: 1px; background: var(--table-border, #E5E7EB); }
.timeline-item:last-child::before { content: ""; position: absolute; left: 8px; top: 0; height: 17px; width: 1px; background: var(--table-border, #E5E7EB); }
.timeline-dot { width: 9px; height: 9px; border-radius: 50%; background: #02A59C; flex-shrink: 0; z-index: 1; margin-top: 5px; }
.timeline-content { flex: 1; min-width: 0; }
.timeline-title { font-size: 12px; font-weight: 400; color: #333333; }
.timeline-meta { margin-top: 2px; }

/* Icon variant (used by towingServices "Información del Servicio" fixed-milestone timeline): bigger
   icon-filled dots with per-step state color, label/value row, map link, extra-details box. */
.timeline.timeline--icons .timeline-item { gap: 16px; padding: 10px 4px; }
.timeline.timeline--icons .timeline-item:not(:first-child):not(:last-child)::before { left: 15px; width: 2px; }
.timeline.timeline--icons .timeline-item:first-child::before { left: 15px; top: 26px; width: 2px; }
.timeline.timeline--icons .timeline-item:last-child::before { left: 15px; height: 26px; width: 2px; }
.timeline.timeline--icons .timeline-dot { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-top: 0; background: transparent; }
.timeline.timeline--icons .timeline-dot.is-done, .timeline.timeline--icons .timeline-dot.is-current { background: var(--step-color, var(--color-accent, #337AB7)); color: #fff; }
.timeline.timeline--icons .timeline-dot.is-current { box-shadow: 0 0 0 3px rgba(7, 32, 49, .12); }
.timeline.timeline--icons .timeline-dot.is-pending { background: #fff; border: 2px solid var(--table-border, #E5E7EB); color: var(--color-secondary, #6B7280); }
.timeline-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.timeline-label { font-size: 11px; color: var(--color-secondary, #6B7280); }
.timeline-label.is-pending { color: var(--color-secondary, #6B7280); opacity: .7; }
.timeline-value { font-size: 12px; font-weight: 600; color: var(--color-primary, #072031); }
.timeline-value.is-pending { color: var(--color-secondary, #6B7280); opacity: .7; font-weight: 400; }
.timeline-map { font-size: 12px; color: var(--color-accent, #337AB7); white-space: nowrap; text-decoration: none; }
.timeline-details { margin-top: 6px; }
.timeline-details-label { font-size: 11px; color: var(--color-secondary, #6B7280); margin-bottom: 4px; }
.timeline-details-box { padding: 2px 0; }
.timeline-detail-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 11px; border-bottom: 1px solid var(--table-border, #E5E7EB); }
.timeline-detail-row:last-child { border-bottom: none; }
.timeline-detail-label { color: var(--color-secondary, #6B7280); }
.timeline-detail-row strong { color: var(--color-primary, #072031); font-weight: 600; text-align: right; }
.timeline-details-empty { font-size: 13px; color: var(--color-secondary, #6B7280); }

.image-card-thumb-wrap { position: relative; margin-bottom: 4px; }
.image-card-thumb { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; cursor: pointer; background: #F3F4F6; border-radius: 6px; }
.image-card-badge { position: absolute; top: 4px; left: 4px; }
.image-card-gps { position: absolute; top: 4px; right: 4px; }
.image-card-actions-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 3px; padding: 4px 3px; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .15s; }
.image-card-thumb-wrap:hover .image-card-actions-bar { opacity: 1; pointer-events: auto; }
.image-card-icon-btn { width: 21px; height: 21px; border-radius: 50%; background: #fff; border: none; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.image-card-icon-btn:hover { background: #F3F4F6; }
.image-card-icon-btn i { font-size: 10px; color: var(--color-primary, #072031); }
.image-card-icon-btn-danger i { color: #C0392B; }
.image-card-actions-bar .image-card-toggle-btn { position: relative; display: inline-flex; width: 21px; height: 21px; margin: 0 !important; flex-shrink: 0; cursor: pointer; }
.image-card-toggle-input { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; z-index: 1; cursor: pointer; }
.image-card-toggle-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; font-size: 10px; color: var(--color-primary, #072031); }
.image-card-toggle-input:checked + .image-card-toggle-icon { background: var(--color-accent, #337AB7); color: #fff; }
.image-card-name { font-size: 12px; font-weight: 600; color: var(--color-primary, #072031); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.image-card-date { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@layer base {
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}

.viewer-canvas img[loading=lazy]:not(.viewer-transition) {
    height: 75vh !important;
    margin-left: auto !important;
    margin-top: 10vh !important;
    width: auto !important;
}

#tows-table .tow-line, #services-table .service-line { cursor: pointer; }
#drivers-on-duty-table .driver-line { text-align: left;}
#drivers-on-duty-table .new-driver{ color: red;}
#drivers-on-vacation-table .vacation-driver-line { text-align: left;}
#off-shift-table .off-shift-driver-line { text-align: left;}
#off-shift-table .new-driver { color: red;}
#driver-tariffs-table input[type="time"]::-webkit-calendar-picker-indicator { background: none; }

.dropServiceDescriptionTd { padding-left: 0 !important; }

.tow-custom-context-menu,
.service-documents-context-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    background: #FFF;
    color: #333;
    border-radius: 3px;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 12px;
    list-style-type: none;
    padding: 0;
}

.tow-custom-context-menu li,
.service-documents-context-menu li { padding: 8px 12px; cursor: pointer; }
.tow-custom-context-menu li:hover,
.service-documents-context-menu li:hover { background-color: #f5f5f5; }
.w-100 { width: 100% !important; }
.service-list-insurance-logo {
    max-width: 100px;
    mix-blend-mode: multiply;
    object-fit: contain;
}
.bg-info { background-color: #d9edf7 !important; }
.auto-select-tow { cursor: pointer; }
.tow-card-panel { background-color: white; border-radius: 10px; border: 1px solid #dee2e6; overflow: hidden; margin-bottom: 10px;}
.tow-card-header { padding: 15px; background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; font-weight: bold; font-size: 1em; cursor: pointer; }
.tow-accordion-body { padding: 5px; }
.table-no-spacing tbody tr td { border: none; }
.maintenance-text-yellow { color: #ffc107; }

@media screen and (max-width: 1590px) {
    .nav > li > a { 
        padding: 15px 5px;
    }

    .navbar-brand {
        margin: 0;
    }

    .navbar-right .btn-menuTop {
        padding: 12px 12px;
    }

    .menu-hidden {
        display: none;
    }
}

.btn-menuTop .badge {
    position: absolute;
    font-size: 10px;
    font-weight: normal;
    left: 20px;
    top: 10px;
    line-height: 13px;
    background-color: #D9534F;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    padding: 2px 5px;
}

.bootstrap-select.provider-service-state-select .dropdown-toggle { display: none !important; }
.bootstrap-select.provider-service-state-select .dropdown-menu { position: inherit !important; top: 0% !important; list-style: armenian; width: 100%; }
.fixed-chat-div { display: block; position: fixed; bottom: 90px; right: 50px; text-align: right; } 

.chat-thread-message-custom-context-menu { font-size: 13px; z-index: 10;}
.chat-thread-message-custom-context-menu li a[data-action="delete-message"] { color: #e74c3c; }
.chat-thread-message-custom-context-menu li a[data-action="delete-message"]:hover { background-color: #f8d7da; color: #c0392b; cursor: pointer; }

#sidebar-wrapper { margin-right: -450px; right: 0; width: 450px; top: 0; background: #072031; position: fixed; height: 100%; overflow-y: auto; z-index: 1000; transition: all 0.5s ease-in 0s; -webkit-transition: all 0.5s ease-in 0s; -moz-transition: all 0.5s ease-in 0s; -ms-transition: all 0.5s ease-in 0s; -o-transition: all 0.5s ease-in 0s; }
#sidebar-wrapper.active { right: 450px; width: 450px; transition: all 0.5s ease-out 0s; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; }
#sidebar-wrapper .head-chat-panel { margin-bottom: 30px; }
#sidebar-wrapper .head-chat-panel h5 { padding: 10px 20px; color: #FFFFFF; }
#sidebar-wrapper .nav > li > a { padding: 10px; }
#sidebar-wrapper .tab-content { padding: 15px; height: calc(100% - 115px); overflow-x: scroll; padding-bottom: 50px; }
#sidebar-wrapper .tab-content.has-reply { padding-bottom: 150px !important; }
#sidebar-wrapper .panel-footer { position: absolute; bottom: 0px; }
.offcanvas-bg { position: fixed; top: 0; height: 100%; width: 100%; z-index: 5; left: -100%; background-color: transparent; transition: background-color .4s cubic-bezier(.23,1,.32,1) 0s; }
.offcanvas-bg.is-open { left: 0; background-color: rgba(7,32,49, .60); visibility: visible; }
.chatuserlist { list-style: none; padding: 0; }
.chatuserlist li { border-top: 1px solid rgba(7,32,49,0.05); }
.chatuserlist .media-thumb { -webkit-border-radius: 50px; border-radius: 50px; border: 2px solid #999; padding: 3px; display: block; height: 40px; width: 40px; align-content: center; }
.chatuserlist .media-thumb img { max-width: 30px; max-height: 30px; border-radius: 20px; overflow: hidden; }
.chatuserlist .media { margin: 10px 0; padding: 0; }
.chatuserlist .online .media-thumb { border-color: #1CAF9A; }
.chatuserlist .media-body { line-height: normal; padding-top: 7px; }
.chatuserlist .media-body small { color: #666; display: block; white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;  display: block; }
.chatuserlist .media-body strong { color: #072031; font-size: 13px; margin-bottom: 4px; display: block; }
.chatuserlist .badge { margin-top: 5px; background-color: #d9534f; border-radius: 2px; font-size: 10px; font-weight: normal; line-height: 13px; padding: 2px 5px; }
.rightpanel .pane-settings { font-size: 13px; }
.sidebartitle { position: sticky; top: -15px; background-color: #fff; border-bottom: 1px solid #ddd; padding: 20px; z-index: 10; margin: -15px -15px 15px -15px; }
.chat-container .comment-list { background-color: #eee; border-radius: 4px;padding: 5px 10px;margin-bottom: 10px;}
.chat-container .comment-list.logged-user { background-color: #d1e3ed; }
.chat-container .comment-list .media-body { overflow: visible; } 
.chat-container .comment-list .btn-options { padding: 0px; }
.bs-callout { padding: 10px; margin: 20px 0; border: 1px solid #FFF; background-color: #FFF; border-left-width: 4px; border-radius: 3px; cursor: pointer; }
.bs-callout-danger { border-left-color: #ce4844; }
.show-chat-thread.active { background-color: #e0e0e0 !important; }
#sidebar-wrapper .label-client { color: #FFF; background-color: #092E48; }
#assign-tows-table .tow { cursor: pointer; }
.checkbox>label { margin-bottom: 0 !important; }
.checkbox>label>input[type=checkbox] { margin-top: 2px; }
.favorite-route-list { width: 280px; }

.favorite-route-context-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    background: #FFF;
    color: #333;
    border-radius: 3px;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 12px;
    list-style-type: none;
    padding: 0;
}

.favorite-route-context-menu li { padding: 8px 12px; cursor: pointer; }
.favorite-route-context-menu li:hover { background-color: #f5f5f5; }
.autocomplete-list { width: 100%; max-height: 200px; overflow-y: auto; z-index: 1000; }

.document-preview-iframe { width: 100%; height: 75vh; border: 0; }
.document-preview-csv-table { max-height: 75vh; overflow: auto; }
.image-download-format-menu {
    display: none;
    z-index: 2100;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    background: #FFF;
    color: #333;
    border-radius: 3px;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 12px;
    list-style-type: none;
    padding: 0;
}

.image-download-format-menu li { padding: 8px 12px; cursor: pointer; }
.image-download-format-menu li:hover { background-color: #f5f5f5; }

#panel-group-warnings .panel-heading { display: flex; align-items: center; }
#panel-group-warnings .panel-heading>span { flex: 1; }
#panel-group-warnings .panel-heading>div>.label { margin-right: 10px; }
#panel-group-warnings .panel-body textarea, #panel-group-warnings .panel-footer textarea { resize: none; }

.locale-es tr.highlight { border: 3px solid #337ab7 !important; }
.px-2 { padding-right: 2px; padding-left: 2px; }
.mb-03 { margin-bottom: 3px; }
.mb-3 { margin-bottom: 15px; }
.mb-4 { margin-bottom: 20px; }
.noborder { border: none !important; }
.panel-footer div.btn-group.bootstrap-select.form-control { background: #f5f5f5; }

div.full-width>div.dropdown-menu { width: 100%; }
.m-0 { margin: 0px; }
.p-0 { padding: 0px; }
.p-1 { padding: 5px; }
.p-2 { padding: 10px; }
.mb-0 { margin-bottom: 0px; }
.mt-1 { margin-top: 5px; }
.mb-05 { margin-bottom: 2px; }
.mb-1 { margin-bottom: 5px; }
.my-1 { margin-top: 5px; margin-bottom: 5px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 15px; }
.mb-2 { margin-bottom: 10px; }
.my-2 { margin-top: 10px; margin-bottom: 10px; }
.ml-1 { margin-left: 5px; }
.ml-2 { margin-left: 8px; }
.mr-1 { margin-right: 5px; }
.py-1 { padding-top: 5px; padding-bottom: 5px; }
.px-1 { padding-left: 5px !important; padding-right: 5px !important; }
.px-10 { padding-left: 10px !important; padding-right: 10px !important; }
.pl-1 { padding-left: 5px !important; }
.pl-2 { padding-left: 10px !important; }
.pr-05 { padding-right: 2px !important; }
.pr-1 { padding-right: 5px !important; }
.pr-2 { padding-right: 10px !important; }
.border-0 { margin-bottom: 2px; }

table.regions-table-tows>thead>tr>th {
    padding: 10px 0px;
    font-weight: 400;
}   

.tow-region-toggle-collapse {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #4A5565;
    background: transparent;
    border-bottom: 1px solid #E6EDF2;
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.open-driver-chat {
    cursor: pointer;
}

.table-two-lines .pending-services-table thead th, .table-two-lines .ongoing-services-table thead th, table.table-two-lines thead th {
    background-color: #f8f8f8;
    font-weight: 500;
    color: #717171;
    text-transform: uppercase;
    padding: 8px !important;
}

.table-no-wrap {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

.table-two-lines .pending-services-table span.primary, .table-two-lines .ongoing-services-table span.primary, table.table-two-lines span.primary {
    color: #3b3b3b;
    font-weight: 800;
    font-size: 12px;
}

.table-two-lines .pending-services-table span.secondary, .table-two-lines .ongoing-services-table span.secondary, table.table-two-lines span.secondary {
    color: #717171;
    font-weight: 400;
    font-size: 10px;
}

.table-two-lines .pending-services-table a.secondary, .table-two-lines .ongoing-services-table a.secondary, table.table-two-lines a.secondary {
    font-weight: 400;
    font-size: 10px;
}

.table-two-lines .table > thead > tr > th, .table-two-lines .table > tbody > tr > th, .table-two-lines .table > tfoot > tr > th, .table-two-lines .table > thead > tr > td, .table-two-lines .table > tbody > tr > td, .table-two-lines .table > tfoot > tr > td {
    padding: 4px 8px;
}

table.daily-service-planning-table input.input-sm {
    padding: 0px 5px;
}

table.daily-service-planning-table .form-control[disabled], table.daily-service-planning-table .btn-default.disabled {
    background-color: #f8f8f8;
}

table.daily-service-planning-table .btn-default.disabled {
    opacity: 1;
}

table.daily-service-planning-table .btn-default.disabled.valid {
    border-left-color: forestgreen;
}

@keyframes flash-green {
  0% { background-color: transparent; }
  50% { background-color: #c5e3c2; }
  100% { background-color: transparent; }
}

tr.flash-saved td {
  animation: flash-green 0.6s ease-in-out;
}

.table-no-wrap-2 {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 350px;
}

.tow-region-title {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #4A5565;
    background: transparent;
    border-top: none;
    border-bottom: 1px solid #E6EDF2;
    margin: 0;
}

.tow-movement-state-image {
    width: 26px;
    height: 26px;
    display: block;
    filter: brightness(0);
    opacity: 1;
}

.tow-line .tow-image-td {
    width: 55px;
}

.tow-line-information-row {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    gap: 2px;
    flex: 1;
    overflow: visible;
    min-width: 0;
}

.tow-line-information-row .tow-line-upper-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0;
    gap: 8px;
}

.tow-line-information-row .tow-line-bottom-row {
    font-size: 12px;
    line-height: 17px;
    margin-top: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.tow-line .btn-circle {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.tow-logo {
    width: 42px;
    height: 28px;
    object-fit: contain;
    display: block;
    max-width: 100%;
}

.map-popup {
    position: fixed;
    width: 300px;
    z-index: 1000;
    display: block;
}

.map-popup .panel {
    width: 100%;
    margin-bottom: 0;
}

.map-popup .panel.panel-default {
    margin: 0; 
    border-radius: 4px; 
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
}

.map-popup .panel .panel-heading {
    padding: 0;
    border: none;
    background: transparent;
}

.map-popup .panel .panel-body {
    padding: 12px;
}

.map-popup .map-popup-close {
    color: #072031 !important;
    font-size: 15px;
    line-height: 1;
    padding: 0 !important;
    height: 19px;
    width: 15px;
}

.map-popup-header {
    padding: 12px 12px 8px 12px;
    min-height: 19px;
}

.map-popup .map-popup-header .map-popup-title {
    font-weight: 600;
    font-size: 15px;
    line-height: 19px;
    color: #072031;
}

.map-popup .map-popup-header .map-popup-subtitle {
    font-weight: 400;
    line-height: 19px;
    color: #072031;
}

.map-popup-body-info-row {
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
    color: #072031;
}

.map-popup-body-info-row-divider {
    margin: 6px 0; 
    border-color: rgba(7,32,49,0.1);
}

.map-popup-row {
    display: flex; 
    align-items: center;
}

.map-popup-metric-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 6px;
    height: 28px;
    background: rgba(7, 32, 49, 0.05);
    border-radius: 4px;
}

.btn-gestow-primary  {
    background: #072031 !important;
    border-color: #072031 !important;
    color: #FFFFFF !important;
}

/* ============================================================
   MAP POPUP — SERVICE CARDS
   Classes extracted from style-es.css and renamed to English
   following the map-popup-* convention
   ============================================================ */

/* Service block */
.map-popup-service-block {
    box-sizing: border-box;
    margin-top: 12px;
    padding: 12px;
    background: rgba(7, 32, 49, 0.05);
    border-top: 1px solid rgba(7, 32, 49, 0.1);
    border-bottom: 1px solid rgba(7, 32, 49, 0.1);
  }
  
  .map-popup-service-block-clickable {
    cursor: pointer;
    transition: background 0.15s ease;
  }
  
  .map-popup-service-block-clickable:hover {
    background: rgba(7, 32, 49, 0.1);
  }
  
  /* Service header */
  .map-popup-service-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .map-popup-service-ident {
    display: flex;
    align-items: baseline;
    gap: 3px;
  }
  
  .map-popup-service-prefix {
    font-weight: 600;
    font-size: 15px;
    line-height: 18px;
    color: #072031;
  }
  
  .map-popup-separator {
    font-family: 'Open Sans', Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    color: #072031;
  }
  
  .map-popup-service-code {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #072031;
  }
  
  .map-popup-service-sep {
    border: 0;
    border-top: 1px solid rgba(7, 32, 49, 0.1);
    margin: 12px 0;
  }
  
  /* Service card (vehicle + incident) */
  .map-popup-service-card {
    box-sizing: border-box;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: #FFFFFF;
    border: 1px solid rgba(7, 32, 49, 0.1);
    border-radius: 4px;
  }
  
  .map-popup-service-card-item {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
  }
  
  .map-popup-service-icon-circle {
    width: 30px;
    height: 30px;
    border-radius: 100px;
    background: rgba(7, 32, 49, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #072031;
  }
  
  .map-popup-service-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  
  .map-popup-service-card-sub {
    font-size: 10.2px;
    line-height: 15px;
    font-weight: 400;
    color: #4A5565;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .map-popup-service-card-main {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    color: #072031;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Tooltip */
  .map-popup-service-card-item:last-child,
  .map-popup-service-stop {
    position: relative;
  }
  
  .map-popup-service-card-item:last-child:hover .map-popup-service-tooltip,
  .map-popup-service-stop:hover .map-popup-service-tooltip {
    display: block;
  }
  
  .map-popup-service-tooltip {
    display: none;
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: #072031;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    min-width: 120px;
    max-width: 220px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 1100;
  }
  
  .map-popup-service-tooltip::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 100%;
    border: 6px solid transparent;
    border-top-color: #072031;
  }
  
  /* Route — pickup / dropoff */
  .map-popup-service-route {
    margin: 6px 0;
    display: flex;
    flex-direction: column;
  }
  
  .map-popup-service-stop {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .map-popup-service-pin {
    width: 32px;
    height: 32px;
    border-radius: 100px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .map-popup-service-pin-pickup {
    border: 1px solid #059669;
    color: #059669;
  }
  
  .map-popup-service-pin-dropoff {
    border: 1px solid #DC2626;
    color: #DC2626;
  }
  
  .map-popup-service-line {
    width: 32px;
    height: 25px;
    position: relative;
  }
  
  .map-popup-service-line:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    border-left: 2px dashed rgba(7, 32, 49, 0.35);
    transform: translateX(-50%);
  }
  
  .map-popup-service-stop-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .map-popup-service-stop-title {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
  }
  
  .map-popup-service-pickup .map-popup-service-stop-title {
    color: #059669;
  }
  
  .map-popup-service-dropoff .map-popup-service-stop-title {
    color: #DC2626;
  }
  
  .map-popup-service-stop-address {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    color: #072031;
  }
  
  a.map-popup-service-link {
    text-decoration: underline;
    cursor: pointer;
    display: block;
  }
  
  a.map-popup-service-link:hover,
  a.map-popup-service-link:focus {
    color: #104E7B;
    text-decoration: underline;
  }
  
  .map-popup-service-stop-city {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #4A5565;
  }

    .map-popup-services-scroll-wrap {
    position: relative;
    margin-top: 12px;
    overflow: hidden;
  }
  
  /* Horizontal track */
  .map-popup-services-scroll-track {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;   
    -ms-overflow-style: none;
    gap: 0;
  }
  
  .map-popup-services-scroll-track::-webkit-scrollbar {
    display: none;
  }
  
  .map-popup-services-scroll-track .map-popup-service-block {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    box-sizing: border-box;
    margin-top: 0;
  }
  
  .map-popup-services-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px 0 2px;
  }
  
  .map-popup-services-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(7, 32, 49, 0.2);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    display: inline-block;
  }
  
.map-popup-services-dot.active {
    background: #072031;
    transform: scale(1);
}

.regions-table-section { 
    margin: 0 -12px -12px -12px; 
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    max-height: calc(100% - 180px);
}

.panel-tows {
    height: 100%;
    box-shadow: none;
    overflow: hidden;
    padding: 12px;
}

select#towing-service-standardized-message {
    height: 30px;
}

.floating-chat-towing-service-standardized-message > button > span {
    text-overflow: ellipsis;
    max-width: 335px;
}

.floating-chat-towing-service-standardized-message > div.dropdown-menu.open {
    max-width: 386px;
}


/*
 * V1 and V2 
 */

.panel-index-v2 .panel-body .table, .panel-index-v2 .panel-title, .modal-index-v2 .modal-body .table, .modal-index-v2 .modal-body .basic-wizard .nav-justified, .modal-index-v2 .modal-body > .form-group {
    margin: 0px;
}

.panel-index-v2 .panel-btns, .panel-index-v2 .panel-body, .modal-index-v2 .modal-body, .modal-index-v2 .modal-body .tab-content {
    padding: 0px;
}

.panel-index-v2 .panel {
    border-radius: 6px;
}

.panel-index-v2 .panel-heading {
    padding: 10px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.panel-index-v2 .panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: normal;
}

.panel-index-v2 .panel-body:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.panel-index-v2 .panel-body .table thead tr th, .modal-index-v2 .modal-body .table thead tr th, .map-panel-index-v2 .table thead tr th {
    padding: 10px;
    border-top: 1px solid #e8eaed;
    border-bottom: 1px solid #e8eaed;
}

.panel-index-v2 .panel-body .table-responsive > .alert, .panel-index-v2 > .panel > div > .alert, .modal-index-v2 .modal-body > .alert, .modal-index-v2 .modal-body #loadBoxSheetTable > .form-inline, .map-panel-index-v2 .table-responsive > .alert {
    margin: 10px;
}

.panel-index-v2 .panel-body .table thead tr th a, .modal-index-v2 .modal-body .table thead tr th a, .map-panel-index-v2 .table thead tr th a {
    margin-left: 5px;
}

.panel-index-v2 .panel-body .table thead tr th:first-child, .panel-index-v2 .panel-body .table tbody tr td:first-child, .modal-index-v2 .modal-body .table thead tr th:first-child, .modal-index-v2 .modal-body .table tbody tr td:first-child, .map-panel-index-v2 .table thead tr th:first-child, .map-panel-index-v2 .table tbody tr td:first-child {
    padding-left: 12px;
}

.panel-index-v2 .panel-body .table thead tr th:last-child, .panel-index-v2 .panel-body .table tbody tr td:last-child, .modal-index-v2 .modal-body .table thead tr th:last-child, .modal-index-v2 .modal-body .table tbody tr td:last-child, .map-panel-index-v2 .table thead tr th:last-child, .map-panel-index-v2 .table tbody tr td:last-child {
    padding-right: 12px;
}

.panel-index-v2 .panel-body .table tbody tr:first-child td, .modal-index-v2 .modal-body .table tbody tr:first-child td, .map-panel-index-v2 .table tbody tr:first-child td {
    border-top: 2px solid #e8eaed;
}

.panel-index-v2 .panel-body .table tbody tr:last-child td, .modal-index-v2 .modal-body .table tbody tr:last-child td, .map-panel-index-v2 .table tbody tr:last-child td {
    border-bottom: 1px solid #e8eaed;
}

.panel-index-v2 .panel-body .table tbody tr td, .modal-index-v2 .modal-body .table tbody tr td, .map-panel-index-v2 .table tbody tr td {
    padding: 5px 10px;
}

.panel-index-v2 .table-striped tbody tr:nth-child(odd) td, .panel-index-v2 .table-striped tbody tr:nth-child(odd) th, .modal-index-v2 .modal-body .table-striped tbody tr:nth-child(odd) td, .modal-index-v2 .modal-body .table-striped tbody tr:nth-child(odd) th {
    background-color: #f9fafb;
}

/* The striped rule above outweighs Bootstrap's contextual classes, so restore their colors on odd rows too, whether set on the row or on the cell */
.panel-index-v2 .table tbody tr.success td, .panel-index-v2 .table tbody tr.success th, .panel-index-v2 .table tbody tr td.success, .panel-index-v2 .table tbody tr th.success,
.modal-index-v2 .modal-body .table tbody tr.success td, .modal-index-v2 .modal-body .table tbody tr.success th, .modal-index-v2 .modal-body .table tbody tr td.success, .modal-index-v2 .modal-body .table tbody tr th.success {
    background-color: #dff0d8;
}

.panel-index-v2 .table tbody tr.info td, .panel-index-v2 .table tbody tr.info th, .panel-index-v2 .table tbody tr td.info, .panel-index-v2 .table tbody tr th.info,
.modal-index-v2 .modal-body .table tbody tr.info td, .modal-index-v2 .modal-body .table tbody tr.info th, .modal-index-v2 .modal-body .table tbody tr td.info, .modal-index-v2 .modal-body .table tbody tr th.info {
    background-color: #d9edf7;
}

.panel-index-v2 .table tbody tr.warning td, .panel-index-v2 .table tbody tr.warning th, .panel-index-v2 .table tbody tr td.warning, .panel-index-v2 .table tbody tr th.warning,
.modal-index-v2 .modal-body .table tbody tr.warning td, .modal-index-v2 .modal-body .table tbody tr.warning th, .modal-index-v2 .modal-body .table tbody tr td.warning, .modal-index-v2 .modal-body .table tbody tr th.warning {
    background-color: #fcf8e3;
}

.panel-index-v2 .table tbody tr.danger td, .panel-index-v2 .table tbody tr.danger th, .panel-index-v2 .table tbody tr td.danger, .panel-index-v2 .table tbody tr th.danger,
.modal-index-v2 .modal-body .table tbody tr.danger td, .modal-index-v2 .modal-body .table tbody tr.danger th, .modal-index-v2 .modal-body .table tbody tr td.danger, .modal-index-v2 .modal-body .table tbody tr th.danger {
    background-color: #f2dede;
}

.panel-index-v2 .panel-body .table tbody tr td, .modal-index-v2 .modal-body .table tbody tr td, .map-panel-index-v2 .table tbody tr td {
    border-color: #e8eaed;
}

.panel-index-v2 .panel-body .table tbody tr td p, .modal-index-v2 .modal-body .table tbody tr td p, .map-panel-index-v2 .table tbody tr td p {
    margin: 0px;
}

.panel-index-v2 .panel-body div .form-inline {
    padding-top: 10px;
    padding-bottom: 10px;
}

.panel-index-v2 .panel-body div .form-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-index-v2 .panel-body div .form-inline .form-group  {
    margin-bottom: 0px;
}

.panel-index-v2 .panel-body div .form-inline div + span  {
    margin-left: 5px;
}

.panel-index-v2 .panel-body div .form-inline > span  {
    vertical-align: middle;
}

.panel-index-v2 .panel-body div .form-inline > nav  {
    margin-left: auto;
}

.panel-index-v1 .panel.table-two-lines .panel-body, .panel-index-v1 .table.table-two-lines  {
    margin-bottom: 10px;
}

.map-panel-index-v2 > .row > .col-md-12, .map-panel-index-v2.row > .col-md-12 {
    padding: 0;
}

#tow-route-map-controls {
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    width: 600px;
    margin-bottom: 10px;
}

#tow-route-map-controls > div {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

#tow-route-map-controls input[type="range"] {
    flex: 1;
    min-width: 150px;
}

#tow-route-map-controls span {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.table-responsive.table-fix-thead {
    max-height: 590px;
    overflow-y: auto;
}

.table-responsive.table-fix-thead-sm {
    max-height: 340px;
}

@media screen and (max-height: 890px) {
    .table-responsive.table-fix-thead {
        max-height: 490px;
    }
}

@media screen and (max-height: 550px) {
    .table-responsive.table-fix-thead {
        max-height: 340px;
    }
}

.table-responsive.table-fix-thead table thead th, .table-responsive.table-fix-thead-sm table thead th {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #fcfcfc;
    box-shadow: 0 2px 2px -1px rgba(0,0,0,0.15);
}

.table-responsive.table-fix-thead table, .table-responsive.table-fix-thead-sm table {
    margin-bottom: 0;
}

.selectpicker-unset-height .bootstrap-select {
    height: unset;
}

/* V2 operational and administrative services tables: resizable columns (see initColumnResize in v2-column-resize.js) */
.column-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 6px;
    height: 100%;
    cursor: col-resize;
}

.column-resize-handle:hover {
    background-color: rgba(51, 122, 183, 0.35);
}

body.column-resizing,
body.column-resizing * {
    cursor: col-resize !important;
    user-select: none;
}

/* Once resized, every column has an explicit px width and the table is exactly as wide as their sum */
table.table-services.table-fixed-columns {
    table-layout: fixed;
    width: 1px;
    max-width: none;
}

table.table-services.table-fixed-columns thead th {
    overflow: hidden;
    text-overflow: ellipsis;
}

#operational-services-scroll .table-services tbody td {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Width-capped cells wrap their main text over up to 3 lines instead of cutting it after one; the rest is
   ellipsed and shown in full on hover (see showTruncatedTextTitle). Secondary lines and phone links stay on one line. */
#operational-services-scroll .table-services td.col-compact .td-truncate:not(.td-secondary):not(.td-link),
#operational-services-scroll .table-services td.col-address .td-truncate:not(.td-secondary):not(.td-link),
table.table-services.table-fixed-columns td .td-truncate:not(.td-secondary):not(.td-link) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The sticky state + actions columns (325px, see new-layout-style.css) would cover almost the whole table when it's
   narrow (tablet, or a laptop with a wide tows panel), leaving no data column visible. Below 650px of table width they
   scroll along with the rest instead; the header stays sticky vertically (top: 0). A container query tracks the
   table's own width, so it also reacts to resizing the tows panel, not just the window. */
#operational-services-scroll {
    container-type: inline-size;
}

@container (max-width: 650px) {
    #operational-services-scroll .table-services thead th.col-state,
    #operational-services-scroll .table-services thead th.col-actions {
        right: auto;
        box-shadow: none;
    }

    #operational-services-scroll .table-services tbody td.td-state-fixed,
    #operational-services-scroll .table-services tbody td.td-actions-fixed {
        position: static;
        box-shadow: none;
    }
}