:root {
    --bs-font-sans-serif: 'Roboto', 'Open Sans', Arial, sans-serif;
    --pepito-blue: 62, 163, 220;
    --pepito-blue-h: 50, 146, 201;
    --pepito-dark-blue: #032938;
    --pepito-dark-grey: #595857;
    --pepito-light-grey: #f5f5f5;
    --pepito-background: rgba(217, 237, 247);
    --pepito-border: rgba(188, 232, 241);
}
.hidden{
 display: none !important;
}

.text-left           { text-align: left; }
.text-right          { text-align: right; }
.text-center         { text-align: center; }
.text-justify        { text-align: justify; }
.text-nowrap         { white-space: nowrap; }

.text-lowercase      { text-transform: lowercase; }
.text-uppercase      { text-transform: uppercase; }
.text-capitalize     { text-transform: capitalize; }

.text-pepito { color: rgb(var(--pepito-blue))};

.form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

.readonly {
  background-color: #e9ecef;
  margin: 0;
  width: 100px;
  opacity: 1;
}


.btn-block {
    display: block;
    width: 100%;
}

.hg-light-green{
    background: var(--bs-success-bg-subtle);
}
.hg-light-yellow{
    background: var(--bs-warning-bg-subtle);
    color: #8a6d3b;
}

.hg-muted {
    background: var(--bs-gray-100);
    color: var(--bs-gray-400);
}

.hg-error {
    background: #dc354533;
    color: var(--bs-danger);
}

.hg-light-blue{
    background: rgba(var(--pepito-blue),.25);
    color: var(--pepito-dark-blue);
}

a {text-decoration: none !important; } /*color: var(--pepito-blue);*/
/* a:hover, a:focus {color: var(--pepito-dark-blue);} */
* {outline: none !important;}

.gray {color: inherit; filter: invert(100%) grayscale(100%);}

.filter_calendar .icon-wrapper{
    display:inline-block;
    border: 1px solid #ddd;
    padding: 0 3px;
    border-radius: 5px;
    margin-right: 5px;
}

