html, body, form {margin:0px; padding:0px; width:100%; color:rgb(53,53,53); height:100%; }

body {
    font-size:14px; 
    font-family: 'Open Sans', sans-serif; 
    width:100%; 
    opacity: 0;
    background-color: white;
}

    body {
        -webkit-animation-duration: 350ms;
        -webkit-animation-name: ZoomIn;
        -moz-animation-duration: 350ms;
        -moz-animation-name: ZoomIn;
        animation-duration: 350ms;
        animation-name: ZoomIn;
        opacity: 1;
    }


.BlindTable {padding:0px; margin:0px; border-spacing:0px; width:100%;}
.ButtonFlat {
    border: 1px solid rgb(173,173,173);
} /* Flache Schaltfläche */

/* Überschrift Zusammenfassungsseiten */
.SummeryHeadingDiv {
    font-weight: lighter;
    text-align: left;
    vertical-align: middle;
    padding: 16px;
    font-weight: lighter;
}

.SummeryHeading1 {
font-size:36px;
vertical-align:middle;
}

.SummeryHeading2 {
font-size:22px;
vertical-align:middle;
}

.DockSubHeading {
margin:36px 0px 12px 0px; 
color:Black; 
font-size:22px; 
font-weight:300;
} /* Unterüberschrift in Docking */

.dateNavigation {
    z-index: 0;
} /* Direkteingabe Datums-Navigation */

.SubEditRow {
    border-top: 1px solid rgb(220,220,220);
    padding-top: 6px !important; 
    padding-bottom: 6px !important; 
    vertical-align:top;	
} /* Zeile in Schnellerfassung */

/* Unten angedockte Nachricht */

.BottomMsgWrn {
    position:fixed;
    top: 100%; left: 300px;
    width:100%; height: 30px;
    margin-top: -30px;
    padding:6px;
	background-color: rgb(245,245,245);
	background-color: rgba(245,245,245,0.8);
    border-top: 1px solid rgb(210,210,210);
    border-top: 1px solid rgba(210,210,210,0.8);
    color:rgb(53,53,53);
    overflow: hidden;
    font-weight: 600;
    z-index: 2000;
} /* Hinweismeldung */

.BottomMsgOk {
    position:fixed;
    top: 100%; left: 300px;
    width:100%; height: 30px;
    margin-top: -30px;
    padding:6px;
	background-color: rgb(197,243,199);
	background-color: rgba(197,243,199,0.7);
    border-top: 1px solid rgb(210,210,210);
    border-top: 1px solid rgba(210,210,210,0.8);
    color:rgb(53,53,53);
    overflow: hidden;
    font-weight: 600;
    z-index: 2000;
} /* OK-Meldung */


/*#region Terminzusammenfassung Kalender */

.AptSummery {
    position:fixed;
    top: 100%; left: 300px;
    width:100%; height: 120px;
    margin-top: -120px;
    padding:6px;
	background-color: rgb(245,245,245);
	background-color: rgba(245,245,245,0.9);
    border-top: 1px solid rgb(210,210,210);
    border-top: 1px solid rgba(210,210,210,0.9);
    color:rgb(53,53,53);
    overflow: hidden;
    font-weight: 600;
    z-index: 2000;
    overflow: scroll;
} 

.AptSummery .AptSummeryCloseBtn {
    position:absolute; 
    top:5px; left: 100%; 
    margin-left:-298px;
}


/*#endregion*/


/* Fenster */

.Overlay {
    position: fixed; 
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: white;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 1000;
} /* Abdeckender Hintergrund */

.MsgOverlay {
    position: fixed; 
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: white;
    background-color: rgba(0, 0, 0, 0);
    z-index: 4000;
} /* Abdeckender Hintergrund für Meldungen */

.ModalWin {
    z-index: 5000;
    position:fixed;
    padding:24px;
    top: 50%; left: 50%;
    margin-top: -80px;
    margin-left: -300px;
    width:600px;
    border: 2px solid white;
    border-radius:20px;
    box-shadow: 5px 5px 20px rgb(120,120,120);
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    font-size: 16px;
} /* Dialogfenster */

    .ModalWin p {
        font-size: 16px;
    }

.ModalEditWin {
    position: fixed;
    padding: 30px 20px 5px 20px;
    width: 76%;
    height: 82%;
    top: 7%;
    left: 12%;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: thin; /* Firefox */
    border: 2px solid rgb(235,235,235);
    border-radius: 20px;
    z-index: 1500;
    box-shadow: 5px 5px 20px rgb(120,120,120);
    border: solid 2px white;
    background-color: rgba(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
} /* Dialogfenster für größere Eingaben */

.ModalEditWin h1 {
    font-size:26px; margin:0px; line-height:30px;
}

.ModalEditWin .H1Tbl {
    margin: 10px 0px 22px 0px;
}

.ModalWin h2 {
    font-size:26px; margin:12px 0px 36px 0px; line-height:26px;
}

.MainToolbarEditWin {
    position: sticky;
    top: 0px; 
    left: 10px;
    z-index: 999;
} /* Container um rechte ToolBar in EditWin */

    .MainToolbarEditWin .rtbMiddle {
        background-color: rgba(255,255,255,1) !important;
        height: 40px;
    }

.ModalSpotlightWin {
    position: fixed;
    padding: 0px;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    overflow: scroll;
    border: 2px solid white;
    border-width: 2px 1px 1px 2px;
    border-radius: 20px;
    z-index: 1500;
    -webkit-box-shadow: 5px 5px 20px rgb(120,120,120);
    -moz-box-shadow: 5px 5px 20px rgb(120,120,120);
    box-shadow: 5px 5px 20px rgb(120,120,120);
    background-color: rgb(240, 240, 240);
    background-color: rgba(240, 240, 240, 0.25);
    backdrop-filter: blur(25px);
}
    /* Dialogfenster für größere Eingaben */

    .ModalSpotlightWin h1 {
        font-size: 26px;
        margin: 0px;
        line-height: 30px;
    }

    .ModalSpotlightWin h2 {
        margin-top: 0px;
        font-size: 18px;
    }

    .ModalSpotlightWin .H1Tbl {
        margin: 10px 0px 22px 0px;
    }

    /* Listen */

    .ModalSpotlightWin select {
        background-color: rgb(240, 240, 240);
        background-color: rgba(240, 240, 240, 0);
        border: none;
        overflow: hidden;
    }

        .ModalSpotlightWin select:focus {
            border: none;
        }

        .ModalSpotlightWin select option {
            height: 16px;
            padding: 6px;
            border-radius: 8px;
        }

    .ModalSpotlightWin .SpotlightTextBox {
        width: calc(100% - 24px);
        margin: 3px;
        padding: 8px;
        height: 30px;
        border: 1px solid rgb(200,200,200);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        border-radius: 20px;
    }

        .ModalSpotlightWin .SpotlightTextBox:focus {
            border: 1px solid rgb(200,200,200);
        }

    .ModalSpotlightWin .CloseButton {
        position: absolute;
        top: 4px;
        right: 3px;
        height: 46px;
        width: 46px;
        border: 1px solid rgb(200,200,200);
        border-radius: 1px 20px 20px 1px;
    }

.SelectButtonsContainer {
    background-color: rgb(210, 210, 210);
    margin-bottom: 12px;
    width: 100%;
}
.SelectButtonsContainer .SpotlightButtonSelected {
    background-color: white;
    border: 1px solid gray;
    border-radius: 4px;
    height: 26px;
    font-weight: bold;
    margin: 2px;
    width: calc(50% - 6px);
}

.SelectButtonsContainer .SpotlightButtonUnSelected {
    background-color: none;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    height: 26px;
    font-weight: unset;
    margin: 2px;
    width: calc(50% - 6px);
}

.ModalWin h2 {
    font-size: 26px;
    margin: 12px 0px 36px 0px;
    line-height: 26px;
}

.MainToolbarSpotlightWin {
    position: fixed;
    top: 8%;
    left: 13%;
    width: 76%;
    z-index: 999;
}
    /* Container um rechte ToolBar in EditWin */

.MainToolbarEditWin .rtbMiddle {
    background-color: rgba(255,255,255,1) !important;
    height: 40px;
}

/* Hilfe-Suchergebnisse */

.HelpSearchResultHeading {
    width: 100%;
    border-bottom: 1px solid rgb(252, 60, 57);
    color: rgb(252, 60, 57);
    font-size: 18px;
    margin: 18px 12px 12px 0px;
}

.HelpSearchResultLink a { 
    color: blue;
    font-size: 15px;
    font-weight: bold;
}

.HelpSearchTeaser {
    margin: 0px;
    font-size: 12px;
    color: rgb(80, 80, 80);
}



/* Tabelle mit Funktionen */
.FunctionDiv {
    margin: 12px 0px 0px 28px;
} /* Bereich um Funktionen */

.FunctionDiv h2 {
    font-size:24px; margin:0px 0px 12px 0px;
}

.FunctionTbl {
    width:100%; 
} 

.FunctionTbl td {
vertical-align:middle;
padding:0px; 
padding-top:2px; 
padding-bottom:2px; 
}

.FunctionTbl a {
text-decoration:none;
color: rgb(53,53,53);
}

.FunctionImgCol {
vertical-align:middle !important;
text-align:left;
width:22px; 
}

.FunctionTxtCol {
vertical-align:middle !important;
padding-left: 6px !important;
}

.PageTreeDiv {
    margin-top: 12px;
} /* Bereich um Navigationsbaum */

/* Hauptbereich */

.MainTbl {width:100%; border-style:none; padding:0px; border-spacing:0px;}
.MainTbl tr {padding:0px; border-spacing:0px;}
.MainTbl td {padding:0px; border-spacing:0px;}

/* Tabelle zweispaltige Seiten */

.TwoColTbl {
width:100%; height: 100%;
border-style:none;
padding:0px;
border-spacing:0px;
vertical-align:top;
}

.TwoColLeft {
    vertical-align: top;
    width: 270px;
    max-width: 270px;
    min-width: 270px;
    overflow: hidden;
}

    .TwoColLeft .TwoColLeftInner {
        background-color: rgba(180,180,180,0.2);
        margin: 8px;
        width: 250px;
        max-width: 250px;
        min-width: 250px;
        overflow: hidden;
        border-radius: 20px;
        border: solid 1px white;
        box-shadow: 0px 0px 8px rgb(120,120,120);
    }

#BackgrLeft {
    background-color: rgba(100,100,100,0.5);
    float: left;
    width: 260px;
    min-height: 100%;
}

