/*
 * -----------------------------------------------------------------------------
 * Lucom Interaction Platform
 * (C) Lucom GmbH, Erkrath. All rights reserved.
 *
 * $$
 * -----------------------------------------------------------------------------
 */

/*
 * Add your custom CSS code to this file. This file will be included as last CSS
 * file in the form and main view. The file may also include theme macros.
 */

 @font-face {
    font-family: 'Roboto Condensed';
    src: url('../css/fonts/RobotoCondensed-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../css/fonts/RobotoCondensed-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

:root {
	font-family: 'Roboto Condensed';
	--primaryButtonColor: #0058A1;
	--primaryColor: #0058A1;
	--secondaryColor: #FFD42C;
    hyphens: auto;
}

/*
Databrowser
*/

.browseDataWizard td {
	max-width: 250px;
	overflow: hidden;
}

/* Databrowser Toolbar Icons von grün auf blau geändert */
.contentPanel .toolbar .button {
    filter: hue-rotate(110deg);   
}

/* Anpassungen Input Datepicker */

#lip_formBean .form div.formControl.componentWrapper.InputField  {
    height: 50px;
    padding: 0px 1px;
}

#lip_formBean .form div.formControl.componentWrapper.InputField:hover,
#lip_formBean .form div.formControl.componentWrapper.ffw_focussed.InputField  {
    padding: 0px;
}

#lip_formBean .form div.componentWrapper input.formControl,
#lip_formBean .form div.componentWrapper input.formControl:hover {
    padding: 0px 20px;
}

#lip_formBean .form div.componentWrapper .datePickerOpener  {
    box-sizing: border-box;
}

#lip_formBean .form div.componentWrapper .datePickerOpener.ffw_focussed  {
    border-left: 2px solid var(--primaryButtonColor) !important;
	margin-right: -2px;
    width: 52px !important;
}

/* Tooltips ausschalten */
#ffw\._tooltip {
    display: none;
}

/* Company Logo vergrößern */
.headerPanel .logo {
    width: 250px;
}

/* Fieldset margin setzten */
fieldset.formControlLabel > legend:not(.invisible) {
    margin-left: 0px;
    margin-bottom: 8px;
}

/* Vererbung verhindern (z. B. font-weight bold von .Label) */
fieldset div {
	font-weight: initial;
}

/*UploadControl Text*/
.UploadControl .drop.flex-container {
	padding: 0;
	text-decoration: none;
}
.UploadControl .drop\-text {
	padding-top: 20px;
	text-align: center;
}
.UploadControl .drop\-text .UploadTip {
	color: #656565;
	font-size: 16px;
	line-height: 24px;
	font-style: italic;
}
.UploadControl .drop\-text .UploadSize {
	color: #000000;
	font-size: 14px;
	line-height: 18px;
	padding-top: 12px;
}
.UploadControl .resumable .drop {
	--padTopBot: 16px;
	--padSide: 0px;
	padding: var(--padTopBot) var(--padSide);
}
.UploadControl:focus .resumable .drop {
	padding: calc(var(--padTopBot) - 1px) calc(var(--padSide) - 1px);
}

/* Anpassungen an Radiobutton */

/* normaler status checked/nicht checked, kein Fokus, kein Hover */
.lip_checkbox input[type="radio"]~div>.after, 
.lip_checkbox div[data-type="radio"]~div>.after {
	border: 1px solid #6B7580;
	border-radius: 25px;
	background-color: transparent;
}

/* nicht checked + Fokus */
.lip_checkbox input[type="radio"]:focus~div>.after, 
.lip_checkbox div[data-type="radio"]:focus~div>.after {
	background-color: #F2F2F2;
	border: 2px solid var(--primaryColor) !important;
}

/* checked + Fokus */
.lip_checkbox input[type="radio"]:checked:focus~div>.after, 
.lip_checkbox div[data-type="radio"][data-checked="checked"]:focus~div>.after {
	background-color: #F2F2F2;
}

/* Radiobutton hover Style */
.lip_checkbox input[type="radio"]:hover~div>.after:before, 
.lip_checkbox input[type="radio"]:checked:hover~div>.after:before {
	background-color: var(--primaryColor);
	content: ' ';
	transform: scale(0.5);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	width: 100%;
	height: 100%;
}

/* Radiobutton checked Style */
.lip_checkbox input[type="radio"]:checked~div>.after:before, 
.lip_checkbox div[data-type="radio"][checked="checked"]~div>.after:before {
	background-color: var(--primaryColor);
	transform: scale(.6);
}


