body {
    /* Door de achtergrondkleur op de body in te stellen en niet op de header, krijgt de eventuele ruimte onder de footer ook in dezelfde kleur. */
    background-color: #1a68ad;
    /* Het framework zet 5px padding op de body. */
    padding: 0;
}

    body.Popup {
        background-color: White !important;
    }

        body.Popup div.container_header {
            display: none;
        }



h2,
h3,
p,
p a,
label,
div.debuginfo * {
    color: White;
}

div.debuginfo .highlight,
div.debuginfo .highlight * {
    color: Black;
}

body.Popup h2,
body.Popup h3,
body.Popup p,
body.Popup p a,
body.Popup label,
body.Popup div.debuginfo * {
    color: Black;
}


div.gtiheader span#gtiheaderleft,
div.gtiheader div#gtiheadermiddle,
div.gtiheader span#gtiheaderright,
div.gtifooter span#gtifooterleft,
div.gtifooter div#gtifootermiddle,
div.gtifooter span#gtifooterright {
    position: absolute;
    /* Nodig om van de spans de hoogte en breedte te kunnen instellen. */
    display: block;
}

div.gtiheader span#gtiheaderleft,
div.gtiheader span#gtiheaderright,
div.gtifooter span#gtifooterleft,
div.gtifooter span#gtifooterright {
    width: 50px;
    background-repeat: no-repeat;
}

div.gtiheader div#gtiheadermiddle {
    /* Breedte van de linker afbeelding. */
    left: 50px;
    /* Breedte van de rechter afbeelding. */
    right: 50px;
    background-repeat: repeat-x;
}


div.gtiheader span#gtiheaderleft,
div.gtifooter span#gtifooterleft {
    left: 0;
}

div.gtiheader span#gtiheaderright,
div.gtifooter span#gtifooterright {
    right: 0;
}

div.gtifooter div.left, div.gtifooter div.right {
    width: 300px;
    float: left;
}

div.gtifooter div.right {
    float: right;
}

div.gtifooter div.center {
    left: calc(50% - 210px);
    position: absolute;
    width: 420px;
    line-height: 43px;
    vertical-align: middle;
    text-align: center;
}

/* Header */
/* ====== */
div.gtiheader,
div.gtiheader span#gtiheaderleft,
div.gtiheader div#gtiheadermiddle,
div.gtiheader span#gtiheaderright {
    background-color: #1b3d6e;
    /* Niet enkel de outer div, maar ook de geneste spans en divs, omdat op die elemeten de background-image onderaan gepositioneerd wordt. */
    height: 99px;
}


    div.gtiheader span#gtiheaderleft,
    div.gtiheader div#gtiheadermiddle,
    div.gtiheader span#gtiheaderright {
        background-position: left bottom;
    }


/* Inner header */
/* ============ */

div#gtiheaderinner {
    width: 1002px;
    margin: 0 auto;
    height: 75px;
    position: absolute;
    left: 110px;
}

    div#gtiheaderinner h1,
    div#gtiheaderinner h2 {
        height: 72px;
    }

    div#gtiheaderinner h1,
    div#gtiheaderinner div.gtistatus,
    div#gtiheaderinner div.gtionderhoud {
        padding-top: 5px;
        float: left;
    }

    div#gtiheaderinner h2 {
        float: right;
        /* Zelfde als de hoogte van h2. */
        line-height: 72px;
        vertical-align: middle;
        font-size: 20px;
        font-style: italic;
        font-weight: bold;
        text-align: right;
        /* Als de tekst over meerdere regels wordt weergegeven, verbergen die vanaf de tweede regel. */
        overflow: hidden;
    }

        div#gtiheaderinner h2.small {
            /* Als er een status-info weergegeven wordt, de lengte van de titel beperken. */
            width: 170px;
        }

    div#gtiheaderinner h1 {
        text-indent: -5000px;
        width: 182px;
        background-image: url("Images/gtitool.png");
        background-repeat: no-repeat;
    }

        div#gtiheaderinner h1.testenv {
            background-image: url("Images/gtitool_test.png");
        }

    div#gtiheaderinner div.gtistatus,
    div#gtiheaderinner div.gtionderhoud {
        border-radius: 10px;
        margin: 10px 10px 0 40px;
        padding: 5px 10px 5px 10px;
        width: 620px;
        /* Zelfde hoogte als de h1 en h2, exclusief de top en bottom margin en padding van deze div. */
        height: 62px;
        overflow-y: auto;
        position: absolute;
        left: 180px;
    }

    div#gtiheaderinner div.gtistatus {
        z-index: 100;
    }

    div#gtiheaderinner div.gtionderhoud {
        background-color: #F5CA23;
        display: none;
        width: 655px;
        z-index: 99;
    }

    div#gtiheaderinner div.gtistatus p {
        font-size: 9px;
    }

    div#gtiheaderinner div.gtionderhoud span {
        font-weight: bold;
        color: black;
        min-height: 55px;
        display: inline-flex;
        align-items: center;
    }

h3.gtidetailinfo {
    line-height: 43px;
    text-align: center;
    font-size: 21px;
    font-weight: bold;
    position: fixed;
    left: 370px;
    width: 775px;
}

h3.gtidetailinfo,
.btnTerug, .btnVerder {
    position: absolute;
    top: 20px;
}

.btnTerug, .btnVerder {
    top: 18px;
}

.btnTerug {
    left: 336px;
}

    .btnTerug:hover {
        background-image: url(../../Images/arrow_left_hover.png);
    }

.btnVerder {
    left: 1130px;
}

    .btnVerder:hover {
        background-image: url(../../Images/arrow_right_hover.png);
    }

div.container_header {
    background-color: #06a7e2;
    background-color: #1a68ad;
    height: 44px;
    width: 100%;
}

p.statheader {
    position: absolute;
    left: 150px;
    height: 33px;
    width: 800px;
    overflow-x: hidden;
    overflow-y: hidden;
    vertical-align: middle;
    padding: 5px 0;
    font-size: 13px;
    font-weight: bold;
}

div.pnlRefreshInfo {
    text-align: right;
    color: white;
    background-color: #F5CA23;
    float: right;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: black;
    height: 13px;
    width: 241px;
}

div.pnlRefreshInfoTopleft {
    width: 0;
    height: 0;
    border-top: 23px solid #F5CA23;
    border-right: 23px solid transparent;
    float: right;
    text-align: right;
}

div.pnlRefreshInfoTopright {
    width: 0;
    height: 0;
    border-top: 23px solid #F5CA23;
    border-left: 23px solid transparent;
    float: right;
    text-align: right;
}

div.stremmingnotificatieContainer {
    display: none;
}

div.pnlRefreshStremmingInfo {
    text-align: right;
    color: white;
    float: right;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: black;
    height: 13px;
    width: fit-content;
}

div.pnlRefreshStremmingTopleft {
    width: 0;
    height: 0;
    border-top: 23px solid red;
    border-right: 23px solid transparent;
    float: right;
    text-align: right;
}

div.pnlRefreshStremmingTopright {
    width: 0;
    height: 0;
    border-top: 23px solid red;
    border-left: 23px solid transparent;
    float: right;
    text-align: right;
}

div.pnlRefreshStremmingInfo.fwERROR a {
    color: white;
}

/* Menu */
/* ==== */

div.menuContainer {
    /* Voorkomen dat de menu over twee regels komt te staan als het browservenster verkleind wordt. */
    /* overflow: hidden; -> mag niet omdat de menu anders niet meer kan openklappen! */
    height: 25px;
}

    div.menuContainer div.RadMenu {
        position: relative;
        float: right;
    }

        div.menuContainer div.RadMenu ul.rmRootGroup {
            border: none;
        }


            div.menuContainer div.RadMenu ul.rmRootGroup li.rmItem {
                /* border right van het framework overschrijven */
                border: none;
            }

        div.menuContainer div.RadMenu ul li.rmItem a.rmLink span.rmText {
            color: Black;
            font-weight: bold;
        }


/* Verkleuring default/historiek */

div.pnlMenuDefault {
    height: 5px;
    margin-bottom: 10px;
}

    div.pnlMenuDefault,
    div.pnlMenuDefault div.RadMenu,
    div.pnlMenuDefault div.RadMenu ul.rmRootGroup li.rmItem div.rmSlide ul.rmGroup li.rmItem,
    div.pnlMenuDefault div.RadMenu ul.rmRootGroup li.rmItem div.rmSlide ul.rmGroup li.rmItem a.rmLink {
        background-color: #F5CA23;
    }

div.pnlMenuHistory,
div.pnlMenuHistory div.RadMenu,
div.pnlMenuHistory div.RadMenu ul.rmRootGroup li.rmItem div.rmSlide ul.rmGroup li.rmItem,
div.pnlMenuHistory div.RadMenu ul.rmRootGroup li.rmItem div.rmSlide ul.rmGroup li.rmItem a.rmLink,
div.gticontentHistory div.fwGridViewWrap table tr th.defaultHeaderStyle,
div.gticontentHistory div.fwGridViewWrap table tr th.defaultHeaderStyle a {
    background-color: Silver;
}


div.menuContainer div.RadMenu ul.rmRootGroup li.rmItem a.rmExpanded,
div.menuContainer div.RadMenu ul.rmRootGroup li.rmItem div.rmSlide ul.rmGroup li.rmItem:hover {
    background-color: White;
}


div.gticontentHistory div.pnlMenuHistory {
    height: 5px;
    margin-bottom: 10px;
}

/* Page content */
/* ============ */

body input.btnSave {
    background-color: #C0DCC0 !important;
    color: black !important;
}


div.gticontent,
div.gticontent div.stretch {
    background-color: #1a68ad;
    padding-bottom: 16px;
}

    div.gticontent div.stretch.puzzelmode,
    div.container_header.puzzelmode {
        background-color: lightslategray !important;
    }

body.Popup div.gticontent {
    /* 500px van gewone pagina's overschrijven met de default. */
    min-height: 0;
    /* Blauwe achtergrondkleur van gewone pagina's ongedaan maken. */
    background-color: transparent;
}

/* Wordt enkel toegepast wanneer de content 'gestretcht' wordt en de footer op de onderkant van het scherm gepositioneerd moet worden. */
div.gticontent div.stretch {
    position: absolute;
    left: 0;
    /* Header-height + menu-height */
    top: 148px;
    right: 0;
    /* Footer-height */
    bottom: 43px;
    overflow-y: auto;
}

div.gticontent.nomenu div.stretch {
    /* Overschrijft de grotere afstand dat de inhoud noraal naar beneden wordt geschoven, want wanneer er geen */
    /* menu getoond wordt op de pagina, moet er ook geen plaats voor worden voorzien. */
    top: 123px;
}


/* Footer */
/* ====== */

