/* 
    INDEX:
	
    Styling of MijnOmgeving, Kim and Registers route. 

    - 1.  BOOTSTRAP	
	- 2.  HOME
	- 3.  REPOSITORY PAGES
	- 4.  Manage Group Pages 
	- 5.  Mijn voorkeuren icon style
*/

/* ==================
    1. BOOTSTRAP
    ================= */
/*grid.less*/
.row {
    margin-right: -1rem;
    margin-left: -1rem;
}

.default-container > h2 {
    padding: 0 1rem;
    margin-top: -1rem;
}

.default-container h3 {
    margin-top: 0rem;
    margin-bottom: .5rem;
    font-size: 1.60181rem;
    line-height: 1.24859;
    font-weight: normal;
}

.list-group-item {
    border: 0;
}

    .list-group-item:first-child,
    .list-group-item:last-child {
        border-radius: 0px;
    }

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-right: 1rem;
    padding-left: 1rem;
}

.pull-right {
    text-decoration: none;
    font-size: 1.1rem;
    line-height: 1.5rem;
    padding: 4px 0px 4px 12px;
    font-weight: normal;
}

.back-button {
    text-decoration: none;
    font-size: 1rem;
    background-color: inherit;
    border-radius: 0px;
    font-weight: normal;
    padding-left: 0px;
}

    .back-button:hover {
        color: #000000;
        background-color: inherit;
        text-decoration: underline;
    }

.home-tocaseslinks .list-group-item {
    padding: 1rem 1rem 1rem 2rem;
}

/* ==================
    2. HOME
    ================= */
.home-jumbotron,
.home-notification,
.home-jumbotron > div,
.home-notification > div {
    margin-bottom: 1.5rem;
}

    .home-jumbotron > div,
    .home-notification > div {
        padding-top: .75rem;
        padding-bottom: .75rem;
    }

    .home-jumbotron > div {
        margin-left: 1rem;
    }

    .home-notification > div {
        margin-left: 1rem;
        margin-right: 1rem;
        width: auto;
    }

.home-tocaseslinks,
.home-quicklinks,
.home-faq {
    margin-bottom: 1rem;
}

.home-jumbotron {
    margin-right: 0px;
}

    .home-jumbotron > div {
        background-color: #F3F3F3;
    }

.home-notification h2 {
    font-size: 1.60181rem;
    line-height: 1.24859;
    font-weight: normal;
    margin-bottom: .75rem;
}

.home-tocaseslinks::before,
.home-quicklinks::before,
.home-faq::before,
.case-attachements-wrapper::before,
.case-actions-wrapper::before,
.kimcase-attachements-wrapper::before,
.kimcase-actions-wrapper::before {
    display: block;
    width: calc(100% - 32px);
    margin-bottom: 1.5rem;
    margin-left: 1rem;
    content: "";
    border-top: 1px solid #E1E1E1;
}

.home-tocaseslinks ul > li {
    background-color: #01689B;
    color: #FFFFFF;
    margin-bottom: 1rem;
}

    .home-tocaseslinks ul > li > a {
        color: #FFFFFF;
    }

.home-quicklinks h3 {
    color: #01689b;
    font-size: 1.80203rem;
}

/* override default styling for widget in order to display icons */
.widget > ul > li:before {
    content: "";
    padding: 0rem;
}

.widget > ul > li > a {
    text-indent: 0rem;
}

.home-quicklinks ul,
.home-faq ul,
.case-actions-wrapper ul,
.kimcase-actions-wrapper ul,
.start-form-list ul,
.back-to-faqlink ul {
    list-style: none;
    padding-left: 0rem;
}

.home-quicklinks li,
.home-faq li,
.case-actions-wrapper li,
.kimcase-actions-wrapper li,
.start-form-list li,
.back-to-faqlink li {
    color: #01689b;
    border: 0px;
    margin-top: .75rem;
}

    .home-faq li:first-child {
        margin-top: 0;
    }

