@import '/css/charts.css';
:root {
  	--primary-color: #f59b1a;
	--secondary-color: #531CB3;
	--danger-color: #FF2A58;
	--success-color: #09BC8A;
	--font-color: #2a2a2a;
	--link-color: #000;
	--hover-color: #2a2a2a;
	--muted-color: #5A5353;
	--font: 'montserratregular';
	--headline: 'bebas_neueregular';
}

@font-face {
    font-family: 'montserratregular';
    src: url('/fonts/montserrat-regular-webfont.woff2') format('woff2'),
         url('/fonts/montserrat-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'bebas_neueregular';
    src: url('/fonts/bebasneue-regular-webfont.woff2') format('woff2'),
url('/fonts/bebasneue-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6 {
  	margin: 0 0 20px 0;
  	font-family: var(--headline)!important;
	font-style: italic;
}

html {
    font-family: var(--font) !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    color: var(--font-color) !important;
    width: 100%;
    height: 100%;
    background: #fff url("/Images/background-2-2.svg") center center no-repeat;
    background-attachment: fixed;
    background-size:cover;
}

body {
	
}
.km-primary {
	color:var(--primary-color)!important;
}
.km-danger {
	color:var(--secondary-color)!important;
}
.km-success {
	color:var(--success-color)!important;
}
.km-danger {
	color:var(--danger-color)!important;
}
.km-primary-hover:hover {
	color:var(--primary-color)!important;
}
.km-secondary-hover:hover {
	color:var(--secondary-color)!important;
}
.km-success-hover:hover {
	color:var(--success-color)!important;
}
.km-danger-hover:hover {
	color:var(--danger-color)!important;
}
.uk-button-primary {
  	background-color: var(--font-color)!important;
}
.uk-button-secondary {
  	background-color: var(--secondary-color)!important;
}
.uk-button-success {
  	background-color: var(--success-color);
	color:#fff;
	border: 1px solid transparent;
}
.uk-button-danger {
  	background-color: var(--danger-color)!important;
}

.uk-button {
	transition: all .3s cubic-bezier(.05, .03, .35, 1);
  	user-select: none;
  	-webkit-user-select: none;
  	touch-action: manipulation;
}
.uk-button:hover {
	opacity: .85;
}

.uk-card {border-radius:7.5px;}

.uk-card-default {
  color: var(--font-color)!important;
}

.uk-link {
	color:var(--muted-color)!important;
	transition: all .3s cubic-bezier(.05, .03, .35, 1);
  	user-select: none;
  	-webkit-user-select: none;
  	touch-action: manipulation;
}

.uk-link-muted {
	color:#999!important;
}

.uk-link:hover, a:hover {
	color:var(--primary-color)!important;
	text-decoration:none;
}

.uk-tab > .uk-active > a {
  	border-color: var(--primary-color)!important;
}

.uk-tab > * > a {
  	padding: 10px 25px!important;
	padding-right:40px!important;
}

.uk-checkbox:checked, .uk-checkbox:indeterminate, .uk-radio:checked {
  	background-color: var(--primary-color)!important;
}

.uk-checkbox:focus, .uk-radio:focus {
  	border-color: var(--primary-color)!important;
}

.km-icon-head a {
	color:var(--secondary-color)!important;
}

.uk-navbar-nav > li > a {
	color:var(--font-color)!important;
}

.uk-navbar-container:not(.uk-navbar-transparent) {
  	background-color: #fff!important;
  	color: #666;
  	box-shadow: 0 5px 15px rgba(0,0,0,.08);
}
.uk-divider-small::after {
 	width: 150px!important;
  	border-top: 2px solid var(--primary-color)!important;
}

.uk-card-primary.uk-card-body .uk-list-divider > :nth-child(n+2), .uk-card-primary > :not([class*="uk-card-media"]) .uk-list-divider > :nth-child(n+2) {
  	border-top-color: #e5e5e5!important;
}

.uk-badge {
  background: var(--secondary-color)!important;
}

.uk-table-hover tbody tr:hover, .uk-table-hover > tr:hover {
  background: #f5f5f5!important;
}

.uk-search-default .uk-search-input:focus, .uk-input:focus, .uk-select:focus, .uk-textarea:focus {
  border-color: var(--primary-color)!important;
}

.uk-offcanvas-bar, .uk-offcanvas-bar .uk-nav-default > li.uk-active > a {color:#fff!important;}
.uk-offcanvas-bar .uk-nav-default > li > a {color: rgba(255,255,255,.8)!important;}
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub a {color: rgba(255,255,255,.6)!important;}
.uk-offcanvas-bar .uk-badge {color:#fff!important;}

.charts-css.km-charts {
  	--color-1: rgba(244, 155, 30, 0.85);
	--color-2: rgba(87, 52, 139, 0.85);
  	--color-3: rgba(255, 42, 88, 0.85);
	--primary-axis-color: #e5e5e5;
	--primary-axis-style: solid;
  	--primary-axis-width: 1px;
  	--secondary-axes-color: #e5e5e5;
  	--secondary-axes-style: solid;
  	--secondary-axes-width: 1px;
  	--data-axes-color: #e5e5e5;
  	--data-axes-style: solid;
  	--data-axes-width: 1px;
}

#km-dashboard-chart {
  	height: 255px;
  	max-width: 100%;
  	margin: 0 auto;
}

.charts-css.km-charts.area:not(.reverse) tbody tr th {padding-top:20px;}



  .language-select {
        width: 130px;
        position: relative;
    }

    .language-select::after {
        content: "";
        --background-image: url(default-language-image.jpg); /* Standardbild für die Selectbox */
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: right center;
        display: block;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        pointer-events: none;
    }

    .language-select select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 100%;
        padding-right: 30px; /* Platz für das Sprachbild */
    }

    .language-select select::-ms-expand {
        display: none;
    }

    .language-select span {
        position: absolute;
        top: 0;
        right: 20px;
        bottom: 0;
        width: 30px; /* Platz für das Sprachbild */
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px;
        pointer-events: none;
    }


.uk-pagination > .active > * {
    color: #fff;
    background: var(--primary-color);
}

.uk-pagination > * > * {
    display: block;
    padding: 7.5px 15px;
    color: var(--font-color);
    transition: color .1s ease-in-out;
}


uk-section-xsmall {
    padding-top: 10px;
    padding-bottom: 10px;
}

.uk-search {
    background: #fff;
}
/*
#sortable-list .uk-active .toggle-edit {display:none;}
#sortable-list .uk-active .toggle-sort {display:flex;}
#sortable-list .toggle-edit {display:flex;}
#sortable-list .toggle-sort {display:none;}
#sortable-list .uk-active {border:3px solid var(--primary-color);padding:2px;border-radius:2px;}

#sortable-list.uk-list.uk-grid > * {
	padding: 0;
}

@media (max-width:1199px) {
 #sortable-list.uk-list.uk-grid > * {
	margin: 10px;
}
}
@media (min-width:1200px) {
 #sortable-list.uk-list.uk-grid > * {
	margin: 10px 0;
}
	#sortable-list.uk-list.uk-grid li:first-child {
	margin-top: 0;
}
}

.uk-subnav-pill > .uk-active > a {
  background-color: var(--primary-color);
}
.uk-subnav-pill > .uk-active > a:hover {
  background-color: var(--primary-color);
  font-color:#fff;
  pointer-events: none;
}

.uk-overlay {
    padding: 10px 10px;
}

.sort-arrows {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #f59b1a;
    color: #fff;
    border-radius: 5px 0 0 0;
    padding: 2px;
}

    .sort-arrows a:hover, .sort-arrows a:focus {
        color: #fff !important;
    }*/

/* Neues css für Antworten */

#sortable-list .uk-active .toggle-edit, #sortable-list-offcanvas .uk-active .toggle-edit {
    display: none;
}

#sortable-list .uk-active .toggle-sort, #sortable-list-offcanvas .uk-active .toggle-sort {
    display: flex;
}

