@font-face {                                                                     /*Setzt die Schrift Art */
   font-family: 'Aileronspxibold';
   src: url('./fonts/Aileron-SpxiBold.otf');
}

@font-face {
   font-family: 'Aileronthin';
   src: url('./fonts/Aileron-Thin.otf');
}

                                                                                 /* PC Style */
@media only screen and (min-device-width: 450px) {                               /* Alles in den Klammern wird von Mobilen Geräten übergangen*/

   h3 {                                                                         /*Style für Überschrift*/
      color: #1970BD;
      font-family: 'Aileronthin';
      font-size: 38px;
   }

   h4 {
      color: #f28e00;
      font-family: 'Aileronthin';
   }

   P {                                                                          /*Normale Schrift Style*/
      color: #666666;
      font-family: 'Aileronthin';
      font-size: 24px;
   }

   td {
    border-bottom: 1px solid gray;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 10px;
   }

   select{                                                                      /*Select style*/
      color: #000000;                                                           /*Schriftfarbe*/
      background-color: #F2F2F2;                                                /*Hintergrundfarbe*/
      font-family: 'Aileronthin';                                               /*Schriftart*/
      border: 1px solid #666666;                                                /*Rand Breite, Style und Farbe*/
      border-radius: 4px;                                                       /*Rand Rundung*/
      font-size: 24px;                                                          /*Schriftgröße*/
      width: 100%;                                                              /*Breite*/
      -webkit-appearance: none;                                                 /*Deaktiviert die Standart anzeige*/
      appearance: none;
   }

   input[type=text] {                                                           /*Textfelder*/
      color: #000000;
      background-color: #F2F2F2;
      font-family: 'Aileronthin';
      /*border: 1px solid #666666;*/
      border-radius: 4px;
      font-size: 24px;
      width: 100%;
   }

    input[type=search] {                                                        /*Suchfeld*/
      color: #000000;
      background-color: #F2F2F2;
      font-family: 'Aileronthin';
      border: 1px solid #666666;
      border-radius: 4px;
      font-size: 24px;
      width: 100%;
      -moz-appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
   }

   input[type=password] {                                                       /*Passwortfeld*/
      color: #000000;
      background-color: #F2F2F2;
      /*border: 1px solid #666666;*/
	  font-family: 'Aileronthin';
      border-radius: 4px;
      font-size: 24px;
      width: 100%;
   }

   input[type=date] {                                                           /*Datumsfelder*/
      color: #000000;
      background-color: #F2F2F2;
      border: 1px solid #666666;
      font-family: 'Aileronthin';
      border-radius: 4px;
      font-size: 24px;
      width: 100%;
   }

   input[type=time] {                                                           /*Zeiteingabe Feld*/
      color: #000000;
      background-color: #F2F2F2;
      border: 1px solid #666666;
      font-family: 'Aileronthin';
      border-radius: 4px;
      font-size: 24px;
      width: 100%;
      display: block;
   }

   input[type="button"], .addCreateButton{                                      /*Korrektur Anzeige plus zeichen*/
      height: 64px;
      width: 64px;
      margin-top: 5%;
      border: none;
      background: url('./png/plus_smallNEW.png');
      background-repeat: no-repeat;
      padding-top: 5%;
   }

   input::-webkit-calendar-picker-indicator {
      display: none;
   }

   label{                                                                       /*Labels*/
      color: #666666;
      font-family: 'Aileronthin';
      font-size: xx-large;
   }

   input[type=submit] {                                                         /*Absendende Buttons*/
      width: 100%;
      height: 110px;
      background-color: #1970BD;
      font-family: 'Aileronthin';
      font-size: xx-large;
      color: #ffffff;
      border: 2px solid #1970BD;
      cursor: pointer;                                                          /*Maus als Zeiger/Finger*/
      border-radius: 5px;
   }

   input[type=submit]:hover {                                                   /*Anzeige wenn Maus über dem Button*/
      background-color: #7DD0F3;
      color: #666666;
      border: 2px solid #1970BD;
   }

   .switch {                                                                    /*Label für Checkboxen*/
      position: relative;
      display: inline-block;
      width: 50px;
      height: 28px;
   }

   .switch input {                                                              /*Deaktivert Standart Anzeige*/
      display:none;
   }

   .slider {                                                                    /*Checkbox aussehen als slide*/
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     transition: .4s;
   }

   .slider:before {                                                             /*Aussehen bevor betätigt*/
     position: absolute;
     content: "";
     height: 20px;
     width: 20px;
     left: 4px;
     bottom: 4px;
     background-color: white;
     -webkit-transition: .4s;
     transition: .4s;
   }

   input:checked + .slider {
     background-color: #1970BD;
   }

   input:focus + .slider {
     box-shadow: 0 0 1px #1970BD;
   }

   input:checked + .slider:before {                                             /*Bewegung des Sliders*/
     -webkit-transform: translateX(22px);
     -ms-transform: translateX(22px);
     transform: translateX(22px);
   }

   .lbl {
      color: #666666;
      font-family: 'Aileronthin';
      font-size: xx-large;
   }

   .datalist-polyfill {                                                         /*PolyFill Syle nur für Safari*/
	  list-style: none;
	  display: none;
	  background: #F2F2F2;
	  box-shadow: 0 2px 2px #666666;
     color: #666666;
	  position: absolute;
	  left: 0;
	  top: 0;
	  margin: 0;
	  padding: 0;
	  max-height: 300px;
	  overflow-y: auto;
   }

   .datalist-polyfill:empty {
	  display: none !important;
   }

   .datalist-polyfill > li {
       padding: 3px;
       font: 24px "Aileronthin";
       background: #F2F2F2;
       color: #666666;
       border: 1px solid #666666;
       border-radius: 3px;
   }

   .datalist-polyfill__active {
      background: #1970BD;
      color: black;
   }

	.wrong {                                                                     /*Umrandung bei Falscher Eingabe (z.B. Passwort)*/
      border: 1px solid #cc0000;
   }

   .must {                                                                      /*Umrandung für Pflichtfelder*/
      border: 1px solid #1970BD;
   }

   .right {                                                                     /*Standart Umtrandung*/
      border: 1px solid #666666;
   }

   .textin {
      border: 1px solid #666666;
   }

   .ueberschrift {
      color: #1970BD;
      font-family: 'Aileronthin';
      font-size: 38px;
   }

   .image-upload > input                                                        /*Standart Aussehen deaktiviert*/
   {
      display: none;
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
   }

   .normal {                                                                    /*für nicht absendende Buttons*/
      width: 100%;
      height: 110px;
      background-color: #1970BD;
      font-family: 'Aileronthin';
      font-size: xx-large;
      color: #ffffff;
      border: 2px solid #1970BD;
      cursor: pointer;
      border-radius: 5px;
   }

   .normal:hover  {
      background-color: #7DD0F3;
      color: #666666;
      border: 2px solid #1970BD;
   }

   .come {                                                                       /*Zeiterfassung Kommt Button*/
      width: 100%;
      height: 110px;
      background-color: limegreen;
      font-family: 'Aileronthin';
      font-size: xx-large;
      color: #ffffff;
      border: 2px solid limegreen;
      cursor: pointer;
      border-radius: 5px;
   }

   .come:hover  {
      background-color: lime;
      color: #666666;
      border: 2px solid limegreen;
   }

   .go {                                                                         /*Zeiterfassung Geht Button*/
      width: 100%;
      height: 110px;
      background-color: tomato;
      font-family: 'Aileronthin';
      font-size: xx-large;
      color: #ffffff;
      border: 2px solid tomato;
      cursor: pointer;
      border-radius: 5px;
   }

   .go:hover  {
      background-color: salmon;
      color: #666666;
      border: 2px solid tomato;
   }

   .zurueck {                                                                   /*Für die zurück Buttons*/
      width: 100%;
      height: 110px;
      background-color: #f28e00;
      font-family: 'Aileronthin';
      font-size: xx-large;
      color: #ffffff;
      border: 2px solid #f28e00;
      cursor: pointer;
      border-radius: 5px;
   }

     .zurueck:hover  {
      background-color: #ffe6cc;
      color: #666666;
      border: 2px solid #f28e00;
   }

   .suche {
      width: 100%;
      height: 110px;
      background-color: #1970BD;
      font-family: 'Aileronthin';
      font-size: xx-large;
      color: #ffffff;
      border: 2px solid #1970BD;
      cursor: pointer;
      border-radius: 5px;
   }

   .suche:hover  {
      background-color: #7DD0F3;
      color: #666666;
      border: 2px solid #1970BD;
   }

   .save {
      width: 100%;
      height: 110px;
      background-color: #1970BD;
      font-family: 'Aileronthin';
      font-size: xx-large;
      color: #ffffff;
      border: 2px solid #1970BD;
      cursor: pointer;
      border-radius: 5px;
   }

   .save:hover  {
      background-color: #7DD0F3;
      color: #666666;
      border: 2px solid #1970BD;
   }

   .dropdown {                                                                  /*Div Style für Planung, Fakturierung, Medien*/
      width: 100%;
      background-color: #1970BD;
      font-family: 'Aileronthin';
      font-size: xx-large;
      color: #ffffff;
      border: 2px solid #1970BD;
      cursor: pointer;
      border-radius: 5px;
   }

   .suchergebniss {                                                             /*Button der Suchergebnisse*/
      width: 100%;
      background-color: #F2F2F2;
      font-family: 'Aileronthin';
      font-size: xx-large;
      color: #666666;
      border: 2px solid #666666;
      cursor: pointer;
      border-radius: 5px;
   }

   .id_div {                                                                    /*Für ID in der Suchenseite innerhalb der Buttons*/
      font-weight: bold;
   }

   .name_div {                                                                  /*Für Namen in der Suchenseite innerhalb der Buttons*/
      font-size: xx-large;
   }

   .data_div {                                                                  /*Div für Ergebnisbutton Text style*/
      font-size: large;
      padding-top: 10px;
   }
   .status_div {                                                                  /*Div für Ergebnisbutton Text style*/
      font-size: large;
      padding-bottom: 10px;
   }

   .wrapper {                                                                   /*Alles Umschließendes Div*/
      width: 300px;
      margin-left: auto;
   	margin-right: auto;
      color: #666666;
      font-family: 'Aileronthin';
      font-size: 24px;
   }

   .ueberschrift {                                                              /*Überschrift zentrieren*/
      margin-left: auto;
   	margin-right: auto;
      text-align:center;
   }

   .divcenter {                                                                 /*Schrift zentriert*/
      margin-left: auto;
   	margin-right: auto;
      text-align:center;
   }

   .map {                                                                       /*GPS Karte border*/
      border: 1px solid #666666;
      border-radius: 5px;
      padding-bottom: 10px;
      margin-left: auto;
   	margin-right: auto;
   }

   .picwrapp {                                                                  /*Bilder um Randung auf der Add Seite*/
      width: 46%;
      max-height: 450px;
      min-height;  134px;
      overflow: hidden;                                                         /*Verhindert übergrße des Div*/
      display: inline-block;
      margin: 2%;
   }

   .button_in {                                                                 /*Abstandsdiv für Symbolic und Text in Button*/
      padding-right: 32px;
   }

   .pflicht {                                                                    /*Pflicht Felder style border bei Textarea Feld */
      border: 3px solid #1970BD;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      color: #000000;
      background-color: #F2F2F2;
      font-family: 'Aileronthin';
      border-radius: 4px;
      font-size: 24px;
      width: 100%;
   }

   .wrongarea {                                                                    /*Pflicht Felder style border bei Textarea Feld*/
      border: 3px solid #cc0000;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      color: #000000;
      background-color: #F2F2F2;
      font-family: 'Aileronthin';
      border-radius: 4px;
      font-size: 24px;
      width: 100%;
   }

   .addtextarea{                                                                /*Standart für Textarea Feld*/
      color: #000000;
      background-color: #F2F2F2;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      font-family: 'Aileronthin';
      border: 1px solid #666666;
      border-radius: 4px;
      font-size: 24px;
      width: 100%;
      word-wrap: break-word;
   }

   .result {                                                                    /*Div für Anzeige auf der Result Seite. Imitiert Textfield */
      color: #707070;
      min-height: 30px;
      background-color: #F2F2F2;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      font-family: 'Aileronthin';
      border: 1px solid #666666;
      border-radius: 4px;
      font-size: 24px;
      width: 100%;
      padding: 0px;
      margin: 0px;
      word-wrap: break-word;
   }

   .result_big {                                                                /*Div für Anzeige auf der Result Seite. Imitiert Textarea */
      color: #707070;
      min-height: 30px;
      background-color: #F2F2F2;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      font-family: 'Aileronthin';
      border: 1px solid #666666;
      border-radius: 4px;
      font-size: 24px;
      width: 100%;
      padding: 0px;
      margin: 0px;
      word-wrap: break-word;
      //word-break: break-all;
   }

   .datum {                                                                      /*Umrandung für Datums Feld*/
      border: 1px solid #666666
   }

   .imgupload input {                                                           /*Deaktivert Standart aussehen für File Upload*/
      display: none;
   }

   .paraDate{
      border-radius: 4px;
      font-size: 30px;
      padding: 2%;
   }

   .datekorrekt{
      color: white;
      padding: 2%;
      font-size: 30px;
      background-color: #1970BD;
      border-radius: 4px;
   }

   .tablehead {
      font-family: 'Aileronthin';
      font-size: 24px;
      font-weight: normal;
      padding-bottom: 10px;
      color: black;
   }
                                                                                 /*Div Style für Symbolic */
   .savedataicon {
      background: url('./png/save_data_white_small.png') no-repeat center;
      width: 32px;
      height: 32px;
      float: left;
      padding-top: 2%;
   }

   .searchicon {
      background: url('./png/search_white_small.png') no-repeat center;
      width: 32px;
      height: 32px;
      float: left;
      padding-top: 2%;
   }

   .backicon {
      background: url('./png/back_white_small.png') no-repeat center;
      width: 32px;
      height: 32px;
      float: left;
      padding-top: 2%;
   }

   .saveicon {
      background: url('./png/save_white_small.png') no-repeat center;
      width: 32px;
      height: 32px;
      float: left;
      padding-top: 2%;
   }

    .listicon {
      background: url('./png/list_small.png') no-repeat center;
      width: 32px;
      height: 32px;
      float: left;
      padding-top: 2%;
   }

   .timeicon {
      background: url('./png/time_small.png') no-repeat center;
      width: 32px;
      height: 32px;
      float: left;
      padding-top: 2%;
   }

   .comeicon {
      background: url('./png/come_small.png') no-repeat center;
      width: 32px;
      height: 32px;
      float: left;
      padding-top: 2%;
   }

   .goicon {
      background: url('./png/go_small.png') no-repeat center;
      width: 32px;
      height: 32px;
      float: left;
      padding-top: 2%;
   }

   .correcticon {
      background: url('./png/eraser_small.png') no-repeat center;
      width: 32px;
      height: 32px;
      float: left;
      padding-top: 2%;
   }

   .eraser {
      background: url('./png/eraser_orange_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      margin-left: auto;
   	margin-right: auto;
   }

   .eingeklappt{
      background: url('./png/plus_small.png') no-repeat center;
      width: 32px;
      height: 32px;
      float: left;
      padding-top: 2%;
   }

   .ausgeklappt{
      background: url('./png/minus_small.png') no-repeat center;
      width: 32px;
      height: 32px;
      float: left;
      padding-top: 2%;
   }

   .saved {
      background: url('./png/saved_blue.png') no-repeat center;
      width: 128px;
      height: 128px;
      margin-left: auto;
   	margin-right: auto;
   }

   .logout {
      background: url('./png/logout_small.png') no-repeat center;
      width: 32px;
      height: 32px;
      float: left;
      padding-top: 2%;
   }

   .scroll_down {
      background: url('./png/down_scroll_small.png') no-repeat center;
      width: 32px;
      height: 32px;
      margin-left: auto;
   	margin-right: auto;
      cursor: pointer;
   }

   .scroll_up {
      background: url('./png/up_scroll_small.png') no-repeat center;
      width: 32px;
      height: 32px;
      margin-left: auto;
   	margin-right: auto;
      cursor: pointer;
   }

   .view {
      background: url('./png/view_small.png') no-repeat center;
      background-color: #F2F2F2;
      border: 1px solid #666666;
      width: 50%;
      height: 70px;
      border-radius:  4px;
      float: left;
      padding-top: 5%;
      margin-left: auto;
   	margin-right: auto;
      cursor: pointer;
   }

   .view_active {
      background: url('./png/view_white_small.png') no-repeat center;
      background-color: #1970BD;
      border: 1px solid #1970BD;
      width: 50%;
      height: 70px;
      border-radius:  4px;
      float: left;
      padding-top: 5%;
      margin-left: auto;
   	margin-right: auto;
      cursor: pointer;
   }

   .delete {
      background: url('./png/rubbish_small.png') no-repeat center;
      width: 50%;
      height: 70px;
      padding-top: 5%;
      background-color: #F2F2F2;
      border: 1px solid #666666;
      border-radius:  4px;
      float: left;
      padding-top: 5%;
      margin-left: auto;
   	margin-right: auto;
      cursor: pointer;
   }

   .delete_active {
      background: url('./png/rubbish_white_small.png') no-repeat center;
      width: 50%;
      height: 70px;
      padding-top: 5%;
      background-color: #1970BD;
      border: 1px solid #1970BD;
      border-radius:  4px;
      float: left;
      padding-top: 5%;
      margin-left: auto;
   	margin-right: auto;
      cursor: pointer;
   }

   .notfound {
      background: url('./png/no-picture_middle.png') no-repeat center;
      width: 128px;
      height: 128px;
      margin-left: auto;
   	margin-right: auto;
   }

   .selecting {
      width: 85%;
      float: left;
      padding-bottom: 20px;
   }

   .texting {
      width: 85%;
      float: left;
      padding-bottom: 20px;
   }

   .zoom_in {
      background: url('./png/zoom_grey_small.png') no-repeat center;
      width: 32px;
      height: 32px;
      float: right;
      margin-top: 14%;
      cursor: pointer;
   }

   .zoom_out {
      background: url('./png/zoom_blue_small.png') no-repeat center;
      width: 32px;
      height: 32px;
      float: right;
      margin-top: 14%;
      cursor: pointer;
   }

   .loader {                                                                    /* Loader Grafik beim Absenden der Add Seite*/
      border: 16px solid #F2F2F2;
      border-top: 16px solid #1970BD;
      border-bottom: 16px solid #1970BD;
      border-radius: 50%;
      margin-left: auto;
   	margin-right: auto;
      width: 120px;
      height: 120px;
      animation: spin 2s infinite;
  }

  @keyframes spin {                                                             /*Bewegung der Loader Grafik*/
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
  }

   #done {                                                                      /*Erledigt Silder Beschriftung*/
      color: #666666;
      font-family: 'Aileronthin';
      font-size: 24px;
      float: right;
   }

   #gps {                                                                       /*GPS Silder Beschriftung*/
      color: #666666;
      font-family: 'Aileronthin';
      font-size: 24px;
      float: left;
	  padding-bottom: 15px;
   }

	#gps2 {                                                                       /*GPS Silder Beschriftung*/
      color: #666666;
      font-family: 'Aileronthin';
      font-size: 24px;
      float: left;
   }

   #imgup{                                                                      /*Media Symbolic*/
      background: url('./png/add_blue_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      margin-left: auto;
   	margin-right: auto;
      cursor: pointer;
   }
                                                                                 /*Schriftart einstellen für alle Browser*/
   ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
       color:    #000000;
       font-family: 'Aileronthin';
       text-align: center;
       font-style: oblique;
   }

   :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color:    #000000;
      opacity:  1;
      font-family: 'Aileronthin';
      text-align: center;
      font-style: oblique;
   }

   ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color:    #000000;
      opacity:  1;
      font-family: 'Aileronthin';
      text-align: center;
      font-style: oblique;
   }

   :-ms-input-placeholder { /* Internet Explorer 10-11 */
      color:    #000000;
      font-family: 'Aileronthin';
      text-align: center;
      font-style: oblique;
   }

   ::-ms-input-placeholder { /* Microsoft Edge */
      color:    #000000;
      font-family: 'Aileronthin';
      text-align: center;
      font-style: oblique;
   }

   ::placeholder { /* Most modern browsers support this now. */
      color:    #000000;
      font-family: 'Aileronthin';
      text-align: center;
      font-style: oblique;
   }
}
                                                                                 /* Mobil Style */
