header .logo {
    width: 15em;
}

i.icon {
    margin-right: 0.5em;
}

/* -----------------------------
    Validation
   ----------------------------- */

label.field-validation-error::before {
    content: "» ";
    font-weight: bold;
    font-size: 18px !important;
    font-style: italic;
}

label.field-validation-error {
    color: #cc081c;
    font-size: 0.85rem;
    font-style: italic;
}

.FieldError {
    color: #cc081c;
}

.NonFieldError::before {
    content: none;
}

.NonFieldError {
    color: #cc081c;
}

.input-validation-error {
    border-color: #cc081c;
}

div#Loading {
  position: absolute;
  right: 15px;
  top: 22px;
  display: none;
}

h1, h2, h3 {
  font-weight: 400;
  letter-spacing: 3.3px;
  font-style: normal;
}

h2 {
  letter-spacing: 1px;
  font-size: 1.5rem;
}

h2.text-uppercase {
  font-size: 2rem;
  letter-spacing: 3.3px;
}

h3 { font-size: 1.5rem; letter-spacing: 2px;}

h4 {
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 1.3px;
  font-style: normal;
}

h4 { font-size: 1.2rem; letter-spacing: 1px;}

label {
  font-weight: 400;
  letter-spacing: 0.96px;
  font-style: normal;
}

.Fehlertext {
  color: Red;
  font-style: italic;
}

.Warnung {
}

.WarnungCusErrors {
  color: Orange;
}

.FehlerCusErrors {
  color: Red;
}

p.WarnungCusErrors {
  font-size: 12px;
  font-weight: bold;
}

p.FehlerCusErrors {
  font-size: 12px;
  font-weight: bold;
}

h1.WarnungCusErrors {
  font-size: 16px;
}

h1.FehlerCusErrors {
  font-size: 16px;
}


@media (max-width: 428px) {
  #main-section {
    border: 0px !important;
  }
}

.valSumFields ul {
  margin-bottom: 0;
}

.WorkTimeEditDelete {
  text-align: center;
}
.edit-delete {
  margin-left: 0.3rem;
  margin-right: 0.3rem;
}

.ArbeitszeitHistory, .project-approval-projects, .vacationplan-approval-vacationplans {
}

.ArbeitszeitHistory ul, .project-approval-projects ul, .vacationplan-approval-vacationplans ul{
  list-style-type: none;
  padding: 0;
  margin-bottom: 0 !important;
}

.ArbeitszeitHistory ul li, .project-approval-projects ul li, .vacationplan-approval-vacationplans ul li {
  border: 1px solid #ced4da;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 0.25rem !important;
}

.ArbeitszeitHistory ul li .date, .project-approval-projects ul li .date, .vacationplan-approval-vacationplans ul li .date {
  font-weight: 400;
  display: block;
}

.ArbeitszeitHistory ul li .headline, .project-approval-projects ul li .headline, .vacationplan-approval-vacationplans ul li .headline {
  display: block;
}

.ArbeitszeitHistory ul li.headline-day, .project-approval-projects ul li.headline-project, .vacationplan-approval-vacationplans ul li.headline-vacationplan {
  font-weight: bold;
  display: block;
}

.ArbeitszeitHistory ul li ul, .project-approval-projects ul li ul, .vacationplan-approval-vacationplans ul li ul {
  margin-top: 0.5rem;
}


.ArbeitszeitHistory ul li ul li, .project-approval-projects ul li ul li, .vacationplan-approval-vacationplans ul li ul li {
  font-weight: 400;
}


.ArbeitszeitHistory ul li .editDelete, .project-approval-projects ul li .editDelete, .vacationplan-approval-vacationplans ul li .editDelete {
  display: block;
  margin-top: 0.3rem;
}



.radio-button-spacing tr td { padding-right: 1rem; }
.radio-button-spacing tr td input[type="radio"] { margin-right: 0.5rem; }


.form-label { display: inline-block; margin-top: 0.4rem;}

