/*  
    Wird für jedes Projekt separat hinterlegt und soll nur für die Seite spezifische Gestaltungen enthalten
    Beispielsweise wie die Primär Farbe auszusehen hat, Custom Control Styles und sonstiges
*/

@charset "utf-8";

/* Variablen */
:root {
    --color-grey: #44546a;
    --color-tsOrange: #f39b04;
    --primary-color: #95ba20;
    --color-grey-2: #597166;
    --secondary-color: /*#f49800*/ #597166;
    --accent-color: #f49800;
    --header-color: #1f4e3d;
    --text-color: #757575;
    --light-grey-background: #F6F5F2;
}

body {
    /*font-family: 'Roboto', sans-serif !important;*/
    color: var(--text-color);
    overflow: hidden scroll;
}

.btn {
    background-color: var(--primary-color);
    color: white;
    transition: background-color ease .5s;
}

    .btn:hover, .btn:focus {
        background-color: var(--secondary-color);
        color: white;
    }

.button-red { /* Abschluss Button auf Landingpage */
    background-color: var(--primary-color);
    padding: .4em .9em;
    border-radius: .4em;
    color: white;
    font-size: 160%;
    line-height: 1.5;
    cursor: pointer;
}

    .button-red:hover { /* Abschluss Button auf Landingpage*/
        background-color: var(--secondary-color);
        border-color: var(--secondary-color);
        color: white;
    }

.callout { /* Hinweis auf der Landingpage */
    padding: 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
    border-left-color: #ab2020;
    font-size: 85%;
}

/* Weiteres CSS */

.logoHeader {
    margin-bottom: 10px;
}

a:link, a:visited {
    text-decoration: none;
}

.no-border {
    border: 1px solid transparent;
}

a, .custom-font-awesome {
    color: var(--accent-color);
}

    a:hover {
        color: #efb441;
    }

.custom-link {
    color: var(--text-color);
}

    .custom-link:hover {
        color: black;
    }

.custom-spacing {
    margin-top: 20px;
}

.logoImage {
    width: 300px;
}

.overlabel {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 8px;
	font-size: 16.8px;
	font-weight: 700;
    text-align: center;
    /* width: 100%; */
}

    .overlabel > span {
        font-size: unset;
        font-weight: unset;
    }

.requiredSign {
    margin-left: 3.5px;
}

.aenderungVertragBtn {
    font-size: 19px;
    padding: .4em .9em;
    margin: 12px 0;
}

.dokUploadTooltipContainer {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.2em;
}

.dokUploadTooltipContainer > .btn {
    margin: unset;
    line-height: unset;
}

/* List Items mit Haken */
ul.content, ul.unterlagenListe {
    padding-left: 1.5em;
    list-style: none;
}

	ul.content li {
		padding-top: 5px;
		font-size: 14px;
	}

    ul.content > li:before {
        content: "\f00c"; /* FontAwesome Unicode */
        font-family: FontAwesome;
        display: inline-block;
        margin-right: 3px;
        color: var(--primary-color)
    }

    ul.content li ul {
        font-size: 1em;
    }

    ul.content.versErntehelferHeader > li:before {
        margin: 0 5px 0 -19px;
    }

.unterLagenDatenschutzLink {
    display: none;
}

ul.unterlagenListe {
    padding-left: 3px /*12px*/ /*1.5em*/;
    list-style: none;
}

.unterlagenListe {
    margin-bottom: 0;
    list-style-type: none;
}

    .unterlagenListe li {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 0;
        font-size: 1.2em;
    }

        .unterlagenListe li a {
            transition: margin-left 130ms;
        }

            .unterlagenListe li a:hover {
                margin-left: 5px;
            }


/* tooltipContainer  CSS */
.tooltipContainer:hover .tooltipContent {
    visibility: visible;
    opacity: 1;
    margin-bottom: 0;
}

.labelTooltipContainer {
    position: absolute;
}

/*	.labelTooltipContainer .tooltipContent {
		transition-duration: 0ms;
	}*/

/*	.labelTooltipContainer:hover {
		width: 367px;
	}*/

.labelTooltipContent {
    right: 310px;
    width: 100%;
    transition: none !important;
}