/* Anpassungen an den Checkboxes */

/* Anpassen der Höhe der Checkbox */
.lip_checkbox {
    margin-top: 2px !important;
    margin-right: 0px !important;
}

/* Cursor Checkbox Label */
.LabelCheckbox {
    cursor: pointer;
}

/* normaler status checked/nicht checked, kein Fokus, kein Hover */
.lip_checkbox input[type="checkbox"]~div>.before, .lip_checkbox div[data-type="checkbox"]~div>.before,
.lip_checkbox .ffw_checkboxBorder.RadioButton  {
	border: 1px solid #6B7580 ;
	border-radius: 0px;
}


/* nicht checked + Fokus */
.lip_checkbox input[type="checkbox"]~div>.before.ffw_focussed, .lip_checkbox div[data-type="checkbox"]~div>.before.ffw_focussed {
	border: 1px solid var(--primaryColor) ;
	background-color: #FFFFFF ;
}

/* checked + Fokus */
.lip_checkbox input[type="checkbox"]:checked~div>.before.ffw_focussed, .lip_checkbox div[data-type="checkbox"][data-checked="checked"]~div>.before.ffw_focussed {
	border: 1px solid var(--primaryColor) ;
	background-color: #F2F2F2 ; 
    border-radius: 0px;
}

/* nicht checked + hover */
.lip_checkbox input[type="checkbox"]:hover~div>.before, .lip_checkbox div[data-type="checkbox"]:hover~div>.before {
	border: 2px solid var(--primaryColor) !important;
}

/* checked + hover */
.lip_checkbox input[type="checkbox"]:checked:hover~div>.before, .lip_checkbox div[data-type="checkbox"][data-checked="checked"]:hover~div>.before {
	border: 2px solid var(--primaryColor) !important;
    border-radius: 0px;
}

/* Farbe des Hakens */

/* Wenn checked */
.lip_checkbox input[type="checkbox"]:checked~div .after:before {
	background-color: var(--primaryColor);
	color: #FFFFFF;
    border-radius: 0px;
    font-size: 10px;
    padding-left: 3px;
    padding-right: 3px;
}

/* Wenn checked und drüber hover */
.lip_checkbox input[type=checkbox]:checked:hover~div .after:before, .lip_checkbox div[data-type="checkbox"][data-checked="checked"]~div>after:before {
	background-color: #6B7580 !important;
	color: #FFFFFF;
    border-radius: 0px;
    font-size: 10px;
    padding-left: 3px;
    padding-right: 3px;
}

/* Wenn checked und drüber Fokus */
.lip_checkbox input[type=checkbox]:checked~div>.before.ffw_focussed~.after:before, .lip_checkbox div[data-type="checkbox"][data-checked="checked"]~div>after:before {
	background-color: #6B7580 !important;
}

.lip_checkbox ~ .Label {
    padding-top: 2px;
}

/* Left Panel Menu */
/* Das Hauptmenü */
.leftPanel,
.menuItem,
.menuLabel,
.menuCollapser,
.leftPanel .menuPanel {
	color: var(--primaryColor);
	background-color: var(--secondaryColor);
	border-radius: 0;
	border-right: none;
}

/* Anpassungen für selektierte Menü-Einträge */
.menuPanel .itemSelected .menuItem,
.menuPanel .itemSelected .menuItem .menuLabel {
	background-color: #FFFFFF;
	color: var(--primaryColor);
}

/* Hover und Fokus */
.menuPanel .item .link ,
.menuPanel .item .link > a:hover, 
.menuPanel .item .link > a:active, 
.menuPanel .item .link > div:hover,
.menuPanel .item .link > a:focus, 
.menuPanel .item .link > a:active, 
.menuPanel .item .link > div:focus {
	background-color: transparent;
	border-color: white;
	box-shadow: none;
}

.menuPanel .item.itemSelected .link > div:focus,
.menuPanel .item.itemSelected .link > div:hover {
	background-color: #FFFFFF;
}

/* Menü ein- und ausklappen */
.menuCollapser,
.menuCollapser.collapsed {
	background: var(--secondaryColor);
	border: 1px solid transparent;
	height: 2rem;
	box-sizing: border-box;
}

.menuCollapser::after,
.menuCollapser.collapsed::after {
	content: "<<";
	float: right;
	font-size: 1rem;
	font-weight: bolder;
	font-family: unset;
}

