@import "form-accelerator.css";
/* This stylesheet defines Schwytz specific styling */

/* ============================================================
    1. VARIABLES AND FONTS
   ============================================================ */
:root {
    /* Primary Schwytz Colors */
    --primary-color: #E2001A;               /*Official SZ red*/
    --primary-black: #000000;               /*Official SZ black*/
    --primary-white: #FFFFFF;               /*Official SZ white*/

    /* Secondary Schwytz colors (aligned with webguide palette) */
    --primary-color-light: #D5011A;         /*Official SZ light red*/
    --primary-color-dark: #BD2027;          /*Official SZ dark red*/
    --secondary-color: #D2D2D2;             /*Official SZ grey (webguide)*/
    --secondary-color-light: #EBEBEB;       /*Official SZ light grey (webguide)*/
    --secondary-color-dark: #464646;        /*Official SZ dark grey (webguide)*/
    --secondary-black: #191919;             /*Official SZ light black*/

    /* Other colors */
    --button-hover-color: #C10319;          /* Darker red for button hover effects */

    /* Form Accelerator buttons */
    --primary-button-background-color: #E2001A;
    --primary-button-border-color: #E2001A;
    --primary-button-color: white;
    --default-button-background-color: white;
    --default-button-border-color: black;
    --default-button-color: black;

    /* Font */
    --main-font: trade-gothic-next, Helvetica, Arial, Geneva, sans-serif !important;
}

@font-face {
    font-family:"trade-gothic-next";
    src:url('./Fonts/trade-gothic-next-bold.woff2') format("woff2"), url('./Fonts/trade-gothic-next-bold.woff') format("woff"), url('./Fonts/trade-gothic-next-bold.otf') format("opentype");
    font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}

@font-face {
    font-family:"trade-gothic-next";
    src:url('./Fonts/trade-gothic-next-italic.woff2') format("woff2"), url('./Fonts/trade-gothic-next-italic.woff') format("woff"), url('./Fonts/trade-gothic-next-italic.otf') format("opentype");
    font-display:auto;font-style:italic;font-weight:400;font-stretch:normal;
}

@font-face {
    font-family:"trade-gothic-next";
    src:url('./Fonts/trade-gothic-next-light.woff2') format("woff2"), url('./Fonts/trade-gothic-next-light.woff') format("woff"), url('./Fonts/trade-gothic-next-light.otf') format("opentype");
    font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;
}

@font-face {
    font-family:"trade-gothic-next";
    src:url('./Fonts/trade-gothic-next-regular.woff2') format("woff2"), url('./Fonts/trade-gothic-next-regular.woff') format("woff"), url('./Fonts/trade-gothic-next-regular.otf') format("opentype");
    font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}


/* ============================================================
    2. GLOBAL STYLES
   ============================================================ */
/* -- 2.1 Body ----------------------------------------------- */
html *,
h1, h1.pageTitle, h2.pageTitle, h1.titleHomePage a, h1#workflow-title.egh-title, #displayMessage h1#title,
h2, h1.egh-header, h2.default-title, .TOS .legendForm, .DynamicTOS .legendForm, h2.titleDashboard, h2.modal-title,
h3, h1.egh-header + h1, #pagecms.content .htmlcode h3.default-title {
    font-family: var(--main-font);
}

/* Body text: darker color per webguide */
body {
    color: var(--secondary-black);
}

/* Font size adapted per style guide – scoped to main content area only */
main, [role="main"], .main-content, #pagecms {
    font-size: 18px;
    line-height: 1.6;
}

/* -- 2.2 Titles --------------------------------------------- */
h1, h1.pageTitle, h1.titleHomePage a {
    font-size: 28px !important;
    font-weight: 300;
    color: var(--secondary-black) !important;
    margin-bottom: 20px;
}

h2, h2.pageTitle, h2.default-title, h2.titleDashboard, h2.modal-title,
.TOS .legendForm, .DynamicTOS .legendForm {
    font-size: 22px !important;
    font-weight: 700;
    color: var(--secondary-black) !important;
    margin-top: 32px;
    margin-bottom: 12px;
}

h3, #pagecms.content .htmlcode h3.default-title {
    font-size: 18px !important;
    font-weight: 700;
    color: var(--secondary-black) !important;
    margin-top: 24px;
    margin-bottom: 8px;
}

/* -- 2.3 Paragraphs ------------------------------------------ */

/* -- 2.4 Links ----------------------------------------------- */
a, .navFooter a, footer a {
    transition: all ease .2s;
    color: var(--primary-color);
    text-decoration: none;
}