.search-input{
  /*padding: 5px 10px;*/
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.popuptime{
    font-size: 12px !important; padding:3px;
}

.searchStaff{
    font-size: 12px !important;
}

.absencestaff_view td{
    height: 36px;
}
.checkbox time {font-size: .8em; line-height: 1;}

ol.nosortable {list-style: none; padding: 0; min-height: 50px;}
ol.nosortable ol {margin: 3px 0 0 0; list-style-type: none; padding-left: 15px;}
ol.nosortable li {margin: 0 0 3px 0; background: #fff; position: relative;}

ol.nosortable li div {border: 1px solid #ddd; padding: 5px 8px 5px 8px; position: relative; border-radius: 3px;}
ol.nosortable li .type {margin: -5px -8px -5px 8px; padding: 5px 8px 5px 8px; border-left: 1px solid #ddd; text-align: right;}

@media (max-width:970px){
    ol.nosortable ol {padding-left: 15px;}
}



.bs-bars{
    width:90%;
}

.custom-toolbar{
    padding-bottom: 45px;
    font-weight: 300;
    font-size: 1.1em;
    line-height: 29px !important;
}


/* Font-Rendering identisch zu client/styles/globals.css halten, sonst wirkt
   der Twig-Teil trotz gleicher Schriftart kraeftiger als die Vue-Oberflaeche. */
body {
    font-size: .8rem; font-weight: 400; color: #555; background: #fdfdfd;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}

h1 {font-size: 1.5em; line-height:1; margin: 0; padding: 0;}
h2 {font-size: 1.1em !important; margin: 0; padding: 0;}
h3 {font-size: 1.1em; line-height:1; margin: 0; padding: 0;}

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
}

a {color: rgb(var(--pepito-blue));}
.wrapper {padding: 15px;}
.width-auto {width: auto !important;}
/* HEADER */
header#top {background: #fff; display: block;}
/* font-size explizit: auf Seiten mit vite_entry wird Bootstrap ein zweites Mal
   nach dieser Datei geladen und wuerde sonst mit seiner responsiven h1-Regel
   (bis 2.5rem) greifen. Die id+class-Spezifitaet gewinnt unabhaengig von der
   Ladereihenfolge und haelt die Ueberschrift auf allen Seiten gleich gross. */
header#top h1.headline {font-weight: 300; font-size: 1.5em; margin:0; color: #579cc0; color: rgb(var(--pepito-blue));}
header#top .wrapper { color: #666; height: auto !important; background: #fff; overflow:hidden; z-index: 3; position: relative; width: 100%; padding: .3rem .5rem; border-bottom: 1px solid #ddd;}
@media (max-width: 768px){
    header#top .wrapper {border-bottom: none;}
}

fieldset legend {display: inline-block; border: none; margin: 0; width: auto; padding: 0 15px 10px 0; font-size: 1.1em; color: #579cc0; color: rgb(var(--pepito-blue)); background: #fff;}

header#top .wrapper .logo {margin-right: 15px;}
header#top .wrapper .logo img {height: 30px; margin: 0 0 -5px 0;}
header#top .wrapper a {position: relative;}
/* header#top .wrapper a {color: #666;  font-weight: 400; font-size: 1em; position: relative;  margin: -5px 0 -8px 0; transition: color .3s;} */

span.logo {position: relative;}
span.logo > span.version {position: absolute; bottom: -10px !important; right: -10px; font-size: .7em;}
/*span.logo > a.version {position: absolute; bottom: -3px !important; right: 0; font-size: .7em;}*/


header#top .wrapper a.user {display: inline-block; font-weight: 700;}
header#top .wrapper a.user .company {font-weight: 400;}

header#top .wrapper a.border {border-left: 1px solid #ddd;}
header#top .wrapper span.user {line-height: 32px; display: block; margin-right: 8px;}

header#top .wrapper a.logout:hover {color: #a00;}

header#top .wrapper .nav a {padding: 10px;}

#mainnavmobile {margin: 40px -30px -16px -30px; padding: 0;}
#mainnavmobile ul {margin: 0; padding: 0;}
#mainnavmobile a { float: none !important; margin: 0 !important; border-bottom: 1px dotted #ddd; padding: 10px 15px !important;}

#mainnavmobile a:hover {background: #eee;}


.versions .scroll-panel {max-height: 60vh; overflow: auto;}
.versions .scroll-panel h1 {color: #579cc0; color: rgb(var(--pepito-blue)); margin: 1em 0 0 0; font-size: 1.3em;}
.versions .scroll-panel time {color: #666; text-transform: uppercase; font-size: .8em; margin: 0 0 1em 0; display: block;
}

#print_missionplan_modal ul {list-style: none; margin: 0; padding: 0;}

.versions .scroll-panel h2 {color: #666; font-size: 1.1em; margin: .5em 0;}
.versions .scroll-panel ul {list-style: none; margin: 0; padding: 0;}
.versions .scroll-panel ul li {margin-left: 1.5em; position: relative;}
.versions .scroll-panel ul li:before {
    font-family: FontAwesome, "Font Awesome 5 Free";
    position: absolute;
    font-weight: 900;
    left: -1.5em;
}

.versions .scroll-panel ul.features li:before {
    content: "\f00c";
    color: #579cc0;
    color: rgb(var(--pepito-blue));
}

.versions .scroll-panel ul.bugs li:before {
    content: "\f00d";
    color: #a94442;
}

.indented{
    padding-left: 2.5rem !important;
}
.indented_more{
    padding-left: 4rem !important;
}
/*OPTIONPANEL*/

.optionNavigation {display: block; border-bottom: 1px solid #ddd; z-index: 2; display: block; position: relative; width: 100%; }
.optionNavigation h1.headline {font-size: 1.2em; color: #FC3; font-weight: 100;line-height: 1.7;}
#menu {margin: 15px;}
.content { flex-grow: 1; overflow: auto;}


@media (min-width: 769px) {


    .optionNavigation h1.headline {font-size: 1.4em; line-height: 1.5;}
}

.week-switch {margin-right: 15px;}
.btn-group .week {border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; color: #666; display: block; float: left; font-size: 12px; line-height: 1.5; padding: 5px 10px; cursor:context-menu;}
.mobile .btn-group { position:relative; display:block;}
.mobile .btn-group .week {position: absolute; left: 0; right: 0; z-index: -1;}


.plan.topline {padding: /*15px 0 0*/ 0; background: #fdfdfd;}
.sticky-wrapper.is-sticky .plan.topline {width: 100%; z-index: 10; }


.plan.dayplan {overflow: hidden;}

.plan .head {font-weight: 400; font-size: 1.1em; border: 1px solid #ddd; background: #fff; border-bottom: 1px solid #fc3; padding: 15px; margin-top: 15px;  border-radius: 2px;}
.plan .today a.switchView {font-weight: 600; color: #5cb85c !important;}

.plan .head.week {background: #f1fafe;}
.plan .head .small {font-size: .7em; line-height: 1.5em; color: #aaa;}

.plan .item {border: 1px solid #ddd; border-radius: 2px; padding: 0 15px; margin: 15px 0 0 0; border: 1px solid #ddd; background: #fff; transition: box-shadow .3s, border-color .3s; display: block; overflow: hidden;}
.plan .item:hover {box-shadow: 0 0 10px rgba(0,0,0,.2); border-color: #fff;}
.plan .item h2 {margin: 0 -15px; padding:7.5px 15px; border-bottom: 1px solid #ddd; display:block;}
.plan .item .vacationmonth {margin: 0 -15px; padding: 5px 7.5px 0px 15px; display:block;  color: rgb(var(--pepito-blue));}
.plan .item h2.noBorder {border-bottom-width: 0px !important; line-height:0px !important; padding: 5px 7.5px 5px 15px !important;}
.plan .item .vacation {margin: 0 -15px; padding: 5px 7.5px 5px 15px; display:block; color: rgb(var(--pepito-blue));}
.plan .mission {transition: all .3s; margin: 0 -15px 0px -15px; padding: 0 15px 7.5px 15px;}
.plan.week .mission {padding-top: 15px;}
.plan .mission h3 {margin: 0px; padding: 7.5px 0 0 0px; border-top: 1px solid #ddd; display:block;}
.plan .mission:first-of-type h3 {border-top: none;}
.plan .item h2 a i, .plan .mission h3 a i {line-height: 1.5;}

.plan .item h3 > i.late, .plan .mission h3 > i.late {color: #C30;}
.plan .item h2 > i.early, .plan .mission h3 > i.early {color: #39C;}
.plan .item h2 > i.inter, .plan .mission h3 > i.inter {color: #F90;}
.plan .item h2 > i.night, .plan .mission h3 > i.night {color: #309;}
.plan .item h2 > i.special, .plan .mission h3 > i.special {color: #C3C;}

.plan .item i.bi-gift {color: #F60; font-size: .9em;}

.plan .item  time, .plan .mission  time {display: block; color: #999; font-size: .9em; margin: 10px 0; line-height: 1.5}
.plan .item address, .plan .item text,.plan .mission address {display: block; font-size: .9em; line-height: 1.5;}

/*MONTH VIEW*/

a.switchInfo i {line-height: 1 !important;}

.plan.week .item h3 {padding: 0;}
.plan .item  time {margin: 5px 0 0 0;}
.plan .item .requirement, .modal .requirement {margin: 0 0 10px 0; display: block;}
.plan .item .requirement address,  .modal .requirement address {margin: 3px 0;}
.plan .item .more, .modal .more {margin: -10px 0 10px 0;}
.plan .item .more ul.corresponding, .modal .more ul.corresponding {margin: 0; padding: 0; list-style: none;}
.plan .item .more ul.corresponding_child, .modal .more ul.correspondingg_child {margin: 0; padding: 0 0 0 10px; list-style: none;}
.plan .item .more em, .modal .more em {border-bottom: 1px dotted #ddd; padding: 5px 0; font-size: .8em; display: block;}
.plan .item .more em:last-child, .modal .more em:last-child {padding-bottom: 0; border: none;}

.plan a.week {border: 1px solid #ccc;  border-radius: 2px; padding: 7.5px 15px; display:block; margin: 15px 0 0 0; background: #f1fafe;}

.other_month {opacity: .5; transition: opacity .3s;}
.other_month:hover {opacity: 1;}

.listview .other_month {display: none;}
.listview .no_job {display: none !important;}


.plan .item .ma-list ul { list-style-type: none; padding: 0; margin: 10px 0;}
.plan .item .ma-list ul li {font-size: .9em; color: #39C; padding: 4px 0; border-bottom: 1px dotted #eee;}
.plan .item .ma-list ul li i.vg {color: #C66;}
.plan .item .ma-list ul li:last-of-type {border: none;}
/*#ebffd4#c9e0ad}*/

.plan .item.holiday {background: var(--pepito-background); border-color: var(--pepito-border);}
.plan .item.holiday.not_approved {opacity: .5; border-style: dashed;}
.plan .item.holiday.not_approved_special {background: #fcf8e3; border-color: #faebcc; color:#8a6d3b;}
.plan .item.holiday h2 {border-color: inherit; white-space:nowrap; overflow: hidden; text-overflow:ellipsis;}
.plan .item.holiday h2 > i {color: rgb(var(--pepito-blue));}
.plan .item.holiday h3 > i {color: rgb(var(--pepito-blue));}
.plan .item.holiday.not_approved_special h2 > i {color: #8a6d3b;}
/*.plan .item.holiday .noBoarder > i {color: #ab6c00 }*/

.head i.holiday {color: rgb(var(--pepito-blue)); cursor:pointer;}

.plan .item.illness {background: #ffc9c9; border-color: #e6a1a1; }
.plan .item.illness h2 {border-color: inherit; white-space:nowrap; overflow: hidden; text-overflow:ellipsis;}
.plan .item.illness h2 > i {color: #920a0a }
.plan .item.illness h3 > i {color: #920a0a }

.missionwrap {display: block; overflow: hidden; margin-bottom: -1px;}
.missionwrap > .item {padding-bottom: 7.5px;}
.missionwrap > .item:last-child {margin-bottom: 15px;}


/* MODAL SIDEBAR */

.modal .modal-body.grey {background: #f6f6f6;}
.modal .modal-body.grey .mainpanel {background: #fff; margin: -15px 0; padding: 15px; border-right: 1px solid #e5e5e5; min-height: 375px; position: relative; z-index: 10;}
.modal .modal-body.grey .mainpanel h2, .sidebar h2 {padding-bottom: 8px;}
.modal .sidebar {border-left: 1px solid #e5e5e5;  padding-left: 15px;}
.modal .sidebar-left .mainpanel {border-left: 1px solid #e5e5e5; border-right: none;}
.modal .sidebar-left .sidebar {border-right: 1px solid #e5e5e5; border-left: none; margin: -15px -1px -15px 0; position: relative; z-index: 2;}

.modal .sidebar h2 {color: rgb(var(--pepito-blue)); font-weight: normal; margin: 4px 0 0 0;}

@media (max-width: 992px) {
	.modal .sidebar {margin: 15px 0; padding-left: 0;  border: none;}
	.modal .modal-body.grey .mainpanel {min-height: 1px;}
	.modal .modal-body.grey.sidebar-left .mainpanel { margin: 0 0  -15px 0;}

}

.modal .sidebar .userimage {margin: 15px auto; display:block; border: 2px solid #fff; max-width: 100px; border-radius: 3px; overflow: hidden;}
.modal .sidebar .userimage img {border-radius: 3px;}

.modal .sidebar nav  {margin: 8px -15px;}
.modal .sidebar nav ul {list-style: none; padding: 0; margin: 0;}
.modal .sidebar nav > ul > li {border-top: 1px dotted #ddd;}
.modal .sidebar nav > ul > li > ul > li  {border-top: 1px dotted #ddd;}
.modal .sidebar nav ul li a {display: block; margin: 0; padding: 5px 15px; color: #666; transition: all .3s;}
.modal .sidebar nav ul li ul {margin: 0;}
.modal .sidebar nav ul li ul li a {display: block; margin: 0; padding: 5px 30px; color: #666; font-size: .9em;}

.modal .sidebar nav  a:hover, .modal .sidebar nav li.active > a {color: #3071A9; background: rgba(255,255,255,.8);}

#setHoliday {clear: both; overflow: hidden;}
#setHoliday fieldset {border: 1px solid #e5e5e5; margin: 15px 0; padding: 15px 15px 0 15px;}
#setHoliday fieldset .radio {margin-top: 0;}

#newHoliday {margin-top: -5px;}

/* MESSAGES */
table.head {margin: -15px 0 0 0;}
tbody.clickable tr, tr.clickable {cursor: pointer;}


.clickable[ aria-expanded="false"] .opened {display: none;}
.clickable[ aria-expanded="true"] .closed {display: none;}


tr.new {color: #3071A9;}
tr.error {background-color: #ffd6cc !important;}
tr.error td {background-color: #ffd6cc !important;}
tr.warning {background-color: #ffeb9c !important;}
tr.success {background-color: #c6efce !important;}
tr.escalate {background-color: #ed7d31 !important;}

/* #messageCenter {position: relative;} */
#messageCenter .msgFullBody, #messageCenter .newMsgPanel {position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 10; background: #fff; padding: 15px;  transition: all .3s; overflow:auto; opacity: 1;}
#messageCenter .newMsgPanel {z-index: 999998;}
#messageCenter .msgFullBody.goRight, #messageCenter .newMsgPanel.goRight {left: 100%; opacity: 0; }
#messageCenter .msgFullBody h1, #messageCenter .newMsgPanel h1 {display: block; font-size: 1.2em; font-weight: 400; border-bottom: 1px solid #ddd; padding: 0 0 15px 0; margin: 0 0 15px 0;}
#messageCenter .msgFullBody h1 span.pull-right, #messageCenter .newMsgPanel h1 span.pull-right {margin-top: -8px;}
#messageCenter .msgFullBody h1 .close {color: #666; transition: all .3s; font-size: .8em; font-weight: 300; opacity:1;}
#messageCenter .msgFullBody .close:hover {color: #900;}
#messageCenter .msgFullBody > header {border-bottom: 1px solid #ddd; color: #666; background: #fff; padding: 0 0 15px 0; display:block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

#messageCenter .msgFullBody > .scroll { overflow: auto; display: block; padding: 15px 0 0 0; }
#messageCenter.mainpanel table {margin-bottom: 0;}

/* STATUSBAR ALLOVER */

#statusbar {position: fixed; top: 10px; left: 50%; z-index: 999999; transform: translate(-50%,0);}
#statusbar .hint {display:block;}

/* TAGESPLAN */
.day.plan .spectable {margin-right: 0px;} /*Abstand 15px von rechts*/
.day.plan {margin-top: 15px;}
.day.plan .scrollonoverflow {overflow: hidden;}
.day.plan .tablescroll {margin-left: -15px; margin-right: 0;}

.day.plan table { table-layout:fixed; margin-bottom: 0;}

.datepicker_daySwitch, .datepicker_weekSwitch{min-width: 215px;}

#content.dayplan address {margin-bottom: 0;}

/* AVATARE */
span.avatar {

    display: flex;
    align-items: center;
    justify-content: center;
    height: 2rem;

    overflow: hidden;
    width: 2rem;
}
span.check {
    margin: 0 0 0 10px;
    float: right;
}

a.pull_right {
    margin: 0 50px 0 0;
    float: right;
}

#list .card {border: 1px solid #ddd; padding: 15px; margin: 0 0 15px 0; cursor: pointer; position: relative; box-shadow: 0 5px 10px -5px rgba(0,0,0,.1); min-height: 135px;}
#list .card:hover {background: #eee;}
#list .card .avatar {display: inline-block; height: 80px; margin-right: 15px; width: 80px; border-radius: 5px; overflow: hidden; box-shadow: 0px 1px 3px -1px rgba(0,0,0,.4); padding: 3px; background: #fff;}
#list .card .avatar img {width: auto; height: 100%; margin: 0 auto; display: block; line-height: 1; border-radius: 3px;}
span.avatar img {}
span.avatar img {
    position: absolute;
    top: 50%;
    transform: translate(0px, -50%);
    width: 100%;
    height: auto;
}

#list .card .context  {position: relative; display: block;margin-left: 95px;}
#list .card .context h2 {margin-bottom: 10px;}
#list .card .context p {margin: 0; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
#list .card .context p i {display: inline-block; width: 1em; margin-right: 5px; text-align: center;}
#list .card input[name="checkuser"] {z-index: 3; position: absolute; right: 15px; top:15px;
}


.btn-toolbar.stafflist .button-group-addon {padding: 6px 6px 9px;}

/* TAGESPLANER EINSÄTZE*/
.day th, .day td {height: 36px !important;}

.planer td.timeline span {
    height: 5px; display:block; margin: 7px -9px 0 -8px;box-sizing:content-box;
    background: #ccc;
}

/*tr.job {display: none;}*/
tr.eo span.name {padding-right: 20px;}
tr.eo span.name {position: relative;}
tr.eo span.name .switch {position: absolute; right: 0px; top: 2px;}
.planer td.job span {
    display:block; margin: -8px; box-sizing:content-box;
    background: #69C;
    height: 35px;
}

.planer td span.half {width: 50%; }
.planer td span.half.start {margin-left: 50%; padding: 0 9px 0 0px; }
.planer td span.half.end {padding: 0 0 0 8px; }
.planer td span.start {border-radius: 5px 0 0 5px; border-left: 1px solid rgba(0,0,0,.1);}
.planer td span.end {border-radius: 0 5px 5px 0; border-right: 1px solid rgba(0,0,0,.1);}
.planer td span.full {width: 100%; padding: 0 9px 0 8px;}

.content .subnav { position: absolute; top: 0; bottom: 0; width: 150px; border-right: 1px solid #f00; z-index: 100; left: -15px; background: lime; display: block;
}

.content .subnav ul {list-style: none; margin: 0; padding: 0;}
.content .subnav ul li a {border-bottom: 1px solid #ddd; display: block; padding: 10px 15px; display: block;}


#ajax-loader {position: absolute; top: 0; left: 0; right:0; bottom: 0; background: rgba(255,255,255,.7); z-index: 99999999;}
#ajax-loader > img {position: absolute; top: 50%; left: 50%; margin: -16px 0 0 -16px;}


/* STAFF PROFILE */

.content-wrapper.profile {padding: 15px 0 0 0;}
.well-profile .avatar {border: 5px solid #fff; border-radius: 3px; margin-bottom: 15px; max-width: 100px; max-height: 100px;}
.well-profile h2 {font-size: 2em;}
.well-profile table.profile-table {margin: 15px 0 0 0;width: 100%;border-collapse: separate;}
.well-profile table.profile-table tr td, .well-profile table.profile-table tr th {padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,.1); border-top: 1px solid rgba(255,255,255,.1);}
.well-profile table.profile-table tr td {text-align: right;}
.well-profile table.profile-table tr:last-child td, .well-profile table.profile-table tr:last-child th {border-bottom: none;}
.well-profile table.profile-table tr:first-child td, .well-profile table.profile-table tr:first-child th {border-top: none;}

#affinity .eolist ul{margin: 0; padding: 0; list-style: none;}
#affinity .eolist ul.sublist ul {margin-left: 1.25em;}


/* feedback  link */

div#issuebox {bottom: 0px; left: 0px; right: 0px; background: rgba(87,156,192,.9); position: fixed; z-index: 99999; display: block; width: 100%;}
a.issue {padding: 8px; display: block; position: absolute; right:15px; top: -35px;  text-align: center; background: rgba(87,156,192,.9); border-radius: 4px 4px 0 0; white-space: nowrap;}
a.issue i {color: #fff ; display: inline-block; text-align: center; width: 20px;}
a.issue .title {color: #fff; line-height: 1;margin: 3px 0 -3px 0; display: inline-block; width: 0px; overflow: hidden; transition: all .3s; text-align: left;}

a.issue:hover .title {width: 60px;}

div#issuebox .form {display: block; overflow: hidden; height: 0px; transition: height .3s;}
div#issuebox.open .form {height: 550px;}
div#issuebox .form .container {padding: 30px 0; max-width: 600px;}
div#issuebox .form h1 {color: #D9EDF7; font-size: 2em; margin: 0; padding: 0 0 20px 0; font-weight: 100;}
div#issuebox .form label {color: #D9EDF7;}

div#issuebox .form input, div#issuebox .form select, div#issuebox .form textarea, div#issuebox .form .btn-issue, div#issuebox .file-caption.form-control {border: 1px solid #3c7d9f; background: rgb(87,156,192); color: #fff;}
div#issuebox .form .btn-issue:hover {background: #3c7d9f;}
div#issuebox .message .alert {margin-top: 20px;}

.delete_item {text-decoration: line-through;}


.yearholidayview {padding-top: 1em;}


/* MOBILE VIEW */
html, body { height: 100%;}

/* HINTERGRUND FÜR MOBILE DARSTELLUNG */
@media (max-width: 767px) {


    header#top .wrapper {background: rgba(255,255,255,1) !important; }
    /*
    header#top .wrapper .btn-default {
        background-color: rgba(0,0,0,.4);
        border: none;
        border-radius: 2px;
        color: #fff;
    }*/

    .modal-body {overflow: hidden;}
    .modal-content .scroll {
        max-height: 9999px;
    }

    header#top .wrapper a.user span.image {background: rgba(0,0,0,.4);border: none; border-radius: 2px;}

    .optionNavigation {background: none !important; border-bottom: none !important}
    .optionNavigation .mobile .week-switch {
        position: relative; width: 100%; background: #fff !important; margin-top: -15px; padding: 15px 0 0 0;
        z-index: 1;
    }
    .optionNavigation .mobile .week-switch:not(.weekview) {
        top: calc(101px + 22vw);
        left: 5px; right: 5px;
        margin: 0;
        position: fixed;
        display: block;
        width: auto;
        background: none !important;
        color: #fff; font-size: 2em; text-shadow: 0 0 15px rgba(0,0,0,.5), 0 0 5px rgba(0,0,0,.7); font-weight: 100;
    }
    .optionNavigation .mobile .week-switch:not(.weekview) a {color: #fff;}

    .modal-backdrop {bottom: 0; z-index: 999;}
}

a.issue, div#issuebox {background: rgb(174,22,19); display: none;}

/* BOUNCE ICON MESSAGES */

.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.btn-mobile-print{
    padding-left: 3px;
}

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-2px,0);
            transform: translate3d(0,-2px,0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -2px,0);
            transform: translate3d(0, -2px,0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
          animation-name: bounce;
  -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
	-webkit-animation-iteration-count: 3;
	animation-iteration-count: 3;
}


.xsmall {font-size: 8px !important; color: #c00; position: absolute; top: -5px; right: -3px; z-index: 10;}
.xsmall.userview_mobile {font-size: 5px !important; left: 26px; top: 12px;}


@media (min-width: 992px){
    .mobileview {display: none;}
}

@media (orientation: portrait) and (max-width: 992px){
    .nomobile {display: none !important;}

    [data-orienation="portrait"] {display: block;}
    [data-orienation="landscape"] {display: none !important;}

    #bgPart {background: #ddd; position: fixed; top: 101px; left: 0; right: 0; bottom: 0%; opacity: 0; background-position: left top; background-size: cover; background-repeat: no-repeat; z-index: -1;
        -webkit-animation: fademein 1s forwards; /* Chrome, Safari, Opera */
        animation: fademein 1s forwards;
        box-shadow: inset 0 -10000px  0px  rgba(0,0,0,.3);
    }
    /* Code for Chrome, Safari and Opera */
    @-webkit-keyframes fademein {from {opacity: 0;} to {opacity: 1;}}
    /* Standard syntax */
    @keyframes fademein {from {opacity: 0;} to {opacity: 1;}}



    .mobileview {position: fixed; left: 0; bottom: 31px; right: 0; display: block; padding: 5px; background: rgba(255,255,255,.75); box-shadow: 0 15px 20px 20px rgba(0,0,0,0);}
    .mobileview table {margin: 0; padding:  0; }
    .mobileview table th {text-align: center; height: 13.25vw; vertical-align: middle !important; font-size: 4vw; color: #fff; font-weight: 400; background: rgba(174,22,19,1); border-radius: 2px;}
    .mobileview table td {text-align: center; height: 13.25vw; vertical-align: middle !important; font-size: 4vw; transition: all .3s; background: rgba(255,255,255,.9); font-weight: 100; border-radius: 2px;}
    .mobileview table td.hasJA:hover {color: #66A5C5; cursor: pointer;}
    .mobileview table td.today {font-weight: 300; background: rgba(255,255,210,.9);}
    .hasJobSignal {font-size: 10px; display: block; width: 10px; height: 10px; margin: 0 auto -10px auto;}
    .hasJobSignal .job {color: #66A5C5}
    .hasJobSignal .illness,
    .hasJobSignal .absence {color: #dc3545}
    .hasJobSignal .vacation {color: rgb(var(--pepito-blue));}
    .hasJobSignal .holiday {color: #666666}
    .hasJobSignal .task {color: #28a745}
    .mobileview table, .mobileview table tr th, .mobileview table tr td {border:none; border-collapse: separate; border-spacing: 5px;}

}

@media (orientation: landscape) and (max-width: 992px){

    .no_job {display: none !important;}
    [data-orienation="portrait"] {display: none !important;}
    [data-orienation="landscape"] {display: block;}
}

/* RECEIPIENTS */
.selectedReceipients, .selectedInvitee, .selectedStaff{position: relative; display: block; border-bottom: 1px solid #ddd; padding: 5px 0; width: 100%;}
.selectedReceipients .addrecipient, .selectedInvitee .addinvitee, .selectedStaff .addstaff{position: absolute; top: 0; right: 0; border: 1px solid #ccc; border-radius: 100%; display: flex; justify-content: center; width: 1.5rem; height: 1.5rem; align-items: center; color: #ccc; transition: all 300ms;}
.selectedReceipients .addrecipient:hover, .selectedInvitee .addinvitee:hover, .selectedStaff .addstaff:hover {color: #3DA4DC; border-color: #3DA4DC;}
.selectedReceipients .elements, .selectedInvitee .elements, .selectedStaff .elements  {position: relative; margin-right: 35px; min-height: 25px; display: block;}
.pepito_recepient_select, .pepito_invitation_select, .pepito_staff_select {display: none;}

.selectedReceipients.open .pepito_recepient_select,
.selectedInvitee.open .pepito_invitation_select,
.selectedStaff.open .pepito_staff_select {display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 100; background: #fff;}

#recipient, #invited, #staff {position: relative; min-height: 25px; border: 1px solid #ccc; border-top: 0; margin-top: -2px; padding: 15px; max-height: 250px; overflow: auto; border-radius: 0 0 4px 4px;}
#recipient ul, #invited ul, #staff ul {margin: 15px 0; padding: 0; list-style: none;}
#recipient .closeRec, #invited .closeRec, #staff .closeRec {position: absolute; top: 17px; right: 15px; border: 1px solid #ccc; border-radius: 100%; width: 25px; height: 25px; display: block; text-align: center; line-height: 25px; color: #ccc; transition: all 300ms; z-index: 10;}
#recipient .closeRec:hover, #invited .closeRec:hover, #staff .closeRec:hover {color: #3DA4DC; border-color: #3DA4DC;}
#recipient ul li, #invited ul li, #staff ul li {padding: 5px 0; border-bottom: 1px dotted #ccc; cursor: pointer;}

.elements .user {background: #ccc; border-radius: 3px; display: inline-block; padding: 3px; margin: 0 3px 3px 0;}
.elements .user i {cursor: pointer; transition: color 500ms;}
.elements .user i:hover {color: #900;}


form.ajax > .waitloader {position: absolute; width: 100%; background: rgba(255,255,255,.6) url(../gfx/aloader.gif) center center no-repeat; z-index: 20; top: 0; bottom: 0; display: block;}
.modal-body > .waitloader {position: relative; width: 100%; background: rgba(255,255,255,.6) url(../gfx/aloader.gif) center center no-repeat; z-index: 20; height: 100px; display: block;}
.modal-body > .waitloader.abs {position: absolute; top:0; left: 0; right: 0; bottom: 0; z-index: 10; height: auto !important;}

/*
@media (max-width: 992px) {
    .ma_filter {
        position: fixed;
        z-index: 9999;
        left: 15px !important;
        right: 15px !important;
        top: auto;
        min-width: 0 !important;
    }
} */


footer#main {background: #eee; border-top: 1px solid #ddd; z-index: 100;}
footer#main p {margin: 0; padding: 0 1em; line-height: 30px; color: #aaa; text-align: right; font-weight: 300; font-size: .9em;}
footer#main p a {color: inherit; text-decoration: none;}

.drop_job .helper  {
    border: 1px dotted rgba(0,0,0,.3);
    background: rgba(0,0,0,.1);
    border-radius: 3px;
    padding: 3px 5px;
    margin: 2px;
    display:inline-block;
    overflow: hidden;
    width: 70%;
    position: relative;
}

.drop_job > .helper {
    width: 100%;
    margin: 5px 0 0 0;
    border: 1px dotted rgba(0,204,51,.8);
    background: rgba(0,204,51,.1);
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.work_contract_table {
    padding: 8px 2px !important;
}

.no_margin_top{margin-top: 0px !important;}

.staff_absence .name {
    -webkit-filter:grayscale(1);
    filter: grayscale(1);
    z-index: 1;
    opacity: .6;
}

.bold_title {font-weight: bold; color: #579cc0; color: rgb(var(--pepito-blue));}
.bold, strong {font-weight: bold !important;}
.table_blue th {font-weight: bold; color: #579cc0; color: rgb(var(--pepito-blue));}
.message {color: #878787;}



.monthview-menu .dropdown-item:hover {
    background: #eee;
}

@media (max-width: 992px){

    #hourcount_modal .monthview-menu {
      position: fixed !important;
      z-index: 99999999;
	  top: 10rem;
	  left: 5rem;
      right: 5rem;
      bottom: 10rem;
      overflow: auto;
      box-shadow: 0 0 0px 100rem rgba(0,0,0,.2);
    }

    #hourcount_modal .monthview-menu .dropdown-item {border-bottom: 1px solid #ddd; padding: 1rem;}
    #hourcount_modal .monthview-menu .dropdown-item:last-child {border-bottom: none;}
}


.dropdown_hour button{margin: 5px !important;}

.approvalHints{
    font-size: 13px !important;
}

a.approvalHints {
    color:#000000;
}

.sign { font-size: 1rem;
        font-family: "Font Awesome 5 Free";
        font-weight: 400; content: "\f067";}

.sign input{ position: absolute;
        clip: rect(0,0,0,0);
        pointer-events: none;}

i{
    text-align: center;
}

.btn i{
/*    display: inline-block;
    font-size: 1.5rem !important;
    width: 15px;*/
    text-align: center;
}

h2 i, h4 i{
    width:20px;
    text-align: center;
}

h1 > i{
    width:40px;
    text-align: center;
}

i.black{
    color: #555; font-size: 13px;
}
/*input[type=radio]{
    height:20px;
}*/

.checkbox input[type="checkbox"]{
    margin-top: 2px !important;
}

.switchery-small{
    border-radius: 11px !important;
    height: 11px !important;
    width: 23px !important;
}
.switchery-small small{
    height: 11px !important;
    width: 11px !important;
}
.switchlabel{
    font-weight: normal !important;
}
.halfday_top{
    margin-top: -5px;
}
.halfday_bottom{
    margin-bottom: 5px;
}

.pull-down{
   position: absolute;
   bottom: 1px;
   right: 7px;
   padding-top: 5px;
}

button.chrono{ display: inline-block;}

@media(max-width: 767px){
    button.chrono{
        display: block;
        width: 100%;
    }
}

#vacation {height:100%;}

.chrono_ist{padding-top:5px;}
.chrono_ist_bold{padding-top:5px;font-weight:bold;}

.btn-xxs { font-size: 10px !important;}

/* th.width_1 { width: 35px !important;}
th.width_2 { width: 100px !important;}
th.width_2_5 { width: 150px !important;}
th.width_3 { width: 250px !important;}
th.width_2.border-space { width: 150px !important;}
th.width_auto { width: auto !important;} */

.chrono_table a{
    color: rgb(var(--pepito-blue)) !important;
    padding: 2px !important;
}
.chrono_table a:hover{
  color: #FFFFFF !important;
  background-color: #579cc0;
  background-color: rgb(var(--pepito-blue)) !important;
}
.chrono_table a:active {
  color: #FFFFFF !important;
  background-color: #579cc0;
  background-color: rgb(var(--pepito-blue)) !important;
}

.chrono_table a.text-danger{
    color: #990200 !important;;
    padding: 2px !important;
}
.chrono_table a.text-danger:hover{
  color: #FFFFFF !important;
  background-color: #990200 !important;
}
.chrono_table a.text-danger:active {
  color: #FFFFFF !important;
  background-color: #990200 !important;
}

.btn-pep {
  color: #FFFFFF !important;
  background-color: #579cc0;
  background-color: rgb(var(--pepito-blue)) !important;
}

.btn-pep-out {
  color: rgb(var(--pepito-blue)) !important;
  background-color: #FFFFFF;
}
.text-pep {
  color: rgb(var(--pepito-blue)) !important;
}
.text-gray {
  color: #999 !important;
}

.btn-danger-out {
  color: #990200 !important;
  background-color: #FFFFFF;
}

.btn-pep-out:hover {
  color: #FFFFFF !important;
  background-color: #579cc0;
  background-color: rgb(var(--pepito-blue)) !important;
}
.btn-danger-out:hover {
  color: #FFFFFF !important;
  background-color:  #990200 !important;
}

/* Fix for draggable Modals*/
.modal-content {height: auto !important;}

#eip {
    position: fixed; width: 550px; max-width: 80vw; background: #fff; left: 50%; top: 10%; transform: translate(-50%, 50%);
    padding: 3rem; box-shadow: 0 0 0 10000vh rgba(62,163,220,.5);
    z-index: -1; opacity: 0; transition: opacity, transform 500ms;
}

body.showEIP #eip {
    z-index: 999999; opacity: 1;transform: translate(-50%, 0%);
}

#eip h1 {margin-bottom: 1rem; font-size: 2.5rem;}

#eip .phonenumber {font-size: 1.3rem; color: rgb(62,163,220); display: block; font-weight: 900; margin: 1rem 0;}

#eip .phonenumber:hover {color: rgb(29, 121, 173);}
#eip .close {position: absolute; top: 1.5rem; right: 1.5rem;}

#eip .btn-pepito {background: rgb(62,163,220); border-color: rgb(62,163,220); color: #fff;}
#eip .btn-pepito:hover {background: rgb(29, 121, 173); border-color: rgb(29, 121, 173);}

@media(min-width: 992px){
    #eip .image {margin-right: 5rem;}
    .btn-md-inline {display: inline !important;}
    #eip .phonenumber {font-size: 3rem; }
}

.modal-staffscript {z-index: 1051;}


.avatar.capitals {
   display: flex;
   width: 1.5rem;
   height: 1.5rem;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   font-size: .6rem;
   color: white;
}

.symbol.capitals {
    width: 1.75rem;
   height: 1.75rem;
   align-items: center;
   justify-content: center;
   border-radius: .375rem;
}

.avatar.capitals {
    background-color: rgb(var(--pepito-blue));
}
/*
.avatar.capitals.female {
    background-color: #e685e9;
} */

.avatar.capitals.divers {
    color: #222;
    background: linear-gradient(
    to bottom right,
    #cccccc, /* hellgrau statt schwarz */
    #d2b48c, /* hellbraun */
    #ffb3b3, /* hellrot */
    #ffd699, /* hellorange */
    #ffffb3, /* hellgelb */
    #b3ffb3, /* hellgrün */
    #b3d9ff, /* hellblau */
    #d9b3ff, /* hellviolett */
    #cceeff, /* pastell-hellblau (trans) */
    #ffd6e7  /* pastell-rosa (trans) */
  );
}

#user_cards .card {cursor: pointer;}


td.bg-success, td.bg-danger, td.bg-warning {
    --bs-bg-opacity: .1;
}

.user-card .list-group{
    max-height: 9rem;
    overflow: auto;
}

li.in-selected {
    position: relative;
}

li.in-selected::after{
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(87, 156, 192)' class='bi bi-check' viewBox='0 0 16 16'><path d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z'/></svg>");
    color: var(--bs-success);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-40%);

}

/* Mindestbreite Monatsname */
#month_name {min-width: 81px; text-align: center;}

/* Mindestbreite selectedRegion */
#selectedRegion {min-width: 1.5rem; text-align: center;}