/* Wordt enkel toegepast wanneer de content 'gestretcht' wordt en de footer op de onderkant van het scherm gepositioneerd moet worden. */
div.gtifooter.bottom {
    position: absolute;
    left: 0;
    right: 0;
    /* Hoogte van de footer. */
    bottom: 0;
}

/* Inner footer */

div.gtifooter span#gtifooterleft,
div.gtifooter div#gtifootermiddle,
div.gtifooter span#gtifooterright {
    height: 43px;
}

div.gtifooter div#gtifootermiddle {
    background-color: #06a7e2;
    bottom: 0;
    position: fixed;
    width: 100%;
}

    div.gtifooter div#gtifootermiddle a {
        /* Zelfde als footer-hoogte. */
        line-height: 43px;
        vertical-align: middle;
        padding-left: 10px;
        color: White;
    }

        div.gtifooter div#gtifootermiddle a.lnktauris {
            float: right;
            padding-left: 0;
            padding-right: 10px;
        }


/* Lijsten */
/* ======= */

div.gticontent div.fwGridViewWrap {
    /* override margin-bottom van framework */
    margin-bottom: 8px;
}

div.fwGridViewWrap table {
    /* Default kleur als er geen alternerende rijen of FwFormat van toepassing zijn */
    background-color: White;
    /* Tabel centeren als die minder breed is dan de body. */
    margin: 0 auto;
}

    /* EmptyDataRow */
    div.fwGridViewWrap table tr p {
        color: Black;
    }

    div.fwGridViewWrap table tr th.defaultHeaderStyle {
        background-color: #F5CA23;
    }


/* Debug */
/* ===== */

input.debugImage {
    /* De luis altijd in de rechter-benedenhoek van de browser. */
    position: fixed;
    right: 135px;
    bottom: 6px;
    /* Overrule de 10000 van de debugInfo zodat de debugInfo terug kan afgezet worden. */
    z-index: 10001;
}

div.debuginfo {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    overflow-y: auto;
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.6);
    /* Overrule de 7000 van de menu. */
    z-index: 10000;
}


/* Popup */
/* ===== */

body.Popup {
    padding: 10px;
}

    body.Popup input.debugImage {
        left: 10px;
        right: unset;
    }

    /* Lijsten in popups */
    /* ================= */

    body .Popup div.gticontent div.iu_buttons {
        margin-top: 25px;
    }



/* Common */
/* ====== */

/* SelectControls */
/* -------------- */

div.GtiInfoSelect,
div.HistoriekSelect,
div.SluisSelect {
    margin: 0 auto;
}

    div.GtiInfoSelect div.row,
    div.HistoriekSelect div.row,
    div.SluisSelect div.row,
    div.StremmingenSelect div.row {
        /* override margin-bottom van 2px door fw omdat er hier maar 1 rij is. */
        margin-bottom: 0;
        padding: 5px 0;
    }

    div.SluisSelect div.iu_buttons {
        float: none;
    }

/* Centereren van de datacontrol in een popup */
div.gtiInfoDetail,
div.insertGtiToolKlacht,
div.SluisplanningEdit,
div.StremmingenEdit,
div.MailinglistStremmingEdit,
div.pnlSleepdetail {
    margin: 0 auto;
}

div.pnlSleepdetail {
    margin-top: 20px;
}

div.GtiInfoSelect div.row div.colZoekKnop,
div.HistoriekSelect div.row div.colZoekKnop,
div.Havenplanning div.row div.colZoekKnop,
div.OverzichtAfstemmingSelect div.row div.colZoekKnop {
    width: 120px;
}

    div.GtiInfoSelect div.row div.colZoekKnop input.btnSearch,
    div.HistoriekSelect div.row div.colZoekKnop input.btnSearch,
    div.Havenplanning div.row div.colZoekKnop input.btnSearch,
    div.OverzichtAfstemmingSelect div.row div.colZoekKnop input.btnSearch {
        margin-right: 0;
        width: 120px;
    }


/* SelectControl Babbelbox */
/* ----------------------- */

div.pnlSelect p.pBb {
    line-height: 23px;
}

    div.pnlSelect p.pBb a img {
        margin-top: 2px;
        margin-bottom: 1px;
    }


/* ListFooter */
/* ---------- */

div.pnlGridFooter {
    padding: 0 10px;
    font-weight: bold;
}

    div.pnlGridFooter p,
    div.pnlGridFooter p a {
        line-height: 30px;
        vertical-align: middle;
    }

        div.pnlGridFooter p.pBb a img,
        div.pnlGridFooter p.pBb .imgBb {
            margin-top: 5px;
            margin-bottom: 5px;
        }

        div.pnlGridFooter p.pBb,
        div.pnlSelect p.pBb {
            margin-right: 65px;
        }

            div.pnlGridFooter p.pBb a img,
            div.pnlSelect p.pBb a img,
            div.pnlGridFooter p.pBb .imgBb,
            div.pnlSelect p.pBb .imgBb {
                margin-left: 5px;
                margin-right: 5px;
                position: absolute;
            }

            div.pnlSelect p.pBb .imgBb {
                margin-top: 2px;
                margin-left: 45px;
            }

            div.pnlGridFooter p.pBb .imgBb {
                margin-left: 45px;
            }

        div.pnlGridFooter p.pBb,
        div.pnlSelect p.pBb {
            float: right;
        }

div span.lblRowCount {
    color: white;
    padding-left: 5px;
}


/* GtiInfo / GtiReisInfo */
/* ===================== */
div.gtiInfoCommon {
    /* Absoluut gepositioneerde elementen, worden relatief gepositioneerd ten opzichte van het eerste parent-element */
    /* dat niet static gepositioneerd is. Het pnlLeft wordt absoluut gepositioneerd ten opzichte van de container div. */
    /* Zonder deze relatief te positioneren, is er geen parent element dat niet static gepositioneerd is en zal het pnlLeft */
    /* zich relatief positioneren ten opzichte van het browservenster waardoor een padding op de body (in popup mode) geen */
    /* effect heeft op de pnlLeft (blijft tegen de linkerkant van de browser geplakt. */
    position: relative;
}

    div.gtiInfoCommon div.fwGridViewWrap div.pnlLeft {
        /* De static gridview links. */
        position: absolute;
        /* Als er naar rechts gescrolled is op het moment dat er een automatisch refresh van de pagina */
        /* wordt gedaan, verdwijnt de linkse grid. Met deze patch is dit opgelost, al is het niet helemaal */
        /* duidelijk wat er under the hood gebeurt. */
        left: 0;
        border-right: 3px solid black;
    }

        div.gtiInfoCommon div.fwGridViewWrap div.pnlLeft div table.trsgridview td {
            width: 80px;
        }

    div.gtiInfoCommon div.fwGridViewWrap div.pnlRight {
        /* Breedte van de td's in de linkse grid + padding left & right + border left & right. */
        margin-left: 94px;
    }

        div.gtiInfoCommon div.fwGridViewWrap div.pnlRight div {
            display: inline-block;
        }

            div.gtiInfoCommon div.fwGridViewWrap div.pnlRight div table.trsgridview td {
                width: 65px;
                max-width: 65px;
                overflow: hidden;
                /* zelfde waarde als de hoogte van de cellen, ingesteld in het framework. */
                /* Als er in één cel tekst en een afbeelding wordt weergegeven en de afbeelding */
                /* is hoger dan de line-height, dan wordt de tekst verticaal bovenaan opgelijnd. */
                /* Door de line-height op het maximum (cel-hoogte) in te stellen, komt de tekst */
                /* in het midden. */
                line-height: 20px;
            }

                div.gtiInfoCommon div.fwGridViewWrap div.pnlRight div table.trsgridview td.objGeoLink img,
                div.gtiInfoCommon div.fwGridViewWrap div.pnlRight div table.trsgridview td.schipnaam span.images {
                    float: right;
                }

                div.gtiInfoCommon div.fwGridViewWrap div.pnlRight div table.trsgridview td.objGeoLink img {
                    /* De cel is 20px hoogte, de afbeelding 16px, dus om die verticaal in het midden op te lijnen */
                    /* zowel boven als onder 2px margin. */
                    margin: 2px 0;
                }

                div.gtiInfoCommon div.fwGridViewWrap div.pnlRight div table.trsgridview td.schipnaam a {
                    float: left;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    max-width: 160px;
                }

            div.gtiInfoCommon div.fwGridViewWrap div.pnlRight div table.trsgridview.showActual td.schipnaam a {
                max-width: 84px;
            }

            div.gtiInfoCommon div.fwGridViewWrap div.pnlRight div table.trsgridview td.schipnaam a.reisplan {
                margin-left: 5px;
            }

                div.gtiInfoCommon div.fwGridViewWrap div.pnlRight div table.trsgridview td.schipnaam a.reisplan img {
                    float: right;
                    margin: 2px 0;
                }

/* GtiInfo */
/* ======= */

/* Select */
/* ------ */

div.GtiInfoSelect {
    width: fit-content;
}

    div.GtiInfoSelect div.row div.colOffset {
        /* offset control width (35px ingesteld via C#) + margin-right (50px). */
        width: 85px;
    }

        div.GtiInfoSelect div.row div.colOffset label {
            width: 46px;
        }

        div.GtiInfoSelect div.row div.colOffset span.RadInput_Default {
            /* label width + padding */
            margin-left: 50px;
            /* Door RAD wordt inline css gerenderd 'display: -moz-inline-stack'. In (oudere versies van) IE */
            /* wordt dat geïnterpreteerd als 'display: inline' waardoor de control onder het bijhorende label */
            /* wordt weergegeven. */
            display: block !important;
        }

            div.GtiInfoSelect div.row div.colOffset span.RadInput_Default input.riTextBox {
                border: 1px ridge Black;
                height: 100%;
                padding: 3px 0 3px 1px;
            }

            div.GtiInfoSelect div.row div.colOffset span.RadInput_Default td.riCell {
                width: 20px !important;
            }


    div.GtiInfoSelect div.row div.colMode {
        width: 345px;
    }

        div.GtiInfoSelect div.row div.colMode label {
            width: 40px;
        }

        div.GtiInfoSelect div.row div.colMode select {
            /* label width + padding */
            margin-left: 44px;
            width: 291px;
        }

    div.GtiInfoSelect div.row div.colFilterReizen {
        height: 26px;
        margin-right: 0;
    }

        div.GtiInfoSelect div.row div.colFilterReizen,
        div.GtiInfoSelect div.row div.colFilterReizen select {
            width: 720px;
        }

    div.GtiInfoSelect div.row div.colGeenActual {
        width: 100px;
    }

        div.GtiInfoSelect div.row div.colGeenActual label {
            width: 76px;
        }

        div.GtiInfoSelect div.row div.colGeenActual span.chb {
            /* label width + padding */
            margin-left: 80px;
        }

    div.GtiInfoSelect div.row div.colAllePasseerpunten {
        width: 139px;
    }

        div.GtiInfoSelect div.row div.colAllePasseerpunten label {
            width: 119px;
        }

        div.GtiInfoSelect div.row div.colAllePasseerpunten span.chb {
            /* label width + padding */
            margin-left: 119px;
        }

    div.GtiInfoSelect div.row div.geoCol {
        /*width: 32px; al gezet door fw */
        /*margin-right: 0px; al gezet door fw */
        /* override margin-left van 15px door fw */
        margin-left: 20px;
        margin-right: 20px;
    }

    div.GtiInfoSelect div.row div.colZoekKnop {
        margin-right: 40px;
    }

