/* Das Velometrik-Standard-Theme */

@font-face {
    font-family: Source Sans Pro Light;
    font-display: swap;
    src: url('fonts/source-sans-pro-v12-latin-300.woff2') format('woff2'),
        url('fonts/source-sans-pro-v12-latin-300.woff') format('woff') }

@font-face {
    font-family: Source Sans Pro Bold;
    font-display: swap;
    src: url('fonts/source-sans-pro-v12-latin-700.woff2') format('woff2'),
        url('fonts/source-sans-pro-v12-latin-700.woff') format('woff') }

@font-face {
    font-family: Source Sans Pro Regular;
    font-display: swap;
    src: url('fonts/source-sans-pro-v12-latin-regular.woff2') format('woff2'),
        url('fonts/source-sans-pro-v12-latin-regular.woff') format('woff') }

@font-face {
    font-family: Ruda Bold;
    font-display: swap;
    src: url('fonts/rudabold.woff2') format('woff2'),
        url('fonts/rudabold.woff') format('woff') }

:root {
    /* Primärfarben */
    --primary: #5cbc40;
    --primary-light: #000000;
    --primary-hover: #000000;
    --primary-hover-border: transparent;
    --primary-disabled:#60a34b;
    --primary-disabled-border:transparent;    

    --light: #f4F4F2;
    --dark: #50595F;

    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #f29400;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-light: #DEDEDE;

    --secondary: #383E42;

    --info: #FFF;
    --info_text: #383e42;
    --info_hover: #222222;
    --info_border: #121212;

    /* Meldungen */
    --success: #1FBA41;
    --warning: #ffc107;
    --danger: #f29400;
    --danger-border: :dc3545;

    --text_dark:#383e42;
    --text_lighter:#50595f;
    --form-background:#FFF;

    /* Textmarkierung */
    --selection:#5cbc40;

    /*ungenutzt*/
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    /* Schriftarten */
    --font-family-sans-serif: Source Sans Pro Regular, Helvetica Neue, Helvetica, Arial, sans-serif;
    --font-family-sans-serif-header: Ruda Bold, Helvetica Neue,Helvetica, Arial, sans-serif;
    --font-family-sans-serif-light: Source Sans Pro Light, Helvetica Neue, Helvetica, Arial, sans-serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    --ueberschrift-text-transform: uppercase;

    --button-grafik: url('images/check.png');

    --hintergrundbild: url('images/background.jpg');

    --logo: url('images/velometrik-logo.svg');
}

/* Hintergrundbild einstellen */
#background {
    background-image:var(--hintergrundbild);
}

/*Menu farbanpassungen*/
#main .fragen > ul > li.active > ul.list-group {
    display: flex;
    color: var(--primary-light) !important;
}
.list-group-item-dark.active {
    background-color: var(--primary) !important;
    color: var(--light) !important;
}
.list-group-item-dark.active > span.nav_block > i {
    background-color: var(--primary) !important;
    color: var(--light) !important;
}

/*Warnungseinstellung*/
.alert-warning {
    color: var(--primary) !important;
    background-color: var(--white)!important;
    border-color: var(--primary) !important;
}

/*Logo*/
span.logo-icon {
    width: 250px;
    height: 65px;
    margin-left: 4px;
    margin-top: 4px;
    background-image: var(--logo);
    background-size: contain;
    background-repeat: no-repeat;
}
span.logo-text {
    display: none !important;
    width: 189px;
    height: 65px;
    background-image:var(--logo);
    background-size: contain;
}

/* Grafik für Buttons 24px x 24px  */
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
    background: var(--button-grafik) !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    width: 25px !important;
    height: 25px !important;
}

.ui-state-active .ui-icon-background {
    background: var(--button-grafik);
}

.ui-icon-background, .ui-button.ui-state-active:hover .ui-icon-background {
    background: var(--button-grafik);
}
.form-check-label .ui-checkboxradio-label .ui-corner-all .ui-button ui-widget .ui-checkboxradio-radio-label .ui-checkboxradio-checked .ui-state-active {
    background: var(--button-grafik);
}

/* Ergebnis anzeigen */
.push-the-button { 
    background: linear-gradient(-45deg, var(--primary), var(--white), var(--primary), var(--white), var(--primary), var(--white));
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}    

/*neuer checkbutton*/
#einverstanden[type='checkbox']:checked + label:before {
    background-color: var(--primary);
}
#einverstanden[type='checkbox'] + label {
    font-family:var(--font-family-sans-serif);
}
/*loader einstellung*/
.lds-ellipsis div {
    background: var(--gray);
}
#loader{
    background-color:var(--light);
    background-image: none;
}


.ui-icon, .ui-widget-content .ui-icon {
	background-image: none !important;
}
.ui-state-active .ui-icon, .ui-button:active .ui-icon {
	background-image: var(--button-grafik) !important;
}