@font-face { font-family:Shadows Into Light; src:url(../fonts/shadows_into_light/ShadowsIntoLight.ttf); }

/* font awesome 5 free for icons etc */
@font-face {
    font-family: 'Font Awesome 5 Free';
    src: url('../webfonts/fa-solid-900.eot');
    src: url('../webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/fa-solid-900.woff2') format('woff2'),
        url('../webfonts/fa-solid-900.woff') format('woff'),
        url('../webfonts/fa-solid-900.ttf') format('truetype'),
        url('../webfonts/fa-solid-900.svg#text-security') format('svg')
        }

@font-face {
    font-family: 'Font Awesome 5 Free';
    src: url('../webfonts/fa-regular-400.eot');
    src: url('../webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/fa-regular-400.woff2') format('woff2'),
        url('../webfonts/fa-regular-400.woff') format('woff'),
        url('../webfonts/fa-regular-400.ttf') format('truetype'),
        url('../webfonts/fa-regular-400.svg#text-security') format('svg')
        }

/** need font awesome old for some other icons (mostly squares, which are really ugly in fa5f) */
@font-face {
    font-family: 'FontAwesome';
     src: url('../fonts/font-awesome/fontawesome-webfont.eot');
     src: url('../fonts/font-awesome/fontawesome-webfont?#iefix') format('embedded-opentype'),
             url('../fonts/font-awesome/fontawesome-webfont.woff2') format('woff2'),
             url('../fonts/font-awesome/fontawesome-webfont.woff') format('woff'),
             url('../fonts/font-awesome/fontawesome-webfont.ttf') format('truetype'),
             url('../fonts/font-awesome/fontawesome-webfont.svg#text-security') format('svg')
             }

@font-face {
  font-family: 'text-security-disc';
  src: url('../fonts/text-security-disc/text-security-disc-compat.eot');
  src: url('../fonts/text-security-disc/text-security-disc-compat.eot?#iefix') format('embedded-opentype'),
      url('../fonts/text-security-disc/text-security-disc-compat.woff2') format('woff2'),
      url('../fonts/text-security-disc/text-security-disc-compat.ttf') format('truetype');
}

/*
  Browser detection hack to enable the optimized font in recent versions of Chromium and FF,
  which implement their own font rendering and do support cmap format 13.

  content-visibility is currently only supported in Chrome & Edge version 85+ & Chrome for Android
  -moz-appearance only lets Firefox through
  -webkit-hyphens explicitly excludes Safari in case they later add support for content-visibility
*/
@supports ((content-visibility: visible) or (-moz-appearance:meter)) and (not (-webkit-hyphens: none)) {
  @font-face {
    font-family: 'text-security-disc';
    src: url('../fonts/text-security-disc/text-security-disc.woff2') format('woff2'),
      url('../fonts/text-security-disc/text-security-disc-compat.ttf') format('truetype');
  }
}
/*@import url('https://fonts.googleapis.com/css?family=Muli:300');*/


img {
    image-rendering: pixelated;
}

img.avatar {
    image-rendering: auto;
}
/*------------------------------------*/
/* Cover background Images            */
/*------------------------------------*/
.bg-cover{
  width: 100%;
  height:100%;
  background-size:cover;
  background-position: center;
  margin: 0px;
}

.bg-skater{
    background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url("../img/skater.jpg");
    background-size: cover;
    background-position: 50% 50%;
    background-attachment: fixed;
}

/*------------------------------------*/
/* Container                          */
/*------------------------------------*/
.header-navi {
  background-color: #ededed;

  min-height: 60px;
  padding-top: 10px;
}
.header-content{
  min-height: 60px;
  background-color: #2DA3E5;
  color: #ffffff;
  padding: 5px;

}
.header-error{
  width: 100%;
  min-height: 60px;
  background-color: #CB3333;
  color: #ffffff;
  padding: 5px;
  margin-bottom: 30px;
}

.container-content{
    width: 100%;
    align-content: center;
}
.container-innercontent{
    margin-left: auto;
    margin-right: auto;
    max-width: 1300px;
}
.container-innernavi{
    margin-left: auto;
    margin-right: auto;
    max-width: 1500px;
}
.container-table {
  background-color: #ffffff;
  border: solid 1px #B6B4B4;
  border-radius: 0px;
  margin-top: 5px;
  margin-bottom: 20px;
}

.container-table .container-table {
 border-width: 0px;
}


.container-default{
  background-color: #ffffff;
}
.container-survey {
    background-color: #fafafa;
    border: 1px solid rgb(0, 51, 101);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    margin-top: 20px;
}

.container-survey-anamnese-detailerfassung {
    display: flex !important;
}
.p-right2{
  text-align: right;
  margin-top:10px;
  margin-bottom:10px;
  margin-right: 10px;
}

.p-big {
  color: #003365;
  font-size: 26px;
}
.p-big .active{
  color: #2DA3E5;
  font-size: 26px;
}
.p-small{
  color: #003365;
  font-size: 12px;
  margin-left: 30px;
}
.p-small-white{
    color: #ffffff;
  font-size: 16px;
  margin-left: 30px;
}

.question-box{
  background-color: #fff;
  padding: 15px;
}


/*------------------------------------*/
/* Defaults                           */
/*------------------------------------*/
body{
  background-color: #dddddd;
  /*color: #003365;*/
  color: #555555;
  font-family: 'Muli', 'Helvetica Neue', Helvetica, Calibri, Arial, sans-serif;
  font-size: 16px;
  margin: 0px;
  padding:0px;
  height: 100%;
  width: 100%;
}

