@import url('axy_vars_customer.css');


/***************************************************************************/
/* algemeen */

body {
    /* background-color: var(--som-light); */
}

.site-inner {
    font-family: "Trebuchet MS", sans-serif, Arial;
}

.body > .container {
    background: white;
}

/* dit corrigeert een vreemde bootstrap padding */
.header .container,
.body .container,
.footer .container {
    padding: 0;
}

/***************************************************************************/
/* tekst */
h1, h2, h3, h4, h5, .header-h1 {
    color: var(--som-blue);
    margin: 0;
}

h1,
.header-h1 {
    font-size: 2.7em;
    padding: 0.1em 0 0.5em 0;
    font-weight: bold;
}

h2 {
    font-size: 2.2em;
    padding: 0.08em 0 0.3em 0;
}

h3 {
    font-size: 1.8em;
    padding: 0.08em 0 0.3em 0;
}

h4 {
    font-size: 1.5em;
    padding: 0.08em 0 0.3em 0;
}

h5, summary {
    font-size: 1.25em;
    padding: 0 0 0.2em 0;
}

p,
a {
    font-size: 1em;
}

a {
    color: var(--som-blue);
    text-decoration: none;
}

.button-row > a {
    margin: 1em 1em 0 0;
}

/***************************************************************************/
/* deelnemer/werkgever nav helemaal bovenaan */
.header .container .upper-nav .navbar {
    padding: 0;
}

.header .container .upper-nav .navbar .container-fluid .navbar-collapse .navbar-nav .nav-item {
    background: white;
    border-radius: 0 10px 0 0;
    margin: 0.3em 0.5em 0 0;
}

.header .container .upper-nav .navbar .container-fluid .navbar-collapse .navbar-nav .nav-item .nav-link {
    padding: 0.3em 0.7em;
}

.header .container .upper-nav .navbar .container-fluid .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
    background: var(--som-blue);
    color: white;
    border-radius: 0 10px 0 0;
}

/***************************************************************************/
/* loginstatus */
.container-loginstatus {
    justify-content: flex-end;
    display: flex;
    margin-top: 2em;
}

.container-loginstatus > div {
    margin-bottom: 1em;
}

.container-loginstatus a:hover {
    font-weight: bold;
    font-size: 1.1em;
}

.loginstatus-username-pretext {
    display: none;
}

/***************************************************************************/
/* header/banner */
.header .banner {
    /* background-image: url('Images/header_verzamel_gespiegeld.jpg'); */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    /* background-size: cover; */
    padding: 20px 1em;
    position: relative;
    min-height: 30vh;
    /* background: radial-gradient(var(--som-pattern) 15%, transparent 16%, transparent 49%, var(--som-pattern) 50%, transparent 51%),radial-gradient(circle at top left, var(--som-pattern) 10%, transparent 10%, transparent 39%, var(--som-pattern) 40%, transparent 41%),radial-gradient(circle at top right, var(--som-pattern) 10%, transparent 10%, transparent 39%, var(--som-pattern) 40%, transparent 41%),radial-gradient(circle at bottom left, var(--som-pattern) 10%, transparent 10%, transparent 39%, var(--som-pattern) 40%, transparent 41%),radial-gradient(circle at bottom right, var(--som-pattern) 10%, transparent 10%, transparent 39%, var(--som-pattern) 40%, transparent 41%); */
    /* background-size: 2.2em 2.2em; */

    background: linear-gradient(45deg, transparent 49%, var(--som-pattern) 49% 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, var(--som-pattern) 49% 51%, transparent 51%);
    background-size: 2em 2em;
    background-color: var(--som-medium);
    opacity: 1
}

/***************************************************************************/
/* logo header */
.logo-bar > div {
    display: flex;
    background: white;
    justify-content: space-between;
    align-items: center;
    /* flex-wrap: wrap; */
    border-radius: 5px;
    padding: 0.5em 0.8em 0.5em 0;
    height: 4.5em;
    /* border: 3px double var(--som-medium); */
    overflow: hidden;
}

.logo-bar > div .logo-bar-links {
    display: flex;
    align-items: center;
}

.header .banner a:not(.btn) {
    font-size: 15px;
    color: black;
}

.header .banner a:hover {
    color: var(--som-blue);
}

.logo-bar > div .divider {
    padding-left: 0.7em;
    padding-right: 0.7em;
    display: flex;
    align-items: center;
}

.logo-bar .divider:not(:last-of-type) {
    border-right: 1px dotted var(--som-medium);
}

.logo {
    /* logo wil hoe dan ook groter worden dan parent, vandaar set height */
    max-height: 4.8em;
    padding: 0 0.6em;
    object-fit: contain;
}

/***************************************************************************/
/* main-menu (menu onder logo) */
.main-menu {
    background: var(--som-blue);
/*    background: linear-gradient(112deg, var(--som-blue) 65%, green 92%, var(--som-yellow) 100%);*/
    text-transform: uppercase;
    font-weight: bold;
}

.main-menu .navbar {
    padding: 0;
}

.main-menu .navbar-collapse .navbar-nav li {
    padding: 0.3em;
    transition: all 200ms ease-in-out;
}

