/*
    Algemene base styling voor Webportal
    - Structuur (geen thema)
    - Toonbare basic widget layout

    - Per widget een context class, voor specifiek stylen van dit widget
    - Generieke classes voor row/kolom indelingen, invoer formulieren (labels en inputs), SF widget designer.
    - Classes voor specifieke velden (daarvoor moet vaak de class op de parent/container div)

    - Zet in elke axy-col een div ".axy-col-content" voor background colors met padding.
*/

/* Voorbeeld responsive columns (2-col vanaf iPad) */
/* @@media (min-width: 1000px) {
        .axy-news-preview-list .axy-col {
            min-width: 50%;
        }
    }
*/

/* Standaard afmetingen hanteren inclusief de border */
*, :after, :before
{
    box-sizing: border-box;
}
/* ================================== Reset ================================== */
.site-inner button
{
    background-color: initial;
    border: none;
}

/* ============================= Kendo / Bootstrap hotfixes ============================= */

/* Standaard geneste containers geen padding geven. Bij AxyFullWidth preset juist de padding van de buitenste container halen. */
.site-inner .container .container
{
    padding-left: 0;
    padding-right: 0;
}

/* Kendo popups vallen anders buiten beeld op mobiel */
.k-widget.k-window
{
    max-width: 98%;
}

/* negeer bootstrap breadcrumb margin */
.site-inner .breadcrumb
{
    margin-bottom: 0;
}

.k-icon.k-svg-icon svg
{
    /* svg icon wordt gigantisch */
    max-width: 1.5em;
}


/* Beperk mega backend images*/
.sfPageEditor img
{
    max-height: 300px;
}

/*.axy-container-registration*/
.axy-input-changed
{
    /* Grove fix zodat asterisk ernaast past op 1 regel //TODO: */
    max-width: 90%;
}

/* Geen alt tekst bij SF download list */
.site-inner .media .media-left
{
    display: none;
}

/* Paging van newslist */
ul.pagination > li > a
{
    margin-left: .2em;
    margin-right: .2em;
}

.k-grid-pager .k-pager-numbers-wrap button,
.k-pager-numbers .k-button-flat-primary
{
    color: #424242;
}

/* numeric input spinners */
.site-inner .k-input-md .k-spinner-increase,
.site-inner .k-input-md .k-spinner-decrease
{
    margin: 0;
}

/* Kendo grid alternating rows default uitzetten */
.k-grid .k-table-row.k-table-alt-row
{
    background-color: initial;
}

/* Kendo 'wrap' die door een font-size van 170px veel te groot was */
.site-inner .k-upload-button-wrap input {
    font-size: 1em !important;
}

/* ================================ Convenience ================================ */
.center-text {
    text-align: center;
}

.axy-invisible
{
    visibility: hidden;
}

.axy-hidden
{
    display: none;
}
/* ============================ Axy-row & axy-col indeling. ============================ */

.axy-row
{
    display: flex;
    flex-direction: row; /* Rijen, zolang axy-col min-width 100% is. 50% is 2 col etc. */
    flex-wrap: wrap;
}

.axy-col
{
    flex-basis: 0;
    flex-grow: 1;
    /*min-width: 100%;*/ /* Rijen, zolang axy-col min-width 100% is. 50% is 2 col etc. */
    max-width: 100%; /* Voorkom dat een smalle kolom de hele row in beslag neemt. */
}

.axy-col-content.padding
{
    padding: 8px;
    margin: 8px;
}

.axy-col .expand
{
    min-width: initial;
}

.axy-col.col-1,
.axy-col.sm-1,
.axy-col.md-1,
.axy-col.lg-1
{
    min-width: 8.03%;
}

.axy-col.col-2,
.axy-col.sm-2,
.axy-col.md-2,
.axy-col.lg-2
{
    min-width: 16.66%;
}

.axy-col.col-3,
.axy-col.sm-3,
.axy-col.md-3,
.axy-col.lg-3
{
    min-width: 25%;
}

.axy-col.col-4,
.axy-col.sm-4,
.axy-col.md-4,
.axy-col.lg-4
{
    min-width: 33.33%;
}

.axy-col.col-5,
.axy-col.sm-5,
.axy-col.md-5,
.axy-col.lg-5
{
    min-width: 41.66%;
}