.tooltipContainer {
    display: inline;
    /*	position: absolute;*/
}

.tooltipContent {
    visibility: hidden;
    opacity: 0;
    background: white;
    margin-bottom: -25px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    bottom: 100%; /* 135px*/
    transition: all 250ms ease-in-out;
    max-width: 100%;
    box-shadow: 0px 2px 0px 3px var(--accent-color);
    border-radius: 12px;
}


/*.tooltipContent ul.content, ul.content li {
    font-size: 1em;
}*/


label .tooltipIcon {
    vertical-align: unset;
}

.tooltipIcon {
    vertical-align: super;
    font-size: medium;
    color: var(--accent-color);
    padding: 3px;
    transition: ease .5s;
}

/*.tooltipIcon:hover {
	color: var(--primary-hover-color);
}*/

/*
.tooltipContainer .tooltipContent::after {
	content: " ";
	position: absolute;
	top: 101%;
	left: 50%;
	margin-left: -8px;
	border-width: 8px;
	border-style: solid;
	border-color: var(--primary-color) transparent transparent transparent;
}
*/


.tippy-box[data-theme~='agrarOptimal'] {
    /*	background-color: var(--secondary-color);*/
    /*	color: yellow;*/
    background: white;
    color: unset;
    border: 2px solid var(--accent-color);
    padding: 0.5em;
    padding-bottom: 0;
}

    .tippy-box[data-theme~='agrarOptimal'][data-placement^='top'] > .tippy-arrow::before {
        border-width: 2px;
        border-top-color: white;
    }

    .tippy-box[data-theme~='agrarOptimal'][data-placement^='bottom'] > .tippy-arrow::before {
        border-width: 2px;
        border-bottom-color: white;
    }

    /*
	.tippy-box[data-theme~='tomato'][data-placement^='left'] > .tippy-arrow::before {
		border-left-color: tomato;
	}

	.tippy-box[data-theme~='tomato'][data-placement^='right'] > .tippy-arrow::before {
		border-right-color: tomato;
	}*/

    .tippy-box[data-theme~='agrarOptimal'] > .tippy-arrow::before {
        /*		transform: scale(1.5);*/
    }

.tippy-box p {
	font-size: 14px !important;
}

/* End tooltipContainer  CSS */
span.checkboxCustom input {
    /*position: relative;*/
    position: absolute;
    left: 15px;
    top: -4px;
    z-index: 0;
    -webkit-appearance: none;
}

    span.checkboxCustom input + label::before {
        width: 15px;
        height: 15px;
        /*		width: 15px;
		height: 15px;
		background-color: #000;*/
        border-radius: 5px;
        border: 2px solid var(--primary-color); /* outline: */
        background-color: #fff;
        display: block;
        content: "";
        float: left;
        margin-right: 5px;
        z-index: 5;
        position: relative;
    }

    span.checkboxCustom input + label {
        position: absolute;
        left: 4px;
        top: 10px;
    }


    span.checkboxCustom input:checked + label::before {
        content: "\f00c"; /* FontAwesome Unicode */
        font-family: FontAwesome;
        color: var(--primary-color);
        font-size: 17px;
        line-height: 8px;
    }

.versErntehelferAnreiseOverlabelTooltipContainer {
    position: absolute;
}

.directLabels {
    display: none;
}

.anreiseMobileLabel {
    display: none;
}

div.VersicherterErntehelfer .AenderungsgrundRow select.aendGrund {
	border: 2px solid var(--primary-color);
	margin-top: 13px;
}

div.VersicherterErntehelfer .AenderungsgrundRow label[for=AendGrund] {
	margin-top: 19px;
}

#versErntehelferAend .AenderungsgrundRow > div {
/*		margin-top: 25px;*/
	/*	background: #ebebeb;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 15px;
	margin-bottom: 10px;
	padding-top: 20px;*/
}
/*	#versErntehelferAend .AenderungsgrundRow > div:first-child {
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		padding-bottom: 10px;
	}
	#versErntehelferAend .AenderungsgrundRow > div:nth-child(2) {
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}
		#versErntehelferAend .AenderungsgrundRow > div:nth-child(2) > select {
		margin-bottom: 0 !important;
		}*/
		/*.aendGrund {
	display: inline-block !important;
	max-width: 23%;
	margin-top: 20px;
}*/

        .form-control-aend {
	        padding-left: 14px;
        }
		.form-control-aend, .form-control-neu {
			display: inline-block;
            margin-top: 10px;
            margin-bottom: 10px;
		}

