body
{
    padding: 10px;
}

h2 
{
    font-size: 20px;
    font-style:italic;
    font-weight:bold;
    text-align:right;
}

/* FwGlobal: HiddenFieldCssClass */
/* Debug icoontje rechts uitlijnen op de pagina */
.debug 
{
	text-align: right; 
	display: block;   
}


.sortable:hover
{
    background-color: #898989;
    text-decoration: underline;
}

.sort_image
{
    position: absolute;
    margin: 5px;
}


div.iu_buttons 
{
    float: right;
}

div.iu_buttons input.button
{
    width: 150px;
    margin-left: 4px;
}

.update_progress
{
    position: fixed;
    height: 16px;
    width: 300px;
    top: 50%;
    left: 50%;
    margin-top: -13px; /* (height + padding-top + padding-bottom) / 2 */
    margin-left: -150px; /* width / 2 */
    padding: 5px;
    background-color: #ffff99;
    z-index: 3;
    border: 2px ridge #c1c100;
}

.update_progress img
{
    position: absolute;
    height: 16px;
    width: 16px;
}

.update_progress span 
{
    margin-left: 26px;
    line-height: 16px;
    font-size: 13px;
}

div.buiten_onder
{
    text-align: center;
}

.devMsg 
{
    display: block;
    padding: 5px;
    background-color: Red;
    color: White;
    font-weight: bold;
    border: 2px solid White;
}

div.debuginfo 
{
    font-weight: bold;
}

div.debuginfo h3
{
    font-size: 11px;
    margin-bottom: 10px;
    margin-top: 15px;
}

div.debuginfo h3.first
{
    margin-top: 0;
}

div.debuginfo ul.statements li span
{
    margin-left: 5px;
}

div.debuginfo ul.statements li.dbInfoFout
{
	color: Red;	
}

div.debuginfo ul.statements li.dbInfoExtraInfo
{
	color: Orange;	
}

/* SwitchUser: aanduiding dat men ingelogd is als iemand anders */
div.debuginfo ul.sessie li.switch
{
	background-color: Orange;
}



div.pnlConfirm 
{
    margin-bottom: 25px;
}

div.pnlConfirm div
{
    text-align: center; /*IE centreren van de knop*/
    margin: 0 auto;
}

div.pnlConfirm input
{
    margin: 0 auto;       /* bevestig-knop gecentreerd */
}

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

/* Icoon voor het tonen/verbergen van de DataControl rechts weergeven */
div.pnlHideDetail 
{
    margin-top: -40px;
    position: absolute;
    right: 8px;
    text-align: right;
}

div.fwRapport div.tabData
{
    height: 100%;
}

div.FwTreeview
{
	height: 300px; 
	width: auto;
    overflow: auto; /* Zet een scrollbar indien nodig */
    border: 1px solid black;
}


/* Error pagina */
/* ============ */

#error_content 
{
    padding: 50px 50px 50px 150px;
    width: 662px;
}

#error_content p 
{
    line-height: 20px;
}

#error_content div.errorData 
{
    margin-top: 25px;
    width: 600px;
    padding: 30px;
    border: 1px solid Gray;
}

#error_content div.errorData p 
{
    padding-left: 0;
    margin-bottom: 30px;
}

#error_content div.errorData p.label 
{
    position: relative;
    font-weight: bold;
    font-style: italic;
}

/* Bij gebruik in popup is het scherm een stuk kleiner.*/

body.Popup #error_content
{
    margin: 0;
    width: auto;
    margin-left: 0;
}

body.Popup #error_content div.errorData 
{
    margin-top: 25px;
    width: auto;
    padding: 0;
    border: 1px solid Gray;
}

/******************* FwRadMenu **********************/

/* Menu - Kleur */

/* Menu - Kleur: default */

div.RadMenu
{
    /* Algemene achtergrondkleur van de menu */
    background-color: #444444;
}

