/* 
    Created on : 10.07.2019, 12:20:18
    Author     : Harald Grob
*/

@media screen {

body {
}

.text-normal {
    color: black;
    font-weight: normal;
}


/* START - Table header and first row fixed*/

.container {
/*    width: 1000px;*/
}

.grid-container {
    display: grid; /* This is a (hacky) way to make the .grid element size to fit its content */
/*    box-sizing: border-box;*/
    overflow: auto;
    height: 700px;
    /*    grid-auto-rows: 1fr;*/
    }

.grid {
    display: flex;
    flex-wrap: nowrap;
    align-content: flex-start;
}

.grid-col {
/*    width: 120px;*/
    width: 155px;  /* Änderung 2021-02-15 Breite der ersten Spalte fix - Breite der anderen Spalten vergrößern*/
}

.grid-item--header {
    position: sticky;
    position: -webkit-sticky;
    position: -moz-sticky;
    background: white;
    top: 0;
    font-weight: bold;
}

.grid-col--fixed-left {
    position: sticky;
    position: -webkit-sticky;
    position: -moz-sticky;
    width: 110px; /* Änderung 2021-02-15 Breite der ersten Spalte fix - Breite der anderen Spalten vergrößern*/
    left: 0;
    z-index: 9998;
    background: white;
    font-weight: bold;
}
.grid-col--fixed-right {
    position: sticky;
    position: -webkit-sticky;
    position: -moz-sticky;
    right: 0;
    z-index: 9998;
    background: white;
}

.grid-item {
    height: 90px;  /* Änderung vom 2020-10-02, weil Springer wegfielen, vorher -> height: 145px; */
    border: 1px solid #e8e8e8;
    border-bottom-color: black; 
}

.grid-item-first {
    height: 30px;
    border-bottom: 1px solid #e8e8e8;
}

/*.grid-item-first:not(:first-child) {
    border-left: 1px solid #e8e8e8;
}*/

/* END - Table header and first row fixed*/

.eintragen {
    max-width: 600px;
}

.liste {
    max-width: 850px;
}

.error {
    padding: 3px 5px;
    color: lightcoral;
}

.space5px {
    margin-top: 5px;
}

.space30px {
    margin-top: 30px;
}

.grid-header-dayval{
    text-align: left;
}

.grid-header-zeit {
    padding-left: 5px;
}

.grid-firstcol-val {
    padding-left: 5px;
}

.beter, .beter-intern, .beter-extern, .springer {
    padding: 2px;
    border: 1px dotted grey;
    box-sizing: border-box;
    border-radius: 3px;
}

.beter {
    background-color: #cbfeb9;
}

.beter-intern {
    background-color: #cbfeb9;
}

.beter-extern {
    background-color: #cbfeb9;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px);
}

.springer {
    background-color: #d9edf7;
    color: #808080;
}

.hour-ende, .hour-start {
    height: 100%;
    padding: 7px;
    font-size: 110%;
    border: 1px dotted grey;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #ffd0b4;
}

.color-godi {
    background-color: #F8FF60;
}

.btn-block {
    
}

.bold {
    font-weight: bold;
}

.container-delete {
    max-width: 800px;
}

.box-date {
    background-color: #fcf5e8;
}

.big-font  {
    margin: 0;
    padding: 3px;
    font-size: 110%;
}

.big {
    font-size: 120%;
    width: 100%;
}

.person {
    margin: 0;
    padding: 3px;
}

.delete-group {
    margin-bottom: 10px;
    border: 1px dashed grey;
}

.form-delete {
}

.form-edit {
}

span.role {
    display: inline-block;
    width: 70px;
}

span.jq-person-text {
    font-size: 93%;
    font-weight: bold;
}

span.jq-person-text role {
    font-size: 110%;
    white-space: nowrap;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
}

.flex-container-legende {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    row-gap: 5px;
    column-gap: 5px;
}

.flex-nowrap {
    flex-wrap: nowrap;
}
.flex-item {
    
}

.input-small {
    width: 80px !important;
}

.border-alert-warning {
    border: 1px solid #dbc13b;
}

.border-alert-danger {
    border: 1px solid #dea6a6;
}

.adminBereich {
    margin-bottom: 10px;
}

.no-margin-padding {
    margin: 0;
    padding: 3px;
}

.offenes-gebet {
    height: 100%;
    width: 100%;
    background-color: #B5FF4C;
    margin-right: 5px;
    padding: 2px 0 0 2px;
    box-sizing: border-box;
    border-radius: 5px;
}

.offenes-gebet-bg {
    background-color: #B5FF4C;
}

.offenes-gebet-info {
    font-weight: normal;
    font-size: 85%;
}

.godi-zeit {
    height: 100%;
    width: 100%;
    margin-right: 5px;
    padding: 2px 0 0 2px;
    box-sizing: border-box;
    border-radius: 5px;
}

.brd-red {
    border: 2px solid red;
    border-radius: 8px;
}

.brd-green {
    border: 2px solid lightgreen;
    border-radius: 8px;
}

.p-5 {
    padding: 5px;
}

.ml-5 {
    margin-left: 5px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-15 {
    margin-left: 15px;
}

.ml-20 {
    margin-left: 20px;
}

.mr-5 {
    margin-right: 5px;
}

.mt-5 {
    margin-top: 5px;
}

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

.mb-5 {
    margin-bottom: 5px;
}

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

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

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

.mobile-mt-5 {
    margin-top: 0;
}
    
.mobile-mt-10 {
    margin-top: 0;
}

.mobile-mb-10 {
    margin-bottom: 0;
}

.mobile-ml-10 {
    margin-left: 10px;
}

.display-inline {
    display: inline;
}

.bg-textfield {
    display: inline-block;
    text-align: center;
    border: 1px solid darkgreen;
    padding: 1px 8px;
    color: black;
    border-radius: 5px;
}

} /* Ende @media */

@media screen and (max-width: 620px) {
    
/*    .grid-col {
        width: 130px;   Änderung 2021-02-15 Breite der ersten Spalte fix - Breite der anderen Spalten vergrößern
    }*/

    .grid-col--fixed-left {
        width: 70px;
    }
    
    .mobile-mt-5 {
        margin-top: 5px;
    }
    
    .mobile-mt-10 {
        margin-top: 10px;
    }
    
    .mobile-mb-10 {
        margin-bottom: 10px;
    }
    
    .mobile-ml-10 {
        margin-left: 0;
    }
    
} /* Ende @media screen max-width 400px */

@media (min-width:768px) {
 .container {
  width:750px
 }
}
@media (min-width:992px) {
 .container {
  width:1000px
 }
}
@media (min-width:1200px) {
 .container {
  width:1170px
 }
}
@media (min-width:1600px) {
 .container {
  width:1400px
 }
}