/* Class body staat ook in 960.css.
----------------------------------------------------------------------------------------------------*/

body {
    min-width: 960px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 100%; /* = 12px, 100% of 1.0em is volgens W3C 16px */
    color: var(--color-text)
}

/* IOF-kleurenpalet als CSS-variabelen gebaseerd op de primaire kleur #5bc0de.
----------------------------------------------------------------------------------------------------*/

:root {
    /* Primaire kleuren */
    --color-primary: #5bc0de;
    --color-primary-dark: #199abf;
    --color-primary-darker: #117a8b;
    /* Lichtere varianten */
    --color-light: #a6e3f1;
    --color-lighter: #d0f1f9;
    /* Neutrale basis */
    --color-background: #f8f9fa;
    --color-text: #343a40;
    --color-subtext: #6c757d;
    /* Optioneel extra accent */
    --color-accent: #66d9e8;
    /* Bootstrap backgrounds - https://getbootstrap.com/docs/4.1/utilities/colors/ */
    --color-bootstrap-bg-primary: #007bff;
    --color-bootstrap-bg-secondary: #6c757d;
    --color-bootstrap-bg-success: #28a745;
    --color-bootstrap-bg-danger: #dc3545;
    --color-bootstrap-bg-warning: #ffc107;
    --color-bootstrap-bg-info: #17a2b8;
    --color-bootstrap-bg-light: #f8f9fa;
    --color-bootstrap-bg-dark: #343a40;
    /* Complementary to bootstrap-bg-primary */
    --color-bootstrap-complementary: #fd9c0d;
}

/* START *** Klasse voor de 'snelle' inlogknoppen op default.aspx.
----------------------------------------------------------------------------------------------------*/

/* De basis voor de 'snelle' inlogknoppen. */
.btnSnelleInlog {
    border-radius: 0 10px 0 10px;
    padding: 20px 0;
    cursor: pointer
}

/* En specifieke stijlen per knoptype. */

.btnAccount {
    background-color: var(--color-primary)
}

.btnCombineren {
    background-color: var(--color-primary-dark)
}

.btnCombinaties {
    background-color: var(--color-primary-darker)
}

/* EINDE *** Klasse voor de 'snelle' inlogknoppen op default.aspx.
----------------------------------------------------------------------------------------------------*/

.combinatieTitelEnDetails {
    background-color: var(--color-light);
    border: 1px solid var(--color-primary-darker);
    border-radius: 0 10px 0 10px;
    padding: 25px
}

.footer {
    background-color: var(--color-background);
    border: 1px solid var(--color-primary-darker);
    border-radius: 0 10px 0 10px;
    padding: 5px
}

.inlogArea {
    background-color: var(--color-lighter);
    border: 1px solid var(--color-primary-darker);
    border-radius: 0 10px 0 10px;
    text-align: right;
    float: right
}

.legenda {
    background-color: var(--color-lighter);
    border: 1px solid var(--color-primary-darker);
    border-radius: 0 10px 0 10px;
    padding: 25px
}

.logo {
    background-color: var(--color-light);
    border: 1px solid var(--color-primary-darker);
    transition: transform 0.3s ease, box-shadow 0.3s ease
}

    .logo:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 10px var(--color-primary)
    }

.pagineringKledingkast {
    background-color: var(--color-background);
    text-align: center;
    padding: 5px 0 5px 0
}

.pagineringMijnCombinaties {
    background-color: var(--color-background);
    text-align: center;
    margin-left: 0;
    margin-bottom: -15px;
    padding: 5px 0 5px 0
}

/* Google material icons - styling */

.material-symbols-outlined {
    color: var(--color-primary-dark);
    cursor: default
}

.material-icons {
    color: var(--color-primary-darker);
    border: 1px solid var(--color-subtext);
    transition: background-color 0.5s ease, color 0.3s linear; /* Soepele overgang background en foreground color. */
    cursor: pointer
}

    .material-icons:hover {
        color: var(--color-accent); /* Uiteindelijke voorgrondkleur bij hover. */
        background-color: var(--color-background); /* Uiteindelijke achtergrondkleur bij hover. */
        transform: scale(1.1) /* Icoon iets groter maken bij hover. */
    }

/* Google material icons - styling *** EINDE *** */