.axy-col.col-6,
.axy-col.sm-6,
.axy-col.md-6,
.axy-col.lg-6
{
    min-width: 50%;
}

.axy-col.col-7,
.axy-col.sm-7,
.axy-col.md-7,
.axy-col.lg-7
{
    min-width: 58.33%;
}

.axy-col.col-8,
.axy-col.sm-8,
.axy-col.md-8,
.axy-col.lg-8
{
    min-width: 66.66%;
}

.axy-col.col-9,
.axy-col.sm-9,
.axy-col.md-9,
.axy-col.lg-9
{
    min-width: 75%;
}

.axy-col.col-10,
.axy-col.sm-10,
.axy-col.md-10,
.axy-col.lg-10
{
    min-width: 83.33%;
}

.axy-col.col-11,
.axy-col.sm-11,
.axy-col.md-11,
.axy-col.lg-11
{
    min-width: 91.66%;
}

.axy-col.col-12,
.axy-col.sm-12,
.axy-col.md-12,
.axy-col.lg-12
{
    min-width: 100%;
}


/* ========================== Axy tiles met css grid templates ============================ */
.axy-tile-panel
{
    display: grid;
    grid-template-columns: 1fr 1fr; /* 1fr is like an equal fraction */
}

.axy-tile
{
    padding: 8px;
}

/* ============================== Flexbox aligning ================================== */
/* Use this on a div to center horizontally and vertically within a parent element. */
.axy-center
{
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /*flex-direction: column;*/ /* default horizontaal of verticaal? */
    width: 100%;
}

/* ============================ General Widget structure ============================ */
.axy-widget
{
    margin: 8px;
    padding: 8px;
}
.site-inner .axy-popup-window,
.axy-popup-window
{
    position: absolute;
    top: 5%;
    left: 10%;
    right: 10%;
    bottom: 5%;
    background: white;
    z-index: 1000;
    box-shadow: 0 3px 13px -2px black;
    padding: 20px;
    overflow-y: auto;
}
.axy-popup-overlay
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(90,90,90,.2);
    z-index: 500;
    backdrop-filter: blur(3px);
}

/* ============================== Axy news blocks widget met grid indeling ============================== */
.axy-news-preview-list .axy-tile-panel
{
    grid-template-columns: max(25%, 200px) 25% 50%; /* define the columns and their widths: |25%|25%|  50%  | */
}

.axy-news-preview-list .axy-tile.axy-image
{
    grid-column: 1;
    grid-row: 1/6;
}

.axy-news-preview-list .axy-tile.axy-title
{
    grid-column: 2/4;
    grid-row: 1;
}

.axy-news-preview-list .axy-tile.axy-summary
{
    grid-column: 2/4;
    grid-row: 2;
}

.axy-news-preview-list .axy-publication-date
{
    grid-column: 2;
    grid-row: 3;
}

.axy-news-preview-list .axy-author
{
    grid-column: 3;
    grid-row: 3;
}

.axy-news-preview-list .axy-tile.axy-read-more
{
    grid-column: 2/4;
    grid-row: 4;
}

/* image covers the whole area, cropping if needed */
.axy-news-preview-list .axy-image img
{
    object-fit: cover;
    height: 100%;
    width: 100%;
    object-position: center;
    transform-origin: center;
}

/* cap long texts */
.axy-news-preview-list .axy-summary p
{
    text-overflow: ellipsis;
    max-height: 6em;
    overflow: hidden;
}


/* Mobile is basically single column */
@media (max-width: 768px)
{
    .axy-news-preview-list .axy-image img
    {
        object-fit: contain;
        width: initial;
        height: initial;
        max-height: 100%;
        max-width: 100%;
    }

    .axy-news-preview-list .axy-tile.axy-image
    {
        grid-column: 1/4;
        grid-row: 1;
    }

    .axy-news-preview-list .axy-tile.axy-title
    {
        grid-column: 1/4;
        grid-row: 2;
    }

    .axy-news-preview-list .axy-tile.axy-summary
    {
        grid-column: 1/4;
        grid-row: 3;
    }

    .axy-news-preview-list .axy-publication-date
    {
        grid-column: 1/2;
        grid-row: 4;
    }

    .axy-news-preview-list .axy-author
    {
        grid-column: 2/4;
        grid-row: 4;
    }

    .axy-news-preview-list .axy-tile.axy-read-more
    {
        grid-column: 1/4;
        grid-row: 5;
    }
}