.weiterBtns {
    width: 85px;
    max-width: 100%;
}

.personennummer {
    text-align: center;
    margin-top: 15px;
    font-size: 1.2em;
}

.aendPersonennummer {
    display: inline-block;
    position: absolute;
    left: -41px;
    top: 15px;
    width: 38px;
    margin: 0;
    padding: 1px;
    /*padding: 4px 0;*/
    text-align: center;
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: white;
    border-radius: 20px;
/*    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    background-color: var(--light-grey-background);*/
}

/*.aendPersonennummer:nth-child(even) {
display: none;
}*/

/*.aendPersonennummer {
    margin-top: 32px !important;
}
*/

@media (min-width: 1200px) {
    #aendVersErntehelfer > .container-fluid > .container {
        width: 1112px !important;
    }
}


@media (min-width: 992px) {
    .VE_Dropdown {
        width: 95%;
    }

    #aendVersErntehelfer > .container-fluid > .container {
        width: 890px;
    }
}

@media (max-width: 992px) {
    #versErntehelferAnreiseTooltipContainer {
        color: white;
    }

    /*
    input[type=text] + a {
        width: 22.5% !important;
    }
    */

    /*
    .form-control-aend {
        margin: 0;
    }

*/ /*    .form-control-aend {
        margin-left: 12px;
    }*/
    /*
    .VersicherterErntehelfer:nth-child(even) #versErntehelferAnreiseTooltipContainer {
        color: var(--accent-color)
    }
    */
    .directLabels {
        display: inline-block;
        margin-top: 7px;
        margin-bottom: 0;
    }

    .personennummer, .aendPersonennummer {
        font-size: 1.5em !important;
    }

    .aendPersonennummer {
        display: block;
        position: static;
        border: 0;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
        background: unset;
        width: 100%;
    }

    .weiterBtnsContainer {
        text-align: center;
    }

    .weiterBtns {
        width: 350px;
    }

    .VersicherterErntehelfer {
        border-radius: 10px;
        color: black;
    }

        /*    .VersicherterErntehelfer input.form-control-aend {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }*/
        .VersicherterErntehelfer:nth-child(even) {
            background-color: var(--primary-color) !important;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .VersicherterErntehelfer:nth-child(odd) {
            background-color: var(--accent-color);
        }

    #header h1 {
        text-align: center;
    }

    #header .gradient_line {
        margin: auto;
        width: 310px;
    }

    input[type=text] + a {
        transform: translate(342%, -130%) !important;
    }

    .anreiseMobileLabel {
        display: inline-block !important;
    }

    .AendGrundLabel, .aendGrund {
        margin-top: unset !important;
    }

    span.checkboxCustom input + label {
        /*top: 37px;*/
        position: static;
        left: unset;
        position: absolute;
        top: 0;
        right: 0;
    }

    span.checkboxCustom input + label::before {
        width: 22px;
        height: 22px;
        font-size: 18px;
        line-height: 17px;
    }

        .aendGrund, .form-control-aend, .form-control-neu {
            width: 99% !important;
            margin: 0;
        }
}

.info {
    font-weight: 700;
    font-size: 1.2em;
}

.infoText {
    margin-top: 20px;
    margin-bottom: 0;
    text-align: center;
    font-weight: 700;
}

#checkboxZusammenfassung h2 {
    margin-top: 20px !important;
    margin-bottom: 10px !important;
}

#checkboxZusammenfassung h2,
#checkboxZusammenfassung h3 {
    margin-bottom: 0;
    margin-top: 0;
    color: unset;
}

#checkboxZusammenfassung #einverstaendniserklaerung h2 {
    padding-left: 0;
}

.accordionItem > input, #checkboxZusammenfassung .accordionInput > input {
    display: none;
}

#checkboxZusammenfassung > .accordionInput {
    display: unset !important
}