div.RadMenu li.rmItem a
{
    /* Default tekstkleur van menu-items. */
    color: White;
}

div.RadMenu li.rmItem a.external {
    margin-right: 5px;  
}

/* Menu - Kleur: active */

/* Hover over root-menu-items. Niet alle menu-items klappen open, dus de 'rmExpanded' css-klasse volstaat niet. */
/* Op de link omdat daar de :hover pseudo selector op van toepassing is. */
div.RadMenu ul.rmRootGroup li.rmItem a.rmLink:hover,
/* Tijdens het klikken op een menu-item (root en child). */
/* Op de link omdat de css-klasse 'rmFocused' daaraan toegekend wordt. */
div.RadMenu li.rmItem a.rmFocused,
/* Een opengeklapt (root-)item. Hover alleen volstaat niet omdat het item ook verkleurd moet blijven als de */
/* cursor niet meer boven het item, maar boven een van de opgeklapte children staat. */ 
/* Op de link om dat de css-klasse 'rmExpanded' daaraan toegekend wordt. */
div.RadMenu li.rmItem a.rmExpanded,
/* De children van een opgeklapt item, dus de uitgeklapte items. */ 
/* Niet op de link, want niet alle menu-items bevatten een link. */
div.RadMenu ul.rmRootGroup li.rmItem div.rmSlide ul.rmGroup
{
    background-color: #CEC251;
}

/* Tekstkleur rechtstreeks op de elementen die zelf tekst bevatten. */
/* Hover over root-menu-items. Niet alle menu-items klappen open, dus de 'rmExpanded' css-klasse volstaat niet. */
div.RadMenu ul.rmRootGroup li.rmItem a.rmLink:hover,
/* Link tijdens het klikken op een menu-item (root en child). */
div.RadMenu li.rmItem a.rmFocused,
/* Link van een opengeklapt (root-)item. */ 
div.RadMenu li.rmItem a.rmExpanded,
/* Links in de children van een opgeklapt item, dus de uitgeklapte items. */ 
div.RadMenu ul.rmRootGroup li.rmItem div.rmSlide ul.rmGroup li.rmItem a,
/* Label in menu-items met een checkbox */
div.RadMenu ul.rmGroup li.sysCheckbox label
{
    color: Black;
}


/* Menu - Kleur: hover */

/* Hover over menu-items van het tweede niveau. */
/* Opgelet, dit werkt enkel voor menu-items die een hyperlink bevatten, en dus niet op menu-items met bvb. een checkbox in. */
div.RadMenu ul.rmRootGroup li.rmItem div.rmSlide ul.rmGroup li.rmItem a.rmLink:hover
{
    Background-color: White;
    color: Black;
}


/* Menu - Kleur: misc */

/* Menu-item waarvan de children niet openklappen, maar onder het menu-item zelf worden weergegeven. */
div.RadMenu ul.rmRootGroup li.rmItem div.rmSlide ul.rmGroup li.rmItem a.subcategory
{
    background-color: #444444;
    color: White;
}

/* Images in de lijst */

.checkedgreen
{
    height: 23px;
    width: 23px;
    display: inline-block;
}  

.checkedgreen:after
{
    color: darkgreen;
    content: '\2713';
    font-size: 15px;
}

/* Tot hier opgekuist! */







* html div.RadMenu_TRS .rmRootGroup {	
    padding: 0;	
    left: 0;	
    margin-bottom: 0;
    position: relative
}

* html div.RadMenu_TRS .rmRootGroup .rmItem .MenuImage
{
    margin-bottom: -2px !important;
}

div.MobileMenu 
{
    height: 27px;
    margin-bottom: 10px;
    cursor: pointer;
}

div.RadMenu_TRS
{
    position: fixed;
}

div.MobileMenu div.RadMenu_TRS
{
left:50%;
margin:0 auto;
}