.home-quicklinks a::before,
.home-faq a::before,
.case-actions-wrapper a::before,
.kimcase-actions-wrapper a::before,
.start-form-list ul a::before,
.back-to-faqlink a::before,
.list-group a::before {
    display: inline-flex;
    align-items: center;
    content: "\EA25";
    font-family: "Rijksoverheid Iconen";
    font-size: .7rem;
    font-weight: normal;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 1.75rem;
    text-indent: -0.1em;
    position: absolute;
    top: 1px;
    left: 0;
}

.home-quicklinks li a,
.home-faq li a,
.case-actions-wrapper li a,
.kimcase-actions-wrapper li a,
.start-form-list ul a,
.back-to-faqlink a,
.home-link a,
.list-group-item a {
    position: relative;
    display: block;
    font-size: inherit;
    line-height: inherit;
    padding-left: calc( (8.4px + .75rem) * 1);
}

.list-group-item a {
    min-height: 56px;
    height: 100%;
}

.home-notification > div {
    color: #FFFFFF;
    background-color: #D52B1E;
}

.home-notification a {
    color: #FFFFFF;
    text-decoration: underline;
}

    .home-notification a:hover {
        text-decoration: none;
    }

.home-notification p {
    font-size: 1.125rem;
    line-height: 1.33333;
}

.home-link {
    font-weight: 700;
}

.list-group-item::before {
    margin-left: -20px;
}

/*  =================
    3. REPOSITORY PAGES 
    ================= */

/*OVERZICHTSPAGINA'S - VERGUNNINGEN EN MELDINGEN*/
.title-tripleforms .generic-button {
    background-color: #D52B1E;
    border: 1px solid #D52B1E;
}

/* Request cases */
.panel-heading {
    border-bottom: 2px solid #01689b;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 1rem 0;
}

    .panel-heading h3 {
        margin: 0;
    }

.toggleFilterPanel {
    font-size: 1.1rem;
    line-height: 1.5rem;
    color: #01689b;
    cursor: pointer;
}

    .toggleFilterPanel::after {
        content: '\EA24';
        font-family: 'Rijksoverheid Iconen';
        font-size: 0.7rem;
        padding-left: 0.5rem;
    }

    .toggleFilterPanel.filter-displayed::after {
        content: '\EA23';
    }

/* AFGEBROKEN ZAKEN */
/* icon hover */
table .dataTable.MijnOmgevingDataTables a.dataTable-button:hover {
    background-color: transparent;
    color: #01689b;
    font-size: 15px;
}

/* MESSAGES en MESSAGE pagina */
.message-wrapper, .back-link-wrapper {
    margin-top: 1.5rem;
}

/* MESSAGES PAGE IS NOT USED RIGHT NOW.
a:hover .message-title {
text-decoration: underline;
color: #01496d;
}

.message-list p:last-child:after {
    content: "...";
}


.message-list p:last-child {
    color: #000;
}

.message-item p {
    padding-left: 1.5rem;
}

.message-item:hover {
    text-decoration: none;
    color: #000;
}

.message-item::before {
    content: "\EA25";
    font-family: "Rijksoverheid Iconen";
    position: absolute;
    height: 1.6rem;
    display: inline-flex;
}*/

/* NEW REQUEST AND REPORTS PAGE */
/* make sure this particular span does not have standard styling */
.title-tripleforms h2 span {
    font-size: inherit;
    line-height: inherit;
}

/* Add padding since this is the only place where search filters are not on top of page.*/
.startNewFormTitle {
    padding-top: 1rem;
}

.dataTables_filter {
    position: relative;
}

    /* add search looking glass icon to input field */
    .dataTables_filter label::after {
        content: '\E8B6';
        font-family: 'Material Icons';
        position: absolute;
        top: 1.75rem;
        font-size: 2rem;
        right: 1.25rem;
    }

/* =======================
    4. Manage Group Pages 
   ======================= */

.account-manage-options .btn,
.group-buttons .btn,
.form-group .btn {
    background-color: #01689B;
    color: #FFFFFF;
    border-top-width: 3px;
    border-color: #01689B;
    float: right;
    border-radius: 0;
    min-width: 5.94rem;
    font-size: 1.125rem;
    box-shadow: inset 0 0 0 2px #01689B;
}

    .account-manage-options .btn:active:focus,
    .account-manage-options .btn:active:hover,
    .account-manage-options .btn:focus,
    .group-buttons .btn:active:focus,
    .group-buttons .btn:active:hover,
    .group-buttons .btn:focus {
        color: #C9E1F3;
        box-shadow: inset 0 0 0 2px #01689B;
        background-color: #01689B;
        border-color: #01689B;
    }