.accordionItem > label,
#checkboxZusammenfassung .accordionInput > label {
    display: block;
    padding: 8px 22px;
    margin: 0 0 1px 0;
    cursor: pointer;
    background: var(--primary-color);
    border-radius: 3px;
    color: #FFF;
    transition: ease .5s;
    position: relative;
}

    .accordionItem > label:hover,
    #checkboxZusammenfassung .accordionInput label:hover {
        background: var(--secondary-color);
    }

    .accordionItem > label:focus,
    #checkboxZusammenfassung .accordionInput label:focus {
        background: var(--secondary-color);
    }

    .accordionItem > label::after,
    #checkboxZusammenfassung .accordionInput label::after {
        content: '+';
        font-size: 22px;
        font-weight: bold;
        position: absolute;
        right: 10px;
        top: 5px /*2px*/;
        transition: 300ms;
    }

.accordionItem > input:checked + label::after,
span.accordionInput input:checked + label::after {
    transform: rotate(45deg)
}

.accordionItem > input:checked + label {
    background-color: var(--secondary-color);
}

.accordionContent,
#zusammenfassungsContent .accordionContent {
    background: var(--light-grey-background);
    border: 1px solid #A7A7A7;
    margin: 0 0 1px 0;
    font-size: 14px;
    border-radius: 3px;
    transition: ease-in-out 250ms 0.22s;
    /* transition: height 0ms 400ms, opacity 0ms 400ms; */
}

	.accordionContent p {
		/*pointer-events: none;*/
		font-size: 1.2em;
	}

.accordionItem > input + label + .accordionContent {
    opacity: 0;
    height: 0;
    padding: 0 25px;
    display: none;
}

.accordionItem > input:checked + label + .accordionContent,
.accordionInput > input:checked + .accordionInput > label + #zusammenfassungsContent > .accordionContent {
    opacity: 1;
    height: auto;
    padding: 10px 25px;
    display: block;
}

.accordionContent .container {
    width: unset;
    padding: 0;
    margin: 0;
    position: absolute;
}

.accordionItem > input:checked + label + .accordionContent .container,
.accordionInput > input:checked + .accordionInput > label + #zusammenfassungsContent .accordionContent .container,
#einverstaendniserklaerung .container {
    position: static;
}

#unterlagen > .container-fluid {
    padding-left: 0 !important;
}

#unterlagen h2, #einverstaendniserklaerung h2 {
    font-size: 1.5em !important;
}

/* Ende Weiteres CSS */
/* Beitragsberechnung und Beitrag Teil (eigenes Modul daher Custom) */
.gesamtBeitrag {
    /*margin-bottom: 10px;*/
}

    .gesamtBeitrag input {
        display: inline-block;
        text-align: right;
        max-width: 230px;
    }

    .gesamtBeitrag label {
        margin-left: 3px;
    }

    .gesamtBeitrag td {
        padding-right: 8px;
    }

/* Ende Beitragsberechnung und Beitrag Teil */

#vermittlerNummerHeader {
    margin-top: 5px;
}

#aktiviereAgenturkontonummer {
    margin-top: 20px;
}

label[for="aktiviereAgenturkontonummer"] {
    margin-left: 5px;
}

/* Einverstaendniserklaerung */
.einverstaendniserklaerungCheckbox,
.SepaCheckbox,
.checkboxContainer {
    display: flex;
    flex-direction: row;
}

    .einverstaendniserklaerungCheckbox input {
    }

    .einverstaendniserklaerungCheckbox label,
    .SepaCheckbox label, .checkboxContainer label {
        margin-left: 20px;
    }

    .einverstaendniserklaerungCheckbox label {
        font-weight: normal;
    }

        .einverstaendniserklaerungCheckbox label a {
            font-weight: 700;
        }


.einverstaendniserklaerungInfo {
    margin-left: 32px;
    font-size: 1.2em;
}
/* Ende Einverstaendniserklaerung */

#zusammenfassungsContent table h3 {
    color: black !important;
}