a:hover, a:focus,
.navFooter a:focus, .navFooter a:hover,
footer a:focus, footer a:hover {
    transition: all ease .2s;
    color: var(--primary-color);
    text-decoration: underline;
}

/* ============================================================
    3. REUSABLE UI COMPONENTS
   ============================================================ */
/* -- 3.1 Buttons --------------------------------------------- */
/* General behavior */
.btn, .btn:any-link, .btn.primary, .btn.secondary, .btn.btn-ok, .btn.next {
    background-color: var(--primary-color);
    display: inline-block;
    border: 0;
    padding: .5em 1em .65em;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    line-height: inherit;
    border-radius: .2em;
    cursor: pointer;
    transition: all .2s;
}

.btn:active, .btn:focus, .btn:hover,
.btn.primary:active, .btn.primary:focus, .btn.primary:hover,
.btn.secondary:active, .btn.secondary:focus, .btn.secondary:hover,
.btn.btn-ok:active, .btn.btn-ok:focus, .btn.btn-ok:hover,
.btn.next:active, .btn.next:focus, .btn.next:hover {
    display: inline-block;
    border: 0;
    padding: .5em 1em .65em;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    line-height: inherit;
    background-color: var(--button-hover-color);
    border-radius: .2em;
    cursor: pointer;
    transition: all .2s;
}

.btn:hover, button:hover, .button:hover {
    border: 1px solid var(--primary-color);
}

.btn:focus, button:focus, .button:focus {
    outline-color: 1px solid var(--primary-color);
}

.btn-icon:hover i {
    color: #fff;
}

/* Login/Anmelden button – white outlined on red navbar */
li.connectionButtonRightMenu a.top-login-button {
    background-color: transparent !important;
    display: inline-block;
    position: unset;
    color: #fff !important;
    padding: 5px 16px !important;
    font-weight: 400;
    text-align: center;
    font-size: 16px;
    line-height: 1.42857143;
    min-height: fit-content;
    border: 1.5px solid #fff !important;
    border-radius: 4px;
}

li.connectionButtonRightMenu a.top-login-button i {
    color: #fff !important;
    margin-right: 6px;
}

li.connectionButtonRightMenu a.top-login-button:hover,
li.connectionButtonRightMenu a.top-login-button:focus,
li.connectionButtonRightMenu a.top-login-button:active {
    background-color: var(--button-hover-color) !important;
    color: #fff !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    text-decoration: none !important;
}

li.connectionButtonRightMenu a.top-login-button:hover i,
li.connectionButtonRightMenu a.top-login-button:focus i,
li.connectionButtonRightMenu a.top-login-button:active i {
    color: #fff !important;
}

@media (max-width: 768px) {
    li.connectionButtonRightMenu a.top-login-button {
        margin-top: 4.25px !important;
        margin-bottom: 4.25px !important;
    }
    li.FAQButtonRightMenu a.help {
        margin-top: 7.5px !important;
        margin-bottom: 7.5px !important;
    }
}

/* TOS action buttons icons – white on red */
.actionButtonsTOS a i {
    color: #fff !important;
}

/* -- 3.2 Buttons at the bottom band (for message box for ex) - */

/* -- 3.3 Lists with bullet points ---------------------------- */

/* -- 3.4 Info message ---------------------------------------- */

/* -- 3.5 Neutral message ------------------------------------- */

/* -- 3.6 Modals ---------------------------------------------- */

/* -- 3.7 Pagination ------------------------------------------ */

/* -- 3.8 Forms ----------------------------------------------- */
.grid-item {
    background-color: var(--secondary-color-light) !important;
    padding: 5px;
}

/* -- 3.9 Filters --------------------------------------------- */

/* -- 3.10 Loading screen --------------------------------------------- */
/* -- Loading animation */
#box {
    width: 50px;
    height: 50px;
    background: var(--primary-color-light);
    animation: animate .5s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
}


/* ============================================================
    4. PAGE HEADER
   ============================================================ */
/* -- 4.1 Header brand --------- */
/* "Onlineschalter" title – top left of header */
header {
    position: relative;
}

/* Logo to the right */
.header-brand-title {
    float: right !important;
}

/* Dev ribbon */
.dev-ribbon {
    background: var(--primary-color) !important;
}

/* -- 4.2 Navigation bar --------- */
/* General */
header .navbar {
    background: var(--primary-color);
}