.MainMenu:hover {
	
}

.TwoColRight {vertical-align:top; border-spacing:0px; padding-bottom:30px; }

.TwoColRightDiv {
    margin-top: 20px;
}

.DivMainRight {
    padding: 28px;
} /* Hauptcontent rechts */

.DivMainRightWithTbl {
    padding: 0px;	
} /* Hauptcontent rechts bei tabellarischen Anzeigen  */

.TwoColTbl .Heading {
font-size:24px;
font-weight:normal;
margin:20px 0px 20px 8px;
color:rgb(252, 60, 57);
} /* Hauptüberschrift */

/* Doku-Knoten */

.DocuNodeTbl {
width:100%;
border-style:none;
padding:8px;
border-spacing:0px;
vertical-align:top;
}

.DocuNodeIconCell {
width:50px;
vertical-align:top;
padding-bottom:16px;
padding-top:16px;
}

.DocuNodeCell {
vertical-align:top;
padding-bottom:16px;
padding-top:16px;
}

.DocuNodeHeading {
color:rgb(53,53,53);
vertical-align:top;
font-weight:300; 
text-decoration:none;
font-size:26px; 
}

/* Rad */

.rsTimelineView .rsVerticalHeaderTable div { 
width: 150px !important;   
overflow:hidden !important;
text-align:left !important;
}

.rgAltRow, .rgRow {cursor: pointer !important; page-break-inside:avoid;}

.rdContent {overflow: hidden !important;}
    
/* Eingabemasken */

.InputFormTable {width:100%; border-style:none; border-collapse:collapse;}
.InputFormTable .Cell {text-align:left; padding:2px; }
.InputFormTable td {border-style: none !important; vertical-align: middle; padding:3px; height: 28px;}

.CheckBoxDiv { padding: 7px 0px 7px 0px; }  /*Statt InputFormTable für CheckBoxen */
.CheckBox {}
.CheckBox label { display:block; margin-top:-19px;margin-left:23px; }
.CheckBox td { height: auto; }

.HelpCol { width: 15px; padding-right: 0px; } /* 1. Spalte mit Fragezeichen */

.RadioButton {}
.RadioButton label { display:block; margin-top:-17px; margin-left:23px; }
.RadioButton td { height: auto; }

/* Eingabemasken mit Editor */

.InputFormTableForEditor {width:100%; border-style:none; border-collapse:collapse;}
.InputFormTableForEditor .Cell {text-align:left; }
.InputFormTableForEditor td {vertical-align: middle; }
.InputFormTableForEditor td:first-child { padding:2px; vertical-align: top; }

/* Eingabemasken mit Fragezeichen */

.HelpTable {
    width:100%; 
    border-style:none; 
    border-collapse:collapse;
}

    .HelpTable tr td {
        vertical-align: middle;
        height: 26px;
    }

.QuickInputTable {
    width:100%; 
    border-style:none;
} /* In Schnellerfassung */

.QuickInputTable td {
    padding:2px 4px 2px 4px; 
}

.QuickInputMsgDiv {margin: 12px 0px 6px 0px;	} /* Meldungszeile in Schnellerfassung*/

.TextBox, input[type="text"] {
    width: calc(100% - 10px);
    border-color: rgb(166,194,222);
    background-color: white;
    border-style: solid;
    border-width: 1px;
    height: 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 5px;
    border-radius: 6px;
    font-weight: bold !important;
}

.no-width {
    width: auto !important;
    width: initial !important;
    width: revert !important;
}
/* dies bei einer TextBox verwenden, wenn diese exppolit keine Breitenangabe haben soll (siehe .TextBox, input[type="text"] - dort wird eine Breite angegeben) */

.reLayoutWrapper {
    border-radius: 6px;
}

select, .RadComboBox_Office2010Blue {
    height: 34px !important;
    padding: 5px !important;
    border-radius: 6px;
    font-weight: bold;
    width: 100% !important;
}

    select:hover, input:hover, textarea:hover {
        border: 1px solid rgb(252, 60, 57);
        background-color: white !important;
    }

    select:focus, input:focus, textarea:focus, .RadInput_Office2010Blue .riFocused {
        border: 2px solid rgb(252, 60, 57) !important;
        outline: none; /* entfernt den Standard-Umriss */
        background-color: white !important;
    }

.RadInput_Office2010Blue .riTextBox {
    padding: 5px !important;
    border-radius: 6px;
    font-weight: bold !important;
    height: 34px !important;
    font-size: 14px !important;
}

.RadInput_Office2010Blue .riHover {
    border-color: rgb(252, 60, 57) !important;
    outline: none; /* entfernt den Standard-Umriss */
}

    .RadInput_Office2010Blue .riHover:focus {
        border: 2px solid rgb(252, 60, 57);
        border-color: rgb(252, 60, 57);
        outline: none; /* entfernt den Standard-Umriss */
    }

input[type="checkbox"], input[type="radio"] {
    accent-color: rgb(252, 60, 57);
}

input[type="submit"],
input[type="submit"]:hover,
input[type="submit"]:focus {
    border: 1px solid rgb(220, 220, 220) !important;
    background-color: white;
    color: rgb(22, 126, 251);
    padding: 6px;
}

    input[type="submit"]:hover,
    input[type="submit"]:focus {
    font-weight: bold;
}

.RadSearchBox input:focus {
    border: none !important;
}

