/* This stylesheet defines BL-Konto specific styling */

/* ============================================================
    1. VARIABLES
   ============================================================ */
:root {
    /* Colors from UI template */
    --primary-color: #E6F2F2;               /*grey-blue-01*/
    --primary-color-text: #FFFFFF;
    --primary-color-pill: #000000;
    --secondary-color: #FF0000;             /*Official BL red*/
    --secondary-color-light-1: #FFD9D9;     /*Official BL red - 85% lighter*/
    --secondary-color-light-2: #FFFFFF;
    --tertiary-color: #FFB3B3;              /*Official BL red - 70% lighter*/

    /* Other BL-Konto colors */
    --content-text-color: #444;
    --footer-text-color: #000000;
    --grey-blue-02: #b6bfbf;
    --grey-blue-03: #858C8C;
    --grey-blue-04: #555959;
    --grey-blue-05: #484949;
    --dark-red: #a00000;

    /* Font size */
    --font-size-body: 15px;
    --font-size-h1: 30px;
    --font-size-h2: 21px;
    --font-size-h3: 15px;
    --font-size-p: 15px;

    /* Other constants */
    --navbar-height-big-screens: 48px;
    --navbar-height-small-screens: 40px;
    --box-shadow: 2px 2px 6px #dedede;
}

/* ============================================================
    2. GLOBAL STYLES
   ============================================================ */
/* -- 2.1 Body ----------------------------------------------- */
body {
    color: var(--content-text-color);
    font-size: var(--font-size-body);
}

/* -- 2.2 Titles --------------------------------------------- */
h1,
h1.pageTitle,
h2.pageTitle,
.titleHomePage a,
h1#workflow-title.egh-title {
    color: var(--secondary-color) !important;
    font-size: var(--font-size-h1) !important;
    font-weight: 400 !important;
}

h2,
h2.default-title,
legend.titlePage,
legend.legendForm, fieldset legend.legendForm,
.panel-tools legend,
.panel-tools .default-title,
.create-user-info h2,
.titleDashboard,
#LeistungsVerzeichnisId .col-md-12 p.mb-0,          /* Leistungsverzeichnis page subtitles */
.egh-body h1
{
    color: var(--content-text-color) !important;
    font-size: var(--font-size-h2) !important;
    font-weight: 400;
}

legend:before,
.titleDashboard:before {                                     /* Small line below a title */
    background-color: var(--secondary-color);
}

/* -- 2.3 Paragraphs ------------------------------------------ */
p,
.panel p:not(#TopMsg),
#LeistungsVerzeichnisId {                           /* Leistungsverzeichnis page content */
    color: var(--content-text-color);
    font-size : var(--font-size-p);
}

label {
    color: var(--content-text-color);
}

/* -- 2.4 Links ----------------------------------------------- */
a:active, a:focus, a:hover,
.pagination > li > a:active, .pagination > li > a:focus, .pagination > li > a:hover {
    color: var(--dark-red);
}

/* -- 2.5 Lists ----------------------------------------------- */
ul li {
    display: list-item;
}

/* ============================================================
    3. REUSABLE UI COMPONENTS
   ============================================================ */
/* -- 3.1 Buttons --------------------------------------------- */
/* General behavior */
button, button:active, button:focus, button:hover {
    box-sizing: border-box;
    border: none;
}

.btn, .btn:active, .btn:focus, .btn:hover,
.btn.primary, .btn.primary:active, .btn.primary:focus, .btn.primary:hover,
.btn.secondary, .btn.secondary:active, .btn.secondary:focus, .btn.secondary:hover,
.btn.btn-ok, .btn.btn-ok:active, .btn.btn-ok:focus, .btn.btn-ok:hover,
.btn.next, .btn.next:active, .btn.next:focus, .btn.next:hover {
    font-size: var(--font-size-body);
    border: none;
    box-sizing: border-box;
}

