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; }

@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 { min-height: 150px; 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 #dee2e6; 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; text-align: center; font-size: 1.2rem; font-weight: 300; color: #999999; }

.dropzone.dropzone-container .dz-preview { flex-basis: 10rem; width: 10rem; border: 1px solid #e7eaec; margin: 10px; padding: 10px; background-color: #ffffff; font-size: 13px; position: relative; line-height: 150%; }

.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: -15px; border-radius: 50%; padding: 5px; border: 1px solid red; color: red; font-size: 1rem; width: 35px; height: 35px; }

.dropzone.dropzone-container .dz-preview .dz-error-message { line-height: normal; font-size: 0.7rem; left: 10px; color: red; right: 10px; width: auto; margin-top: 10px; }

.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; }


/* Mud Blazor */
.compact-buttons .mud-button {height: 35px !important; }

.compact-buttons .mud-button .mud-button-label {}

.save-button { padding: 15px 20px !important; height: auto !important;}

.menu-button .mud-button-icon-size-large > :first-child { font-size: 28px !important; }

p.text-divider { text-align: center; align-items: center; display: flex; gap: 1rem; text-transform: uppercase; font-size: 0.7rem; color: #919191; }
p.text-divider::before { background-color: #c7c7c7; content: ''; display: block; flex: 1; height: 1px; }
p.text-divider::after { background-color: #c7c7c7; content: ''; display: block; flex: 1; height: 1px; }


@media (max-width: 960px) {
  .mud-sm-table .mud-table-cell::before { min-width: 70px; }
}

.error-text { color: #ff0000; }
.mud-alert-message { width: 100%; }

@media (min-width: 960px) {
    .input-label-margin { margin-top: 13px; }
}

@media (max-width: 960px) {
    .mud-grid.grid-form .mud-grid-item { padding-top: 0; }
    .mud-grid.grid-form .mud-grid-item label { padding-top: 15px; padding-bottom: 6px; }
}

.list-indented { margin-left: 0; padding-left: 1.5rem; list-style-position: inside; }

.file-upload-panel{width: 500px;}

/*Chips*/

.chip-small { height: 20px !important; font-size: 0.75rem !important; cursor: default; }
.chip-default { color: #525453 !important; border-color: #525453 !important; }

.chip-additionalremuneration { color: #3ea44e !important; border-color: #3ea44e !important; }
.chip-open { color: #525453 !important; border-color: #525453 !important; }
.chip-approved { color: #3ea44e !important; border-color: #3ea44e !important; }
.chip-rejected { color: #d92800 !important; border-color: #d92800 !important; }

.chip-isholiday { color: #0000FF !important; border-color: #0000FF !important; }
.chip-overtime { color: #FF8000 !important; border-color: #FF8000 !important; }
.chip-day { color: #008000 !important; border-color: #008000 !important; }
.chip-time { color: #008000 !important; border-color: #008000 !important; }