/* https://fvsch.com/styling-buttons/ */
.btnPrimary {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    /* invisible, transparant border (will get color on hover/focus) */
    border: solid 1px transparent;
    color: var(--color-text); /* tekstkleur */
    background-color: var(--color-primary)
}

    /* inverse colors on mouse-over and focus */
    .btnPrimary:hover,
    .btnPrimary:focus {
        color: var(--color-primary-darker);
        border-color: currentColor;
        background-color: var(--color-background)
    }

.btnLG {
    font-size: large;
    width: 150px;
    height: 40px;
    cursor: pointer
}

.btnMD {
    font-size: small;
    width: 110px;
    height: 35px;
    cursor: pointer
}

.btnPointer {
    cursor: pointer
}

.btnSM {
    font-size: small;
    width: 80px;
    height: 35px;
    cursor: pointer
}

.btnXL {
    font-size: large;
    width: 225px;
    height: 40px;
    cursor: pointer
}

.btnXXL {
    font-size: large;
    width: 225px;
    height: 80px;
    cursor: pointer
}

/* START *** Styling voor filterpanel op de diverse pagina's. */
.hidden-filters {
    display: none
}

.visible-filters {
    display: block;
    padding-bottom: 10px;
    background-color: var(--color-lighter);
    border: 1px solid var(--color-primary)
}

.filter-container {
    padding: 10px;
    background-color: #f8f9fa; /* --color-background */
    border: 1px solid #343a40; /* --color-text */
    border-radius: 5px;
    max-width: 1200px;
    margin: 8px auto /* Respectievelijk boven- en ondermarge en linker- en rechtermarge (auto = in principe gecentreerd). */
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px
}

.filter-column {
    background-color: white;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #a6e3f1 /* --color-light, #ddd*/
}

    .filter-column h4 {
        margin-top: 0;
        font-size: 14px;
        border-bottom: 1px solid #343a40; /* --color-text */
        background-color: #d0f1f9; /* --color-lighter */
        padding-bottom: 2px
    }

/* h4 instelling die alle <h4>-elementen selecteert behalve de eerste.
            Hiermee wordt een marge boven alle <h4>-elementen geplaatst, behalve
            de eerste en ongeacht of er bv. een <p> of <div> e.d. tussen zit.
        */
h4:not(:first-of-type) {
    margin-top: 20px
}

.checkbox-item {
    display: block;
    margin-top: 2px
}

.checkbox-item-with-count {
    display: inline-block;
    margin-top: 2px
}

.filter-button-container {
    display: flex;
    /*justify-content: flex-start;*/ /* Button links. */
    justify-content: center; /* Button gecentreerd. */
    /*justify-content: flex-end;*/ /* Button rechts. */
    column-gap: 10px;
    margin-top: 20px
}

@media screen and (max-width: 1024px) {
    .filters-grid {
        grid-template-columns: repeat(3, 1fr) /* 2 rijen van 6 wordt 4 rijen van 3 op tablets */
    }
}

@media screen and (max-width: 600px) {
    .filters-grid {
        grid-template-columns: 1fr /* 12 rijen van 1 kolom op mobiel */
    }
}
/* EINDE *** Styling voor filterpanel op de diverse pagina's. */

h1 {
    color: var(--color-primary-darker); /*#9f9e00;*/
    font-size: x-large
}

h2 {
    color: var(--color-primary-dark);
    font-size: medium
}

h3 {
    color: var(--color-text)
}

hr {
    color: var(--color-primary-darker);
    background-color: var(--color-primary-darker);
    height: 0;
    border: none;
    border-top: 0.5px solid var(--color-primary-darker)
}

p {
    line-height: 1.5em;
    margin: 0.5em 0 1em 0
}

/* START *** Classes voor de opsomming van de combinatielijst in MijnCombinaties en voor de subtekst.
----------------------------------------------------------------------------------------------------*/

#combinatielijst ul {
    list-style-type: none;
    margin-left: -39px
}

#combinatielijst li {
    border-top: 1px solid var(--color-primary-dark);
    margin: 2px 0
}

    #combinatielijst li a {
        display: block;
        text-decoration: none;
        padding: 5px
    }

        #combinatielijst li a:hover {
            background-color: var(--color-background)
        }

/* Stylen combinatie subtekst. */
#combinatielijst a span {
    color: var(--color-text);
    line-height: 150%
}

