@import url("/ui/css/normalized.css");
@import url("../ui/css/uikit.min.css");
@import url("../ui/css/materialdesignicons.min.css");

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

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

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

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

@font-face {
        font-family: 'Material Icons';
        font-style: normal;
        font-weight: 400;
        src: url("../ui/fonts/materialdesignicons-webfont.woff2") format('woff2'),
             url("../ui/fonts/materialdesignicons-webfont.woff") format('woff');
}
      


:root {
    --primary:          #5cbc40;
    --primary-light:    #67cf50;
    --primary-dark:     #4d9f30;
    --primary-hover:    #5cbc4088;

    --primary-hover:    #202020;

    --secondary-text:   #fcfbfb;
    --primary-text:     #202020;

    --secondary-back:   #202020;
    --primary-back:     #fcfbfb;

    --primary-SideMenu: #202020;


    --light-1:          #dcdcdc;
    --light-2:          #b0b0b0;
    --light-3:          #9d9d9d;
    --light-4:          #717171;

    --red:              #ee395b;
    --primaryBTN:       #5cbc40;
    /************************* Modal-Typen *************************/
    --warn:             #e17a0c;
    --error:            #ee395b;
    --success:          #5cbc40;
    --neutral:          #c0c0c0;
    /************************* Fonts *************************/
    --normal-font:      Source Sans Pro Regular, Helvetica Neue, Helvetica, Arial, sans-serif;
    --header-font:      Ruda Bold, Helvetica Neue,Helvetica, Arial, sans-serif;
    --light-font:       Source Sans Pro Light, Helvetica Neue, Helvetica, Arial, sans-serif;
    --mono-font:        SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /************************* Font-sizes *************************/
    --XL:               2.5em;
    --L:                1.5em;
    --M:                1.0em;
    --S:                0.9em;
    --XS:               0.5em;
}

.btn_input {
	display: flex;
}

body {
  margin: 20px;
  font-family: var(--normal-font);
  font-size: var(--S);
  color: var(--primary-text);
  cursor: default;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: var( --header-font );
  color: var(--primary);
}

h1 {
  margin-bottom: 20px;
}

ul.tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  

}

.stickyTab{
    /* Fixiert die Leiste oben im Fenster */
    position: sticky;
    top: 0;
    left: 0;
    background-color: white;
    z-index: 1000; 
}

ul.tab li {
  float: left;
}

ul.tab li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
  transition: 0.3s;
  background-color: #555;
  transition: all 0.3s linear;
}

ul.tab li a:hover {
  background-color: #777;
}

ul.tab li a.active {
  background-color: var(--primary);
  width: 10em;
  transition: all 0.3s linear;
}

.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
  height: 40em;
  overflow: auto;
}

.tab-content.active {
  display: block;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

th, td {
  padding: 10px;
  text-align: left;
}

#searchInput,#searchInput_value {
  margin-bottom: 20px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  /*position: sticky;
  top: 3em;
  left: 0;
  width: 100%;
  background-color: white;
  z-index: 1000;*/
}
.footer {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 1em;
  border: 1px solid;
}
.input_lang {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  white-space: pre-wrap;
  font-size: 1em;
}

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

.uk-button-primary:hover{
  background-color: var(--primary-text);
  color: var(--secondary-text);
}

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

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

.uk-card-primary.uk-card-body .uk-button-primary:hover, .uk-card-primary>:not([class*=uk-card-media]) .uk-button-primary:hover, .uk-card-secondary.uk-card-body .uk-button-primary:hover, .uk-card-secondary>:not([class*=uk-card-media]) .uk-button-primary:hover, .uk-light .uk-button-primary:hover, .uk-offcanvas-bar .uk-button-primary:hover, .uk-overlay-primary .uk-button-primary:hover, .uk-section-primary:not(.uk-preserve-color) .uk-button-primary:hover, .uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:hover, .uk-tile-primary:not(.uk-preserve-color) .uk-button-primary:hover, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary:hover {
  background-color: var(--primary-text);
  color: var(--secondary-text);
}

.uk-card-primary.uk-card-body .uk-button-primary, .uk-card-primary>:not([class*=uk-card-media]) .uk-button-primary, .uk-card-secondary.uk-card-body .uk-button-primary, .uk-card-secondary>:not([class*=uk-card-media]) .uk-button-primary, .uk-light .uk-button-primary, .uk-offcanvas-bar .uk-button-primary, .uk-overlay-primary .uk-button-primary, .uk-section-primary:not(.uk-preserve-color) .uk-button-primary, .uk-section-secondary:not(.uk-preserve-color) .uk-button-primary, .uk-tile-primary:not(.uk-preserve-color) .uk-button-primary, .uk-tile-secondary:not(.uk-preserve-color) .uk-button-primary {
  background-color: var(--primary);
  color: var(--secondary-text);
}

.uk-button{
  border-radius: 0.5em;
}

.uk-input{
  border-radius: 0.5em;
  font-family: var(--mono-font);
}

.login_input:after {
  content: "|";
  font-size: 25px;
  position: absolute;
  right: 2px;
  top: 18px;
}