.RadMenu_TRS .rmRootGroup
{
    border: 1px solid #010101;
    border-top-color: #383838;
}

div div.RadMenu_TRS ul.rmActive, 
div div.RadMenu_TRS ul.rmRootGroup {
    display: table-row;
}

div.RadMenu_TRS ul.rmRootGroup li.sysCheckbox
{
    min-width: 135px;
}

div.RadMenu_TRS ul.rmRootGroup li.sysCheckbox div.rmText
{
    padding: 0 0 0 20px;
}

div.RadMenu_TRS ul.rmRootGroup li.sysCheckbox div.rmText input
{
    height: 25px;
    margin: 0;
}

div.RadMenu_TRS ul.rmRootGroup li.sysCheckbox div.rmText label
{
    text-align : left;
    margin: 1px 0 0 0;
    padding: 4px;
    width: 94px;
}

html>body div.RadMenu_TRS ul.rmRootGroup a.rmLink,
html>body div.RadMenu_TRS ul.rmRootGroup a.rmTemplate
{
    height: 25px;
    text-decoration: none;
}

html>body div.RadMenu_TRS ul.rmRootGroup a.rmLink span.rmText 
{
    height: 15px;    
}


* html div.RadMenu_TRS ul.rmRootGroup a.rmLink,
* html div.RadMenu_TRS ul.rmRootGroup a.rmTemplate
{
    text-decoration: none;
}

html>body div.RadMenu_TRS ul.rmRootGroup a.rmLink span.rmText,
html>body div.RadMenu_TRS ul.rmRootGroup a.rmTemplate span.rmText
{   
    padding: 5px 20px;
}


div.RadMenu_TRS ul.rmRootGroup a.rmLink span.rmText,
div.RadMenu_TRS ul.rmRootGroup a.rmTemplate span.rmText
{
    vertical-align: middle;
    text-decoration: none;
}

html>body div.RadMenu_TRS ul.rmRootGroup a.BerichtenImage span.rmText 
{
    padding: 0;
}

.RadMenu_TRS .rmLink:focus,
.RadMenu_TRS .rmFocused
{
    outline: 0;
}

.RadMenu_TRS .rmExpanded
{
    z-index: 10000;
    position: relative;
}

.RadMenu_TRS .rmGroup .rmLink,
.RadMenu_TRS .rmGroup .rmTemplate
{
    text-decoration: none;
}

.RadMenu_TRS .rmLink,
.RadMenu_TRS .rmTemplate
{
    font: normal 12px Arial, sans-serif;
}

* html .RadMenu_TRS .rmText
{
    padding: 5px 20px 5px;
}

.RadMenu_TRS .rmText
{
    padding: 6px 20px 6px;
}

/*Deze classe zal ervoor zorgen dat rmText wordt overridden */
.RadMenu .BerichtenImage .rmText 
{ 
    text-align: center !important; 
    padding: 0 0 0;
} 

.RadMenu_TRS .rmGroup .rmLink .rmText
{
    font-size: 11px;
}

.RadMenu a.rmImageOnly.BerichtenImage .rmLeftImage
{
    padding-left: 5px;
    padding-right: 6px;
    padding-top: 3px;
}

/* </expand arrows styling> */

.RadMenu_TRS .rmHorizontal .rmItem 
{ 
    border-right: 1px solid #353535;
}

.RadMenu_TRS .rmHorizontal .rmLast 
{ 
    border-right: 0; 
}

.RadMenu_TRS .rmVertical .rmItem 
{ 
    border-bottom: 1px solid #353535; 
}
    
.RadMenu_TRS .rmVertical .rmLast 
{ 
    border-bottom: 0; 
    padding-bottom: 1px; 
}

.RadMenu_TRS .rmRootGroup .rmGroup .rmItem
{
    border-right: 0; 
    border-bottom: 0; 
    padding-bottom: 0; 
}

.RadMenu_TRS .rmGroup
{
    border: 1px solid #828282;
}