/* ============================== Login widgets ============================== */


/* textbox is 150px, kolom moet min-width anders past de asterisk er niet naast. */
.axy-widget-container .axy-container-registration tbody td:nth-child(3)
{
    min-width: 170px;
}

/* Ruimte tussen de invoer en buttons */
.axy-container-login .button-row,
.axy-container-registration .button-row
{
    margin-top: 20px;
}

.axy-container-login .login-wachtwoord-vergeten-uitleg
{
    margin-bottom: 20px;
}

/* ============================== Scenarioplanner ============================== */
/* Ruimte om de scenario buttons voor opslaan, reset, print. */
.axy-container-dossier-scenario .axy-field-caption
{
    margin-top: 0.5em;
}

.axy-container-dossier-scenario .axy-field-caption.axy-caption-align-topside
{
    display: inline-block;
    min-width: 400px;
}

.axy-container-dossier-scenario .scenario-buttons
{
    margin-top: 10px;
    margin-bottom: 20px;
}

.axy-container-dossier-scenario .scenario-table
{
    margin-top: 20px
}

.axy-container-dossier-scenario .input-parameter .k-widget,
.axy-container-dossier-scenario .input-parameter .k-input,
.axy-container-dossier-scenario .input-parameter .k-dropdownlist,
.axy-container-dossier-scenario .input-parameter .k-picker
{
    width: 100%;
    max-width: 350px;
}

.axy-container-dossier-scenario .tabstrip .tab-header
{
    display: none;
}

@media print
{
    .site-inner:has(.axy-container-dossier-scenario) .Header,
    .site-inner:has(.axy-container-dossier-scenario) .header,
    .site-inner:has(.axy-container-dossier-scenario) .Footer,
    .site-inner:has(.axy-container-dossier-scenario) .footer,
    .site-inner .axy-container-dossier-scenario .tabstrip .tab-header,
    .site-inner .axy-container-dossier-scenario .save-scenario-container,
    .site-inner .axy-container-dossier-scenario .col-4
    {
        display: none;
    }
}

.axy-container-dossier-scenario .save-scenario-container
{
    /* witruimte tussen reset button en invoervelden */
    margin-bottom: 10px;
}

/* ============================== Pensioenplanner ============================== */

.axy-container-pensioenplanner
{
    min-height: 700px; /* voorkom screenshake bij editen */
}

/* simpel centreren van de buttons */
.axy-container-pensioenplanner .tabstrip .tab-header
{
    text-align: center;
}
/* Buttons van de tabstrip */
.axy-container-pensioenplanner .tab-button
{
    display: inline-block;
    background-color: initial;
}

/* Ruimte om de scenario buttons voor opslaan, laden, reset. */
.axy-container-pensioenplanner .save-scenario-container button
{
    margin: 10px;
    display: block;
}

.axy-container-pensioenplanner ul.stored-scenario-list li
{
    padding-top: 2px;
    padding-bottom: 2px;
}

.axy-container-pensioenplanner ul.stored-scenario-list li .delete.k-font-icon
{
    min-width: 20px;
}

.axy-container-pensioenplanner ul.stored-scenario-list li .save-name,
.axy-container-pensioenplanner ul.stored-scenario-list li .delete
{
    cursor: pointer;
}

.axy-container-pensioenplanner .input-parameter
{
    padding-top: 6px;
    padding-bottom: 6px;
}

.input-parameter .axy-caption-align-leftside
{
    display: inline-block;
    margin-right: 2px;
}

.input-parameter .axy-caption-align-rightside
{
    display: inline-block;
    margin-left: 2px;
}

.input-parameter .axy-caption-align-topside
{
    display: block;
    margin-bottom: 2px;
}

.input-parameter .axy-caption-align-bottomside
{
    display: block;
    margin-top: 2px;
}

/* Chart en tabel onder elkaar uitlijnen */
.axy-container-dossier-scenario .input-parameter:has(.k-chart) .axy-caption-align-leftside,
.axy-container-dossier-scenario .input-parameter:has(.k-chart) .axy-caption-align-rightside,
.axy-container-dossier-scenario .input-parameter:has(.k-grid) .axy-caption-align-leftside,
.axy-container-dossier-scenario .input-parameter:has(.k-grid) .axy-caption-align-rightside
{
    display: block;
    min-width: initial;
}

