:root {
  --color-primary: #003366;
  --color-primary-lighter: hsl(210, 100%, 40%);
  --color-primary-darker: hsl(210, 100%, 5%);
  --color-secondary: #ffdf40;
  --color-secondary-lighter: hsl(45, 100%, 40%);
  --color-secondary-darker: hsl(45, 100%, 20%);
  --color-tertiary: #e8ad00;
  --color-tertiary-lighter: hsl(45, 100%, 65%);
  --color-tertiary-darker: hsl(45, 100%, 30%);
  --color-white: #FFFFFF;
  --color-grey-lighter: #EDEDED;
  --color-grey-darker: #6c757d;
}

a {
  color: var(--color-primary);
  transition: filter 0.3s ease-in-out;
}

a:hover {
  color: var(--color-tertiary);
  filter: brightness(1.2);
}

a:focus,
a:focus-visible {
  outline: 0 none;
}

body.auth,
body.auth2fa {
  background-image: url('/assets/img/bg_progress.jpg');
  background-blend-mode: luminosity;
  background-size: cover;
  background-position: center center;
  backdrop-filter: blur(2px);
  /* background-color: rgba(255, 255, 255, 0.5); */
}

body.auth,
body.auth2fa {
  margin-bottom: 0px;
}

body.auth .container,
body.auth2fa .container {
  max-width: 570px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid;
}

body.auth-feedback .alert-success a {
  text-transform: uppercase;
  font-size: 22px;
  font-weight: bold;
  padding: 10px;
  display: block;
  border-radius: 20px;
  width: 200px;
  margin: 20px auto;
  color: var(--color-white) !important;
  border: 0px;
  background-color: var(--color-primary);
}

body.auth-feedback .alert {
  max-width: 320px;
}

.btn,
.bootbox .btn-success,
.bootbox .btn-success:active,
.bootbox .btn-success:focus,
.bootbox .btn-success:not(:disabled):not(.disabled):active {
  color: var(--color-primary);
  border: 1px solid var(--color-secondary-darker);
  background-color: var(--color-secondary);
  transition: filter 0.3s ease-in-out;
  outline: 0px;
}

.bootbox .btn-danger,
.bootbox .btn-danger:active,
.bootbox .btn-danger:focus .bootbox .btn-danger,
.bootbox .btn-danger:not(:disabled):not(.disabled):active {
  color: var(--color-white);
  background-color: var(--color-grey-darker);
  border: 1px solid var(--color-grey-darker);
}

.btn:hover {
  color: var(--color-white);
  /* filter: brightness(1.2); */
  background-color: var(--color-tertiary);
}

.btn:focus,
.btn:focus-visible {
  border-color: var(--color-primary);
}

.btn:disabled,
.btn.disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
}

.form .btn {
  margin: 30px auto !important;
  display: block;
  width: 100%;
}

.table.travels tr td .btn {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 1px solid var(--color-primary-darker);
}

.table.travels tr td .btn-dispute {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-darker);
}

.table.travels tr td .btn-dispute[data-status="accepted"] {
  color: var(--color-green);
}

.table.travels tr td .btn-dispute[data-status="accepted"]:hover {
  filter: brightness(1.2);
}

.table.travels tr td .btn-dispute[data-status="rejected"] {
  color: var(--color-red);
}

.table.travels tr td .btn-dispute[data-status="rejected"]:hover {
  filter: brightness(1.2);
}


.table.travels tr td .btn-show-info {
  /*  background-color: var(--color-primary-lighter); */
  color: var(--color-white);
  border: 1px solid var(--color-primary-darker);
}

.table.travels tr td .btn-show-info:hover {
  background-color: var(--color-primary-darker);
}

.table.travels tr td .btn:active,
.table.travels tr td .btn:active:focus,
.table.travels tr td .btn:focus,
.table.travels tr td .btn:focus-visible {
  background-color: var(--color-grey-darker);
  border: 1px solid var(--color-grey-darker);
  color: var(--color-white);
}

.table.travels tr td .btn:hover {
  filter: brightness(1.2);
}

