:root {

    --white:#fff;
    --grey_light:#fafafa ;
    --grey_hell:#f1f1f1;
    --grey_dark:#707070;
    --grey_input:#d9d9d9;

    --baby_grey:#f5f5f5;

    --orange:#ff6600;
    --baby_orange:#fff1e9;

    --blue:#008CBA;
    --baby_blue:#F0F8FF;

    --purple: #800080;
    --baby_purple: #e6e8fa;

    --red:#f9dadd;
    --red_dark:#e45a68;
    --green:#d8f8e2;

    /*--loops_left:#FFF8DC;
    --loops_right:#FF7F50;*/

    --loop_selected:#fffada;
    --loop_hover:#fffada;


    --screen_min_width:1500px;
}


body {
   font-family: Arial, Helvetica, sans-serif;
   font-weight: lighter;
   font-size:11pt;
   margin:0px;
}

* {
  box-sizing: border-box;
}

.django-ckeditor-widget{
  width: 100%;
}

#header {
  min-width:var(--screen_min_width);
  margin: 0px;
  color:var(--white);
  padding:0px;
}

#header_l {
  background-color:  var(--brand_color1);
  padding:0px;
  height:45px;
}

#header_m {
  background-color:  var(--blue);
  padding:0px;
  height:45px;

}

#header_m_l {
  width:400px;
  height:45px;
  background-color: var(--brand_color1);
  display:inline-block;
  float:left;
}


#header_m_r {
  /* without rosetta: width:410px; */
  width:650px;
  height:45px;
  float:right;
  text-align:right;
  padding-top:12px;
  display:inline-block;
}

#header_r {
    background-color:  var(--blue);
    padding:0px;
    height:45px;

}



#header a {
  color:var(--white);
  text-decoration: none;
}

#header a:hover {
  color:var(--orange);
}


/* Navigation styling */
#navigation {
  min-width:var(--screen_min_width);
  padding: 0px;
  margin: 0px;
  background-color: var(--white);

}

#navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  display: flex;
  justify-content: left;


}

#navigation li {
margin-left: 20px;
text-align:center;
}

#navigation img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:15px;
  padding-top:28px;
}

#navigation li a {
  display: block;

  padding-left: 20px;
  padding-right: 20px;
  padding-top:0px;
  padding-bottom:20px;
  color: var(--blue);
  text-decoration: none;
}

#navigation li a:hover {
  color:var(--orange);
}


/* Style the content */
#content {
  min-width:var(--screen_min_width);
  background-color: var(--grey_hell);
  padding: 0px;
  margin: 0px;
}


/* Style the footer */
#footer {
  min-width:var(--screen_min_width);
  background-color: var(--grey_hell);
  margin: 0px;
  color:var(--black);
  text-align: right;
  padding-top:15px;
  padding-bottom:15px;
}

#footer a {
  color:var(--black);
  text-decoration: none;
}

#footer a:hover {
  color:var(--grey_dark);
}

.container {
  background-color: var(--white);
  margin-top:20px;
  padding-top:40px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom:40px;
}

.errors{
  font-size:10pt;
  color:var(--black);
  background-color: var(--red);
  border:1px solid var(--red_dark);
}

.errors ul {
    list-style-type: none;
}



 .menu {
  width:100%
  height: 100%;
  min-width: 450px;
  margin-top:60px;
}

.menu ul {
  list-style-type: none;
  background-color: var(--grey_hell);
  margin:0px;
  padding:0px;
}

.menu li {}

/* Links inside the dropdown */
.menu li a {
  color: var(--black);
  padding: 10px;
  text-decoration: none;
  display: block;
}

.menu li a:hover {
  color: var(--blue);
}


h1 {
  margin:0px;
  color:var(--black);
  font-weight: lighter;
}

h2 {
  font-weight: lighter;
  padding-left:6px;
  padding-bottom: 20px;
  margin:0px;
}

h3, h4 {
  font-weight: lighter;
  padding-left:6px;
  padding-bottom: 20px;
  margin:0px;
}