.Button {
    height: 26px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

select {
height:26px;  /* Höher einstellen, als TextBoxe, da diese Eelemente sonst zu flach */ 
}

/* Allgemeiner Eingabebereich */

.InputArea {
padding:8px;
}

/* Kalender */

p.ResourceHeading {font-size:14px; margin-top:0px; margin-left: 3px; margin-bottom:4px; color:rgb(53,53,53);} 
p.ResourceInfos {font-size:10px; margin-bottom:0px; margin-top:0px;}
.ScheduleAvailable {background: white !important;}  
.ScheduleNotAvailable {background: rgb(230,230,230) !important;}  

/* Doku */

.DokuTable {width:99%; font-size:14px; vertical-align:top;}
.DokuCell {text-align:left; padding:5px; vertical-align:top;}

/* Mitteilungen */

.NotivMsgTbl { padding:0px; width:100%; }
.MsgTdBtn {text-align:right; width:95px; vertical-align:middle;}
.MsgBtn {width:100px; height:28px; font-size:11px;}
.MsgTdIcon {width:40px; text-align:left; vertical-align:top;}
.MsgHdg { font-weight:bold; margin-top:0px; margin-bottom:6px; }
.MsgH2 { font-size:16px; margin-top:28px; margin-bottom:12px; color:rgb(53, 53, 53); } /* H1 Mitt.zentrale */
.MsgH1Options { font-size:11px; margin-top:0px; margin-bottom:0px; } /* H1 Optionen */
.MsgNoData { font-size:11px; color:rgb(120, 120, 120);}
.MsgNoData a { font-size:11px; text-decoration:none; color:rgb(120, 120, 120);}
.MsgAdvHdg { font-weight:bold; margin-top:24px; margin-bottom:6px; } /* Zwischenüberschrift Mitt.zentrale ausf. Auftragsausgabe */
.MsgAdvTxt { font-size:11px; margin-top:0px; margin-bottom:0px; } /* Absatz Mitt.zentrale ausf. Auftragsausgabe */

/* Status interakt. Angebot */

.OfferStatusInact {
font-size:10px; 
color:rgb(120,120,120);
} /* inaktiv */

.OfferStatusAct {
color:rgb(53,53,53); 
font-weight:bold;
} /* inaktiv */

/* Allgemein */

h1,h2,h3,.H1Subheading{color:rgb(252, 60, 57); font-weight:300; text-decoration:none;}
h1{font-size:38px; margin:0px; line-height:36px;} 
h2{font-size:24px; margin:36px 0px 18px 0px;}
h2 a{ text-decoration:none;}
h3{font-size:18px; padding-top:12px; }
h4{font-size: 14px; padding-top: 12px;color:rgb(252, 60, 57);}
a{font-size:14px; color:rgb(53,53,53);}
p{font-size:14px;}
table{font-size:14px;}
.FormTable{width:100%;padding:20px;}

.H1Subheading {font-size:16px; line-height:18px; margin:8px 0px 0px 0px;} /* Unterüberschrift für H1 */

.H1Tbl {
margin: 28px 0px 36px 0px;
border-spacing: initial;
}

.H1Tbl tr {
vertical-align: top;
}

.H1Tbl img {
padding:0px 3px 0px 0px;
} /* Tabelle um H1 */

.DivMainRightWithTbl .H1Tbl {
margin: 56px 0px 18px 28px;
} /* H1-Tabelle bei tabellarischen Anzeigen  */

hr {
width:97%;
margin:0 auto;
height:1px;
background-color:#CCCCCC;
border:0px;
border-top:1px solid #CCCCCC;
}

/*#region Link Rückwärts-Navigation */

.lnkNav {
    display:inline-block;
    text-decoration: none;
    width:100%;
} /* Link */

.lblNav {
    font-size:16px; 
    width:100%;
    color: #167EFB;
} /* Text */

.TblNav {
    width: 100%;
    height: 40px;
	overflow: hidden;
	white-space: nowrap;
	padding: 18px 0px 0px 6px;
}


/*#endregion*/


/*#region Gridsuche-Schaltflächen */

.btnSearch {
background-image: url('IconsDefault/Search_20.png');
background-repeat: no-repeat;
height: 20px;
text-decoration: none;
}

.btnSearchClear {
background-image: url('IconsDefault/Cancel_20.png');
background-repeat: no-repeat;
height: 20px;
text-decoration: none;
}

/*#endregion*/

/*#region Dynamischer Editor */

.EditReadContainer { /* Anzeige im Lesemodus */
    width: 100%; height: 100px;
    position: relative;
    border-radius:6px;
}

    .EditReadContainer .Content { /* Eigentlicher Inhalt */
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100px;
        overflow: auto;
        background-color: rgb(250, 250, 250);
        background-color: rgba(245,245,245,0.8) !important;
        border-radius: 6px;
        padding: 6px;
    }

    .EditReadContainer .Control { /* Kontrollteil (wird eingeblendet, wenn Maus drüber ist) */
        position: absolute;
        top: 0px; left: 0px;
        width: 100%; height: 100px;
        visibility: hidden;
        -webkit-transition: all 0.5s;           /* Übergang */
        -ms-transition: all 0.5s;               /* Übergang */
        -moz-transition: all 0.5s;              /* Übergang */
        transition: all 0.5s;                   /* Übergang */
        border-radius:6px;
    }

    .EditReadContainer:hover .Control {
        visibility: visible;
        background-color:rgb(240, 240, 240);
        background-color: rgba(240, 240, 240, 0.92);
    }

    .EditReadContainer .Control a {
        padding-top: 28px;
        color:rgb(18, 65, 113); 
        font-size:14px; 
        display:inline-block;
        height:100%; width:100%;
        text-align: center;
        text-decoration: none;
    } 

/*#endregion*/

/*#region Mehrspaltige Darstellung Layoutübersicht */

.ColumnDiv { /* Mehrspaltige */
	position:relative;
	margin:0 auto;
}

.ColumnDiv .Layout { /* DIV für ein Layout */
	position:relative;
	float:left;
	margin-top:30px; margin-left:40px;
	text-align:center;
	width:200px; height:270px;
	padding-left: 8px;
	padding-right: 8px;
}

.ColumnDiv .Layout table { 
	width:100%;
}

.ColumnDiv .Layout table .Icon { /* Zelle Icon */
	height:220px;
	vertical-align:middle;
	padding:0px;
	border-bottom-style:none;
}

.ColumnDiv .Layout table .Icon img { /* Zelle Icon */
    -webkit-box-shadow: 5px 5px 20px grey;
    -moz-box-shadow: 5px 5px 20px grey;
    box-shadow: 5px 5px 20px grey;
}

.ColumnDiv .Layout .Name { /* Zelle Layoutname */
	width:100%; height:33px;
	vertical-align:top;
	font-weight:bold;
	overflow:hidden;
}

.ColumnDiv .Layout .Name div { /* Nur im Div kann abgeschnitten werden */
	width:100%; height:33px;
	overflow:hidden;
}

/* Erweiterung ColumnDiv um GridIconView */

.ColumnDiv .IconView { /* DIV für ein Icon im GridIconView */
	position:relative;
	float:left;
	margin-top:30px; margin-left:40px;
	width:220px; height:305px;
	padding: 8px;
    -webkit-box-shadow: 5px 5px 20px grey;
    -moz-box-shadow: 5px 5px 20px grey;
    box-shadow: 5px 5px 20px grey;
    overflow: auto;
}

.ColumnDiv .IconView .IconMainHeading {
	font-size: 16px;
	color: rgb(53,53,53);
	margin: 8px 0px 8px 0px;
	overflow: hidden;
	max-width: 100%
}

.ColumnDiv .IconView .IconSubHeading {
	font-size: 10px;
	color: rgb(252, 60, 57);
	margin: 12px 0px 0px 0px;
}

.ColumnDiv .IconView .Text {
	margin: 0px;
	overflow: hidden;
}

.ColumnDiv .IconView .Divider {
    position: static;
    margin: 0px;
    margin-left: 2px;
    margin-right: 2px;
    padding: 0px;
    height: 2px;
    background: #fff;
    background: -moz-linear-gradient(left, #fff 0%, #dcdcdc 49%, #fff 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #fff), color-stop(49%, #dcdcdc), color-stop(100%, #fff));
    background: -webkit-linear-gradient(left, #fff 0%, #dcdcdc 49%, #fff 100%);
    background: -o-linear-gradient(left, #fff 0%, #dcdcdc 49%, #fff 100%);
    background: -ms-linear-gradient(left, #fff 0%, #dcdcdc 49%, #fff 100%);
    background: linear-gradient(to right, #FAFAFA 0%, #dcdcdc 49%, #FAFAFA 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$bg', endColorstr='$bg',GradientType=1 ); 
} /* Trennlinie */

.ColumnDiv .IconView .Delete {
	position:absolute; 
    bottom: 10px; right: 10px;
	visibility: hidden;
}

.ColumnDiv .IconView:hover .Delete {
	visibility: visible;
}

.ColumnDiv .IconView a {
	text-decoration: none;
}

/*#endregion*/

/*#region Seitenkurzbeschreibung */

.PageDesc {
    position:fixed;
    top: 100%; left: 0px;
    width:100%; height: 75px;
    margin-top: -87px;
    padding:6px;
    background-color: rgb(245,245,245);
    background-color: rgba(245,245,245, 0.9);
    border-top-style: solid; 
    border-top-width: 1px; 
    border-top-color: rgb(219,219,219);
    color: rgb(53,53,53);
    font-weight:bold;
    z-index: 1000;
} 

.PageDesc, .PageDesc p {
    font-size: 11px;
}

.PageDesc .btnClose {
    position:absolute; 
    top:5px; left: 100%; 
    margin-left:-47px;
} /* Schließen-Schaltfläche */

.PageDesc p {
    margin:6px 0px 6px 0px;
} 

.PageDesc i {
    color:rgb(22, 126, 251);
    font-style: normal;
} 

.PageDesc ul {
    margin:6px 0px 6px 0px;
} 

/*#endregion*/


/*#region ------------ Hauptmenü ---------------- */

.MainMenuDiv {
    width:500px; height:300px;
}

/*#endregion*/


/*#region -------------- Telerik --------------- */

/* ToolBar */

.RadToolBar_Office2010Blue {
    background-color: rgba(245,245,245,0) !important;
}

.TwoColRight .RadToolBar_Office2010Blue {
    width: auto !important;
}

.rtbMiddle {
    background-image: none !important;
    background-color: rgb(240,240,240) !important;
    background-color: rgba(180,180,180,0.2) !important;
    backdrop-filter: blur(25px);
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0px 0px 8px rgb(120,120,120);
    border: 1px solid white !important;
} /* Hintergrund */

.rtbOuter,
.RadToolBar_Horizontal .rtbOuter,
.RadToolBar .rtbOuter {
    border: 2px solid white !important;
    background-color: rgba(245,245,245,0) !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    padding: 0px !important;
} /* Rahmen um ToolBar */

.ToolbarShortcuts .rtbOuter {
    border: none !important;
}

.ModalEditWin .rtbMiddle, .ModalEditWin .rtbOuter {
    background-color: rgba(255,255,255,0.5) !important;
    padding-top: 6px;
}

.ModalEditWin .rtbOuter {
    background-color: rgba(255,255,255,0) !important;
    border: none !important;
}

.rtbUL {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.rtbItemHovered .rtbIn, .rtbItemHovered .rtbOut, .rtbItemHovered .rtbMid, .rtbItemHovered .rtbWrap {
    background-image: none !important;
} /* Hover-Schaltfläche */

.rtbChecked .rtbIn, .rtbChecked .rtbOut, .rtbChecked .rtbMid, .rtbChecked .rtbWrap {
    background-image: none !important;
	color:rgb(252, 60, 57) !important;
} /* Aktive-Schaltfläche */

.rtbWrap:hover .rtbText, .rtbChecked:hover .rtbText {
	color:rgb(252, 60, 57) !important;
}

.rtbText {
    font-size: 14px;	
} /* Beschrftung ToolBar */

.MainToolbarRight {
    position: fixed;
    top: 0px; left: 300px;
    width: 100%; 
    z-index: 999;
} /* Container um rechte ToolBar */

/* TreeView */

.RadTreeView .rtImg {
    width: 20px !important;
    height: 20px !important;
} /* Icon */

.RadTreeView .rtIn {
    font-size:14px;
    color: rgb(53,53,53);   
    font-weight:600;
    font-family: 'Open Sans', sans-serif; 
    padding-left: 8px !important;
} /* Text */

.RadTreeView .rtMid, .RadTreeView .rtBot {
    padding: 2px 0px 2px 20px !important;
} /* Standardzeile */

.RadTreeView ul {
    padding-left: 10px !important;
} /* Eingerückte Gruppe unter Ordner */

.RadTreeView .rtTop {
    padding-top:2px !important;
} /* Erstes Element in Gruppe */

.RadTreeView .rtLast {
    padding-bottom:16px;
} /* Letztes Element in Gruppe */

.RadTreeView .rtSelected .rtIn, .RadTreeView .rtHover .rtIn {
    background-image: none !important;
    background-color: transparent !important;
	color:rgb(252, 60, 57) !important;
	border: 1px solid rgb(240, 240, 240) !important;
    padding-left: 8px !important;
} /* Seletkierter Knoten */ 

.RadTreeView .rtLines .rtLI,
.RadTreeView .rtLines .rtTop,
.RadTreeView .rtLines .rtMid,
.RadTreeView .rtLines .rtBot {
    background-image: none !important;
} /* Keini Linien im Baum */

/*Shortcut Toolar*/

.ToolbarShortcuts .rtbMiddle {
    background-color: rgb(53,53,53) !important;
    background-color: rgba(53,53,53,0) !important;
    border: none !important;
} /* Hintergrund */

    .ToolbarShortcuts .rtbUL { 
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

.StripeLeftUnderToolbarShortcuts {
    position: fixed;
    top: 107px;
    left: 0px;
    bottom: 0px;
    width: 36px;
    z-index: 1;
    background-color: rgb(65, 65, 65);
    background-color: rgba(0, 0, 0, 0.6);
}

.MouseClickCation {
    position: fixed; 
    left: -37px; bottom: 52px; 
    z-index: 2; 
    color: white; 
    font-size: 20px; font-weight:bold; 
    transform: rotate(270deg);
}

/* Grid */

.rgRow, .rgRow a, .rgAltRow, .rgAltRow a, .rgHeader, .rgPager a, .rgPager table {
    font-size:14px;
    color: rgb(53,53,53);
    font-family: 'Open Sans', sans-serif; 
}

.rgHoveredRow {
    background-image: none !important;
	background-color: rgb(240,240,240) !important;
}

.rgRow td, .rgAltRow td {
    border-width: 1px 0px 0px 0px !important;	
	border-color: rgb(240,240,240) !important;
    padding-left: 5px !important;
}

.rgSelectedRow {
    background-color:rgb(240, 240, 240) !important;
    background-image: none !important;
    background: none !important;
}

.rgHeader, .rgPager, .rgPager a {
    font-weight:600 !important;	
    background-image: none !important;
    background-color:rgb(230, 230, 230) !important;
    border-width: 1px 0px 0px 0px !important;	
}

.RadGrid .rgNumPart a.rgCurrentPage {
    background: none;
	background-color: rgb(252, 60, 57) !important;
    color: White !important;
    font-weight:600 !important;	
} /* Selektierte Seite im Pager */

.RadGrid p {margin: 0px;}

/* Kalender */

.RadScheduler_Office2010Blue {
	font: inherit !important;
}

.rsHeader {
    z-index: 10 !important;
	background-image:none !important;
	background-color: rgb(245,245,245) !important;
	background-color: rgba(245,245,245,0.8) !important;
	height: 34px !important;
    border-color: rgba(210,210,210,0.8) !important;
	border-top-color: rgb(245,245,245) !important;
} /* Kopfbereich */

.rsHeader .rsPrevDay {
	background-image: url('IconsDefault/Back_20.png') !important;
	width:26px !important;
	height:24px !important;
	background-repeat:no-repeat;
	background-position: inherit !important;
    margin-top: 8px !important;
}

.rsHeader .rsPrevDay:hover {
	background-image: url('IconsFocus/Back_20.png') !important;
}

.rsHeader .rsNextDay {
	background-image: url('IconsDefault/Foreward_20.png') !important;
	width:26px !important;
	height:24px !important;
	background-repeat:no-repeat;
	background-position: inherit !important;
    margin-top: 8px !important;
}

.rsHeader .rsNextDay:hover {
	background-image: url('IconsFocus/Foreward_20.png') !important;
}

.rsHeader .rsToday {
	font-size: 14px;
	text-decoration: none;
    color:rgb(53,53,53);
    line-height: 34px !important;
}

.rsHeader h2 {
    color:rgb(252, 60, 57) !important; 
    font-weight: 400 !important; 
    font-size: 18px !important;
    margin-top: 2px;
}

.rsHeader .rsDatePickerActivator {
    margin-top: 6px !important;
    background-image: url('IconsDefault/Down_16.png') !important;
	background-repeat:no-repeat;
	background-position: center !important;
}

.rsHeader .rsDatePickerActivator:hover {
    background-image: url('IconsFocus/Down_16.png') !important;
}

.rsHorizontalHeaderTable {
	height:28px !important;
}

.rsHorizontalHeaderTable th {
    background-image: none !important;
    background-color: white !important;
    color: rgb(53, 53, 53) !important;
    font-size: 14px;
    border-left-style: none !important;
    border-right-style: none !important;
}

.rsSpacerCell {
    border-left-style: none !important;
    border-right-style: none !important;
}

.rsAllDayRow td {
	border-color: rgb(220, 220, 220) !important;
}

.rsVerticalHeaderTable th {
	border-color: rgb(220, 220, 220) !important;
	border-right-color: rgb(190, 190, 190) !important;
}

/* Navigationskalender */

.RadCalendar {
    color: rgb(53, 53, 53) !important;
}

.RadCalendar .rcMain {
    border-color: rgba(210,210,210,0.8) !important;
}

.RadCalendar .rcWeek th {
	background-color: rgb(245,245,245) !important;
    font-family: 'Open Sans', sans-serif;
    border-top-style: none !important;
}

.RadCalendar .rcRow td {
    border-style: none !important;
	background-color: white;
    font-family: 'Open Sans', sans-serif;
}

.RadCalendar .rcRow td:hover {
	background-image: none !important;
	background-color: rgb(252, 60, 57) !important;
}

.RadCalendar .rcRow td:hover a {
	color: White !important;
	font-weight: 600;
}

.rcWeek .rcViewSel, .rcRow th {
	background-color: rgb(245,245,245) !important;
    font-family: 'Open Sans', sans-serif;
}

.rcSelected {
	background-image: none !important;
	background-color: rgb(252, 60, 57) !important;
}

.rcSelected a {
	color: White !important;
	font-weight: 600;
}

.rcTitlebar {
    border-color: rgba(210,210,210,0.8) !important;
	background-image: none !important;
	background-color: rgb(245,245,245) !important;
}

.rcSelected, .rcSelected a {
	background: none !important;
	background-color: rgb(252, 60, 57) !important;
    border: 0px none !important;
} /* Monats-Selektor-Popup */

.RadCalendarMonthView_Office2010Blue input {
	background-image: none !important;
	background-color: rgb(245,245,245) !important;
    font-family: 'Open Sans', sans-serif;
}
    
.RadCalendarTimeView_Office2010Blue th {
    background: none !important;	
    color: rgb(35,35,35) !important;
}

.RadCalendarTimeView_Office2010Blue td.rcHover a {
    background: none !important;	
    border: none !important;
	background-color: rgb(252, 60, 57) !important;
	color: White !important;
	font-weight: 600;
}

/* Editor */

.reTool .Undo {
	background: none !important;
	background-image: url('IconsEditor/Undo.png') !important;
	background-position: center !important;
}

.reTool .Redo {
	background-image: url('IconsEditor/Redo.png') !important;
	background-position: center !important;
}

.reTool .FindAndReplace {
	background-image: url('IconsEditor/Search.png') !important;
	background-position: center !important;
}

.reTool .Cut {
	background-image: url('IconsEditor/Cut.png') !important;
	background-position: center !important;
}

.reTool .Copy {
	background-image: url('IconsEditor/Copy.png') !important;
	background-position: center !important;
}

.reTool .Paste {
	background-image: url('IconsEditor/Paste.png') !important;
	background-position: center !important;
}

.reTool .InsertUnorderedList {
	background-image: url('IconsEditor/Bullet.png') !important;
	background-position: center !important;
}

.reTool .InsertDate {
	background-image: url('IconsEditor/Date.png') !important;
	background-position: center !important;
}

.reTool .InsertTable {
	background-image: url('IconsEditor/Table.png') !important;
	background-position: center !important;
}

.reTool .Unlink {
	background-image: url('IconsEditor/Unlink.png') !important;
	background-position: center !important;
}

.reTool .LinkManager {
	background-image: url('IconsEditor/Link.png') !important;
	background-position: center !important;
}

.reTool .BackColor {
	background-image: url('IconsEditor/BackColor.png') !important;
	background-position: center !important;
}

.reTool .ForeColor {
	background-image: url('IconsEditor/Foreground.png') !important;
	background-position: center !important;
}

.reTool .StripAll {
	background-image: url('IconsEditor/Contract_16.png') !important;
	background-position: center !important;
}

.RadEditor.reWrapper {
    background-color: rgb(245,245,245) !important;
    border-radius: 6px !important;
}

.RadEditor { 
	width: 100% !important;
}

.reToolbar li {
	background-image: none !important;
}

.reTool:hover, .reTool_text:hover {
	background-image: none !important;
	border:none !important;
}

.reToolbar.Office2010Blue .reGrip  {
	background-image: none !important;
}

.reDropdown, .reItemOver {
	background-color: rgb(245,245,245) !important;
}

/* Notification */

.rnContentWrapper {
	color: rgb(53,53,53) !important;
}

.RadNotification {
    font-family: 'Open Sans', sans-serif !important;
}

.RadNotification_Office2010Blue {
	background-color: rgb(245,245,245) !important;
}

.RadNotification_Office2010Blue.rnShadows {
    box-shadow: 2px 2px 3px rgb(200,200,200) !important;
}

/*#endregion*/


/*#region Hauptmenü */

.MainMenuBack {
	background-color: white;
	height: 34px; width:100%;
} /* Hintergrund Startmenü */

.MainMenu {
	position:fixed; left: 0px; top:0px;
	background-color: rgba(245,245,245,0.8);
	height: 38px; width:263px;
	overflow: hidden;
    -webkit-transition: all 0.35s;
    -ms-transition: all 0.35s;
    -moz-transition: all 0.35s;
    transition: all 0.35s;
    z-index: 5000;
}

.MainMenu:hover {
	height: 100%;
	background-color: rgba(250,250,250,0.95);
    -webkit-transition: all 0.35s;
    -ms-transition: all 0.35s;
    -moz-transition: all 0.35s;
    transition: all 0.35s;
    z-index: 5000;
} 

.MainMenuHdg {
    padding:6px;
    height:24px;
    text-align: center;
    border-bottom: 1px solid rgba(210,210,210,0.8);
}

.MainMenuEntry {
    display:inline-block;
    width: 100%; height: 60px;
}

.MainMenuEntry p {
	display:inline-block;
	text-decoration: none;
	color:rgb(53,53,53);
	font-size: 16px;
	margin-left: 60px;
}

.MainMenuEntry:hover p {
	color:rgb(252, 60, 57);
}

.MainMenuEntry .MainMenuImage {
    width: 52px; height:48px;
    margin-top: 6px; margin-left: 16px;
	display:inline-block;
    background-repeat: no-repeat;
}

#imgMenuCalendar {background-image: url('IconsDefault/Calendar_48.png');}
.MainMenuEntry:hover #imgMenuCalendar {background-image: url('IconsFocus/Calendar_48.png');}

#imgMenuNotifications {background-image: url('IconsDefault/Communicate_48.png');}
.MainMenuEntry:hover #imgMenuNotifications {background-image: url('IconsFocus/Communicate_48.png');}

#imgMenuMail {background-image: url('IconsDefault/Email_48.png');}
.MainMenuEntry:hover #imgMenuMail {background-image: url('IconsFocus/Email_48.png');}

#imgMenuNewsletter {background-image: url('IconsDefault/Serialmail_48.png');}
.MainMenuEntry:hover #imgMenuNewsletter {background-image: url('IconsFocus/Serialmail_48.png');}

#imgMenuCustomers {background-image: url('IconsDefault/Contacts_48.png');}
.MainMenuEntry:hover #imgMenuCustomers {background-image: url('IconsFocus/Contacts_48.png');}

#imgMenuInvoices {background-image: url('IconsDefault/Invoice_48.png');}
.MainMenuEntry:hover #imgMenuInvoices {background-image: url('IconsFocus/Invoice_48.png');}

#imgMenuDocuments {background-image: url('IconsDefault/Document_48.png');}
.MainMenuEntry:hover #imgMenuDocuments {background-image: url('IconsFocus/Document_48.png');}

#imgMenuSettings {background-image: url('IconsDefault/Settings_48.png');}
.MainMenuEntry:hover #imgMenuSettings {background-image: url('IconsFocus/Settings_48.png');}

#imgMenuMasterData {background-image: url('IconsDefault/Database_48.png');}
.MainMenuEntry:hover #imgMenuMasterData {background-image: url('IconsFocus/Database_48.png');}

.MainMenu .Footer {
    visibility:hidden;
	white-space: nowrap;
	overflow: hidden;
}

.MainMenu .Footer a {
    color:rgb(53,53,53);
    text-decoration: none;
}

.MainMenu:hover .Footer {
    position:absolute; width:100%; height:45px;
    visibility:visible;
    bottom:0px; left:10px;
    -moz-transition-delay:0.36s;
    -o-transition-delay:0.36s;
    -webkit-transition-delay:0.36s;
    transition-delay:0.36s;
}

.MainMenu .TestFooter {
    visibility:hidden;
	white-space: nowrap;
	overflow: hidden;
}

.MainMenu:hover .TestFooter {
    position:absolute; width:100%; height:70px;
    visibility:visible;
    bottom:60px; 
    text-align: center;
    -moz-transition-delay:0.36s;
    -o-transition-delay:0.36s;
    -webkit-transition-delay:0.36s;
    transition-delay:0.36s;
}

/*#endregion*/


/*#region MyRegion */

.arrow_box {
    position:fixed; width:220px; height:100px;
    top: 60px; left: 10px;
    border-radius:6px;
    background-color: rgb(22, 126, 251);
    background-color: rgba(22, 126, 251, 0.95);
    padding: 4px 12px 4px 12px;
}

.arrow_box, .arrow_box p, .arrow_box a {
	color: White;
	font-weight: bold;
	text-decoration: none;
}

.arrow_box:after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(22, 126, 251, 0);
	border-bottom-color: #167efb;
	border-width: 18px;
	margin-left: -18px;
}

/*#endregion*/


/*#region E-Mail Indikator */

.EmailHint {
    position:fixed;
    bottom: 150px; left: 0px;
    height:20px; width:22px;
    padding: 3px;
    background-color: rgb(42,132,243);
    background-color: rgba(42,132,243,0.80);
    color: white;
    z-index: 1000;
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
} 

/*#endregion*/


/*#region Manuelle Tabelle in einem Grid */

.GridSubTbl td {
	border-style: none !important;
	padding: 0px !important;
}

/*#endregion*/

/*#region Funktion in Klondialog */

.CloneFunctions a {
	text-decoration: none;
    display: block;
    width: 230px;
    height: 40px;
    -webkit-box-shadow: 3px 3px 6px rgb(190, 190, 190);
    -moz-box-shadow: 3px 3px 6px rgb(190, 190, 190);
    box-shadow: 3px 3px 6px rgb(190, 190, 190);
    background-color: rgb(245, 245, 245);
}

.CloneFunctions .FunctionTbl {
    height: 100%;
}

.CloneFunctions .FunctionTbl .FunctionImgCol {
    vertical-align: middle;
}

.CloneFunctions .FunctionTbl .FunctionTxtCol {
    vertical-align: middle;
}

.CloneFunctionOffer a {
    background-color: rgb(246, 246, 201);
}

.CloneFunctionConfirmation a {
    background-color: rgb(246, 201, 201);
}

.CloneFunctionInvoice a {
    background-color: rgb(218, 238, 244);
}

.CloneFunctionDefault {
    background-color: rgb(250, 250, 250);
}

.CloneFunction {
	margin-top: 3px;
	border: 1px solid rgb(180, 180, 180);
}

.CloneFunctionDisabled a {
    background-color: rgb(210, 210, 210);
}

/*#endregion*/

/*#region AppTip */

.AppTipWindow {
	position: absolute;
	width: 564px;
	margin-left: -282px;
	left: 50%;
	top: 25%;
	border-radius: 10px;
	border:1px solid black;
	background: #f5f5f5;
}

.AppTipHeader {
	background-color: rgb(230, 230, 230);
	border-bottom: 3px solid #c51321;
	height: 28px;
	border-radius: 9px 9px 0 0;
	padding: 11px;
}
    .AppTipHeader img{
	    float:left;
    }
    .AppTipHeader p {
	    padding-top: 2px; 
	    float: right;
	    margin: 0;
	    margin-top: -3px;
	    font-size: 20px;
	    font-weight: 600;
    }
    .AppTipHeader div * {
	    float: left;
    }
    .AppTipHeader div {
	    width: 320px;
	    margin: 0 auto;
    }

.AppTipImg {
	height: 200px;
	overflow: hidden;
}
    .AppTipImg img{
	    width: 100%;
    }

.AppTipFooter {
	background-color: rgb(230, 230, 230);
	height: 50px;
	border-radius:0 0 9px 9px;
	padding: 0 10px 20px 10px;
	text-align: center;
}

    .AppTipFooter div {
        padding-top: 25px;
    }
        
    .AppTipFooter a {
        padding: 6px 6px;
        margin-top: -5px;
        background-color: #c51321;
        z-index: 999;
        width: 200px;
        text-align: center;
        color: white;
        border-radius: 3px;
        margin-right: 10px;
        font-size: 14px;
	    text-decoration: none;
    }

.AppText {
	padding: 0 40px;
}

/*#endregion*/

/*#region Leitfaden rechts in Auftrag */

.AssistantRight {
    background-color: rgba(180,180,180,0.2);
    border-spacing: 0px;
    overflow: hidden;
    padding: 12px;
    margin: 8px;
    margin-top: -12px;
    width: 232px;
    max-width: 232px;
    min-width: 232px;
    overflow: hidden;
    border-radius: 20px;
    border: solid 1px white;
    box-shadow: 0px 0px 8px rgb(120,120,120);
} /* Leitfaden rechts */

.AssistantHdg p {
	font-size: 14px;
	font-weight: bold;
	margin: 12px 0px 6px 0px;
}

.AssistantText p {
	font-size: 12px;
	margin: 6px 0px 24px 0px;
}

/*#endregion*/


/*#region Funktionen auf der rechten Seite (td) */

.FunctionsRight {
	width: 236px; 
	vertical-align: top;
}

.FunctionsRightDocked {
	width: 30px; max-width: 30px;
	overflow: hidden;
	vertical-align: top;
    -webkit-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
} /* ausgeblendete Version */

    .FunctionsRightDocked:hover {
	    width: 255px;  max-width: 255px;
        -webkit-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

.FunctionsRightMore {
	height: 40px; 
	overflow: hidden;
} /* ausgeblendete Version */

    .FunctionsRightMore:hover {
	    height:auto;
    }

    .FunctionsRightMore a {
        height: 40px;
    }

/*#endregion*/

/*#region OK-Meldung */

.OkFadeOkMsg {
    position:fixed;
    top: 50%; left: 50%;
    margin-top: -80px;
    margin-left: -300px;
    padding:24px;
    width:600px;
    background-color: rgb(240,255,240);
    background-color: rgba(240,255,240,0.3);
    border: 5px solid rgb(240,255,240);
    border-radius:10px;
    z-index: 2000;
    -webkit-box-shadow: 5px 5px 20px grey;
    -moz-box-shadow: 5px 5px 20px grey;
    box-shadow: 5px 5px 20px grey;
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    font-size: 16px;
}
    @-webkit-keyframes fadeout {
        0%   {opacity: 0;  width:600px; padding:24px;}
        10%  {opacity: 0.95}
        70%  {opacity: 0.95}
	    99% {width:600px; padding:24px;}
        100%  {opacity: 0; width:0px; padding:0px;}
    }
    @-moz-keyframes fadeout {
        0%   {opacity: 0; width:600px; padding:24px;}
        10%  {opacity: 0.95}
        70%  {opacity: 0.95}
	    99% {width:600px; padding:24px;}
        100%  {opacity: 0; width:0px; padding:0px;}
    }
    @keyframes fadeout {
        0%   {opacity: 0; width:600px; padding:24px;}
        10%  {opacity: 0.95}
        70%  {opacity: 0.95}
	    99% {width:600px; padding:24px;}
        100%  {opacity: 0; width:0px; padding:0px;}
    }
    .OkFadeOkMsg {
        -webkit-animation-duration: 2200ms;
        -webkit-animation-name: fadeout;
        -moz-animation-duration: 2200ms;
        -moz-animation-name: fadeout;
        animation-duration: 2200ms;
        animation-name: fadeout;
        opacity: 0;
        width: 0px;
        padding:0px;
    }

/*#endregion*/

@-webkit-keyframes ZoomIn {
    0%   {opacity: 0;}
    100%  {opacity: 0.95;}
}
@-moz-keyframes ZoomIn {
    0%   {opacity: 0;}
    100%  {opacity: 0.95;}
}
@keyframes ZoomIn {
    0%   {opacity: 0;}
    100%  {opacity: 0.97;}
}

.AjaxBackground {
    position: fixed; 
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10000;
} /* Abdeckender Hintergrund */


/*#region Tabellen in Produktionsliste */

.ProductionListTbl {
    border-width: 1px;
	border-style: solid;
    border-color: rgb(220,220,220);
    border-collapse: collapse;
    width: 100%;
}

    .ProductionListTbl tr {
        border-width: 1px;
	    border-style: solid;
        border-color: rgb(220,220,220);
        padding: 12px 6px 12px 6px;
    }
     
    .ProductionListTbl td {
        border-width: 1px;
	    border-style: solid;
        border-color: rgb(220,220,220);
        padding: 12px 6px 12px 6px;
    }
    
        .ProductionListTbl td p {
            margin: 0px;
        }
    
    .ProductionListTbl .RecipeTbl {
        border-width: 0px;
	    border-style: none;
        border-collapse: collapse;
        width: 100%;
    }

        .ProductionListTbl .RecipeTbl td {
            border-width: 0px;
	        border-style: none;
	        padding: 3px;
        }

/*#endregion*/


/*#region Hauptmenü */

.MainMenuNew  {
    Position: fixed;
    width:262px;
    height:39px;
    background-color: rgb(90,90,90);
    border-bottom: 1px solid rgb(120,120,120);
    margin: 0;
    padding: 0;
}

    .MainMenuNew a {
        display:inline-block;
        width:260px;
        height:39px;
        text-decoration: none;
        color: White;
    }

    .MainMenuNew img {
        margin: 8px 0px 0px 20px; 
    }

    .MainMenuNew a p {
        margin: -20px 0px 0px 60px; 
        color: White;
        font-size: 14px;
    }

    .MainMenuNew .SubMenu {
        Position: fixed;
        overflow: auto; 
        width:262px;
        background-color:rgb(240, 240, 240);
    }

.MainMenuActive {
    float: left;
    background-color: rgb(252, 60, 57);
    width:10px;
    height:40px;
    padding: 0px;
}

/*#endregion*/

.ProductionChatComment {
    font-size: 10px;
    margin-bottom: 6px;
} /* Kommentar im Chat der Produktionsliste*/

/*#region Sprechblase */

.SpeechBubbleLeft {
    position: relative;
    width: 70%; min-height: 24px;
    padding: 8px;
    margin: 6px 20px 6px 0px;
    background: rgb(240,240,240);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: rgb(220,220,220) solid 1px;
}

    .SpeechBubbleLeft:after {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 8px 17px 8px 0;
        border-color: transparent rgb(240,240,240);
        display: block;
        width: 0;
        z-index: 1;
        left: -17px;
        top: 11px;
    }

    .SpeechBubbleLeft:before {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 8px 17px 8px 0;
        border-color: transparent rgb(220,220,220);
        display: block;
        width: 0;
        z-index: 0;
        left: -18px;
        top: 11px;
    }

.SpeechBubbleRight {
    position: relative;
    width: 70%; min-height: 24px;
    left: 30%;
    margin: 6px 0px 6px -40px; 
    padding: 8px;
    background: rgb(240,240,240);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: rgb(220,220,220) solid 1px;
}

    .SpeechBubbleRight:after {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 8px 0 8px 17px;
        border-color: transparent rgb(240,240,240);
        display: block;
        width: 0;
        z-index: 1;
        right: -17px;
        top: 11px;
    }

    .SpeechBubbleRight:before {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 8px 0 8px 17px;
        border-color: transparent rgb(220,220,220);
        display: block;
        width: 0;
        z-index: 0;
        right: -18px;
        top: 11px;
    }

.SpeechBubbleSendInfo {
	font-size: 10px;
	margin-bottom: 6px; margin-top: 0px;
	color: rgb(150,150,150);
} /* Absatz mit Absenderinfos */

.SpeechBubbleTable {
    width:100%; 
    font-size:14px; 
    border-style:none; 
    border-collapse:collapse;
}
    .SpeechBubbleTable td {
        text-align:left; 
        vertical-align: top;
        padding:1px 0px 1px 0px !important;
        border-style: none !important;
    }


/*#endregion*/


/*#region MyRegion */

.ShopToolBar {
    position: sticky;
    width: 100%; height: 64px;	
	background-color: rgb(245,245,245);
    border-bottom: 1px solid rgb(219,219,219);
}

    .ShopToolBar a {
        display:inline-block;
        margin: 8px 16px;
        height:48px;
        text-decoration: none;
    }

    .ShopToolBar a img {
        float:left;
        vertical-align: middle;
        margin-left: 16px; margin-top: 8px;
    }

    .ShopToolBar .NoMarginLeft {
        margin-left: 0px !important;
    }

    .ShopToolBar a p {
        float:left;
        vertical-align: middle;
        margin: 0px 0px 0px 10px;
        line-height: 48px;
        font-size: 15px;
        overflow: auto;
    }

    .ShopToolBar input {
        float:left;
        vertical-align: middle;
        margin: 21px 10px 0px 0px;
        width: 200px;
        font-size: 15px;
        overflow: auto;
    }

/*#endregion*/

/*#region Hauptmenü am oberen Seitenrand */

#TopMenu {
    position: fixed;
    left: 0px; width: 100%;
    padding: 0px;
    top: -13px; 
    z-index: 999;
}

    #TopMenu ul {
        list-style-type: none;
        margin-left: 0;
        padding: 0;
        overflow: hidden;
        background-color: rgb(65, 65, 65);
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(20px);
    }

    #TopMenu ul li {
        float: left;
        width: 12%;
        border-right: 1px none rgb(110, 110, 110);
    }

        #TopMenu ul li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 0px 0px 0px;
            text-decoration: none;
        }

        #TopMenu ul li a img {
            position:relative;
            height: 48px; width: 48px;
        }

        #TopMenu ul li a p {
            color: white;
            white-space: nowrap;
            font-size: 13px;
        }

        #TopMenu ul li a:hover p {
            color: rgb(210, 210, 210);
        }

#TopMenuExpress {
    position: fixed;
    left: 0px; width: 100%;
    padding: 0px;
    top: -13px; 
    z-index: 999;
} /* Hauptmenü für Expressversion*/ 

    #TopMenuExpress ul {
        list-style-type: none;
        margin-left: 0;
        padding: 0;
        overflow: hidden;
        background-color: rgb(65, 65, 65);
        opacity: 0.93;
    }

    #TopMenuExpress ul li {
        float: left;
        width: 14%;
        border-right: 1px none rgb(110, 110, 110);
    }

        #TopMenuExpress ul li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 0px 0px 0px;
            text-decoration: none;
        }

        #TopMenuExpress ul li a img {
            position:relative;
            height: 48px; width: 48px;
        }

        #TopMenuExpress ul li a p {
            color: white;
            white-space: nowrap;
        }

        #TopMenuExpress ul li a:hover p {
            color: rgb(210, 210, 210);
        }

