:root {
  --color-text-primary-azul: rgb(163,43,32);
  --color-bg-primary: rgb(189,41,27);
  --color-bg-secondary: #f7f8fc;
  --color-text-primary: rgb(189,41,27);
  --color-bg-base: #fff;
  --color-text-base: #fff;
}

@font-face {
	font-family: 'Museo';
	src: url('../fonts/Museo-Regular-300.ttf');
}

html,
body {
  font-family: "Museo";
}

body {
  font-family: "Museo";
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Museo";
  font-weight: 700;
  color: rgb(89, 91, 97);
}

.text-mxd-primary {
  color: var(--color-text-primary);
}

.hover-mxd-primary:hover {
  color: var(--color-text-primary);
}

.text-mxd-base {
  color: var(--color-text-base);
}

.bg-mxd-primary {
  color: var(--color-bg-primary);
}

.bg-mxd-base {
  color: var(--color-bg-base);
}

.btn-maxdream-primary {
  background: var(--color-bg-primary);
  color: var(--color-text-base) !important;
}
.btn-maxdream-primary:hover {
  color: var(--color-text-base);
}

.btn-maxdream-primary-outline {
  color: var(--color-bg-primary);
  border: solid 1px;
  border-color: var(--color-bg-primary);
}
.btn-maxdream-primary-outline:hover {
  color: var(--color-bg-primary);
}

.container-dashboard {
  margin-left: 22em;
  margin-right: 3em;
  padding-top: 6em;
}

.title-dashboard {
  color: var(--color-text-primary);
  margin-bottom: 1em;
}

#container-cambiar-pwd{
  max-width: 50%;
}

.subtitles-dashboard {
  /* white-space: nowrap; */
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  padding-top: .5em;
}

.table td, .table th{
  border-top: none !important;
}

.subtitles-dashboard::-webkit-scrollbar {
  display: none; 
}


.subtitles-dashboard a {
  color: var(--color-text-primary);
  font-weight: bold;
  padding: 0.5em 0.7em 1em 0.7em;
  display: inline-block;
  background-color: var(--color-bg-primary);
  border-top-right-radius: 1em;
  border-top-left-radius: 1em;
  color: var(--color-text-base);
}

.subtitle-active {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text-primary) !important;
  border-top-right-radius: 1em;
  border-top-left-radius: 1em;
  box-shadow: 0 -0.2em 5px -5px #333;
}

.container-data {
  background-color: var(--color-bg-secondary);
  border-radius: 1em;
  width: 100%;
  height: auto;
  padding: 2em 1em 1em 1em;
}

.container-pasajero {
  border-top-left-radius: 0 !important;
  margin-bottom: 3em;
  padding-bottom: 3em;
}

.borders-rounded{
  border-top-left-radius: 1em !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.dashboard {
  margin: 0em 1em 1em 20em;
  padding-top: 6em;
}

.col-tr-load {
  background-color: #212529c7;
  width: 50%;
  height: 0.3em;
  border-radius: 1em;
  padding: 0.75em;
  animation: pulseOpacity 1.3s infinite;
}

.col-tr-load-m {
  background-color: #021f4bbf;
  width: 50%;
  height: 0.3em;
  border-radius: 1em;
  padding: 0.75em;
  animation: pulseOpacity 1.3s infinite;
}

.col-td-load {
  background-color: #b5b5b5;
  width: 50%;
  height: 0.3em;
  border-radius: 1em;
  padding: 0.75em;
  animation: pulseOpacity 1.3s infinite;
}


/* Diseño modal */
.modal-center {
  position: relative;
  top: 23%;
  transform: translateY(-50%); 
}

.modal-header{
  border-bottom: 0;
}

#aclaracion-modal{
  font-size: 0.8em;
}

.btn-modal{
  margin-left: 10em;
  margin-right: 10em;
  margin-bottom: 2em;
}

#cc-msg1{
  font-size: 2em;
}
/* Fin diseño modal */

@keyframes pulseOpacity {
  0% {
    display: none;
    opacity: 1;
  }

  30% {
    display: block;
    opacity: 0.5;
  }

  100% {
    display: block;
    opacity: 1;
  }
}

.horizontal-nav {
  border-radius: 1em;
  justify-content: space-evenly;
  display: flex;
  padding: 0.5em;
  background-color: var(--color-bg-secondary);
}

.horizontal-nav a {
  font-weight: 700;
  padding-left: 0.75em;
  padding-right: 0.75em;
}

.horizontal-nav .horizontal-nav-active {
  border: 2px solid #28a745;
  border-radius: 0.3em;
}

.text-purple {
  color: #954ed3;
}

.text-orange {
  color: #cc7a51;
}

.text-blue-dark {
  color: #141b41;
}

@media only screen and (max-width: 414px) {
  .container-dashboard {
    margin-left: 1em;
    margin-right: 1em;
    padding-top: 1em;
  }

  .container-dashboard-table {
    margin-left: 0.2em !important;
    margin-right: 0.2em !important;
    padding-top: 1em;
  }

  .container-pasajero {
    margin-bottom: 1em;
  }

  #container-cambiar-pwd{
    max-width: 100%;
  }

  #responsive-datatable{
    display: block;
    overflow: auto;
  }

  .responsive-datatable{
    display: block;
    overflow: auto;
  }
}

@media (min-width: 415px) and (max-width: 1199px) {
  .container-dashboard {
    margin-left: 3em;
    margin-right: 3em;
    padding-top: 3em;
  }

  #responsive-datatable{
    display: block;
    overflow: auto;
  }

  .responsive-datatable{
    display: block;
    overflow: auto;
  }
}

@media only screen and (max-width: 320px) {
  .subtitles-dashboard a{
    padding: 0.5em 0.4em 1em 0.7em;
  }
}


.tr-maxdream-light{
  background-color: #021f4be3 !important;
}

.rotate-xy{
  animation: rotateXY 0.3s forwards ;
  animation-iteration-count: 1;
}

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

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

.m-tr-cuota .fa-chevron-down:not(.rotate-xy){
  animation: rotateXYr 0.3s forwards ;
  animation-iteration-count: 1;
}

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

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

.tr-maxdream-danger{
  background-color: #5F1D21 !important;
}

/* elimina borde footer datatables */
.table.dataTable.no-footer{
    border-bottom: none !important;
}


.th-subtitle{
  color: #FFF;
  background-color: #3481c4;
}

@media only screen and (max-width: 1199px) {
  .subtitles-dashboard{
    display: none !important;
  }
}