.RadMenu_TRS .rmGroup .rmExpanded
{
    z-index: 1000;
}


.RadMenu_TRS .rmRootGroup .rmSeparator,
.RadMenu_TRS .rmGroup .rmSeparator
{
    border-top: 1px solid #676767;
    border-bottom: 0;
}

.RadMenu_TRS .rmSeparator .rmText
{
    display: none;
}

.RadMenu_TRS .rmHorizontal .rmSeparator
{
    height: 20px;
    width: 1px;
    line-height: 20px;
    border: 0;
}

.RadMenu_TRS .rmVertical .rmSeparator
{
    height: 1px;
    margin: 3px 0;
    border: 0;
    line-height: 1px;
}

.RadMenu_TRS .rmSlide
{
    margin: -1px 0 0 -1px !important;
}

.RadMenu_TRS .rmHorizontal .rmSlide
{
    margin-top: -2px !important;
}

.RadMenu_TRS .rmGroup .rmSlide
{
    margin: 0 !important;
}

html>body div.RadMenu_TRS ul.rmRootGroup a.MenuImage span.rmText 
{
    padding: 0;
}

html>body div.RadMenu_TRS ul.rmRootGroup a.MenuImage,
html>body div.RadMenu_TRS ul.rmRootGroup a.MenuImage img
{
    width: 25px;
}

.RadMenu .MenuImage .rmText { 
    text-align: center !important; 
    padding: 0 0 0;
}


/* Begin: patch om afbeeldingen in menu-items gecentreerd te krijgen */

div.RadMenu a.rmImageLink
{
    text-align: center;
}

div.RadMenu a.rmImageLink img.rmLeftImage
{
    /* override RAD float left om image in een item. */
    float: none;
}

div.RadMenu a.rmImageLink span
{
    /* In de RAD menu wordt altijd een span gerenderd, ook als er geen tekst */
    /* is om erin weer te geven. Om te voorkomen dat het aanklikbare gebied  */
    /* daardoor groter zou zijn dan het menu-item zelf, wordt ervoor gezorgd */
    /* dat de span niet visible is én geen plaats inneemt.                   */
    display: none;
}

/* Einde: patch om afbeeldingen in menu-items gecentreerd te krijgen */

/* Bij radwindows geen icoon tonen */
.RadWindow_Default a.rwIcon
{
    background-image:none !important;
}

/* SetTheme afbeeldingen */
/* ===================== */

div.RadMenu a.rmImageTheme img.rmLeftImage
{
    /* De hoogte van de menu-items is 25px en de afbeeldingen zijn 19px */
    /* dus door boven en onder 3px padding bij te doen, staan de afbeeldingen */
    /* verticaal gecentreerd. */
    padding: 3px;    
}

a.Switchback
{
    background-color : Orange;
}

a.Switchback span.rmText
{
    color: Black;
}

.GeoPosMap
{
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    width:100%; 
    height:100%;
}

.validationerror
{
    background-color: Yellow;
    margin-left: 20px;
}

/* Om mooi in het midden van een grid te krijgen deze op 16*16 zetten, want de height van de TD is fixed op 20 gezet. */
td a.del,
td a.edit
{
    height: 16px;
    width: 16px;
}


#ui-datepicker-div,
.ui-timepicker-div
{
    display: none; /* CHROME fix: default geen kader tonen*/
    z-index: 100 !important; /* Date & timepicker moeten bovenste element blijven (de staticheader heeft een hogere z-index gekregen), important want inline style zet hem op 1. */
}


/* ImagePage */
/* ============ */
div.ImagePageContainer
{
    margin: 0 auto; 
    width: auto; 
    text-align: center;
}

div.ImagePageContainer img
{
    display: block;
    left: 0; 
    position: fixed;
    top:0;
}


/* Datacontrols */
/* ============ */

