@font-face {
  font-family: "Inter Semi Bold";
  src: url("../fonts/Inter-SemiBold.ttf");
}

/* Definimos un color de fondo para distinguir entre las filas pares e impares de una tabla. Las tablas que tengan en la
   etiqueta tbody la clase 'no-background' no se les aplicara este color de fondo a las filas 
*/
tbody:not(.no-background) tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, .03);
}


.clear-both {
  clear: both;
}

.loader-topcar {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #60a806;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin-left: 40px;
  margin-top: 5px;

}

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

  100% {
    -webkit-transform: rotate(360deg);
  }
}

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

  100% {
    transform: rotate(360deg);
  }
}

.multiselect.is-invalid .multiselect__tags {
  border-color: #dc3545;
}


.spinner {
  border: 1px solid;
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url("../img/loader-topcar.gif");
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Background Color */
.bg-blue {
  background-color: rgb(130, 199, 240) !important;
}

.bg-brown {
  background-color: rgb(241, 183, 95) !important;
}

.bg-gray {
  background-color: rgb(184, 179, 179) !important;
}

.bg-soft-gray {
  background-color: rgb(244, 244, 244) !important;
}



/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modalNO {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, .8) url(../img/loader-topcar.gif) 50% 50% no-repeat;
}

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

  100% {
    transform: rotate(360deg);
  }
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
  overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modalNO {
  display: block;
}


/* Estilo utilizado para que no se muestre las etiquetas de VUE durante la precarga de las vistas */
[v-cloak] {
  display: none;
}

.clickable {
  cursor: pointer;
}


.table>tbody>tr>.no-line {
  border-top: none;
}

.table>thead>tr>.no-line {
  border-bottom: none;
}

.table>tbody>tr>.thick-line {
  border-top: 2px solid;
}

.booking-comment {
  width: 100%;
  height: 150px;
  resize: none;
}

/* Listado de reservas y contratos */
.list-booking-contract {
  height: 115px;
  margin-bottom: -1px;
}

.list-booking-contract .box-icon {
  text-align: center;
  border-top-left-radius: 4px;
  padding: 2px 0;
  height: 115px;
  margin-bottom: -1px;
}

.list-booking-contract .box-icon i {
  font-size: 37px;
  margin: 6px 0 3px 0;
  display: block;
}

.list-booking-contract .box-icon .text-status {
  font-size: 15px;
  margin-bottom: 2px;
  display: block;
}

.list-booking-contract .box-icon .number {
  font-size: 15px;
  display: block;
}

.list-booking-contract .title {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.8;
}

.list-booking-contract hr.separator {
  margin: 2px 0 5px 0;
  opacity: 0.8;
  border-top: 1px solid #eee;
}

.list-booking-contract .text-cell {
  font-size: 15px;
  display: block;
}

.list-booking-contract .text-cell.capitalize {
  text-transform: capitalize;
}

.list-booking-contract .text-cell.small {
  font-size: 13px;
}

.list-booking-contract .box-icon.bg-color-blue {
  background-color: #00808c;
}

.list-booking-contract .box-icon.bg-color-green {
  background-color: #2d8c58;
}

.list-booking-contract .box-icon.bg-color-red {
  background-color: #9c2730;
}

.list-booking-contract .box-icon.bg-color-orange {
  background-color: #bd5537;
}

.list-booking-contract .box-icon.bg-color-brown {
  background-color: #573c31;
}


.alert-message {
  margin: 20px 0;
  padding: 20px;
  border-left: 3px solid #eee;
}

.alert-message h4 {
  margin-top: 0;
  margin-bottom: 5px;
}

.alert-message p:last-child {
  margin-bottom: 0;
}

.alert-message code {
  background-color: #fff;
  border-radius: 3px;
}

.alert-message-success {
  background-color: #F4FDF0;
  border-color: #3C763D;
}

.alert-message-success h4 {
  color: #3C763D;
}

.alert-message-danger {
  background-color: #fdf7f7;
  border-color: #EF6F6C;
}

.alert-message-danger h4 {
  color: #EF6F6C;
}

.alert-message-warning {
  background-color: #fcf8f2;
  border-color: #F89A14;
}

.alert-message-warning h4 {
  color: #F89A14;
}

.alert-message-info {
  background-color: #f4f8fa;
  border-color: #5bc0de;
}

.alert-message-info h4 {
  color: #5bc0de;
}

.alert-message-default {
  background-color: #EEE;
  border-color: #B4B4B4;
}

.alert-message-default h4 {
  color: #000;
}

.alert-message-notice {
  background-color: #FCFCDD;
  border-color: #BDBD89;
}

.alert-message-notice h4 {
  color: #444;
}

.tableFixHead {
  overflow-y: auto;
}

.tableFixHead table thead tr th {
  position: sticky;
  top: 0;
  background: #eee;
}

.tableFixHead table {
  border-collapse: collapse;
  width: 100%;
}

.tableFixHead table thead tr th,
.tableFixHead table thead tr td {
  padding: 8px 16px;
}