p{
  color: #555555;
}

a{
    color: #003365;
    text-decoration: none;
}
a:hover, a:focus, a:active {
    color: #2DA3E5;
    text-decoration: underline;
}

h1, h2, h3{
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
}
h1{
  font-size: 24px;
}
h2{
  font-size: 22px;
    margin-bottom: 3px;
}
h3{
  margin-left: 0px;
  font-size: 20px;
}
h5{
    font-size: 14px;
}
h6{
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 6px;
    padding-left: 0px;
}

table {
  margin-bottom: 0px;
}
table.table {
    margin-bottom: 3px;
    box-shadow: 0px 3px 5px -4px
}

table.fixed {
  table-layout: fixed;
  word-break: break-all;
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th{
    vertical-align: inherit
}

thead {
  border: 0px;
  background-color: #2DA3E5;
  color: #ffffff;
}
tfoot{
  background-color: #2DA3E5;
  color: #ffffff !important;
  font-weight: bold;
}
tr, th, td{
  border: 0px;
  color: #003365;
}


tr.odd{
  background-color: #f9f9f9;
}
tr.even{
  background-color: #ededed;
}

th, .td-foot{
    color: #ffffff;
}

hr {
    color: #003365;
    background-color: #003365;
    height: 2px;
    margin-top: 0;
    margin-bottom: 0;
}

/*-------------------------------------*/
 /* Forms                              */
 /*------------------------------------*/
input[type=text],
input[type=password],
input[type=search]:not(.p-inputtext),
input[type=number],
input[type=time],
select,
textarea{
    border: 1px solid #b7b4b4;
    border-radius: 2px;
    outline: none;
    height: 35px;
    padding-left: 12px;
    font-size: 14px;
    /*background-color: #f3f4f5;*/
}

/** way-adjustments for the dropdown (aka react select) */
input.WAY-Dropdown__input {
    height:18px;
    box-shadow: none !important;
}
.WAY-Dropdown__menu-portal {
    z-index: 999 !important;
}

select:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=time]:focus,
textarea:focus {
    border: 1px solid #85A19B;
    color: rgb(85, 85, 85);
    border-radius: 2px;
    /*border-width: 2px !important;*/
    box-shadow: 0 0 0 1px rgb(85,85,85);
}

textarea {
    width: 100%;
    height: 150px;
    padding: 12px;
    box-sizing: border-box;
}
.textarea-autosize-wrapper > textarea {
  height: 35px;
  padding: 6px 12px;
}



/* Checkbox */

input.css-checkbox, input.css-checkbox-large {
  opacity: 0;
  height:0;
}
input.css-checkbox + label.css-label{
  font-weight: normal;
  font-size: 14px;
  min-height: 22px;
  display: inline-block;
  line-height: 22px;
  background-repeat: no-repeat;
  background-position: 1px 1px;
  vertical-align: middle;
  cursor: pointer;
}

input.css-checkbox-large + label.css-label-large  {
  font-weight: normal;
  font-size: 14px;
  min-height: 27px;
  display: inline-block;
  line-height: 27px;
  background-repeat: no-repeat;
  background-position: 1px 1px;
  background-size: 26px 26px;
  vertical-align: middle;
  cursor: pointer;
  min-width: 27px;
}
input.checkbox-readonly, label.checkbox-readonly {
  color: #cccccc;
  font-size: 14px;
}

input.checkbox-readonly-dark, label.checkbox-readonly-dark {
    color: #9d9d9d
}

input.checkbox-disabled, label.checkbox-disabled {
  cursor: not-allowed;
}

/*

.input-group > input, .input-group.form-control, date.form-control{
    outline: none;
}
*/
.radio-as-button {
    margin: 0;
    background-color: #75a29b;
    color: white;
}

.button-checkboxes-checkbox:hover {
    box-shadow: 0 0 0 2px #75a29b; /* emulate the border */
}

.button-checkboxes-checkbox:hover .checked-mark {
    opacity: 1;
}

.checked-mark {
    opacity: 0;
}


/** new radiobuttons without images */
.radio {
  font-size: 15px;
  /*margin: 0.5rem;*/
  line-height: 1.1;
  margin-top: 5px;
  margin-bottom: 5px;
  /*margin-left: 0;*/
  /*margin-right: 1rem;*/
}
.radio input[type=radio] {
  position: absolute;
  opacity: 0;
  margin-left: 0;
}
.radio input[type=radio] + .radio-label:before {
  content: "";
  background-color: white;
  border-radius: 100%;
  border: 1px solid rgb(85, 85, 85);
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  position: relative;
  top: -0.2em;
  margin-right: 0.5em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
  margin-left: -25px;
}

/** Todo: class for every style id. */
.radio input[type=radio] + .equals-jugendlicher-selbst:before {
  border-color: #75a39b;
}

.radio input[type=radio] + .equals-betreuer-anamnese:before {
  border-color: #6a707a;

}

.radio input[type=radio]+ .equals-betreuer-jugendlicher:before {
  border-color: #A86EA4;
}

.radio input[type=radio] + .equals-lehrer-jugendlicher:before {
  border-color: #C69E81;
}