.checkbox-color {
    accent-color: #01689B;
}

.group-collapsible::after {
    content: 'delta_omlaag';
    font-family: 'Rijksoverheid Iconen 2';
    color: white;
    float: right;
    font-size: 1.26562rem;
    background-image: none;
    padding-top: 6px;
}

.group-container.bg-user-pages,
.bg-user-pages {
    max-width: 1200px;
    box-shadow: none;
    margin: 0;
    padding: 1rem 0 0 0;
}

    .group-container.bg-user-pages,
    .bg-user-pages h2 {
        font-size: 2.02729rem;
    }

.group-page-content-container .group-active::after {
    content: 'delta_omhoog';
    font-family: 'Rijksoverheid Iconen 2';
    color: white;
    float: right;
    font-size: 1.26562rem;
    background-image: none;
    padding-top: 6px;
}

.group-page-content-container .group-active,
.group-page-content-container .group-collapsible {
    background-color: #01689B;
    color: #FFFFFF;
}

    .group-page-content-container .group-collapsible:focus {
        outline: 2px dotted #000;
        outline-offset: -1px;
        -webkit-box-shadow: inset 0 0 0 2px #fff;
        box-shadow: inset 0 0 0 2px #fff;
    }

.group-page-content-container .category {
    background-color: white;
    border: none;
}

.info-no-targetgroups-selected {
    background-color: #FEF1BC;
}

    .info-no-targetgroups-selected.container {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI0IDI0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZCRDMyNjt9PC9zdHlsZT48Zz48Zz48cmVjdCB4PSIxLjUiIHk9IjEuNSIgY2xhc3M9InN0MCIgd2lkdGg9IjIxIiBoZWlnaHQ9IjIxIi8+PHJlY3QgeD0iMTAuNSIgeT0iNi41IiB3aWR0aD0iMyIgaGVpZ2h0PSI3Ii8+PHJlY3QgeD0iMTAuNSIgeT0iMTUuNSIgd2lkdGg9IjMiIGhlaWdodD0iMiIvPjwvZz48L2c+PC9zdmc+);
        background-position: 3rem -1px;
        background-repeat: no-repeat;
        background-size: 1.7rem;
        background-origin: border-box;
        padding: 2rem 3rem 0 3rem;
    }

    .info-no-targetgroups-selected > a {
        color: #000000;
    }

#PreferenceWarning {
    background-color: #FEF1BC;
}

.profile-pages-header {
    border: 0px;
}

.toelichtingVoorkeur.toelichtingBackground {
    padding-left: 2rem;
    padding-right: 2rem;
    margin: 1.3rem 0 0 0;
    background-position: left 30px top;
    font-size: 1.26562rem;
}

/* =======================
    5. Mijn voorkeuren icon style
	======================= */
.account-container {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
}

    /* user icon and Mijn voorkeuren icon style. use both selectors because classes of <li> items in loggedin/out en Mijn voorkeuren template differ.  */
    .account-container > li.account-button-container > a::before,
    .account-container > li > a.login-button::before {
        font-size: 1.1rem;
        font-feature-settings: "liga" 1;
        line-height: 1;
        position: absolute;
        top: 1.80rem;
        left: 0.25rem;
        bottom: 0px;
        margin-right: 0.5rem;
        padding-right: 0.5rem;
    }

/* loggedin/out icon */
.account-button-container > a.login-button::before {
    content: 'user';
    font-family: 'Rijksoverheid Iconen 2';
}

/* login/out button: add underline on focus, remove border bottom on focus  */
.account-container li a.login-button:focus {
    border-width: 0;
    text-decoration: underline;
}

/* Mijn voorkeuren icon */
.account-button-container > a::before {
    content: 'settings';
    font-family: 'Material Icons';
}

/* Don't do margin-left if there's a toolbar element before the account-container which does margin-left */
.toolbar + .account-container {
    margin-left: 0;
}

#closed-menu-text {
    display: none;
}