/* .btn-danger:not(:disabled):not(.disabled).active,
.btn-danger:not(:disabled):not(.disabled):active,
.show>.btn-danger.dropdown-toggle,
.btn-danger.focus,
.btn-danger:focus {
  background-color: var(--color-grey-darker);
  border: 1px solid var(--color-grey-darker);
} */

.btn-secondary {
  color: var(--color-white);
  background-color: var(--color-grey-darker);
  border: 1px solid var(--color-grey-darker);
}

.form-control:focus,
textarea:focus,
.custom-select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus {
  border-color: var(--color-primary-lighter);
  box-shadow: 0 0 5px 1px var(--color-primary-lighter);
  outline: 0 none;
}

textarea:focus-visible,
.custom-select:focus-visible,
input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
input[type="datetime"]:focus-visible,
input[type="datetime-local"]:focus-visible,
input[type="date"]:focus-visible,
input[type="month"]:focus-visible,
input[type="time"]:focus-visible,
input[type="week"]:focus-visible,
input[type="number"]:focus-visible,
input[type="email"]:focus-visible,
input[type="url"]:focus-visible,
input[type="search"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="color"]:focus-visible {
  border-color: var(--color-primary-lighter);
  box-shadow: 0 0 5px 1px var(--color-primary-lighter);
  outline: 0 none;
}

.form-control:hover,
textarea:hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="date"]:hover,
input[type="month"]:hover,
input[type="time"]:hover,
input[type="week"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="color"]:hover {
  border-color: var(--color-primary-lighter);
  box-shadow: 0 0 5px 1px var(--color-primary-lighter);
  outline: 0 none;
}

.form-control:disabled,
textarea:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="datetime"]:disabled,
input[type="datetime-local"]:disabled,
input[type="date"]:disabled,
input[type="month"]:disabled,
input[type="time"]:disabled,
input[type="week"]:disabled,
input[type="number"]:disabled,
input[type="email"]:disabled,
input[type="url"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="color"]:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.6;
}

.table thead th,
.table-primary tbody+tbody,
.table-primary td,
.table-primary th,
.table-primary thead th {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}


.table.travels tr.selected {
  background-color: var(--color-grey);
}

.auth .logo-container,
.auth2fa .logo-container {
  background-color: var(--color-primary);
}

.auth .logo-gotap,
.auth2fa .logo-gotap {
  width: auto;
  height: 180px;
  max-height: 220px;
}

.auth .logo-tp,
.auth2fa .logo-tp {
  width: auto;
  height: 100px;
  max-height: 100px;
}

.auth .bank-card,
.auth2fa .bank-card {
  border: 0px;
  border-radius: 0px;
}

.navbar {
  background-color: var(--color-primary);
}

.navbar a,
.navbar-dark .navbar-nav .nav-link {
  color: var(--color-white);
}

.navbar a:hover,
.navbar-dark .navbar-nav .nav-link:hover {
  filter: brightness(1.2);
}

.dropdown-menu a {
  color: var(--color-primary);
}

.dropdown-item:focus,
.dropdown-item:hover {
  color: var(--color-secondary-darker);
  background-color: transparent;
}

.navbar .logo {
  height: 82px;
}

main>.container {
  padding-top: 82px;
}

.page {
  display: none;
}

.page-1 {
  display: table-row;
}

.show-row {
  display: table-row !important;
}

.auth .footer,
.auth2fa .footer {
  position: relative;
  height: auto !important;
}

.auth .footer .list-inline {
  padding: 0px;
}

body.cards .fa-edit:before {
  margin-right: 12px;
}

body.cards .fa-edit:before,
body.cards .fa-trash:before {
  font-size: 22px;
}

#ui-datepicker-div .ui-widget-header {
  background: url("../img/transparent.gif") repeat 0 0 var(--color-primary);
  color: var(--color-white);
}

#ui-datepicker-div .ui-state-active {
  background: url(../img/transparent.gif) repeat 0 0 var(--color-primary);
  color: var(--color-white);
}

.invoice-preview .background-2,
.receipt-preview .background-2 {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/*
=== MEDIA QUERY 
*/

/* Small devices (landscape phones, 576px and min) */
@media (max-width: 576px) {
  .navbar-brand img {
    max-width: 45%;
  }

  .cards a {
    margin: 5px 0px;
    display: inline-block;
  }
}