.btn:hover i,
button:hover i,
.button:hover i {
    color: var(--secondary-color);
}

/* Secondary buttons or by default */
button,
.btn,
.btn.secondary,
.btn-close,
.btn-cancel,
.prev {
    background-color: var(--grey-blue-02);
    color: #000000;
}

button:active, button:focus, button:hover,
.btn:active, .btn:focus, .btn:hover,
.btn.secondary:active, .btn.secondary:focus, .btn.secondary:hover,
.btn-close:active, .btn-close:focus, .btn-close:hover,
.btn-cancel:active, .btn-cancel:focus, .btn-cancel:hover,
.prev:active, .prev:focus, .prev:hover,
.egh-button.btn-cancel:active, .egh-button.btn-cancel:focus, .egh-button.btn-cancel:hover {
    background-color: var(--primary-color);
    color: #000000;
}

/* Primary buttons */
.btn.primary,
.btn.btn-ok,
.btn.next {
    background-color: var(--secondary-color);
    color: var(--primary-color-text);
}

.btn.primary:active, .btn.primary:focus, .btn.primary:hover,
.btn.btn-ok:active, .btn.btn-ok:focus, .btn.btn-ok:hover,
.btn.next:active, .btn.next:focus, .btn.next:hover{
    background-color: var(--dark-red);
    color: var(--primary-color-text);
}

/* Icons inside buttons */
.btn i, button i, .button i {
    margin-left: 5px;
    margin-right: 5px;
}

/* -- 3.2 Buttons at the bottom band (for message box for ex) - */
.desktopBottomBand.bottomBand a i, .desktopBottomBand.bottomBand a:active i, .desktopBottomBand.bottomBand a:focus i, .desktopBottomBand.bottomBand a:hover i,
.desktopBottomBand.bottomBand button i, .desktopBottomBand.bottomBand button:active i, .desktopBottomBand.bottomBand button:focus i, .desktopBottomBand.bottomBand button:hover i {
    color: var(--primary-color-text);
}

/* -- 3.3 Lists with bullet points ---------------------------- */
.listWithBulletPoints ul,
.BlocText ul,
.BlocImageText ul,
.BlocHtml ul,
.TOS ul,
.DynamicTOS ul {
    list-style-type: disc;
}

.listWithBulletPoints ul li,
.BlocText ul li,
.BlocImageText ul li,
.BlocHtml ul li,
.TOS ul li,
.DynamicTOS ul li {
    display: list-item;
}

.BlocText ul li:before,
.BlocImageText ul li:before,
.BlocHtml ul li:before,
.listWithBulletPoints li:before {
    display:none;
}

/* -- 3.4 Info message ---------------------------------------- */
.alert,
.error, p.error,
.notice,
.success,
.infomessage, .infomessage a,
.errorbox {
    font-size: var(--font-size-body);
}

.error:before, .notice:before, .success:before, .infomessage:before, .errorbox:before {
    top: 14px;
}

/* -- 3.5 Neutral message ------------------------------------- */
.neutralmessage {
    font-size: var(--font-size-body);
    color: var(--content-text-color);
}

.neutralmessage:before {
    top: 8px;
}

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

/* -- 3.7 Pagination ------------------------------------------ */
.pagination a.selected {
    background-color: var(--secondary-color);
}

.pagination > li > a:active, .pagination > li > a:focus, .pagination > li > a:hover {
    background-color: var(--dark-red);
    color: var(--primary-color-text);
}

/* -- 3.8 Forms ----------------------------------------------- */
.form-control,
select,
select.form-control {
    font-size: var(--font-size-body) !important;
}

/* -- 3.9 Filters --------------------------------------------- */
@media (min-width: 769px) {
    .filterTheme, .filterPresta {
        padding-left: 15px;
    }
}

/* ============================================================
    4. PAGE HEADER
   ============================================================ */