.message-row { border-bottom: 1px solid #cccccc; padding-bottom: 0.8rem; margin-bottom: 0.5rem !important; }
.message-row:last-child { border-bottom: none;  padding-bottom: 0; margin-bottom: 0 !important; }

.row-message-header { border-bottom: 1px solid #cccccc; padding-bottom: 0.5rem; margin-bottom: 1rem;}


.tox.tox-tinymce { border: 1px solid #ced4da; border-radius: 0.25rem; }



/* ----------- Dropzone ---------- */
.dropzone { padding: 1rem; padding-top: 2.5rem; padding-bottom: 2rem; text-align: center; font-size: 1.2rem; font-weight: 300; cursor: pointer; margin-top: 1rem; border: 1px solid #999999; transition: 0.5s;}
.dropzone.dropzone-container b {font-weight: 600;}
.dropzone.dropzone-container:hover {border-color: #00B1FF; color: #00B1FF;}

.dropzone.dropzone-container { display: flex; flex-direction: row; flex-wrap: wrap; }
.dropzone.dropzone-container .dz-message { flex-basis: 100%; margin-bottom: 10px; }
.dropzone.dropzone-container .dz-preview { flex-basis: 10rem; width: 10rem; border: 1px solid #e7eaec; margin: 10px; padding: 10px; background-color: #ffffff; font-size: 1rem; position: relative; line-height: normal; }
.dropzone.dropzone-container .dz-preview .dz-details { display: block; position: relative; top: auto; left: auto; opacity: 1; padding: 0; }
.dropzone.dropzone-container .dz-preview .dz-details img { max-width: 100%; width: 100%; margin-bottom: 5px; }
.dropzone.dropzone-container .dz-preview .dz-size { font-size: 0.7rem; margin-bottom: 5px;}
.dropzone.dropzone-container .dz-preview .dz-details .dz-filename,
.dropzone.dropzone-container .dz-preview .dz-details .dz-size { border: none; padding: 0; background-color: transparent; font-size: 0.8rem;}
.dropzone.dropzone-container .dz-preview .dz-details .dz-filename:hover span {border: none; padding: 0;}

.dropzone.dropzone-container .dz-preview .dz-success-mark { background-color: #ffffff; position: absolute; left: auto; right: -15px; top: 10px; border-radius: 50%; padding: 5px; border: 1px solid #002851; color: #002851; font-size: 1rem; width: 35px; height: 35px;}
.dropzone.dropzone-container .dz-preview .dz-error-mark { background-color: #ffffff; position: absolute; left: auto; right: -15px; top: 10px; border-radius: 50%; padding: 5px; border: 1px solid #00B1FF; color: #00B1FF; font-size: 1rem; width: 35px; height: 35px;}
.dropzone.dropzone-container .dz-preview .dz-error-message { line-height: normal; color: #ffffff; font-size: 0.7rem; left: 10px; right: 10px; width: auto; margin-top: 40px; }
.dropzone.dropzone-container .dz-preview .dz-error { border-color: #00B1FF; color: #ffffff; }
.dropzone.dropzone-container .dz-preview.dz-success div.dz-error-mark,
.dropzone.dropzone-container .dz-preview.dz-error div.dz-success-mark { display: none;}


.badge.badge-primary { background-color: #00B1FF; }
.badge.badge-secondary { background-color: #002851; }



/* ----------- Check ---------- */
.form-check input {
  float: left;
  margin-left: -1.5em;
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

.form-check input:checked {
  background-color: #00B1FF;
  border-color: #00B1FF;
}
.form-check input[type=checkbox] {
  border-radius: 0.25em;
}
.form-check input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}


/* Bootstrap Override */
p, div, h2, h3, h4, h5, h6,
table tr td, table tr th, table tr a,
.message-row .w-100 a.d-block,
.InfoBoxObenAbstandGross ul li a,
.ListeOhneBulletsAbstandGross ul li a {
  color: #262626;
}
.message-row .w-100 a.d-block:hover,
.InfoBoxObenAbstandGross ul li a:hover,
.ListeOhneBulletsAbstandGross ul li a:hover { text-decoration: none}
a:hover, a:focus {
  color: #00B1FF;
}

.btn-primary {
  background: radial-gradient(circle at -23% -25%, #212b55,#212b55);
}
.btn-primary:hover, .btn-primary:focus {
  background: #00B1FF;
  border-color: #00B1FF;
}

.btn-secondary {background: #595959; border-color: #595959;}
.btn-secondary:hover, .btn-secondary:focus { background: #262626; border-color: #262626;}
table.KalenderMonate td div.KalenderMonatHeadline {background: #595959 !important; border-color: #595959 !important;}
table.KalenderMonate td div.KalenderTag, span.KalenderTagZahl { border-color: #595959 !important; color: #262626 !important; }

.btn-outline-secondary { border-color: #595959;}
.btn-outline-secondary:hover,.btn-outline-secondary:focus { background: #262626; border-color: #262626;}

.alert-light {
  background: radial-gradient(circle at -23% -25%, #ff9d00, #ff9d00);
  border-color: #ff9d00;
  margin-bottom: 1.5rem;
  color: #ffffff;
  font-size: 0.9rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 0;
}

  .alert-light > div {
    width: 100%;
    margin-bottom: 1rem;
  }
@media (min-width: 768px) {
  .alert-light > div {width: 50%;padding-right: 2rem; }
  }

.alert-light ul { margin-bottom: 0; }
  .alert-light ul li,
  .alert-light a, .alert-light a:link, .alert-light a:visited, .alert-light a:hover, .alert-light a:active {
    color: #262626;
    text-decoration: none;
  }
.alert-light a:hover { text-decoration: underline; }

.TotalDurationForSelection {
  text-align: right;
}

.Notice {
  font-style: italic;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}

.ApprovalStateOpen {
  color: #00B1FF
}

.ApprovalStateApproved {
  color: #23903c
}


.ApprovalStateRejected {
  color: #e60000
}

.ApprovalStateRequested{
  color: #ff9d00
}

.ApprovalRemark {
  margin-top: 0.4rem;
}


.upload-extra-data-placeholder { margin-top: 50px;}
.upload-extra-data-placeholder .file-upload-item { margin-bottom: 10px; border: 1px solid #dee2e6; padding: 15px;}
.upload-extra-data-placeholder .file-upload-item label { margin-bottom: 5px;}
.upload-extra-data-placeholder .file-upload-item .filename { font-size: 0.8rem; line-height: 1.2rem; display: block; }