/* Hide "Nachrichten" / "Dokumente" text labels in navbar icons */
.navbar-right .nav-icon .ico {
    display: none !important;
}

/* Remove white separators between navbar items */
.navbar .navbar-right li {
    border-left: none !important;
}

/* Help icon: replace fa-question-circle with plain "?" in a CSS circle */
.navbar .help,
.navbar-right .help {
    border: 1.5px solid #fff !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 10px 10px !important;
    min-width: auto !important;
    min-height: auto !important;
}

.navbar .help .fa-question-circle,
.navbar-right .help .fa-question-circle {
    font-size: 0 !important;
}

.navbar .help .fa-question-circle::before,
.navbar-right .help .fa-question-circle::before {
    content: '?' !important;
    font-family: var(--main-font);
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #fff;
}

ul.nav.navbar-nav.navbar-right .help:hover,
.navbar .help:hover,
.navbar-right .help:hover {
    background-color: var(--button-hover-color) !important;
}

/* Burger menu – remove border frame  */
.navbar-toggle {
    border: none;
    border-radius: 0;
    padding: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
    border: none;
    background-color: rgba(255, 255, 255, 0.15);
}

/* Search toggle in small screens */
@media (max-width: 990px) {
    .navbar .search.pull-left {
        background-color: var(--primary-color);
        border-top: none;
    }
}

/* Hide documents button */
#ctl00_ctl00_TopMenu_liMyDocuments {
    display: none;
}

/* -- 4.3 Dropdown menu --------- */

/* -- 4.4 Breadcrumb --------- */
.breadcrumb i,
.breadcrumb > li .fa-angle-right{
    color: var(--primary-black);
}

.breadcrumb a {
    color: var(--primary-black);
    text-decoration: underline;
}

.breadcrumb a:hover, .breadcrumb a:focus {
    color: var(--primary-color-light);
    text-decoration: underline;
}

.breadcrumb > .active{
    color: var(--primary-color-light);
}

.breadcrumb li:first-child a {
    text-decoration: none;
}

/* ============================================================
   5. NAVIGATION SIDEBAR (WITH SERVICES THEME)
   ============================================================ */
.sidebar {
    background-color:white;
}

#main-nav a:active, #main-nav a:focus, #main-nav a:hover {
    transition: all ease .2s;
    color: var(--primary-color);
    border-bottom: 1px solid #e0e0e0 !important;
}

#main-nav .selected a,
#main-nav li.selected a {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    font-weight: bold;
    border-left: none;
    padding-left: 15px;
    border-radius: 4px;
}

#main-nav a {
    color: var(--secondary-color-dark);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 6px;
    font-size: 16px;
}

#main-nav ul li:first-child a {
    margin-top: 6px;
}

#main-nav li.selected a:hover {
    color: #fff !important;
}

#main-nav li:not(.selected) a:hover {
    border-left: 3px solid var(--primary-color);
}


/* ============================================================
    6. FOOTER
   ============================================================ */
body footer {
    height: 100%;
    color: var(--primary-black);
    background-color: var(--secondary-color-light) !important;
    border-top: 1px solid var(--secondary-color) !important;
    font-size: 16px;
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center;
    padding: 20px 30px !important;
}

/* Footer image – logo to the right */
footer .logoFooter {
    margin-left: auto;
    margin-right: 0;
    min-width: 130px;
    display: block;
    height: auto;
    order: -1;
}

@media (max-width: 480px) {
    footer .logoFooter img {
        display: none;
    }
}

/* Footer links – left aligned */
footer .textFooter {
    width: auto !important;
}

footer .textFooter .leftFooter {
    width: 100%;
}

.navFooter ul {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 30px;
}

.navFooter ul li {
    width: auto !important;
    white-space: nowrap;
    margin: 0 !important;
}

/* Footer link colors – black, underlined */
.navFooter a,
footer a {
    color: var(--primary-black) !important;
    text-decoration: none !important;
}

.navFooter a:hover,
footer a:hover {
    color: var(--primary-black) !important;
    text-decoration: underline !important;
}

.navFooter a::before {
    display: none;
}

/* Do not display the accessibility certificate footer */
div .certificateFooter {
    display: none;
}

/* 2 columns in footer under 768px with no logo under 480px */
@media (min-width: 481px) and (max-width: 768px) {
    footer { gap: 20px; }
    footer .logoFooter img { max-width: 130px; }
    footer .navFooter { margin-bottom: 0; }
    footer .textFooter { flex: 1 1 auto; }
    .navFooter ul {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
        max-width: 310px;
    }
}