.TopMenuExpressReservierung {
    position: fixed;
    left: 0px; width: 100%;
    padding: 0px;
    top: -13px; 
    z-index: 999;
} /* Hauptmenü für Expressversion*/ 

    .TopMenuExpressReservierung ul {
        list-style-type: none;
        margin-left: 0;
        padding: 0;
        overflow: hidden;
        background-color: rgb(65, 65, 65);
        opacity: 0.93;
    }

    .TopMenuExpressReservierung ul li {
        float: left;
        width: 16.5%;
        border-right: 1px none rgb(110, 110, 110);
    }

        .TopMenuExpressReservierung ul li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 0px 0px 0px;
            text-decoration: none;
        }

        .TopMenuExpressReservierung ul li a img {
            position:relative;
            height: 48px; width: 48px;
        }

        .TopMenuExpressReservierung ul li a p {
            color: white;
            white-space: nowrap;
        }

        .TopMenuExpressReservierung ul li a:hover p {
            color: rgb(210, 210, 210);
        }

/* Untermenü */

.TopMenuSub {
    position: fixed;
    top: 107px;
    left: 4%;
    width: 94%;
    border: solid 2px white;
    -webkit-box-shadow: 3px 3px 6px rgb(220,220,220);
    -moz-box-shadow: 3px 3px 6px rgb(220,220,220);
    box-shadow: 3px 3px 6px rgb(220,220,220);
    z-index: 20000;
    transition: all 0.4s ease-in-out;
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 0px 0px 20px 20px;
}

