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: 950px;
}

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;
        display: flex;
        align-items: center;
        gap: 8px;
    }

/* 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.vaarvensters div div fieldset div.row:first-of-type {
    margin-bottom: 15px;
}

div.vaarvensters > div > div:nth-of-type(2) > div > fieldset > div.row:first-of-type {
    margin-bottom: 0;
}

/* 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: 246px;
}


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

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


/* 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.vaarvensters div 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.vaarvensters div input.text,
    div.vaarvensters div input.readonly,
    div.aanbodlijstreservatie input.text,
    div.aanbodlijstreservatie input.readonly {
        padding: 2px;
    }

    div.aanbodlijstreisbasis input.text,
    div.aanbodlijstreisbasis input.readonly,
    div.vaarvensters div input.text,
    div.vaarvensters div 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.vaarvensters div 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.vaarvensters div {
    margin: 0 auto;
}

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

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

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

div.vaarvensters div div.row div.colTijpoorten {
    float: left;
    width: 313px;
}

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

    div.vaarvensters div div.row div.colDpgTp {
        float: left;
        width: 154px;
        margin-left: 10px;
    }

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

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

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

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

div.ajax__tab_panel div.vaarvensters div.pnlTijpoorten div.row div.colDpgTp input.btn_calc {
    margin-left: 20px;
}

div.ajax__tab_panel div.tijpoorten input.btnSave {
    float: right;
    margin-top: 20px;
    width: 100px;
}

/* Layout fix */
div.vaarvensters div.pnlStroomvensters div.row div.colDpgTp input.btn_calc {
    margin-top: 24px;
    margin-left: 126px;
}

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

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

    div.vaarvensters div fieldset fieldset.fsTot {
        float: right;
        padding-left: 10px;
        width: 207px;
    }

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

/* Datetime with button container - geconsolideerde versie */
.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;
}

.datetime-with-button:has(input[readonly]) {
    display: grid;
}

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

.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.vaarvensters div fieldset fieldset .datetimeselect {
    margin-left: 0;
    width: 100%;
}

/* Aanbodlijst */
div.ajax__tab_container div.vaarvensters div fieldset fieldset .datetimeselect {
    margin-left: 0;
    width: 164px;
}

div.vaarvensters div fieldset fieldset .datetimeselect.readonly {
    margin-left: 0;
    width: 164px;
}

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

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

div.ajax__tab_panel div.tijpoorten 
{
    width: 514px;
    margin: 0 auto;
}


/* Save button */
div.vaarvensters div 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.vaarvensters div 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.vaarvensters div div.row div.colDpgTp input.btn_calc.fwGREEN,
div.vaarvensters div div.row div.colDpgTp input.btn_calc.fwbgORANGE,
div.vaarvensters div div.row div input.btn_diepgangcontrole {
    /*margin-top: -2px;*/
}

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

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

/* Diepgangcontrole button styling */

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

    div.vaarvensters div 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.vaarvensters div fieldset.fsVan div.row div.col:first-child {
        width: calc(100% - 50px);
        float: left;
    }

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

div.sluisplanningedit div.vaarvensters div fieldset fieldset.fsVan {
    margin-top: 4px;
    margin-left: 8px;
}


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