@media (max-width: 480px) {
    footer .logoFooter { display: none; }
    footer .textFooter { width: 100% !important; }
    footer .navFooter { margin-bottom: 0; }
    .navFooter ul {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
        max-width: 310px;
    }
}

/* ============================================================
    7. PRESTATION CATALOGUE
   ============================================================ */
/* -- 7.1 Filters --------------------------------------------- */
.filterHomeCatalogue{
    display: none;
}

/* -- 7.2 Tiles in general ------------------------------------- */

.item.presta, .prestations-list {
    .prestation-item a { border-top: 5px solid var(--primary-color); }
    .prestation-item span.desc { left: unset; right: 7px; }
    .prestation-icon { display: none; }
    .prestation-title { height: 100px; text-align: left; padding-left: 15px; padding-right: 33px; color: var(--secondary-black) } /* padding-right allow to display locked or external icons */
    .prestation-title::first-line { font-weight: bold; }
    i { color: var(--primary-color); }
}

/* Make tiles on smaller screens look the same as bigger screens*/
@media (max-width: 990px) {
    .prestation-item a,
    .prestation-item .content-presta {
        padding: 0;
        border-right: 1px solid var(--secondary-color);
        border-bottom: 1px solid var(--secondary-color);
        border-left: 1px solid var(--secondary-color);
        border-radius: 6px;
        box-shadow: none;
    }

    .prestation-title,
    span.prestation-title {
        display: block !important;
        margin: 0 !important;
        padding: 12px 33px 15px 15px !important;
        height: 100px;
    }
}

/* -- 7.3 Tiles organisation ------------------------------------- */
/* 3 columns for in between screens */
@media (min-width: 1120px) and (max-width: 1400px) {
    ul.prestations-list-small.columns4 li,
    ul.prestations-list.columns4 li {
        width: 31%;
    }
    
    ul.prestations-list li.presta.clear {
        clear: none;
    }
}

/* 2 columns for smaller screens */
@media (min-width: 796px) and (max-width: 1165px) {
    ul.prestations-list-small.columns4 li,
    ul.prestations-list.columns4 li {
        width: 48%;
    }

    ul.prestations-list li.presta.clear {
        clear: none;
    }
}

/* 1 column for smallest screens */
/* Fallback to iGovPortal styles under 769px */
@media (min-width: 769px) and (max-width: 795px) {
    ul.prestations-list-small.columns4 li,
    ul.prestations-list.columns4 li {
        width: 98%;
    }

    ul.prestations-list li.presta.clear {
        clear: none;
    }
}

/* -- 7.4 Favorites button ------------------------------------- */
@media (max-width: 990px) {
    .setDashboardPresta.btn i,
    .setDashboardWidget.btn i {
        color: #fff !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    .setDashboardPresta {
        padding: 8px 16px !important;
        text-align: center !important;
    }
}

/* ============================================================
    8. HOMEPAGE ANONYMOUS USERS
   ============================================================ */
/* -- 8.1 News panel ------------------------------------------ */
.small-list-news .text-box {
    position: absolute;
    bottom: -1px;
    left: 0;
    background: rgba(241,241,241,.92);
    z-index: 1;
    width: 101%;
    padding-bottom: 24px;
}

.small-list-news .default-title {
    font-size: 22px;
    padding: 0 15px;
    margin: 10px 0;
    color: var(--secondary-black);
}

@media (max-width: 480px) {
    .small-list-news .text-box {
        padding: 0 15px 24px;
    }

    .small-list-news .default-title {
        padding: 0;
    }
}

/* -- 8.1.1 Carousel controls --- */
/* Dot colors */
.owl-dot {
    top: -5px;
}

.owl-dot span {
    background: var(--primary-black) !important;
    width: 12px;
    height: 12px;
    margin: 1px 1px;
}

.owl-dot.active span,
.owl-dot:hover span {
    background: var(--primary-color) !important;
}

