/*
 * Client design override (Intermakler), one file for all pages.
 *
 * IMPORTANT: this file is served as plain CSS, it is not compiled by Sass. Use block comments only:
 * a line comment (double slash) turns the selector of the next rule into garbage and the browser
 * drops that rule. No $variables, no @import.
 *
 * Images: put them in clientfiles/images/ and refer to them as url("../images/<file>").
 * Run "php bin/console asset-map:compile" after changing this file or the images.
 *
 * Login page: only the login page contains the field #inputUsername, so rules for the login page
 * start with "body:has(#inputUsername)" and do not touch any other page (see the last section).
 */

/* Info box on the login page (clientfiles/twig/security/login_info.html.twig) */
.info-box {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 5px;
  color: #333;
  margin: 0 auto;
  line-height: 1.2; /* Adjust the line height as needed */
}

.info-box p {
  margin: 5px 0;
}

.info-box ul {
  margin: 5px 0;
  padding-left: 20px;
}

/* Logo picture */
.logo {
  content: url("../images/logoIntermakler-278fd15620acb3a52b9a8870dd138dab.svg");
  height: auto;
}

body {
  font-family: Arial;
}

.sticky-top {
  padding-top: 10px;
}

/* Backgrounds */
.bg-color,
.nav-bg-color,
.right-bg-color {
  background-color: white;
}

.column2 {
  background-color: #F0EDEA !important;
  padding: 0 0 0 2rem !important;
}

.form-control {
  background-color: #F0EDEA;
}

/* Home tiles (the images fill the whole tile, so no padding) */
.bg-card {
  padding: 0 !important;
  background-color: #013F6C;
}

.bg-sub-card {
  padding: 0 !important;
  background-color: #F0EDEA !important;
}

.h5-submenu-title {
  color: #326183 !important;
}

svg g path {
  fill: #021F31;
  stroke: #021F31;
}

/* Text and link colors */
.txt-color,
a {
  color: #021F31;
  text-decoration: none;
}

label,
input,
span {
  color: #021F31;
}

.card-text,
.color-link,
a:hover,
h2 {
  color: #021F31;
}

.nav-link:focus,
.nav-link:hover {
  color: #021F31;
}

/* Buttons */
.btn-outline-secondary {
  border-color: #B0413E !important;
  color: #021F31 !important;
}

.btn-outline-secondary:hover {
  background-color: white !important;
}

.btn-primary {
  border-color: #021F31;
}

button.btn-primary,
a.btn-primary {
  background-color: #021F31 !important;
  color: white !important;
}

.custom-button {
  font-weight: 600;
  background-color: #021F31 !important;
  color: white !important;
  border-color: #021F31;
}

.client-Advisor-border {
  border: 4px solid #021F31;
}

/* Tables */
th {
  color: #021F31 !important;
  border-color: #021F31;
}

td {
  color: #021F31 !important;
  border-color: #021F31;
}

tbody,
td,
tfoot,
th,
thead,
tr {
  border-color: #021F31 !important;
}

.table-bordered > :not(caption) > * > * {
  border-width: 0px 0px 1px 0px !important;
}

/* Table info line and paging (DataTables 2: .dt-info and .dt-paging-button) */
.dt-info {
  color: #021F31 !important;
}

body div.dt-container .dt-paging .dt-paging-button,
body div.dt-container .dt-paging .dt-paging-button.current,
body div.dt-container .dt-paging .dt-paging-button.current:hover,
body div.dt-container .dt-paging .dt-paging-button.disabled,
body div.dt-container .dt-paging .dt-paging-button.disabled:hover,
body div.dt-container .dt-paging .dt-paging-button.disabled:active {
  color: #021F31 !important;
}

body div.dt-container .dt-paging .dt-paging-button:hover {
  background: white !important;
  color: #021F31 !important;
}

/* Login page only: individual background, button layout and password field */
body:has(#inputUsername) .container-fluid {
  background-image: url("../images/kundenportal-startseite_hintergrundbild_intermakler-19a4abc2b9581ea4f25910cf40fb1cd0.jpg") !important;
  background-position: bottom;
  background-size: cover;
  position: absolute;
}

body:has(#inputUsername) .btn-outline-secondary {
  border-radius: 0.3rem;
  font-size: 1.25rem;
  float: right;
  padding: 0.5rem 1rem;
}

body:has(#inputUsername) #inputPassword {
  margin-bottom: 0.4rem;
  margin-right: 6px;
}

body:has(#inputUsername) .btn-primary {
  max-height: 100%;
  max-width: 33%;
}

body:has(#inputUsername) .spinner-border-sm {
  display: none;
}