/* Stylen achtergrond geselecteerde combinatie. */
.CombinatieSelected {
    background-color: var(--color-light)
}

/* EINDE *** Classes voor de opsomming van de combinatielijst in MijnCombinaties.
----------------------------------------------------------------------------------------------------*/

.TransparantBG {
    background-color: transparent
}

.ddlClass {
    width: 100%;
    height: 25px;
    font-size: medium
}

.disabled-link {
    pointer-events: none; /* Blokkeert klikken. */
    color: var(--color-subtext) !important; /* Zorgt dat de tekst eruitziet als disabled. */
    text-decoration: none; /* Geen onderstreping. */
    cursor: default; /* Pijltje in plaats van handje. */
    opacity: 0.6 /* Optioneel, voor een 'disabled' look. */
}

.divFlyOut {
    display: none;
    position: absolute;
    width: 175px;
    height: 145px;
    z-index: 190;
    border: 1px solid var(--color-text);
    background-color: var(--color-background);
    font-size: smaller;
    padding: 2px;
    text-align: left
}

.divFlyOutCloseX {
    font-size: 12px;
    padding: 2px
}

/* START *** Klassen voor de Dressboy.
----------------------------------------------------------------------------------------------------*/

.DressBoyFotoFooter {
    margin-top: -20px;
    margin-bottom: 5px
}

.DressBoyFotoJaartalFooter {
    margin-bottom: 5px
}

.DressBoyPanelActief {
    background-color: var(--color-lighter)
}

.DressBoyPanelInactief {
    background-color: var(--color-background)
}

.DressBoyPanelStijlAlgemeen {
    width: 100px;
    height: 135px;
    color: var(--color-primary-dark);
    font-size: 0.8em;
    text-align: center
}

.DressBoyPanelUitlegWijzigFoto {
    width: 100px;
    height: 135px;
    font-size: 1.0em;
    text-align: center
}

/* EINDE *** Klassen voor de Dressboy.
----------------------------------------------------------------------------------------------------*/

.dropshadow-image {
    filter: drop-shadow(3px 3px 5px var(--color-text))
}

.ErrorMessage {
    color: var(--color-bootstrap-bg-danger)
}

.font11px {
    font-size: 11px
}

.font12px {
    font-size: 12px
}

.fontMenu {
    font-weight: normal;
    font-size: x-large;
    color: var(--color-primary-dark); /*#86942A;*/
    line-height: 1em;
    margin: 0;
    padding: 5px
}

/* START *** Lettertype Patrick Hand.
----------------------------------------------------------------------------------------------------*/
/*
    Gebruik geen systeemfont dat niet op alle apparaten of browsers standaard beschikbaar is.
    Er is een licentie voor nodig om zo'n font te gebruiken.
    Als je geen licentie wilt kopen, kun je een gratis Google Fonts gebruiken zoals Patrick Hand.
    Dit werkt op alle apparaten via Google Fonts.
    In de betrokken aspx page dan deze regel opnemen in de <head>:
    <link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
*/

.fontstylePatrickHand {
    font-family: 'Patrick Hand', cursive
}

h1.fontstylePatrickHand {
    font-size: 48px;
    font-weight: 200
}

h2.fontstylePatrickHand {
    font-size: 32px;
    font-weight: 100
}

h3.fontstylePatrickHand {
    font-size: 24px;
    font-weight: 100
}

/* EINDE *** Lettertype Patrick Hand.
----------------------------------------------------------------------------------------------------*/

/* START *** Klassen voor de foto's.
----------------------------------------------------------------------------------------------------*/