/* Lijst */
/* ----- */

div.gtiInfo div.fwGridViewWrap {
    /* Horizontale scrollbar indien van toepassing. */
    overflow: auto;
}


    div.gtiInfo div.fwGridViewWrap div.pnlRight div table.zesUur {
        border-right: 3px solid red;
    }


/* GtiReisInfo */
/* =========== */

div.gtireisinfolist {
    width: 399px;
    margin: 0 auto;
    position: relative;
}


/* Historiek */
/* ========= */

/* Select */
/* ------ */

div.HistoriekSelect {
    width: 920px;
}

    div.HistoriekSelect div.row div.colZoekKnop {
        margin-right: 0;
    }

    div.HistoriekSelect div.colType {
        width: 153px;
    }

    div.HistoriekSelect div.colVan,
    div.HistoriekSelect div.colTot {
        width: 196px;
    }

    div.HistoriekSelect div.colType label {
        width: 33px;
    }

    div.HistoriekSelect div.colVan label,
    div.HistoriekSelect div.colTot label {
        width: 28px;
    }

    div.HistoriekSelect div.colType select {
        width: 114px;
    }

    div.HistoriekSelect div.colType input {
        width: 108px;
    }

    div.HistoriekSelect div.colType select,
    div.HistoriekSelect div.colType input {
        margin-left: 37px;
    }

    div.HistoriekSelect div.colVan .datetimeselect,
    div.HistoriekSelect div.colTot .datetimeselect {
        margin-left: 32px;
    }

/* PubliekStart */
/* ============ */

div.publiekStart {
    width: 750px;
    padding: 25px;
}

    div.publiekStart h3 {
        font-size: 16px;
        text-align: center;
        margin-bottom: 10px;
    }

    div.publiekStart div.fwGridViewWrap table.trsgridview {
        width: 100%;
    }

    div.publiekStart div.fwGridViewWrap {
        max-height: 500px;
        /* Verticale scrollbar indien nodig */
        overflow: auto;
    }

    div.publiekStart div.pnlGridFooter {
        text-align: center;
    }


div.pnlLogin,
div.change_pwd_form {
    background-color: White;
}

    div.pnlLogin div.fwLogin div.AspNet-Login div.AspNet-Login-SubmitPanel input,
    div.change_pwd_form span.login_msg_title,
    div.change_pwd_form div.submit_row input {
        background-color: #00AEDB;
    }

    div.pnlLogin div.fwLogin div.AspNet-Login div.AspNet-Login-SubmitPanel input,
    div.change_pwd_form div.submit_row input {
        border-color: Black;
    }

    div.pnlLogin div.fwLogin div.AspNet-Login div.AspNet-Login-UserPanel label,
    div.pnlLogin div.fwLogin div.AspNet-Login div.AspNet-Login-PasswordPanel label,
    div.change_pwd_form div.row label {
        color: Black;
    }

div.pnlLogin {
    position: absolute;
    right: 0;
}

    div.pnlLogin div.fwLogin,
    div.pnlLogin div.pnlCertLogin
    div.pnlLogin div.pnlHandleiding {
        /* De spacing kan niet worden opgelost door een padding in te stellen op pnlLogin, want */
        /* die padding komt bovenop de 100% hoogte van div.gticontent. */
        /* Dit zou kunnen worden opgelost door nog een niveau tussen te voegen tussen pnlLogin en */
        /* rond div.fwLogin en a.lnkCertLogin en op die extra div dan een margin of padding in te */
        /* stellen, maar dat impliceert extra markup voor de opmaak, en het kan ook zonder. */
        /* Gevolg is nu wel dat de margin links en rechts zowel op de div.fwLogin en a.lnkCertLogin */
        /* moet worden ingesteld en de top op div.fwLogin en de bottom op a.lnkCertLogin. */
        margin-left: 10px;
        margin-right: 10px;
    }

    div.pnlLogin div.pnlCertLogin {
        width: fit-content;
        float: right;
        margin-top: 10px;
        margin-bottom: 5px;
        margin-left: 10px;
        margin-right: 10px;
    }

    div.pnlLogin div.pnlHandleiding {
        margin-top: 45px;
        margin-bottom: 5px;
        margin-left: 10px;
        margin-right: 10px;
    }

    div.pnlLogin div.fwLogin.empty {
        display: none !important;
    }

    div.pnlLogin div.fwLogin {
        background-color: #F5CA23;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    div.pnlLogin a.lnkCertLogin,
    div.pnlLogin a.lnkHandleiding {
        float: right;
        /* In principe overbodig, want de link komt niet tot aan de onderkant van div.pnlLogin, maar */
        /* voor de volledigheid wordt eenzelfde margin ingesteld voor de volledige binnenomtrek van */
        /* div.pnlLogin. */
        margin-bottom: 10px;
    }


/* PaswoordWijzigen */
/* ================ */

div.change_pwd_form span.login_msg_title {
    background-color: #00AEDB;
}


/* BabbelboxOverzicht */
/* ================== */

div.babbelboxoverzicht div.fwGridViewWrap div.gvScroll {
    height: 275px;
}

    div.babbelboxoverzicht div.fwGridViewWrap div.gvScroll div div table.trsgridview {
        width: 100%;
    }

div.babbelboxoverzicht table.trsgridview .colToegewezenAan {
    max-width: 125px;
}


/* BabbelboxInsert */
/* =============== */



/* Shared tussen feedback en klacht */

div.insertGtiToolKlacht,
div.insertGtiBabbelbox {
    width: 556px;
}

    div.insertGtiToolKlacht div.row label,
    div.insertGtiBabbelbox div.row label {
        width: 91px;
    }

    div.insertGtiToolKlacht div.row input.text,
    div.insertGtiToolKlacht div.row select,
    div.insertGtiToolKlacht div.row textarea,
    div.insertGtiBabbelbox div.row input.text,
    div.insertGtiBabbelbox div.row select,
    div.insertGtiBabbelbox div.row textarea {
        margin-left: 95px;
    }

        div.insertGtiToolKlacht div.row select.toewijzing,
        div.insertGtiBabbelbox div.row select.toewijzing {
            width: 185px;
        }

    div.insertGtiToolKlacht div.omschrijving,
    div.insertGtiBabbelbox div.omschrijving {
        height: auto;
    }

        div.insertGtiToolKlacht div.omschrijving textarea,
        div.insertGtiBabbelbox div.omschrijving textarea {
            width: 455px;
            height: 255px;
        }

    div.insertGtiToolKlacht div.btnRow input.submit,
    div.insertGtiBabbelbox div.btnRow input.submit {
        margin-right: 0;
        width: 130px;
    }

/* Disclaimer */
/* ========== */
div.disclaimer_tekst {
    margin: 0 200px 25px 200px;
    padding-top: 25px;
}

    div.disclaimer_tekst h3 {
        margin-bottom: 25px;
    }

    div.disclaimer_tekst p {
        line-height: 18px;
        margin-bottom: 10px;
    }

input.btnAccept {
    display: block;
    margin: 0 auto;
    padding: 2px 5px;
}


/* DemoAccounts */
/* ============ */

div.gtiDemoAccountsUpdate fieldset {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #808080;
}

    div.gtiDemoAccountsUpdate fieldset div.rowAantalUren {
        height: auto;
        margin-bottom: 5px;
    }

        div.gtiDemoAccountsUpdate fieldset div.rowAantalUren ul.fwrdblist {
            margin-left: 80px;
        }

div.gtiDemoAccountsUpdate div.btnRow input.submit {
    margin-right: 0;
}


/* GtiInfoDetailData */
/* ================= */

div.gtiInfoDetail {
    margin-left: 20px;
    margin-right: 20px;
}

    div.gtiInfoDetail div.row label {
        width: 118px;
    }

    div.gtiInfoDetail div.row input.text,
    div.gtiInfoDetail div.row div.datetimeselect {
        margin-left: 122px;
    }

    div.gtiInfoDetail div.row input.aantal {
        width: 50px;
    }

    div.gtiInfoDetail div.btnRow {
        height: 50px;
    }


        div.gtiInfoDetail div.btnRow input.submit {
            margin-top: 20px;
            margin-left: 121px;
            float: none;
        }

/* SluisplanningEdit */
/* ================= */

div.SluisplanningEdit {
    width: 392px;
}

    div.sluisplanningedit fieldset {
        margin: 5px 0;
        padding: 5px 15px;
        border: 1px solid Gray;
    }


    /* 1 kolom */

    div.sluisplanningedit div.rowSchip input.text {
        width: 286px;
    }


    /* 3 kolommen */

    div.sluisplanningedit div.rowAfmetingen div.col {
        width: 122px;
    }

    div.sluisplanningedit div.rowAfmetingen input.text {
        width: 36px;
    }

    div.sluisplanningedit div.rowAfmetingen div.colLengte {
        width: 128px;
    }

        div.sluisplanningedit div.rowAfmetingen div.colLengte input.text {
            width: 42px;
        }


    /* 2 kolommen */

    div.sluisplanningedit div.rowEniImo div.col,
    div.sluisplanningedit div.rowVanNaar div.col,
    div.sluisplanningedit div.rowEstimateStatus div.col {
        width: 186px;
    }

    div.sluisplanningedit div.rowEniImo input.text,
    div.sluisplanningedit div.rowVanNaar input.text,
    div.sluisplanningedit div.rowEstimateStatus input.text,
    div.sluisplanningedit div.rowVanNaar input.text,
    div.sluisplanningedit div.rowVhf1028 input.text {
        width: 100px;
    }


    /* Kolommen in schutting-fieldset */

    div.sluisplanningedit fieldset div.row div.colSluis,
    div.sluisplanningedit fieldset div.row div.colPlanned {
        width: 224px;
    }

    div.sluisplanningedit fieldset div.row div.colSchRichting {
        width: 110px;
    }

    div.sluisplanningedit fieldset div.row div.colSchutduur {
        width: 71px;
    }


    /* Kolommen in de sluisplan-fieldset */

    div.sluisplanningedit fieldset div.row div.colSchutVolgnr {
        width: 91px;
    }

    div.sluisplanningedit fieldset div.row div.colSchutKant {
        width: 204px;
    }


    /* Kolommen in de tijpoorten-fieldset */

    div.sluisplanningedit fieldset div.row div.colTijpoorten {
        width: 258px;
    }

    div.sluisplanningedit fieldset div.row div.colDpgTp {
        width: 148px;
    }

    /* Kolommen rechts oplijnen */

    div.sluisplanningedit fieldset div.row div.colSchRichting,
    div.sluisplanningedit fieldset div.row div.colSchutduur,
    div.sluisplanningedit fieldset div.row div.colSchutKant,
    div.sluisplanningedit fieldset div.row div.colDpgTp {
        float: right;
    }


        /* Labels aan de linkerkant allemaal even breed. */

        div.sluisplanningedit fieldset div.row div.colSluis label,
        div.sluisplanningedit fieldset div.row div.colSchRichting label,
        div.sluisplanningedit fieldset div.row div.colPlanned label,
        div.sluisplanningedit fieldset div.row div.colSchutVolgnr label,
        div.sluisplanningedit fieldset div.row div.colTijpoorten label {
            width: 56px;
        }

        div.sluisplanningedit fieldset div.row div.colSluis select,
        div.sluisplanningedit fieldset div.row div.colSluis input.text,
        div.sluisplanningedit fieldset div.row div.colSchRichting select,
        div.sluisplanningedit fieldset div.row div.colSchRichting input.text,
        /* Zowel div als input (readonly), dus geen html-element definitie. */
        div.sluisplanningedit fieldset div.row div.colPlanned .datetimeselect,
        div.sluisplanningedit fieldset div.row div.colSchutVolgnr select,
        div.sluisplanningedit fieldset div.row div.colSchutVolgnr input.text,
        div.sluisplanningedit fieldset div.row div.colTijpoorten input.text {
            margin-left: 60px;
        }


    /* Van en tot in twee kolommen */

    div.sluisplanningedit fieldset fieldset#fsVan,
    div.sluisplanningedit fieldset fieldset#fsTot {
        border: 0;
        margin: 0;
        width: 165px;
        padding: 0;
    }

    div.sluisplanningedit fieldset fieldset#fsVan {
        border-right: 2px solid Black;
        padding: 0 17px 0 0;
    }

    div.sluisplanningedit fieldset fieldset#fsTot {
        float: right;
        margin-right: 52px;
    }


        div.sluisplanningedit fieldset fieldset#fsVan legend,
        div.sluisplanningedit fieldset fieldset#fsTot legend {
            font-weight: bold;
            margin: 5px 0 15px 0;
            width: 100%;
            text-align: center;
            /* Overwrite fw padding */
            padding: 0;
        }