.axy-container-dossier-scenario .input-parameter .axy-caption-align-leftside,
.axy-container-dossier-scenario .input-parameter .axy-caption-align-rightside
{
    min-width: 330px; /* uitlijning oude planner invoervelden */
}

.axy-container-pensioenplanner .input-parameter .k-widget
{
    width: 100%;
    max-width: 350px;
}

.axy-container-pensioenplanner .k-widget.k-grid
{
    width: 100%;
    max-width: initial;
}

.axy-container-pensioenplanner label
{
    font-weight: normal;
}

.axy-container-pensioenplanner svg path[fill-opacity="0.4"]
{
    /* transparantie van de grafieken (niet de legenda) */
    fill-opacity: .8;
}

@media print
{
    .site-inner:has(.axy-container-pensioenplanner) .Header,
    .site-inner:has(.axy-container-pensioenplanner) .header,
    .site-inner:has(.axy-container-pensioenplanner) .Footer,
    .site-inner:has(.axy-container-pensioenplanner) .footer,
    .site-inner .axy-container-pensioenplanner .tabstrip .tab-header,
    .site-inner .axy-container-pensioenplanner .save-scenario-container,
    .site-inner .axy-container-pensioenplanner .col-4
    {
        display: none;
    }

    .axy-container-pensioenplanner svg
    {
        /* bugfix voor Firefox print preview */
        fill-opacity: 0;
    }
}

/* Kendo slider heeft labels die onderuit zn voegen valt, bottom margin -1.3em */
.k-widget.k-slider
{
    margin-bottom: 14px;
}


/* numeric text box */
.site-inner .axy-container-pensioenplanner .axy-numeric-box
{
    background-color: #fff;
    background-image: none;
    width: 100%;
}

.site-inner .axy-container-pensioenplanner .axy-numeric-box:focus
{
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 30%);
}

.site-inner input[type=number]::-webkit-inner-spin-button,
.site-inner input[type=number]::-webkit-outer-spin-button
{
    opacity: 1;
    width: 50px;
    position: absolute;
    top: 0;
    right: 0px;
    height: 100%;
}


/* ====================== DossierScenarioWidget v2 ====================== */
.axy-container-dossier-scenario-v2 .input-parameter table,
.axy-container-dossier-scenario-new .input-parameter table
{
    /* Table uitrekken. Eventueel beperken met max-width op de widget/kolom. */
    width: 100%;
}

/* ====================== DossierScenarioWidget New ====================== */
.axy-dossier-scenario-v2-tabcontent .k-chart,
.axy-dossier-scenario-v2-tabcontent .k-chart > svg
{
    min-height: 400px;
}

.site-inner .axy-container-dossier-scenario-new .input-parameter
{
    max-width: 270px;
}

.site-inner .axy-container-dossier-scenario-new .input-parameter:has(.k-chart),
.site-inner .axy-container-dossier-scenario-new .input-parameter:has(.k-grid)
{
    max-width: initial;
}

.site-inner .axy-container-dossier-scenario-new .tab-header
{
    display: none;
}

/* ============================== Xtendis document widget ============================== */
.xtendis-documents-container
{
}

.xtendis-version
{
    text-align: end;
}

.xdocument-read
{
    padding-left: 90px;
}

.xtendis-widget-opslaan-text
{
    width: -webkit-fill-available;
}

.xtendis-fit-to-column
{
    width: 80%;
}

/* ============================== UserAccessManagement widget ============================== */
.site-inner .axy-container-useraccessmanagement .axy-selection-button,
.site-inner .axy-container-useraccessmanagement .axy-delete-button
{
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    margin: 0;
    padding: 6px;
    visibility: hidden;
}

.site-inner .axy-container-useraccessmanagement .axy-selection-button:after,
.site-inner .axy-container-useraccessmanagement .axy-delete-button:after
{
    font-family: var(--font-family-font-awesome);
    visibility: visible;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: -12px;
}

.site-inner .axy-container-useraccessmanagement .axy-selection-button:after
{
    content: var(--fa-edit);
}

.site-inner .axy-container-useraccessmanagement .axy-delete-button:after
{
    content: var(--fa-trash);
    color: red;
}