.menuCollapser.collapsed::after {
	content: ">>";
}

.menuCollapser:focus, 
.menuCollapser:hover,
.menuCollapser.collapsed:focus,
.menuCollapser.collapsed:hover {
	box-shadow: none;
	border: 1px solid #FFFFFF;
}

/* Separatorgedöns */
.leftPanel .label {
	color: var(--primaryColor);
	font-weight: bolder;
}

.menuItemSeparator {
	border-color: var(--primaryColor);
}

.ffw_fullWidthSegments.header.responsive {
	background-color: var(--secondaryColor);
}

#btnStartseite,
.ffw_fullWidthSegments.header.responsive .HeadlineLevel3 {
	color: var(--primaryColor) !important;
}

/* Login Anpassungen */ 
#lip_autoGatherForm.autoGatherForm .floatRight.buttons .primary.button.large {
	width: 100%;
	margin-bottom: 1em;
}

.contentPanel.loginContent .cancelLogon.primary.button.large {
	background-color: var(--secondaryColor);
	color: var(--primaryColor);
    line-height: 2.3em;
	font-size: 1em;
}

.contentPanel.loginContent .cancelLogon.primary.button.large:hover,
.contentPanel.loginContent .cancelLogon.primary.button.large:focus {
	background-color: #FFFFFF;
}

.contentPanel.loginContent .login .row label.leftCol {
	background-color: var(--secondaryColor);
	color: var(--primaryColor);
}

/* Datenbrowser Filter weg */
.contentPanel .toolbar .button {
	filter: none;
}

/* Outgoing Link Registrierung kennzeichnen*/
.form.USERADMINISTRATION a {
	background: url(../images/materna/link.svg) no-repeat;
	background-position: right;
	background-size: 16px;
	padding-right: 18px;
}

/* Footer */
.footerPanel .floatLeft {
	height: 4rem;
	display: flex;
	flex-direction: column;
}

.footerPanel .floatLeft a {
	font-family: 'Roboto Condensed';
	letter-spacing: 1px;
	font-size: 16px;
	line-height: 32px;
	height: 64px;
	display: flex;
	flex-direction: column;
	background: url(../images/materna/link_footer.svg) no-repeat;
	background-position: left;
	background-size: 16px;
	padding-left: 18px;
}

/* Verlängerung PW-Change Formular */
.form.ChangePassword {
	padding-bottom: 50px;
}

/* Modale Buttons */
.viewEmbeddings .buttons input[type="button"], 
.viewEmbeddings .button input[type="button"], 
.viewEmbeddings .buttons input[type="submit"], 
.viewEmbeddings .button input[type="submit"],
#lip_formBean .pageContent__change__password  input[type="button"].ButtonSecondary.formControl.formControlButton,
#lip_formBean .pageContent__change__password  input[type="button"].ButtonPrimary.formControl.formControlButton {
	background-color: var(--secondaryColor);
	color: var(--primaryColor);
	font-family: 'Roboto Condensed';
	font-weight: bold;
}

.viewEmbeddings .buttons input[type="button"]:hover, 
.viewEmbeddings .button input[type="button"]:hover, 
.viewEmbeddings .buttons input[type="submit"]:hover, 
.viewEmbeddings .button input[type="submit"]:hover,
.viewEmbeddings .buttons input[type="button"]:focus, 
.viewEmbeddings .button input[type="button"]:focus, 
.viewEmbeddings .buttons input[type="submit"]:focus, 
.viewEmbeddings .button input[type="submit"]:focus,
#lip_formBean .pageContent__change__password  input[type="button"].ButtonSecondary.formControl.formControlButton:focus,
#lip_formBean .pageContent__change__password  input[type="button"].ButtonPrimary.formControl.formControlButton:focus,
#lip_formBean .pageContent__change__password  input[type="button"].ButtonSecondary.formControl.formControlButton:hover,
#lip_formBean .pageContent__change__password  input[type="button"].ButtonPrimary.formControl.formControlButton:hover {
	background-color: var(--primaryColor);
	color: #FFFFFF;
	font-family: 'Roboto Condensed';
	font-weight: bold;
	border-color: unset;
}

/* Anpassungen, damit man den Collapser mit neuem Impressum sieht */
.leftPanel {
	height: calc(100% - 4rem);
}

.menuCollapser {
	bottom: calc(18px + 4rem);
}