.EventOnline
{
    overflow: hidden;
}

.EventOnline .gwt-TabLayoutPanelContentContainer
{
    border-style: none;
}

.gwt-DialogBox
{
    z-index: 3;
}

body
{
    font-size: 13pt;
	font-weight: normal;
    font-family: Tahoma, arial, sans-serif, Roboto;
    color: #3F3F3F;
}

.Container
{
    text-align: center;
    width: 100%;
    padding-top: 0px;
	border-radius: 6px;
}

.CenteredContainer {
  text-align: left;
  margin: 0 auto;
  padding-left: 5%;
  padding-right: 5%;
  max-width: 1400px;

}

@media (min-width: 600px) {
    .CenteredContainer
    {
        width: 100% !important;
        max-width: 1200px !important;

    }
}


.Header
{
    margin-left: 15px;
    margin-bottom: 15px;
	min-height: 59px;

}

.Header .AddressLetter,
.Header .AddressLetter *,
.Header .AddressLetter strong,
.Header .AddressLetter b {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: normal !important; /* oder bold, wenn du das möchtest */
    color: #3F3F3F !important;
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.Info
{
       font-size: 13pt;
	font-weight: normal;
    font-family: Tahoma, arial, sans-serif, Roboto;
    color: #3F3F3F;
}

.InvitationInfo
{
    /*font-family: Tahoma;*/
    font-weight: bold;
    font-size: 10pt;
    margin-bottom: 12px;
}

.EmptyInterval
{
    height: 20px;
}

.EmptyIntervalSmall
{
    height: 10px;
}

.MainTitle {
    margin-top: 0px;
    padding: 20px;
    margin-bottom: -4px;
    font-size: 18pt;
    color: #ffffff;
    font-weight: bolder;
	border-radius: 6px !important; 
	overflow: hidden !important;

    display: block;
    height: 100px;

    background-color: #0064a0;
    background-image: url(https://www.datron.de/fileadmin/cas_event/headerpic.jpg);

    /* schöner Glow‑Effekt */
    text-shadow:
        1px 1px 9px #0064A0,
        2px 0px 8px rgba(0,82,131,0.56),
        -7px 10px 20px rgba(0,82,131,0.49),
        10px -9px 20px rgba(0,82,131,0.49);

    /* Bildgröße anpassen */
    background-size: 600px;
}

.MainTitleWrapper
{
position: relative;
  z-index: 5;
  background-color: #0064a0; /* HINTERGRUND */
  color: #fff;               /* Text in weiß */
  padding: 0px;        /* etwas Innenabstand, damit es wie eine Box wirkt */
	border-radius: 6px !important; 
	overflow: hidden !important;
	
}

.BottomWrapper
{
    padding: 14px;
    padding-right: 19px;
    border: 1px solid #D2D2D2;
    border-top: 0px;
    margin-bottom: 25px;
    display: flex;
}

.EventOnlineButtonsWrapper
{
    margin: auto;
    flex-flow: row-reverse;
}

.EventOnlineLinksWrapper
{
    margin: auto;
    flex-flow: column;
}

.Subtitle
{
    font-size: 11pt;
    margin-top: 0px;
    text-decoration: none;
    color: #DD0000;
    font-weight: bold;
}

.SubtitleAppointment, .SubtitleAppointmentStartPage
{
    font-size: 13pt;
	 font-family: Tahoma, arial, sans-serif, Roboto;
    margin-top: 0px;
    text-decoration: none;
    color: #0064a0;
    font-weight: bold;
}

.SubtitleAppointmentStartPage
{
    margin-top: 16px;
    margin-bottom: 6px;
}

.SubtitleAppointmentText
{
    font-weight: bold;
}

.SubtitleDetails
{
    padding-top: 6px;
}

.ContentWrapper
{
    border-style: solid;
    border-width: 1px;
    border-color: #D2D2D2;
    padding: 12px;
    padding-top: 15px;
}

.Content
{
    width: 100%;
    background-color: white;
}


.RegisterOthersContent
{
    height: 450px;
}

.EventTable
{
    width: 100%;
    margin-bottom: 3px;
}

.EventTable td {
    padding-top: 3px;
    padding-bottom: 3px;
}

.PlainText
{
    background-color: #EDF2FF;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.InvitationDatas
{
    width: 100%;
    table-layout: fixed;
}

.InvitationDatas label
{
    display: block;
}

.InvitationDatas .eventOnlineCheckBox + label
{
    padding-left: 30px;
    margin-top: -17px;
}

.InvitationDatas td, .MandatoryLabel
{
    font-size: 13px;
    /*font-family: Arial;*/
    padding-right: 10px;
}

.RegistrationDatasSecondColumn
{
    text-align: right;
}

.Appointments
{
    width: 100%;
    margin-bottom: 3px;
}

.Appointments td
{
    padding-top: 4px;
    padding-bottom: 4px;
    vertical-align: baseline;
}

.Appointment
{
    border: 3px solid #6699CC;
    margin-left: 3px;
}

.Appointment.FullyBooked, .AppointmentGroupAppointment.FullyBooked
{
    color: #666;
    background-color: #E8E8E8;
}

.Appointment.FullyBooked .Title, .AppointmentGroupAppointment.FullyBooked .Title
{
    color: #666;
}

.AppointmentFirst td
{
    padding-top: 9px;
    border-top: 1px solid #D2D2D2;
}

.AppointmentFirstSeparator td
{
    padding: 0;
}

.AppointmentLast td
{
    padding-bottom: 8px;
    border-bottom: 1px solid #D2D2D2;
}

.Appointment .Title
{
    color: black;
}

.Time
{
    color: #767676;
}

.AppointmentGroup
{
    font-weight: bold;
    color: black;
}

.AppointmentGroup Table
{
    width: 100%;
    background-color: Blue;
}

.AppointmentGroup .Title
{
    width: 100%;
    position: relative;
}

.AppointmentGroup .TitleText
{
    float: left;
    position: relative;
    z-index: 2;
    background-color: White;
    padding-right: 14px;
}

.AppointmentGroup .Separator
{
    position: absolute;
    left: 0px;
    right: 10px;
    top: 8px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: #D2D2D2;
    z-index: 1;
}

* + html .AppointmentGroup .Separator
{
    top: -8px;
}

* + html .AppointmentFirstSeparator
{
    height: 10px;
}

* + html .AppointmentGroupAppointmentSeparator td
{
    height: 10px;
    padding-bottom: 0px;
}

.AppointmentCount
{
    color: #999999;
    font-weight: normal;
}

.AppointmentGroup td
{
    padding-top: 16px;
}

.Appointments .Date
{
    width: 10%;
    vertical-align: top;
    white-space: nowrap;
    padding-left: 24px;
    display: flex;
    color: #767676;
}

 .GroupAppointmentDate {
    padding-left: 41px !important;
}

.AppointmentGroupAppointment
{
}

.AppointmentGroupAppointmentFirst td
{
}

.AppointmentGroupAppointmentLast td .Date
{
    padding-bottom: 8px;
}

.AppointmentGroupAppointmentLastSeparator td
{
    padding-top: 1px;
    padding-bottom: 0px;
}

.AppointmentGroupAppointmentSeparator td
{
    padding-top: 9px;
    padding-bottom: 8px;
    padding-left: 14px;
    padding-right: 10px;
}

.AppointmentGroupAppointmentSeparator td .Separator
{
    border-top: 1px solid #D2D2D2;
    width: 100%;
}

.AppointmentGroupAppointment .Title
{
    color: black;
}

.Appointments .Title
{
    vertical-align: top;
    margin-bottom: 4px;
}

.DateTimeSeparator
{
    padding: 0 0.4em;
}

.eventOnlineLabel
{
    /*font-family: Verdana;*/
    font-size: 14px;
    padding-bottom: 4px;
}

.eventOnlineLink
{
    color: #1467BA;
    display: block;
    /*font-family: Trebuchet MS;*/
    text-decoration: underline;
    cursor: pointer;
    margin: 0 8px 15px 8px;
}

.eventOnlineLink:hover
{
    color: #33557F;
}

.eventOnlineLink::after
{
    content: " >";
}

.eventOnlineTextfield
{
    border: 1px solid #A6A6A6;
    font-size: 13px;
    height: 17px;
    margin-bottom: 1px;
    margin-top: 1px;
    padding-left: 4px;
    padding-top: 1px;
    width: 100%;
}

.eventOnlineTextarea
{
    border: 1px solid #A6A6A6;
    font-size: 13px;
    height: 51px;
    margin-bottom: 1px;
    margin-top: 1px;
    padding-left: 4px;
    padding-top: 1px;
    width: 100%;
    resize: none;
    /*font-family: Arial;*/
}

.eventOnlineCombobox
{
    border: 1px solid #A6A6A6;
    font-size: 13px;
    height: 21px;
    margin-bottom: 1px;
    margin-top: 1px;
    padding: 1px;
    width: 100%;
}

.textareaLabel
{
    margin-top: -25px;
}

.eventOnlineComboboxTD
{
    padding-right: 4px !important;
}

.eventErrorInputField
{
    border-color: red;
}


.eventOnlineButton {
    background-color: #0064A0 !important;     /* DATRON Blau */
    color: #FFFFFF !important;                /* weiße Schrift */
    font-family: Tahoma, Arial, sans-serif !important;
    font-size: 12pt !important;
    font-weight: normal !important;

    border: 1px solid #004F7D !important;     /* dezenter dunklerer Rand */
    border-radius: 6px !important;            /* weniger rund, moderner */
    
    padding: 4px 12px !important;             /* mehr Abstand: oben/unten 8, seitlich 18 */
    margin: 0 8px !important;                 /* etwas mehr Abstand zwischen den Buttons */

    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hover-Effekt */
.eventOnlineButton:hover {
    background-color: #005487 !important;     /* etwas dunkler */
    border-color: #005487 !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.20) !important;
}


.dialogMiddleCenterInner > div > div:last-child
{
    bottom: 7px !important;
}

.loadingImage
{
    width: 16px;
    height: 16px;
    background-image: url('../Images/ajax-loader.gif');
    margin-right: 10px;
}

#LOADING
{
    text-align: center;
    margin-top: 100px;
}

#LOADING span
{
    text-align: left;
    margin: auto;
}

#REGISTRATION_DEADLINE, #REGISTRATION_NOT_POSSIBLE
{
    color: #E11125;
}

#COMPANION
{
    white-space: nowrap;
}

#STARTPAGE_NOTES2
{
    background: white;
}

.MandatoryHint
{
    font-weight: normal;
    color: #767676;
}

.TitleSeparator
{
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #D2D2D2;
    width: 100%;
    padding-top: 4px;
    padding-bottom: 7px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.InputHolder
{
    vertical-align: top;
}

.InputHolder input
{
    margin-top: 1px;
}

* + html .InputHolder input
{
    margin-top: -2px;
}

.Appointment .InputHolder, .AppointmentGroup .InputHolder
{
    width: 18px;
    padding-left: 1px;
}

.AppointmentGroupAppointment .InputHolder
{
    padding-left: 0px;
    margin-left: 0px;
}

.AppointmentGroupAppointment .InputHolder input
{
    margin-left: 3px;
}

.RegisterPage .Appointment .Title, .RegisterPage .AppointmentGroupAppointment .Title
{
    display: inline-block;
    padding-left: 3px;
}

.RegisterPage .AppointmentGroup .Separator
{
    right: 0px;
}

.RegisterPage .AppointmentGroupAppointmentSeparator td
{
    padding-left: 0px;
    padding-right: 0px;
}

.Companions td
{
    padding-top: 20px;
    padding-bottom: 8px;
}

.Companions p
{
    font-weight: bold;
}

.Companions > td > div
{
    margin-top: 16px;
}

.Companions > td > div > label
{
    float: left;
}

.Companions .comboboxWrapper
{
    float: left;
    margin-left: 7px;
    margin-top: -3px;
    width: 45px;
}

.RegisterPage .AppointmentGroupTitle
{
    padding-left: 3px;
    padding-bottom: 4px;
}

.InfoEmptyInterval
{
    margin-bottom: 16px;
}

.CloseButtonImage
{
    margin: 1px;
    width: 15px;
    height: 15px;
    background: url(../Images/closeBtn.png) no-repeat 0px 0px;
    float: right;
}

.CloseButtonImage:hover
{
    background: url(../Images/closeBtnHover.png) no-repeat 0px 0px;
}

.gwt-PopupPanel
{
    z-index: 99999 !important;
}

.VersionNumber
{
    bottom: 8px !important;
    position: fixed;
    right: 10px;
}

.HiddenSection
{
    display: none;
}

.FormDatasHeader
{
    font-weight: bold;
    font-size: 13pt !important;
    padding-bottom: 5px;
    padding-top: 5px;
}

.TwoColumns
{
    float: left;
    margin-right: 5px;
}

.FormDatas
{
    font-size: 13pt;
    margin-bottom: 10px;
    line-height: 125%;
    color: black;
}

#questionnaireDataTable input
{
    margin-bottom: 5px;
    margin-left: 0;
    margin-top: 5px;
}

#questionnaireDataTable label
{
    display: block;
    margin-top: -23px;
    padding-bottom: 4px;
    padding-left: 20px;
    padding-top: 4px;
}

.StartPage .BottomWrapper, .SuccessfulRegisterPage .BottomWrapper
{
    padding-bottom: 5px !important;
}

.LabelInForm
{
    padding-top: 3px;
    padding-bottom: 3px;
}

.CaptionInForm
{
}

input[type=checkbox].mandatory
{
    outline: 2px solid red;
    padding: 0px !important;
}

input[type=checkbox].mandatory:checked
{
    outline: none;
}

.CheckBoxWithLabelWrapper, .RadioButtonWithLabelWrapper
{
    display: flex;
    align-items: flex-start;
}

.eventOnlineCheckBox {
    margin-left: 5px;
    margin-top: 2px;
}

.AppointmentGroupAppointment.AppointmentGroupAppointmentFirst > td {
    width: 19px;
}

.AppointmentGroupTitle .Title .TitleText .eventOnlineCheckBox {
    margin-left: 2px;
    margin-right: 6px;
}

.AppointmentGroupAppointment .eventOnlineRadioButton {
    margin: 2px 0 0 16px;
}

.FreeSeatsDiv {
    display:inline-block;
}


/* ============================================
   DATRON Header – exakte Skalierung mit 1398x240
   ============================================ */

.Header {
  position: relative;
  width: 100%;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}

/* Das Flag-Bild mit perfekter Proportion */
.Header::before {
  content: "";
  display: block;
  width: 100%;

  /* Proportionale Höhe (Verhältnis 1398 / 240 ≈ 5.825) */
  aspect-ratio: 1398 / 240;     /* ← WICHTIG: echtes Seitenverhältnis */

  background-image: url("https://www.datron.de/fileadmin/cas_event/header_logoline.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;     /* proportional, niemals verzerrt */

  margin-bottom: 0px;          /* Abstand zum Begrüßungstext */
}

/* Begrüßung & Info darunter */
.Header .AddressLetter,
.Header .Info {
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 13pt !important;
  font-weight: normal !important;
  color: #3F3F3F !important;
  line-height: 1.35;
  margin: 0 0 4px 0;
}

/* ==========================================================
   FINALER FUNKTIONSFÄHIGER DIALOG FIX – präzise aus DOM
   ========================================================== */

/* 1) Alle internen Auto-Wrapper, die den Dialoginhalt clippen */
body.EventOnline .gwt-DialogBox .dialogMiddleCenterInner > div[style*="overflow"],
body.EventOnline .gwt-DialogBox .dialogMiddleCenterInner div[style*="position:absolute"][style*="overflow"],
body.EventOnline .gwt-DialogBox .dialogMiddleCenterInner div[style*="overflow:hidden"] {
    position: static !important;
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: auto !important;
}

/* 2) Dialog selber IMMER vorne */
body.EventOnline .gwt-DialogBox {
    position: absolute !important;
    z-index: 2147483647 !important;
    background: #fff !important;
    border: 2px solid #0064A0 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* 3) Hellblauen GWT-Rahmen komplett entfernen (äußere TDs) */
body.EventOnline .gwt-DialogBox table,
body.EventOnline .gwt-DialogBox tr,
body.EventOnline .gwt-DialogBox td {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* 4) Caption */

body.EventOnline .gwt-DialogBox .dialogTopCenter .Caption,
body.EventOnline .gwt-DialogBox .dialogTopCenter .caption {
    display: block !important;
    width: 100% !important;
    background: #0064A0 !important;
    color: #ffffff !important;
    padding: 12px 16px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    font-family: Tahoma, Arial, sans-serif !important;
    border-radius: 10px 10px 0 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    cursor: move;
}

/* 5) Inhalt, damit NICHTS abgeschnitten wird */
body.EventOnline .gwt-DialogBox .dialogMiddleCenter,
body.EventOnline .gwt-DialogBox .dialogMiddleCenterInner,
body.EventOnline .gwt-DialogBox .dialogContent {
    overflow: visible !important;
    height: auto !important;
    padding: 20px !important;
    background: #fff !important;
}

/* 6) CI-Buttons */
body.EventOnline .gwt-DialogBox button,
body.EventOnline .gwt-DialogBox input[type="button"] {
    appearance: none !important;
    background: #0064A0 !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    margin-right: 10px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

body.EventOnline .gwt-DialogBox button:hover,
body.EventOnline .gwt-DialogBox input[type="button"]:hover {
    background: #005487 !important;
}

/* 7) Seite darf den Dialog nicht abschneiden */
body.EventOnline {
    overflow: visible !important;
}


/* === Buttons im CI + kein Abschneiden + stabile Anordnung === */

/* 0) Kein Clipping in den üblichen Containern, aber scoped */
.EventOnline .BottomWrapper,
.EventOnline .EventOnlineButtonsWrapper,
.EventOnline .ContentWrapper {
  overflow: visible !important;
}

/* 1) Wrapper: auf Flex umstellen, rechtsbündig anordnen */
.EventOnline .EventOnlineButtonsWrapper {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;           /* Abstand zwischen Buttons */
  flex-wrap: wrap !important;     /* Zeilenumbruch sicher statt Überlappung */
  min-height: 48px;               /* genug Raum, damit nichts geclippt wird */
}

/* 2) Button selbst: CI + stabil + kein float */
.eventOnlineButton,
.EventOnline .gwt-DialogBox .eventOnlineButton {
  float: none !important;                 /* float raus, Flex übernimmt */
  display: inline-flex !important;        /* stabile Box, kein Umbruch innen */
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;         /* Text bleibt in einer Zeile */
  box-sizing: border-box !important;

  background-color: #0064A0 !important;  /* DATRON Blau */
  color: #FFFFFF !important;              /* weiße Schrift */
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 12pt !important;
  font-weight: normal !important;

  border: 1px solid #004F7D !important;   /* dezenter Rand */
  border-radius: 6px !important;          /* weniger rund, moderner */
  padding: 8px 18px !important;           /* mehr Abstand Text ↔ Rand */
  margin: 0 8px 0 0 !important;           /* Außenabstand nur rechts */

  line-height: 1.2 !important;            /* keine vertikalen Clipping-Effekte */
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
  cursor: pointer !important;
  transition: background-color .2s ease, box-shadow .2s ease !important;
}

/* Hover */
.eventOnlineButton:hover,
.EventOnline .gwt-DialogBox .eventOnlineButton:hover {
  background-color: #005487 !important;
  border-color: #005487 !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.20) !important;
}

/* Optional: Fokus für Tastaturnavigation */
.eventOnlineButton:focus {
  outline: 2px solid #66AFE9 !important;
  outline-offset: 2px !important;
}

/* 3) Falls die Buttons in Tabellen-Zellen liegen, Clipping verhindern */
.EventOnline .EventTable td,
.EventOnline .Appointments td {
  overflow: visible !important;
  height: auto !important;
}

/* 4) Sicherheitsnetz: Seite darf rund um die Buttons nicht clippen */
.EventOnline { overflow: visible !important; }  /* falls zuvor global hidden */