.radio input[type=radio] + .radio-label {
  font-size: 14px;
  margin-right: 1rem;
  /*margin-left: 25px;*/
  padding-left: 25px;
}

.radio input[type=radio] + .css-radio-no-margin {
    margin-right: 0;
}

.radio input[type=radio] + .css-radio-no-margin:before {
    margin-right: 0;
}

.checkbox label, .radio label {
    padding-left: 1px;
}


.radio input[type=radio]:checked + .radio-label:before {
  background-color: rgb(85, 85, 85);
  box-shadow: inset 0 0 0 4px #f4f4f4;
}

.radio input[type=radio]:checked + .equals-jugendlicher-selbst:before {
  background-color: #75a39b;
}

.radio input[type=radio]:checked + .equals-betreuer-anamnese:before {
  background-color: #6a707a;
}

.radio input[type=radio]:checked + .equals-betreuer-jugendlicher:before {
  background-color: #A86EA4;
}

.radio input[type=radio]:checked + .equals-lehrer-jugendlicher:before {
  border-color: #C69E81;
}


.radio input[type=radio]:focus + .radio-label:before {
  outline: none;
  border-color: #75a39b;
}
.radio input[type=radio]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #b4b4b4;
}

.radio input[type=radio]:disabled:checked + .radio-label:before {
  background: #b4b4b4;
}

.radio input[type=radio] + .radio-label:empty:before {
  margin-right: 0;
}

/* new checkbox without images */
.checkbox {
  font-size: 15px;
  line-height: 1.1;
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.checkbox input[type=checkbox] {
  position: absolute;
  opacity: 0;
  margin-left: 0;
}


.checkbox input[type=checkbox] + .radio-label:before {
  content: "";
  background-color: white;
  border-radius: 0.25em;
  border: 1px solid rgb(85, 85, 85);
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  position: relative;
  top: -0.2em;
  margin-right: 0.6em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}

.checkbox-vorgeschichte input[type=checkbox] + .radio-label:before {
    margin-right: 0.3em
}



.checkbox input[type=checkbox] + .radio-label.equals-jugendlicher-selbst:before {
    border-color: #75a39b;
}

.checkbox input[type=checkbox] + .radio-label.equals-betreuer-anamnese:before {
    border-color: #6a707a;
}

.checkbox input[type=checkbox] + .radio-label.equals-betreuer-jugendlicher:before {
    border-color: #A86EA4;
}

.checkbox input[type=checkbox] + .radio-label.equals-lehrer-jugendlicher:before {
    border-color: #C69E81;
}


.checkbox input[type=checkbox] + .radio-label.checkbox-readonly:before {
    border-color: #cccccc;
}

.checkbox input[type=checkbox] + .radio-label.use-text-as-checkbox:before {
  display:none;
}

.checkbox input[type=checkbox] + .radio-label.use-text-as-checkbox-text {
  color: gray;
}

.checkbox input[type=checkbox] + .radio-label.use-text-as-checkbox.text-checked {
  font-weight: bold;
  color: #555555;
}

.checkbox input[type=checkbox] + .radio-label {
  /*margin-left: -5px;*/
  font-size: 14px;
  padding-left: 0;
  padding-right: 0;
  padding-top: 5px;
  padding-right: 2px;
}

.checkbox input[type=checkbox] + .css-checkbox-no-margin {
    margin-right: 0;
}

.checkbox input[type=checkbox] + .css-checkbox-no-margin:before {
    margin-right: 0;
}


.checkbox input[type=checkbox]:checked + .radio-label:before {
  content:url("data:image/svg+xml,<svg width='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><path style='fill:none;stroke:rgb(85, 85, 85);stroke-width:2.15024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='M 0.58806279,5.394872 C 1.7920284,6.1061638 3.5024498,7.3766951 4.5360361,8.206318 6.3448507,3.7647583 7.4250239,2.9892559 9.0862434,0.56651996'/></svg>");
  padding-top:2px;
}

.checkbox input[type=checkbox]:checked + .equals-jugendlicher-selbst:before {
  content:url("data:image/svg+xml,<svg width='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><path style='fill:none;stroke:rgb(117, 163, 155);stroke-width:2.15024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='M 0.58806279,5.394872 C 1.7920284,6.1061638 3.5024498,7.3766951 4.5360361,8.206318 6.3448507,3.7647583 7.4250239,2.9892559 9.0862434,0.56651996'/></svg>");
  padding-top:2px;
}


.checkbox input[type=checkbox]:checked + .equals-betreuer-anamnese:before {
  content:url("data:image/svg+xml,<svg width='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><path style='fill:none;stroke:rgb(106,112,122);stroke-width:2.15024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='M 0.58806279,5.394872 C 1.7920284,6.1061638 3.5024498,7.3766951 4.5360361,8.206318 6.3448507,3.7647583 7.4250239,2.9892559 9.0862434,0.56651996'/></svg>");
  padding-top:2px;
}

.checkbox input[type=checkbox]:checked + .equals-betreuer-jugendlicher:before {
  content:url("data:image/svg+xml,<svg width='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><path style='fill:none;stroke:rgb(168,110,164);stroke-width:2.15024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='M 0.58806279,5.394872 C 1.7920284,6.1061638 3.5024498,7.3766951 4.5360361,8.206318 6.3448507,3.7647583 7.4250239,2.9892559 9.0862434,0.56651996'/></svg>");
  padding-top:2px;
}

.checkbox input[type=checkbox]:checked + .equals-lehrer-jugendlicher:before {
  content:url("data:image/svg+xml,<svg width='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><path style='fill:none;stroke:rgb(198, 158, 129);stroke-width:2.15024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='M 0.58806279,5.394872 C 1.7920284,6.1061638 3.5024498,7.3766951 4.5360361,8.206318 6.3448507,3.7647583 7.4250239,2.9892559 9.0862434,0.56651996'/></svg>");
  padding-top:2px;
}



.checkbox input[type=checkbox]:focus + .radio-label:before {
  outline: none;
}

.checkbox input[type=checkbox]:focus + .equals-jugendlicher-selbst:before {
  border-color: #6a707a;
}

.checkbox input[type=checkbox]:focus + .equals-betreuer-anamnese:before {
  border-color: #6a707a;
}


.checkbox input[type=checkbox]:focus + .equals-betreuer-jugendlicher:before {
  border-color: #A86EA4;
}

.checkbox input[type=checkbox]:focus + .equals-lehrer-jugendlicher:before {
  border-color: #C69E81;
}

.checkbox input[type=checkbox]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #b4b4b4;
  /*background: #b4b4b4;*/
}
.checkbox input[type=checkbox] + .radio-label:empty:before {
  margin-right: 0;
}