.action-column-invisible {
  display: none;
}

/* Tamaño de letra usada en la impresion de contrato */
.font-size-text-print-contract {
  font-size: 24px;
}

.empty-line {
  margin-top: 4px;
}

.mb-80 {
  margin-bottom: 80px;
}

.panel-border-less {
  border-width: 0;
  box-shadow: none;
}


/* Establecemos el ancho maximo de los popover que aparecen en la columna de cambio de vehiculo de la tabla de log de contratos 
   Por defecto solo permiten un ancho maximo de 276px */
.wide-popover-change-vehicle {
  max-width: 600px;
}

.background-topcar {
  background: #94BB1D !important;
}

.color-topcar {
  color: #94C530;
}

.color-white {
  color: white !important;
}

.font-weight-600 {
  font-weight: 600 !important;
}

.card-outline-topcar {
  border-top: 3px solid #94BB1D;
}

.icon-right {
  float: right;
  margin-top: 2px;
  margin-right: -6px;
}

/* Styles for custom popover template */
.popover-footer {
  padding: 6px 14px;
  background-color: #f7f7f7;
  border-top: 1px solid #ebebeb;
  text-align: right;
}

.vehicle-status-badge {
  padding: 7px;
  border-radius: 5px;
  color: white;
}

.strikethrough {
  text-decoration: line-through;
}

.tab-new-contract .vbt-autcomplete-list {
  width: 400px !important;
}

.search-form-card .callout {
  border: 1px solid #ffc107;
  border-left: 5px solid #ffc107;
  box-shadow: none;
}

.search-form-card ul {
  z-index: 1;
}

.search-form-card .nav-tabs .nav-link {
  color: #000
}

.search-form-card .nav-tabs .nav-link.active {
  border-color: #17a2b8 #17a2b8 #fff;
  font-weight: bold;
}

.search-form-card .tab-new-contract {
  border: 1px solid #17a2b8;
  border-radius: 0 4px 4px 4px;
}

.search-form-card .form-group {
  margin-left: 0;
  margin-right: 0;
}

.search-form-card .form-group:last-of-type {
  margin: 0;
}

.body-customer-from-booking .d-flex {
  min-height: 24px;
}

/* Salesforce */
#office-selector {
  position: relative;
}

.office-list {
  padding: 20px 30px 15px;
  display: flex;
  gap: 30px;
  border-bottom: 2px solid #cdcdcd;
}

.office-list .office-span {
  font-family: 'Inter Semi Bold';
  font-size: 14px;
  color: #cdcdcd;
  cursor: pointer;
  transition: .2s;
}

.office-list .office-span-selected {
  color: #8dbb00;
}

#office-selector-underline {
  position: absolute;
  bottom: 0;
  left: 30px;
  height: 2px;
  width: 30px;
  background-color: #8dbb00;
  transition: .2s;
}

/*
 * Firma de contratos 
 */

.tc-contract-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.tc-contract-card {
  display: flex;
  flex: 0 1 450px;
  flex-direction: column;
  justify-content: space-between;
  width: 450px;
  height: fit-content;
  min-height: 200px;
  padding: 16px;
  color: #212529;
  border: 1px solid #8dbb00;
  background: white;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px;
}

@media screen and (max-width: 742px) {
  .tc-contract-card {
    flex: 1 0 100%;
  }
}

.tc-contract-card-highlight {
  color: white;
  background-image: linear-gradient(to right bottom, #759c00, #79a200, #7ea700, #82ad00, #87b300, #8cba00, #92c100, #97c800, #9fd200, #a6dc00, #aee700, #b6f100);
}

.tc-contract-card-highlight svg path {
  fill: white !important;
}

.contract-card-disabled {
  filter: opacity(0.2);
  pointer-events: none;
}

.tc-buttons {
  display: flex;
  gap: 16px;
}

.tc-button {
  height: 34px;
  padding: 10px 25px;
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 14px;
  font-weight: 600;
  line-height: 12px;
  color: #212529;
  background-color: #8dbb00;
  border: 1px solid #8dbb00;
  border-radius: 40px;
  cursor: pointer;
}

.button-alt {
  color: white;
  background-color: #212529;
  border: 1px solid #212529;
}

.button-secondary {
  color: #212529;
  background-color: white;
  border: 1px solid #8dbb00;
}

.tc-button:hover {
  color: #212529;
  background-color: #8dbb00;
}

.button-alt:hover {
  color: white;
  background-color: black;
}

.tc-contract-card .tc-button {
  color: #212529;
  background-color: white;
  border: 1px solid #212529;
}

.tc-contract-card .tc-button:hover {
  color: white;
  background-color: #212529;
  border: 1px solid #212529;
}

.tc-button.disabled {
  cursor: default;
  color: #21252944;
  background-color: white;
  border-color: #8dbb0044;
  pointer-events: none;
}

.tc-contract-card .tc-button.disabled {
  color: #212529;
  border-color: #212529;
}

.tc-button i {
  font-size: 12px;
}