/* ============================== Userloginstatus widget ============================== */
.axy-widget-container .container-loginstatus .loginstatus-doc,
.axy-widget-container .container-loginstatus .loginstatus-wft,
.axy-widget-container .container-loginstatus .loginstatus-logout
{
    padding-left: 10px;
}

/* ============================== EditUserProfile widget ============================== */
.axy-container-edituserprofile .button-row
{
    padding-top: 10px;
}

/* ============================== AxyLifeQuestion widget ============================== */
.axy-container-question-widget button[submit]
{
    text-transform: uppercase;
}

.axy-container-question-widget
{
    margin: 30px;
}

/* ============================== Banner images ============================== */
/*  .axy-banner-image is een div met background-image om banners te tonen. Deze pakken de volle hoogte en breedte in een SF kolom.
        Tip: gebruik een shared ContentBlock met style="background-image:'/images/default-source/{folder}/{image}'".
    .axy-big-image is vergelijkbaar, maar beslaat meestal maar de helft van de pagina breedte.
    Het verschil is dat een banner een maximum hoogte krijgt.
*/

/* Elke kolom waar een banner image direct in staat, moet volle hoogte pakken. */
/*.site-inner .row > div:has(> .axy-banner-image),
.site-inner .row > div:has(> .axy-big-image)*/
.site-inner .row:has(> .axy-banner-image) > div,
.site-inner .row:has(.axy-big-image) > div
{
    display: flex;
    padding-left: 0;
    padding-right: 0;
}
/* Custom background images */
.axy-big-image,
.axy-banner-image
{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 250px;
    min-width: 100%;
    position: relative; /* zodat absolute overlays erin kunnen */
}

.axy-banner-image
{
    height: 100%; /* afbeelding moet groter dan de div kunnen groeien */
    max-height: 350px;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: -15px;
}

/* ============================== Overlays ============================== */
/* In een position:relative container (class="overlay-container" of class="axy-banner-image") kun je position:absolute items zetten die zullen overlappen met bijv. class="overlay left-inside". */
/* <div class="overlay-container">
    <div class="overlay top-inside" />
   </div>
*/
.axy-overlay-container
{
    position: relative;
}

.axy-overlay
{
    position: absolute;
    z-index: 1;
}

/* Voor mobile de overlay eronder zetten met padding en margin. */
@media (max-width: 1000px)
{
    .axy-overlay
    {
        position: relative;
        bottom: 4vw;
        top: 4vw;
        margin-bottom: 6vw;
        left: 4vw;
        right: 4vw;
        margin: 0;
        max-width: 90%;
        min-height: initial;
        padding: 4.5vw;
    }
}

.axy-left-inside
{
    left: 40px;
}

.axy-top-inside
{
    top: 40px;
}

.axy-right-inside
{
    right: 40px;
}

.axy-bottom-inside
{
    bottom: 40px;
}

.axy-left-outside
{
    left: -60px;
}

.axy-top-outside
{
    top: -80px;
}

.axy-right-outside
{
    right: -60px;
}

.axy-bottom-outside
{
    bottom: -80px;
}


.axy-widget-upa-leverancier-create-leverancier
{
    max-width: 600px;
}

.axy-widget-upa-leverancier-create-leverancier .axy-col
{
    width: 50%;
}

.axy-widget-upa-leverancier-create-leverancier .axy-col input
{
    width: 100%;
}


.axy-widget-upa-user-create-user
{
    max-width: 600px;
}

.axy-widget-upa-user-create-user .axy-col
{
    width: 50%;
}

.axy-widget-upa-user-create-user .axy-col input
{
    width: 100%;
}


/* ============================== Navigation ============================== */
/* Bootstrap 5 default overwrite */
.nav-link:focus-visible {
    box-shadow: none;
}

/* Eerste dropdownlaag (lvl 2) */
.axy-navigation-widget-horizontal .dropdown-menu {
    position: absolute;
}

/* Submenu (lvl 3) naast een lvl-2 item */
.axy-navigation-widget-horizontal .dropdown-submenu {
    position: relative;
}

/* Toon lvl-3 submenu bij hover op lvl-2 item */
.axy-navigation-widget-horizontal .dropdown-submenu:hover > .dropdown-menu {
    display: block;
}