/* By default zwart maar als we de tekstkleur van * anders instellen bijvoorbeeld bij nachtthema willen we de headers altijd zwart 
   Opmerking: Stel dat we toch de tekstkleur van het thema willen volgen dan moet dit worden aangepast en moeten alle 'afwijkende thema's' aangepast worden.
*/
div.ajax__tab_container div.ajax__tab_header span.ajax__tab_tab 
{
    color: Black;
}

div.ajax__tab_container div.ajax__tab_body
{
    /* Content-bleeding uit tabpanels voorkomen. */
    overflow: auto;
}

span.ajax__tab > .ajax__tab_outer > .ajax__tab_inner > .ajax__tab_disabled 
{
    /* Tabs waar de gebruiker geen recht op heeft wordt in code op disabled gezet en niet op visible false. 
        Hierdoor moeten we zorgen dat de disabled tab niet wordt weergegeven. */
    display: none;
}

/* Page Description Control */
/* ======================== */

.page_discription_container
{
    display: block;
    text-align: left;
}

.page_discription_container div
{
    margin-top: 10px;
}

.page_discription_container a
{
    color: Black;
}

/* Obsolete */
/* ======== */

.RadMenu_TRS .rmItem .rmDisabled .rmText
{
    color: #999;
}

.RadMenu_TRS .rmGroup .rmItem .rmDisabled
{
    background-color: #000;
}


.RadMenu_TRS .rmRootGroup .rmSeparator,
.RadMenu_TRS .rmGroup .rmSeparator
{
    background: #8f8f8f;
}


.RadMenu_TRS_rtl
{
    text-align: right;
}

.RadMenu_TRS_Context
{
    background: none;
    border: 0;
}

.RadMenu_TRS_rtl .rmExpanded
{
    position: static;
}

.RadMenu_TRS_rtl .rmGroup .rmLink
{
    text-align: right;
}

.RadMenu_TRS_rtl .rmHorizontal .rmItem 
{ 
    border-left: 0; 
}

.RadMenu_TRS_Context .rmGroup .rmItem
{ 
    border-right: 0; 
    border-bottom: 0; 
    padding-bottom: 0; 
}

.RadMenu_TRS .rmTopArrow,
.RadMenu_TRS .rmBottomArrow
{
    height: 10px;
    width: 100%;
    background: #fff url(Menu/ArrowScrollUpDown.gif) no-repeat top center;
}

.RadMenu_TRS .rmBottomArrow
{
    background-position: center -18px;
}

.RadMenu_TRS .rmLeftArrow,
.RadMenu_TRS .rmRightArrow
{
    width: 10px;
    height: 100%;
    margin-top: -1px;
    background: #fff url(Menu/ArrowScrollLeftRight.gif) no-repeat left center;
}

.RadMenu_TRS .rmRightArrow
{
    background-position: -18px center;
}

.RadMenu_TRS .rmRootGroup .rmItem .rmDisabled
{
    background: none;
}

.RadMenu_TRS .rmItem .rmDisabled:hover
{
    background: none;
}


/* Wachtwoord complexiteit */
/* ======================= */
.pwdcomplexity {
    display: flex;
    margin-top: 10px;
    flex-direction: column;
    align-items: center;
}

.pwdcomplexity h4 {
    width: 380px;
    font-weight: bold !important;
    text-decoration-line: underline;
}

.pwdcomplexity ul li {
    margin-top: 5px;
}

/* Weergave tooltips op mobiele toestellen: tekst niet selecteer maken. Dit is normaal default gedrag van de browser. */

body.mobileDevice div.fwGridViewWrap table tr td[title],
body.mobileDevice div.fwGridViewWrap table tr td[title] * 
{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

/* Link naar telefoon */
.phone-link::before {
    content: "\260E"; /* Unicode voor telefoon-icoon */
    text-decoration: none;
    font-size: 16px;
}

td.phone-link a
{
    text-decoration: none;
}