/* -- 4.1 Header brand --------- */
.header-brand-title {
    float: right !important;
}

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

.navbar .navbar-right li a {
    min-height: var(--navbar-height-big-screens);
}

header .navbar .navbar-toggle:active, header .navbar .navbar-toggle:focus, header .navbar .navbar-toggle:hover,
.navbar a.search-access:active, .navbar a.search-access:focus, .navbar a.search-access:hover,
li.connectionButtonRightMenu:active, li.connectionButtonRightMenu:focus, li.connectionButtonRightMenu:hover,
.navbar .navbar-right li a:active, .navbar .navbar-right li a:focus, .navbar .navbar-right li a:hover,
ul.nav.navbar-nav.navbar-right .help:active, ul.nav.navbar-nav.navbar-right .help:focus, ul.nav.navbar-nav.navbar-right .help:hover,
ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkMessaging:active, ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkMessaging:focus, ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkMessaging:hover,
ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkMyDocuments:active, ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkMyDocuments:focus, ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkMyDocuments:hover,
ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkTopLogout:active, ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkTopLogout:focus, ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkTopLogout:hover
{
    background-color: var(--dark-red) !important;
}

ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkMessaging:active i, ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkMessaging:focus i, ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkMessaging:hover i,
ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkMyDocuments:active i, ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkMyDocuments:focus i,ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkMyDocuments:hover i,
ul.nav.navbar-nav.navbar-right .help:active i, ul.nav.navbar-nav.navbar-right .help:focus i, ul.nav.navbar-nav.navbar-right .help:hover i,
ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkTopLogout:active i, ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkTopLogout:focus i, ul.nav.navbar-nav.navbar-right #ctl00_ctl00_TopMenu_lnkTopLogout:hover i {
    color: var(--primary-color-text) !important;
}

/* Toggle for side navigation panel */
header .navbar .navbar-toggle {
    padding: 6px;
}

/* Search box */
.navbar .search button {
    align-items: center;
    display: flex;

    padding: unset;
    width: unset;
}

.navbar .search button i {
    margin: 0 0 2px 0;
}

#TopMenuServiceSearchResults i {
    color: var(--secondary-color);
}

#TopMenuServiceSearchResults a span {
    background: var(--secondary-color) !important;
}
#TopMenuServiceSearchResults a span img {
    margin-top: 7px;
    width: 16px;
}

/* Login button */
li.connectionButtonRightMenu {
    display:flex;
    align-items: center;
}

li.connectionButtonRightMenu a.top-login-button, li.connectionButtonRightMenu a.top-login-button:active, li.connectionButtonRightMenu a.top-login-button:focus, li.connectionButtonRightMenu a.top-login-button:hover  {
    background: #FFFFFF !important;
    font-size: var(--font-size-p);
    min-height: fit-content !important;
}

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


/* Small screens */
@media (max-width: 990px) {
    .navbar a.search-access {
        display: inline-block;
        height: 100%;
        line-height: var(--navbar-height-big-screens);
        top: unset;
    }

    .navbar a.search-access i {
        position: relative;
        top: 2px;
    }
}

@media(max-width:768px){
    .navbar .navbar-right li a {
        min-height: var(--navbar-height-small-screens);
    }

    .navbar a.search-access {
        line-height: var(--navbar-height-small-screens);
    }
}

/* -- 4.3 Dropdown menu --------- */
/* Profile box with user name and logo*/
.profilbox .dropdown-toggle.user-nav:active, .profilbox .dropdown-toggle.user-nav:focus, .profilbox .dropdown-toggle.user-nav:hover {
    background-color: var(--dark-red) !important;
    color: var(--primary-color-text) !important;
}

.navbar .navbar-right li a:active .profile-picture-container, .navbar .navbar-right li a:focus .profile-picture-container,
.profilbox.open .profile-picture-container,
.profilbox:hover .profile-picture-container,
#allAccountOfProfil a .profile-picture-container-user-menu {
    background-color: #ffffffb8;
}