div.tijpoorten div fieldset div.row:first-of-type {
    margin-bottom: 15px;
}


/* Lossen control opmaak */

div.sluisplanningedit div.rowEstimateStatus input.txtEstimate {
    width: 60px;
}


div.sluisplanningedit fieldset div.row div.colSchRichting select {
    width: 50px;
}

div.sluisplanningedit fieldset div.row div.colSchRichting input.text {
    width: 44px;
}

div.sluisplanningedit fieldset div.row div.colSchutduur label {
    width: 36px;
}

div.sluisplanningedit fieldset div.row div.colSchutduur input.text {
    width: 25px;
    margin-left: 40px;
}


div.sluisplanningedit fieldset div.row div.colSchutKant label {
    width: 36px;
}

div.sluisplanningedit fieldset div.row div.colSchutKant select,
div.sluisplanningedit fieldset div.row div.colSchutKant input.text {
    margin-left: 40px;
}


div.sluisplanningedit fieldset div.row div.colSchutVolgnr input.text {
    width: 25px;
}


div.sluisplanningedit fieldset div.row div.colTijpoorten input.text {
    width: 192px;
}


div.sluisplanningedit fieldset div.row div.colDpgTp label {
    width: 66px;
}

div.sluisplanningedit fieldset div.row div.colDpgTp input.text {
    margin-left: 70px;
    width: 37px;
}


/* Er staan geen labels voor deze datetimeselects, dus moet er ook geen ruimte voor voorzien zijn. */
/* Zowel div als input (readonly), dus geen html-element definitie. */
div.sluisplanningedit fieldset fieldset#fsVan div.row .datetimeselect,
div.sluisplanningedit fieldset fieldset#fsTot div.row .datetimeselect {
    margin-left: 0;
}


div.sluisplanningedit div.rowCbx label {
    width: 96px;
}

div.sluisplanningedit div.rowCbx span.indent {
    margin-left: 100px;
}

div.sluisplanningedit div.rowCbx label:last-of-type {
    width: 121px;
}

div.sluisplanningedit div.rowCbx span.indent:last-of-type {
    margin-left: 125px;
}

div.sluisplanningedit div.rowCbx label:first-of-type {
    margin-right: 20px;
}

div.sluisplanningedit div.rowCbx span.indent:first-of-type {
    margin-right: 20px;
}

div.sluisplanningedit div.btnRow {
    margin-top: 10px;
}

    div.sluisplanningedit div.btnRow input.submit {
        margin-right: 0;
    }


/* StremmingenSelect */
/* ================= */
div.StremmingenSelect,
div.StremmingenSelect div.row div.iu_buttons input.button {
    width: 230px;
}

    div.StremmingenSelect div.row div.iu_buttons {
        float: none;
    }

        div.StremmingenSelect div.row div.iu_buttons input.button {
            margin-left: 0;
        }


/* StremmingenEdit */
/* =============== */

div.StremmingenEdit {
    width: fit-content;
}

    div.StremmingenEdit div.row div.col {
        color: white;
        margin-right: 30px;
        width: fit-content;
    }

    div.StremmingenEdit div.row label {
        width: 102px;
    }

    div.StremmingenEdit div.row select,
    div.StremmingenEdit div.row .datetimeselect,
    div.StremmingenEdit div.row textarea,
    div.StremmingenEdit div.row input.text {
        margin-left: 106px;
    }

    div.StremmingenEdit div.row .reactiesoort {
        margin-left: 100px;
    }

    div.StremmingenEdit div.rowBepOmschrijving {
        height: 32px;
    }

    div.StremmingenEdit div.btnRow input.submit {
        margin-right: 0;
    }

    div.StremmingenEdit div.rowBepOmschrijving textarea {
        height: 28px;
        width: 500px;
    }

    div.StremmingenEdit div.rowBepReactie {
        height: 400px;
    }

        div.StremmingenEdit div.rowBepReactie textarea {
            height: 396px;
            width: 500px;
        }

body div.StremmingenEdit div.btnRow {
    margin-top: 20px;
}

body div.StremmingenEdit div.row.layoutFixRowReactiesoort {
    height: 0;
}

body div.StremmingenEdit a.aantal_reacties {
    margin-left: 107px;
    padding-top: 4px;
    position: absolute;
}

/* MailinglistStremmingEdit */
/* ======================== */

div.MailinglistStremmingEdit div.row input.text {
    width: 250px;
}

div.MailinglistStremmingEdit div.row input.submit {
    position: absolute;
    right: 0;
    bottom: 20px;
    margin-right: 20px;
}

/* Aanbodlijst */
/* =========== */

/* Algemeen */

div.aanbodlijstwrapper {
    /* Positioneert de wrapper absoluut binnen zijn parent (de body) op een vaste afstand van de rand van die parent en rekt */
    /* de wrapper daarbij zowel horizontaal als verticaal uit over de volledige breedte/hoogte (verminderd met de afstond van */
    /* de buitenrand */
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /* Zorgt er voor dat er een scollbar wordt weergegeven, in plaats van de div te laten groeien, waardoor er een scrollbar op de body komt. */
    /* Tevens zorgt het expliciete weergeven van de verticale scrollbar ervoor dat er geen verticale scrollbar wordt weergegeven in IE */
    /* wanneer een horizontale scrollbar wordt weergegeven en de breedte van de div daardoor groeit. */
    overflow-x: scroll;
}

    div.aanbodlijstwrapper.act {
        /* Select-height */
        top: 39px;
    }

    /* Breedte van zowel de wapper (t.b.v. de header) als de verticale scollcontainer (t.b.v. de tabellen) */
    div.aanbodlijstwrapper div#aanbodlijsths,
    div.aanbodlijstwrapper div#aanbodlijsths div#aanbodlijstvs {
        /* Breedte van alle kolommen en borders samen, want browsers renderen de kolommen toch kleiner ondanks de breedte. */
        /* 'Min-width' en niet 'width' want bij zoomen in FireFox scaled deze div anders dan de content, waardoor de content */
        /* bij uitzoomen wrapped wanneer de breedte wordt ingesteld. */
        min-width: 1970px;
    }

div#aanbodlijstheader {
    /* Som van de hoogte en borders van de 3 rijen in de header table. */
    height: 76px;
    /* In FireFox loopt de header een beetje over de verticale scroll-div. Door die overflow hidden te zetten, valt dat niet op. */
    overflow-y: hidden;
    /* Om te voorkomen dat er onder de header een horizontale scollbar verschijnt wanneer wordt ingezoomed. */
    overflow-x: hidden;
}

div#aanbodlijstvs {
    /* Positioneert de div waarop de verticale scrollbar komt in de links onder de header in zijn parent en rekt de div */
    /* verticaal uit tot aan de onderrand van de parent. */

    position: absolute;
    /* Geen afstand tot de rechtterrand van de parent instellen, zodat deze wrapper horizontaal meegroeit met zijn content, */
    /* anders verschijnt er een horizontale scrollbar voor de ruimte die de verticale scrollbar inneemt. */
    left: 0;
    /* De afstand van de bovenrand van de parent moet gelijk zijn aan de hoogte van de header die tussen de bovenrand van de */
    /* de parent wrapper en deze div zit. */
    top: 76px;
    /* Stretch de div tot aan de onderrrand. */
    bottom: 0;
    /* Zorgt er voor dat er een scollbar wordt weergegeven, in plaats van de div te laten groeien. */
    /* Tevens zorgt het expliciete weergeven van de verticale scrollbar ervoor dat er geen horizontale scrollbar wordt weergegeven */
    /* wanneer een verticale scrollbar wordt weergegeven en de breedte van de div daardoor groeit. */
    overflow-y: scroll;
    /* Zorgt ervoor dat de tabel niet tegen de bodem 'plakt'. Door de absolute positionering kan dit niet als padding op de parent container. */
    margin-bottom: 10px;
}

/* Select */