.main-menu .navbar-collapse .navbar-nav li:hover,
.main-menu .navbar-collapse .navbar-nav li.active {
    background: var(--som-light-yellow);
}

.main-menu .navbar-collapse .navbar-nav li a {
    color: white;
}

.main-menu .navbar-collapse .navbar-nav li:hover a,
.main-menu .navbar-collapse .navbar-nav li.active a {
    color: var(--som-blue);
}

/***************************************************************************/
/* breadcrumb (deels gejat van AxyStandard die uit staat) */
.breadcrumb {
    padding: 0.5em 0 0.5em 2em;
    background: white;
    margin: 0;
}

.site-inner .breadcrumb > li + li:before {
    font-family: var(--font-family-font-awesome);
    content: var(--breadcrumb-divider);
    padding-left: 5px;
    padding-right: 5px;
}

.site-inner .breadcrumb a {
    color: var(--breadcrumb-link-color);
}

.site-inner .sf-breadscrumb.breadcrumb > li:first-of-type > a::after {
    top: 0.4em;
}

/***************************************************************************/
/* card-menu */

.card-menu {
    display: flex;
    background: var(--som-light);
    padding: 3em;
    margin-bottom: 2em;
    border-bottom: 4px solid var(--som-medium);
    border-radius: 0 0 6px 6px;
}

.custom-card {
    flex: 1;
}

/*.custom-card:hover div a p,
.custom-card:hover div a h4 {
    color: var(--som-white);
    transition: color 0.2s ease-in-out;
}*/

.custom-card:hover div .icon-container {
    background: var(--som-blue);
    transition: background 0.2s ease-in-out;
}

.custom-card .icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5em;
    height: 5.5em;
    width: 5.5em;
    border-radius: 50%;
    background: var(--som-light-yellow);
}

.custom-card > div > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.custom-card > div > a > * {
    padding: 0.3em 0;
    margin: 0;
    max-width: 80%;
}

.custom-card .fas {
    font-size: 2.3em;
}

.custom-card:hover .fas {
    color: var(--som-light-yellow);
}

/***************************************************************************/
/* kolom met content block cards op de homepage */
.card-container {
    height: 17vh;
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--som-light);
    transition: background 0.3s ease-in-out;
/*    border-radius: 6px;*/
}

.card-container:hover {
    background: var(--som-light);
}

.card-container > * {
    padding: 1em;
}

.card-container .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-height: 80%;
    max-width: 80%;
}

.card-container .icon-container .fas {
    color: var(--som-blue);
    font-size: 5em;
}

.card-container .card-text {
    flex: 3;
}

/***************************************************************************/
/* tables */

.td-field-caption,
.k-header {
    padding-left: 0.7em;
}

.site-inner .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):hover {
    background-color: var(--som-light-yellow);
}

/***************************************************************************/
/* padding voor columns waar meestal tekst in staat */
.body .col-md-8,
.body .col-md-9,
.body .col-md-6,
.body .col-md-4,
.body .col-md-12 {
    padding: 1em 2em 2em 2em;
}

/***************************************************************************/
/* verschillende widgets */

/* navigation widget */

.site-inner .body .axy-navigation-widget-vertical {
    margin: 0.5em 0;
    user-select: none;
} 

.site-inner .body .nav.flex-column li a {
    display: block;
    background: var(--som-light);
    text-decoration: none;
    color: var(--som-blue);
    padding: 10px 15px;
    border-bottom: 1px dotted var(--som-medium);
    transition: background 200ms ease-in-out;
}

.site-inner .body .nav.flex-column li a:hover,
.site-inner .body .nav.flex-column li.active a {
    background: var(--som-blue);
    color: var(--som-light);
}

/* news widget */
.blokje div.axy-widget.axy-news-preview-list {
    padding: 0;
    margin: 0;
}

.axy-news-preview-list .axy-col-content.padding {
/*    padding: 2em 0;*/
    margin-bottom: 3em;
    border-bottom: 2px solid var(--som-light);
}

.blokje .axy-news-preview-list .axy-col-content.padding {
    margin-bottom: 1em;
}

.axy-publication-date,
.axy-author {
    color: var(--som-medium);
}

/* fix lijst pagina */
.axy-news-preview-list .axy-row {
    /* display: block; */
    flex-direction: column;
}

.list-unstyled li {
    padding: 0.5em 0;
}

.list-unstyled .text-muted {
    color: var(--som-medium) !important;
}


/* form */
.form-container form {
    display: flex;
    flex-direction: column;
    /* max-width: 50%; */
}

.form-container form .sf-fieldWrp {
    display: flex;
    flex-direction: column;
}

.form-group > * {
    margin: 0.2em 0;
}

textarea.form-control {
    min-height: 10em;
    margin-bottom: 0.5em;
}

.form-control:focus {
    border: 1px solid #ccc;
    box-shadow: 0 0 5px #ddd;
}

/***************************************************************************/
/* styles om aan content blocks toe te voegen */
.pensioeninfo-tekst {
    padding-right: 5em;
}