/* this ensures that no hover effekt is applied on devices
* which has no hover. (especially ipad iphone...).
* Does not work for all devices, but only ios has the
* double-click behavior on hover-fields, so it should be fire currently */
@media (hover: none) {
   .button-checkboxes-checkbox:hover .checked-mark {
       opacity: 0;
   }

}


/* Datepicker */
.form-control:focus{
-webkit-box-shadow: none;
box-shadow: none;
}
.input-group-addon-datepicker {
  padding-top: 4px;
  margin-bottom: 3px;
  border-left: 1px solid #b7b4b4;
  padding-right: 0 !important;
  border: 1px solid #b7b4b4 !important;
  border-radius-top-right: 4px;
  border-radius-bottom-right: 4px;
  width: 35px !important;
  color: transparent;
  height: 35px;
}

.input-group-addon-datepicker.equals-betreuer-anamnese {
    border-color: rgb(106, 112, 122) !important;
}

.input-group-addon:last-child {
    z-index: 100;
}
/* Füsse und Fahne für Slider in Ziele */
.zsiz-ist {
  background-repeat: no-repeat;
  background-image: url("../img/feet.png");
  background-position: center;
  height: 43px;
  width: 38px;
  margin-left: auto;
  margin-right: auto;
}
.zsiz-soll {
  background-repeat: no-repeat;
  background-image: url("../img/target.png");
  background-position: center;
  height: 53px;
  width: 56px;
  margin-left: auto;
  margin-right: auto;
}

/* Fehleranzeige in Formularen */
.unfilled-error-container .popover {
  border-color: #CB3333;
  border-radius: 0;
  border-width: 2px;
}
.unfilled-error-container .popover.bottom .arrow {
  border-bottom-color: #CB3333;
}
.unfilled-error-container .popover.bottom .arrow:after {
  border-top-width: 1px !important;
}

.unfilled-error-input {
  background-color: #CB3333 !important;
}

/** Every text inside the red stuff is white */
.unfilled-error-input {
	color:white !important;
}

/** Every text inside the red stuff is white, if not excluded */
.unfilled-error-input :not(.no-other-error-color) {
  color:white !important;
}



.input-background {
  background-color: white;
}
.unfilled-error-outline-common {
  border-radius: 4px;
  padding: 4px;
  margin: 2px;
}
.unfilled-error {
  border: 2px solid #CB3333;
  border-radius: 4px;
  padding: 4px;
  margin: 2px;
}
.unfilled-error-hide {
  /* same col as inside, for an invisible border */
  border: 1px solid transparent;
  border-radius: 4px;
}


.form-group.has-error .unfilled-error-input {
  background-color: white !important;
  color: black !important;
}
.form-group .help-block {
    margin-bottom:0;
}

/* A form-group within a form-group results in no more padding */
.form-horizontal .form-group .form-group {
    margin-right: 0;
    margin-left: 0;
    margin-bottom:0;
}

/*-------------------------------------*/
 /* Progressbar                        */
 /*------------------------------------*/
.container-progressbar {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 8px;
  margin-top: 12px;
}
.container-progressbar > .progress {
  margin: 0;
  background-color: #666666;
  height: 14px;
  border-radius: 1px;
}
.container-progressbar .progress-bar {
  background-color: #6699CC;
  border: 0;
}
.container-progressbar .progress-bar-success {
  background-color: #6699CC;
}

/*------------------------------------*/
/* Data Tables styles                 */
/*------------------------------------*/
div.dataTables_wrapper div.dataTables_info {
  padding: 20px 15px 0px 10px;
  font-size: 14px;
  text-align: right;
}
div.dataTables_wrapper div.dataTables_paginate {
  padding: 0px 10px 15px 20px;
  font-size: 14px;
  text-align: right;
}
.paginate_button {
    padding-right:10px;
}

.current {
    text-decoration: underline;
}