div.aanbodlijstselect {
    height: 23px;
    padding: 8px 0;
    width: fit-content;
    margin: 0 auto;
}

    div.aanbodlijstselect label {
        width: 36px;
    }

    div.aanbodlijstselect div.radlookup {
        /* Het framework voorziet een linker margin voor een eventueel label. */
        margin-left: 40px;
    }

        div.aanbodlijstselect div.radlookup div.RadComboBox table tr td.rcbInputCell {
            /* In de aanbodlijst wordt er een padding van 2px op td's ingesteld. */
            padding: 0;
        }

        div.aanbodlijstselect div.radlookup div.RadComboBox input.rcbInput,
        div.dditemselect ul.rcbList li {
            font-family: Consolas, Courier New, Courier, monospace;
        }

    div.aanbodlijstselect input.btnOpen,
    div.aanbodlijstselect input.btnExtra,
    div.aanbodlijstselect input.btnPause,
    div.aanbodlijstselect input.btnResume,
    div.aanbodlijstselect input.btnPuzzelmodus {
        float: right;
        width: 50px;
        margin-left: 15px;
    }

    div.aanbodlijstselect input.btnPuzzelmodus {
        padding-left: 5px;
        padding-right: 5px;
        width: fit-content;
    }



/* Tabellen */

div.aanbodlijstwrapper div#locknames {
    height: 35px;
    /* Wanneer geen breedte wordt ingesteld, verspringen de 'scorllbuttons' bij het inzoomen. */
    /* In principe is 1875px genoeg, meer bij het uitzoomen, verspringen de knoppen dan ook nog soms, */
    /* dus een beetje marge ingevoerd. */
    width: 1990px;
    padding-top: 10px;
    padding-bottom: 10px;
}

    div.aanbodlijstwrapper div#locknames p,
    div.aanbodlijstwrapper div#locknames div.scrollbuttons {
        float: left;
    }

    div.aanbodlijstwrapper div#locknames p {
        width: 560px;
        line-height: 35px;
        vertical-align: central;
        margin-left: 62px;
        background-color: #F5CA23;
        color: black;
        border: 1px solid black;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
    }

div.gticontentHistory div.aanbodlijstwrapper div#locknames p {
    background-color: silver;
}

div.aanbodlijstwrapper div#locknames div.scrollbuttons {
    margin-left: 5px;
}

    div.aanbodlijstwrapper div#locknames div.scrollbuttons input {
        width: 16px;
        height: 16px;
        border: 1px solid black;
        display: block;
        background-repeat: no-repeat;
    }

div.aanbodlijstwrapper div.scrollbuttons input.btnUp {
    background-image: url(Images/scroll_up.png);
    margin-bottom: 5px;
}

div.aanbodlijstwrapper div.scrollbuttons input.btnDown {
    background-image: url(Images/scroll_down.png);
}

div.aanbodlijstwrapper div.aanbodlijstsluisgrid {
    float: left;
}

div.aanbodlijstsluisgrid table,
div#aanboddeellijst div#aanboddeellijstlist {
    /* Op de table voorkomt dit in IE en Chrome dat de tabel groter wordt dan de som van de gedefinieerde kolombreedtes */
    /* wanneer de inhoud van één multirow cel over meerdere regels gewrapped zou kunnen worden. */
    /* Voorkomt ook dat de tabel smaller kan worden als alle rijen 'row_text'-rijen zijn en de tekst smaller is. */
    width: 645px;
}

div.aanbodlijstsluisgrid table {
    /* Geen ruimte tussen de cellen. */
    /* Normaal wordt dit automatisch inline via een attribuut gerenderd voor een gridview, maar dat wordt disabled in */
    /* gridviews voor de aanbodlijst om de eveneens automatisch toegevoegde 'border-collapse' te kunnen vermijden. */
    border-spacing: 0;
}

div.aanbodlijsthistoriekgrid table tr {
    /* Door de hoogte op de rijen in te stellen en niet op de cellen krijgen lege rijen (waarin cellen uit andere rijen */
    /* 'gespanned' worden, ook de gewenste hoogte. */
    height: 20px;
}

div.aanbodlijstsluisgrid table th,
div.aanbodlijstsluisgrid table td {
    padding: 2px;
    height: 15px;
}

    div.aanbodlijstsluisgrid table td.col_schip,
    div.aanbodlijstsluisgrid table th.col_schip {
        /* Zowel op de data- als op de headercellen, zodat die even breed blijven. */
        padding-left: 4px;
    }

/* Specifieke kolomeigenschappen */

div.aanbodlijstsluisgrid td.singlerow,
div.aanbodlijstsluisgrid td.multirow {
    border-left: 3px solid black;
    border-top: 1px solid black;
    border-right: 3px solid black;
    border-bottom: 1px solid black;
}

div.aanbodlijstsluisgrid td.singlerow {
    text-align: left;
}

div.aanbodlijstsluisgrid td.multirow {
    text-align: center;
}

div.aanbodlijstsluisgrid .col_dummy,
div.aanbodlijstsluisgrid .col_richting {
    /* Voorkomt problemen doordat alle cellen (ook die zonder zichtbare border) een even dikke border krijgen. */
    /* Wordt overschreven wanneer de cel een extra css-klasse 'op' of 'af' krijgt toegewezen. */
    border: 1px solid transparent;
}

div.aanbodlijstsluisgrid .col_tbt,
div.aanbodlijstsluisgrid .col_estimate,
div.aanbodlijstsluisgrid .col_schip,
div.aanbodlijstsluisgrid .col_lengte,
div.aanbodlijstsluisgrid .col_breedte,
div.aanbodlijstsluisgrid .col_dpg,
div.aanbodlijstsluisgrid .col_kegels,
div.aanbodlijstsluisgrid .col_schut_kant,
div.aanbodlijstsluisgrid .col_fout,
div.aanbodlijstsluisgrid .col_vhf1028 {
    border: 1px solid black;
}

div.aanbodlijstsluisgrid th.col_tbt,
div.aanbodlijstsluisgrid th.col_estimate,
div.aanbodlijstsluisgrid th.col_schip,
div.aanbodlijstsluisgrid th.col_lengte,
div.aanbodlijstsluisgrid th.col_breedte,
div.aanbodlijstsluisgrid th.col_dpg,
div.aanbodlijstsluisgrid th.col_kegels,
div.aanbodlijstsluisgrid th.col_schut_kant,
div.aanbodlijstsluisgrid th.col_fout,
div.aanbodlijstsluisgrid th.col_vhf1028 {
    border-top: 3px solid black;
}



div.aanbodlijstsluisgrid td.col_dummy.lastrow,
div.aanbodlijstsluisgrid td.col_richting.lastrow {
    /* Voorkomt problemen doordat alle cellen (ook die zonder zichtbare border) een even dikke border krijgen. */
    border-bottom: 3px solid transparent;
}

div.aanbodlijstsluisgrid td.col_tbt.lastrow,
div.aanbodlijstsluisgrid td.col_estimate.lastrow,
div.aanbodlijstsluisgrid td.col_schip.lastrow,
div.aanbodlijstsluisgrid td.col_lengte.lastrow,
div.aanbodlijstsluisgrid td.col_breedte.lastrow,
div.aanbodlijstsluisgrid td.col_dpg.lastrow,
div.aanbodlijstsluisgrid td.col_kegels.lastrow,
div.aanbodlijstsluisgrid td.col_schut_kant.lastrow,
div.aanbodlijstsluisgrid td.col_fout.lastrow,
div.aanbodlijstsluisgrid td.col_vhf1028.lastrow,
div.aanbodlijstsluisgrid td.singlerow.lastrow,
div.aanbodlijstsluisgrid td.multirow.lastrow {
    border-bottom: 3px solid black;
}


div.aanbodlijstsluisgrid th.col_tbt,
div.aanbodlijstsluisgrid th.col_estimate,
div.aanbodlijstsluisgrid th.col_schip,
div.aanbodlijstsluisgrid th.col_lengte,
div.aanbodlijstsluisgrid th.col_breedte,
div.aanbodlijstsluisgrid th.col_dpg,
div.aanbodlijstsluisgrid th.col_kegels,
div.aanbodlijstsluisgrid th.col_schut_kant,
div.aanbodlijstsluisgrid th.col_vhf1028 {
    background-color: #F5CA23;
}

div.gticontentHistory div.aanbodlijstsluisgrid th.col_tbt,
div.gticontentHistory div.aanbodlijstsluisgrid th.col_estimate,
div.gticontentHistory div.aanbodlijstsluisgrid th.col_schip,
div.gticontentHistory div.aanbodlijstsluisgrid th.col_lengte,
div.gticontentHistory div.aanbodlijstsluisgrid th.col_breedte,
div.gticontentHistory div.aanbodlijstsluisgrid th.col_dpg,
div.gticontentHistory div.aanbodlijstsluisgrid th.col_kegels,
div.gticontentHistory div.aanbodlijstsluisgrid th.col_schut_kant,
div.gticontentHistory div.aanbodlijstsluisgrid th.col_vhf1028 {
    background-color: silver;
}

div.aanbodlijstsluisgrid th.col_fout {
    /* Krijgt zijn achtergrondkleur via fw_format_columns 'fwERROR'. */
}

div.aanbodlijstsluisgrid th.col_fout,
div.aanbodlijstsluisgrid td.col_fout {
    border-right: 3px black solid;
}



    /* Alle datacellen, behalve van de kolommen 'dummy' en 'richting': witte achtergrond. */
    div.aanbodlijstsluisgrid td.col_tbt.nobg,
    div.aanbodlijstsluisgrid td.col_estimate.nobg,
    div.aanbodlijstsluisgrid td.col_schip.nobg,
    div.aanbodlijstsluisgrid td.col_lengte.nobg,
    div.aanbodlijstsluisgrid td.col_breedte.nobg,
    div.aanbodlijstsluisgrid td.col_dpg.nobg,
    div.aanbodlijstsluisgrid td.col_kegels.nobg,
    div.aanbodlijstsluisgrid td.col_schut_kant.nobg,
    div.aanbodlijstsluisgrid td.col_fout.nobg,
    div.aanbodlijstsluisgrid td.col_vhf1028.nobg {
        background-color: white;
    }


div.aanbodlijstsluisgrid table tr.selected td.col_tbt,
div.aanbodlijstsluisgrid table tr.selected td.col_estimate,
div.aanbodlijstsluisgrid table tr.selected td.col_schip,
div.aanbodlijstsluisgrid table tr.selected td.col_lengte,
div.aanbodlijstsluisgrid table tr.selected td.col_breedte,
div.aanbodlijstsluisgrid table tr.selected td.col_dpg,
div.aanbodlijstsluisgrid table tr.selected td.col_kegels,
div.aanbodlijstsluisgrid table tr.selected td.col_schut_kant,
div.aanbodlijstsluisgrid table tr.selected td.col_fout,
div.aanbodlijstsluisgrid table tr.selected td.col_vhf1028 {
    background-color: #FFF079;
    color: Black;
}