#zusammenfassungsContent .table {
    /*	width: 50% !important;*/
    /*	margin-left: 3px;*/
    color: black !important;

    word-break: break-all;
}

    #zusammenfassungsContent .table td {
        width: 250px;
        max-width: 100%;

        /*word-break: break-word;*/
    }

    #zusammenfassungsContent .table a {
        word-break: break-word;
    }

    #zusammenfassungsContent .table td span {
        /*display: inline-block;*/
        /*word-break: break-word;*/
    }

    #zusammenfassungsContent .table tr th,
    #zusammenfassungsContent .table #versPersonenTableHeader {
        background-color: var(--primary-color);
    }

    #zusammenfassungsContent .table tr:nth-child(even) {
        background-color: #efefef;
    }

    #zusammenfassungsContent .table tr:nth-child(odd) {
        background-color: #e5e5e5;
    }

    #zusammenfassungsContent .table a {
        color: unset !important;
    }

        #zusammenfassungsContent .table a:hover {
            color: var(--accent-color) !important;
        }


.VersicherterErntehelfer:nth-child(even) {
    background-color: #f3f1f1;
}

#Beitragsberechnung_ValidatorCalloutExtender1_popupTable {
    margin-left: 190px;
}

.dokUploadTooltipContainerBtn[disabled=true], .dokUploadTooltipContainerBtn[disabled=true]:hover {
    background-color: var(--color-grey-2) !important;
}

@media screen and (max-width: 500px) {
    input[type=text] + a {
        transform: translate(335%, -130%) !important;
    }
}

@media screen and (max-width: 768px) {
    #Beitragsberechnung_ValidatorCalloutExtender1_popupTable {
        margin-left: unset;
        left: 15px;
    }

    .btnVertragAbschliessen {
        width: 100%;
        max-width: 100%;
        font-size: 120% !important;
    }

    .pflichtfeld {
        text-align: center;
    }

    /*	.tooltipContainer:hover .tooltipContent {
		position: relative;
	}*/
    .logoHeader {
        margin-bottom: unset;
    }

        .logoHeader .col-sm-6 {
            text-align: center !important;
        }
}

.accordionItem > input[disabled] + label,
.accordionItem > input[disabled] + label:hover,
.accordionItem > input[disabled] + label:active {
    background: #cdcdcd;
    cursor: default;
}

span.aspNetDisabled > input#zusammenfassungsCheckbox[disabled] + label[for=zusammenfassungsCheckbox],
span.aspNetDisabled > input#zusammenfassungsCheckbox[disabled] + label[for=zusammenfassungsCheckbox]:hover,
span.aspNetDisabled > input#zusammenfassungsCheckbox[disabled] + label[for=zusammenfassungsCheckbox]:active {
    background: var(--primary-color);
    cursor: default;
}

.accordionItem > input[disabled] + label::after,
span.aspNetDisabled > input#zusammenfassungsCheckbox[disabled] + label[for=zusammenfassungsCheckbox]::after {
    display: none;
}

#printable {
    padding: 20px 0;
    font-size: 1.7em;
}

    #printable button {
        font-size: 0.8em;
    }

#versErntehelferDropdownContainer {
    padding-left: 0;
}

#aendVersErntehelfer #versErntehelferDropdownContainer {
    padding-left: 5px !important; /*15px !important;*/
}

#aendVersErntehelfer #VersicherteErntehelfer_firstCol .row, #aendVersErntehelfer #VersicherteErntehelfer_secondCol .row {
    text-align: center;
}

.VersicherterErntehelfer .col-md-2, .form-control-neu, #aendVersErntehelfer .VersicherterErntehelfer .col-md-2 {
    padding-left: 4px;
    padding-right: 0;
}

/*=== Inline Buttons ===*/
input[type=text] + a /*+ input[type=submit]*/ {
    position: absolute;
    transform: translate(310%, -130%);
    height: 34px;
    width: 24.5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*=== Input File ===*/
input[type=file] {
    display: none;
}

/* === Loading Component === */
.loadContainer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    visibility:hidden;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

    .loadContainer h2 {
        color: whitesmoke !important;
    }

.loader {
    border: 16px solid var(--accent-color);
    border-bottom: 16px solid var(--primary-color);
    border-top: 16px solid var(--primary-color);
    border-radius: 100%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

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

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


/*.tooltipIcon, .col-md-6 .dokUploadTooltipHelpContainer {
    display: none !important;
}*/