.paginate_button.disabled {
    padding-right:10px;
    color: #555555;
    text-decoration: none;
}
div.dataTables_wrapper div.dataTables_length label {
  padding: 20px 20px 20px 10px;
  font-weight: normal;
  text-align: left;
   font-size: 14px;
}
div.dataTables_wrapper div.dataTables_filter {
    padding: 20px 0px 20px 20px;
    font-weight: normal;
    text-align: left;
     font-size: 14px;
}
div.dataTables_wrapper div.dataTables_filter lable {
    padding-right: 20px;
}

table.dataTable thead .sorting_asc {
  background: url("../img/datatable/sort_asc.png") no-repeat center left;
}
table.dataTable thead .sorting_desc {
  background: url("../img/datatable/sort_desc.png") no-repeat center left;
}
table.dataTable thead .sorting {
  background: url("../img/datatable/sort_both.png") no-repeat center left;
}

table.dataTable thead th.sorting_asc_disabled {
  background-image: url("../img/datatable/sort_asc_disabled.png");
      background-repeat: no-repeat;
      background-position: right center;
      padding-right: 30px;
}
table.dataTable thead th.sorting_desc_disabled {
  background-image: url("../img/datatable/sort_desc_disabled.png");
      background-repeat: no-repeat;
      background-position: right center;
      padding-right: 30px;
}

table.dataTable tbody tr.selected {
  background: #99cb33;
}

/*------------------------------------*/
/* Bootstrap styles                   */
/*------------------------------------*/
.table-hover:hover tbody:hover tr:hover{
  background-color: #DBE6EC;
}

/* no hover for selected */
.table-hover:hover tbody:hover tr.selected:hover {
  background-color: #99cb33;
}

.table-striped{
  background-color: #ededed;
}
.table>thead>tr>th {
    border: 0;
    font-weight: normal;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td,
.table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border: 0;
}

.btn {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  background-color: #99CB33;
  border-radius: 4px;
  padding: 5px 15px;
  margin: 10px;
}
.btn-standard-bghell{
  border: solid 3px #ffffff;
}

/* default button, but with a thinner experience*/
.btn-thin {
  font-size: 16px;
  font-weight: normal;
  border-radius: 0;
  border-width: 1px;
}

.btn-corona {
  font-size: 15px;
  font-weight: normal;
  border-radius: 0;
  border-width: 0px;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 0;
}

.way-btn-default {
    color: #99CB33;
    background-color: transparent;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 0;
    margin-top: 0px;
    vertical-align: middle;
    padding-left: 3px;
    padding-right: 3px;
    border: 0;
}

.way-btn-default:hover {
    background-color: white !important;
}


.btn:focus,
.btn:active:focus{
    color: #ffffff;
    outline: 0;
}
.btn-standard:not([disabled]):hover, .btn-standard-bghell:not([disabled]):hover, .btn-standard:not([disabled]):focus,
.btn-standard-bghell:not([disabled]):focus .btn-standard:not([disabled]):active, .btn-standard-bghell:not([disabled]):active,
.btn:not([disabled]):hover, button:not([disabled]):hover{

  color: #ffffff;
}


.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
    border-bottom-color: #717171;
    border-bottom: 8px dashed;
    border-top: 0 !important;
}

button.btn.dropdown-toggle.selectpicker.unfilled-error-input.btn-default{
  background-color: #CB3333;
  color: #ffffff;
}
button.btn.dropdown-toggle.selectpicker.btn-default.unfilled-error-input .caret{
  border-top-color: #ffffff;
}

.open>.dropdown-toggle.btn-default,
.open>.dropdown-toggle.btn-default:hover,
.open>.dropdown-toggle.btn-default:focus,
.open>.dropdown-toggle.btn-default:active{
    border: 1px solid #b7b4b4;
    background-color: #EFEFEF;
    color: #555555;
    font-family: 'Helvetica Neue', Helvetica, Calibri, Arial, sans-serif;
}


.bs-searchbox .form-control {
    background-color: white !important;
    border-width: 1px !important;
}



input[type=time].equals-jugendlicher-selbst {
  border-color: #75a39b;
}

input[type=time].equals-betreuer-anamnese {
  border-color: #6a707a;

}

input[type=time].equals-betreuer-jugendlicher {
  border-color: #A86EA4;
}

input[type=time].equals-lehrer-jugendlicher {
  border-color: #C69E81;
}





.btn-standard:disabled:hover, .btn-standard-bghell:disabled:hover,
.btn:disabled:hover, button:disabled:hover{
  color: #ffffff;
}
.btn-inactive {
  opacity: 0.5;
}

.info-button-question-type {
    cursor: pointer;
    font-size: 16px;
    border: 1px solid white;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-weight: normal;
}

.modal-backdrop {
  background-color: #003365;
  z-index: 9990;
}
.modal-content{
  background-color: #dddddd;
  border-radius: 0px;
}
.modal-header{
  border: 0;
}
.modal-body{
  background-color: #ffffff;
  border: solid 2px #003365;
  border-radius: 4px;
  margin: 20px;
}
.modal-footer{
  border: 0;
  width: 100%;
}

.modal {
    z-index: 9999;
}

.icon {
  margin-left: 5px;
  margin-right: 15px;
}

.p-big .icon:hover{
  color: #2DA3E5;
}

th .icon:hover{
  color: #003365;
}
td .icon:hover{
  color: #2DA3E5;
}

.dropdown-toggle{
  background-color: inherit;
  border:0;
}
.dropdown-menu {
  background-color: #fafafa;
  border: 1px solid rgb(182 180 180);
}