div.aanbodlijstsluisgrid .col_dummy {
    width: 9px;
}

div.aanbodlijstsluisgrid .col_richting {
    width: 36px;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}

/* Overschrijft de transparante border op een 'gewone' col_richting cel. */
div.aanbodlijstsluisgrid td.col_richting.op,
div.aanbodlijstsluisgrid td.col_richting.af {
    border-left: 1px solid black;
    border-top: 1px solid black;
    /* Rechts geen zichtbare border, dit geeft de illusie dat dit vakje tegen de tabel kleeft. */
    border-right: 1px solid transparent;
    border-bottom: 1px solid black;
    /* Zorgt ervoor dat de pijl onder de tekst 'op' en 'af' komt. */
    background-position-y: 27px;
    /* Positioneert de pijl horizontaal in het midden van de cel. */
    background-position-x: 15px;
}

div.aanbodlijstsluisgrid td.col_richting {
    vertical-align: top;
}

    div.aanbodlijstsluisgrid td.col_richting span.schuttijd,
    div.aanbodlijstsluisgrid td.col_richting span.richting,
    /* De link naar kolkindeling ook 'block' zodat het aanklikbaar gebied de volledige */
    /* breedte inneemnt en niet enkel de breedte van de tekst van de link. */
    div.aanbodlijstsluisgrid td.col_richting span.richting a {
        display: block;
    }

        /* Identieke opmaak voor weergave met link naar de kolkindeling als zonder link naar */
        /* de kolkindeling. */
        div.aanbodlijstsluisgrid td.col_richting span.richting a,
        div.aanbodlijstsluisgrid td.col_richting span.nolink {
            /* Padding boven de richting tekst (overlappend met de pijl) voor een zo groot */
            /* mogelijk aanklikbaar gebied om door te klikken naar de kolkindeling */
            padding-top: 45px;
        }

        div.aanbodlijstsluisgrid td.col_richting span.richting a {
            text-decoration: none;
        }

    div.aanbodlijstsluisgrid td.col_richting.op {
        background-image: url(Images/arrow_up.png);
    }

    div.aanbodlijstsluisgrid td.col_richting.af {
        background-image: url(Images/arrow_down.png);
    }

div.aanbodlijstsluisgrid .col_tbt {
    width: 55px;
    text-align: center;
    border-left: 3px solid black;
}

div.aanbodlijstsluisgrid .col_estimate {
    width: 47px;
    text-align: center;
}

div.aanbodlijstsluisgrid .col_schip {
    width: 186px;
    text-align: left;
}

div.aanbodlijstsluisgrid .col_lengte {
    width: 37px;
    text-align: center;
}

div.aanbodlijstsluisgrid .col_breedte {
    width: 38px;
    text-align: center;
}

div.aanbodlijstsluisgrid .col_dpg {
    width: 38px;
    text-align: center;
}

div.aanbodlijstsluisgrid .col_kegels {
    width: 19px;
    text-align: center;
}

div.aanbodlijstsluisgrid .col_schut_kant {
    width: 47px;
    text-align: center;
}

div.aanbodlijstsluisgrid .col_fout {
    width: 21px;
    text-align: center;
}

div.aanbodlijstsluisgrid .col_vhf1028 {
    width: 26px;
    text-align: center;
}

div.aanbodlijstsluisgrid td.col_richting.op,
div.aanbodlijstsluisgrid td.col_richting.af {
    background-repeat: no-repeat;
}


/* AanbodlijstDetail */

div#aanboddeellijst {
    margin-top: 30px;
}

    div#aanboddeellijst div#aanboddeellijstlist {
        margin: 0 auto;
        margin-bottom: 15px;
    }

        div#aanboddeellijst div#aanboddeellijstlist div.aanbodlijstsluisgrid table .col_dummy {
            /* In de 'gewone' aanbodlijst heeft de dummy kolom twee functies: ervoor zorgen dat iedere */
            /* table-row minstens één table-data-element heeft (omdat lege table-row-elementen niet geldig */
            /* zijn in html) en doordat iedere table-row een zichtbaar table-data-element heeft, zijn alle */
            /* rijen even hoog, waardoor de rijen van de verschillende sluizen naast elkaar exact oplijnen. */
            /* Dat laatste is in de deellijst niet nodig (want er staan geen sluizen naast elkaar), en de */
            /* dummy rij zorgt er tevens voor dat de tabel visueel niet exact gecentreerd wordt, want er staat */
            /* links een doorzichtige kolom die bij het bepalen van de breedte in acht genomen wordt. Door */
            /* de cellen onzichtbaar te maken, wordt dat voorkomen. */
            display: none;
        }

    div#aanboddeellijst div.ajax__tab_container {
        margin: 0 auto;
    }


/* AanbodlijstreisBasis */

div.aanbodlijstreisbasis {
    width: 720px;
    margin: 0 auto;
}

    div.aanbodlijstreisbasis div.row,
    div.tijpoorten div.row
    div.aanbodlijstreservatie div.row {
        margin-bottom: 5px;
    }

    div.aanbodlijstreisbasis div.row_info {
        height: 23px;
    }

    div.aanbodlijstreisbasis div.row_opm {
        height: 71px;
    }

    div.aanbodlijstreisbasis div.group {
        margin-bottom: 14px;
    }

    div.aanbodlijstreisbasis div.row div.cell {
        float: left;
    }


    div.aanbodlijstreisbasis div.row div.cell_sluis,
    div.aanbodlijstreisbasis div.row div.cell_schip {
        width: 480px;
    }

    div.aanbodlijstreisbasis div.row div.cell_richting,
    div.aanbodlijstreisbasis div.row div.cell_planned,
    div.aanbodlijstreisbasis div.row div.cell_volgnr,
    div.aanbodlijstreisbasis div.row div.cell_lengte,
    div.aanbodlijstreisbasis div.row div.cell_estimate,
    div.aanbodlijstreisbasis div.row div.cell_reisrichting,
    div.aanbodlijstreisbasis div.row div.cell_lengte,
    div.aanbodlijstreisbasis div.row div.cell_breedte,
    div.aanbodlijstreisbasis div.row div.cell_diepgang,
    div.aanbodlijstreisbasis div.row div.cell_tbt,
    div.aanbodlijstreisbasis div.row div.cell_niet_plannen,
    div.aanbodlijstreisbasis div.row div.cell_status {
        width: 240px;
    }

    div.aanbodlijstreisbasis div.row div.cell_kegels {
        width: 135px;
    }

        div.aanbodlijstreisbasis div.row div.cell_kegels input.text {
            width: 20px;
        }

    div.aanbodlijstreisbasis div.row div.cell_duur,
    div.aanbodlijstreisbasis div.row div.cell_kant {
        width: 160px;
    }

    div.aanbodlijstreisbasis div.row div.cell_locked,
    div.aanbodlijstreisbasis div.row div.cell_volzet {
        width: 160px;
    }

    div.aanbodlijstreisbasis div.row div.cell_cert {
        width: 105px;
    }

    div.aanbodlijstreisbasis div.row div.cell_vhf1028 {
        width: 197px;
    }

        div.aanbodlijstreisbasis div.row div.cell_vhf1028 select {
            width: 97px;
        }

    div.aanbodlijstreisbasis div.cell_info,
    div.aanbodlijstreisbasis div.cell_opm {
        width: 720px;
    }


    div.aanbodlijstreisbasis label {
        width: 76px;
        padding: 4px 4px 4px 0;
    }

    div.aanbodlijstreisbasis input.text,
    div.aanbodlijstreisbasis input.readonly,
    div.aanbodlijstreisbasis span.chb input,
    div.tijpoorten input.text,
    div.tijpoorten input.readonly,
    div.aanbodlijstreservatie input.text,
    div.aanbodlijstreservatie input.readonly {
        padding: 2px;
    }

    div.aanbodlijstreisbasis input.text,
    div.aanbodlijstreisbasis input.readonly,
    div.tijpoorten input.text,
    div.tijpoorten input.readonly,
    div.aanbodlijstreservatie input.text,
    div.aanbodlijstreservatie input.readonly {
        /* Omdat de meeste velden 'gewone' TextBoxes zijn, moeten de frameworkcontrols die in readonly mode ook als */
        /* als textbox gerenderd worden, niet de framework styles van die readonly textboxes overnemen, maar moeten ze */
        /* dezelfde stijl aanhouden als de 'gewone' textboxes. */
        height: 17px;
        border: 1px ridge Black;
        font-weight: normal;
        cursor: default;
    }

    div.aanbodlijstreisbasis input.text,
    div.aanbodlijstreisbasis span.chb input {
        margin-left: 80px;
    }


    div.aanbodlijstreisbasis div.datetimeselect input.txt_hour {
        /* Het framework stelt de afstand met '!important' in op 23px, maar daardoor */
        /* wordt de control breder dan de cellen in dit scherm. */
        margin-left: 19px !important;
    }

    div.aanbodlijstreisbasis div.row div.cell_sluis select {
        width: 160px;
    }

    div.aanbodlijstreisbasis div.row div.cell_richting select,
    div.aanbodlijstreisbasis div.row div.cell_reisrichting select,
    div.aanbodlijstreisbasis div.row div.cell_voorkeursmeerzijde select {
        width: 100px;
    }

    div.aanbodlijstreisbasis div.row div.cell_duur input.text,
    div.aanbodlijstreisbasis div.row div.cell_volgnr input.text,
    div.aanbodlijstreisbasis div.row div.cell_kant input.text,
    div.aanbodlijstreisbasis div.row div.cell_lengte input.text,
    div.aanbodlijstreisbasis div.row div.cell_breedte input.text,
    div.aanbodlijstreisbasis div.row div.cell_diepgang input.text,
    div.aanbodlijstreisbasis div.row div.cell_tbt input.text {
        width: 74px;
    }

    div.aanbodlijstreisbasis div.row div.cell_status input.text {
        width: 154px;
    }

    div.aanbodlijstreisbasis div.row div.cell_schip input.text,
    div.aanbodlijstreisbasis div.row div.cell_scheepstype input.text {
        width: 394px;
    }

    div.aanbodlijstreisbasis div.cell_info textarea,
    div.aanbodlijstreisbasis div.cell_opm textarea {
        width: 634px;
    }

    div.aanbodlijstreisbasis div.row div.cell_voorkeursmeerzijde label {
        width: 119px;
    }

    div.aanbodlijstreisbasis div.row div.cell_voorkeursmeerzijde select {
        margin-left: 122px;
        width: 103px;
    }

    div.aanbodlijstreisbasis div.cell_info textarea {
        height: 17px;
    }

    div.aanbodlijstreisbasis div.cell_opm textarea {
        height: 65px;
    }

    div.aanbodlijstreisbasis div.row div.cell_duur input.text,
    div.aanbodlijstreisbasis div.row div.cell_volgnr input.text,
    div.aanbodlijstreisbasis div.row div.cell_lengte input.text,
    div.aanbodlijstreisbasis div.row div.cell_breedte input.text,
    div.aanbodlijstreisbasis div.row div.cell_diepgang input.text {
        text-align: right;
    }

    div.aanbodlijstreisbasis div#buttons {
        margin: 0 auto;
        width: 624px;
    }

        div.aanbodlijstreisbasis div#buttons div.row {
            margin-bottom: 10px;
        }

        div.aanbodlijstreisbasis div#buttons input.button,
        div.aanbodlijstreisbasis div#buttons a.button {
            margin: 0 25px;
        }

        div.aanbodlijstreisbasis div#buttons input.button,
        div.tijpoorten input.button,
        div.aanbodlijstreservatie input.button,
        div.binnenvaart div.buttons input.button,
        div.aanmelding input.button {
            width: 158px;
        }

        div.aanbodlijstreisbasis div#buttons a.button {
            /* Om de hoogte en breedte te kunnen instellen. */
            display: block;
            /* Nodig door display: block. */
            float: left;
            /* De breedte van de link moet 2px minder zijn dan die van de knoppen om ze even breed te maken. */
            width: 156px;
            /* Style zoals framework buttons. */
            padding: 0;
            background-image: none;
            background-repeat: repeat-x;
            border: 1px solid #999999;
            line-height: 21px;
            vertical-align: middle;
            text-decoration: none;
            text-align: center;
        }

            div.aanbodlijstreisbasis div#buttons a.button:focus {
                /* Voorkomt dat er een stippellijn wordt weergegeven rond de link/knop wanneer die geselecteerd is, */
                /* zodat de link er niet anders uitziet dan de knoppen. */
                outline: 0;
            }

        div.aanbodlijstreisbasis div#buttons input.btnSave {
            margin-left: 195px;
        }

        div.aanbodlijstreisbasis div#buttons input.btnSave {
            margin-top: 10px;
            margin-left: 222px;
            width: 180px;
            font-weight: bold;
        }

        div.aanbodlijstreisbasis div#buttons a.phone-link.button {
            border: 1px ridge lightgray;
            float: right;
        }

            div.aanbodlijstreisbasis div#buttons a.phone-link.button::before {
                margin-right: 8px;
                font-weight: 100;
            }