/* Others */
.dropdown-menu i.fa-chevron-right {
    color: var(--primary-color-text);
}

header .dropdown-menu a,
.navbar .navbar-right li span.use-gv-as,
#allAccountOfProfil a {
    background-color: var(--secondary-color);
    color: var(--primary-color-text) !important;
}

.profilbox.open .dropdown-toggle.user-nav,
.navbar .navbar-right li.open a:active, .navbar .navbar-right li.open a:focus, .navbar .navbar-right li.open a:hover,
#allAccountOfProfil a.current,
#allAccountOfProfil a:active, #allAccountOfProfil a:focus, #allAccountOfProfil a:hover {
    background-color: var(--dark-red) !important;
    color: var(--primary-color-text) !important;
}

#liLnkLogout i {
    color: var(--primary-color-text);
}

.navbar .navbar-right li span.use-gv-as{
    padding-top:16px;
}



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

.breadcrumb a:active, .breadcrumb a:focus, .breadcrumb a:hover {
    color: var(--content-text-color);
    filter: brightness(150%);
}

.breadcrumb a:active:has(i.fa-home), .breadcrumb a:focus:has(i.fa-home), .breadcrumb a:hover:has(i.fa-home) {
    filter: brightness(150%);
    text-decoration: none;
}

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

#main-nav a {
    color: var(--text-grey);
}

#main-nav a:active, #main-nav a:focus, #main-nav a:hover {
    font-weight: bold;
}

#main-nav li.selected a {
    background-color: var(--primary-color);
    color: black;
    font-weight: bold;
}

/* ============================================================
    6. FOOTER
   ============================================================ */
footer {
    color: var(--footer-text-color);
}

footer .logoFooter,
footer .certificateFooter {
    display: none;
}

footer a, footer a:active, footer a:focus, footer a:hover{
    color: var(--footer-text-color);
    text-decoration-line: none;
}

.navFooter ul li {
    margin: 0 20px 15px 20px;
    width: unset;
}

@media(max-width: 768px){
    width: calc(50% - 30px);
}

.linksFooter a:before {
    background-color: var(--secondary-color);
}

.rightFooter {
    display: none;
}

/* ============================================================
    7. PRESTATION CATALOGUE
   ============================================================ */
/* -- 7.1 Filters --------------------------------------------- */
.filterHomeCatalogue label.hide-desktop {
    display: inline-block;
}

.filterHomeCatalogue select {
    border-color: #cecece;
}

.filterHomeCatalogue select option.theme {
    font-weight: unset;
}

/* -- 7.2 Tiles in general ------------------------------------- */
.prestation-item .prestation-icon {
    background-color: var(--secondary-color) !important;
    min-height: 80px;
    height: 80px;
}

.prestation-item .prestation-icon img {
    padding: 15px 0;
}

.prestation-item .desc {
    color: var(--secondary-color) !important;
}

.prestation-item .prestation-title {
    height: 82px;
    display: flex;
    justify-content: center;
    padding: 12px 2px 12px 2px;
}

@media (min-width: 1281px) and (max-width: 1600px) {
    .prestation-item .prestation-title{
        height: 100px;
    }
}

@media (min-width: 991px) and (max-width: 1280px) {
    .prestation-item .prestation-title{
        height: 120px;
        hyphens: auto;
        overflow-wrap: break-word;
    }
}

@media (max-width: 990px) {
    .prestation-item .prestation-title {
        color: var(--content-text-color) !important;
        justify-content: unset;
    }

    .prestation-item .prestation-icon {
        height: 100%;
        display: inline-flex;
        align-items: center;
    }

    .prestation-item .prestation-icon img {
        position: unset;
        left: unset;
        top: unset;
        transform: unset;
        margin-left: auto;
        margin-right: auto;
    }

    .presta .prestation-item a.delete.desc.desc-delete.showIcon {
        border-color: var(--secondary-color) !important;
    }
}

