/*
 * BG ETEM global style overrides.
 * This file extends and customizes the default Novareto styling.
 * Applied on top of the base CSS for new design updates.
 * Has to be added in according pyton file to be loaded
 */

/* Custom colors*/
:root {
    --etem-light-blue: #d4edfc;
    --etem-primary-light: #0095db;
    --etem-ice-gray: #E2E8F0;
    --etem-dark-blue:#1F3347;
    --etem-foggy: #F1F5F9;
}

/* ==== Custom background colors==== */
.bg-color-lightblue {
    background-color: var(--etem-light-blue) !important;
}

.bg-color-success-subtle {
    background-color: #ECF3DA !important;
}

.bg-color-foggy {
    background-color: var(--etem-foggy) !important;
}

.bg-sm-remove-lightblue {
    background-color: transparent !important;
}


/* ==== Custom border colors==== */
.border-color-lightblue {
    --bs-border-color: #4ebfef;
}

.border-color-success-subtle {
    --bs-border-color:  var(--etem-ice-gray);
}


/* ==== Text Colors ==== */
.text-dark-blue {
    color: var(--etem-dark-blue);
}

/* ==== Removes horizontal line ==== */
.content.container:has(> #homepage) > #ac,
.content.container:has(> #postfach) > #ac,
.content.container:has(> #versicherungsfall_daten) > #ac,
.content.container:has(> #find_reference) > #ac,
.content.container:has(> #ozg_overview) > #ac,
.content.container:has(> #overview) > #ac,
.content.container:has(> #mub-user-preferences) > #ac,
.content.container:has(> #new_message) > #ac {
    display: none;
  }


/* renders first radio button correctly in Firefox */
.form-check-input {
    position: static;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0.5rem;
}

.form-check {
    display: flex;
    align-items: center;
}

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* ==== Custom styling for circular icons ==== */
.custom-circle-icon-wrapper {
    height: 50px;
    width: 75px;
}

.custom-circle-icon {
    height: 35px;
    width: 35px
}

/* ==== Custom styling for square icons ==== */
.custom-square-icon-wrapper {
    min-width:60px;
    height:60px
}

.custom-square-icon {
    width:28px
}

/* ==== Custom Table==== */
.custom-striped.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-accent-bg: white !important;
}

.custom-striped.table-striped>tbody>tr:nth-child(even)>* {
    --bs-table-accent-bg: #EDEDED !important;
}

.custom-striped tbody tr {
    border-bottom: 1px solid #dee2e6 !important;
    border-top: 0 !important;
  }

.custom-striped.table-hover > tbody > tr {
    transition: background-color 0.15s ease-in-out;
  }

.custom-striped.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: #D4EDFC99 !important;
}

/* Additional smaller fontsize */
.fs-7 {
    font-size: 0.9rem !important;
}

/* ==== Custom widths ==== */
.w-sm-25-md-200{
    min-width: 25%;
}

.w-sm-75-md-25 {
    width: 75%;
}

.w-sm-75-md-50-lg-40 {
    width: 75%;
}

@media (min-width: 768px) {
    .w-sm-75-md-25 {
        width: 25%;
    }

    .w-sm-75-md-50-lg-40 {
        width: 50%;
    }

    .w-sm-200-md-25{
        min-width: 200px;
    }
}

@media (min-width: 992px) {
    .w-sm-75-md-50-lg-40 {
        width: 40%;
    }

    .custom-circle-icon-wrapper {
        height: 75px;
        width: 75px;
    }
}