hr {
  color:white;
  margin-top:20px;
  margin-bottom:20px;
}


/*styles the item_old_check_info.html which contains the infos from the current check */
.checkinfobox {
  font-size:11pt;
  color:var(--blue);
}

.sidenotes {
  font-size:10pt;
  color:var(--grey_dark)
}
.errorlabel {
  font-size:10pt;
  color:var(--red_dark)
}


/*radioselects in check steps 2-4 */
.radioselect {
    list-style-type: none;
    margin:0px;
    padding-left:0px;
    padding-top:15px;
    padding-bottom:15px;
}

/* links Löschen bearbeiten in table */
textlink {
float: left;
}

textlink a {
font-size: 11pt;
text-decoration: none;
color:var(--grey_dark);
}

textlink a:hover {
color:var(--blue);
}

.LTA {
  text-decoration:none;
  color:var(--red_dark);
}

.LTA:hover {
  color:var(--red);
}

/* Layout classes */
.row_layout::after {
  content: "";
  clear: both;
  display: table;
}

.row_layout {
  display: flex;
  align-items: top;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

.row {
  display: flex;
  align-items: center;
}


[class*="colheadline-"] {
  float: left;
  padding: 0px;
  margin: 0px;
  border:0px;
}
[class*="col-"] {
  float: left;
  padding: 6px;
}
.col-0468 {width:4.48%}
.col-00 {width: 6%;}
.col-0 {width: 6%;}
.col-1 {width: 8.33%;}
.col-015 {width: 12.5%;}
.col-2 {width: 16.66%;}
.col-2k5 {width: 20%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.col-L {width: 20%;
        min-width:260px;
        padding-top:60px;
        padding-left:50px;
        }

.col-M {width: 75%;
        min-width:1200px;
        padding-top:60px;
        }

.col-R {width: 5%;}




/* Format for +/- Buttons in Tables */

.add_bt {
  width:40px;
  height:40px;
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: var(--white);
  color:  var(--blue);
  padding: 0px;
  border: 1px solid  var(--blue);
  border-radius: 0px;
  cursor: pointer;

}
.add_bt:hover {
  background-color: var(--blue);
  color: var(--white);
  border-color:var(--white);
}

/* generel layout for input elements */

input[tpye=number] {
   -moz-appearance:textfield;
}

textarea {
  width: 100%;
  height:80px;
  border: 1px solid var(--grey_input);
  border-radius: 0px;
  font-weight: lighter;
  padding:10px;

  font-family:inherit;
  font-size:11pt;
  -moz-appearance:textfield;

  -webkit-border-radius: 0px;
     -moz-border-radius: 0px;
          border-radius: 0px;

    outline: none;
}

input[type=text], input[type=email], select, input[type=number], input[tpye=password], #id_password, #id_email_password{
  width: 100%;
  font-family:inherit;
  height:40px;
  padding-left:10px;
  padding-right:10px;
  border: 1px solid var(--grey_input);
  border-radius: 0px;
  resize: vertical;
  -moz-appearance:textfield;
  outline: none;
}


input[type=text]:focus, input[type=email]:focus, select:focus, textarea:focus, input[type=number]:focus, #id_email_password:focus {
  border: 1px solid  var(--blue);
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


input[type=submit] {
  background-color: var(--white);
  color: var(--orange);
  padding: 12px 20px;
  border: 1px solid var(--orange);
  border-radius: 0px;
  cursor: pointer;
  float: left;
}

input[type=submit]:hover {
  background-color: var(--orange);
  color: var(--white);
  border-color:var(--orange);
}



#search_bt, #search_bt_all {
  background-color: var(--white);
  color: var(--orange);
  padding: 10px 20px;
  border: 1px solid var(--orange);
  border-radius: 0px;
  cursor: pointer;
  float: left;
}

#search_bt:hover, #search_bt_all:hover {
  background-color: var(--orange);
  color: var(--white);
  border-color:var(--orange);
}


/* styling for listview tables Kunden Retter Geltischirme usw...*/
.tableclass {
  width: 100%;
  border-spacing: 0px;
  padding:0px;
  border-collapse:collapse;
}