#sortable-list .toggle-edit, #sortable-list-offcanvas .toggle-edit {
    display: flex;
}

#sortable-list .toggle-sort, #sortable-list-offcanvas .toggle-sort {
    display: none;
}

#sortable-list .uk-active, #sortable-list-offcanvas .uk-active {
    border: 3px solid var(--primary-color);
    padding: 2px;
    border-radius: 2px;
}

#sortable-list.uk-list.uk-grid > * {
    padding: 0;
}

@media (max-width:1199px) {
    #sortable-list.uk-list.uk-grid > * {
        margin: 10px;
    }
}

@media (min-width:1200px) {
    #sortable-list.uk-list.uk-grid > * {
        margin: 10px 0;
    }

    #sortable-list.uk-list.uk-grid li:first-child {
        margin-top: 0;
    }
}

.uk-subnav-pill > .uk-active > a {
    background-color: var(--primary-color);
}

/*    .uk-subnav-pill > .uk-active > a:hover {
        background-color: var(--primary-color);
        font-color: #fff;
        pointer-events: none;
    }
*/

    .uk-subnav-pill > .uk-active > a:hover {
        background-color: var(--primary-color);
        color: #fff !important;
        pointer-events: none;
    }

.uk-overlay {
    padding: 10px 10px;
}

.sort-arrows {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #f59b1a;
    color: #fff;
    border-radius: 5px 0 0 0;
    padding: 2px;
}

    .sort-arrows a:hover, .sort-arrows a:focus {
        color: #fff !important;
    }

.sort-number {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #f59b1a;
    color: #fff;
    border-radius: 0 5px 0 0;
    padding: 2px;
}

.sort-number a:hover, .sort-arrows a:focus {
        color: #fff !important;
}