/* Override platform button hover on owl-dot (prevents violet background) */
.owl-dot:hover,
.owl-dot:focus,
.owl-dot:active {
    background: none !important;
    border-color: #b2b2b2 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Hide prev/next arrow buttons */
.owl-nav {
    display: none !important;
}

/* -- 8.2 Create user info panel (white card, rounded, shadow) ------ */
.create-user-info {
    margin-top: 0 !important;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.create-user-info .panel {
    background-color: #fff !important;
    border: none !important;
    border-top: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 24px 24px 0 !important;
}

.create-user-info .panel h2 {
    margin-top: 0 !important;
    font-size: 22px !important;
}

.create-user-info .btnConnnecter {
    text-align: center;
    padding: 0 24px 24px;
}

.create-user-info .btnConnnecter .btn {
    border-radius: 4px;
    margin-bottom: 0;
}

.create-user-info .panel ul li {
    display: list-item;
}

/* ============================================================
   9. HOMEPAGE LOGGED IN USERS
   ============================================================ */
/* -- 9.1 Button to add favorite tiles ------------------------ */

button.setDashboardPresta.selected {
    border: 1px solid var(--primary-color);
}

/* -- 9.3 Favorite tiles -------------------------------------- */
/* overriding default IGP styles for delete button (X) */
.presta.green .prestation-item a.delete i,
.presta.dark-green .prestation-item a.delete i,
.presta.purple .prestation-item a.delete i,
.presta.pink .prestation-item a.delete i,
.presta.black .prestation-item a.delete i,
.presta.red .prestation-item a.delete i,
.presta.cyan .prestation-item a.delete i,
.presta.dark-blue .prestation-item a.delete i,
.presta.light-blue .prestation-item a.delete i,
.presta.orange .prestation-item a.delete i {
    color: var(--primary-color);
}

/* -- 9.2 Tiles to be added to dashboard ---------------------- */

/* -- 9.3 Modal to add favorite tiles ------------------------- */

.menuSearchPresta .menuModal.AddPresta.selected {
    color: var(--primary-color);
}

.menuSearchPresta .menuModal.AddPresta:hover {
    color: var(--primary-color);
}


/* -- 9.4 Sidebar tools --------------------------------------- */
/* Fix platform icons color (violet -> SZ red) */
.panel-tools .btn.btn-thin i,
.sidebar-tools i,
.panel-tools i,
.externalIDPButton i
{
    color: var(--primary-color) !important;
}

/* Fix catalog icon (uses mask-image, so background-color = icon color) */
.fa-catalog-custom {
    background-color: var(--primary-color) !important;
}

/* Fix "Neu" pill (violet -> SZ red) */
.pill.new {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

/* Fix dates color (violet -> SZ red) */
.panel-tools-date {
    color: var(--primary-color) !important;
}

/* Fix .btn-thin buttons: should be white bg with border, not red bg */
.panel-tools .btn.btn-thin,
.sidebar-tools .btn.btn-thin,
.externalIDPButton .btn.btn-thin {
    background-color: #fff !important;
    color: var(--primary-black) !important;
    border: 1px solid #cecece !important;
}

.panel-tools .btn.btn-thin:hover,
.sidebar-tools .btn.btn-thin:hover,
.externalIDPButton .btn.btn-thin:hover
{
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

.panel-tools .btn.btn-thin:hover i,
.sidebar-tools .btn.btn-thin:hover i,
.externalIDPButton .btn.btn-thin:hover i{
    color: #fff !important;
}


/* ============================================================
    10. FAQ PAGES
   ============================================================ */

/* -- 10.1 Search panel --------------------------------------- */
.mainsearch .form-inline {
    padding: 15px;
    background: var(--primary-color);
    border-radius: 2px;
}

/* Hide search magnifying glass icon in search field  */
.search[role="search"] .fa-search,
.field .fa-search {
    display: none !important;
}

/* -- 10.2 Page content --------------------------------------- */
/* Limit text width to 80-90 characters for readability (AC: largeur des pages limitée) */
/* Only target the text content block inside CMS pages, not the full page container */
#pagecms.content .htmlcode {
    max-width: 80ch;
}


/* ============================================================
    11. TOS
   ============================================================ */
/* -- 11.1 TOS at profile creation ---------------------------- */

/* -- 11.2 TOS page ------------------------------------------- */


/* ============================================================
    12. MAILBOX
   ============================================================ */
/* -- 12.1 Desktop overview ----------------------------------- */

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

.messageTable .item.unread {
    border-color: var(--primary-color);
}

.messageTable .item.unread:hover td {
    background-color: var(--secondary-color);
}

.messageTable .item.unread td {
    background-color: var(--secondary-color-light);
}

.formcontent .messageTable .heavy th {
    background: var(--primary-color);
}

.messageTable .item:hover td {
    background: var(--secondary-color-light);
}

.tabIcons.menuListMessage .selected span {
    color: var(--primary-color);
}

.tabIcons.menuListMessage .selected a:hover {
    text-decoration-color: var(--primary-color);
}

.msg-list > li.unread {
    background-color: var(--secondary-color-light);
    border-bottom: 1px solid var(--primary-color);
}


/* -- 12.2 Mobile overview ------------------------------------ */

/* -- 12.3 Desktop - Detail of a message ---------------------- */

.detailMessageActionButtons i {
    color: #FFFFFF;
}

/* ============================================================
    13. PROFILE PAGE
   ============================================================ */
/* -- 13.1 Coordinates section -------------------------------- */

.EditCustomer .infomessage {
    background-color: var(--secondary-color-light) !important;
    color: var(--primary-black) !important;
    border-color: var(--primary-color) !important;
    font-size: 16px;
    max-width: 80ch;
}

.EditCustomer .infomessage:before {
    color: var(--primary-black) !important;
}

/* Fix "Daten ändern" button icon color (red on red -> white) */
.externalIDPButton i {
    color: #fff !important;
}

/* Hide "Sicherheit" section (Passwort ändern) — fieldset right after Profil */
#ctl00_ctl00_Container_Content_SecurityPanel {
    display: none !important;
}

/* Hide "ProfileBild" section  */
.EditCustomer .formtab:has(a[href*="ProfilePicture.aspx"]) {
    display: none !important;
}

/* -- 13.2 Upload profile image section ----------------------- */

/* -- 13.3 Session duration ----------------------------------- */

/* -- 13.4 Account deletion section ---------------------------- */

.deleteAccountButton {
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

.deleteAccountButton:hover {
    background-color: var(--button-hover-color) !important;
    border: 1px solid var(--button-hover-color) !important;
}

/* -- 13.5 Notifications -------------------------------------- */

/* -- 13.6 Force Button color --------------------------------  */


/* ============================================================
    14. ACTIVITY DASHBOARD PAGE
   ============================================================ */


/* ============================================================
    15. BUSINESS CASES PAGE
   ============================================================ */


/* ============================================================
    16. PROCURATIONS (= POWER OF ATTORNEY)
   ============================================================ */
/* -- 16.1 Dashboard ------------------------------------------ */

/* -- 16.2 Create procuration page ---------------------------- */

/* -- 16.3 Accept token page ---------------------------------- */

/* -- 16.4 Details of a procuration --------------------------- */


/* ============================================================
   17. MODALS
   ============================================================ */
/* -- 17.1 Connection modals --------------------------------- */


/* ============================================================
   18. EGOVHUB
   ============================================================ */
/* -- 18.1 General -------------------------------------------- */
.egh-title {
    margin-left: 30px !important;
}

.egh-hyperlink-container {
    margin-left: 30px !important;
}

.egh-body {
    margin-left: 30px !important;
}


/* -- 18.2 Buttons -------------------------------------------- */
/* eGovHub button: SZ red instead of black, proper alignment */
.egh-button,
.displayMessage--complete {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: 4px;
}

.egh-button:hover,
.displayMessage--complete:hover {
    background-color: var(--button-hover-color) !important;
    border-color: var(--button-hover-color) !important;
}

/* -- 18.3 Checkbox ------------------------------------------- */

/* -- 18.4 Leistungsverzeichnis pages ------------------------- */


/* ============================================================
    19. SUPPORT PAGES
   ============================================================ */
/* -- 19.1 Optional Fields --------------------------------------- */
span.optional-field, div.optional-field {
    font-size: 14px;
    color: var(--primary-color-light);
}

/* -- 19.2 Aside ----------------------------- */
aside .default-title i {
    color: var(--primary-color);
    font-size: 22px;
}

/* ============================================================
    20.  HEADER ANIMATION
   ============================================================ */
.header-brand {
    position: relative;
    overflow: hidden;
    background: #e1dede;
}

/* Two background layers */
.header-brand::before,
.header-brand::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    will-change: opacity;
}

/* Layer visibility controlled by JS */
.header-brand.show-before::before {
    opacity: 1;
}

.header-brand.show-after::after {
    opacity: 1;
}

/* Show logo and ribbon above background */
.header-brand-title,
.tools-right {
    position: relative;
    z-index: 2;
}

.headerRibbon {
    position: relative;
    z-index: 2;
}

/* Style for the header in mobile */
@media (max-width: 767px) {
    .header-brand {
        height: 100px;
    }
}

@media (min-width: 369px) and (max-width: 767px) {
    .header-brand-title {
        right: calc(50% - 184px) !important;
    }
    
    .header-brand-title .logoHeader {
        width: 180px !important;
    }
}

#digitale-gemeinde--integration .loader {
    all: unset;
}