.FotodetailsToggleFlexBox {
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.FotodetailsToggleText {
    margin-bottom: 8px;
    margin-right: 5px
}

.FotojaartalTekst {
    font-size: 12px;
    color: var(--color-primary-darker)
}

/* EINDE *** Klassen voor de foto's.
----------------------------------------------------------------------------------------------------*/

/* https://developer.mozilla.org/en-US/docs/Web/CSS/visibility */
/* To both hide an element and remove it from the document layout, set the display property to none instead of using visibility (hidden). */

.Hidden {
    visibility: hidden
}

.Show {
    visibility: visible
}

.imgRobot {
    width: 171px;
    height: 213px
}

.imgSigmund {
    width: 300px;
    height: 235px
}

.imgThumb {
    width: 100px;
    height: 135px
}

.imgZoom {
    width: 300px; /* Maat van de vergrootte afbeelding, standaard thumbbreedte = 100px, standaard thumbhoogte = 135px; beide zijn een veelvoud. */
    height: 405px /* Definiëren van een border werkt niet via de css, wel rechtstreeks in de in aspx. */
}

.menuBGPos {
    background-position: center bottom
}

.menuSelected {
    background-color: var(--color-background);
    border: 1px solid var(--color-primary-darker);
    border-radius: 0 10px 0 10px;
    color: var(--color-text)
}

/* START *** Modal voor titel-hernoemacties, diverse bewaaracties en voor de vergrootte foto.
    Daarbij ook een class voor de sluitknop die op de modal bij de vergrootte foto staat.
----------------------------------------------------------------------------------------------------*/

.modalGenericStyling {
    width: 30%;
    height: auto;
    padding: 25px;
    text-align: center;
    background-color: var(--color-background);
    border: 1px solid var(--color-text);
    z-index: 9999999 !important
}

/*
    Class in gebruik voor de paragraaf rondom de sluitbutton (de 'X') bij de extra vergrootte foto.
    Dit als de gebruiker een mouseover over de foto doet; de sluitknop blijft hierdoor zichtbaar.
*/
.modalClose {
    position: relative;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background-color: var(--color-background);
    border-radius: 4px;
    border: 1px solid var(--color-text);
    padding-top: 15px;
    width: 50px;
    height: 40px
}

.modalBackground {
    background-color: var(--color-text); /* Achtergrondkleur om de modal heen, dus over de rest van het scherm. */
    filter: opacity(80%); /* Achtergrondkleur om de modal heen transparant maken. */
    z-index: 1000 !important
}

/* EINDE *** Modal voor titel-hernoemacties, diverse bewaaracties en voor de vergrootte foto.
----------------------------------------------------------------------------------------------------*/

/* START *** Diverse klassen voor algemene positionering.
----------------------------------------------------------------------------------------------------*/

.floatL {
    float: left
}

.floatR {
    float: right
}

.marginLeft15px {
    margin-left: 15px
}

.marginRight15px {
    margin-right: 15px
}

.marginTop8px {
    margin-top: 8px
}

.padAll5px {
    padding: 5px
}

.padAll25px {
    padding: 25px
}

.padLeft25px {
    padding-left: 25px
}

.txtCenter {
    text-align: center
}

.txtLeft {
    text-align: left
}

.txtRight {
    text-align: right
}

/* EINDE *** Diverse klassen voor algemene positionering.
----------------------------------------------------------------------------------------------------*/

/* START *** Slider voor instellen favoriete combinatie.
----------------------------------------------------------------------------------------------------*/

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-subtext);
    -webkit-transition: .4s;
    transition: .4s
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: var(--color-bootstrap-complementary); /* Is de kleur van het cirkeltje in de slider, in feite de schakelaarknop. */
        -webkit-transition: .4s;
        transition: .4s
    }

input:checked + .slider {
    background-color: var(--color-primary-dark)
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--color-primary-dark)
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px)
}

.slider.round {
    border-radius: 34px /* Afgeronde slider. */
}

    .slider.round:before {
        border-radius: 50%
    }

/* EINDE *** Slider voor instellen favoriete combinatie.
----------------------------------------------------------------------------------------------------*/

.scale-image {
    transition: transform .2s /* Animation */
}

    .scale-image:hover {
        transform: scale(1.5) /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    }

.tbxClass {
    width: 100%;
    height: 25px;
    font-size: medium
}

.FileUploadSelector {
    width: 100%;
    height: 25px;
    font-size: medium;
    border: 1px solid var(--color-text)
}

.txtBold {
    font-weight: bold
}

.txtOverFlowHidden {
    overflow: hidden
}

/* START *** Class om een link die, als je eroverheen hovert, van links naar rechts underlined wordt.
----------------------------------------------------------------------------------------------------*/

.underline-hover {
    position: relative;
    display: inline-block;
    color: var(--color-primary-darker);
    text-decoration: none
}

    .underline-hover::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 0;
        background-color: currentColor;
        transition: width 0.3s ease
    }

    .underline-hover:hover::after {
        width: 100%
    }

/* EINDE *** Class om een link die, als je eroverheen hovert, van links naar rechts underlined wordt.
----------------------------------------------------------------------------------------------------*/