div#aanbodlijstreisextra {
    width: 700px;
    margin: 0 auto;
    /* Nodig om de absoluut gepositioneerde labels zich ten opzicht van deze div te laten positioneren. */
    position: relative;
    overflow-y: auto;
}

    div#aanbodlijstreisextra div.row {
        height: auto;
    }

    div#aanbodlijstreisextra label {
        width: 126px;
    }

    div#aanbodlijstreisextra input.text,
    div#aanbodlijstreisextra textarea {
        margin-left: 130px;
        /* De textbox en het label zijn samen een stukje minder breed dan de parent div, zodat er nog een */
        /* verticale scrollbar naast kan. */
        width: 544px;
    }

    div#aanbodlijstreisextra textarea {
        /* Overschrijft de vaste hoogte die vanuit het framework wordt ingesteld. */
        height: auto;
    }

/* Tijpoorten */
div.tijpoorten {
    width: 439px;
    margin: 0 auto;
}

    div.tijpoorten fieldset {
        margin: 5px 0;
        padding: 10px;
        border: 1px solid Gray;
    }

        div.tijpoorten fieldset legend {
            font-weight: bold;
            padding: 0 5px;
        }

    /* Hoofdrij met Locatie en Diepgang */
    div.tijpoorten div.row {
        margin-bottom: 10px;
        overflow: hidden; /* Clear floats */
    }

        div.tijpoorten div.row div.colTijpoorten {
            float: left;
            width: 306px;
        }

            div.tijpoorten div.row div.colTijpoorten input {
                width: 234px;
            }

        div.tijpoorten div.row div.colDpgTp {
            float: left;
            width: 194px;
            margin-left: 10px;
        }

    /* Labels en inputs */
    div.tijpoorten label {
        width: 61px;
        padding: 4px 4px 4px 0;
        display: inline-block;
    }

    div.tijpoorten input.text {
        margin-left: 65px;
    }

    div.tijpoorten input.dpg_tp {
        width: 37px;
        text-align: right;
    }

    /* Calc button */
    div.tijpoorten div.row div.colDpgTp input.btn_calc {
        border-width: 0;
        position: absolute;
        margin-left: 12px;
        width: 22px;
        height: 22px;
        cursor: pointer;
    }

    /* Van en Tot fieldsets */
    div.tijpoorten fieldset fieldset#fsVan,
    div.tijpoorten fieldset fieldset#fsTot {
        border: 0;
        margin: 0;
        width: 43%;
        padding: 0;
        float: left;
    }

    div.tijpoorten fieldset fieldset#fsVan {
        border-right: 2px solid Black;
        padding-right: 10px;
    }

    div.tijpoorten fieldset fieldset#fsTot {
        float: right;
        padding-left: 10px;
    }

    div.tijpoorten fieldset fieldset legend {
        font-weight: bold;
        margin: 5px 0 15px 0;
        width: 100%;
        text-align: center;
        padding: 0;
    }

/* Datetime with button container */
.datetime-with-button {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 5px;
    margin-bottom: 10px;
    height: 30px;
}

    .datetime-with-button .datetimeselect {
        flex: 1;
        margin-left: 0 !important;
    }

/* Diepgangcontrole buttons */
.btn_diepgangcontrole {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 1px solid #999;
    background-color: white;
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
}

    .btn_diepgangcontrole:hover {
        opacity: 0.8;
        background-color: #f0f0f0;
    }

    .btn_diepgangcontrole:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* DateTimeSelect controls binnen Van/Tot fieldsets */
div.tijpoorten fieldset fieldset .datetimeselect {
    margin-left: 0;
    width: 100%;
}

div.tijpoorten fieldset fieldset div.row {
    margin-bottom: 15px;
}

    div.tijpoorten fieldset fieldset div.row:last-child {
        margin-bottom: 0;
    }

/* Save button */
div.tijpoorten input.button {
    clear: both;
    float: right;
    margin-top: 20px;
    margin-right: 0;
    width: 158px;
}

/* Specifiek voor Ajax tab container (popup) */
div.ajax__tab_container div.tijpoorten {
    width: 480px;
}

    div.ajax__tab_container div.tijpoorten div.row div.colDpgTp {
        width: 141px;
    }

/* Historiek */

div .aanbodlijsthistoriekgrid {
    height: 475px;
    overflow-y: auto;
}

    div.aanbodlijsthistoriekgrid table tr.alt {
        background-color: #E8E8E8;
    }

    div.aanbodlijsthistoriekgrid table th,
    div.aanbodlijsthistoriekgrid table td {
        border: 1px solid black;
        padding: 2px 2px 2px 4px;
    }

    div.aanbodlijsthistoriekgrid table th {
        background-color: #F5CA23;
    }

    div.aanbodlijsthistoriekgrid table {
        width: 100%;
    }

/* Reservatie */

div.aanbodlijstreservatie {
    width: 219px;
    margin: 0 auto;
}

    div.aanbodlijstreservatie div.row label {
        width: 51px;
    }

    div.aanbodlijstreservatie div.row input.text,
    div.aanbodlijstreservatie div.row select {
        margin-left: 55px;
    }

    div.aanbodlijstreservatie div.cell_lengte input.text,
    div.aanbodlijstreservatie div.cell_breedte input.text {
        text-align: right;
    }

    div.aanbodlijstreservatie input.button {
        float: right;
    }


/* Binnenvaartlijst */

div.binnenvaart {
    position: absolute;
    left: 0;
    /* Menu-height */
    top: 25px;
    right: 0;
    bottom: 0;
}

    div.binnenvaart div.fwGridViewWrap {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        /* Stretch de div tot aan de onderrrand van de parent-div, verminderd met de hoogte van de disclaimer. */
        bottom: 30px;
        overflow-y: auto;
    }

    div.binnenvaart div.pnlGridFooter {
        /* Disclaimer onderaan het scherm weergeven */
        position: absolute;
        bottom: 0;
    }


    div.binnenvaart div.header,
    div.binnenvaart div.buttons {
        margin: 15px auto;
    }

    div.binnenvaart div.header {
        margin-top: 0;
        text-align: center;
        width: 800px;
    }

    div.binnenvaart div.buttons {
        display: flow-root;
        margin: 0 auto;
        margin-bottom: 15px;
        text-align: center;
        width: 500px;
    }

        div.binnenvaart div.buttons input.btnExtra,
        div.binnenvaart div.buttons input.btnHandleiding {
            width: fit-content;
            height: fit-content;
        }

        div.binnenvaart div.buttons input.btnExtra {
            margin-right: 20px !important;
        }

        div.binnenvaart div.buttons input.btnExtra,
        div.binnenvaart div.buttons input.btnHandleiding {
            background-color: white;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #234f8c;
            text-decoration: none;
            font-size: 14px;
            padding: 12px 16px;
            margin: 5px auto;
            border-radius: 8px;
            transition: all 0.25s ease;
            border: 1px solid rgba(35, 79, 140, 0.08);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            box-sizing: border-box;
            position: relative;
            text-align: center;
        }

            div.binnenvaart div.buttons input.btnExtra:hover,
            div.binnenvaart div.buttons input.btnHandleiding:hover {
                background-color: white;
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }

/* Binnenvaart - Aanmelding */