.TopMenuSub H1 {
    color:rgb(252, 60, 57); 
    margin: 20px 0px 0px 20px;
    font-weight:300; 
    font-size:38px; 
    padding-top: 24px;
}

.TopMenuSub H2 {
    font-size:16px; 
    margin-top: 24px; margin-bottom: 12px;
    margin-top: 10px;
}

.TopMenuSub a {
    text-decoration: none;
}

.TopMenuSub table {
    width: 100%;
    margin: 20px 0px 12px 20px;
}

.TopMenuSub table tr td {
    vertical-align: top;
}

.TopMenuSub table .Left {
    width: 150px;
    padding-right: 10px;
}

.TopMenuSub table .Right {
    padding-left: 10px;
    border-left: solid 1px rgb(219, 219, 219);
}

.TopMenuSub .Box {
	position:relative;
	float:left;
    width: 170px;
    margin-left: 20px; margin-bottom: 20px;
    min-height: 180px;
}

.Visible {
    opacity: 0.97;
    visibility: visible;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    z-index: 20000;
}

.Hidden {
    opacity: 0;
    visibility: hidden;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    z-index: 20000;
}

.DefaultBlueColor {
    color: #167EFB;
}

.clear{clear:both; height: 0px;}

.MainToolbarUnderMenu {
    position: fixed;
    top: 111px; left: 41px;
    width: 100%; 
    z-index: 999;
} /* Container um rechte ToolBar */