@media only screen and (max-device-width: 450px) {                              /* PC Überliest alles in den Klammern*/

   h3 {
      color: #1970BD;
      font-family: 'Aileronthin';
      font-weight:normal;
      font-size: 120px;
   }

   h4 {
      color: #f28e00;
      font-family: 'Aileronthin';
   }

   P {
      color: #666666;
      font-family: 'Aileronthin';
      font-size: 54px;
   }

   label{
      color: #666666;
      font-family: 'Aileronthin';
      font-size: 66px;
   }

   td {
      border-bottom: 1px solid #666666;
      text-align: center;
      padding-top: 2%;
      padding-bottom: 2%;
   }

   select{
      -webkit-appearance: none;                                                  /*Blendet Standart Style aus*/
      appearance: none;
      -moz-appearance: none;
      color: #000000;
      background-color: #F2F2F2;
      font-family: 'Aileronthin';
      border: 1px solid #666666;
      border-radius: 15px;
      font-size: 54px;
      width: 100%;
      height: 10%;
      padding: 0px;
      min-height: 100px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
   }

   input[type=text] {
      -webkit-appearance: none;                                                  /*Blendet Standart Style aus*/
      appearance: none;
      -moz-appearance: none;
      color: #000000;
      background-color: #F2F2F2;
      font-family: 'Aileronthin';
      //border: 1px solid #666666;
      border-radius: 15px;
      font-size: 54px;
      width: 100%;
      padding: 0px;
      min-height: 100px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
   }

   input[type=search] {
      -webkit-appearance: none;                                                  /*Blendet Standart Style aus*/
      appearance: none;
      -moz-appearance: none;
      color: #000000;
      background-color: #F2F2F2;
      font-family: 'Aileronthin';
      border: 1px solid #666666;
      border-radius: 15px;
      font-size: 54px;
      width: 100%;
      padding: 0px;
      min-height: 100px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
   }

   input[type=password] {
      -webkit-appearance: none;                                                  /*Blendet Standart Style aus*/
      appearance: none;
      -moz-appearance: none;
      color: #000000;
      background-color: #F2F2F2;
      font-family: 'Aileronthin';
      //border: 1px solid #666666;
      border-radius: 15px;
      font-size: 54px;
      width: 100%;
      padding: 0px;
      min-height: 100px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
   }

   input[type=date]{
      -webkit-appearance: none;                                                  /*Blendet Standart Style aus*/
      appearance: none;
      -moz-appearance: none;
      color: #000000;
      background-color: #F2F2F2;
      border: 1px solid #666666;
      font-family: 'Aileronthin';
      border-radius: 15px;
      font-size: 54px;
      width: 100%;
      min-height: 100px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
   }

   input[type=time]{
      -webkit-appearance: none;                                                  /*Blendet Standart Style aus*/
      appearance: none;
      -moz-appearance: none;
      display: block;
      color: #666666;
      background-color: #F2F2F2;
      border: 1px solid #666666;
      font-family: 'Aileronthin';
      border-radius: 15px;
      font-size: 70px;
      text-align: center;
      width: 100%;
      /*width: 42.3%;*/
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
   }

   input[type="button"], .addCreateButton{                                      /*Korrektur Anzeige plus zeichen*/
      height: 128px;
      width: 128px;
      margin-top: 5%;
      border: none;
      background: url('./png/plus_middleNEW.png');
      background-repeat: no-repeat;
      padding-top: 5%;
   }

   input[type=file]{                                                            /*Blendet Standart Style aus*/
      display: none;
      -webkit-appearance: none;
      appearance: none;
      -moz-appearance: none;
      opacity 0;
      padding: 0px;
   }

   input::-webkit-calendar-picker-indicator {                                   /*Blendet Standart Style aus*/
      display: none;
   }

   input[type=submit] {
      -webkit-appearance: none;                                                 /*Blendet Standart Style aus*/
      appearance: none;
      -moz-appearance: none;
      width: 100%;
      height: 150px;
      background-color: #1970BD;
      font-family: 'Aileronthin';
      font-size: 70px;
      color: #ffffff;
      border: 2px solid #1970BD;
      cursor: pointer;
      border-radius: 15px;
   }

   input[type=submit]:hover  {
      background-color: #7DD0F3;
      color: #666666;
      border: 2px solid #1970BD;
   }

   .datalist-polyfill {                                                         /*Datalist für IOS Style*/
	   list-style: none;
	   display: none;
	   background: #F2F2F2;
	   box-shadow: 0 2px 2px #666666;
      color: #666666;
	   position: absolute;
	   left: 0;
	   top: 0;
	   margin: 0;
	   padding: 0;
	   max-height: 300px;
	   overflow-y: auto;
   }

   .datalist-polyfill:empty {
	   display: none !important;
   }

   .datalist-polyfill > li {
       padding: 15px;
       font: 64px "Aileronthin";
       background: #F2F2F2;
       color: #666666;
       border: 1px solid #666666;
       border-radius: 5px;
   }

   .datalist-polyfill__active {
      background: #1970BD;
      color: black;
   }

   .wrong {                                                                     /*Umrandung bei Falscheingabe*/
      border: 1px solid #cc0000;
   }

   .right {                                                                     /*Umrandung wenn Eingabe richtig*/
      border: 1px solid #666666;
   }

   .textin {                                                                    /*Standart Umrandung*/
      border: 1px solid #666666;
   }

   .switch {                                                                    /*Style für Slider */
      position: relative;
      display: inline-block;
      width: 150px;
      height: 68px;
      vertical-align: middle;
   }
   .switch2 {                                                                    /*Style für Slider */
      position: absolute;
      display: inline-block;
      width: 150px;
      height: 68px;
      vertical-align: middle;
   }

   .switch input {
      display:none;
   }

   .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
   }

   .slider:before {
     position: absolute;
     content: "";
     height: 60px;
     width: 60px;
     left: 4px;
     bottom: 4px;
     background-color: white;
     -webkit-transition: .4s;
     transition: .4s;
   }

   input:checked + .slider {
     background-color: #1970BD;
   }

   input:focus + .slider {
     box-shadow: 0 0 1px #1970BD;
   }

   input:checked + .slider:before {
     -webkit-transform: translateX(82px);
     -ms-transform: translateX(82px);
     transform: translateX(82px);
   }

   .lbl {
      color: #666666;
      font-family: 'Aileronthin';
      font-size: 66px;
   }

   .ueberschrift {                                                              /*Style für Überschriften*/
      padding-top:30px;
      color: #1970BD;
      font-family: 'Aileronthin';
      font-size: 140px;
      font-weight: normal;
   }

   .paraDate{                                                                   /*Datum auf Korrektur Übersicht*/
      border-radius: 15px;
      padding: 2%;
      font-size: 78px;
   }

   .datekorrekt{                                                                /*Datum für Korrektur*/
      border-radius: 15px;
      color: white;
      padding: 2%;
      font-size: 78px;
      background-color: #1970BD;
   }

   .tablehead {                                                                 /* Kommt geht auf Korrektur */
      font-family: 'Aileronthin';
      font-size: 70px;
      font-weight: normal;
      padding-bottom: 20px;
      color: black;
   }

   .normal {                                                                    /*Nicht sendende Buttons*/
      width: 100%;
      height: 150px;
      background-color: #1970BD;
      font-family: 'Aileronthin';
      font-size: 70px;
      color: #ffffff;
      border: 2px solid #1970BD;
      cursor: pointer;
      border-radius: 15px;
   }

   .normal:hover  {
      background-color: #7DD0F3;
      color: #666666;
      border: 2px solid #1970BD;
   }

   .come {                                                                    /*Nicht sendende Buttons*/
      width: 100%;
      height: 150px;
      background-color: limegreen;
      font-family: 'Aileronthin';
      font-size: 70px;
      color: #ffffff;
      border: 2px solid limegreen;
      cursor: pointer;
      border-radius: 15px;
   }

   .come:hover  {
      background-color: lime;
      color: #666666;
      border: 2px solid limegreen;
   }

   .go {                                                                    /*Nicht sendende Buttons*/
      width: 100%;
      height: 150px;
      background-color: tomato;
      font-family: 'Aileronthin';
      font-size: 70px;
      color: #ffffff;
      border: 2px solid tomato;
      cursor: pointer;
      border-radius: 15px;
   }

   .go:hover  {
      background-color: salmon;
      color: #666666;
      border: 2px solid tomato;
   }

   .zurueck {                                                                   /*Zurück Buttons*/
      width: 100%;
      height: 150px;
      background-color: #f28e00;
      font-family: 'Aileronthin';
      font-size: 70px;
      color: #ffffff;
      border: 2px solid #f28e00;
      cursor: pointer;
      border-radius: 15px;
   }

   .zurueck:hover  {
      background-color: #ffe6cc;
      color: #666666;
      border: 2px solid #f28e00;
   }

   .suche {                                                                     /*Such Buttons*/
      -webkit-appearance: none;
      width: 100%;
      height: 150px;
      background-color: #1970BD;
      font-family: 'Aileronthin';
      font-size: 70px;
      color: #ffffff;
      border: 2px solid #1970BD;
      cursor: pointer;
      border-radius: 15px;
   }

   .suche:hover {
      background-color: #7DD0F3;
      color: #666666;
      border: 2px solid #1970BD;
   }

   .save {                                                                      /*Absendende Buttons*/
      -webkit-appearance: none;
      width: 100%;
      height: 150px;
      background-color: #1970BD;
      font-family: 'Aileronthin';
      font-size: 70px;
      color: #ffffff;
      border: 2px solid #1970BD;
      cursor: pointer;
      border-radius: 15px;
   }

   .save:hover {
      background-color: #7DD0F3;
      color: #666666;
      border: 2px solid #1970BD;
   }

   .dropdown {                                                                  /*Style für Buttons mit Aufklapp Funktion*/
      -webkit-appearance: none;
      width: 100%;
      height: 150px;
      background-color: #1970BD;
      font-family: 'Aileronthin';
      font-size: 70px;
      color: #ffffff;
      cursor: pointer;
      border: 2px solid #1970BD;
      border-radius: 15px;
   }

   .suchergebniss {                                                             /*Suchergebniss Buttons*/
      width: 100%;
      min-height: 300px;
      background-color: #F2F2F2;
      font-family: 'Aileronthin';
      font-size: 70px;
      color: #666666;
      border: 2px solid #666666;
      cursor: pointer;
      border-radius: 15px;
      vertical-align: middle;
   }

   .id_div {                                                                    /*Suchergebniss Div für die ID*/
      font-size: 120px;
   }

   .name_div {                                                                  /*Suchergebniss Div für den Namen*/
      font-size: 70px;
   }

   .data_div {                                                                  /*Div für Ergebnisbutton Text style*/
      font-size: 54px;
      padding-top: 40px;
      padding-bottom: 30px;
   }
   .status_div {                                                                  /*Div für Ergebnisbutton Text style*/
      font-size: 54px;
      padding-top: 10px;
      padding-bottom: 30px;
   }
   .wrapper {                                                                   /*Div der die Breite für alles Bestimmt*/
      margin-left: auto;
   	margin-right: auto;
      color: #666666;
      font-family: 'Aileronthin';
      font-size: 54px;
      width: 95%;
   }

   .divcenter {                                                                 /*Zentriert Text*/
      margin-left: auto;
   	margin-right: auto;
      text-align:center;
      font-size:  66px;
   }

   .ueberschrift {                                                              /*Überschrift zentriert und andere Schriftart*/
      margin-left: auto;
   	margin-right: auto;
      text-align:center;
      font-family: 'Aileronthin';
   }

   .inputfile {
	   width: 100%;
	   font-size: 54px;
      height: 10%;
      color: #666666;
      font-family: Aileronthin;
      background-color: #F2F2F2;
      border: 1px solid #666666;
      border-radius: 15px;
   }

   .picwrapp {                                                                  /*Anzeige Div für Bild Vorschau, kann nicht größer werden*/
      width: 46%;
      max-height: 450px;
      overflow: hidden;
      display: inline-block;
      margin: 2%;
   }

   .map {                                                                       /*Umrandung für die Map*/
      border: 2px solid #666666;
      border-radius: 15px;
   }

   .button_in {                                                                 /*Für zentrieren der Schrift in Buttons*/
      padding-right: 128px;;
      padding-top: 2%;
   }

   .pflicht{                                                                    /*Textarea Pflicht Anzeige*/
      border: 3px solid #1970BD;
      border-radius: 15px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      background-color: #F2F2F2;
      font-family: 'Aileronthin';
      font-size: 54px;
      min-width: 100%;
      padding: 0px;
      box-sizing: border-box;
      color: #000000;
   }

   .wrongarea{                                                                  /*Textarea Falsch oder Leer Anzeige*/
      border: 3px solid #cc0000;
      border-radius: 15px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      background-color: #F2F2F2;
      font-family: 'Aileronthin';
      font-size: 54px;
      min-width: 100%;
      padding: 0px;
      box-sizing: border-box;
      color: #000000;
   }

   .result {                                                                    /*Standart Textarea Anzeige*/
      background-color: #F2F2F2;
      font-family: 'Aileronthin';
      border: 1px solid #666666;
      border-radius: 15px;
      font-size: 54px;
      min-width: 100%;
      padding: 0px;
      min-height: 80px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      color: #707070;
      word-wrap: break-word;

   }

   .result_big {                                                                /*Imitiert Textarea auf der Result Seite*/
      background-color: #F2F2F2;
      font-family: 'Aileronthin';
      border: 1px solid #666666;
      border-radius: 15px;
      font-size: 54px;
      min-width: 100%;
      padding: 0px;
      min-height: 80px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      color: #707070;
      word-wrap: break-word;
   }

   .addtextarea {
      -webkit-appearance: none;                                                 /*Textbereiche*/
      background-color: #F2F2F2;
      font-family: 'Aileronthin';
      border: 1px solid #666666;
      border-radius: 15px;
      font-size: 54px;
      min-width: 100%;
      padding: 0px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      color: #000000;
   }

   .datum {                                                                     /*Datum Border*/
      border: 1px solid #666666
   }
                                                                                 /*Symbilc für Buttons und weitere Icons*/
   .savedataicon {
      background: url('./png/save_data_white_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      float: left;
      padding-top: 7%;
      padding-left: 3%;
   }

   .searchicon {
      background: url('./png/search_white_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      float: left;
      padding-top: 7%;
      padding-left: 5%;
   }

   .backicon {
      background: url('./png/back_white_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      float: left;
      padding-top: 7%;
      padding-left: 5%;
   }

   .saveicon {
      background: url('./png/save_white_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      float: left;
      padding-top: 7%;
      padding-left: 5%;
   }

   .listicon {
      background: url('./png/list_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      float: left;
      padding-top: 7%;
      padding-left: 5%;
   }

   .timeicon {
      background: url('./png/time_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      float: left;
      padding-top: 7%;
      padding-left: 5%;
   }

   .comeicon {
      background: url('./png/come_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      float: left;
      padding-top: 7%;
      padding-left: 5%;
   }

   .correcticon {
      background: url('./png/eraser_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      float: left;
      padding-top: 7%;
      padding-left: 5%;
   }

   .goicon {
      background: url('./png/go_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      float: left;
      padding-top: 7%;
      padding-left: 5%;
   }

   .eraser {
      background: url('./png/eraser_orange_big.png') no-repeat center;
      width: 256px;
      height: 256px;
      margin-left: auto;
   	margin-right: auto;
   }

   .eingeklappt{
      background: url('./png/plus_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      float: left;
      padding-top: 7%;
      padding-left: 5%;
   }

   .ausgeklappt{
      background: url('./png/minus_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      float: left;
      padding-top: 7%;
      padding-left: 5%;
   }

   .erasemode{
      background: url('./png/add_page_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      float: left;
      padding-top: 7%;
      padding-left: 5%;
   }

   .addmode{
      background: url('./png/remove_page_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      float: left;
      padding-top: 7%;
      padding-left: 5%;
   }

   .logout {
      background: url('./png/logout_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      float: left;
      padding-top: 8%;
      padding-left: 5%;
   }

   .saved {
      background: url('./png/saved_blue_middle.png') no-repeat center;
      width: 256px;
      height: 256px;
      margin-left: auto;
   	margin-right: auto;
      padding-left: 5%;
   }

   .notfound {
      background: url('./png/no-pictures_big.png') no-repeat center;
      width: 256px;
      height: 256px;
      margin-left: auto;
   	margin-right: auto;
      padding-left: 5%;
   }

   .scroll_down {
      background: url('./png/down_scroll_big.png') no-repeat center;
      width: 128px;
      height: 128px;
      margin-left: auto;
   	margin-right: auto;
      cursor: pointer;
   }

   .scroll_up {
      background: url('./png/up_scroll_big .png') no-repeat center;
      width: 128px;
      height: 128px;
      margin-left: auto;
   	margin-right: auto;
      cursor: pointer;
   }

   .view {
      background: url('./png/view_middle.png') no-repeat center;
      background-color: #F2F2F2;
      border: 1px solid #666666;
      width: 50%;
      height: 120px;
      border-radius:  15px;
      float: left;
      padding-top: 5%;
      margin-left: auto;
   	margin-right: auto;
      cursor: pointer;
   }

   .view_active {
      background: url('./png/view_white_middle.png') no-repeat center;
      background-color: #1970BD;
      border: 1px solid #1970BD;
      width: 50%;
      height: 120px;
      border-radius:  15px;
      float: left;
      padding-top: 5%;
      margin-left: auto;
   	margin-right: auto;
      cursor: pointer;
   }

   .delete {
      background: url('./png/rubbish_middle.png') no-repeat center;
      width: 50%;
      height: 120px;
      padding-top: 5%;
      background-color: #F2F2F2;
      border: 1px solid #666666;
      border-radius:  15px;
      float: left;
      padding-top: 5%;
      margin-left: auto;
   	margin-right: auto;
      cursor: pointer;
   }

   .delete_active {
      background: url('./png/rubbish_white_middle.png') no-repeat center;
      width: 50%;
      height: 120px;
      padding-top: 5%;
      background-color: #1970BD;
      border: 1px solid #1970BD;
      border-radius:  15px;
      float: left;
      padding-top: 5%;
      margin-left: auto;
   	margin-right: auto;
      cursor: pointer;
   }

   .selecting {
      width: 87%;
      float: left;
      padding-bottom: 7%;
   }

	.selecting_Status {
      width: 100%;
      float: left;
      padding-bottom: 7%;
   }

   .texting {
      width: 87%;
      float: left;
      padding-bottom: 7%;
   }

   .zoom_in {
      background: url('./png/zoom_grey_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      float: right;
      padding-top: 20%;
      padding-right: 2%;
   }

   .zoom_out {
      background: url('./png/zoom_blue_middle.png') no-repeat center;
      width: 64px;
      height: 64px;
      float: right;
      padding-top: 20%;
      padding-right: 2%;
   }

   .loader {                                                                    /*Loader Animation beim Senden der Add Seite*/
      border: 32px solid #F2F2F2;
      border-top: 32px solid #1970BD;
      border-bottom: 32px solid #1970BD;
      border-radius: 50%;
      margin-left: auto;
   	margin-right: auto;
      width: 256px;
      height: 256px;
      animation: spin 2s infinite;
  }

  @keyframes spin {                                                             /*Loader bewegung*/
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
  }

   #done {
      color: #666666;
      font-family: 'Aileronthin';
      font-size: 54px;
      float: left;
      padding-left: 10%;

   }

   #gps {
      color: #666666;
      font-family: 'Aileronthin';
      font-size: 54px;
      float: right;
      padding-right: 10%;
   }

   #imgup{
      background: url('./png/add_blue.png') no-repeat center;
      width: 128px;
      height: 128px;
      margin-left: auto;
   	margin-right: auto;
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
   }


   :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color:    #000000;
      opacity:  1;
      font-family: 'Aileronthin';
      text-align: center;
      font-style: oblique;
   }

   ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color:    #000000;
      opacity:  1;
      font-family: 'Aileronthin';
      text-align: center;
      font-style: oblique;
   }

   ::placeholder { /* Most modern browsers support this now. */
      color:    #000000;
      font-family: 'Aileronthin';
      text-align: center;
      font-style: oblique;
   }
}

table {
    width: 100%;
}
progress {
	height: 25px;
	border: 0px none;
	background-color: grey;
	color: #1970BD;
}

progress::-webkit-progress-bar {
	background-color: grey;
}
progress::-webkit-progress-value {
	background-color: #1970BD;
}

progress::-moz-progress-bar {
	background-color: #1970BD;
}

.mediaUpdate {
  background-color: #1970BD;
  border-radius: 5px;
}

/* result.php map*/
#mapid {
  height: 300px;
  width: 100%;
}
#mapContainer{
  position: relative;
  text-align: center;
  color: white;
}
#mapText{
  display: none;
}
@media only screen and (max-device-width: 450px) {
  #mapid {
    height: 90vw;
    width: 100%;
    opacity: 0.5;
  }
  #mapText{
    display:block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    color: black;
  }
}




.box {
  /*width: 200px; height: 300px;*/
  position: relative;

    /*border: 1px solid #BBB;*/
  background: #EEE;
}
.ribbon_erledigt {
  position: absolute;
  right: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon_erledigt span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon_erledigt span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #79A70A;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
.ribbon_erledigt span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #79A70A;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
.ribbon_abgelehnt {
  position: absolute;
  right: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon_abgelehnt span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#F70505 0%, #8F0808 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon_abgelehnt span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #8F0808;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F0808;
}
.ribbon_abgelehnt span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #8F0808;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F0808;
}
@media only screen and (max-device-width: 450px) {
  .ribbon_erledigt {
    position: absolute;
    right: -20px; top: -20px;
    z-index: 1;
    overflow: hidden;
    width: 300px; height: 300px;
    text-align: right;
  }
  .ribbon_erledigt span {
    font-size: 40px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 80px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 400px;
    display: block;
    background: #79A70A;
    background: linear-gradient(#9BC90D 0%, #79A70A 100%);
    box-shadow: 0 12px 40px -20px rgba(0, 0, 0, 1);
    position: absolute;
    top: 76px; right: -84px;
  }
  .ribbon_erledigt span::before {
    content: "";
    position: absolute; left: 0px; top: 100%;
    z-index: -1;
    border-left: 12px solid #79A70A;
    border-right: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-top: 12px solid #79A70A;
  }
  .ribbon_erledigt span::after {
    content: "";
    position: absolute; right: 0px; top: 100%;
    z-index: -1;
    border-left: 12px solid transparent;
    border-right: 12px solid #79A70A;
    border-bottom: 12px solid transparent;
    border-top: 12px solid #79A70A;
  }
  .ribbon_abgelehnt {
    position: absolute;
    right: -20px; top: -20px;
    z-index: 1;
    overflow: hidden;
    width: 300px; height: 300px;
    text-align: right;
  }
  .ribbon_abgelehnt span {
    font-size: 40px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 80px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 400px;
    display: block;
    background: #79A70A;
    background: linear-gradient(#F70505 0%, #8F0808 100%);
    box-shadow: 0 12px 40px -20px rgba(0, 0, 0, 1);
    position: absolute;
    top: 76px; right: -84px;
  }
  .ribbon_abgelehnt span::before {
    content: "";
    position: absolute; left: 0px; top: 100%;
    z-index: -1;
    border-left: 12px solid #8F0808;
    border-right: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-top: 12px solid #8F0808;
  }
  .ribbon_abgelehnt span::after {
    content: "";
    position: absolute; right: 0px; top: 100%;
    z-index: -1;
    border-left: 12px solid transparent;
    border-right: 12px solid #8F0808;
    border-bottom: 12px solid transparent;
    border-top: 12px solid #8F0808;
  }
}