div.aanmelding {
    width: 310px;
    margin: 0 auto;
}

    div.aanmelding fieldset {
        margin-top: 10px;
        margin-bottom: 10px;
        border: 1px solid Gray;
    }

    div.aanmelding div.row input.chb,
    div.aanmelding div.cell_eni,
    div.aanmelding div.cell_richting,
    div.aanmelding div.cell_tijdstip,
    div.aanmelding div.cell_diepgang {
        /* Zelfde als de padding-left + border-width-left van de fieldsets. */
        margin-left: 23px;
    }


    div.aanmelding div.row label {
        width: 96px;
    }

    div.aanmelding div.row input.text,
    div.aanmelding div.row select {
        margin-left: 100px;
    }

    div.aanmelding div.cell_diepgang input.text,
    div.aanmelding div.cell_lengte input.text,
    div.aanmelding div.cell_breedte input.text {
        text-align: right;
    }

    div.aanmelding div.cell_richting select,
    div.aanmelding div.cell_richting select.option,
    div.aanmelding div.cell_kegels select,
    div.aanmelding div.cell_kegels select.option {
        padding: 0 2px;
    }

    div.aanmelding div.cell_tijdstip select.uren,
    div.aanmelding div.cell_tijdstip select.minuten {
        width: 45px;
        text-align: center;
    }

    div.aanmelding div.cell_tijdstip select.minuten {
        margin-left: 0;
    }

    div.aanmelding div.cell_duwkonvooi label,
    div.aanmelding div.cell_cert label,
    div.aanmelding div.row cell_terugkoppeling_gewenst label {
        margin-left: 25px;
        text-align: left;
    }


    div.aanmelding input.button {
        float: right;
    }

    div.aanmelding fieldset.fs_terugkoppeling {
        margin-bottom: 10px;
        margin-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

        div.aanmelding fieldset.fs_terugkoppeling div.row label {
            width: 62px;
        }

        div.aanmelding fieldset.fs_terugkoppeling div.row.cell_terugkoppeling_gewenst {
            margin-left: 10px;
        }

            div.aanmelding fieldset.fs_terugkoppeling div.row.cell_terugkoppeling_gewenst label {
                width: 158px;
            }

        div.aanmelding fieldset.fs_terugkoppeling div.row input.text {
            margin-left: 66px;
            width: 190px;
        }

        div.aanmelding fieldset.fs_terugkoppeling .cell_disclaimer {
            height: 93px;
            text-align: center;
            margin-top: 15px;
        }


/* Parameters */

table#paramTable {
    border-collapse: collapse;
}

    table#paramTable tr.header {
        background-color: teal;
        color: white;
    }

    table#paramTable tr td.col_name {
        width: 250px;
    }

    table#paramTable tr td.col_value {
        width: 50px;
        text-align: right;
    }


/* Kolkindeling */

div.canvas {
    min-height: 550px;
}

div#kolkindeling div#buttons {
    text-align: center;
    margin: 10px 0 10px 0;
}

    div#kolkindeling div#buttons input.btnPrevious,
    div#kolkindeling div#buttons input.btnEditKolk,
    div#kolkindeling div#buttons input.btnSaveKolk,
    div#kolkindeling div#buttons input.btnResetKolk,
    div#kolkindeling div#buttons input.btnNext {
        /* Het framework lijnt knopppen rechts op. Dat is hier niet van toepassing. */
        float: inherit;
        /* Het framework voegt een rechter margin toe om knoppen op te lijnen met inputvelden. */
        /* Dat is hier niet van toepassing. */
        margin-right: 10px;
        /* Door een gelijk rechter en linker margin komen de knoppen altijd in het midden van de */
        /* beschikbare ruimte, onafhankelijk van welke en hoeveel knoppen zichtbaar zijn. */
        margin-left: 10px;
        width: 140px;
    }

    div#kolkindeling div#buttons input.btnSaveKolk {
        width: 180px;
    }

    div#kolkindeling div#buttons input.btnPrevious {
        /* De navigatieknopppen links en rechts staan op een iets grotere afstand van de andere */
        /* knoppen, dan die andere knoppen onderling. */
        margin-right: 100px;
    }

    div#kolkindeling div#buttons input.btnNext {
        /* De navigatieknopppen links en rechts staan op een iets grotere afstand van de andere */
        /* knoppen, dan die andere knoppen onderling. */
        margin-left: 100px;
    }


/* Kolktekening */

tspan {
    /* Zonder dit wordt de font-size toegekend aan svg-elementen genegeerd en wordt de default */
    /* css font-style op select * toegepast. */
    font-size: unset;
}

/* Wachtwoord herstellen: kleur knoppen */
div.stap div.submit_row input.btn_submit,
div.stap_2 div.resend_info input.btn_submit,
div.stap_4 div.col input.btn_submit {
    background-color: #00AEDB;
    border: 1px solid #666666;
}

body div .lblTitle {
    color: white;
}

body div.stap div.row div.resend_info p {
    color: black;
}

a.phone-link.button {
    background-color: rgb(240, 240, 240);
}


/* Disabled knoppen */
/* CSS Selectors for CSS2 and CSS3 both */
input.button:disabled,
input.button[disabled],
a.button[disabled] {
    border: 1px solid #999999;
    background-color: #cccccc;
    color: #666666;
}

.lnkHideDetailup,
.lnkHideDetaildown {
    background-repeat: no-repeat;
}

.lnkHideDetailup {
    background: url(../../../Framework/Images/up_nacht.png);
}

.lnkHideDetaildown {
    background: url(../../../Framework/Images/down_nacht.png);
}

div.GtiViewModeControl {
    width: 250px;
    vertical-align: central;
}

div.pnlSelect div.viewmode {
    width: 215px;
}

div.pnlSelect div.row div.viewmode label {
    width: 44px;
}

div.pnlSelect div.row div.viewmode select {
    margin-left: 48px;
}


/* Aanpassing refresh label timer */

div.pnlRefreshInfoTopleft {
    display: none;
}

body div.gtiheader span#gtiheaderright {
    right: initial;
}

body div.gtiheader div#gtiheadermiddle {
    right: unset;
    background-repeat: unset;
}

/* MFA */

/* overrride op fw style */
div.pnlMfa {
    background-color: #F5CA23;
    width: 255px !important;
    margin-bottom: 10px !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    margin-top: 10px !important;
}

div div.pnlMfa h2 {
    font-size: 23px !important;
}

div div.pnlMfa h3 {
    background-color: #00AEDB;
    padding: 15px;
    border: 1px solid white;
}

div.pnlMfa input[type="submit"] {
    background-color: #00AEDB;
    border: 1px solid black;
}


div#gtiheaderinner div.gtiprognose {
    margin: 0 10px 0 40px;
    padding: 5px 10px 5px 10px;
    width: 620px;
    height: 62px;
    overflow-y: auto;
    position: absolute;
    left: 180px;
    background-color: orange;
    color: white;
    font-weight: bold;
    height: 13px;
    width: 393px;
    left: 526px;
    padding: 5px 10px 5px 10px;
    border-radius: 0;
    z-index: 1000 !important;
    text-align: center;
}

div.pnlPrognoseInfoTopLeft {
    width: 0;
    height: 0;
    border-top: 23px solid orange;
    border-right: 23px solid transparent;
    float: right;
    text-align: right;
    z-index: 1000 !important;
}


div.pnlPrognoseInfoTopRight {
    width: 0;
    height: 0;
    border-top: 23px solid orange;
    border-left: 23px solid transparent;
    float: left;
    text-align: right;
    margin-left: 543px;
    z-index: 1000 !important;
    position: absolute;
}


@-webkit-keyframes blinker {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        opacity: 1.0;
    }
}

div.prognoseInfoContainer {
    display: none;
}

div.gtiprognose .blink {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    animation: blinker 2s linear infinite;
    background-color: red;
    margin-right: 5px;
}

div.gtiprognose .content {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}


div.aanbodlijstselect input.btnIsPaused {
    background-color: orange;
    color: white;
}

div.tijpoorten div.row div.colDpgTp input.btn_calc {
    border-width: 0;
    position: absolute;
    margin-left: 13px;
    width: 22px;
    height: 22px;
}

    div.tijpoorten div.row div.colDpgTp input.btn_calc.fwGREEN,
    div.tijpoorten div.row div.colDpgTp input.btn_calc.fwbgORANGE,
    div.tijpoorten div.row div input.btn_diepgangcontrole {
        margin-top: -2px;
    }

        div.tijpoorten div.row div.colDpgTp input.btn_calc.fwGREEN,
        div.tijpoorten div.row div input.btn_diepgangcontrole.fwGREEN {
            border: 2px green solid !important;
        }

        div.tijpoorten div.row div.colDpgTp input.btn_calc.fwbgORANGE,
        div.tijpoorten div.row div input.btn_diepgangcontrole.fwbgORANGE {
            border: 2px red solid !important;
        }

/* Diepgangcontrole button styling */

div.tijpoorten fieldset#fsVan div.row,
div.tijpoorten fieldset#fsTot div.row {
    height: 28px;
}

    div.tijpoorten fieldset#fsVan div.row div.col.diepgangcontrol {
        width: 40px;
        text-align: center;
        vertical-align: middle;
        float: right;
        margin-right: 15px;
        margin-left: 5px;
    }

    /* Aanpassing voor de Van tijdvelden om ruimte te maken voor de buttons */
    div.tijpoorten fieldset#fsVan div.row div.col:first-child {
        width: calc(100% - 50px);
        float: left;
    }

.btn_diepgangcontrole {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    display: inline-block;
    margin-left: 5px;
}

    .btn_diepgangcontrole:hover {
        opacity: 0.8;
    }

    .btn_diepgangcontrole:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Layout container for datetime input with button */
.datetime-with-button {
    display: inline-flex;
    align-items: center;
    width: 100%;
    gap: 5px;
}

    .datetime-with-button .datetimeselect {
        flex: 1;
        margin-left: 0 !important;
    }

    .datetime-with-button .btn_diepgangcontrole {
        flex-shrink: 0;
        margin-left: 0;
        width: 24px;
        height: 24px;
        border: none;
        background: transparent;
        cursor: pointer;
        margin: 0;
        padding: 0;
        vertical-align: middle;
    }

        .datetime-with-button .btn_diepgangcontrole:hover {
            opacity: 0.8;
        }

        .datetime-with-button .btn_diepgangcontrole:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

div.tijpoorten fieldset fieldset#fsTot {
    float: right;
    margin-right: 0;
    /* Remove the extra margin that was pushing it too far right */
}

/* Update datetime-with-button container */
.datetime-with-button {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 5px;
}

    .datetime-with-button .datetimeselect {
        flex: 1;
        margin-left: 0 !important;
    }

    /* Ensure the button stays properly sized and positioned */
    .datetime-with-button .btn_diepgangcontrole {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        border: 1px solid #999;
        background: transparent;
        cursor: pointer;
        padding: 0;
        vertical-align: middle;
        margin: 0;
    }

/* Remove any extra margins on the datetime controls inside the container */
div.tijpoorten fieldset fieldset .datetime-with-button input {
    margin-left: 0;
}

div.tijpoorten fieldset fieldset#fsTot {
    float: right;
    margin-right: 0;
    width: 207px;
}


div.sluisplanningedit div.tijpoorten fieldset fieldset#fsVan {
    margin-top: 4px;
}


/* Wachtwoord aanpassen */
body form i.bi-eye-slash {
    font-size: 25px;
    margin-left: 298px;
    margin-top: -24px;
}

/* Hotfix */
body div.sluisplanningedit div.tijpoorten fieldset fieldset#fsVan {
    width: 189px;
}

body div.sluisplanningedit div.tijpoorten fieldset fieldset#fsTot {
    width: 200px;
}

body div.sluisplanningedit div.tijpoorten fieldset fieldset#fsVan {
    padding-right: 0 !important;
}