.richtig {
    border: 3px solid var(--success-color);
}

.falsch {
    border: 3px solid var(--danger-color);
}

.uk-card.antwort .uk-overlay {
    display: none;
    transition: .3s ease-out;
}

.uk-card.antwort:hover .uk-overlay, .uk-card.antwort:focus .uk-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s ease-out;
}

.uk-card-body.antwort {
    padding: 30px 30px;
}

.uk-offcanvas-bar .uk-button-primary {
    border: 2px solid #666;
    color: #fff;
}

.uk-card.richtig.uk-active {
    /*background: var(--success-color);*/
    background: rgba(9,188,138,.3);
    color: #000 !important;
    /*box-shadow: 0 5px 15px rgba(9,188,138,.3);*/
}

    .uk-card.richtig.uk-active:hover {
        background: var(--success-color);
        color: var(--link-color) !important;
    }

/*    .uk-card.richtig.uk-active .sort-arrows {
        background: var(--success-color);
    }
*/

.uk-card.richtig .sort-arrows {
    background: var(--success-color);
}


.uk-card.falsch.uk-active {
    /*background: var(--danger-color);*/
    background: rgba(255,42,88,.3);
    color: #000 !important;
    /*box-shadow: 0 5px 15px rgba(255,42,88,.3);*/
}

    .uk-card.falsch.uk-active:hover {
        background: var(--danger-color);
        color: var(--link-color) !important;
    }

    /*.uk-card.falsch.uk-active .sort-arrows {
        background: var(--danger-color);
    }
*/

.uk-card.falsch .sort-arrows {
    background: var(--danger-color);
}

.uk-button {
    padding: 0 15px;
}

@media (max-width:1199px) {
    .aufgaben .uk-grid-margin {
        margin-top: 0;
    }

    .aufgaben li {
        margin-left: 0px !important;
        margin-bottom: 0px !important;
    }
}

.uk-progress {
    border-radius: 0px;
    height: 10px;
}

.uk-progress::-moz-progress-bar {
    ---background-color: var(--primary-color);
}

.uk-list > * > ul, .uk-list > :nth-child(n+2) {
    margin-top: 0px;
}

.uk-overlay-primary {
    background: rgba(83,28,179,.97);
}

.uk-card-primary {
    background: var(--secondary-color);
}

.uk-text-primary {
    color: var(--primary-color) !important;
}

.ui-datepicker {
    width: 336px;
    height: auto;
    margin: -20px auto 0;
    background: #fff !important;
    color: var(--font-color) !important;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
    border-radius: 10px;
}

    .ui-datepicker a {
        text-decoration: none;
        color: var(--font-color);
    }

    .ui-datepicker table {
        width: 100%;
        padding: 0 20px 20px;
    }

.ui-datepicker-header, .ui-datepicker-month, .ui-datepicker-year {
    line-height: 25px;
    font-size: 15px;
    background: #fff;
    border: none;
}

.ui-datepicker-title {
    text-align: center;
    margin-top: 15px;
}

.ui-datepicker-prev, .ui-datepicker-next {
    display: inline;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    line-height: 600%;
    overflow: hidden;
    background-repeat: no-repeat;
}

.ui-datepicker-prev {
    float: left;
    background-position: center 0px;
    margin-left: 20px;
    background-image: url("/Images/arrow-left.svg") !important;
}

.ui-datepicker-next {
    float: right;
    background-position: center 0px;
    margin-right: 20px;
    background-image: url("/Images/arrow-right.svg") !important;
}

.ui-datepicker th {
    text-transform: uppercase;
    font-size: 12px;
    padding: 5px 0;
    color: var(--muted-color);
}

.ui-datepicker tbody td {
    padding: 10px;
}

    .ui-datepicker tbody td:last-child {
        border-right: 0px;
    }

.ui-datepicker tbody tr:last-child {
    border-bottom: 0px;
}

.ui-datepicker-unselectable .ui-state-default {
    color: #999;
}

.ui-datepicker-today {
    background: var(--secondary-color);
    padding: 20px;
    border-radius: 5px;
    font-weight: bold;
}

.ui-datepicker td span, .ui-datepicker td a {
    display: inline-block;
    text-align: center;
    width: 20px;
    height: 20px;
    line-height: 20px;
}

.ui-datepicker-today a {
    color: var(--primary-color) !important;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: none !important;
    background: transparent !important;
}

.ui-icon-circle-triangle-e {
    background-position: -48px -192px;
    display: none !important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
    border: none;
    background: none;
    font-weight: bold;
    color: transparent;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: 1px 0;
    text-align: center;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    display: none;
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: .4em 0;
    text-align: center;
}

.ui-state-default {
    font-weight: 400;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 30%;
}

.ui-widget {
    padding: 5px 15px;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: none !important;
    background: none !important;
}

.sub-title {
    font-family: var(--font) !important;
    font-size: 18px;
}