/* ============================================================
    8. HOMEPAGE ANONYMOUS USERS
   ============================================================ */
/* -- 8.1 News panel ------------------------------------------ */
.newsCarousel button#btnStartStopCarousel i {
    color: var(--grey-blue-04);
}

.newsCarousel button#btnStartStopCarousel:active i, .newsCarousel button#btnStartStopCarousel:focus i, .newsCarousel button#btnStartStopCarousel:hover i {
    background-color: var(--primary-color);
    border: solid 1px var(--secondary-color);
    border-radius: 4px;
}

.newsCarousel .owl-dots {
    top: -1px;
    background-color: transparent;
}
.newsCarousel .owl-dots button {
    border-color: var(--grey-blue-04);
}

.newsCarousel .owl-dots button:active, .newsCarousel .owl-dots button:focus, .newsCarousel .owl-dots button:hover {
    background-color: var(--primary-color);
    border: solid 1px var(--secondary-color);
}


/* -- 8.2 Create user info panel ------------------------------ */
.create-user-info {
    margin-top: 53px;
}

.create-user-info  h2 {
    margin-top: 0;
    padding-top: 15px;
}

/* ============================================================
   9. HOMEPAGE LOGGED IN USERS
   ============================================================ */
/* -- 9.1 Button to add favorite tiles ------------------------ */
button.setDashboardPresta.selected {
    background-color: var(--grey-blue-02);
    border: none;
}

@media (max-width: 990px) {
    .setDashboardWidget.btn i,
    .setDashboardPresta.btn i {
        color: #000000;
        vertical-align: text-bottom;
    }
}

/* -- 9.3 Favorite tiles -------------------------------------- */
@media (max-width: 990px) {
    .dashboard-prestations-list .prestation-item .prestation-title {
        padding: 2px 2px 2px 35px !important;
    }
}

/* -- 9.2 Tiles to be added to dashboard ---------------------- */
li.addPrestation button.buttonAddPrestation {
    padding: 0;
    border-radius: 5px;
    border: 2px solid var(--dark-red);
    box-sizing: border-box;
}
li.addPrestation button.buttonAddPrestation .prestation-icon {
    border-radius: 3px 3px 0 0;
}

li.addPrestation button.buttonAddPrestation:active .prestation-icon, li.addPrestation button.buttonAddPrestation:focus .prestation-icon, li.addPrestation button.buttonAddPrestation:hover .prestation-icon {
    background-color: var(--dark-red) !important;
}

li.addPrestation button.buttonAddPrestation .prestation-icon i {
    color: var(--primary-color-text);
    font-size: 48px;
    padding: 16px 0;
}

@media (max-width: 990px){
    li.addPrestation button.buttonAddPrestation {
        box-shadow: var(--box-shadow);
    }

    li.addPrestation button.buttonAddPrestation .prestation-icon {
        border-radius: 3px 0 0 3px;
        border-top: 2px solid var(--dark-red);
        border-left: 2px solid var(--dark-red);
        border-bottom: 2px solid var(--dark-red);
    }

    li.addPrestation .prestation-icon i {
        position: unset;
        left: unset;
        top: unset;
        transform: unset;
        margin-left: auto;
        margin-right: auto;
    }

    li.addPrestation button.buttonAddPrestation .prestation-title {
        padding-top: 10px !important;
    }
}

li.addPrestation button.buttonAddPrestation .prestation-title {
    border-radius: 0 0 3px 3px;
}

/* -- 9.3 Modal to add favorite tiles ------------------------- */
.prestations-list .theme-item a {
    background-color: var(--secondary-color);
    color: var(--primary-color-text)
}

.prestations-list .theme-item a:active, .prestations-list .theme-item a:focus, .prestations-list .theme-item a:hover {
    background-color: var(--dark-red);
}