.MainToolbarRightUnderMenu {
    position: fixed;
    top: 114px; left: 310px;
    width: 100%; 
    z-index: 999;
} /* Container um rechte ToolBar */

.ToolbarShortcuts { 
    position: fixed;
    top: 107px; left: 0px;
    width: 36px; 
    z-index: 999;
} /* ToolBar links */

.MenuSpace {
    height: 107px;
}

.MenuClose {
    position: absolute;
    top: 25px; right: 25px;
}

/* Responsive Design für Menü */

@media (max-width: 780px) , screen and (max-height: 900px) { 
    #TopMenu ul li a img {
        height: 32px; width: 32px;
    }
    #TopMenuExpress ul li a img {
        height: 32px; width: 32px;
    }
    .TopMenuSub {
        top: 91px; 
    } 
    .MainToolbarUnderMenu {
        top: 96px;
    } 
    .MainToolbarRightUnderMenu {
        top: 98px; 
    } 
    .ToolbarShortcuts {
        top: 91px; 
    } /* ToolBar links */
    .StripeLeftUnderToolbarShortcuts {
        top: 91px; 
    } 
    .MenuSpace {
        height: 90px;
    }
}

@media (max-width: 780px) { 
    #liSettings { 
        display: none;
    }
    #TopMenu ul li {
        width: 14%;
    }
}

@media (max-width: 600px) { 
    #liMasterData { 
        display: none;
    }
    #TopMenu ul li {
        width: 16%;
    }
    .TopMenuSub {
        top: 91px; 
    } 
}

@media (max-width: 500px) { 
    #liSerialMail { 
        display: none;
    }
    #TopMenu ul li {
        width: 19%;
    }
    #TopMenu ul li a img {
        height: 24px; width: 24px;
    }
    #TopMenuExpress ul li a img {
        height: 24px; width: 24px;
    }
    .TopMenuSub {
        top: 83px; 
    } 
    .MainToolbarUnderMenu {
        top: 89px;
    } 
    .MenuSpace {
        height: 75px;
    }
}

@media (max-height: 700px) { 
    .TopMenuSub H1 {
        margin-top: 0px; padding-top: 12px;
        font-size:28px; 
    }
    .TopMenuSub table {
        margin-top: 10px;
    }
    .TopMenuSub .Box {
        margin-bottom: 10px;
        min-height: 160px;
    }
}

