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

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


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

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

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

div.GtiInfoSelect div.row div.colFilterReizen 
{
    height: 26px;
    width: 560px;
}

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

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.geoCol
{
    /*width: 32px; al gezet door fw */
    /*margin-right: 0px; al gezet door fw */

    /* override margin-left van 15px door fw */
    margin-left: 0;
}


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

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

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

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

div.sluisplanningedit fieldset fieldset#fsTot
{
    float: right;
}


div.sluisplanningedit fieldset fieldset#fsVan legend,
div.sluisplanningedit fieldset fieldset#fsTot legend
{
    font-weight: bold;

    margin: 5px 0;

    width: 100%;
    text-align: center;

    /* Overwrite fw padding */
    padding: 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: 162px;
}


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 div.row div.colTijpoorten
{
    float: left;
    width: 198px;
}

div.tijpoorten div.row div.colDpgTp
{
    float: right;
    width: 145px;
}

div.ajax__tab_container div.tijpoorten div.row div.colDpgTp
{
    width: 194px; /* Aanbodslijst popup */
}

div.ajax__tab_container div.tijpoorten input.button
{
    margin-right: 50px; /* Aanbodslijst popup */
}

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
{
    margin-top: -2px;
}

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

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

div.tijpoorten div.row label
{
    width: 61px;
    padding: 4px 4px 4px 0;
}

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

div.tijpoorten div.row input.diepgang
{
    width: 37px;

    text-align: right;
}


div.tijpoorten div.tijpoortheader span.van,
div.tijpoorten div.tijpoortheader span.tot,
div.tijpoorten div.tijpoort div.cell
{
    float: left;

    padding-top: 3px;
    padding-bottom: 4px;
}

div.tijpoorten div.tijpoort,
div.tijpoorten div.tijpoortheader
{
    clear: both;
}

div.tijpoorten div.tijpoortheader span.van,
div.tijpoorten div.tijpoortheader span.tot
{
    display: block;

    width: 164px;
    text-align: center;

    line-height: 23px;
    vertical-align: middle;

    font-weight: bold;
}

div.tijpoorten div.tijpoortheader span.van,
div.tijpoorten div.tijpoort div.van
{
    padding-right: 30px;
}

div.tijpoorten div.tijpoortheader span.tot,
div.tijpoorten div.tijpoort div.tot
{
    padding-left: 30px;
}

div.tijpoorten div.tijpoort div.van
{
    border-right: 2px solid black;
}

div.tijpoorten div.tijpoort div.van div.datetimeselect,
div.tijpoorten div.tijpoort div.tot div.datetimeselect
{
    margin-left: 0;
}

div.tijpoorten div.tijpoort div.van input.readonly,
div.tijpoorten div.tijpoort div.tot input.readonly
{
    margin-left: 0;
}

div.tijpoorten input.button
{
    clear: both;
    float: right;
    margin-top: 20px;
    margin-right: 50px;
}


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