.tableclass td {
 border: 1px solid var(--grey_hell);
 padding: 8px;
}

.tableclass tr:nth-child(even){}

.tableclass tr:hover {background-color: var(--baby_blue);}

.tableclass th {
  background-color:var(--blue);
  color:var(--white);
  text-align:left;
  padding:10px 10px 10px 10px;
  font-weight: lighter;
  border: 1px solid var(--grey_hell);
}


/*styling for div buttons Gleitschirm hinzufügen, Kunde hinzufügen usw .. */



.bt_style_1 a{
  font-family: sans-serif;
  font-size:10pt;
  background-color: var(--blue);
  color: var(--white);
  padding: 12px 20px;
  border: 1px solid var(--blue);
  border-radius: 0px;
  cursor: pointer;
  float: left;
  text-decoration: none;
}

.bt_style_1 a:hover {
  background-color: var(--white);
  color:var(--blue);
}


.bt_style_1_invers a {
  font-family: sans-serif;
  font-size:10pt;
  background-color: var(--white);
  color: var(--blue);
  padding: 12px 20px;
  border: 1px solid var(--blue);
  border-radius: 0px;
  cursor: pointer;
  float: left;
  text-decoration: none;
}
.bt_style_1_invers a:hover {
  background-color: var(--blue);
  color:var(--white);
}


.bt_style_orange a {
  font-family: sans-serif;
  font-size:10pt;
  background-color: var(--white);
  color: var(--orange);
  padding: 12px 20px;
  border: 1px solid var(--orange);
  border-radius: 0px;
  cursor: pointer;
  float: left;
  text-decoration: none;
}

.bt_style_orange a:hover {
  background-color: var(--orange);
  color: var(--white);
  border-color:var(--orange);
}

.pagination {
  padding:10px;

}
.step-links a{
  text-decoration: none;
  color:var(--grey_dark);
}

.current {
  text-decoration:none;
  color:#000;
}
.step-links a:hover{
  color:var(--blue);
}


/* Style The Dropdown Button */
.dropbtn {
  background-color: white;
  border-radius:5px;
  color: var(--blue);
  padding:7px;

  font-size: 14px;
  border: 1px solid var(--blue);
  cursor: pointer;
}

.dropbtn_docs_text {
  background-color: transparent;
  border-radius:0px;
  color: black;

  font-size: 11pt;
  border: none;
  cursor: pointer;
}
.dropbtn_docs_text:hover {
  color: var(--blue);
  text-decoration:underline;
}

.dropbtn_docs {
  background-color: var(--blue);
  border-radius:0px;
  color: white;
  padding:10px;

  font-size: 11px;
  border: none;
  cursor: pointer;
}
.dropbtn_docs:hover {
  background-color: var(--orange);
}

.dropbtn_customer_comment {

}
.dropbtn_customer_comment:hover {
  text-decoration: underline;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  text-align: left;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Text inside the dropdown */
.dropdown-content text {
  color: black;
  padding: 12px 12px;
  text-decoration: none;
  display: block;
  min-width: 320px;
}


/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn  {
  background-color:  var(--blue);
  color:white;
}


/* Dropwdown for Tutorials */

.dropbtn-tutorials {
  color:var(--blue);
  background-color: var(--white);
  border:0;
  font-size: 14px;
  cursor: pointer;
  margin-bottom:10px;
}

.dropbtn-tutorials:hover {
  color:var(--orange);
}

.tutorial-item {
  color:black !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
}

/* Dropdown for languages */

.dropbtn-languages {
  background-color: var(--blue);
  border:0px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  margin-bottom:13px;
}
.dropbtn-languages:hover {
  color:var(--orange);
}

.language-item {
  color:black !important;
}


.simple-link {
  color:var(--blue);
  text-decoration: none;
}

.simple-link:hover {
  text-decoration: underline;
}



reset a {
font-size: 11pt;
text-decoration: none;
color:var(--red_dark);
}

reset a:hover {
  text-decoration: underline;
}