/*#endregion*/

.RadSearchBox_Default .rsbButton {
    visibility: hidden !important; 
}

.TextHint {
    width:100%; font-size:14px; 
    border:solid 1px gray; 
    border-collapse:collapse;
}

    .TextHint td {
        vertical-align: top; 
        border:solid 1px rgb(219,219,219); 
        padding: 6px 3px 6px 3px;
    }

/*#region Express-Registrierung */

@keyframes ExpressTest {
    from {bottom: -1000px;}
    to {bottom: 0px;}
}

.ExpressTest {
    position:fixed;
    bottom: 0px; left: 50%; right:50%;
    height:22px; width:200px;
    margin-left: -112px;
    padding: 4px 0px 2px 24px;
    background-color: rgb(42,132,243);
    background-color: rgba(42,132,243,0.80);
    border: 1px solid rgb(222,222,222);
    z-index: 1000;
    border-radius:6px 6px 0px 0px;
    border-left-style:none;
	transform-origin: left top 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
    animation-name: ExpressTest;
    animation-duration: 1.5s;
} 

.ExpressTest a {
    color: white;
    font-weight: bold; font-size:14px; 
    text-decoration: none;
} 

/*#endregion*/

/*#region Hinweis Backupserver */

@keyframes BackupMode {
    from {bottom: -1000px;}
    to {bottom: 0px;}
}

.BackupMode {
    position:fixed;
    bottom: 0px; left: 50%; right:50%;
    height:80px; width:450px;
    margin-left: -112px;
    padding: 4px 0px 2px 24px;
    background-color: rgb(252, 60, 57);
    border: 1px solid rgb(222,222,222);
    z-index: 1000;
    border-radius:6px 6px 0px 0px;
    border-left-style:none;
	transform-origin: left top 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
    animation-name: BackupMode;
    animation-duration: 1.5s;
} 

.BackupMode p {
    color: white;
    font-weight: bold; font-size:14px; 
    text-align: center;
    margin: 3px 0px 6px 0px;
    text-decoration: none;
} 

/*#endregion*/

/* Videobereich */ 

.VideoLink {
    float:left;
    margin: 20px 20px 0px 20px;
}


.VideoSubtitle1 {
    font-size: 14px;
    color:rgb(60,60,60);
    text-align: center;
    line-height: 20px;
    margin-top: 4px; margin-bottom: 2px;
}

.VideoSubtitle2 {
    font-size: 18px;
    color:rgb(60,60,60);
    text-align: center;
    line-height: 20px;
    margin-top: 0px; margin-bottom: 24px;
}

/* Responsive Box 50:50 */ 

.VisibleWithoutColumns {
    visibility: visible;
} /* Nur sichtbar, solange keine Spaltendarstellung */

.ColumnBoxLeft50 {
        float: none;
        width: 100%;
}

.ColumnBoxRight50 {
        float: none;
        width: 100%;
}

@media (min-width: 1000px) {

    .ColumnBoxLeft50 {
         float: left;
         width: 49%;
    }

    .ColumnBoxRight50 {
         float: right;
         width: 49%;
    }

    .VisibleWithoutColumns {
        visibility: hidden;
        height: 0px;
    } /* Nur sichtbar, solange keine Spaltendarstellung */

}

/* Responsive Box 50:50 mit frühem Umbruch (für Aufträge) */ 

.VisibleWithoutColumnsNarrow {
    visibility: visible;
} /* Nur sichtbar, solange keine Spaltendarstellung */

.ColumnBoxLeft50Narrow {
        float: none;
        width: 100%;
}

.ColumnBoxRight50Narrow {
        float: none;
        width: 100%;
}

@media (min-width: 1250px) {

    .ColumnBoxLeft50Narrow {
         float: left;
         width: 49%;
    }

    .ColumnBoxRight50Narrow {
         float: right;
         width: 49%;
    }

    .VisibleWithoutColumnsNarrow {
        visibility: hidden;
        height: 0px;
    } /* Nur sichtbar, solange keine Spaltendarstellung */

}

/* Responsive Box 30:70 */ 

.ColumnBoxLeft30 {
        float: none;
        width: 100%;
}

.ColumnBoxRight70 {
        float: none;
        width: 100%;
}

@media (min-width: 1000px) {

    .ColumnBoxLeft30 {
         float: left;
         width: 29%;
    }

    .ColumnBoxRight70 {
         float: right;
         width: 69%;
    }

}

/* Responsive Box 40:60 */ 

.ColumnBoxLeft40 {
        float: none;
        width: 100%;
}

.ColumnBoxRight60 {
        float: none;
        width: 100%;
}

@media (min-width: 1000px) {

    .ColumnBoxLeft40 {
         float: left;
         width: 39%;
    }

    .ColumnBoxRight60 {
         float: right;
         width: 59%;
    }

}

/* mcSpreadsheet */

.SpreadsheetCell {
    /*width: 100px !important;*/
    width: auto;
    width: initial;
    width: revert;
    border-color: rgb(210,210,210);
    border-style: solid;
    border-width: 1px;
    height: 22px;
    font-size: 14px;
    padding: 2px !important;
    border-radius: 0px !important;
}

.SpreadsheetColumnHeader {
    /*width: 100px !important;*/
    width: auto;
    width: initial;
    width: revert;
    border-color: rgb(220,220,220);
    border-style: solid;
    border-width: 1px;
    height: 22px;
    font-size: 14px;
    background-color: rgb(249, 249, 249);
    text-align: center;
    padding: 2px !important;
    border-radius: 0px !important;
}

.SpreadsheetRowHeader {
    width: 35px;
    border-color: rgb(220,220,220);
    border-style: solid;
    border-width: 1px;
    height: 22px;
    font-size: 14px;
    background-color: rgb(249, 249, 249);
    text-align: center;
    padding: 2px !important;
    border-radius: 0px !important;
}

.HelpArticleCell { /* Zelle mit Fragezeichen für HelpArticle */
    width: 25px;
    padding:0px;
}

.HelpArticleScreenshot {
    width: 600px;
}

.HelpArticleManualLink {
    color: rgb(252, 60, 57);
}

@keyframes elegant-rainbow-shadow {
    0% {
        box-shadow: inset 0 0 5px rgba(0, 0, 255, 0.5); /* Blau */
    }

    20% {
        box-shadow: inset 0 0 8px rgba(0, 204, 255, 0.8); /* Cyan */
    }

    40% {
        box-shadow: inset 0 0 10px rgba(153, 0, 255, 0.7); /* Violett */
    }

    60% {
        box-shadow: inset 0 0 12px rgba(255, 165, 0, 0.5); /* Orange */
    }

    80% {
        box-shadow: inset 0 0 10px rgba(153, 0, 255, 0.7); /* Violett */
    }

    100% {
        box-shadow: inset 0 0 8px rgba(0, 204, 255, 0.8); /* Cyan */
    }
}

@keyframes rainbow-shadow {
    0% {
        box-shadow: inset 0 0 15px rgba(255, 0, 0, 0.5);
    }

    10% {
        box-shadow: inset 0 0 20px rgba(255, 165, 0, 0.5);
    }

    20% {
        box-shadow: inset 0 0 25px rgba(255, 255, 0, 0.5);
    }

    30% {
        box-shadow: inset 0 0 30px rgba(0, 165, 255, 0.5);
    }

    40% {
        box-shadow: inset 0 0 25px rgba(0, 255, 255, 0.5);
    }

    50% {
        box-shadow: inset 0 0 20px rgba(64, 224, 208, 0.5);
    }

    60% {
        box-shadow: inset 0 0 15px rgba(0, 255, 255, 0.5);
    }

    70% {
        box-shadow: inset 0 0 10px rgba(0, 0, 255, 0.5);
    }

    80% {
        box-shadow: inset 0 0 15px rgba(75, 0, 130, 0.5);
    }

    90% {
        box-shadow: inset 0 0 20px rgba(238, 130, 238, 0.5);
    }

    100% {
        box-shadow: inset 0 0 25px rgba(255, 0, 0, 0.5);
    }
}

.ModalRainbowWin {
    z-index: 5000;
    position: fixed;
    padding: 24px;
    top: 50%;
    left: 50%;
    margin-top: -80px;
    margin-left: -300px;
    width: 600px;
    border-radius: 5px;
    box-shadow: 0 0 10px red;
    background-color: rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    font-size: 16px;
    animation: elegant-rainbow-shadow 5s linear infinite alternate;
}

.RainbowAnimation {
    animation: elegant-rainbow-shadow 5s linear infinite alternate;
}


.AIControlStyle {
    resize: none;
    animation: elegant-rainbow-shadow 5s linear infinite alternate;
    padding: 0px;
    border-radius: 4px;
}

.NoResizeTextBox {
    font-family: 'Open Sans', sans-serif;
    color: rgb(53,53,53);
    resize: none;
    outline: none;
    border-color: rgb(53,53,53);
    overflow: auto;
    border-radius: 3px;
}


.mc-textbox {
    z-index: 1;
    width: 100%;
    padding-right: 30px; /* Platz für Icon rechts innen */
    box-sizing: border-box;
    position: relative; /* wichtig, damit .icon sich absolut darauf beziehen kann */
}

.icon {
    position: absolute;
    top: 40px;
    right: 12px;
    font-size: 18px;
    z-index: 10;
    cursor: pointer;
    background: transparent;
    border: none;
    animation: rainbow-glow 10s linear infinite alternate, float 3s ease-in-out infinite;
    /* transform wird von float-Animation gesteuert */
}

