body 
{
    background-color:White;
}

.ListSearchToTab
{
    font-family: arial;
    font-size: 10pt;
    color: White;
    cursor: default;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-bottom-style: solid;
    background-color: ActiveCaption;
    border-color: White;
    border-width: 1px;
}

.labelToTab
{
    border-style: none;
	font-family: arial;
    font-size: medium;
    color: #00008b;
    cursor: default;
    background-color: Transparent;
}

.labelToTabPlanning
{
    font-family: arial;
    font-size: 12pt;
    color: #00008b;
    cursor: default;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    background-color: Transparent;
    border-bottom-style: none;
}

.PageHeaderToTab
{
    font-family: arial;
    font-size: 12pt;
    color: White;
    cursor: default;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    background-color: Steelblue;
    border-bottom-style: none;
    width : 100%;
    height : 30px;
    text-align : center;
    top: 125px;
    left: 0px;
    position:absolute;
    padding-top:10px;
    font-weight: bold;
}
.PageHeaderToTab2
{
    font-family: arial;
    font-size: 10pt;
    color: White;
    cursor: default;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    background-color: Steelblue;
    border-bottom-style: none;
    width : 100%;
    height : 15px;
    text-align : left;
    top: 165px;
    left: 0px;
    position:absolute;
    
}

.PageHeaderToTabRelative
{
    font-family: arial;
    font-size: 10pt;
    color: White;
    cursor: default;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    background-color: Steelblue;
    border-bottom-style: none;
    width : 100%;
    text-align : left;
}
.TextboxToTab
{
    font-family: arial;
    font-size: 10pt;
    color: #00008b;
    cursor: auto;
    background-color: white;
    font-weight: normal;
    border-right: gainsboro 1pt solid;
    border-top: gainsboro 1pt solid;
    border-left: gainsboro 1pt solid;
    border-bottom: gainsboro 1pt solid;
    font-variant: normal;
}

.InvalidMask
{
    font-family: arial;
    font-size: 10pt;
    color: white;
    cursor: auto;
    background-color: red;
    font-weight: normal;
    font-variant: normal;
}

.TextboxToTabUppercase
{
    font-family: arial;
    font-size: 10pt;
    color: #00008b;
    cursor: auto;
    background-color: white;
    font-weight: normal;
    border-right: gainsboro 1pt solid;
    border-top: gainsboro 1pt solid;
    border-left: gainsboro 1pt solid;
    border-bottom: gainsboro 1pt solid;
    text-transform:uppercase;
}
.ListboxToTab
{
    border-style: solid;
	font-family: arial;
    font-size: 10pt;
    font-weight: normal;
    font-variant: normal;
    color: #00008b;
    cursor: auto;
    background-color: white;
    position:absolute;
}

.ButtonToTab
{
    font-family: arial;
    font-size: 12pt;
    color: #00008b;
    cursor: auto;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-bottom-style: solid;
    background-color: white;
}

.ButtonToTabPlanning
{
    font-family: arial;
    font-size: 12pt;
    color: #00008b;
    cursor: auto;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
    background-color: white;
}

.labelToTabRight
{
    font-family: arial;
    font-variant: small-caps;
    font-size: 12pt;
    color: #00008b;
    cursor: default;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    background-color: white;
    border-bottom-style: none;
    text-align: right;
}

.MyWatermark
{
    font-size: small;
    color: #3300ff;
    font-family: Arial;
}

.popupControl
{
    background-color:#AAD4FF;
    position:absolute;
    visibility:hidden;
    border-style:solid;
    border-color:Black;
    border-width:2px;
}

.info
{
    font-family: arial;
    font-size: 10pt;
    color: #00008b;
    cursor: default;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    background-color: transparent;
    border-bottom-style: none;
    font-style: italic;
}

.ErrorLabel
{
    font-family: arial;
    font-size: 10pt;
    color: red;
    cursor: hand;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
    font-style: normal;
}
textarea
{
    color: #00008b;
    font-family: arial;
    font-size: 10pt;
    font-variant: small-caps;
}

.HeaderToTab
{
    font-family: arial;
    font-size: 14pt;
    color: #00008b;
    cursor: default;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    background-color: white;
    border-bottom-style: none;
    font-weight: bold;
}

.MyCalendar .ajax__calendar_container {
    border:1px solid #646464;
    background-color:#EEEEEE;
    color:Blue;
}
.MyCalendar .ajax__calendar_other .ajax__calendar_day,
.MyCalendar .ajax__calendar_other .ajax__calendar_year 
{
    color:Red;
    font-size:x-small;
}
.MyCalendar .ajax__calendar_hover .ajax__calendar_day,
.MyCalendar .ajax__calendar_hover .ajax__calendar_month, 
.MyCalendar .ajax__calendar_hover .ajax__calendar_year 
{
    color:#00008b;
}
.MyCalendar .ajax__calendar_active .ajax__calendar_day, 
.MyCalendar .ajax__calendar_active .ajax__calendar_month, 
.MyCalendar .ajax__calendar_active .ajax__calendar_year 
{
    color:#00008b;
    font-weight:bold;
    font-size:small;
}