.meer-padding {
    padding: 0 3em;
}

.blokje {
    background: var(--som-light);
    padding: 2em;
    margin-bottom: 1em;
    border-bottom: 4px solid var(--som-medium);
    border-radius: 6px;
}
/* voor het verticale kopje-tekst spiegel effect voor bijvoorbeeld de woordenboek pagina (class kan op content block) */
.mirror-wrapper h1,
.mirror-wrapper h2 {
    padding-left: 30%;
}

.mirror-wrapper h3,
.mirror-wrapper h4,
.mirror-wrapper h5 {
    /* padding-left: 1em; */
    max-width: 29%;
    text-align: right;
}

.mirror-wrapper p,
.mirror-wrapper ul {
    padding: 0 10% 0 30%;
    transform: translateY(-1.25em);
}

.mirror-wrapper ul {
    padding: 0 10% 0 31%;
}

/***************************************************************************/
/* zoek/search styling */
.zoek-widget > * {
    margin: 0.5em 0;
}

.zoek-widget .form-group input::placeholder {
    color: transparent;
}

.zoek-widget .form-group input:focus {
    border: 1px solid #ccc;
    box-shadow: 0 0 5px #ddd;
}

.zoek-resultaat {
    padding: 1em 0;
}

.zoek-resultaat .row {
    margin: 0;
}

.zoek-resultaat .col-md-8 {
    padding: 0;
}

.zoek-resultaat h1 {
    font-size: 1.2em;
    font-weight: normal;
    color: var(--som-medium);
}

.zoek-resultaat h1 em {
    font-weight: bold;
}

.zoek-resultaat h3 {
    padding: 0.3em 0;
}

.zoek-resultaat .media {
    padding: 1em 0;
    border-bottom: 1px solid var(--som-light);
}

.zoek-resultaat .pagination {
    justify-content: center;
}

.zoek-resultaat .pagination .active {
    font-weight: bold;
}

.zoek-resultaat .text-muted {
    font-size: 0.9em;
    color: var(--som-medium);
}

/***************************************************************************/
/* searchbar styling die kapot is doordat geen jquery */
.ui-widget {
    background: white;
    border: 1px solid var(--som-medium);
    width: 40%;
    list-style: none;
    outline: none;
    padding: 0;
}

.ui-widget li {
    padding: 0 0 0 0.8em;
    /* transition: all 100ms ease-in-out; */
}

.ui-widget li:hover {
    background: var(--som-blue);
    color: white;
    cursor: pointer;
}
/* anders staat er random een woord in beeld */
.ui-helper-hidden-accessible:last-child {
    display: none;
}

/* pensioen123 */

.axy-container-pensioen123 details > details > summary p {
    font-size: 16px;
}

.axy-container-pensioen123 details {
    padding: 0.5em 1.1em;
}

.axy-container-pensioen123 details > details > summary::before {
    background-color: var(--som-light);
}

.axy-container-pensioen123 details > details > summary:hover::before,
.axy-container-pensioen123 details > details[open] > summary::before {
    background-color: var(--som-medium-blue);
}


/***************************************************************************/
/* Niet-Pensioen-123 accordions */
.niet-pensioen123-wrapper {
    interpolate-size: allow-keywords;
}

.niet-pensioen123-wrapper details {
    overflow: hidden;
}
.niet-pensioen123-wrapper details::details-content {
    block-size: 0;
    opacity: 0;
    overflow: hidden;
    transition: block-size 1s ease-in-out, opacity 0.4s ease-in-out, content-visibility 1s ease-in-out;
    transition-behavior: allow-discrete;
}
.niet-pensioen123-wrapper details[open]::details-content {
    block-size: auto;
    opacity: 1;
}
.niet-pensioen123-wrapper details {
    border-bottom: 1px dotted var(--som-medium);
    padding: 0.8em 1.5em;
    background-color: var(--som-light);
}
.niet-pensioen123-wrapper details[open] > summary {
    margin-bottom: .5em;
}
.niet-pensioen123-wrapper summary {
    user-select: none;
    color: var(--som-blue);
}
.niet-pensioen123-wrapper summary:focus {
    outline: none;
}
.niet-pensioen123-wrapper summary::marker {
    content: "";
}

.niet-pensioen123-wrapper .situatie-container {
    display: flex;
    align-items: center;
    gap: 1em;
    
}
.niet-pensioen123-wrapper .situatie-container img {
    max-height: 64px;
    object-fit: contain;
    border-radius: 6px;
    object-position: top;
}

/***************************************************************************/
/* Downloads pagina */
.media-body .media-preview,
.media-body .media-size {
    display: none;
}

.media-body {
    padding: 0.07em 0;
}

.media-body a.media-url:hover {
    color: var(--som-light-yellow);
}

/***************************************************************************/
/* footer */
.footer a,
.footer p {
    color: white;
    text-decoration: none;
    margin: 0;
}

/* footer indeling NF is anders ten opzichte van SF ('footerplaceholder' er tussen) als dit ooit verandert moet deze dus weer aangepast */
footer .container footerplaceholder > div > div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--som-blue);
    padding: 0.5em;
}