@keyframes rainbow-glow {
    0% {
        filter: drop-shadow(0 0 4px red);
    }

    10% {
        filter: drop-shadow(0 0 4px orange);
    }

    20% {
        filter: drop-shadow(0 0 4px yellow);
    }

    30% {
        filter: drop-shadow(0 0 4px lime);
    }

    40% {
        filter: drop-shadow(0 0 4px green);
    }

    50% {
        filter: drop-shadow(0 0 4px turquoise);
    }

    60% {
        filter: drop-shadow(0 0 4px cyan);
    }

    70% {
        filter: drop-shadow(0 0 4px blue);
    }

    80% {
        filter: drop-shadow(0 0 4px indigo);
    }

    90% {
        filter: drop-shadow(0 0 4px violet);
    }

    100% {
        filter: drop-shadow(0 0 4px red);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.ai-button {
    height: 26px;
    border-radius: 3px;
    color: white;
    border: none;
    cursor: pointer;
    background: linear-gradient(270deg, #0cf, #90f, #f0c, #0cf);
    background-size: 600% 600%;
    animation: siriGradient 8s ease infinite;
    transition: transform 0.3s ease;
    box-shadow: inset 0 0px 4px black;
    opacity: 0.5;    
}

.siri-button {
    position: absolute;
    top: 40px;
    right: 12px;
    z-index: 1400;
    width: 34px;
    height: 34px;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(270deg, rgba(0, 204, 255, 1), rgba(153, 0, 255, 1), rgba(255, 0, 204, 0.8), rgba(0, 204, 255, 0.4));
    background-size: 600% 600%;
    animation: siriGradient 8s ease infinite;
    transition: transform 0.3s ease;
    box-shadow: inset 0 0px 4px black;
    opacity: 0.4;
}

    .siri-button:hover {
        transform: scale(1.2);
        opacity: 0.6;
    }

.siri-button-background {
    position: absolute;
    top: 40px;
    right: 12px;
    z-index: 1399;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background-color: rgb(0, 204, 255);
    background-image: url('Logo/Mouse20Invers.png');
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
}

@keyframes siriGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.fixed-ai-button {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1001;
}

.AssistSuggestionButton {
    color: white;
    border-radius: 3px;
    background: #c51321;
    border: none;
    padding: 0 1.5em;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(229, 57, 53, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    text-decoration: none;
    width: 120px;
}

    .AssistSuggestionButton:hover {
        filter: brightness(1.05);
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .AssistSuggestionButton:active {
        transform: translateY(0);
        box-shadow: 0 3px 6px rgba(198, 40, 40, 0.25);
    }

.textbox-wrapper {
    position: relative;
    width: 100%;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-icon {
    animation: spin 1s linear infinite;
}

.dot {
    opacity: 0.3;
    font-size: 1.2em;
    color: white;
    margin: 0 2px;
    animation-name: blink;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

    .dot:nth-child(1) {
        animation-delay: 0s;
    }

    .dot:nth-child(2) {
        animation-delay: 0.2s;
    }

    .dot:nth-child(3) {
        animation-delay: 0.4s;
    }

@keyframes blink {
    0%, 80%, 100% {
        opacity: 0.3;
    }

    40% {
        opacity: 1;
    }
}

.AssistSuggestionButton.loading {
    background-color: rgba(197, 19, 33, 0.6); /* halbtransparentes Rot */
    color: rgba(255, 255, 255, 0.7); /* halbtransparentes Weiß */
    box-shadow: none;
    cursor: wait;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.speech-output {
    background-color: #f0f0f0;
    border-radius: 15px;
    padding: 15px 20px;
    font-size: 14px;
    font-weight: 300;
    font-style: italic;
    color: black;
    display: inline-block;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 10px 20px 5px 20px;
    max-width: none;
    position: relative;
    width: auto;
}

.HelpRobot { /* Hilfe unten rechts */
    overflow: clip;
    position: fixed;
    bottom: 100px;
    right: 25px;
    border: 2px solid white;
    border-radius: 10px;
    -webkit-box-shadow: 5px 5px 20px rgb(120,120,120);
    -moz-box-shadow: 5px 5px 20px rgb(120,120,120);
    box-shadow: 5px 5px 20px rgb(120,120,120);
    background-color: rgba(240, 240, 240, 0.25);
    backdrop-filter: blur(20px);
    z-index: 1500;
}

    .HelpRobot input[type="text"] {
        padding: 0px;
        padding-left: 6px;
        font-weight: normal;
    }

    .HelpRobot input:focus, .HelpRobot input:hover {
        border: 1px solid rgb(166,194,222) !important;
        outline: none; /* entfernt den Standard-Umriss */
    }

    .HelpRobot .SearchResult {
        height: 450px;
        padding: 6px;
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-width: thin; /* Firefox */
    }

    /* Schmaler Scrollbalken Chrome, Edge, Safari */
    .HelpRobot::-webkit-scrollbar {
        width: 6px;
    }

    .HelpRobot .HelpRobotTools {
        height: 28px;
        padding: 6px;
    }

    .HelpRobot .CloseButton {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 28px;
        height: 28px;
        background-image: url('IconsDefault/Cancel_20.png');
        background-position: center;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);
        border: none !important;
        border-radius: 4px;
        cursor: pointer;
    }

        .HelpRobot .CloseButton:hover {
            background-color: white;
            border: none !important;
        }

    .HelpRobot .ToggleSizeButton {
        position: absolute;
        top: 6px;
        right: 40px;
        width: 28px;
        height: 28px;
        background-image: url('IconsDefault/Monitor_20.png');
        background-position: center;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);
        border: none !important;
        border-radius: 4px;
        cursor: pointer;
    }

        .HelpRobot .ToggleSizeButton:hover {
            background-color: white;
            border: none !important;
        }

    .HelpRobot .BackButton {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 28px;
        height: 28px;
        background-image: url('IconsDefault/Back_20.png');
        background-position: center;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);
        border: none !important;
        border-radius: 4px;
        cursor: pointer;
    }

        .HelpRobot .BackButton:hover {
            background-color: white;
            border: none !important;
        }

    .HelpRobot .AddNewButton {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 28px;
        height: 28px;
        background-image: url('IconsDefault/NewRecord_20.png');
        background-position: center;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);
        border: none !important;
        border-radius: 4px;
        cursor: pointer;
    }

        .HelpRobot .AddNewButton:hover {
            background-color: white;
            border: none !important;
        }

    .HelpRobot .EditButton {
        position: absolute;
        top: 6px;
        left: 36px;
        width: 28px;
        height: 28px;
        background-image: url('IconsDefault/Edit_20.png');
        background-position: center;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);
        border: none !important;
        border-radius: 4px;
        cursor: pointer;
    }

        .HelpRobot .EditButton:hover {
            background-color: white;
            border: none !important;
        }

    .HelpRobot .Question {
        height: 32px;
        width: 100%;
        width: 92%;
        margin: 3px;
        padding: 6px 6px 0px 6px;
    }

        .HelpRobot .Question input {
            width: 100%; 
            height: 28px;
            border: 1px solid rgb(200,200,200);
            font-family: Arial, Helvetica, sans-serif;
            border-radius: 6px;
        }

            .HelpRobot .Question input:focus {
                border: 1px solid rgb(200,200,200);
            }

.HelpRobotButton {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1500;
    width: 50px;
    height: 50px;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(270deg, rgba(0, 204, 255, 1), rgba(153, 0, 255, 1), rgba(255, 0, 204, 0.8), rgba(0, 204, 255, 0.4));
    background-size: 600% 600%;
    animation: siriGradient 8s ease infinite;
    transition: transform 0.3s ease;
    box-shadow: inset 0 0px 4px darkblue;
    opacity: 0.4;
}

    .HelpRobotButton:hover {
        transform: scale(1.1);
        opacity: 0.6;
    }

.HelpRobotButtonMouseBackground {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1499;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: rgb(0, 204, 255);
    background-image: url('Logo/Mouse32Invers.png');
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
}

/* Schriftarten */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open-Sans'), local('Open-Sans'), url(/Styles/Fonts/OpenSans/OpenSans-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open-Sans'), local('Open-Sans'), url(/Styles/Fonts/OpenSans/OpenSans-Light.ttf) format('truetype');
}

.AiTextHelper {
    position: fixed;
    bottom: 0px;
    left: 100px;
    right: 100px;
    height: 0px;
    visibility: hidden;
    padding: 0px 24px 24px 24px;
    border: 2px solid white;
    border-radius: 20px 20px 0px 0px;
    -webkit-box-shadow: 5px 5px 20px rgb(120,120,120);
    -moz-box-shadow: 5px 5px 20px rgb(120,120,120);
    box-shadow: 5px 5px 20px rgb(120,120,120);
    background-color: rgba(240, 240, 240, 0.25);
    backdrop-filter: blur(20px);
    z-index: 1600;
}

    .AiTextHelper .TextOld {
        height: 150px;
        overflow: scroll;
        border: 1px gray solid;
        width: 100%;
        padding: 6px;
        box-sizing: border-box;
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-width: thin;
    }

    .AiTextHelper .Prompt {
        width: 100%;
        box-sizing: border-box;
    }

        .AiTextHelper .Prompt input,
        .AiTextHelper .Prompt textarea {
            width: 100%;
            box-sizing: border-box;
        }

    .AiTextHelper .divWait {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        color: white;
        font-weight: bold;
        background: linear-gradient(270deg, rgba(0, 204, 255, 1), rgba(153, 0, 255, 1), rgba(255, 0, 204, 0.8), rgba(0, 204, 255, 0.4));
        background-size: 600% 600%;
        animation: siriGradient 8s ease infinite;
        opacity: 0.7;
    }

    .AiTextHelper .Caption {
        margin: 24px 0px 6px;
    }

    .AiTextHelper .button-row {
        display: flex;
        width: 100%;
        gap: 8px; 
        margin-top: 6px;
    }

        .AiTextHelper .button-row button,
        .AiTextHelper .button-row input[type="button"],
        .AiTextHelper .button-row input[type="submit"] {
            flex: 1 1 0;
            width: 100%;
        }

.LineItemsQuickEditForSearchBox {
    position: fixed;
    padding: 30px 20px 5px 20px;
    width: calc(95% - 320px);
    top: auto;
    height: 12px;
    left: 320px;
    bottom: 0px;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
    border: 2px solid rgb(235,235,235);
    border-radius: 20px 0px 0px 0px;
    z-index: 1500;
    box-shadow: 5px 5px 20px rgb(120,120,120);
    border: solid 2px white;
    background-color: rgba(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    transition: all 0.35s;
    /*animation-name: fadeout_quickedit;*/
    /*animation-duration: 3000ms;*/
}

    .LineItemsQuickEditForSearchBox:hover {
        height: 500px;
        scrollbar-width: thin; /* Firefox */
    }

    .LineItemsQuickEditForSearchBox .LastPositionHeading {
        position: fixed;
        top: 0px;
        left: 20px;
        text-align: right;
        color: rgb(252, 60, 57);
        font-weight: bold;
    }