.CalendarNew
{
font-variant:small-caps;
}

/*------Calendarextender-------*/   
.MyCalendarInspectie .ajax__calendar_container {
    border:1px solid #646464;
    background-color:#EEEEEE;
    color:#0084c9;
    font-size:x-small;
}
.MyCalendarInspectie .ajax__calendar_other .ajax__calendar_day,
.MyCalendarInspectie .ajax__calendar_other .ajax__calendar_year 
{
    color:Red;
    font-size:x-small;
}
.MyCalendarInspectie .ajax__calendar_hover .ajax__calendar_day,
.MyCalendarInspectie .ajax__calendar_hover .ajax__calendar_month, 
.MyCalendarInspectie .ajax__calendar_hover .ajax__calendar_year 
{
    color:#00008b;
    font-size:x-small;
}
.MyCalendarInspectie .ajax__calendar_active .ajax__calendar_day, 
.MyCalendarInspectie .ajax__calendar_active .ajax__calendar_month, 
.MyCalendarInspectie .ajax__calendar_active .ajax__calendar_year 
{
    color:#00008b;
    font-weight:bold;
    font-size:x-small;
}

.myHiddenPanel
{
    visibility:hidden;
}

.modalBackground 
{
    background-color:Gray;
    filter:alpha(opacity=60);
    opacity:0.6;
}

.modalPopup
{
    background-color:#ffffdd;
    border-width:3px;
    border-style:solid;
    border-color:Gray;
    padding:3px;
    width:400px;
}

.HideButton
{
	display:none
}

.updateProgress 
{     
	border-width: 1px;     
	border-style: solid;     
	background-color: #FFFFFF;     
	position: absolute;     
	width: 180px;     
	height: 65px; 
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 350px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        /* Position the tooltip text */
        position: absolute;
        z-index: 1;
        top: -5px;
        left: 105%;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

/* Tooltip container */
.tooltipx {
    position: relative;
    display: inline-block;
}

    /* tooltipx text */
    .tooltipx .tooltipxtext {
        visibility: hidden;
        width: 250px;
        background-color: #555;
        color: #fff;
        text-align: center;
        padding: 5px 2px;
        border-radius: 6px;
        /* Position the tooltipx text */
        position: absolute;
        z-index: 1;
        bottom: -675%;
        left: -1000%;
        margin-left: -60px;
        /* Fade in tooltipx */
        opacity: 0;
        transition: opacity 0.3s;
    }

    /* Show the tooltipx text when you mouse over the tooltipx container */
    .tooltipx:hover .tooltipxtext {
        visibility: visible;
        opacity: 1;
    }


.table_bijlage {
    border-top: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    border-left: 1px solid gray;
    border-collapse: collapse;
}

/* Collapsible panels */
.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: medium;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    border-radius: 10px;
}

    .active, .collapsible:hover {
        background-color: #555;
    }

    .collapsible:after {
        content: '\002B';
        color: white;
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }

.active:after {
    content: "\2212";
}

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
}

/* Non-collapsible panels */
.noncollapsible {
    background-color: #777;
    color: white;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: medium;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    border-radius: 10px;
}

/* Stijl voor de algemene melding container */
#statusMessage {
    /* Kopieer de stijlen van .modal-content */
    background-color: #585555; /* Donkergrijs */
    color: white; /* Witte tekst */
    border: 1px solid #585555;
    border-radius: 0.5rem; /* Afgeronde hoeken (consistent) */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Diepere schaduw */
    padding: 1rem 1.5rem; /* Meer padding */
    font-weight: bold;
    /* Zorgt voor een zachte verschijning/verdwijning */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Groene Success Achtergrond (Gebruik de Success Gradient kleuren) */
.alert-success {
    /* Mix van de gradient kleuren voor een vaste achtergrondkleur die past */
    background-color: #388e89 !important;
    /* Voeg een subtiele groene gloed toe om het 'success'-gevoel te versterken */
    box-shadow: 0 4px 12px rgba(75, 232, 226, 0.4) !important;
}

/* Rode Error Achtergrond (Gebruik de Danger Gradient kleuren) */
.alert-danger {
    /* Mix van de gradient kleuren voor een vaste achtergrondkleur die past */
    background-color: #bd1223 !important;
    /* Voeg een subtiele rode gloed toe */
    box-shadow: 0 4px 12px rgba(232, 22, 43, 0.4) !important;
}

/* Optioneel: Til de melding iets op bij verschijnen voor een extra dynamisch effect */
#statusMessage:not([style*="display: none"]) {
    transform: translateY(0);
    opacity: 1;
}

#statusMessage[style*="display: none"] {
    transform: translateY(-20px);
    opacity: 0;
}