.dropdown-menu li a{
  font-size: 15px;
  color: #555 !important;
}
.dropdown-menu li a:hover{
  background-color: #dddddd !important;
  opacity: 1 !important;
}
.dropdown-menu .disabled a{
  opacity: 0.4;
}
.dropdown-menu .disabled a:hover{
  opacity: 0.4 !important;
}
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
.dropdown-submenu>a:after{
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>.dropdown-menu{
    color: #dddddd !important;
    display:block;
}

.dropdown-item-checked::before {
  position: absolute;
  color: #555;
  left: .4rem;
  padding-top: 4px;
  content: '✓';
  font-weight: 600;
}


.nav,
.nav-tabs,
.nav-tabs li{
  border: 0;
}

.nav-tabs li a{
  line-height: 21px;
  color: #003365;
  background-color: #CEDBE9;
  font-size: 14px;
  border-top: solid 2px #2da2e4;
  border-right: solid 2px #2da2e4;
  border-bottom: solid 2px #2da2e4;
  border-left: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
    margin-right: 0px;
}
.nav-tabs li a:hover {
  line-height: 21px;
  color: #2DA3E5;
  background-color: #ffffff;
  font-size: 14px;
  border-top: solid 2px #2da2e4;
  border-right: solid 2px #2da2e4;
  border-left: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.nav-tabs li.first a,
.nav-tabs li.first a:hover{
    line-height: 21px;
    border-left: solid 2px #2da2e4;
}
.nav-tabs li.leftfromactive a,
.nav-tabs li.leftfromactive a:hover{
    line-height: 21px;
    border-right: 0;
}
.nav-tabs li.active a{
    line-height: 22px;
    background-color: #ffffff;
    color: #003365;
    font-size: 16px;
    border-top: solid 2px #2da2e4;
    border-right: solid 2px #2da2e4;
    border-bottom: none;
    border-left: solid 2px #2da2e4;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    z-index: 1;
}
.nav-tabs li.active a:hover,
.nav-tabs li.active a:focus{
  line-height: 22px;
  background-color: #ffffff;
  color: #003365;
  border-top: solid 2px #2da2e4;
  border-right: solid 2px #2da2e4;
  border-bottom: none;
  border-left: solid 2px #2da2e4;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.popover-content{
    color: #555555;
}

.popover {
    z-index: 2060;
}

/*
.bottom-align{
  float: none;
  display: table-cell;
  vertical-align: bottom;
}

@media (max-width: 767px) {
  .bottom-align{
    float: none;
    display: block;
    vertical-align: bottom;
  }
}*/

/** responsive table test */
/*td::before {
    content:attr(data-label);
    background: #eee;
    border-right:2px solid black;
    width: 20%;
    float:left;
    padding:1em;
    font-weight: bold;
    margin:-1em 1em -1em -1em;
}*/
/** show element as block when xs */
@media (max-width: 767px) {
    .block-display {
    display: block;
    }

    .radio-button-as-button-xs, .radio-button-as-button-label {
        width: 100%;
    }
}


.not-allowed {
    cursor: not-allowed !important;
}

.not-allowed * {
    pointer-events: none;
}

.no-margin {
    margin: 0;
}


ul > a > li.odd{
  background-color: #f9f9f9;
}
ul > a > li.even{
  background-color: #ededed;
}

ul > a > li:hover {
    background-color: #dddddd;
}

a[href^="tel:"]:before {
    content: "\260E";
    margin-left: 0.25em;
    margin-right: 0.25em;
}



/* treeview styles */

li.tree {
    display: block;
    color: #ffffff;
}


li.tree.selected {
    background-color: #99CB33;
}

li.tree.odd{
  background-color: #f9f9f9;
  color: #003365;
}
li.tree.even{
  background-color: #ededed;
  color: #003365;
}

li.tree:hover, li.tree:focus, li.tree:active {
    background-color: #99CB33 !important;
}
/* file selector*/

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: red;
  cursor: inherit;
  display: block;
}
input[readonly] {
  background-color: white !important;
  cursor: text !important;
}


.overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 1000; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}


/* fade in of finish message */
#finish-layer {
  animation-name: finishMessageFadeIn;
  animation-delay: 500ms;
  animation-fill-mode: forwards;
  visibility: hidden;
}