/* -- 9.4 Sidebar tools --------------------------------------- */
.panel-tools.dashboard-tools .btn.btn-thin.btn-full {
    background-color: var(--grey-blue-02);
    color: #000000;
    border: none;
}

.panel-tools.dashboard-tools .btn.btn-thin.btn-full:active, .dashboard-tools .btn.btn-thin.btn-full:focus, .dashboard-tools .btn.btn-thin.btn-full:hover {
    background-color: var(--primary-color);
    color: #000000;
    border: none;
}

.panel-tools.dashboard-tools .btn.btn-thin i {
    color: white !important;
}

/* Remove the custom icon by which Artionet has replaced the initial icon */
.fa-catalog-custom {
    background-color: unset;
    mask-image: unset;
    -webkit-mask-image: unset;
}

.fa-catalog-custom:before {
    visibility: visible;
}

/* Remove Notification label on nav bar */
.navbar .navbar-right li a.nav-icon.nav-documents span, .navbar .navbar-right li a.nav-icon.nav-messages span.ico {
    display: none !important;
}

/* ============================================================
    10. FAQ PAGES
   ============================================================ */
/* -- 10.1 Search panel --------------------------------------- */
.mainsearch .form-inline {
    background: var(--primary-color);
}

.mainsearch .btn.secondary:active, .mainsearch .btn.secondary:focus, .mainsearch .btn.secondary:hover {
    background-color: var(--grey-blue-02);
    filter: brightness(70%);
}

/* -- 10.2 Page content --------------------------------------- */
.BlocHtml ul li a {
    color: var(--content-text-color);
    text-decoration-color: var(--content-text-color);
}

.BlocHtml ul li a:active, .BlocHtml ul li a:focus, .BlocHtml ul li a:hover {
    color: var(--secondary-color);
    text-decoration-color: var(--secondary-color);
}

.container-fluid main .row .content .listing .row .item a img {
    display: none;
}

/* ============================================================
    11. TOS
   ============================================================ */
/* -- 11.1 TOS at profile creation ---------------------------- */
/* Deactivate button to download TOS */
.TOS .actionButtonsTOS .btn.secondary {
    display: none;
}

/* -- 11.2 TOS page ------------------------------------------- */
.DynamicTOS legend.legendForm {
    border: none;
}

.TOS p,
.DynamicTOS p {
    margin-top: 10px;
}

.TOS p:has(strong),
.DynamicTOS p:has(strong) {
    margin-top: 20px;
}


/* ============================================================
    12. MAILBOX
   ============================================================ */
/* -- 12.1 Desktop overview ----------------------------------- */
/* Filters */
.presentation-bar span,
.presentation-bar a {
    font-size: var(--font-size-body);
}

/* Table head */
.formcontent .heavy th {
    background: var(--secondary-color);
}

/* Selected message */
.messageTable tr.selected *:not(.menuMessages *, th, .favoriteMessagePill, .newMessagePill, .importantMessagePill, .attachmentMessagePill, .btnMenuMessages) {
    color: var(--content-text-color) !important;
}

/* Title of a message */
.titleMessage {
    color: var(--content-text-color);
}

.messageTable .unread .titleMessage,
.messageTable tr.selected.unread .titleMessage * {
    color: var(--secondary-color) !important;
}

/* Action menu */
.elementMenuMessages:active, .elementMenuMessages:focus, .elementMenuMessages:hover {
    background-color: var(--primary-color);
}

/* -- 12.2 Mobile overview ------------------------------------ */
.msg-list li.selected .msg-header span,
.msg-list li.selected .msg-content span,
.msg-list div.selected .msg-header span,
.msg-list div.selected .msg-content p span,
.msg-list .selected .msg-content{
    color: inherit !important;
}

.selected .document-sender,
.selected .msg-sender,
.msg-list div.selected .msg-content span.dateMobile {
    color: #000000;
}

