/*
 * Client design override (WMC demo portal), 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/loginlogo-2fdd438f7996c8e3646e218a4eab98d1.png");
}

body {
  font-family: Arial;
}

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

/* Backgrounds */
.bg-color {
  background-color: #FAFAFA;
}

.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 */
.bg-card {
  background-color: #7A7A7A;
}

.bg-sub-card {
  background-color: #7A7A7A !important;
}

.h5-submenu-title {
  color: white !important;
  font-size: calc((5vw + 5vh + 2vmin) / 11);
}

.notification .badge {
  background-color: #C00000;
}

/* Icons, text and link colors */
svg g path {
  fill: #7A7A7A;
  stroke: #7A7A7A;
}

.svg-fs-1 {
  color: #7A7A7A !important;
}

.txt-color,
a {
  color: #7A7A7A;
  text-decoration: none;
}

.card-text,
.color-link,
a:hover {
  color: #7A7A7A;
}

label,
input,
span {
  color: #7A7A7A;
}

h2 {
  color: #C00000 !important;
}

.nav-item a {
  color: #C00000 !important;
}

.nav-link:focus,
.nav-link:hover {
  color: #7A7A7A;
}

/* Customer advisor card */
.client-Advisor-border {
  border: 4px solid #7A7A7A;
}

/* Buttons */
button.btn-primary,
a.btn-primary {
  background-color: #C00000 !important;
  color: white !important;
}

button.btn-primary {
  border-color: #C00000 !important;
}

.btn-primary {
  border-color: #7A7A7A;
}

.btn-outline-secondary {
  border-color: #B0413E !important;
  color: #7A7A7A !important;
}

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

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

/* Tables */
th {
  color: #7A7A7A !important;
  border-color: #7A7A7A;
}

td {
  color: #7A7A7A !important;
  border-color: #7A7A7A;
}

tbody,
td,
tfoot,
th,
thead,
tr {
  border-color: #7A7A7A !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: #7A7A7A !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: #7A7A7A !important;
}

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

/* Login page only: individual background, form box, footer line and button layout */
body:has(#inputUsername) .container-fluid {
  background-image: url("../images/neubau-0146d30a1c9cbef77a076144041b5467.jpg") !important;
  background-position: bottom;
  background-size: cover;
  position: absolute;
}

body:has(#inputUsername) .w-400.position-absolute.top-50.start-50.translate-middle {
  background-color: #f0f0f0; /* Light gray background */
  border-radius: 5px; /* Rounded corners */
  padding: 20px; /* Padding for inner elements */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

body:has(#inputUsername) .alert-success {
  background-color: white;
}

body:has(#inputUsername) .btn {
  margin-top: 0.7rem;
}

body:has(#inputUsername) #inputUsername {
  margin-bottom: 0.3rem;
}

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

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

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

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

body:has(#inputUsername) #mainbody::after {
  content: "WMC IT SOLUTIONS \25AA  Telefon 061 716 11 11 \25AA  info@wmc.ch";
  position: absolute;
  bottom: 10px;
  left: 50%;
  font-style: italic;
  transform: translateX(-50%);
  color: white;
  padding: 5px;
}