@keyframes finishMessageFadeIn {
  99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

/** for avatar */

.carousel-arrow {
  background-image: url("../img/carousel-multi-arrow.png");
  position: relative;
  left: -25px;
  top: -50px;
  width: 35px;
  height: 21px;
  background-size: 35px 21px;
}
.carousel-arrow-text {
  position: relative;
  left: 12px;
  top: -74px;
  width: 50px;
  font-family: "Shadows Into Light";
  font-size: 12px;
  font-weight: normal;
  line-height: 1.1;
}
.carousel-multi-text {
  margin-left: -20px;
  font-family: "Shadows Into Light";
  font-size: 11px;
}
.carousel-multi-text:hover,
.carousel-multi-text:active,
.carousel-multi-text:focus,
.carousel-multi-text:visited {
  font-weight: normal !important;
}

.pw-input {
    font-family: "text-security-disc";
}


/* style for rowGroup */

tr.group-start {
  font-weight: bold;
  background-color: #ffffff;
}

tr.group-end {
  background-color: #ffffff;
}

/*
.nav-stacked > li:hover {
    background-color: #56616f;
    color: #ffffff;
} */


#first-columns-table .table-responsive {
    overflow-x : hidden !important;
    position: absolute;
    width:100%;
}

 /** Overrides for dropzone */

 .dropzone {
   font-family: 'Muli', 'Helvetica Neue', Helvetica, Calibri, Arial, sans-serif;
   border: 2px solid white;
   background-color: #EDEDED;
 }

 .dropzone .dz-preview .dz-details .dz-size span {
   padding: 5px;
 }


 .dropzone .dz-preview .dz-details .dz-filename {
   padding: 10px;

 }


 .dropzone .dz-preview .dz-details .dz-filename:hover span {
   border: 0;
 }

 .dropzone .dz-preview .dz-details .dz-filename span,
 .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
   padding: 10px;
   border: 0;
   background-color: white;

 }

 .dropzone .dz-remove {
   padding:10px;
 }

 .dropzone .dz-preview {
   width: 100%;
   background-color: transparent;
   margin: 0;
 }

 .dropzone .dz-preview .dz-error-message {
   /* margin-left: auto; *//* margin-right: auto; *//* left: 0; *//* top: 0; */
     position: absolute;
     top: 50%;  /* position the top  edge of the element at the middle of the parent */
     left: 50%; /* position the left edge of the element at the middle of the parent */

     transform: translate(-50%, -50%); /* This is a shorthand of
                                          translateX(-50%) and translateY(-50%) */
 }


 .dropzone .dz-preview .dz-image {
   border-radius: 0;
   margin-left: auto;
   margin-right: auto;
 }

 .dropzone .dz-preview .dz-error-message:after {
   border-bottom: none;
 }

.dropzone .dz-preview .dz-error-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.dropzone .dz-preview .dz-image {
  border-radius: 0;
  margin-left: auto;
  margin-right: auto;
}

.dropzone .dz-preview .dz-error-message:after {
  border-bottom: none;
}
.dropzone .dz-preview .dz-image-preview {
    background: transparent
}
.dropzone .dz-preview.dz-image-preview {
   background: transparent
}


.form-container__section-heading {
    padding-bottom: 10px;
    border-bottom: 1px lightgray solid;
    margin-top: 30px;
    margin-bottom: 20px;
}

.form-container__section-heading--no-margin {
    margin-top: 0px;
}

.form-container__row {
    display: flex;
    flex-direction: row;
    align-items: stretch
}

.form-container h6 {
    font-weight: bold;
    margin-bottom: 10px;
    padding-left: 0
}

.form-container h6.disabled {
    color: #afafaf;
}

.mt-4 {
    margin-top: 20px;
}

.mb-4 {
    margin-bottom: 20px;
}

.mt-3 {
    margin-top: 15px;
}

.mb-3 {
    margin-bottom: 15px;
}

.mt-2 {
    margin-top: 10px;
}

.mb-2 {
    margin-bottom: 10px;
}



.button-group {
    padding: 3px 3px 0px 3px;
    padding-left: 0;
    /*display: inline-block;*/
}

.form-container .button-group {
    padding-left: 0px;
    padding-top: 0px;
}

.input-group-space {
    min-height: 35px;
    /*padding-top: 8px; */
}

.form-container .input-group-space {
    min-height: 0;
    padding-top: 0;
}

.form-container label {
    margin-bottom: 0
}

.form-container__more-section i {
    width: 10px;
}

.form-container__more-section h6 {
    cursor: pointer;
}


.slide-up-bb-editor {
    height: 0;
    overflow: hidden;
    -moz-animation: slide-up 1s ease 1;
    -webkit-animation: slide-up 1s ease 1;
    -o-animation: slide-up 1s ease 1;
    -ms-animation: slide-up 1s ease 1;
    animation: slide-up 1s ease 1;
    animation-fill-mode: forwards;
}

.bbe ul {
    padding-left: 15px;
    padding-right: 15px;
    color: #555555;
}

.bbe a {
    text-decoration:underline;
    color: #2ca3e5;
}

@-moz-keyframes slide-up /* Firefox */
{
    from {height: 0;}
    to {height: 500px;}
}

@-webkit-keyframes slide-up /* Safari and Chrome */
{
    from {height: 0;}
    to {height: 500px;}
}

@-ms-keyframes slide-up /* IE10 */
{
    from {height: 0;}
    to {height: 500px;}
}

@keyframes slide-up
{
    from {height: 0;}
    to {height: 500px;}
}

div.corona-login a {
    color: #555555;
}
div.corona-login a:active {
    text-decoration: none;
}
div.corona-login a:focus {
    text-decoration: none;
}

/** Override bootstrap modal style
    needs to differ between login modal and others...hmpf.*/
.revalidate-backdrop {
    background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url("../img/skater.jpg");
    background-size: cover;
    background-position: 50% 50%;
    background-attachment: fixed;
}

.revalidate-backdrop.fade.in {
  opacity:1;
}

@media (min-width: 500px) {
    /** individual dropdowns, not the bootstrap ones */
    .individual-dropdown {
        width: 500px;
        margin 10px;
    }
}

@media (max-width: 499px) {
    /** individual dropdowns, not the bootstrap ones */
    .individual-dropdown {
        width: 250px;
        margin 10px;
    }
}