/* -- 12.3 Desktop - Detail of a message ---------------------- */
.labelSenderName, .labelPrestationName {
    color: #000000;
}

.MailboxDetail .prestationName,
.MailboxDetail .senderName,
.MailboxDetail .message-left {
    color: var(--content-text-color);
}


/* ============================================================
    13. PROFILE PAGE
   ============================================================ */
/* -- 13.1 Coordinates section -------------------------------- */
.btn.secondary.externalIDPButton i, .btn.secondary.externalIDPButton:active i, .btn.secondary.externalIDPButton:focus i, .btn.secondary.externalIDPButton:hover i {
    color: var(--primary-color-text);
    margin-left: 5px;
}

/* -- 13.2 Upload profile image section ----------------------- */
/* Hide profile image upload - Warning, there are no class over the formtab, so we have to count the number of children.*/
.EditCustomer .contentTabs .formtab:nth-child(6) {
    display: none;
}

/* -- 13.3 Session duration ----------------------------------- */
.slider.sessionTimeout {
    background-color: var(--content-text-color);
}

.slider::-webkit-slider-thumb { /* should be separated rules */
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--secondary-color);
    cursor: pointer;
}

.slider::-moz-range-thumb { /* should be separated rules */
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--secondary-color);
    cursor: pointer;
}

/* -- 13.4 Account deletion section ---------------------------- */
.deleteAccountButton {
    background-color: var(--secondary-color) !important;
    border: 3px solid #000000 !important;
}

.deleteAccountButton:active, .deleteAccountButton:focus, .deleteAccountButton:hover {
    background-color: var(--dark-red) !important;
}

/* -- 13.5 Notifications -------------------------------------- */
.notificationPage input:focus + .slider,
.delegate-procurations input:focus + .slider {
    box-shadow: unset;
}

.notificationPage ul.notificationPrestation li {
    display: block;
}

/* -- 13.6 Force Button color --------------------------------  */
.EditCustomer .contentTabs .btn.secondary{
    background-color: var(--secondary-color);
    color: var(--primary-color-text);
}

/* ============================================================
    14. ACTIVITY DASHBOARD PAGE
   ============================================================ */
.fullActivitesList tr td,
.historyTitle,
.historyContent
{
    color: var(--content-text-color);
}

/* ============================================================
    15. BUSINESS CASES PAGE
   ============================================================ */
.requestItem {
    color: var(--content-text-color);
}

.detail-business-cases .row div.contact-bloc-business-cases-detai {
    display: none;
}

/* ============================================================
    15. PROCURATIONS (= POWER OF ATTORNEY)
   ============================================================ */
/* -- 15.1 Dashboard ------------------------------------------ */
#search-procuration + button {
    background-color: var(--secondary-color);
}

#search-procuration + button:active, #search-procuration + button:focus, #search-procuration + button:hover {
    background-color: var(--dark-red);
}

#search-procuration + button i {
    margin: 0;
}

.procuration-list-table td,
.procuration-list-table td.name-proc-list {
    color: var(--content-text-color) !important;
}

.procuration-list-table tr.selected *:not(.menuMessages *, .status-proc-list *, th, .btnMenuMessages i) {
    color: var(--content-text-color) !important;
}

.procuration-list-table tr.selected .btnMenuMessages i {
    color: var(--secondary-color) !important;
}
button.btnMenuProcurations {
    background-color: transparent;
}

@media (max-width: 768px) {
    .proc-mobile-list {
        color: var(--content-text-color);
    }
    .btnMenuProcurations:active, .btnMenuProcurations:focus, .btnMenuProcurations:hover {
        background-color: var(--primary-color);
    }

    .btnMenuProcurations:active i, .btnMenuProcurations:focus i, .btnMenuProcurations:hover i {
        color: var(--dark-red);
    }
}