/** corona stamp */
.stamp {
 font-weight: 700;
border-radius: 1rem;
  color: #D23;
  border: 0.5rem solid #D23;
  transform: rotate(3deg);
  font-size: 2rem;
  border-color: green;
  text-align: center;
  background-color: rgba(255,255,255,0.9);
  z-index: 999;
  color: green;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  left: 0;top: 50%;
  margin-left: 20%;
  margin-right: 20%;
  padding: 20px;
}

/** override the grid row cells for smaller displays */
@media (max-width: 767px) {
    .horizontally-grid-row {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 0 !important;
    }
}


.tooltip-inner {
    background-color: white;
    color: red;
    font-size: 14px;
    border: 1px solid red;
    padding: 10px;
}

/* no need for transition. The Transition leads to placing errors within a modal */
.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    transform: none;
}
.modal.in .modal-dialog {
    transform: none;
}



/** sortablejs */


.sortable-chosen {
  background-color: #dbeef9 !important;
}


/** some overrides for the json react editor
   If the editor should be used on more places, maybe needs prefixed ,
   so they can have different layout */
.jer-value-main-row {
    align-items: baseline !important;
}

.jer-key-text {
    min-width:85px !important;
}

.jer-value-component {
    margin:2px; !important;
}

.jer-select {
    display: none !important;
}

.react-tiny-popover-container {
    z-index: 9000;
}


/** primreact stuff. maybe thats the thing! */
.p-menuitem-link:hover, p.menu-item-link:active, p.menu-item-link:visited, p.menu-item-link:focus {
    text-decoration: none;
}


.p-menu .p-menuitem > .p-menuitem-content {
    font-size: 14px;
}

.p-fieldset {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #4b5563;
    border-radius: 6px;
  }
  .p-fieldset .p-fieldset-legend {
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
    color: #374151;
    background: #f9fafb;
    font-weight: 700;
    border-radius: 6px;
    margin-left: 15px;
    width: inherit;
    font-size: inherit;
    margin-bottom: 0;
  }
  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend {
    padding: 0;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  }
  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
    padding: 1.25rem;
    color: #374151;
    border-radius: 6px;
    transition: box-shadow 0.2s;
  }
  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler {
    margin-right: 0.5rem;
  }
  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus-visible {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0 0 0 0.2rem #a5f3fc;
  }
  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #374151;
  }
  .p-fieldset .p-fieldset-content {
    padding: 1.25rem;
  }

 .p-accordion .p-accordion-header .p-accordion-header-link {
     padding: 1.25rem;
     border: 1px solid rgb(229, 231, 235);
     color: rgb(107, 114, 128);
     background: rgb(249, 250, 251);
     font-weight: 700;
     border-radius: 6px;
     transition: box-shadow 0.2s;
 }

.p-accordion .p-accordion-tab {
    margin-bottom: 10px;
}

.p-multiselect {
    max-width: 100%;
}

.p-datatable-reorderablerow-handle {
    width: 14px;
    height: 14px;
}

.p-badge {
    min-width: 1.4rem;
    height: 1.4rem;
}


.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
    color: #212529;
    background: #e9ecef;
}

.way-default-button {
    background-color: #99CB33;
    font-size: 16px;
    font-weight: normal;
    border-radius: 0;
    border-width: 1px;
    border-color: #99CB33;
    height: 38px;
}


.p-button.p-fileupload-choose input[type='file'] {
    display: none;
}

.p-button.p-component.p-fileupload-choose {
    background-color: #99cb45;
    border-radius: 0;
    border: 0;
    margin: 10px;
    font-size: 14px;
}

.p-toolbar {
    margin-top: -20px;
    margin-left: -20px;
    margin-right: -20px;
    border: 0;
    border-radius: 0;
    margin-bottom: 20px;
    padding: 5px;
}

.p-splitbutton-defaultbutton.p-button.p-component, .p-splitbutton-menubutton.p-button.p-component.p-button-icon-only {
    background-color: #99CB33;
    font-size: 16px;
    font-weight: normal;
    border-radius: 0;
    border-width: 1px;
    border-color: #99CB33;
    height: 38px;
}

.p-tieredmenu {
  width: auto !important;
}

.p-tieredmenu .p-menuitem-text {
  white-space: nowrap;
}

.p-menu ul, ul.p-contextmenu-root-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.p-tieredmenu ul, ul.p-contextmenu-root-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.p-tieredmenu.p-tieredmenu-overlay {
    background-color: #fafafa;
}

.p-tieredmenu .p-menuitem > .p-menuitem-content {
    font-size: 14px;
}

.p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
    color: #555;
}

.p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .icon {
    color: #555;
}


/** This disableds the style that initially shows the pre-focues element in a darker background,
    which is very confusing. */
.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
    background: transparent;
}

.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
    background: #e9ecef;
}

.p-overlaypanel {
    background-color: white;
    border: 1px solid #99cb33;
    color: inherit;
}

.p-overlaypanel-content {
    padding: 0;
}

.p-overlaypanel.p-overlaypanel-flipped:before {
    border-top-color: rgb(153 203 69);
}
.p-overlaypanel:not(.p-overlaypanel-flipped):before {
    border-bottom-color: rgb(153 203 69);
}

.p-checkbox.p-highlight .p-checkbox-box {
    border-color: #99CB33;
    background:#99CB33;
}

.p-focus {
    background: #fafafa !important;
}

.p-checkbox-box {
    border-color: #adb2b7;
}

.p-selectbutton .p-button.p-highlight {
    background: #99cb45;
    border-color: #99cb45;
    color: #ffffff;
}