/* -- 15.2 Create procuration page ---------------------------- */
.listing-presta-procurations .item.presta {
    border-bottom: none;
}
.listing-presta-procurations .item.presta .prestation-item a {
    box-shadow: var(--box-shadow);
    height: fit-content;
}

.listing-presta-procurations .item.presta .prestation-item a .prestation-icon {
    height: 82px;
    width: 58px;
}
.listing-presta-procurations .item.presta .prestation-item a .prestation-icon img {
    width: 35px;
}

@media (min-width: 1281px) and (max-width: 1600px) {
    .listing-presta-procurations .item.presta .prestation-item a .prestation-icon {
        height: 100px;
    }
}

@media (min-width: 991px) and (max-width: 1280px) {
    .listing-presta-procurations .item.presta .prestation-item a .prestation-icon {
        height: 120px;
    }
}

@media (max-width: 768px) {
    .listing-presta-procurations .prestation-icon {
        width: 50px !important;
        height: 100% !important;
    }
}

.listing-presta-procurations .item.presta .prestation-item a .prestation-title {
    justify-content: unset;
    text-align: left;
    padding: 2px 2px 2px 35px !important;
}

.listing-presta-procurations .prestation-item .desc {
    right: 10px;
}

.procuration-actions {
    border-top: none;
    margin-top: 0;
}

ul.listing-presta-procurations li {
    display: block;
}

/* -- 15.3 Accept token page ---------------------------------- */
/* Yes the classes names don't refer to procuration ... but it's like that in HTML */
.form-create-company-confirmation-list * {
    color: var(--content-text-color);
}

.form-create-company-confirmation-image {
    margin-top: 10px;
    margin-bottom: 10px;
}

.form-create-company-confirmation-image img {
    width: 180px;
}

/* -- 15.4 Details of a procuration --------------------------- */
.form-horizontal .form-group {
    margin-left: 0;
}

.forminfos aside .panel {
    display: none;
}

/* ============================================================
   16. MODALS
   ============================================================ */
/* -- 16.1 Connection modales --------------------------------- */
.connectionModal .prestation-item .prestation-title {
    display: flex;
    flex-direction: column;
}

/* ============================================================
   17. EGOVHUB
   ============================================================ */
/* -- 17.1 General -------------------------------------------- */
.egh-body {
    color: var(--content-text-color) !important;
}

.egh-form-group label {
    font-weight: 400;
}

.main-content .egh-redirect-loader-modal {
    position: fixed;
}

/* -- 17.2 Buttons -------------------------------------------- */
.egh-button,
.egh-button#consent--reject{
    background-color: var(--grey-blue-02) !important;
    color: #000000 !important;
}

.egh-button:active, .egh-button:focus, .egh-button:hover,
.egh-button#consent--reject:active, .egh-button#consent--reject:focus, .egh-button#consent--reject:hover{
    background-color: var(--primary-color) !important;
    color: #000000 !important;
}

.egh-button[disabled],
.egh-button#consent--submit[disabled] {
    filter: grayscale(80%) brightness(250%);
}

.egh-button#consent--submit {
    background-color: var(--secondary-color) !important;
    color: var(--primary-color-text) !important;
}

.egh-button#consent--submit:active, .egh-button#consent--submit:focus, .egh-button#consent--submit:hover {
    background-color: var(--dark-red) !important;
    color: var(--primary-color-text) !important;
}

/* -- 17.3 Checkbox ------------------------------------------- */
.egh-body input[type="checkbox"] {
    accent-color: var(--secondary-color);
}

/* -- 17.4 Leistungsverzeichnis pages ------------------------- */
.egh-body div#LeistungsVerzeichnisId .col-sm-12 h3 {
    font-weight: bold;
}

.egh-body #LeistungsVerzeichnisId,
.egh-body #LeistungsVerzeichnisId .col-md-12 p.mb-0 {
    padding-top: 0;
}

.egh-body #LeistungsVerzeichnisId a.lv-previousRedirect{
    vertical-align: sub;
}